DIVA Player with BO configuration

What you learn

Learn how to set up DIVA Player with the BO (Back Office) adapter.

Before starting

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

Instantiation

The DIVA Player standard and DIVA Player with BO adapter have slightly different configuration APIs.

DIVA Player with BO Configuration

Here is the full DIVA Player with BO API that can be configured by the developer:

export interface BoAdapterWebComponentProps {
	/**
	 * url to reach diva bo adapter settings for the specific project
	 */
	settingsUrl: string;
	/**
	 * pushengine language
	 */
	languageCode: string;
	/**
	 * dictionary language
	 */
	languageDictionary?: string;
	/**
	 * errors callback
	 */
	onDivaBoAdapterError?: OnDivaBoAdapterError;

	/**
	 * 	a middleware for the app to interact and modify the videoData as soon as videoData is returned from the request (passthrough if not defined)
	 */
	videoMetadataMap?: VideoMetadataMap;

	mediaAnalyticsParam?: BoAdapterMediaAnalyticsConfiguration;

	entitlementConfiguration?: BoEntitlementConfiguration;

	config: BoAdapterWebComponentConfig;
}

export type BoAdapterWebComponentConfig = Omit<DivaWebConfiguration,'videoMetadataProvider' | 'dictionary' | 'entitlementProvider' | 'setting' | 'fairplayCertificatePath' | 'sessionId'>;

Check the DivaWebConfiguration API from the previous section for more details.

Key Configuration Properties

• settingsUrl: A valid path to the BO adapter settings.
• languageCode: Sets up the push engine language.
• languageDictionary: Manages dictionary loading.
• onDivaBoAdapterError: Handles BO adapter workflow errors.
• entitlementConfiguration: Configures user entitlements inside the BO adapter.

For more details on each API parameter, refer to the DIVA Player documentation.

DIVA Player with BO Setup in Axis

Here’s how AXIS sets up the DIVA Player with BO:

export function DivaWebWithBO({
    videoId,
    onMediaAnalyticEvent,
    settingUrl,
    resumeProps,
    resumeLoading
}: DivaWebComponentProps) {
    ...
    const divaInputProps: BoAdapterWebComponentProps = {
        settingsUrl: settingUrl,
        languageCode: language ?? 'en-US',
        onDivaBoAdapterError: console.error,
        videoMetadataMap,
        mediaAnalyticsParam: {
            mediaAnalyticsEventHandler: onMediaAnalyticEvent
        },
        config: {
            videoId,
            libs,
            setAPI,
            onMediaAnalyticEvent,
            onVideoError,
            ...resumeProps
        } as DivaWebConfiguration,
        entitlementConfiguration: {
            entitlementUser: setAccessTokenForEntitlementProvider,
            entitlementPlatform: "web_browser",
        },
    };

    return missingVideoId ? (
        <div data-testid="error-overlay"></div>
    ) : (
        <div
            className="diva-player"
            style={{ height: '100%' }}
            onMouseDown={toggleVideoPlayback}
            aria-hidden
            data-testid="diva-boadapter"
        >
            <DivaWebBoAdapter {...divaInputProps} />
        </div>
    );
}

Check AXIS sources for more information on specific DIVA Player configuration values.