add thumbnails, stream listing page

See merge request aquareum-tv/aquareum!71

Changelog: feature

.gitlab-ci.yml

···
 build-mac:
   stage: build
   interruptible: true
-  image: ghcr.io/cirruslabs/macos-runner:sonoma
+  image: ghcr.io/cirruslabs/macos-runner:sequoia
   tags:
     - tart-installed
   timeout: 2 hours
   script:
     - git fetch --unshallow || echo 'already unshallow'
     - brew install ninja go openssl@3 && go version
-    - sudo gem install --user-install xcpretty
+    - sudo gem uninstall xcodeproj -x --ignore-dependencies
+    - sudo gem install xcodeproj -v 1.25.1
     - curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs > rustup.sh && bash rustup.sh -y && rm rustup.sh
-    - export PATH="$PATH:$HOME/.cargo/bin:$(find $HOME/.gem/ruby -type d -name bin -maxdepth 2)"
+    - export PATH="$PATH:$HOME/.cargo/bin"
+    - echo $PATH
+    - 'echo "which xcodeproj: $(which xcodeproj)"'
+    - 'echo "xcodeproj --version: $(xcodeproj --version)"'
+    - "$(which xcodeproj) --version"
     - >
       brew install python@3.11
       && python3.11 -m pip install virtualenv
···
       && source ~/venv/bin/activate
       && pip3 install meson
       && make ci-macos -j16
+      && make selftest-macos
 
 windows-selftest:
   stage: build
   # for the moment...
-  allow_failure: true
   tags:
     - windows
   timeout: 2 hours

Makefile

···
 		-D "gst-plugins-good:isomp4=enabled" \
 		-D "gst-plugins-good:png=enabled" \
 		-D "gst-plugins-good:videobox=enabled" \
+		-D "gst-plugins-good:jpeg=enabled" \
 		-D "gst-plugins-good:audioparsers=enabled" \
 		-D "gst-plugins-bad:videoparsers=enabled" \
 		-D "gst-plugins-bad:mpegtsmux=enabled" \
···
 		-D "gst-plugins-ugly:gpl=enabled" \
 		-D "x264:asm=enabled" \
 		-D "gstreamer-full:gst-full=enabled" \
-		-D "gstreamer-full:gst-full-plugins=libgstaudioresample.a;libgstmatroska.a;libgstmultifile.a;libgstaudiotestsrc.a;libgstaudioconvert.a;libgstaudioparsers.a;libgstfdkaac.a;libgstisomp4.a;libgstapp.a;libgstvideoconvertscale.a;libgstvideobox.a;libgstvideorate.a;libgstpng.a;libgstcompositor.a;libgsthls.a;libgstx264.a;libgstopus.a;libgstvideotestsrc.a;libgstvideoparsersbad.a;libgstaudioparsers.a;libgstmpegtsmux.a;libgstplayback.a;libgsttypefindfunctions.a" \
+		-D "gstreamer-full:gst-full-plugins=libgstaudioresample.a;libgstlibav.a;libgstmatroska.a;libgstmultifile.a;libgstjpeg.a;libgstaudiotestsrc.a;libgstaudioconvert.a;libgstaudioparsers.a;libgstfdkaac.a;libgstisomp4.a;libgstapp.a;libgstvideoconvertscale.a;libgstvideobox.a;libgstvideorate.a;libgstpng.a;libgstcompositor.a;libgsthls.a;libgstx264.a;libgstopus.a;libgstvideotestsrc.a;libgstvideoparsersbad.a;libgstaudioparsers.a;libgstmpegtsmux.a;libgstplayback.a;libgsttypefindfunctions.a" \
 		-D "gstreamer-full:gst-full-libraries=gstreamer-controller-1.0,gstreamer-plugins-base-1.0,gstreamer-pbutils-1.0" \
 		-D "gstreamer-full:gst-full-target-type=static_library" \
 		-D "gstreamer-full:gst-full-elements=coreelements:concat,filesrc,filesink,queue,queue2,typefind,tee,filesink,capsfilter,fakesink" \
 		-D "gstreamer-full:bad=enabled" \
 		-D "gstreamer-full:tls=disabled" \
+		-D "gstreamer-full:libav=enabled" \
 		-D "gstreamer-full:ugly=enabled" \
 		-D "gstreamer-full:gpl=enabled" \
 		-D "gstreamer-full:gst-full-typefind-functions="
···
 	&& mv js/desktop/out/make/Aquareum-$(VERSION_ELECTRON)-arm64.dmg ./bin/aquareum-desktop-$(VERSION)-darwin-arm64.dmg \
 	&& mv js/desktop/out/make/zip/darwin/x64/Aquareum-darwin-x64-$(VERSION_ELECTRON).zip ./bin/aquareum-desktop-$(VERSION)-darwin-amd64.zip \
 	&& mv js/desktop/out/make/zip/darwin/arm64/Aquareum-darwin-arm64-$(VERSION_ELECTRON).zip ./bin/aquareum-desktop-$(VERSION)-darwin-arm64.zip
+
+.PHONY: selftest-macos
+selftest-macos:
+	js/desktop/out/Aquareum-darwin-arm64/Aquareum.app/Contents/MacOS/Aquareum -- --self-test
 
 # link your local version of mist for dev
 .PHONY: link-mist

js/app/app.config.ts

