diff --git a/src/admin-toolkit-ui/VideoControl.tsx b/src/admin-toolkit-ui/VideoControl.tsx index f40d29f4..2bf03361 100644 --- a/src/admin-toolkit-ui/VideoControl.tsx +++ b/src/admin-toolkit-ui/VideoControl.tsx @@ -135,12 +135,22 @@ function updateVideoPlayerProps( }) } else { // Apply to selected player only - const selectedPlayer = VideoPlayer.getMutableOrNull( - players[state.videoControl.selectedVideoPlayer ?? 0].entity as Entity, - ) + const selectedPlayerEntity = players[ + state.videoControl.selectedVideoPlayer ?? 0 + ].entity as Entity + const selectedPlayer = VideoPlayer.getMutableOrNull(selectedPlayerEntity) if (!selectedPlayer) return updateVideoSourceProperty(selectedPlayer, property, value) + + if (!!videoControlState) { + const videoPlayerControlState = videoControlState.videoPlayers?.find( + (vcs) => (vcs.entity as Entity) === selectedPlayerEntity, + ) + if (!!videoPlayerControlState) { + updateVideoSourceProperty(videoPlayerControlState, property, value) + } + } } } diff --git a/src/admin-toolkit-ui/index.tsx b/src/admin-toolkit-ui/index.tsx index 7f741465..d7a59511 100644 --- a/src/admin-toolkit-ui/index.tsx +++ b/src/admin-toolkit-ui/index.tsx @@ -20,6 +20,7 @@ import { TextAnnouncements } from './TextAnnouncements' import { CONTENT_URL } from './constants' import { getSceneDeployment, getSceneOwners } from './utils' import { State, TabType, SelectedSmartItem } from './types' +import { getExplorerComponents } from '../components' let state: State = { adminToolkitUiEntity: 0 as Entity, @@ -98,12 +99,89 @@ async function initSceneOwners() { } } +function getVideoPlayers(engine: IEngine) { + const adminToolkitComponent = getAdminToolkitComponent(engine) + + if ( + !adminToolkitComponent || + !adminToolkitComponent.videoControl || + !adminToolkitComponent.videoControl.videoPlayers || + adminToolkitComponent.videoControl.videoPlayers.length === 0 + ) + return [] + + return Array.from(adminToolkitComponent.videoControl.videoPlayers) +} + +function syncVideoPlayersState(engine: IEngine) { + const { VideoControlState } = getComponents(engine) + const { VideoPlayer } = getExplorerComponents(engine) + + const videoControlState = VideoControlState.getOrNull( + state.adminToolkitUiEntity, + ) + if (!videoControlState?.videoPlayers) return + + // Iterate through each player in the control state + videoControlState.videoPlayers.forEach((controlPlayer) => { + const videoPlayer = VideoPlayer.getMutableOrNull( + controlPlayer.entity as Entity, + ) + if (!videoPlayer) return + + // Check and sync each property + if ( + controlPlayer.src !== undefined && + videoPlayer.src !== controlPlayer.src + ) { + videoPlayer.src = controlPlayer.src + } + if (videoPlayer.playing !== controlPlayer.playing) { + videoPlayer.playing = !!controlPlayer.playing + } + if (videoPlayer.volume !== controlPlayer.volume) { + videoPlayer.volume = controlPlayer.volume ?? 0 + } + // if (controlPlayer.position === -1) { + // videoPlayer.position = controlPlayer.position + // controlPlayer.position = undefined + // } + if (videoPlayer.loop !== controlPlayer.loop) { + videoPlayer.loop = !!controlPlayer.loop + } + }) +} + function initVideoControlSync(engine: IEngine, sdkHelpers?: ISDKHelpers) { const { VideoControlState } = getComponents(engine) + const { VideoPlayer } = getExplorerComponents(engine) + const adminToolkitEntity = getAdminToolkitEntity(engine) + const videoPlayers = getVideoPlayers(engine) + + let syncVideoPlayers: any = [] + + videoPlayers.forEach((player) => { + const vp = VideoPlayer.getOrNull(player.entity as Entity) + if (vp) { + syncVideoPlayers.push({ + entity: player.entity as Entity, + src: vp.src, + playing: vp.playing, + volume: vp.volume, + position: vp.position, + loop: vp.loop, + }) + } + }) VideoControlState.createOrReplace(state.adminToolkitUiEntity, { - videoPlayers: [], + videoPlayers: syncVideoPlayers, + }) + + // Set up the sync system + engine.addSystem(() => { + syncVideoPlayersState(engine) }) sdkHelpers?.syncEntity?.( @@ -121,11 +199,11 @@ function initTextAnnouncementSync(engine: IEngine, sdkHelpers?: ISDKHelpers) { announcements: [], }) - sdkHelpers?.syncEntity?.( - state.adminToolkitUiEntity, - [TextAnnouncements.componentId], - adminToolkitEntity, - ) + // sdkHelpers?.syncEntity?.( + // state.adminToolkitUiEntity, + // [TextAnnouncements.componentId], + // adminToolkitEntity, + // ) } // Initialize admin data before UI rendering diff --git a/src/definitions.ts b/src/definitions.ts index 9e3ce507..7087707a 100644 --- a/src/definitions.ts +++ b/src/definitions.ts @@ -426,7 +426,7 @@ export function createComponents(engine: IEngine) { Schemas.Array( Schemas.Map({ entity: Schemas.Int, - src: Schemas.Optional(Schemas.String), + src: Schemas.String, playing: Schemas.Optional(Schemas.Boolean), volume: Schemas.Optional(Schemas.Float), position: Schemas.Optional(Schemas.Float),