Initial thoughts on design #3
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,27 @@ | ||
| # openEQUELLA-slideshow | ||
| Web component that leverages openEQUELLA content in a configurable slideshow | ||
|
|
||
| The slideshow displays images from oEQ items. To find the items to display, it leverages the search REST API of oEQ. | ||
|
|
||
| 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. | ||
|
|
||
| To install the web component on a web page: | ||
| ```javascript | ||
| <script src="https://some-hosted-site/oeq-slideshow.js"></script> | ||
| <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 |
||
| </oeq-slideshow> | ||
| </div> | ||
| ``` | ||
|
|
||
| ## 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 |
||
| - 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 |
||
| - Display a caption (from a configurable metadata field) | ||
| - Display a link to directly go to the item whose content is being displayed | ||
| - Have the ability to pause the slideshow and update the metadata (which will be saved in oEQ) for the current piece of content | ||
| - | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agreed, I'd prefer the solution to be jQuery free.
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.
More ideas, are welcome!
There are a ton of carousel and image gallery components/ui widgets out there.