Live view improvements (#10781)

* Show frigate features in bottom sheet on mobile

* Use flex wrap on mobile so the ptz icons are not cutoff

* Support opening pip from live view

* Remove unused

web/src/components/player/MsePlayer.tsx

@@ -6,6 +6,7 @@ type MSEPlayerProps = {
   className?: string;
   playbackEnabled?: boolean;
   audioEnabled?: boolean;
+  pip?: boolean;
   onPlaying?: () => void;
 };
 
@@ -14,6 +15,7 @@ function MSEPlayer({
   className,
   playbackEnabled = true,
   audioEnabled = false,
+  pip = false,
   onPlaying,
 }: MSEPlayerProps) {
   let connectTS: number = 0;
@@ -268,6 +270,16 @@ function MSEPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [playbackEnabled, onDisconnect, onConnect]);
 
+  // control pip
+
+  useEffect(() => {
+    if (!videoRef.current || !pip) {
+      return;
+    }
+
+    videoRef.current.requestPictureInPicture();
+  }, [pip, videoRef]);
+
   return (
     <video
       ref={videoRef}