Initial thoughts on design #3
Conversation
There was a problem hiding this comment.
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?
| ``` | ||
|
|
||
| ## Future goals | ||
| - Support audio files |
There was a problem hiding this comment.
https://howlerjs.com and https://github.com/bbc/peaks.js can come in handy
|
|
||
| ## Future goals | ||
| - Support audio files | ||
| - Support video files |
There was a problem hiding this comment.
https://plyr.io and https://videojs.com are slick, Kaltura also has some embedding features IIRC
|
|
||
| The slideshow allows 'in app' configuration of the search query to dynamically change the slideshow. Alternatively, the slideshow can be configured with a `search-query` property the handles the configuration. | ||
|
|
||
| For items with multiple images, the slideshow will iterate through all of them, displaying them one at a time. |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Sounds good @cbeach47
Couple of things to also ponder:
- 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);
- 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.)
- 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.
| <div style="width:600;"> | ||
| <oeq-slideshow | ||
| oeq-url="https://some-hosted-oeq-site/" | ||
| search-query="/api/search?q=keyword%20query&start=0&length=10&order=name&reverse=false&info=attachment&showall=false&status=LIVE"> |
There was a problem hiding this comment.
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?.
Sounds good!
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
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. |
Probably is. Indeed, we could maybe look at an oEQ Component library perhaps based on what's in the |
Using this PR to nail down the concept of the initial slideshow effort, and some future goals, into a README