Timeline

Mobile		Web	TV Platforms

DIVA's Interactive timeline feature enables users to easily retrieve and interact with all events that unfold during live and video-on-demand Sports and Entertainment content. The Interactive timeline displays event markers (icons, configurable on a project basis) and event cards (with further event details). The Interactive timeline is available in two modes, enhanced and alternate.

Enhanced timeline

The enhanced timeline displays markers (icons) indicating key events, providing further information in a corresponding event card. Selecting an event marker returns to the specific moment in the stream.

note

Event markers display across the seekbar and are not interactive, meaning users cannot focus on them.
The markers correspond to an events. Events display in a horizontal row and are presented in chronological order.

Alternate timeline

The alternate timeline is a simplified view, displaying key event details as they unfold at the bottom of the screen. Selecting an event directs the user to the specific moment in the video stream to rewatch key content.

PushEngine component

Configure the timeline collection (a set of event items) via the PushEngine component.

DIVA requirements

DIVA provides a set of configurations to enable the Interactive timeline functionality. A data integration layer using a sports data provider (that gets information from sports feeds like Matrix or Opta), or an editorial content using DIVA's backoffice Video Editor console is required. The data collection must be provided by the project and configured in the pushEngine component.

DIVA setting and videoMetadata

• PushEngine
• Timeline icons customisation
• SpoilerMode
• isMiddleTimelineEventsLineEnabled
• isTimelineEventsVisibleWithCommentaryOpen
• alternateCommentary
• TimelineMode

DIVA translations

The localization of the timeline event items are defined in the pushEngine. To change the language available, link a different collection.

Icon Clustering

DIVA provides the possibility to better identify each single event on the timeline even in those cases where too many close events would overcrowd it.
If two or more events are too close to be clearly displayed on the timeline, DIVA replaces them with a specific icon (not customizable) which represents all the close events grouped in one.
To visualize the complete list of grouped events, the user can access the event cards list. In Responsive Web the user is able to have a preview of the grouped events by hovering the group icon with the mouse cursor.

note

• The group preview will show only the events that fits in DIVA container.
• Icon clustering is applied as well in highlights mode.
• The clustering does not depend on event type (ex. goal, yeallowcard, redcard, etc) but it only depends on timeframe.

Clustering on webTV, AndroidTV, Roku

Clustering on tvOS

Clustering on Native Mobile

Clustering on Responsive Web

Icons Clustering customization

Given that a default timeline icon clustering parameter is stored in Diva, the integrator is able to change it, also at runtime, by applying a custom value using a specific API.
Integrators can set the parameter clustering value to cluster more or fewer icons.

note

• Value = 0: icon clustering disabled.
• Value < 0: default value will be applied.

Responsive Web

Default value 20 pixels

const onDivaAPI = (api: DivaAPI) => {
    // ...
    const newThreshold = 40;
    api.setTimelineIconsMinDistance(newThreshold);
}

Web TV

Default value 40 pixels

const onDivaAPI = (api: DivaAPI) => {
    // ...
    const newThreshold = 100;
    api.setTimelineIconsMinDistance(newThreshold);
}

Android

Default value 10 pixels

divaFragment.api.general.setTimelineIconsMinDistance(distance)

AndroidTV

Default value 40 pixels

divaPlaybackViewModel.divaApis.general.setTimelineIconsMinDistance(distance)

iOS

Default value 22 points

let initializedDiva = Diva(configuration: config)
// ...
// Enables Icon clustering with a value of 40, it can be applied during runtime
await initializedDiva.api.setTimelineIconsMinimalDistance(distance: 40)

tvOS

Default value 29 points

let initializedDiva = DivaTV(configuration: config)
// ...
// Enables Icon clustering with a value of 40, it can be applied during runtime
await initializedDiva.api.setTimelineIconsMinimalDistance(distance: 40)

Roku

Default value 30 pixels

' ...

divaPlayer = getDivaPlayer()

' Setup Diva Player timeline icons min distance. Used for clustering the icons
timelineIconsMinDistance = getTimelineIconsMinDistance()
setTimelineIconsMinDistance(timelineIconsMinDistance)

' ...

' Run Diva Player
runDivaPlayer()

Analytics

For the Interactive timeline, DIVA raises external Analytics events.

Product documentation

For Interactive timeline visuals and behaviors, visit the DIVA help centre.