disable controls if watchparty guest

src/components/player/atoms/Episodes.tsx

@@ -476,7 +476,7 @@ export function EpisodesRouter(props: EpisodesProps) {
   return <EpisodesOverlay onChange={props.onChange} id="episodes" />;
 }
 
-export function Episodes() {
+export function Episodes(props: { inControl: boolean }) {
   const { t } = useTranslation();
   const router = useOverlayRouter("episodes");
   const setHasOpenOverlay = usePlayerStore((s) => s.setHasOpenOverlay);
@@ -485,7 +485,7 @@ export function Episodes() {
   useEffect(() => {
     setHasOpenOverlay(router.isRouterActive);
   }, [setHasOpenOverlay, router.isRouterActive]);
-  if (type !== "show") return null;
+  if (type !== "show" || !props.inControl) return null;
 
   return (
     <OverlayAnchor id={router.id}>

src/components/player/atoms/NextEpisodeButton.tsx

@@ -93,6 +93,7 @@ function useNextSeasonEpisode(
 export function NextEpisodeButton(props: {
   controlsShowing: boolean;
   onChange?: (meta: PlayerMeta) => void;
+  inControl: boolean;
 }) {
   const { t } = useTranslation();
   const duration = usePlayerStore((s) => s.progress.duration);
@@ -208,6 +209,7 @@ export function NextEpisodeButton(props: {
     time,
   ]);
 
+  if (!props.inControl) return null;
   if (!meta?.episode || !nextEp) return null;
   if (metaType !== "show") return null;
 

src/components/player/atoms/SkipIntroButton.tsx

@@ -42,18 +42,12 @@ function Button(props: {
 export function SkipIntroButton(props: {
   controlsShowing: boolean;
   skipTime?: number | null;
+  inControl: boolean;
 }) {
   const time = usePlayerStore((s) => s.progress.time);
   const status = usePlayerStore((s) => s.status);
   const display = usePlayerStore((s) => s.display);
-
   const showingState = shouldShowSkipButton(time, props.skipTime);
-
-  let show = false;
-  if (showingState === "always") show = true;
-  else if (showingState === "hover" && props.controlsShowing) show = true;
-  if (status !== "playing") show = false;
-
   const animation = showingState === "hover" ? "slide-up" : "fade";
   let bottom = "bottom-[calc(6rem+env(safe-area-inset-bottom))]";
   if (showingState === "always") {
@@ -61,12 +55,17 @@ export function SkipIntroButton(props: {
       ? bottom
       : "bottom-[calc(3rem+env(safe-area-inset-bottom))]";
   }
-
   const handleSkip = useCallback(() => {
     if (typeof props.skipTime === "number" && display) {
       display.setTime(props.skipTime);
     }
   }, [props.skipTime, display]);
+  if (!props.inControl) return null;
+
+  let show = false;
+  if (showingState === "always") show = true;
+  else if (showingState === "hover" && props.controlsShowing) show = true;
+  if (status !== "playing") show = false;
 
   return (
     <Transition

src/components/player/atoms/Skips.tsx

@@ -4,14 +4,16 @@ import { Icons } from "@/components/Icon";
 import { VideoPlayerButton } from "@/components/player/internals/Button";
 import { usePlayerStore } from "@/stores/player/store";
 
-export function SkipForward(props: { iconSizeClass?: string }) {
+export function SkipForward(props: {
+  iconSizeClass?: string;
+  inControl: boolean;
+}) {
   const display = usePlayerStore((s) => s.display);
   const time = usePlayerStore((s) => s.progress.time);
-
   const commit = useCallback(() => {
     display?.setTime(time + 10);
   }, [display, time]);
-
+  if (!props.inControl) return null;
   return (
     <VideoPlayerButton
       iconSizeClass={props.iconSizeClass}
@@ -21,14 +23,16 @@ export function SkipForward(props: { iconSizeClass?: string }) {
   );
 }
 
-export function SkipBackward(props: { iconSizeClass?: string }) {
+export function SkipBackward(props: {
+  iconSizeClass?: string;
+  inControl: boolean;
+}) {
   const display = usePlayerStore((s) => s.display);
   const time = usePlayerStore((s) => s.progress.time);
-
   const commit = useCallback(() => {
     display?.setTime(time - 10);
   }, [display, time]);
-
+  if (!props.inControl) return null;
   return (
     <VideoPlayerButton
       iconSizeClass={props.iconSizeClass}

src/pages/parts/player/PlayerPart.tsx

@@ -9,9 +9,9 @@ import { Widescreen } from "@/components/player/atoms/Widescreen";
 import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
 import { useSkipTime } from "@/components/player/hooks/useSkipTime";
 import { useIsMobile } from "@/hooks/useIsMobile";
-import { useOverlayRouter } from "@/hooks/useOverlayRouter";
 import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
+import { useWatchPartyStore } from "@/stores/watchParty";
 
 import { ScrapingPartInterruptButton, Tips } from "./ScrapingPart";
 
@@ -27,7 +27,9 @@ export function PlayerPart(props: PlayerPartProps) {
   const status = usePlayerStore((s) => s.status);
   const { isMobile } = useIsMobile();
   const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading);
-  const router = useOverlayRouter("settings");
+  const { isHost, enabled } = useWatchPartyStore();
+
+  const inControl = !enabled || isHost;
 
   const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
   const isIOSPWA =
@@ -95,12 +97,12 @@ export function PlayerPart(props: PlayerPartProps) {
         className="text-white"
         show={showTouchTargets && status === playerStatus.PLAYING}
       >
-        <Player.SkipBackward iconSizeClass="text-3xl" />
+        <Player.SkipBackward iconSizeClass="text-3xl" inControl={inControl} />
         <Player.Pause
           iconSizeClass="text-5xl"
           className={isLoading ? "opacity-0" : "opacity-100"}
         />
-        <Player.SkipForward iconSizeClass="text-3xl" />
+        <Player.SkipForward iconSizeClass="text-3xl" inControl={inControl} />
       </Player.CenterMobileControls>
 
       <Player.TopControls show={showTargets}>
@@ -149,15 +151,15 @@ export function PlayerPart(props: PlayerPartProps) {
             {status === playerStatus.PLAYING ? (
               <>
                 <Player.Pause />
-                <Player.SkipBackward />
-                <Player.SkipForward />
+                <Player.SkipBackward inControl={inControl} />
+                <Player.SkipForward inControl={inControl} />
                 <Player.Volume />
                 <Player.Time />
               </>
             ) : null}
           </Player.LeftSideControls>
           <div className="flex items-center space-x-3">
-            <Player.Episodes />
+            <Player.Episodes inControl={inControl} />
             {status === playerStatus.PLAYING ? (
               <>
                 <Player.Pip />
@@ -186,7 +188,7 @@ export function PlayerPart(props: PlayerPartProps) {
           <div className="flex justify-center space-x-3">
             {/* Disable PiP for iOS PWA */}
             {!isIOSPWA && status === playerStatus.PLAYING && <Player.Pip />}
-            <Player.Episodes />
+            <Player.Episodes inControl={inControl} />
             {status === playerStatus.PLAYING ? (
               <div className="hidden ssm:block">
                 <Player.Captions />
@@ -219,9 +221,14 @@ export function PlayerPart(props: PlayerPartProps) {
       <Player.NextEpisodeButton
         controlsShowing={showTargets}
         onChange={props.onMetaChange}
+        inControl={inControl}
       />
 
-      <SkipIntroButton controlsShowing={showTargets} skipTime={skiptime} />
+      <SkipIntroButton
+        controlsShowing={showTargets}
+        skipTime={skiptime}
+        inControl={inControl}
+      />
     </Player.Container>
   );
 }