Review Ramp UI

[elynema]

Description

There are a number of ways that Ramp UI differs from the current mediaelement.js player UI in Avalon. Need to review these and identify any UI changes to the Ramp UI to make it work well for current Avalon users.

Example media object in current Avalon: https://media.dlib.indiana.edu/media_objects/qn59qp839 Example record in Ramp: https://iiif-react-media-player.netlify.app/

Description of done

• [x] Review and discuss progress bar and tools, especially volume management buttons and also play button overlay; add lil scrub toggle
• [x] Review and discuss overall media object page design. Will there be any changes to display of metadata, supplemental files, structures, transcripts, create timeline / share, add to playlist?
• [x] For components currently in player (add to playlist, thumbnail), propose place to add those on the media object page where they could be managed by Avalon rather than Ramp
• [x] Create list of goals for improved UX on the media object page
• [x] Meet with Matt and discuss some goals to see if he can create some mockups
• [x] create issues to make changes
• [x] plan for sharing Ramp changes that are not configurable with other Ramp users (UT Austin and Historymakers)

[elynema]

Goals for updated media object page design

• move transcript closer to media player so that users can view them both at the same time since they are synchronized. Does Aviary or Youtube have good models we should adopt?
• Keep viewer and transcript visible even when objects have very long list of sections
• move create thumbnail/poster icon to call to action bar below player (will it be obvious that it is synchronized with playback in the player if we do this?)
• potentially move add to playlist icon from player toolbar to action bar below player?
• can edit / publish / delete tools be moved elsewhere so not taking up space at the top? Maybe below the player?

@Dananji @joncameron Here are a list of goals for working with Matt on layout of media object page. Please edit or add more if you have any other thoughts.

[Dananji]

This is not relevant to this implementation since we are getting rid of the Picture-In-Picture button in Ramp, but I wanted to correct this;

Regarding the Picture-In-Picture button in Ramp, I was incorrect about the comment on the button not working for stream media. The button was disabled in Firefox because the browser provides the functionality by default, but it's enabled in Chrome because it is not on by default. So VideoJS turns it on/off based on the browser compatibility.

[elynema]

Summary of action items for media player buttons from 5/16/2023:

• Add large overlay play button to Ramp (video.js can do this) - change in Ramp
• Volume: switch from horizontal to vertical adjustment bar and move just to the right of the timestamp after the progress bar - change in Ramp
• Change timestamp to format / like YouTube and keep on right side of progress bar - change in Ramp
• Captions: style so that CC button looks different when captions are on and off - change in Ramp ??
• Remove picture in picture button because provided by browser - both Firefox and Chrome - is this something that could be configured outside of Ramp or is it a core change in Ramp?
• Remove download button - configure in Avalon
• Add to playlist button - need to email MCO working group to propose removing functionality of adding clips to playlist
• Lil Scrub - need to retain functionality of more granular scrubbing, but doesn't have to look the same. Review detailed scrubbing functionality in other streaming / video applications to see if there are any useful patterns. If significantly different than current implementation, will want to share proposal with MCO working group. Adding this will likely require adding a custom component in Ramp.

These tasks will be added to other tickets, so just documenting here for now. Major changes to add to playlist and lil scrub will likely need to be reviewed by the MCO working group, but general video.js player in Ramp will be close enough to current mediaelement.js player in Avalon with the proposed changes here that we're not worried about getting feedback on basic button functionality.

We will want to share the Ramp changes with other Ramp users: UT Austin and HistoryMakers.

[Dananji]

One more thing to add: when the structure has long text, Ramp doesn't render them in a user-friendly manner. I think we could probably render these long texts in a more elegant way that's easier to comprehend by the user.

This image shows how these texts are displayed when the structured navigation component spans the full width of the page.

And this is how it renders when the structured navigation component doesn't span the entire width of the page, and this could make the structured navigation component very long making it more un-usable;

The approach we have now in the sections in Avalon where the structure can be collapsed and expanded or something similar could be explored as a solution for this.

[elynema]

Note that MCO working group staff report using the add to playlist with time-based clips of an audio/video item, so we do need to retain this functionality. We may be able to integrate this into a bar of buttons just below the video player, alongside the create thumbnail button. See page re-design work on #5202.

[elynema]

Li'l Scrub will be handled via other issues (see Avalon #5216 for reviewing patterns in other players and Ramp #12 for creating functionality).

[elynema]

on 5/26/23, Emily reached out to Adam Krone (ThirdWave with History Makers) and Larry Yang (UT Austin) about upcoming changes to Ramp and pointed them to the issues in the Ramp repository. I offered the opportunity to ask questions or schedule a conversation. As of 6/29/23, I have not heard back.

Once the metadata component and supplemental files component are available in Ramp (and now that some media player UI changes have been made on the demo site), I should probably reach out to them to let them know a demo is available. Let's do that when #189 (change to audio adjustment bar), #173 (supplemental file component) are completed.

larry.yang@austin.utexas.edu larry.yang@austin.utexas.edu adam.krone@thirdwavellc.com