RewindTheater renamed to CommonManagers and initializing is done …

…after connecting with backend

apps/desktop-frontend/src/app/LeftMenuSidebar.tsx

@@ -51,10 +51,6 @@ export function LeftMenuSidebar() {
           // These are not centered
           onClick={handleLinkClick("/analyzer")}
           color={buttonColor("/analyzer")}
-          // sx={{
-          //   display: "flex",
-          //   justifyContent: "center",
-          // }}
         >
           <FaMicroscope height={"0.75em"} />
         </IconButton>

apps/desktop-frontend/src/app/RootSaga.ts

@@ -3,6 +3,7 @@ import { API_BASE_URL } from "./backend/constants";
 import { BackendState, stateChanged } from "./backend/slice";
 import { SagaIterator } from "redux-saga";
 import { push } from "connected-react-router";
+import { RewindTheater } from "@rewind/web-player/rewind";
 
 function* waitForBackendState(state: BackendState): SagaIterator {
   while (true) {
@@ -13,10 +14,12 @@ function* waitForBackendState(state: BackendState): SagaIterator {
   }
 }
 
-function* watchForBackendReady(): SagaIterator {
+function* watchForBackendReady(theater: RewindTheater): SagaIterator {
+  const { common, analyzer } = theater;
   yield call(waitForBackendState, "READY");
-  // yield spawn(watchReplaysAdded, REWIND_WS_URL);
   yield put(push("/home")); // Theater
+  yield call(common.initialize.bind(common));
+  yield call(analyzer.initialize.bind(analyzer));
 }
 
 function* watchForBackendMissingSetup(): SagaIterator {
@@ -52,10 +55,10 @@ function* busyPollBackendState(): SagaIterator {
   }
 }
 
-export function createRewindRootSaga() {
+export function createRewindRootSaga({ theater }: { theater: RewindTheater }) {
   return function* () {
     yield spawn(watchForBackendMissingSetup);
-    yield spawn(watchForBackendReady);
+    yield spawn(watchForBackendReady, theater);
     yield spawn(busyPollBackendState);
   };
 }

apps/desktop-frontend/src/app/store.tsx

@@ -8,6 +8,7 @@ import { createHashHistory } from "history";
 import { connectRouter, routerMiddleware } from "connected-react-router";
 import { rewindDesktopApi } from "./backend/api";
 import { setupListeners } from "@reduxjs/toolkit/query";
+import { theater } from "./theater";
 
 export const history = createHashHistory({});
 
@@ -35,7 +36,7 @@ const store = configureStore({
 
 setupListeners(store.dispatch);
 
-sagaMiddleware.run(createRewindRootSaga());
+sagaMiddleware.run(createRewindRootSaga({ theater }));
 
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;

apps/desktop-frontend/src/app/theater.ts

@@ -0,0 +1,4 @@
+import { createRewindTheater } from "@rewind/web-player/rewind";
+
+const apiUrl = "http://localhost:7271";
+export const theater = createRewindTheater({ apiUrl });

apps/desktop-frontend/src/main.tsx

@@ -9,6 +9,7 @@ import { RewindTheme, TheaterProvider } from "@rewind/feature-replay-viewer";
 import { RewindApp } from "./app/RewindApp";
 import { FrontendPreloadAPI } from "@rewind/electron/api";
 import { CssBaseline, ThemeProvider } from "@mui/material";
+import { theater } from "./app/theater";
 
 declare global {
   interface Window {
@@ -22,8 +23,7 @@ ReactDOM.render(
       <ConnectedRouter history={history}>
         <ThemeProvider theme={RewindTheme}>
           <CssBaseline />
-          {/*todo: just create theater outside and pass it in lol*/}
-          <TheaterProvider apiUrl={"http://localhost:7271"}>
+          <TheaterProvider theater={theater}>
             <RewindApp />
           </TheaterProvider>
         </ThemeProvider>

apps/web/src/app/webTestApp.tsx

@@ -1,5 +1,5 @@
 import { Box } from "@mui/material";
-import { Analyzer, useAnalysisApp, useTheater } from "@rewind/feature-replay-viewer";
+import { Analyzer, useAnalysisApp, useCommonManagers } from "@rewind/feature-replay-viewer";
 import { useEffect } from "react";
 import { SkinId } from "@rewind/web-player/rewind";
 
@@ -16,7 +16,7 @@ const chosenReplayId = centipede;
 const skin: SkinId = { source: "osu", name: "-        # re;owoTuna v1.1 『Selyu』 #        -" };
 
 export function WebTestApp() {
-  const theater = useTheater();
+  const theater = useCommonManagers();
   const analyzer = useAnalysisApp();
   useEffect(() => {
     // theater.changeSkin(skin);

apps/web/src/main.tsx

@@ -4,13 +4,18 @@ import * as ReactDOM from "react-dom";
 import { WebTestApp } from "./app/webTestApp";
 import { environment } from "./environments/environment";
 import { CssBaseline, ThemeProvider } from "@mui/material";
+import { createRewindTheater } from "@rewind/web-player/rewind";
 
-// TODO: process.env.URL
-const url = environment.url;
+// This project assumes that the backend is already initialized
+
+const apiUrl = environment.url;
+export const theater = createRewindTheater({ apiUrl });
+theater.common.initialize();
+theater.analyzer.initialize();
 
 ReactDOM.render(
   <StrictMode>
-    <TheaterProvider apiUrl={url}>
+    <TheaterProvider theater={theater}>
       <ThemeProvider theme={RewindTheme}>
         <CssBaseline />
         <WebTestApp />

libs/feature-replay-viewer/src/components/PlayBar.tsx

@@ -256,7 +256,7 @@ function GameTimeSlider() {
 
   return (
     <BaseGameTimeSlider
-      backgroundEnable={backgroundEnable && false}
+      backgroundEnable={backgroundEnable}
       duration={duration}
       currentTime={currentTime}
       onChange={seekTo}

libs/feature-replay-viewer/src/components/SettingsModal.tsx

@@ -12,7 +12,7 @@ import {
   Typography,
 } from "@mui/material";
 import { BaseSettingsModal } from "./BaseSettingsModal";
-import { useTheater } from "../providers/TheaterProvider";
+import { useCommonManagers } from "../providers/TheaterProvider";
 import { useCallback, useEffect, useMemo } from "react";
 import {
   DEFAULT_ANALYSIS_CURSOR_SETTINGS,
@@ -33,7 +33,7 @@ const sourceName: Record<SkinSource, string> = {
 };
 
 function BeatmapBackgroundSettings() {
-  const theater = useTheater();
+  const theater = useCommonManagers();
   const { beatmapBackgroundSettingsStore } = theater;
   const settings = useObservable(() => beatmapBackgroundSettingsStore.settings$, { blur: 0, enabled: false, dim: 0 });
   return (
@@ -55,7 +55,7 @@ function BeatmapBackgroundSettings() {
 }
 
 function BeatmapRenderSettings() {
-  const { beatmapRenderSettingsStore } = useTheater();
+  const { beatmapRenderSettingsStore } = useCommonManagers();
   const settings = useObservable(() => beatmapRenderSettingsStore.settings$, DEFAULT_BEATMAP_RENDER_SETTINGS);
 
   return (
@@ -77,7 +77,7 @@ function BeatmapRenderSettings() {
 }
 
 function AnalysisCursorSettingsPanel() {
-  const { analysisCursorSettingsStore } = useTheater();
+  const { analysisCursorSettingsStore } = useCommonManagers();
   const settings = useObservable(() => analysisCursorSettingsStore.settings$, DEFAULT_ANALYSIS_CURSOR_SETTINGS);
 
   return (
@@ -98,7 +98,7 @@ function AnalysisCursorSettingsPanel() {
 }
 
 function ReplayCursorSettingsPanel() {
-  const { replayCursorSettingsStore } = useTheater();
+  const { replayCursorSettingsStore } = useCommonManagers();
   const settings = useObservable(() => replayCursorSettingsStore.settings$, DEFAULT_REPLAY_CURSOR_SETTINGS);
 
   return (
@@ -140,7 +140,7 @@ function GeneralSettings() {
 function SkinsSettings() {
   // TODO: Button for synchronizing skin list again
 
-  const theater = useTheater();
+  const theater = useCommonManagers();
 
   const { preferredSkinId } = useObservable(() => theater.skinSettingsStore.settings$, DEFAULT_SKIN_SETTINGS);
   const chosenSkinId = stringToSkinId(preferredSkinId);

libs/feature-replay-viewer/src/hooks/audio.ts

@@ -1,9 +1,9 @@
-import { useTheater } from "../providers/TheaterProvider";
+import { useCommonManagers } from "../providers/TheaterProvider";
 import { useObservable } from "rxjs-hooks";
 import { AudioSettings } from "@rewind/web-player/rewind";
 
 export function useAudioSettingsService() {
-  const theater = useTheater();
+  const theater = useCommonManagers();
   return theater.audioSettingsService;
 }
 

libs/feature-replay-viewer/src/providers/TheaterProvider.tsx

@@ -1,23 +1,16 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
-import { createRewindTheater } from "@rewind/web-player/rewind";
-
-type ITheaterContext = ReturnType<typeof createRewindTheater>;
+import React, { createContext, useContext } from "react";
+import { RewindTheater } from "@rewind/web-player/rewind";
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-export const TheaterContext = createContext<ITheaterContext>(null!);
+export const TheaterContext = createContext<RewindTheater>(null!);
 
 interface TheaterProviderProps {
-  apiUrl: string;
+  theater: RewindTheater;
   children: React.ReactNode;
 }
 
-export function TheaterProvider({ apiUrl, children }: TheaterProviderProps) {
-  const [rewind] = useState(() => createRewindTheater({ apiUrl }));
-  useEffect(() => {
-    rewind.theater.initialize().then(() => console.log("Theater initialized"));
-    rewind.analyzer.initialize();
-  }, [rewind]);
-  return <TheaterContext.Provider value={rewind}>{children}</TheaterContext.Provider>;
+export function TheaterProvider({ theater, children }: TheaterProviderProps) {
+  return <TheaterContext.Provider value={theater}>{children}</TheaterContext.Provider>;
 }
 
 export function useTheaterContext() {
@@ -28,12 +21,12 @@ export function useTheaterContext() {
   return context;
 }
 
-export function useTheater() {
-  const { theater } = useTheaterContext();
-  return theater;
+export function useCommonManagers() {
+  const theater = useTheaterContext();
+  return theater.common;
 }
 
 export function useAnalysisApp() {
-  const { analyzer } = useTheaterContext();
-  return analyzer;
+  const theater = useTheaterContext();
+  return theater.analyzer;
 }

libs/web-player/rewind/src/RewindTheater.ts → libs/web-player/rewind/src/CommonManagers.ts

@@ -25,7 +25,7 @@ import { SkinSettingsStore } from "./services/SkinSettingsStore";
  * Example: Preferred skin can be set at only one place and is shared among all tools.
  */
 @injectable()
-export class RewindTheater {
+export class CommonManagers {
   constructor(
     public readonly skinManager: SkinManager,
     public readonly skinSettingsStore: SkinSettingsStore,
@@ -37,6 +37,7 @@ export class RewindTheater {
     private readonly rewindLocalStorage: RewindLocalStorage,
   ) {}
 
+  // This should only be called after there is a connection to the backend.
   async initialize() {
     this.rewindLocalStorage.initialize();
     await this.skinManager.loadPreferredSkin();
@@ -70,10 +71,12 @@ export function createRewindTheater({ apiUrl }: Settings) {
   container.bind(RewindLocalStorage).toSelf();
 
   // Theater facade
-  container.bind(RewindTheater).toSelf();
+  container.bind(CommonManagers).toSelf();
 
   return {
-    theater: container.get(RewindTheater),
+    common: container.get(CommonManagers),
     analyzer: createRewindAnalysisApp(container),
   };
 }
+
+export type RewindTheater = ReturnType<typeof createRewindTheater>;

libs/web-player/rewind/src/core/api/BackendStatusService.ts

@@ -0,0 +1,18 @@
+import { inject, injectable } from "inversify";
+import { TYPES } from "../../types/types";
+import { BehaviorSubject } from "rxjs";
+
+export type BackendState = "NOT_STARTED" | "SETUP_MISSING" | "LOADING" | "READY";
+
+@injectable()
+export class BackendStatusService {
+  status$: BehaviorSubject<BackendState>;
+
+  constructor(@inject(TYPES.API_URL) private readonly apiUrl: string) {
+    this.status$ = new BehaviorSubject<BackendState>("NOT_STARTED");
+  }
+
+  async wait() {
+    await fetch(`${this.apiUrl}/status`);
+  }
+}

libs/web-player/rewind/src/creators/createRewindAnalysisApp.ts

@@ -41,9 +41,9 @@ import { ClipRecorder } from "../apps/analysis/manager/ClipRecorder";
  *
  * The analysis tool can be used as a standalone app though.
  */
-export function createRewindAnalysisApp(rewindTheaterContainer: Container) {
+export function createRewindAnalysisApp(commonContainer: Container) {
   const container = new Container({ defaultScope: "Singleton" });
-  container.parent = rewindTheaterContainer;
+  container.parent = commonContainer;
   container.bind(STAGE_TYPES.EVENT_EMITTER).toConstantValue(new EventEmitter2());
   // TODO
   container.bind(TYPES.WS_URL).toConstantValue("http://localhost:7271");

libs/web-player/rewind/src/index.ts

@@ -1,5 +1,5 @@
-export { createRewindTheater } from "./RewindTheater";
-export { AnalysisApp } from "./apps/analysis/AnalysisApp";
+export * from "./CommonManagers";
+export * from "./apps/analysis/AnalysisApp";
 export * from "./core/game/GameplayClock";
 
 export * from "./model/SkinId";