Overview
This release introduces a React code upgrade, video player UX/UI improvements, and refreshed timeline and player control icons.
Use the links below to learn more about a specific section.
What's new:
What's new
React code upgrade
As part of our Responsive web upgrade, we're migrating our tech framework from Angular to React. This allows us to combine most of our business logic layers with our WebTV SDK, which already uses React.
This means we only need to develop new feature logic once for the two platforms. In addition, we're also updating and refreshing the UX/UI, bringing it more up-to-date and meeting market expectations.
Video player UX/UI improvements
Following the React code upgrade, we've made some changes to the DIVA UI. We’re continuing to evolve our user's in-app experience, building a modern user-centric solution with intuitive navigational patterns, and improving customizability and accessibility.
Improvements include consolidating the Closed Captions and Audio tracks panel, updating our timeline and player control icons, and reworking the video player navigation, making DIVA's video player feature set more discoverable.
See examples of some of our UX/UI updates below:
UX/UI player example:
Timeline event preview
The event preview functionality displays the detail of a timeline event when hovering over a timeline icon. Users can select left/right arrows on either side of the event to launch DIVA’s alternative timeline.
Event preview example:
Alternative timeline example:
Closed Caption Closed Captions and audio tracks panel
Adjust Closed Captions (CC) and Audio tracks (AT) settings by selecting the Audio and Subtitles button, which is more commonly found within the main DIVA player UI.
This change provides instant access to the accessibility options and better discoverability, making the overall user experience more intuitive and easier for our users. See our subtitles and captioning, and alternate audio tracks articles for more information and examples.
Combined Audio and Subtitles button:
Icon updates
Timeline icons
We've enlarged and consistently sized timeline event icons (16x16 pixels) for better visibility. Larger timeline icons help users distinguish between the different event icons displayed.
If two or more event icons display on the timeline in close proximity, they're now stacked in order of their occurrence, with the latest icon on top. We've made these enhancements to help users visually distinguish between icons on busy timelines. Read our interactive timeline article for more detail.
Read our interactive timeline article for more detail.
Player control icons
In addition to refreshing the timeline icons, we’ve created a cleaner and more modern set of player control icons with an improved navigation pattern, helping to help guide users in discovering all the features DIVA has to offer.
Visit our interactive timeline article for examples.
What's nextWant to know what we're working on, find out what's coming up next, or submit a feature request? Check out our roadmap. |