diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx index 41af8991e..4903b1bad 100644 --- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx +++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx @@ -440,7 +440,11 @@ export const ScenePlayer: React.FC = PatchComponent( }; // empty deps - only init once // showAbLoopControls is necessary to re-init the player when the config changes - }, [uiConfig?.showAbLoopControls, uiConfig?.enableChromecast, interfaceConfig?.autostartVideo]); + }, [ + uiConfig?.showAbLoopControls, + uiConfig?.enableChromecast, + interfaceConfig?.autostartVideo, + ]); useEffect(() => { const player = getPlayer(); @@ -487,17 +491,6 @@ export const ScenePlayer: React.FC = PatchComponent( vrMenu.setShowButton(showButton); }, [getPlayer, scene, vrTag]); - // Sync autostart button with config changes - useEffect(() => { - const player = getPlayer(); - if (!player) return; - - const autostartButton = player.autostartButton(); - if (autostartButton) { - autostartButton.syncWithConfig(interfaceConfig?.autostartVideo ?? false); - } - }, [getPlayer, interfaceConfig?.autostartVideo]); - // Player event handlers useEffect(() => { const player = getPlayer(); @@ -862,11 +855,11 @@ export const ScenePlayer: React.FC = PatchComponent( sceneSaveActivity, ]); + // Sync autostart button with config changes useEffect(() => { const player = getPlayer(); if (!player) return; - async function updateAutoStart(enabled: boolean) { await updateInterfaceConfig({ variables: { @@ -875,12 +868,16 @@ export const ScenePlayer: React.FC = PatchComponent( }, }, }); - console.log("updated interface config"); } - + const autostartButton = player.autostartButton(); - autostartButton.updateAutoStart = updateAutoStart; - }, [getPlayer, updateInterfaceConfig]); + if (autostartButton) { + autostartButton.syncWithConfig( + interfaceConfig?.autostartVideo ?? false + ); + autostartButton.updateAutoStart = updateAutoStart; + } + }, [getPlayer, updateInterfaceConfig, interfaceConfig?.autostartVideo]); useEffect(() => { const player = getPlayer(); diff --git a/ui/v2.5/src/components/ScenePlayer/autostart-button.ts b/ui/v2.5/src/components/ScenePlayer/autostart-button.ts index 6f8967655..45616e714 100644 --- a/ui/v2.5/src/components/ScenePlayer/autostart-button.ts +++ b/ui/v2.5/src/components/ScenePlayer/autostart-button.ts @@ -25,7 +25,7 @@ class AutostartButton extends videojs.getComponent("Button") { private updateIcon() { this.removeClass("vjs-icon-play-circle"); this.removeClass("vjs-icon-cancel"); - + if (this.autostartEnabled) { this.addClass("vjs-icon-play-circle"); this.controlText(this.localize("Auto-start enabled (click to disable)")); @@ -50,10 +50,9 @@ class AutostartButton extends videojs.getComponent("Button") { class AutostartButtonPlugin extends videojs.getPlugin("plugin") { private button: AutostartButton; private autostartEnabled: boolean; - updateAutoStart: (enabled: boolean) => Promise = - () => { - return Promise.resolve(); - }; + updateAutoStart: (enabled: boolean) => Promise = () => { + return Promise.resolve(); + }; constructor(player: VideoJsPlayer, options?: IAutostartButtonOptions) { super(player, options); @@ -122,4 +121,3 @@ declare module "video.js" { } export default AutostartButtonPlugin; - diff --git a/ui/v2.5/src/components/ScenePlayer/styles.scss b/ui/v2.5/src/components/ScenePlayer/styles.scss index 2cd289449..ebc472d0c 100644 --- a/ui/v2.5/src/components/ScenePlayer/styles.scss +++ b/ui/v2.5/src/components/ScenePlayer/styles.scss @@ -122,7 +122,7 @@ $sceneTabWidth: 450px; background-color: rgba(80, 80, 80, 0.9); border-radius: 50%; color: #fff; - content: "\f103"; + content: "\f103"; font-size: 1em; line-height: 1; margin-right: 1rem; @@ -151,7 +151,6 @@ $sceneTabWidth: 450px; } } - .vjs-touch-overlay .vjs-play-control { z-index: 1; }