Improve Recordings loading (#10462)

* Show skeleton until video players finishes loading

* Clean up android logic

* Ensure mobile view video is consistent

* Cleanup

* Only show when not scrubbing

* Don't use loading

* Start preview at correct time too

* Fix react race condition

* Be wait for seek to show video player

web/src/views/events/RecordingView.tsx

@@ -301,6 +301,7 @@ export function MobileRecordingView({
   relevantPreviews,
   allCameras,
 }: MobileRecordingViewProps) {
+  const { data: config } = useSWR<FrigateConfig>("config");
   const navigate = useNavigate();
   const contentRef = useRef<HTMLDivElement | null>(null);
 
@@ -310,6 +311,21 @@ export function MobileRecordingView({
   const [playbackCamera, setPlaybackCamera] = useState(startCamera);
   const [playbackStart, setPlaybackStart] = useState(startTime);
 
+  const grow = useMemo(() => {
+    if (!config) {
+      return "aspect-video";
+    }
+
+    const aspectRatio =
+      config.cameras[playbackCamera].detect.width /
+      config.cameras[playbackCamera].detect.height;
+    if (aspectRatio > 2) {
+      return "aspect-wide";
+    } else {
+      return "aspect-video";
+    }
+  }, [config, playbackCamera]);
+
   // timeline time
 
   const timeRange = useMemo(() => getChunkedTimeDay(startTime), [startTime]);
@@ -453,6 +469,7 @@ export function MobileRecordingView({
 
       <div>
         <DynamicVideoPlayer
+          className={`w-full ${grow}`}
           camera={playbackCamera}
           timeRange={currentTimeRange}
           cameraPreviews={relevantPreviews || []}