UI Tweaks (#12571)

web/src/components/player/BirdseyeLivePlayer.tsx

@@ -11,16 +11,18 @@ type LivePlayerProps = {
   className?: string;
   birdseyeConfig: BirdseyeConfig;
   liveMode: LivePlayerMode;
-  onClick?: () => void;
+  pip?: boolean;
   containerRef: React.MutableRefObject<HTMLDivElement | null>;
+  onClick?: () => void;
 };
 
 export default function BirdseyeLivePlayer({
   className,
   birdseyeConfig,
   liveMode,
-  onClick,
+  pip,
   containerRef,
+  onClick,
 }: LivePlayerProps) {
   let player;
   if (liveMode == "webrtc") {
@@ -28,6 +30,7 @@ export default function BirdseyeLivePlayer({
       <WebRtcPlayer
         className={`size-full rounded-lg md:rounded-2xl`}
         camera="birdseye"
+        pip={pip}
       />
     );
   } else if (liveMode == "mse") {
@@ -36,6 +39,7 @@ export default function BirdseyeLivePlayer({
         <MSEPlayer
           className={`size-full rounded-lg md:rounded-2xl`}
           camera="birdseye"
+          pip={pip}
         />
       );
     } else {

web/src/views/live/LiveBirdseyeView.tsx

@@ -5,15 +5,18 @@ import { Button } from "@/components/ui/button";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { useResizeObserver } from "@/hooks/resize-observer";
 import { FrigateConfig } from "@/types/frigateConfig";
-import { useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
   isDesktop,
+  isFirefox,
+  isIOS,
   isMobile,
   isSafari,
   useMobileOrientation,
 } from "react-device-detect";
 import { FaCompress, FaExpand } from "react-icons/fa";
 import { IoMdArrowBack } from "react-icons/io";
+import { LuPictureInPicture } from "react-icons/lu";
 import { useNavigate } from "react-router-dom";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import useSWR from "swr";
@@ -35,8 +38,17 @@ export default function LiveBirdseyeView({
   const [{ width: windowWidth, height: windowHeight }] =
     useResizeObserver(window);
 
+  // pip state
+
+  useEffect(() => {
+    setPip(document.pictureInPictureElement != null);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [document.pictureInPictureElement]);
+
   // playback state
 
+  const [pip, setPip] = useState(false);
   const cameraAspectRatio = useMemo(() => {
     if (!config) {
       return 16 / 9;
@@ -151,6 +163,23 @@ export default function LiveBirdseyeView({
                 title={fullscreen ? "Close" : "Fullscreen"}
                 onClick={toggleFullscreen}
               />
+              {!isIOS && !isFirefox && config.birdseye.restream && (
+                <CameraFeatureToggle
+                  className="p-2 md:p-0"
+                  variant={fullscreen ? "overlay" : "primary"}
+                  Icon={LuPictureInPicture}
+                  isActive={pip}
+                  title={pip ? "Close" : "Picture in Picture"}
+                  onClick={() => {
+                    if (!pip) {
+                      setPip(true);
+                    } else {
+                      document.exitPictureInPicture();
+                      setPip(false);
+                    }
+                  }}
+                />
+              )}
             </div>
           </TooltipProvider>
         </div>
@@ -177,6 +206,7 @@ export default function LiveBirdseyeView({
                 birdseyeConfig={config.birdseye}
                 liveMode={preferredLiveMode}
                 containerRef={containerRef}
+                pip={pip}
               />
             </div>
           </TransformComponent>

web/src/views/live/LiveCameraView.tsx

@@ -372,7 +372,7 @@ export default function LiveCameraView({
                   onClick={toggleFullscreen}
                 />
               )}
-              {!isIOS && !isFirefox && (
+              {!isIOS && !isFirefox && preferredLiveMode != "jsmpeg" && (
                 <CameraFeatureToggle
                   className="p-2 md:p-0"
                   variant={fullscreen ? "overlay" : "primary"}
@@ -452,8 +452,8 @@ export default function LiveCameraView({
                 iOSCompatFullScreen={isIOS}
                 preferredLiveMode={preferredLiveMode}
                 pip={pip}
-                setFullResolution={setFullResolution}
                 containerRef={containerRef}
+                setFullResolution={setFullResolution}
                 onError={handleError}
               />
             </div>