From 1f48dba5286a2a787b6c35fe9aeb96e130246301 Mon Sep 17 00:00:00 2001 From: Artur Finger Date: Tue, 10 Sep 2024 16:32:10 +0300 Subject: [PATCH] DE-7270: Add autoplay to HLS-I (#49) --- app/src/InterstitialPage.tsx | 5 ++++- app/src/styles.css | 1 - package-lock.json | 16 ++++++++-------- package.json | 2 +- src/interstitial/InterstitialPlayer.tsx | 15 +++++++++++++++ src/interstitial/components/OverlayHlsi.tsx | 8 +++++++- 6 files changed, 35 insertions(+), 12 deletions(-) diff --git a/app/src/InterstitialPage.tsx b/app/src/InterstitialPage.tsx index 2068949..e458d21 100644 --- a/app/src/InterstitialPage.tsx +++ b/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: { diff --git a/app/src/styles.css b/app/src/styles.css index 9ebb74e..328b790 100644 --- a/app/src/styles.css +++ b/app/src/styles.css @@ -118,7 +118,6 @@ nav button:hover { } .in-container { - width: 1000px; } .in-video-container { diff --git a/package-lock.json b/package-lock.json index ac78175..3c0190c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,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", @@ -75,7 +75,7 @@ "typescript": "^4.8.4" }, "peerDependencies": { - "@castlabs/prestoplay": "^6.11.1-beta.1", + "@castlabs/prestoplay": "^6.16.1-beta.4", "react": "^18.0.0", "react-dom": "^18.0.0" } @@ -2347,9 +2347,9 @@ "license": "MIT" }, "node_modules/@castlabs/prestoplay": { - "version": "6.16.1-beta.4", - "resolved": "https://registry.npmjs.org/@castlabs/prestoplay/-/prestoplay-6.16.1-beta.4.tgz", - "integrity": "sha512-AjY1ffGANsCuQ5w4oDAokSxBI2mnd2GAngnoGxuJbjtk10w913tk5+W2Tid4mWqLGlvkJ4pb6yqMg3Hu1byW9w==", + "version": "6.16.1-beta.6", + "resolved": "https://registry.npmjs.org/@castlabs/prestoplay/-/prestoplay-6.16.1-beta.6.tgz", + "integrity": "sha512-OMZ9M63JQutlooWQJvCXwuuLemTaTfVJZMS1dCst2/Q6fLTrPmtWN0tuJEqa7KWNPEXTEVdhn0hGO6vmdupUHg==", "dev": true, "peerDependencies": { "@broadpeak/smartlib": "5.0.1-4c69e21", @@ -23328,9 +23328,9 @@ "dev": true }, "@castlabs/prestoplay": { - "version": "6.16.1-beta.4", - "resolved": "https://registry.npmjs.org/@castlabs/prestoplay/-/prestoplay-6.16.1-beta.4.tgz", - "integrity": "sha512-AjY1ffGANsCuQ5w4oDAokSxBI2mnd2GAngnoGxuJbjtk10w913tk5+W2Tid4mWqLGlvkJ4pb6yqMg3Hu1byW9w==", + "version": "6.16.1-beta.6", + "resolved": "https://registry.npmjs.org/@castlabs/prestoplay/-/prestoplay-6.16.1-beta.6.tgz", + "integrity": "sha512-OMZ9M63JQutlooWQJvCXwuuLemTaTfVJZMS1dCst2/Q6fLTrPmtWN0tuJEqa7KWNPEXTEVdhn0hGO6vmdupUHg==", "dev": true, "requires": {} }, diff --git a/package.json b/package.json index 969f4d8..32a9c7c 100644 --- a/package.json +++ b/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", diff --git a/src/interstitial/InterstitialPlayer.tsx b/src/interstitial/InterstitialPlayer.tsx index 4682b9e..0afa571 100644 --- a/src/interstitial/InterstitialPlayer.tsx +++ b/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} /> diff --git a/src/interstitial/components/OverlayHlsi.tsx b/src/interstitial/components/OverlayHlsi.tsx index 8aef0d9..1d5e6d7 100644 --- a/src/interstitial/components/OverlayHlsi.tsx +++ b/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 }