Initial thoughts on design

[cbeach47]

Using this PR to nail down the concept of the initial slideshow effort, and some future goals, into a README

[ChristianMurphy]

So far so good! Thanks @cbeach47!

Some general questions

• would this slideshow run inside oEQ, external to oEQ, or both?
• what (if any) constraints around authorization and sessions apply to the component?

[ChristianMurphy]

https://howlerjs.com and https://github.com/bbc/peaks.js can come in handy

[ChristianMurphy]

https://plyr.io and https://videojs.com are slick, Kaltura also has some embedding features IIRC

[ChristianMurphy]

A good starting point, something which will likely come up would be having multiple items, paging, and autoplay

uPortal's slideshow components ended up adding these by popular request
https://uportal-contrib.github.io/uPortal-web-components/en/components/dashboard-carousel/demo
https://uportal-contrib.github.io/uPortal-web-components/en/components/content-carousel/demo

https://glidejs.com and https://kenwheeler.github.io/slick offer some good options for creating these types of experiences.

[cbeach47]

I have a bit of experience with slick, zero with glidejs. I like glidejs in that it seems we wouldn't be tied into a framework. slick requires jquery. not necessarily bad, but gives me a bit of pause. Ideally, I'd like the main image to fill the screen with captions overlaid, and then have an optional carousel at the bottom to show prev / next. Not sure if either of those support that, I'll have to do some research.

[ChristianMurphy]

I like glidejs in that it seems we wouldn't be tied into a framework. slick requires jquery

Agreed, I'd prefer the solution to be jQuery free.

the main image to fill the screen with captions overlaid, and then have an optional carousel at the bottom to show prev / nex
Not sure if either of those support that

It likely can with some work, it's more what layer of abstraction would work best.
We could go higher level than glide or slick, with something like https://www.linxtion.com/demo/react-image-gallery, but it may be challenging to make it work with audio/video.
We could also go lower level, with something like https://www.react-spring.io/docs/hooks/use-springs or https://www.framer.com/api/motion/examples which give fine grained control/apis at the cost of needing to manage the animations, accessibility, and state.

I'll have to do some research.

More ideas, are welcome!
There are a ton of carousel and image gallery components/ui widgets out there.

[edalex-ian]

Sounds good @cbeach47

Couple of things to also ponder:

1. I'd recommend using the new search2 api - as we put a lot of work into making the interface more concrete and ideally suited to a variety of uses (not so heavily UI coupled);
2. There is also the new Lightbox component in the oEQ source. Further work is planned on this for 2021.1 to add manually scrolling through multiple assets (i.e. next/prev), so there may be some useful overlap. (It currently supports images, videos and audio.)
3. In 2021.1 we'll also be looking at the search gallery view, so again there might be some overlap there which you may find useful.

[edalex-ian]

I'd suggest rather than having a massive query string param, instead break the values out as needed - and there's no need to go as raw as having to enter /api/search?.

[cbeach47]

makes sense 👍

[cbeach47]

I'd recommend using the new search2 api - as we put a lot of work into making the interface more concrete and ideally suited to a variety of uses (not so heavily UI coupled);

Sounds good!

There is also the new Lightbox component in the oEQ source. Further work is planned on this for 2021.1 to add manually scrolling through multiple assets (i.e. next/prev), so there may be some useful overlap. (It currently supports images, videos and audio.)

Thanks for flagging this. This may have already been surfaced in a CDM - since one of the design goals is to be decoupled from oEQ, is Lightbox something that we could fold into an oEQ library of sorts in NPM so we can leverage the same components and it'll have a similar L&F?

In 2021.1 we'll also be looking at the search gallery view, so again there might be some overlap there which you may find useful.

My next oEQ mini-project is a gallery-view-like tagging interface to make it simple to tag (via simple metadata tags backed by a taxonomies) multiple items. Interested to see what enhancements are planned.

[edalex-ian]

Thanks for flagging this. This may have already been surfaced in a CDM - since one of the design goals is to be decoupled from oEQ, is Lightbox something that we could fold into an oEQ library of sorts in NPM so we can leverage the same components and it'll have a similar L&F?

Probably is. Indeed, we could maybe look at an oEQ Component library perhaps based on what's in the tsrc/components directory.