···
 };
 
 export default function () {
+  const isProd =
+    process.env["AQ_PRODUCTION_RELEASE"] === "true" || !!process.env.CI;
   const pkg = require("./package.json");
-  const name = "Aquareum";
-  const bundle = "tv.aquareum";
+  const name = isProd ? "Aquareum" : "Devquarium";
+  const bundle = isProd ? "tv.aquareum" : "tv.aquareum.dev";
   return {
     expo: {
       name: name,
···
         supportsTablet: true,
         bundleIdentifier: bundle,
         googleServicesFile: "./GoogleService-Info.plist",
-        entitlements: {
-          "aps-environment": "production",
-        },
+        entitlements: isProd
+          ? {
+              "aps-environment": "production",
+            }
+          : {},
         infoPlist: {
           UIBackgroundModes: ["fetch", "remote-notification"],
           LSMinimumSystemVersion: "12.0",
···
             assets: ["assets"],
           },
         ],
-        [withNotificationsIOS, {}],
         [withConsistentVersionNumber, { version: pkg.version }],
+        ...(isProd ? [[withNotificationsIOS, {}]] : ["expo-dev-launcher"]),
       ],
       experiments: {
         typedRoutes: true,
       },
-      updates: {
-        url: `https://aquareum.tv/api/manifest`,
-        enabled: true,
-        checkAutomatically: "ON_LOAD",
-        fallbackToCacheTimeout: 30000,
-        codeSigningCertificate: "./code-signing/certs/certificate.pem",
-        codeSigningMetadata: {
-          keyid: "main",
-          alg: "rsa-v1_5-sha256",
-        },
-      },
+      updates: isProd
+        ? {
+            url: `https://aquareum.tv/api/manifest`,
+            enabled: true,
+            checkAutomatically: "ON_LOAD",
+            fallbackToCacheTimeout: 30000,
+            codeSigningCertificate: "./code-signing/certs/certificate.pem",
+            codeSigningMetadata: {
+              keyid: "main",
+              alg: "rsa-v1_5-sha256",
+            },
+          }
+        : {},
     },
   };
 }

js/app/app/(tabs)/index.tsx

···
 import { useState } from "react";
 import GetApps from "components/get-apps";
 import { Link } from "expo-router";
+import StreamList from "components/stream-list/stream-list";
 
 const WebviewIframe = ({ src }) => {
   if (isWeb) {
···
   };
   return (
     <YStack f={1} ai="center" gap="$8" pt="$5" alignItems="stretch">
-      <YStack f={1} alignItems="stretch">
+      {/* <YStack f={1} alignItems="stretch">
         <View fg={1} flexBasis={0} onPress={handlePress}>
           {!debug && (
             <ImageBackground
···
               </Text>
             ))}
         </View>
-      </YStack>
-      <View flexShrink={0} flexGrow={0}>
+      </YStack> */}
+      {/* <View flexShrink={0} flexGrow={0}>
         <CenteredH2>Aquareum: The Video Layer for Everything</CenteredH2>
       </View>
       <View>
         <GetApps />
-      </View>
-      <View fg={3} flexBasis={0}>
-        <WebviewIframe src="https://iame.li" />
-      </View>
-      <View paddingBottom="$10"></View>
+      </View> */}
+      <StreamList></StreamList>
     </YStack>
   );
 }

js/app/app/_layout.tsx

···
 import { Settings } from "@tamagui/lucide-icons";
 import { topSafeHeight } from "./platform";
 import { SafeAreaView } from "react-native";
+import usePlatform from "hooks/usePlatform";
 
 export {
   // Catch any errors thrown by the Layout component.
···
 
 export const LinkNoUnderline = styled(Link, {});
 
+// hack to prevent an error we can't do anything about in
+// HLS.js from popping up a full screen error page in dev
+const IGNORE_THIS_ERROR =
+  "The fetching process for the media resource was aborted by the user agent at the user's request.";
+if (isWeb && typeof window !== "undefined") {
+  const handler = (e: PromiseRejectionEvent) => {
+    if (`${e.reason}`.includes(IGNORE_THIS_ERROR)) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      console.error(e);
+    }
+  };
+  window.addEventListener("unhandledrejection", handler);
+}
+
 function RootLayoutNav() {
   const colorScheme = useColorScheme();
 
···
                   },
                   headerLeft: () => (
                     <Anchor href="https://explorer.livepeer.org/treasury/74518185892381909671177921640414850443801430499809418110611019961553289709442">
-                      <View bg="rgb(189 110 134)" br="$5" padding="$2">
+                      <View bg="$accentColor" br="$5" padding="$2">
                         <H4 fontSize="$4">What's Aquareum?</H4>
                       </View>
                     </Anchor>

js/app/components/error/error.tsx

···
+import { View, Text, Button } from "tamagui";
+
+export default function (props: { onRetry: () => void }) {
+  return (
+    <View f={1} justifyContent="center" alignItems="center">
+      <Text>Unable to contact server.</Text>
+      <Button onPress={props.onRetry}>Retry?</Button>
+    </View>
+  );
+}

js/app/components/loading/loading.tsx

···
+import { View, Text, Spinner as TamaguiSpinner } from "tamagui";
+
+export default function () {
+  return (
+    <View f={1} alignItems="center" justifyContent="center">
+      <Spinner />
+    </View>
+  );
+}
+
+export function Spinner() {
+  return <TamaguiSpinner color="$accentColor" size="large" />;
+}

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

···
-import Video from "./video.native";
-import Controls from "./controls";
 import { VideoView } from "expo-video";
 import { useRef } from "react";
+import Controls from "./controls";
+import PlayerLoading from "./player-loading";
 import { PlayerProps } from "./props";
+import Video from "./video.native";
+import VideoRetry from "./video-retry";
 
 export default function Fullscreen(props: PlayerProps) {
   const ref = useRef<VideoView>(null);
···
   };
   return (
     <>
+      <PlayerLoading {...props}></PlayerLoading>
       <Controls {...props} setFullscreen={setFullscreen} />
-      <Video {...props} videoRef={ref} />
+      <VideoRetry {...props}>
+        <Video {...props} videoRef={ref} />
+      </VideoRetry>
     </>
   );
 }

js/app/components/player/fullscreen.tsx

···
 import { useEffect, useRef } from "react";
 import { TamaguiElement, View } from "tamagui";
+import Controls from "./controls";
+import PlayerLoading from "./player-loading";
 import { PlayerProps } from "./props";
 import Video from "./video";
-import Controls from "./controls";
+import VideoRetry from "./video-retry";
 
 export default function Fullscreen(props: PlayerProps) {
   const ref = useRef<TamaguiElement>(null);
···
 
   return (
     <View flex={1} ref={ref}>
+      <PlayerLoading {...props}></PlayerLoading>
       <Controls {...props} setFullscreen={setFullscreen} />
-      <Video {...props} />
+      <VideoRetry {...props}>
+        <Video {...props} />
+      </VideoRetry>
     </View>
   );
 }

js/app/components/player/player-loading.tsx

···
+import { Spinner } from "components/loading/loading";
+import { View } from "tamagui";
+import { PlayerProps, PlayerStatus } from "./props";
+
+export default function PlayerLoading(props: PlayerProps) {
+  if (props.status === PlayerStatus.PLAYING) {
+    return <></>;
+  }
+  return (
+    <View
+      position="absolute"
+      width="100%"
+      height="100%"
+      zIndex={998}
+      alignItems="center"
+      justifyContent="center"
+      backgroundColor="rgba(0,0,0,0.8)"
+    >
+      <Spinner></Spinner>
+    </View>
+  );
+}

