chromecasting connectivity

src/components/player/atoms/Chromecast.tsx

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { Icons } from "@/components/Icon";
+import { VideoPlayerButton } from "@/components/player/internals/Button";
+import { usePlayerStore } from "@/stores/player/store";
+
+export interface ChromecastProps {
+  className?: string;
+}
+
+export function Chromecast(props: ChromecastProps) {
+  const [hidden, setHidden] = useState(false);
+  const isCasting = usePlayerStore((s) => s.interface.isCasting);
+  const ref = useRef<HTMLButtonElement>(null);
+
+  const setButtonVisibility = useCallback(
+    (tag: HTMLElement) => {
+      const isVisible = (tag.getAttribute("style") ?? "").includes("inline");
+      setHidden(!isVisible);
+    },
+    [setHidden]
+  );
+
+  useEffect(() => {
+    const tag = ref.current?.querySelector<HTMLElement>("google-cast-launcher");
+    if (!tag) return;
+
+    const observer = new MutationObserver(() => {
+      setButtonVisibility(tag);
+    });
+
+    observer.observe(tag, { attributes: true, attributeFilter: ["style"] });
+    setButtonVisibility(tag);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [setButtonVisibility]);
+
+  return (
+    <VideoPlayerButton
+      ref={ref}
+      className={[
+        props.className ?? "",
+        "google-cast-button",
+        isCasting ? "casting" : "",
+        hidden ? "hidden" : "",
+      ].join(" ")}
+      icon={Icons.CASTING}
+      onClick={(el) => {
+        const castButton = el.querySelector("google-cast-launcher");
+        if (castButton) (castButton as HTMLDivElement).click();
+      }}
+    />
+  );
+}

src/components/player/atoms/index.ts

@@ -13,3 +13,4 @@ export * from "./Episodes";
 export * from "./Airplay";
 export * from "./VolumeChangedPopout";
 export * from "./NextEpisodeButton";
+export * from "./Chromecast";

src/components/player/base/Container.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, RefObject, useEffect, useRef } from "react";
 
 import { OverlayDisplay } from "@/components/overlays/OverlayDisplay";
+import { CastingInternal } from "@/components/player/internals/CastingInternal";
 import { HeadUpdater } from "@/components/player/internals/HeadUpdater";
 import { KeyboardEvents } from "@/components/player/internals/KeyboardEvents";
 import { ProgressSaver } from "@/components/player/internals/ProgressSaver";
