DE-7265: Add option to disable focus-based interactivity

CHANGELOG.md

@@ -2,13 +2,14 @@
 
 ## New Features
 
+* Add option to disable focus-based keyboard interactivity.
 * Add option to keep player controls hidden.
 * Make `BaseThemeOverlay` more configurable:
-  * Add option to hide buttons (audio, full screen, track options)
-  * Add option to hide the top bar of player controls
+  * Add option to hide buttons (audio, full screen, track options).
+  * Add option to hide the top bar of player controls.
   * Add option to render a companion component above the bottom bar
-    of player controls
-* Add option to display cues on the seek bar
+    of player controls.
+* Add option to display cues on the seek bar.
 
 ## Fixes
 

app/src/InterstitialPage.tsx

@@ -22,11 +22,11 @@ export const InterstitialPage = () => {
         {mounted ? (
           <div className="in-video-container">
             <InterstitialPlayer
+              enableFocus={false}
               asset={{
                 source: {
-                  // url: 'http://localhost:3000/vod-fixed.m3u8',
-                  url: 'http://localhost:3000/vod-preroll.m3u8',
-                  // url: 'https://9457688946fc45ac9a3b526e93b06bf7.us-west-2.alpha.mediatailor.aws.a2z.com/v1/master/5d22c610440c419b9290f9233dc99fe61adb77ab/mt-dev-vod/index.m3u8?aws.insertionMode=GUIDED',
+                  url: 'https://content.players.castlabs.com/api-interstitials-v3/vod-fixed.m3u8',
+                  // url: 'https://content.players.castlabs.com/api-interstitials-v3/vod-preroll.m3u8',
                   type: clpp.Type.HLS,
                 },
               }}
@@ -37,8 +37,11 @@ export const InterstitialPage = () => {
               patchIgnoreStateEnded={true}
               hasTopControlsBar={false}
               interstitialOptions={{
-              // Start resolving X-ASSET-LIST 15 seconds or less before
-              // the cue is scheduled
+                config: {
+                  // license: '',
+                },
+                // Start resolving X-ASSET-LIST 15 seconds or less before
+                // the cue is scheduled
                 resolutionOffsetSec: 15,
                 interstitialAssetConverter: (asset: clpp.interstitial.PlayerItem) => {
                   asset.config.htmlcue = {

package.json

@@ -88,7 +88,7 @@
     "typescript": "^4.8.4"
   },
   "peerDependencies": {
-    "@castlabs/prestoplay": "^6.11.1-beta.4",
+    "@castlabs/prestoplay": "^6.16.1-beta.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

src/components/PlayerSurface.tsx

@@ -5,6 +5,7 @@ import { PrestoContext, PrestoContextType } from '../context/PrestoContext'
 import { Player } from '../Player'
 import { usePrestoUiEvent } from '../react'
 import {
+  enableFocus,
   focusElement,
   focusNextElement, focusPreviousElement,
   getFocusableElements, isIpadOS,
@@ -43,6 +44,10 @@ export interface PlayerProps extends BaseComponentProps {
    * player will go to full-screen mode and no overlay will be possible.
    */
   playsInline?: boolean
+  /**
+   * Enable focus-based keyboard interactivity. Default: true.
+   */
+  enableFocus?: boolean
   children?: React.ReactNode
   /**
    * @private
@@ -81,6 +86,10 @@ export const PlayerSurface = (props: PlayerProps) => {
   })
   const context = getContext(nullableContext)
 
+  useEffect(() => {
+    enableFocus(props.enableFocus ?? true)
+  }, [props.enableFocus])
+
   useEffect(() => {
     context && props.onContext?.(context)
   // eslint-disable-next-line react-hooks/exhaustive-deps

src/interstitial/InterstitialPlayer.tsx

@@ -4,6 +4,7 @@ import '@castlabs/prestoplay/cl.hls'
 import React, { useEffect, useRef } from 'react'
 
 import { ControlsVisibilityMode } from '../services/controls'
+import { enableFocus } from '../utils'
 
 import { InterstitialOverlay } from './components/OverlayHlsi'
 import { PlayerSurfaceHlsi } from './components/PlayerSurfaceHlsi'
@@ -114,6 +115,10 @@ export type InterstitialPlayerProps = {
    * Callback to get the instance of the HLS interstitial player
    */
   onHlsiPlayerReady?: (player: clpp.interstitial.Player) => void
+  /**
+   * Enable focus-based keyboard interactivity. Default: true.
+   */
+  enableFocus?: boolean
 }
 
 /**
@@ -125,6 +130,10 @@ export type InterstitialPlayerProps = {
 export const InterstitialPlayer = React.memo((props: InterstitialPlayerProps) => {
   const playerRef = useRef(new PlayerHlsi(props.onHlsiPlayerReady))
 
+  useEffect(() => {
+    enableFocus(props.enableFocus ?? true)
+  }, [props.enableFocus])
+
   useEffect(() => {
     if (props.patchIgnoreStateEnded) {
       playerRef.current.ignoreStateEnded = true

src/utils.ts

@@ -120,8 +120,17 @@ export function focusPreviousElement(items: HTMLElement[]) {
 }
 
 let focusElementTimerId_: ReturnType<typeof setTimeout> | null = null
+let focusEnabled = true
+
+export function enableFocus(enabled: boolean) {
+  focusEnabled = enabled
+}
 
 export function focusElement(item: HTMLElement) {
+  if (!focusEnabled) {
+    return
+  }
+
   if (focusElementTimerId_) {
     clearTimeout(focusElementTimerId_)
     focusElementTimerId_= null