DIVA Player End Of Playback screen customization

What you learn

Learn how to customize DIVA Player End Of Playback screen with Up Next or Related items.

Before starting

• Ensure your project is checked out into your local workspace.
• Install all project dependencies.

Configuration

Video playback is managed by DIVA Player, replacing the legacy AXIS player. DIVA Player is set as the default player in a new AXIS application, controlled by the CLIENT_DIVA_ENABLED environment variable.

CLIENT_DIVA_ENABLED = true;

If DIVA player with BO Adapter is required, CLIENT_DIVA_BO_SETTING_BASE_PATH environment variable should be setup.

CLIENT_DIVA_BO_SETTING_BASE_PATH = "url to DIVA bo adapter settings file"

End of Playback screen customization

DIVA player allows to customize End Of Playback(EoP) screen with additional UI/UX changes. Update item's metadata with additional data for correct EoP screen customization.

• useMetadataProvider hook is responsible for metadataProvider metadata provider and videoMetadataMap callback update.
• metadataProvider is used for metadata customization for DIVA player without BO adapter.
• videoMetadataMap is used for metadata updates for DIVA player with BO adapter.

export const useMetadataProvider = (props: { configAPI: IConfigAPI<PlaybackModuleConfig>, item: ItemSummary, playerData: MediaFile[], id: string }) => {
    ...
    const videoMetadataMap = useCallback(async (metadata: VideoMetadata) => {
        ...
        return vd
    }, [...]);

    const metadataProvider = useMemo(() => videoMetadataProvider({ ... }), [...]);

    return { metadataProvider, videoMetadataMap };
}

Squeeze Back Time and Countdown customization

Use the videoMetadataMap callback to add countdownToAutoplay (to add the autoplay countdown at the end of play) and squeezeBackTime (to add the squeezeback at the end of play) into the endOfPlay section of the behaviour object:

• squeezeBackTime - a positive integer that specifies the number of milliseconds before the end of the video when the DIVA Player starts the squeezeback, defines in milliseconds.

• countdownToAutoplay - a positive integer that enables or disables the autoplay at the end of the time set, defines in milliseconds.

const videoMetadataMap = useCallback(async (metadata: VideoMetadata) => {
        ...
        vd.behaviour = {
            ...vd.behaviour,
            endOfPlay: {
                countdownToAutoplay: 5 * 1000,
                squeezeBackTime: 10 * 1000
            }
        }
        ...
        return vd
    }, [...]);

Up Next data setup

Use the videoMetadataMap callback to set upNext metadata property with next data from the useEopDataProvider hook:

const { eopData } = useEopDataProvider(item, id, isDivaWithBO, playbackConfig?.divaEOPRelatedCount);
...
const videoMetadataMap = useCallback(async (metadata: VideoMetadata) => {
        ...
        let nextItem: UpNext;
        if (eopData?.isChainPlayback) {
            const itemId = eopData?.getNextItemIdByVideoId?.(metadata.videoId);
            nextItem = await eopData?.getNextItemData?.(itemId);
        }

        if (nextItem) {
            vd.upNext = nextItem
        }

        return vd
    }, [...]);

Related data setup

Use the videoMetadataMap callback to set related metadata property (to add a list of related videos at the end of play) with data from the useEopDataProvider hook:

const { eopData } = useEopDataProvider(item, id, isDivaWithBO, playbackConfig?.divaEOPRelatedCount);
...
const videoMetadataMap = useCallback(async (metadata: VideoMetadata) => {
        ...
        let relatedItems: Related;
        if (!eopData?.isChainPlayback) {
            const itemId = eopData?.getRelatedItemIdByVideoId?.(metadata.videoId);
            relatedItems = await eopData?.getRelatedData?.(itemId);
        }

        if (relatedItems) {
            vd.related = relatedItems
        }
        ...
        return vd
    }, [...]);

The legacy Axis application had the only 3 items visible on EoP screen. The same number is kept for new implementation, but it can be overriden in the playback module configuration. Put the required number of visible related items as divaEOPRelatedCount property value of playback configuration for Playback module initialization.

PlaybackInitializer({
        ...
        playback: {
            divaEOPRelatedCount: 5
        }
    }),

Time to disable autoplay customization

There is one more DIVA Player parameter to control the chainplay autoplay flow.

timeToDisableAutoplay disables the autoplay at the end of the milliseconds set with no interactions.

To configure how many milliseconds of user inactivity will disable autoplay, set timeToDisableAutoplay:

{
    "general": {
        "timeToDisableAutoplay": 5400000, //milliseconds, default 0, 0 or negative means disabled
    },
}