player: expose videoref for others to use

js/app/components/player/fullscreen.native.tsx

···
           ]}
         >
           <VideoRetry {...props}>
-            <Video {...props} videoRef={ref} />
+            <Video {...props} nativeVideoRef={ref} />
           </VideoRetry>
           <PlayerLoading {...props} />
           <Controls {...props} setFullscreen={setFullscreen} />
···
       <PlayerLoading {...props}></PlayerLoading>
       <Controls {...props} setFullscreen={setFullscreen} />
       <VideoRetry {...props}>
-        <Video {...props} videoRef={ref} />
+        <Video {...props} nativeVideoRef={ref} />
       </VideoRetry>
     </>
   );

js/app/components/player/fullscreen.tsx

···
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { TamaguiElement, View } from "tamagui";
 import Controls from "./controls";
 import PlayerLoading from "./player-loading";
···
 
 export default function Fullscreen(props: PlayerProps) {
   const divRef = useRef<TamaguiElement>(null);
-  const videoRef = useRef<HTMLVideoElement>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const videoCallback = useCallback((node: HTMLVideoElement | null) => {
+    videoRef.current = node;
+    if (typeof props.videoRef === "function") {
+      props.videoRef(node);
+    } else if (props.videoRef) {
+      props.videoRef.current = node;
+    }
+  }, []);
 
   const setFullscreen = (on: boolean) => {
     if (!divRef.current) {
···
       <PlayerLoading {...props}></PlayerLoading>
       <Controls {...props} setFullscreen={setFullscreen} />
       <VideoRetry {...props}>
-        <Video {...props} videoRef={videoRef} />
+        <Video {...props} videoRef={videoCallback} />
       </VideoRetry>
     </View>
   );

js/app/components/player/player.tsx

···
     muteWasForced: muteWasForced,
     setMuteWasForced: setMuteWasForced,
     embedded: props.embedded ?? false,
+    videoRef: props.videoRef,
     ...props,
   };
   return (

js/app/components/player/props.tsx

···
+import { VideoView } from "expo-video";
 import { Rendition } from "lexicons/types/place/stream/defs";
 
 export enum IngestMediaSource {
···
   muteWasForced: boolean;
   setMuteWasForced: (muteWasForced: boolean) => void;
   embedded: boolean;
+  videoRef:
+    | React.MutableRefObject<HTMLVideoElement | null>
+    | ((instance: HTMLVideoElement | null) => void)
+    | undefined;
 };
 
 export type PlayerEvent = {

js/app/components/player/video.native.tsx

···
 // }
 
 export default function NativeVideo(
-  props: PlayerProps & { videoRef: React.RefObject<VideoView> },
+  props: PlayerProps & { nativeVideoRef: React.RefObject<VideoView> },
 ) {
   const protocol = useAppSelector(usePlayerProtocol());
   if (protocol === PROTOCOL_WEBRTC) {
···
   return (
     <VideoView
       style={{ flex: 1, backgroundColor: "#111" }}
-      ref={props.videoRef}
+      ref={props.nativeVideoRef}
       player={player}
       allowsFullscreen
       nativeControls={props.fullscreen}

js/app/components/player/video.tsx

···
 
 type VideoProps = PlayerProps & { url: string };
 
-export default function WebVideo(
-  props: PlayerProps & { videoRef: RefObject<HTMLVideoElement> },
-) {
+export default function WebVideo(props: PlayerProps) {
   const inProto = useAppSelector(usePlayerProtocol());
   const { url, protocol } = srcToUrl(props, inProto);
-  useEffect(() => {
-    if (props.playTime == 0) {
-      return;
-    }
-    if (props.videoRef.current) {
-      props.videoRef.current.play();
-    }
-  }, [props.playTime]);
   if (props.ingest) {
     return <WebcamIngestPlayer url={url} {...props} />;
   }
···
 };
 
 const VideoElement = forwardRef(
-  (props: VideoProps, ref: ForwardedRef<HTMLVideoElement>) => {
+  (props: VideoProps, ref: ForwardedRef<HTMLVideoElement | null>) => {
     const event = (evType) => (e) => {
       console.log(evType);
       const now = new Date();
···
   },
 );
 
-export function ProgressiveMP4Player(
-  props: VideoProps & { videoRef: RefObject<HTMLVideoElement> },
-) {
-  return <VideoElement {...props} ref={props.videoRef} />;
+export function ProgressiveMP4Player(props: VideoProps) {
+  return <VideoElement {...props} />;
 }
 
-export function ProgressiveWebMPlayer(
-  props: VideoProps & { videoRef: RefObject<HTMLVideoElement> },
-) {
-  return <VideoElement {...props} ref={props.videoRef} />;
+export function ProgressiveWebMPlayer(props: VideoProps) {
+  return <VideoElement {...props} />;
 }
 
-export function HLSPlayer(
-  props: VideoProps & { videoRef: RefObject<HTMLVideoElement> },
-) {
-  const videoRef = props.videoRef;
+export function HLSPlayer(props: VideoProps) {
+  const localRef = useRef<HTMLVideoElement | null>(null);
+  const refCallback = useCallback((node: HTMLVideoElement | null) => {
+    localRef.current = node;
+    if (typeof props.videoRef === "function") {
+      props.videoRef(node);
+    } else if (props.videoRef) {
+      (
+        props.videoRef as React.MutableRefObject<HTMLVideoElement | null>
+      ).current = node;
+    }
+  }, []);
   useEffect(() => {
-    if (!videoRef.current) {
+    if (!localRef.current) {
       return;
     }
     if (Hls.isSupported()) {
···
       var hls = new Hls({ maxAudioFramesDrift: 20 });
       hls.loadSource(props.url);
       try {
-        hls.attachMedia(videoRef.current);
+        hls.attachMedia(localRef.current);
       } catch (e) {
         console.error("error on attachMedia");
         hls.stopLoad();
         return;
       }
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
-        if (!videoRef.current) {
+        if (!localRef.current) {
           return;
         }
-        videoRef.current.play();
+        localRef.current.play();
       });
       return () => {
         hls.stopLoad();
       };
-    } else if (videoRef.current.canPlayType("application/vnd.apple.mpegurl")) {
-      videoRef.current.src = props.url;
-      videoRef.current.addEventListener("canplay", () => {
-        if (!videoRef.current) {
+    } else if (localRef.current.canPlayType("application/vnd.apple.mpegurl")) {
+      localRef.current.src = props.url;
+      localRef.current.addEventListener("canplay", () => {
+        if (!localRef.current) {
           return;
         }
-        videoRef.current.play();
+        localRef.current.play();
       });
     }
-  }, [videoRef.current]);
-  return <VideoElement {...props} ref={videoRef} />;
+  }, [localRef.current]);
+  return <VideoElement {...props} ref={refCallback} />;
 }
 
-export function WebRTCPlayer(
-  props: VideoProps & { videoRef: RefObject<HTMLVideoElement> },
-) {
+export function WebRTCPlayer(props: VideoProps) {
   const [videoElement, setVideoElement] = useState<HTMLVideoElement | null>(
     null,
   );
···
   const handleRef = useCallback((node: HTMLVideoElement | null) => {
     if (node) {
       setVideoElement(node);
+    }
+    if (typeof props.videoRef === "function") {
+      props.videoRef(node);
+    } else if (props.videoRef) {
+      props.videoRef.current = node;
     }
   }, []);
 
···
   return <VideoElement {...props} ref={handleRef} />;
 }
 
-export function WebcamIngestPlayer(
-  props: VideoProps & { videoRef: RefObject<HTMLVideoElement> },
-) {
+export function WebcamIngestPlayer(props: VideoProps) {
   const dispatch = useAppDispatch();
   const player = useAppSelector(usePlayer());
   const storedKey = useAppSelector(selectStoredKey);

js/app/src/screens/live-dashboard.tsx

···
 } from "features/bluesky/blueskySlice";
 import { useAppSelector } from "store/hooks";
 import { Redirect } from "components/aqlink";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { useLiveUser } from "hooks/useLiveUser";
 import StreamKeyScreen from "components/live-dashboard/stream-key";
 
···
   const [streamSource, setStreamSource] = useState(StreamSource.Start);
   const isLive = useLiveUser();
   const telemetry = useAppSelector(selectTelemetry);
+  const videoRef = useCallback((node: HTMLVideoElement | null) => {
+    console.log("videoRef", node);
+    if (node !== null) {
+      // save here for screenshot alter
+    }
+  }, []);
   if (!isReady) {
     return <Loading />;
   }
···
   if (isWeb) {
     params = new URLSearchParams(window.location.search);
   }
+
   if (isLive && streamSource !== StreamSource.Camera) {
     topPane = (
       <Player
         telemetry={telemetry === true}
         src={userProfile.did}
         name={userProfile.handle}
+        videoRef={videoRef}
       />
     );
   } else if (streamSource === StreamSource.Start) {