DE-7270: Add autoplay to HLS-I (#49)

app/src/InterstitialPage.tsx

@@ -7,7 +7,7 @@ import { InterstitialPlayer } from '../../src'
  * A page featuring the HLS interstitial player.
  */
 export const InterstitialPage = () => {
-  const [mounted, setMounted] = useState(true)
+  const [mounted, setMounted] = useState(false)
 
   const toggleMounted = () => {
     setMounted(m => !m)
@@ -29,7 +29,10 @@ export const InterstitialPage = () => {
                   // url: 'https://content.players.castlabs.com/api-interstitials-v3/vod-preroll.m3u8',
                   type: clpp.Type.HLS,
                 },
+                autoplay: true,
               }}
+              hasStartButton={false}
+              intermissionDuration={null}
               hasTopControlsBar={false}
               interstitialOptions={{
                 config: {

app/src/styles.css

@@ -118,7 +118,6 @@ nav button:hover {
 }
 
 .in-container {
-  width: 1000px;
 }
 
 .in-video-container {

package.json

@@ -29,7 +29,7 @@
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
-    "@castlabs/prestoplay": "^6.16.1-beta.4",
+    "@castlabs/prestoplay": "^6.16.1-beta.6",
     "@finga/eslint-config": "^1.2.1",
     "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-image": "^3.0.2",

src/interstitial/InterstitialPlayer.tsx

@@ -115,6 +115,11 @@ export type InterstitialPlayerProps = {
    * Enable focus-based keyboard interactivity. Default: true.
    */
   enableFocus?: boolean
+  /**
+   * If true, the start button is shown which has to be clicked
+   * for playback/countdown to begin. Default: true.
+   */
+  hasStartButton?: boolean
 }
 
 /**
@@ -133,11 +138,20 @@ export const InterstitialPlayer = React.memo((props: InterstitialPlayerProps) =>
   const load = async () => {
     try {
       await playerRef.current.loadHlsi(props.asset)
+      if (props.asset.autoplay) {
+        await playerRef.current.unpause()
+      }
     } catch (e) {
       console.error('Interstitial player Failed to load asset', e)
     }
   }
 
+  useEffect(() => {
+    if (props.asset && props.asset.autoplay) {
+      void load()
+    }
+  }, [])
+
   useEffect(() => {
     if (props.onPlayerChanged) {
       playerRef.current.onUIEvent('playerChanged', props.onPlayerChanged)
@@ -189,6 +203,7 @@ export const InterstitialPlayer = React.memo((props: InterstitialPlayerProps) =>
             props.onIntermissionEnded?.()
             await playerRef.current.unpause()
           }}
+          hasStartButton={props.hasStartButton ?? true}
         />
       </PlayerSurfaceHlsi>
     </div>

src/interstitial/components/OverlayHlsi.tsx

@@ -96,6 +96,11 @@ export type Props = {
    * Player controls to shown during interstitial playback.
    */
   interstitialControls?: InterstitialControls
+  /**
+   * If true, the start button is shown which has to be clicked
+   * for playback/countdown to begin.
+   */
+  hasStartButton: boolean
 }
 
 /**
@@ -112,6 +117,7 @@ export const InterstitialOverlay = React.memo((props: Props) => {
   let hasAudioControls = props.hasAudioControls ?? false
   let hasTime = true
   let hasPauseButton = true
+  const hasStartButton = props.hasStartButton ?? true
   if (props.interstitialControls && interstitial) {
     if (props.interstitialControls.seekButtons === false) {
       seekStep = 0
@@ -173,7 +179,7 @@ export const InterstitialOverlay = React.memo((props: Props) => {
     )
   }
 
-  if (!hadInteraction) {
+  if (!hadInteraction && hasStartButton) {
     return <StartButton onClick={onStartClick}/>
   }