Fix live photo cast

web/apps/cast/src/components/Theatre/PhotoAuditorium.tsx

@@ -1,95 +0,0 @@
-import { SlideshowContext } from "pages/slideshow";
-import { useContext, useEffect, useState } from "react";
-
-export default function PhotoAuditorium({
-    url,
-    nextSlideUrl,
-}: {
-    url: string;
-    nextSlideUrl: string;
-}) {
-    const { showNextSlide } = useContext(SlideshowContext);
-
-    const [showPreloadedNextSlide, setShowPreloadedNextSlide] = useState(false);
-    const [nextSlidePrerendered, setNextSlidePrerendered] = useState(false);
-    const [prerenderTime, setPrerenderTime] = useState<number | null>(null);
-
-    useEffect(() => {
-        let timeout: NodeJS.Timeout;
-        let timeout2: NodeJS.Timeout;
-
-        if (nextSlidePrerendered) {
-            const elapsedTime = prerenderTime ? Date.now() - prerenderTime : 0;
-            const delayTime = Math.max(10000 - elapsedTime, 0);
-
-            if (elapsedTime >= 10000) {
-                setShowPreloadedNextSlide(true);
-            } else {
-                timeout = setTimeout(() => {
-                    setShowPreloadedNextSlide(true);
-                }, delayTime);
-            }
-
-            if (showNextSlide) {
-                timeout2 = setTimeout(() => {
-                    showNextSlide();
-                    setNextSlidePrerendered(false);
-                    setPrerenderTime(null);
-                    setShowPreloadedNextSlide(false);
-                }, delayTime);
-            }
-        }
-
-        return () => {
-            if (timeout) clearTimeout(timeout);
-            if (timeout2) clearTimeout(timeout2);
-        };
-    }, [nextSlidePrerendered, showNextSlide, prerenderTime]);
-
-    return (
-        <div
-            style={{
-                width: "100vw",
-                height: "100vh",
-                backgroundImage: `url(${url})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-                backgroundRepeat: "no-repeat",
-                backgroundBlendMode: "multiply",
-                backgroundColor: "rgba(0, 0, 0, 0.5)",
-            }}
-        >
-            <div
-                style={{
-                    height: "100%",
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    backdropFilter: "blur(10px)",
-                }}
-            >
-                <img
-                    src={url}
-                    style={{
-                        maxWidth: "100%",
-                        maxHeight: "100%",
-                        display: showPreloadedNextSlide ? "none" : "block",
-                    }}
-                />
-                <img
-                    src={nextSlideUrl}
-                    style={{
-                        maxWidth: "100%",
-                        maxHeight: "100%",
-                        display: showPreloadedNextSlide ? "block" : "none",
-                    }}
-                    onLoad={() => {
-                        setNextSlidePrerendered(true);
-                        setPrerenderTime(Date.now());
-                    }}
-                />
-            </div>
-        </div>
-    );
-}

web/apps/cast/src/components/Theatre/VideoAuditorium.tsx

@@ -1,55 +0,0 @@
-import mime from "mime-types";
-import { SlideshowContext } from "pages/slideshow";
-import { useContext, useEffect, useRef } from "react";
-
-export default function VideoAuditorium({
-    name,
-    url,
-}: {
-    name: string;
-    url: string;
-}) {
-    const { showNextSlide } = useContext(SlideshowContext);
-
-    const videoRef = useRef<HTMLVideoElement>(null);
-
-    useEffect(() => {
-        attemptPlay();
-    }, [url, videoRef]);
-
-    const attemptPlay = async () => {
-        if (videoRef.current) {
-            try {
-                await videoRef.current.play();
-            } catch {
-                showNextSlide();
-            }
-        }
-    };
-
-    return (
-        <div
-            style={{
-                width: "100vw",
-                height: "100vh",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-            }}
-        >
-            <video
-                ref={videoRef}
-                autoPlay
-                controls
-                style={{
-                    maxWidth: "100vw",
-                    maxHeight: "100vh",
-                }}
-                onError={showNextSlide}
-                onEnded={showNextSlide}
-            >
-                <source src={url} type={mime.lookup(name)} />
-            </video>
-        </div>
-    );
-}

web/apps/cast/src/components/Theatre/index.tsx

@@ -1,30 +0,0 @@
-import { FILE_TYPE } from "constants/file";
-import PhotoAuditorium from "./PhotoAuditorium";
-// import VideoAuditorium from './VideoAuditorium';
-
-interface fileProp {
-    fileName: string;
-    fileURL: string;
-    type: FILE_TYPE;
-}
-
-interface IProps {
-    file1: fileProp;
-    file2: fileProp;
-}
-
-export default function Theatre(props: IProps) {
-    switch (props.file1.type && props.file2.type) {
-        case FILE_TYPE.IMAGE:
-            return (
-                <PhotoAuditorium
-                    url={props.file1.fileURL}
-                    nextSlideUrl={props.file2.fileURL}
-                />
-            );
-        // case FILE_TYPE.VIDEO:
-        //     return (
-        //         <VideoAuditorium name={props.fileName} url={props.fileURL} />
-        //     );
-    }
-}

web/apps/cast/src/pages/slideshow.tsx

@@ -1,6 +1,6 @@
 import log from "@/next/log";
 import PairedSuccessfullyOverlay from "components/PairedSuccessfullyOverlay";
-import Theatre from "components/Theatre";
+import PhotoAuditorium from "components/PhotoAuditorium";
 import { FILE_TYPE } from "constants/file";
 import { useRouter } from "next/router";
 import { createContext, useEffect, useState } from "react";
@@ -171,17 +171,9 @@ export default function Slideshow() {
     return (
         <>
             <SlideshowContext.Provider value={{ showNextSlide }}>
-                <Theatre
-                    file1={{
-                        fileName: currentFile?.metadata.title,
-                        fileURL: renderableFileURL,
-                        type: currentFile?.metadata.fileType,
-                    }}
-                    file2={{
-                        fileName: nextFile?.metadata.title,
-                        fileURL: renderableFileURL,
-                        type: nextFile?.metadata.fileType,
-                    }}
+                <PhotoAuditorium
+                    url={renderableFileURL}
+                    nextSlideUrl={renderableFileURL}
                 />
             </SlideshowContext.Provider>
             {loading && <PairedSuccessfullyOverlay />}