js/app/components/player/player.tsx

···
 import {
   PlayerEvent,
   PlayerProps,
+  PlayerStatus,
+  PlayerStatusTracker,
   PROTOCOL_HLS,
   PROTOCOL_PROGRESSIVE_MP4,
 } from "./props";
 import usePlatform from "hooks/usePlatform";
-import { v7 as uuidv7 } from "uuid";
 import useAquareumNode from "hooks/useAquareumNode";
+import { uuidv7 } from "hooks/uuid";
 
 const HIDE_CONTROLS_AFTER = 2000;
 
···
       console.error("error sending player telemetry", e);
     }
   };
+  const [status, setStatus] = usePlayerStatus(playerEvent);
   const [protocol, setProtocol] = useState(defProto);
   const [fullscreen, setFullscreen] = useState(false);
   const childProps: PlayerProps = {
···
     showControls: props.showControls ?? showControls,
     userInteraction: userInteraction,
     playerEvent: playerEvent,
+    status: status,
+    setStatus: setStatus,
   };
   return (
     <View f={1} justifyContent="center" position="relative">
···
     </View>
   );
 }
+
+const POLL_INTERVAL = 5000;
+export function usePlayerStatus(
+  playerEvent: (
+    time: string,
+    eventType: string,
+    meta: { [key: string]: any },
+  ) => Promise<void>,
+): [PlayerStatus, (PlayerStatus) => void] {
+  const [whatDoing, setWhatDoing] = useState<PlayerStatus>(PlayerStatus.START);
+  const [whatDid, setWhatDid] = useState<PlayerStatusTracker>({});
+  const [doingSince, setDoingSince] = useState(Date.now());
+  const [lastUpdated, setLastUpdated] = useState(0);
+  const updateWhatDid = (now: Date): PlayerStatusTracker => {
+    const prev = whatDid[whatDoing] ?? 0;
+    const duration = now.getTime() - doingSince;
+    const ret = {
+      ...whatDid,
+      [whatDoing]: prev + duration,
+    };
+    return ret;
+  };
+  const updateStatus = (status: PlayerStatus) => {
+    const now = new Date();
+    if (status !== whatDoing) {
+      setWhatDid(updateWhatDid(now));
+      setWhatDoing(status);
+      setDoingSince(now.getTime());
+    }
+  };
+
+  useEffect(() => {
+    if (lastUpdated === 0) {
+      return;
+    }
+    const now = new Date();
+    const fullWhatDid = updateWhatDid(now);
+    setWhatDid({} as PlayerStatusTracker);
+    setDoingSince(now.getTime());
+    playerEvent(now.toISOString(), "aq-played", {
+      whatHappened: fullWhatDid,
+    });
+  }, [lastUpdated]);
+
+  useEffect(() => {
+    const interval = setInterval((_) => {
+      setLastUpdated(Date.now());
+    }, POLL_INTERVAL);
+    return () => clearInterval(interval);
+  }, []);
+  return [whatDoing, updateStatus];
+}

js/app/components/player/props.tsx

···
   protocol: string;
   showControls: boolean;
   telemetry: boolean;
-  setMuted: (boolean) => void;
-  setFullscreen: (boolean) => void;
-  setProtocol: (string) => void;
+  setMuted: (isMuted: boolean) => void;
+  setFullscreen: (isFullscreen: boolean) => void;
+  setProtocol: (protocol: string) => void;
   userInteraction: () => void;
   playerEvent: (
     time: string,
···
     meta: { [key: string]: any },
   ) => void;
   playerId: string;
