yolo.js

const changeScene = async (
  { store, commands$ }: CommandContext,
  nextSceneId: number
) => {
  logger.debug(`Changing scene - ${nextSceneId} requested`);

  const activeScene = getActiveScene(store.getState());
  const activeSceneId = getActiveSceneId(store.getState());

  if (activeSceneId === nextSceneId) {
    logger.debug("Skipping scene change, going to same scene.");
    return;
  }

  logger.info(
    `Initiating scene transition from ${activeSceneId} to ${nextSceneId}`
  );

  const transitionTime = activeScene?.transitionFadeMs || 400;

  store.dispatch(
    PresentationActions.startSceneTransition({
      fromSceneId: activeSceneId as number,
      nextSceneId,
      transitionTime,
      asset: activeScene?.transitionAsset,
      loop: activeScene?.transitionLoop || false,
      useWholeVideo: activeScene?.transitionUseWholeVideo || false
    })
  );
  store.dispatch(VideoSyncActions.resetState());

  const halfTransitionMs = transitionTime / 2;
  const halfTransitionSec = halfTransitionMs / 1000;

  const hasVideoTransitionWithFullVideoPlayback = !!(
    activeScene?.transitionAsset &&
    activeScene.transitionAsset.type === AssetType.ASSET_WALL_VIDEO &&
    activeScene?.transitionUseWholeVideo &&
    !activeScene.transitionLoop
  );

  const waitForVideoTransition = () => {
    const videoTransitionDone$ = commands$.pipe(
      filter(() => hasVideoTransitionWithFullVideoPlayback),
      filter((command) => {
        // Wait for playback of transition wall video
        if (command.type === CommandType.CHANGE_PLAYBACK) {
          // Duration & Value is in seconds
          const payload = command.payload as ChangePlaybackPayload;

          return (
            payload.assetUuid === activeScene?.transitionAsset?.uuid &&
            payload.duration - payload.value <= halfTransitionSec
          );
        }

        return false;
      })
    );

    const defaultTransition$ = of(1).pipe(
      filter(() => !hasVideoTransitionWithFullVideoPlayback),
      delay(halfTransitionMs)
    );

    return merge(videoTransitionDone$, defaultTransition$);
  };

  of(1)
    .pipe(
      // Start transition delay
      switchMap(waitForVideoTransition),
      // Change scene
      tap(() => {
        store.dispatch(
          PresentationActions.changeActiveScene({ sceneId: nextSceneId })
        );
      }),
      switchMap(waitForVideoTransition),
      tap(() => {
        // Reset the transtion beacuse transition is done
        store.dispatch(PresentationActions.stopSceneTransition());
        logger.info(
          `Scene transition from ${activeSceneId} to ${nextSceneId} finished`
        );
      }),
      // Cancel any current transition by next scene switch
      takeUntil(
        commands$.pipe(
          filter((command) => command.type === CommandType.CHANGE_SCENE),
          tap(() => {
            logger.debug("Scene switch was canceled in between");
            store.dispatch(PresentationActions.stopSceneTransition());
          })
        )
      )
    )
    .subscribe();
};