castlabs · fingerartur · Apr 8, 2024 · Apr 8, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -24,6 +24,7 @@ module.exports = {
     // <div onClick={(event: React.MouseEvent<HTMLButtonElement>) => event.altKey}}/>
     "@typescript-eslint/no-unsafe-call": "off",
     "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
   },
   overrides: [
     {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,19 @@
+# 0.8.3 (Beta)
+
+## New Features
+
+* 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 render a companion component above the bottom bar
+    of player controls
+* Add option to display cues on the seek bar
+
+## Fixes
+
+* Fix rounding of duration.
+
 # 0.7.3 (Beta)
 
 ## Fixes

diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mux.js"></script>
+  <title>PRESTOplay React Components</title>
+</head>
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <script src="./dist/bundle.js"></script>
+</body>
+</html>
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -8,6 +8,7 @@ import { Asset, TestAssets } from './Asset'
 import { BasicOverlayPage } from './BasicOverlayPage'
 import { ComponentsOverviewPage } from './ComponentsOverviewPage'
 import { CustomControlsPage } from './CustomControlsPage'
+import { InterstitialPage } from './InterstitialPage'
 import { YoutubeControlsPage } from './YoutubeControlsPage'
 
 // load app styles
@@ -17,7 +18,7 @@ import '@castlabs/prestoplay/clpp.styles.css'
 // load the theme
 import '../../src/themes/pp-ui-base-theme.css'
 
-type Page = 'basic' | 'custom' | 'components' | 'youtube'
+type Page = 'basic' | 'custom' | 'components' | 'youtube' | 'interstitial'
 
 function getQueryVariable(variable: string) {
   const searchParams = new URLSearchParams(window.location.search)
@@ -60,6 +61,8 @@ export function App() {
       return <ComponentsOverviewPage asset={asset} autoload={autoload}/>
     } else if (pageId === 'youtube') {
       return <YoutubeControlsPage asset={asset} autoload={autoload}/>
+    } else if (pageId === 'interstitial') {
+      return <InterstitialPage />
     }
     return <div>Unknown Page!</div>
   }, [pageId, asset, autoload])
@@ -94,6 +97,7 @@ export function App() {
         <button onClick={selectPage('custom')} className={`${pageId === 'custom' ? 'selected' : ''}`}>Custom Overlay</button>
         <button onClick={selectPage('youtube')} className={`${pageId === 'youtube' ? 'selected' : ''}`}>Youtube Overlay</button>
         <button onClick={selectPage('components')} className={`${pageId === 'components' ? 'selected' : ''}`}>Components</button>
+        <button onClick={selectPage('interstitial')} className={`${pageId === 'interstitial' ? 'selected' : ''}`}>HLS Interstitial</button>
       </nav>
 
       <div>

diff --git a/app/src/InterstitialPage.tsx b/app/src/InterstitialPage.tsx
@@ -0,0 +1,62 @@
+import { clpp } from '@castlabs/prestoplay'
+import React, { useState }  from 'react'
+
+import { InterstitialPlayer } from '../../src'
+
+/**
+ * A page featuring the HLS interstitial player.
+ */
+export const InterstitialPage = () => {
+  const [mounted, setMounted] = useState(true)
+
+  const toggleMounted = () => {
+    setMounted(m => !m)
+  }
+
+  return (
+    <main className="in-page">
+      <div className="in-container">
+        <div>
+          <button onClick={toggleMounted}>Toggle mounted</button>
+        </div>
+        {mounted ? (
+          <div className="in-video-container">
+            <InterstitialPlayer
+              asset={{
+                source: {
+                // url: 'http://localhost:3000/vod-fixed.m3u8',
+                  url: 'http://localhost:3000/vod-preroll.m3u8',
+                  type: clpp.Type.HLS,
+                },
+              }}
+              // Possibly it's something wrong with the AIP stream http://localhost:3000/vod-preroll.m3u8
+              // but unfortunately what happens is that we get state "Ended" and then the video
+              // continues playing for another cca 800ms. This would obviously cause a glitch
+              // in the UI so configure the player to ignore all ended states changes
+              patchIgnoreStateEnded={true}
+              interstitialOptions={{
+              // Start resolving X-ASSET-LIST 15 seconds or less before
+              // the cue is scheduled
+                resolutionOffsetSec: 15,
+              }}
+            // onPlayerChanged={p => {
+            //   // @ts-ignore
+            //   window.player = p
+            // }}
+            // showInterstitialMarkers={false}
+            // seekStep={2}
+            // controlsVisibility='never'
+            // intermissionDuration={5}
+            // interstitialLabel={(i) => `Ad ${i.podOrder} of ${i.podCount}`}
+            // renderInterstitialLabel={(i) => null}
+            // renderIntermission={(seconds) => <div>{seconds}</div>}
+            // loop={false}
+            // onEnded={() => {}}
+            // onLoopEnded={() => {}}
+            />
+          </div>
+        ): null}
+      </div>
+    </main>
+  )
+}
diff --git a/app/src/index.html b/app/src/index.html
diff --git a/app/src/styles.css b/app/src/styles.css
@@ -110,3 +110,18 @@ nav button:hover {
     background-color: #b4b4b4;
 }
 
+.in-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.in-container {
+  width: 1000px;
+}
+
+.in-video-container {
+  width: 800px;
+  height: 580px;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,15 +20,16 @@
     "test:watch": "jest --watch",
     "lint": "npx eslint .",
     "storybook": "storybook dev --port 6006",
-    "build-storybook": "storybook build --output-dir ./dist/storybook"
+    "build-storybook": "storybook build --output-dir ./dist/storybook",
+    "prepack": "npm run build"
   },
   "license": "Apache-2.0",
   "devDependencies": {
     "@actions/core": "^1.10.1",
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
-    "@castlabs/prestoplay": "^6.6.0",
+    "@castlabs/prestoplay": "^6.11.1-beta.1",
     "@finga/eslint-config": "^1.2.1",
     "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-image": "^3.0.2",

diff --git a/scripts/rollup.config.app.mjs b/scripts/rollup.config.app.mjs
@@ -49,7 +49,7 @@ const options = [
         open: true,
         verbose: true,
         contentBase: ["", "app", "app/src"],
-        host: "0.0.0.0",
+        host: "localhost",
         port: "3000",
       }),
       livereload({