+  status: PlayerStatus;
+  setStatus: (status: PlayerStatus) => void;
 };
 
 export type PlayerEvent = {
···
 export const PROTOCOL_HLS = "hls";
 export const PROTOCOL_PROGRESSIVE_MP4 = "progressive-mp4";
 export const PROTOCOL_PROGRESSIVE_WEBM = "progressive-webm";
+
+export enum PlayerStatus {
+  START = "start",
+  PLAYING = "playing",
+  STALLED = "stalled",
+  WAITING = "waiting",
+}
+
+export type PlayerStatusTracker = Partial<Record<PlayerStatus, number>>;

js/app/components/player/video-retry.tsx

···
+import React, { useEffect, useState } from "react";
+import { PlayerProps, PlayerStatus } from "./props";
+
+export default function VideoRetry(
+  props: PlayerProps & { children: React.ReactNode },
+) {
+  const [resetTime, setResetTime] = useState<number>(Date.now());
+  const isPlaying = props.status === PlayerStatus.PLAYING;
+  useEffect(() => {
+    if (isPlaying) {
+      return;
+    }
+    const handle = setTimeout(() => {
+      // you've had long enough. try again!
+      setResetTime(Date.now());
+    }, 5000);
+    return () => clearTimeout(handle);
+  }, [isPlaying]);
+  return <React.Fragment key={resetTime}>{props.children}</React.Fragment>;
+}

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

···
 import React, { useEffect } from "react";
-import { useVideoPlayer, VideoView } from "expo-video";
+import { useVideoPlayer, VideoPlayerEvents, VideoView } from "expo-video";
 import useAquareumNode from "hooks/useAquareumNode";
 import {
   PlayerProps,
+  PlayerStatus,
   PROTOCOL_HLS,
   PROTOCOL_PROGRESSIVE_MP4,
   PROTOCOL_PROGRESSIVE_WEBM,
···
   props: PlayerProps & { videoRef: React.RefObject<VideoView> },
 ) {
   const { url } = srcToUrl(props);
+  useEffect(() => {
+    return () => {
+      props.setStatus(PlayerStatus.START);
+    };
+  }, []);
   const player = useVideoPlayer(url, (player) => {
     player.loop = true;
     player.muted = props.muted;
···
   }, [props.muted, player]);
 
   useEffect(() => {
-    const subscription = player.addListener("playingChange", (isPlaying) => {
-      // setIsPlaying(isPlaying);
+    const subs = (
+      [
+        "playToEnd",
+        "playbackRateChange",
+        "playingChange",
+        "sourceChange",
+        "statusChange",
+        "volumeChange",
+      ] as (keyof VideoPlayerEvents)[]
+    ).map((evType) => {
+      const now = new Date();
+      return player.addListener(evType, (...args) => {
+        props.playerEvent(now.toISOString(), evType, { args: args });
+      });
     });
 
+    subs.push(
+      player.addListener("playingChange", (newIsPlaying, oldIsPlaying) => {
+        if (newIsPlaying) {
+          props.setStatus(PlayerStatus.PLAYING);
+        } else {
+          props.setStatus(PlayerStatus.WAITING);
+        }
+      }),
+    );
+
     return () => {
-      subscription.remove();
+      for (const sub of subs) {
+        sub.remove();
+      }
     };
   }, [player]);
 

js/app/components/player/video.tsx

···
 import Controls from "./controls";
 import {
   PlayerProps,
+  PlayerStatus,
   PROTOCOL_HLS,
   PROTOCOL_PROGRESSIVE_MP4,
   PROTOCOL_PROGRESSIVE_WEBM,
···
 
 const VideoElement = forwardRef(
   (props: VideoProps, ref: ForwardedRef<HTMLVideoElement>) => {
-    const [whatDoing, setWhatDoing] = useState("start");
-    const [whatDid, setWhatDid] = useState<{ [key: string]: number }>({});
-    const [doingSince, setDoingSince] = useState(Date.now());
-    const [lastUpdated, setLastUpdated] = useState(0);
-    const updateWhatDid = (now: Date): { [key: string]: number } => {
-      const prev = whatDid[whatDoing] ?? 0;
-      const duration = now.getTime() - doingSince;
-      const ret = {
-        ...whatDid,
-        [whatDoing]: prev + duration,
-      };
-      return ret;
-    };
     const event = (evType) => (e) => {
       const now = new Date();
-      if (updateEvents[evType] && evType !== whatDoing) {
-        setWhatDid(updateWhatDid(now));
-        setWhatDoing(evType);
-        setDoingSince(now.getTime());
+      if (updateEvents[evType]) {
+        props.setStatus(evType);
       }
       props.playerEvent(now.toISOString(), evType, {});
     };
 
     useEffect(() => {
-      if (lastUpdated === 0) {
-        return;
-      }
-      const now = new Date();
-      const fullWhatDid = updateWhatDid(now);
-      setWhatDid({});
-      setDoingSince(now.getTime());
-      props.playerEvent(now.toISOString(), "aq-played", {
-        whatHappened: fullWhatDid,
-      });
-    }, [lastUpdated]);
+      return () => {
+        props.setStatus(PlayerStatus.START);
+      };
+    }, []);
 
-    useEffect(() => {
-      const interval = setInterval((_) => {
-        setLastUpdated(Date.now());
-      }, POLL_INTERVAL);
-      return () => clearInterval(interval);
-    }, []);
     return (
       <View
         backgroundColor="#111"
···
     if (Hls.isSupported()) {
       var hls = new Hls();
       hls.loadSource(props.url);
-      hls.attachMedia(videoRef.current);
+      try {
+        hls.attachMedia(videoRef.current);
+      } catch (e) {
+        console.error("error on attachMedia");
+        hls.stopLoad();
+        return;
+      }
       hls.on(Hls.Events.MANIFEST_PARSED, () => {
         if (!videoRef.current) {
           return;

js/app/components/stream-list/stream-list.tsx

···
+import ErrorBox from "components/error/error";
+import Loading from "components/loading/loading";
+import { Link } from "expo-router";
+import useAquareumNode from "hooks/useAquareumNode";
+import { useEffect, useState } from "react";
+import { Pressable } from "react-native";
+import { ScrollView, Text, Image, View, H2, H6 } from "tamagui";
+
+type Segment = {
+  id: string;
+  user: string;
+  startTime: string;
+  endTime: string;
+};
+
+export default function StreamList() {
+  const [streams, setStreams] = useState<Segment[]>([]);
+  const [error, setError] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [retryTime, setRetryTime] = useState<number>(Date.now());
+  const { url } = useAquareumNode();
+  useEffect(() => {
+    setError(false);
+    setLoading(true);
+    (async () => {
+      try {
+        const res = await fetch(`${url}/api/segment/recent`);
+        if (!res.ok) {
+          return;
+        }
+        const data = await res.json();
+        if (!Array.isArray(data)) {
+          throw new Error("got non-array back from /api/segment/recent");
+        }
+        setStreams(data);
+      } catch (e) {
+        console.error(e);
+        setError(true);
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [url, retryTime]);
+  if (loading) {
+    return <Loading></Loading>;
+  }
+  if (error) {
+    return <ErrorBox onRetry={() => setRetryTime(Date.now())} />;
+  }
+  return (
+    <ScrollView contentContainerStyle={{ alignItems: "center" }}>
+      {streams.map((seg) => (
+        <Link asChild key={seg.user} href={`/stream/${seg.user}`}>
+          <Pressable>
+            <View key={seg.user}>
+              <Image
+                height={200}
+                src={`${url}/api/playback/${seg.user}/stream.jpg`}
+                resizeMode="contain"
+                objectFit="contain"
+              />
+              <H6>{seg.user}</H6>
+            </View>
+          </Pressable>
+        </Link>
+      ))}
+    </ScrollView>
+  );
+}

js/app/hooks/uuid.tsx

···
+export const uuidv4 = () => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = Math.trunc(Math.random() * 16);
+    const v = c == "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+export const uuidv7 = () => {
+  return "tttttttt-tttt-7xxx-yxxx-xxxxxxxxxxxx"
+    .replace(/[xy]/g, function (c) {
+      const r = Math.trunc(Math.random() * 16);
+      const v = c == "x" ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    })
+    .replace(/^[t]{8}-[t]{4}/, function () {
+      const unixtimestamp = Date.now().toString(16).padStart(12, "0");
+      return unixtimestamp.slice(0, 8) + "-" + unixtimestamp.slice(8);
+    });
+};

js/app/package.json

···
     "test": "jest --watchAll",
     "build": "yarn run build:web && yarn run prebuild",
     "build:web": "yarn run export && node exportClientExpoConfig.js > dist/expoConfig.json",
-    "export": "expo export || expo export",
+    "export": "expo export --dump-sourcemap || expo export --dump-sourcemap",
     "check": "bash -c 'export OUT=$(mktemp -d); npx tsc -p . --outDir $OUT; rm -rf $OUT'",
     "prebuild": "EXPO_NO_GIT_STATUS=1 expo prebuild --clean && sed -i.bak 's/org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m/org.gradle.jvmargs=-Xmx8192m -XX:MaxMetaspaceSize=2048m/' android/gradle.properties && echo '\nnetworkTimeout=100000' >> android/gradle.properties && sed -i.bak  's/plugins { id(\"com.facebook.react.settings\") }//' android/settings.gradle && yarn run find-node",
     "postinstall": "which pod && yarn run postinstall-ios || echo 'not a mac, not installing pods'",
···
     "chrono-node": "^2.7.6",
     "expo": "~51.0.21",
     "expo-build-properties": "^0.12.3",
+    "expo-dev-client": "~4.0.28",
     "expo-font": "~12.0.9",
     "expo-linking": "~6.3.1",
     "expo-notifications": "~0.28.10",

js/app/tamagui.config.ts

···
     hoverNone: { hover: "none" },
     pointerCoarse: { pointer: "coarse" },
   },
+  themes: {
+    ...configBase.themes,
+    dark: {
+      ...configBase.themes.dark,
+      accentColor: "rgb(189 110 134)",
+    },
+  },
 };
 
 const config = createTamagui(aquareumConfig);

js/desktop/src/index.ts

···
+import { app, BrowserWindow, dialog } from "electron";
+import { parseArgs } from "node:util";
+import { resolve } from "path";
 import "source-map-support/register";
-import { app, BrowserWindow, autoUpdater, dialog } from "electron";
+import { v7 as uuidv7 } from "uuid";
+import getEnv from "./env";
+import makeNode from "./node";
+import initUpdater from "./updater";
 // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
 // whether you're running in development or production).
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
 declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
-import makeNode from "./node";
-import getEnv from "./env";
-import initUpdater from "./updater";
-import path, { resolve } from "path";
-import { parseArgs } from "node:util";
-import { v7 as uuidv7 } from "uuid";
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require("electron-squirrel-startup")) {
···
       },
       "self-test-duration": {
         type: "string",
-        default: "60000",
+        default: "300000",
       },
     },
   });
···
 
   const runSelfTest = async (): Promise<void> => {
     let exitCode = 0;
+    const { nodeFrontend } = getEnv();
     const { addr, internalAddr, proc } = await makeNode({
       env: {
         AQ_TEST_STREAM: "true",
···
       }));
       const enc = encodeURIComponent(JSON.stringify(tests));
 
-      mainWindow.loadURL(`${addr}/multi/${enc}`);
+      if (nodeFrontend) {
+        mainWindow.loadURL(`${addr}/multi/${enc}`);
+      } else {
+        mainWindow.loadURL(`http://localhost:38081/multi/${enc}`);
+      }
+
+      let foundThumbnail = false;
+      const interval = setInterval(async () => {
+        const res = await fetch(`${addr}/api/playback/self-test/stream.jpg`);
+        if (res.status === 404) {
+          console.log("no thumbnail found");
+          return;
+        }
+        if (res.status !== 200) {
+          console.log(
+            `unexpected http status ${res.status}, failing thumbnail test`,
+          );
+          clearInterval(interval);
+          return;
+        }
+        const blob = await res.arrayBuffer();
+        if (blob.byteLength < 1) {
+          console.log("thumbnail was empty :(");
+          return;
+        }
+        console.log("found thumbnail!");
+        foundThumbnail = true;
+        clearInterval(interval);
+      }, 1000);
 
       await delay(parseInt(args["self-test-duration"]));
+      clearInterval(interval);
       const reports = await Promise.all(
         tests.map(async (t) => {
           const res = await fetch(
···
         }),
       );
       let failed = false;
+      if (!foundThumbnail) {
+        console.log("never found a thumbnail, failing test");
+        failed = true;
+      }
       const percentages = reports.map((report) => {
         let total = 0;
         for (const [state, ms] of Object.entries(report.data)) {

pkg/api/api.go

···
 	apiRouter.GET("/api/playback/:user/stream.mp4", a.HandleMP4Playback(ctx))
 	apiRouter.GET("/api/playback/:user/stream.webm", a.HandleMKVPlayback(ctx))
 	apiRouter.GET("/api/playback/:user/hls/:file", a.HandleHLSPlayback(ctx))
+	apiRouter.GET("/api/playback/:user/stream.jpg", a.HandleThumbnailPlayback(ctx))
 	apiRouter.POST("/api/player-event", a.HandlePlayerEvent(ctx))
+	apiRouter.GET("/api/segment/recent", a.HandleRecentSegments(ctx))
 	apiRouter.NotFound = a.HandleAPI404(ctx)
 	router.Handler("GET", "/api/*resource", apiRouter)
 	router.Handler("POST", "/api/*resource", apiRouter)
···
 			return
 		}
 		w.WriteHeader(201)
+	}
+}
+
+func (a *AquareumAPI) HandleRecentSegments(ctx context.Context) httprouter.Handle {
+	return func(w http.ResponseWriter, req *http.Request, params httprouter.Params) {
+		segs, err := a.Model.MostRecentSegments()
+		if err != nil {
+			apierrors.WriteHTTPInternalServerError(w, "could not get segments", err)
+			return
+		}
+		bs, err := json.Marshal(segs)
+		if err != nil {
+			apierrors.WriteHTTPInternalServerError(w, "could not marshal segments", err)
+			return
+		}
+		w.Header().Add("Content-Type", "application/json")
+		w.Write(bs)
 	}
 }
 

pkg/api/playback.go

···
 import (
 	"bufio"
 	"context"
+	"fmt"
 	"io"
 	"net/http"
 	"path/filepath"
···
 	"strings"
 	"time"
 
+	"aquareum.tv/aquareum/pkg/aqtime"
 	"aquareum.tv/aquareum/pkg/errors"
 	"github.com/julienschmidt/httprouter"
 	"golang.org/x/sync/errgroup"
···
 		http.ServeFile(w, r, fullpath)
 	}
 }
+
+func (a *AquareumAPI) HandleThumbnailPlayback(ctx context.Context) httprouter.Handle {
+	return func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
+		user := p.ByName("user")
+		if user == "" {
+			errors.WriteHTTPBadRequest(w, "user required", nil)
+			return
+		}
+		user = a.NormalizeUser(user)
+		thumb, err := a.Model.LatestThumbnailForUser(user)
+		if err != nil {
+			errors.WriteHTTPInternalServerError(w, "could not query thumbnail", err)
+			return
+		}
+		if thumb == nil {
+			errors.WriteHTTPNotFound(w, "thumbnail not found", err)
+			return
+		}
+		aqt := aqtime.FromTime(thumb.Segment.StartTime)
+		fpath, err := a.CLI.SegmentFilePath(user, fmt.Sprintf("%s.%s", aqt.String(), thumb.Format))
+		if err != nil {
+			errors.WriteHTTPInternalServerError(w, "could not get segment file path", err)
+			return
+		}
+		http.ServeFile(w, r, fpath)
+
+		// getDir, err := a.MediaManager.SegmentToHLSOnce(ctx, user)
+		// if err != nil {
+		// 	errors.WriteHTTPInternalServerError(w, "SegmentToHLSOnce failed", nil)
+		// 	return
+		// }
+		// dir := getDir()
+		// fullpath := filepath.Join(dir, file)
+		// http.ServeFile(w, r, fullpath)
+	}
+}

pkg/aqtime/aqtime.go

···
 	return AQTime(str), nil
 }
 
+func FromTime(t time.Time) AQTime {
+	return AQTime(t.UTC().Format(fstr))
+}
+
 // year, month, day, hour, min, sec, millisecond
 func (aqt AQTime) Parts() (string, string, string, string, string, string, string) {
 	bits := RE.FindStringSubmatch(aqt.String())

pkg/cmd/aquareum.go

···
 package cmd
 
 import (
+	"bytes"
 	"context"
 	"crypto"
 	"flag"
···
 	"runtime/pprof"
 	"strconv"
 	"syscall"
+	"time"
 
 	"aquareum.tv/aquareum/pkg/aqhttp"
+	"aquareum.tv/aquareum/pkg/aqtime"
 	"aquareum.tv/aquareum/pkg/crypto/signers"
 	"aquareum.tv/aquareum/pkg/crypto/signers/eip712"
 	"aquareum.tv/aquareum/pkg/log"
···
 
 	group.Go(func() error {
 		return a.ServeInternalHTTP(ctx)
+	})
+
+	group.Go(func() error {
+		newSeg := mm.NewSegment()
+		for {
+			select {
+			case <-ctx.Done():
+				return nil
+			case not := <-newSeg:
+				err := mod.CreateSegment(not.Segment)
+				if err != nil {
+					log.Error(ctx, "could not add segment to database", "error", err)
+				}
+				go func() {
+					err := func() error {
+						oldThumb, err := mod.LatestThumbnailForUser(not.Segment.User)
+						if err != nil {
+							return err
+						}
+						if oldThumb != nil && not.Segment.StartTime.Sub(oldThumb.Segment.StartTime) < time.Minute {
+							// we have a thumbnail <60sec old, skip generating a new one
+							return nil
+						}
+						r := bytes.NewReader(not.Data)
+						aqt := aqtime.FromTime(not.Segment.StartTime)
+						fd, err := cli.SegmentFileCreate(not.Segment.User, aqt, "jpg")
+						if err != nil {
+							return err
+						}
+						err = mm.Thumbnail(ctx, r, fd)
+						if err != nil {
+							return err
+						}
+						thumb := &model.Thumbnail{
+							Format:    "jpg",
+							SegmentID: not.Segment.ID,
+						}
+						err = mod.CreateThumbnail(thumb)
+						if err != nil {
+							return err
+						}
+						return nil
+					}()
+					if err != nil {
+						log.Error(ctx, "could not create thumbnail", "error", err)
+					}
+				}()
+			}
+		}
 	})
 
 	if cli.TestStream {

pkg/config/config.go

···
 // get a path to a segment file in our database
 func (cli *CLI) SegmentFilePath(user string, file string) (string, error) {
 	ext := filepath.Ext(file)
-	if ext != ".mp4" {
-		return "", fmt.Errorf("expected mp4 ext, got %s", ext)
-	}
 	base := strings.TrimSuffix(file, ext)
 	aqt, err := aqtime.FromString(base)
 	if err != nil {
···
 
 // create a segment file in our database
 func (cli *CLI) SegmentFileCreate(user string, aqt aqtime.AQTime, ext string) (*os.File, error) {
-	if ext != "mp4" {
-		return nil, fmt.Errorf("expected mp4 ext, got %s", ext)
-	}
 	fname := fmt.Sprintf("%s.%s", aqt.FileSafeString(), ext)
 	yr, mon, day, hr, min, _, _ := aqt.Parts()
 	return cli.DataFileCreate([]string{SEGMENTS_DIR, user, yr, mon, day, hr, min, fname}, false)

pkg/media/gstreamer.go

···
 
 	mainLoop.Run()
 
-	if err != nil {
-		return err
-	}
 	if len(output.Bytes()) < 1 {
 		return fmt.Errorf("got a zero-byte buffer from SelfTest")
 	}
···
 				log.Log(ctx, "gstreamer debug", "message", debug)
 			}
 			cancel()
-			// default:
-			// 	log.Log(ctx, msg.String())
+		default:
+			log.Debug(ctx, msg.String())
 		}
 		return true
 	})
···
 
 	return elem, nil
 }
+
+func (mm *MediaManager) Thumbnail(ctx context.Context, r io.Reader, w io.Writer) error {
+	ctx = log.WithLogValues(ctx, "function", "Thumbnail")
+	mainLoop := glib.NewMainLoop(glib.MainContextDefault(), false)
+
+	pipelineSlice := []string{
+		"appsrc name=appsrc ! qtdemux ! decodebin ! videoconvert ! videoscale ! video/x-raw,width=[1,200],height=[1,200],pixel-aspect-ratio=1/1 ! pngenc ! appsink name=appsink",
+	}
+
+	pipeline, err := gst.NewPipelineFromString(strings.Join(pipelineSlice, "\n"))
+	if err != nil {
+		return fmt.Errorf("error creating TestSource pipeline: %w", err)
+	}
+	appsrc, err := pipeline.GetElementByName("appsrc")
+	if err != nil {
+		return err
+	}
+
+	src := app.SrcFromElement(appsrc)
+	src.SetCallbacks(&app.SourceCallbacks{
+		NeedDataFunc: readerNeedData(ctx, r),
+	})
+
+	ctx, cancel := context.WithCancel(ctx)
+	defer cancel()
+
+	appsink, err := pipeline.GetElementByName("appsink")
+	if err != nil {
+		return err
+	}
+
+	pipeline.GetPipelineBus().AddWatch(func(msg *gst.Message) bool {
+		switch msg.Type() {
+
+		case gst.MessageEOS: // When end-of-stream is received flush the pipeling and stop the main loop
+			cancel()
+		case gst.MessageError: // Error messages are always fatal
+			err := msg.ParseError()
+			log.Log(ctx, "gstreamer error", "error", err.Error())
+			if debug := err.DebugString(); debug != "" {
+				log.Log(ctx, "gstreamer debug", "message", debug)
+			}
+			cancel()
+		default:
+			log.Debug(ctx, msg.String())
+		}
+		return true
+	})
+
+	sink := app.SinkFromElement(appsink)
+	sink.SetCallbacks(&app.SinkCallbacks{
+		NewSampleFunc: writerNewSample(ctx, w),
+		EOSFunc: func(sink *app.Sink) {
+			cancel()
+		},
+	})
+
+	pipeline.SetState(gst.StatePlaying)
+
+	go func() {
+		<-ctx.Done()
+		pipeline.BlockSetState(gst.StateNull)
+		mainLoop.Quit()
+	}()
+
+	mainLoop.Run()
+
+	return nil
+}

pkg/media/gstreamer_test.go

···
 	require.NoError(t, err)
 	require.Greater(t, info.Size(), int64(0))
 }
+
+// func TestThumbnail(t *testing.T) {
+// 	mm := MediaManager{}
+// 	gst.Init(nil)
+// 	ifile, err := os.Open(getFixture("sample-segment.mp4"))
+// 	require.NoError(t, err)
+// 	buf := &bytes.Buffer{}
+// 	err = mm.Thumbnail(context.Background(), ifile, buf)
+// 	require.NoError(t, err)
+// 	require.Greater(t, len(buf.Bytes()), 0)
+// }

pkg/media/media.go

···
 	"aquareum.tv/aquareum/pkg/config"
 	"aquareum.tv/aquareum/pkg/crypto/signers"
 	"aquareum.tv/aquareum/pkg/log"
+	"aquareum.tv/aquareum/pkg/model"
 	"aquareum.tv/aquareum/pkg/replication"
 	"github.com/go-gst/go-gst/gst"
 	"github.com/google/uuid"
···
 const SCHEMA_ORG_END_TIME = "http://schema.org/endTime"
 
 type MediaManager struct {
-	cli            *config.CLI
-	mp4subs        map[string][]chan string
-	mp4subsmut     sync.Mutex
-	replicator     replication.Replicator
-	hlsRunning     map[string]HLSStream
-	hlsRunningMut  sync.Mutex
-	httpPipes      map[string]io.Writer
-	httpPipesMutex sync.Mutex
+	cli                 *config.CLI
+	mp4subs             map[string][]chan string
+	mp4subsmut          sync.Mutex
+	replicator          replication.Replicator
+	hlsRunning          map[string]HLSStream
+	hlsRunningMut       sync.Mutex
+	httpPipes           map[string]io.Writer
+	httpPipesMutex      sync.Mutex
+	newSegmentSubs      []chan *NewSegmentNotification
+	newSegmentSubsMutex sync.RWMutex
+}
+
+type NewSegmentNotification struct {
+	Segment *model.Segment
+	Data    []byte
 }
 
 type HLSStream struct {
···
 	mm.httpPipesMutex.Lock()
 	defer mm.httpPipesMutex.Unlock()
 	return mm.httpPipes[uu]
+}
+
+// register a handler for all new segments that come in
+func (mm *MediaManager) NewSegment() <-chan *NewSegmentNotification {
+	ch := make(chan *NewSegmentNotification)
+	mm.newSegmentSubsMutex.Lock()
+	defer mm.newSegmentSubsMutex.Unlock()
+	mm.newSegmentSubs = append(mm.newSegmentSubs, ch)
+	return ch
 }
 
 // subscribe to the latest segments from a given user for livestreaming purposes
···
 	io.Copy(fd, r)
 	base := filepath.Base(fd.Name())
 	go mm.PublishSegment(ctx, pub.String(), base)
+	seg := &model.Segment{
+		ID:        *mani.Label,
+		User:      pub.String(),
+		StartTime: meta.StartTime.Time(),
+		EndTime:   meta.EndTime.Time(),
+	}
+	mm.newSegmentSubsMutex.RLock()
+	defer mm.newSegmentSubsMutex.RUnlock()
+	not := &NewSegmentNotification{
+		Segment: seg,
+		Data:    buf,
+	}
+	for _, ch := range mm.newSegmentSubs {
+		go func() { ch <- not }()
+	}
 	log.Log(ctx, "successfully ingested segment", "user", pub.String(), "timestamp", meta.StartTime)
 	return nil
 }

pkg/model/model.go

···
 	ListPlayerEvents(playerId string) ([]PlayerEvent, error)
 	PlayerReport(playerId string) (map[string]float64, error)
 	ClearPlayerEvents() error
+
+	CreateSegment(segment *Segment) error
+	MostRecentSegments() ([]Segment, error)
+
+	CreateThumbnail(thumb *Thumbnail) error
+	LatestThumbnailForUser(user string) (*Thumbnail, error)
 }
 
 func MakeDB(dbURL string) (Model, error) {
···
 	if err != nil {
 		return nil, fmt.Errorf("error starting database: %w", err)
 	}
-	for _, model := range []any{Notification{}, PlayerEvent{}} {
+	for _, model := range []any{Notification{}, PlayerEvent{}, Segment{}, Thumbnail{}} {
 		err = db.AutoMigrate(model)
 		if err != nil {
 			return nil, err

pkg/model/segment.go

···
+package model
+
+import (
+	"time"
+)
+
+type Segment struct {
+	ID        string    `json:"id"        gorm:"primaryKey"`
+	User      string    `json:"user"      gorm:"index:latest_segments"`
+	StartTime time.Time `json:"startTime" gorm:"index:latest_segments"`
+	EndTime   time.Time `json:"endTime"`
+}
+
+func (m *DBModel) CreateSegment(seg *Segment) error {
+	err := m.DB.Model(Segment{}).Create(seg).Error
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+// should return the most recent segment for each user
+func (m *DBModel) MostRecentSegments() ([]Segment, error) {
+	var segments []Segment
+
+	err := m.DB.Table("segments AS s1").
+		Select("s1.*").
+		Where("start_time = (SELECT MAX(start_time) FROM segments AS s2 WHERE s2.user = s1.user)").
+		Scan(&segments).Error
+
+	if err != nil {
+		return nil, err
+	}
+
+	return segments, nil
+}

pkg/model/thumbnail.go

···
+package model
+
+import (
+	"fmt"
+
+	"github.com/google/uuid"
+)
+
+type Thumbnail struct {
+	ID        string  `json:"id"                gorm:"primaryKey"`
+	Format    string  `json:"format"`
+	SegmentID string  `json:"segmentId"         gorm:"index"`
+	Segment   Segment `json:"segment,omitempty" gorm:"foreignKey:SegmentID;references:id"`
+}
+
+func (m *DBModel) CreateThumbnail(thumb *Thumbnail) error {
+	uu, err := uuid.NewV7()
+	if err != nil {
+		return err
+	}
+	thumb.ID = uu.String()
+	err = m.DB.Model(Thumbnail{}).Create(thumb).Error
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+// return the most recent thumbnail for a user
+func (m *DBModel) LatestThumbnailForUser(user string) (*Thumbnail, error) {
+	var thumbnail Thumbnail
+
+	res := m.DB.Table("thumbnails AS t").
+		Select("t.*").
+		Joins("JOIN segments AS s ON t.segment_id = s.id").
+		Where("s.user = ?", user).
+		Order("s.start_time DESC").
+		Limit(1).
+		Scan(&thumbnail)
+	if res.Error != nil {
+		return nil, res.Error
+	}
+	if res.RowsAffected == 0 {
+		return nil, nil
+	}
+
+	var seg Segment
+	err := m.DB.First(&seg, "id = ?", thumbnail.SegmentID).Error
+	if err != nil {
+		return nil, fmt.Errorf("could not find segment for thumbnail SegmentID=%s", thumbnail.SegmentID)
+	}
+
+	thumbnail.Segment = seg
+
+	return &thumbnail, nil
+}

yarn.lock

···
   languageName: node
   linkType: hard
 
+"ajv@npm:8.11.0":
+  version: 8.11.0
+  resolution: "ajv@npm:8.11.0"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.1"
+    json-schema-traverse: "npm:^1.0.0"
+    require-from-string: "npm:^2.0.2"
+    uri-js: "npm:^4.2.2"
+  checksum: 10/aa0dfd6cebdedde8e77747e84e7b7c55921930974b8547f54b4156164ff70445819398face32dafda4bd4c61bbc7513d308d4c2bf769f8ea6cb9c8449f9faf54
+  languageName: node
+  linkType: hard
+
 "ajv@npm:^6.12.4, ajv@npm:^6.12.5":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
···
     chrono-node: "npm:^2.7.6"
     expo: "npm:~51.0.21"
     expo-build-properties: "npm:^0.12.3"
+    expo-dev-client: "npm:~4.0.28"
     expo-font: "npm:~12.0.9"
     expo-linking: "npm:~6.3.1"
     expo-notifications: "npm:~0.28.10"
···
   peerDependencies:
     expo: "*"
   checksum: 10/f2f8b15932ab2f805544fd96c6740d2354c6409706eee2664be1703c3480c7531a709112af811dc22f05c164c06501aec20f81617675e87b5a3b66ab5b8d7611
+  languageName: node
+  linkType: hard
+
+"expo-dev-client@npm:~4.0.28":
+  version: 4.0.28
+  resolution: "expo-dev-client@npm:4.0.28"
+  dependencies:
+    expo-dev-launcher: "npm:4.0.28"
+    expo-dev-menu: "npm:5.0.22"
+    expo-dev-menu-interface: "npm:1.8.3"
+    expo-manifests: "npm:~0.14.0"
+    expo-updates-interface: "npm:~0.16.2"
+  peerDependencies:
+    expo: "*"
+  checksum: 10/e091be8975d843a98e65f1d5cf05bdb5f7673d2dd332545198f5629f047bd5a68516800e0347de1f73650e0ea58741f089b2d0fab8939b759680d682d94bb924
+  languageName: node
+  linkType: hard
+
+"expo-dev-launcher@npm:4.0.28":
+  version: 4.0.28
+  resolution: "expo-dev-launcher@npm:4.0.28"
+  dependencies:
+    ajv: "npm:8.11.0"
+    expo-dev-menu: "npm:5.0.22"
+    expo-manifests: "npm:~0.14.0"
+    resolve-from: "npm:^5.0.0"
+    semver: "npm:^7.6.0"
+  peerDependencies:
+    expo: "*"
+  checksum: 10/6c38d4c6c8a134ec56783d534544bb3e0f0423418d01158ba8a7331be30898cf69b5d71f20bb3c2672e29de30004bcdc70b4064386efa4f2d35ae5d95ace86af
+  languageName: node
+  linkType: hard
+
+"expo-dev-menu-interface@npm:1.8.3":
+  version: 1.8.3
+  resolution: "expo-dev-menu-interface@npm:1.8.3"
+  peerDependencies:
+    expo: "*"
+  checksum: 10/c63b7a1c2e7591085527a7944f3a9eaf6fc77d845400c5d064518ef06904ab193b77020e5fe029ff2897e359a07217ff81b7074cbfd1435780cf0a0b5bc8cf17
+  languageName: node
+  linkType: hard
+
+"expo-dev-menu@npm:5.0.22":
+  version: 5.0.22
+  resolution: "expo-dev-menu@npm:5.0.22"
+  dependencies:
+    expo-dev-menu-interface: "npm:1.8.3"
+    semver: "npm:^7.5.4"
+  peerDependencies:
+    expo: "*"
+  checksum: 10/9ff91603cefc203a45733eadca589f92a2063edec4fcd77350b42c4b2e084c0e2de89c559c0ab209366b053187a189435717323dbc6b6622e46a94b446b6fa64
   languageName: node
   linkType: hard