sync button with interface and addres linter rules

ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx

@@ -29,6 +29,7 @@ import cx from "classnames";
 import {
   useSceneSaveActivity,
   useSceneIncrementPlayCount,
+  useConfigureInterface,
 } from "src/core/StashService";
 
 import * as GQL from "src/core/generated-graphql";
@@ -250,6 +251,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = PatchComponent(
     const sceneId = useRef<string>();
     const [sceneSaveActivity] = useSceneSaveActivity();
     const [sceneIncrementPlayCount] = useSceneIncrementPlayCount();
+    const [updateInterfaceConfig] = useConfigureInterface();
 
     const [time, setTime] = useState(0);
     const [ready, setReady] = useState(false);
@@ -438,7 +440,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = PatchComponent(
       };
       // empty deps - only init once
       // showAbLoopControls is necessary to re-init the player when the config changes
-    }, [uiConfig?.showAbLoopControls, uiConfig?.enableChromecast]);
+    }, [uiConfig?.showAbLoopControls, uiConfig?.enableChromecast, interfaceConfig?.autostartVideo]);
 
     useEffect(() => {
       const player = getPlayer();
@@ -485,6 +487,17 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = 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();
@@ -699,20 +712,13 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = PatchComponent(
 
       // Check the autostart button plugin for user preference
       const autostartButton = player.autostartButton();
-      autostartButton.getEnabled().then((buttonEnabled) => {
+      const buttonEnabled = autostartButton.getEnabled();
       auto.current =
         autoplay ||
         buttonEnabled ||
         (interfaceConfig?.autostartVideo ?? false) ||
         _initialTimestamp > 0;
 
-        // Trigger autoplay if conditions are met and player is ready
-        if (auto.current && ready && player.paused()) {
-          player.play();
-          auto.current = false;
-        }
-      });
-
       player.ready(() => {
         player.vttThumbnails().src(scene.paths.vtt ?? null);
 
@@ -856,6 +862,26 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = PatchComponent(
       sceneSaveActivity,
     ]);
 
+    useEffect(() => {
+      const player = getPlayer();
+      if (!player) return;
+
+
+      async function updateAutoStart(enabled: boolean) {
+        await updateInterfaceConfig({
+          variables: {
+            input: {
+              autostartVideo: enabled,
+            },
+          },
+        });
+        console.log("updated interface config");
+      }
+      
+      const autostartButton = player.autostartButton();
+      autostartButton.updateAutoStart = updateAutoStart;
+    }, [getPlayer, updateInterfaceConfig]);
+
     useEffect(() => {
       const player = getPlayer();
       if (!player) return;

ui/v2.5/src/components/ScenePlayer/autostart-button.ts

@@ -1,8 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import videojs, { VideoJsPlayer } from "video.js";
-import localForage from "localforage";
-
-const AUTOSTART_KEY = "video-autostart-enabled";
 
 interface IAutostartButtonOptions {
   enabled?: boolean;
@@ -53,16 +50,16 @@ class AutostartButton extends videojs.getComponent("Button") {
 class AutostartButtonPlugin extends videojs.getPlugin("plugin") {
   private button: AutostartButton;
   private autostartEnabled: boolean;
-  private loaded: boolean = false;
+  updateAutoStart: (enabled: boolean) => Promise<void> =
+    () => {
+      return Promise.resolve();
+    };
 
   constructor(player: VideoJsPlayer, options?: IAutostartButtonOptions) {
     super(player, options);
 
     this.autostartEnabled = options?.enabled ?? false;
 
-    // Load the saved preference immediately
-    this.loadPreference();
-
     this.button = new AutostartButton(player, {
       autostartEnabled: this.autostartEnabled,
     });
@@ -72,20 +69,9 @@ class AutostartButtonPlugin extends videojs.getPlugin("plugin") {
     });
   }
 
-  private async loadPreference() {
-    const value = await localForage.getItem<boolean>(AUTOSTART_KEY);
-    if (value !== null) {
-      this.autostartEnabled = value;
-      if (this.button) {
-        this.button.setEnabled(value);
-      }
-    }
-    this.loaded = true;
-  }
-
   private ready() {
     // Add button to control bar, before the fullscreen button
-    const controlBar = this.player.controlBar;
+    const { controlBar } = this.player;
     const fullscreenToggle = controlBar.getChild("fullscreenToggle");
     if (fullscreenToggle) {
       controlBar.addChild(this.button);
@@ -97,7 +83,7 @@ class AutostartButtonPlugin extends videojs.getPlugin("plugin") {
     // Listen for changes
     this.button.on("autostartchanged", (_, data: { enabled: boolean }) => {
       this.autostartEnabled = data.enabled;
-      localForage.setItem(AUTOSTART_KEY, data.enabled);
+      this.updateAutoStart(this.autostartEnabled);
     });
   }
 
@@ -105,13 +91,21 @@ class AutostartButtonPlugin extends videojs.getPlugin("plugin") {
     return this.autostartEnabled;
   }
 
-  public async getEnabled(): Promise<boolean> {
+  public getEnabled(): boolean {
-    // Wait for the preference to be loaded if it hasn't been yet
-    if (!this.loaded) {
-      await this.loadPreference();
-    }
     return this.autostartEnabled;
   }
+
+  public setEnabled(enabled: boolean) {
+    this.autostartEnabled = enabled;
+    this.button.setEnabled(enabled);
+  }
+
+  public syncWithConfig(configEnabled: boolean) {
+    // Sync button state with external config changes
+    if (this.autostartEnabled !== configEnabled) {
+      this.setEnabled(configEnabled);
+    }
+  }
 }
 
 // Register the plugin with video.js.

ui/v2.5/src/components/ScenePlayer/styles.scss

@@ -133,17 +133,17 @@ $sceneTabWidth: 450px;
 
     &.vjs-icon-play-circle::after,
     &.vjs-icon-cancel::after {
+      background-color: rgba(80, 80, 80, 0.9);
+      border-radius: 8px;
       content: "";
+      height: 2.5rem;
+      left: 50%;
+      opacity: 0.7;
       position: absolute;
       top: 50%;
-      left: 50%;
-      width: 1rem;
-      height: 2.5rem;
-      background-color: rgba(80, 80, 80, 0.9);
       transform: translate(-50%, -50%) rotate(90deg);
-      opacity: 0.7;
+      width: 1rem;
       z-index: 1;
-      border-radius: 8px;
     }
 
     &:hover {