@@ -81,6 +82,7 @@ export function Container(props: PlayerProps) {
   return (
     <div className="relative">
       <BaseContainer>
+        <CastingInternal />
         <VideoContainer />
         <ProgressSaver />
         <KeyboardEvents />

src/components/player/internals/Button.tsx

@@ -1,19 +1,26 @@
 import classNames from "classnames";
+import { forwardRef } from "react";
 
 import { Icon, Icons } from "@/components/Icon";
 
-export function VideoPlayerButton(props: {
+export interface VideoPlayerButtonProps {
   children?: React.ReactNode;
-  onClick?: () => void;
+  onClick?: (el: HTMLButtonElement) => void;
   icon?: Icons;
   iconSizeClass?: string;
   className?: string;
   activeClass?: string;
-}) {
+}
+
+export const VideoPlayerButton = forwardRef<
+  HTMLButtonElement,
+  VideoPlayerButtonProps
+>((props, ref) => {
   return (
     <button
+      ref={ref}
       type="button"
-      onClick={props.onClick}
+      onClick={(e) => props.onClick?.(e.currentTarget as HTMLButtonElement)}
       className={classNames([
         "p-2 rounded-full hover:bg-video-buttonBackground hover:bg-opacity-50 transition-transform duration-100 flex items-center",
         props.activeClass ??
@@ -33,4 +40,4 @@ export function VideoPlayerButton(props: {
       {props.children}
     </button>
   );
-}
+});

src/components/player/internals/CastingInternal.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+
+import { useChromecastAvailable } from "@/hooks/useChromecastAvailable";
+import { usePlayerStore } from "@/stores/player/store";
+
+export function CastingInternal() {
+  const setInstance = usePlayerStore((s) => s.casting.setInstance);
+  const setController = usePlayerStore((s) => s.casting.setController);
+  const setPlayer = usePlayerStore((s) => s.casting.setPlayer);
+  const setIsCasting = usePlayerStore((s) => s.casting.setIsCasting);
+  const available = useChromecastAvailable();
+
+  useEffect(() => {
+    if (!available) return;
+
+    const ins = cast.framework.CastContext.getInstance();
+    setInstance(ins);
+    ins.setOptions({
+      receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
+      autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
+    });
+
+    const player = new cast.framework.RemotePlayer();
+    setPlayer(player);
+    const controller = new cast.framework.RemotePlayerController(player);
+    setController(controller);
+
+    function connectionChanged(e: cast.framework.RemotePlayerChangedEvent) {
+      if (e.field === "isConnected") {
+        setIsCasting(e.value);
+      }
+    }
+    controller.addEventListener(
+      cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
+      connectionChanged
+    );
+
+    return () => {
+      controller.removeEventListener(
+        cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
+        connectionChanged
+      );
+    };
+  }, [available, setPlayer, setController, setInstance, setIsCasting]);
+
+  return null;
+}

src/pages/parts/player/PlayerPart.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from "react";
 import { BrandPill } from "@/components/layout/BrandPill";
 import { Player } from "@/components/player";
 import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
+import { useChromecastAvailable } from "@/hooks/useChromecastAvailable";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
@@ -59,6 +60,7 @@ export function PlayerPart(props: PlayerPartProps) {
           </div>
           <div className="flex sm:hidden items-center justify-end">
             <Player.Airplay />
+            <Player.Chromecast />
           </div>
         </div>
       </Player.TopControls>
@@ -79,6 +81,7 @@ export function PlayerPart(props: PlayerPartProps) {
           <div className="flex items-center space-x-3">
             <Player.Episodes />
             <Player.Airplay />
+            <Player.Chromecast />
             <Player.Settings />
             <Player.Fullscreen />
           </div>

src/stores/player/slices/casting.ts

@@ -0,0 +1,47 @@
+import { MakeSlice } from "@/stores/player/slices/types";
+
+export interface CastingSlice {
+  casting: {
+    instance: cast.framework.CastContext | null;
+    player: cast.framework.RemotePlayer | null;
+    controller: cast.framework.RemotePlayerController | null;
+    setInstance(instance: cast.framework.CastContext): void;
+    setPlayer(player: cast.framework.RemotePlayer): void;
+    setController(controller: cast.framework.RemotePlayerController): void;
+    setIsCasting(isCasting: boolean): void;
+    clear(): void;
+  };
+}
+
+export const createCastingSlice: MakeSlice<CastingSlice> = (set) => ({
+  casting: {
+    instance: null,
+    player: null,
+    controller: null,
+    setInstance(instance) {
+      set((s) => {
+        s.casting.instance = instance;
+      });
+    },
+    setPlayer(player) {
+      set((s) => {
+        s.casting.player = player;
+      });
+    },
+    setController(controller) {
+      set((s) => {
+        s.casting.controller = controller;
+      });
+    },
+    setIsCasting(isCasting) {
+      set((s) => {
+        s.interface.isCasting = isCasting;
+      });
+    },
+    clear() {
+      set((s) => {
+        s.casting.instance = null;
+      });
+    },
+  },
+});

src/stores/player/slices/interface.ts

@@ -20,6 +20,7 @@ export interface InterfaceSlice {
     hovering: PlayerHoverState;
     lastHoveringState: PlayerHoverState;
     canAirplay: boolean;
+    isCasting: boolean;
     hideNextEpisodeBtn: boolean;
 
     volumeChangedWithKeybind: boolean; // has the volume recently been adjusted with the up/down arrows recently?
@@ -39,6 +40,7 @@ export interface InterfaceSlice {
 
 export const createInterfaceSlice: MakeSlice<InterfaceSlice> = (set, get) => ({
   interface: {
+    isCasting: false,
     hasOpenOverlay: false,
     isFullscreen: false,
     isSeeking: false,

src/stores/player/slices/types.ts

@@ -1,5 +1,6 @@
 import { StateCreator } from "zustand";
 
+import { CastingSlice } from "@/stores/player/slices/casting";
 import { DisplaySlice } from "@/stores/player/slices/display";
 import { InterfaceSlice } from "@/stores/player/slices/interface";
 import { PlayingSlice } from "@/stores/player/slices/playing";
@@ -10,7 +11,8 @@ export type AllSlices = InterfaceSlice &
   PlayingSlice &
   ProgressSlice &
   SourceSlice &
-  DisplaySlice;
+  DisplaySlice &
+  CastingSlice;
 export type MakeSlice<Slice> = StateCreator<
   AllSlices,
   [["zustand/immer", never]],

src/stores/player/store.ts

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
+import { createCastingSlice } from "@/stores/player/slices/casting";
 import { createDisplaySlice } from "@/stores/player/slices/display";
 import { createInterfaceSlice } from "@/stores/player/slices/interface";
 import { createPlayingSlice } from "@/stores/player/slices/playing";
@@ -15,5 +16,6 @@ export const usePlayerStore = create(
     ...createPlayingSlice(...a),
     ...createSourceSlice(...a),
     ...createDisplaySlice(...a),
+    ...createCastingSlice(...a),
   }))
 );