@streamplace/components 0.6.37 → 0.7.0

package/src/components/chat/mod-view.tsx

@@ -0,0 +1,118 @@
+import { TriggerRef } from "@rn-primitives/dropdown-menu";
+import { forwardRef, useEffect, useRef } from "react";
+import { gap, mr } from "../../lib/theme/atoms";
+import { usePlayerStore } from "../../player-store";
+import { useCreateBlockRecord } from "../../streamplace-store/block";
+import { usePDSAgent } from "../../streamplace-store/xrpc";
+
+import {
+  DropdownMenu,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  layout,
+  ResponsiveDropdownMenuContent,
+  Text,
+  View,
+} from "../ui";
+import { RenderChatMessage } from "./chat-message";
+
+type ModViewProps = {
+  onClose?: () => void;
+  // onDeleteMessage?: (msg: ChatMessageViewHydrated) => void;
+  // onBanUser?: (userHandle: string) => void;
+};
+
+export type ModViewRef = {
+  open: () => void;
+  close: () => void;
+};
+
+export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
+  const triggerRef = useRef<TriggerRef>(null);
+  const message = usePlayerStore((state) => state.modMessage);
+
+  let agent = usePDSAgent();
+  let createBlockRecord = useCreateBlockRecord();
+
+  if (!agent?.did) {
+    <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
+      <Text>Log in to submit mod actions</Text>
+    </View>;
+  }
+
+  useEffect(() => {
+    if (message) {
+      console.log("opening mod view");
+      triggerRef.current?.open();
+    } else {
+      console.log("closing mod view");
+      triggerRef.current?.close();
+    }
+  }, [message]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger ref={triggerRef}>
+        {/* Hidden trigger */}
+        <View />
+      </DropdownMenuTrigger>
+      <ResponsiveDropdownMenuContent>
+        {message && (
+          <>
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <View style={[layout.flex.column, mr[5], { gap: 6 }]}>
+                  <RenderChatMessage item={message} />
+                </View>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+
+            <DropdownMenuGroup title={`Moderation actions`}>
+              {/* <DropdownMenuItem
+                  onPress={
+                    onDeleteMessage
+                      ? () => onDeleteMessage(modMessage)
+                      : undefined
+                  }
+                >
+                  <Text customColor={colors.ios.systemTeal}>
+                    Delete message
+                  </Text>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onPress={
+                    onBanUser
+                      ? () => onBanUser(modMessage.author.handle)
+                      : undefined
+                  }
+                >
+                  <Text color="destructive">
+                    Ban user @{modMessage.author.handle}
+                  </Text>
+                </DropdownMenuItem> */}
+              <DropdownMenuItem
+                disabled={message.author.did === agent?.did}
+                onPress={() => {
+                  console.log("Creating block record");
+                  createBlockRecord(message.author.did)
+                    .then((r) => console.log(r))
+                    .catch((e) => console.error(e));
+                }}
+              >
+                <Text color="destructive">
+                  {message.author.did === agent?.did ? (
+                    <>Block yourself (you can't block yourself)</>
+                  ) : (
+                    <>Block user @{message.author.handle} from this channel</>
+                  )}
+                </Text>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </>
+        )}
+      </ResponsiveDropdownMenuContent>
+    </DropdownMenu>
+  );
+});

package/src/components/mobile-player/fullscreen.native.tsx

@@ -0,0 +1,193 @@
+import { useNavigation } from "@react-navigation/native";
+import { VideoView } from "expo-video";
+import { useEffect, useRef, useState } from "react";
+import { BackHandler, Dimensions, StyleSheet, View } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { PlayerProtocol, useLivestreamStore, usePlayerStore } from "../..";
+import Video from "./video.native";
+
+// Standard 16:9 video aspect ratio
+const VIDEO_ASPECT_RATIO = 16 / 9;
+
+export function Fullscreen(props: { src: string }) {
+  const ref = useRef<VideoView>(null);
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  const [dimensions, setDimensions] = useState(Dimensions.get("window"));
+
+  // Get state from player store
+  const protocol = usePlayerStore((x) => x.protocol);
+  const fullscreen = usePlayerStore((x) => x.fullscreen);
+  const setFullscreen = usePlayerStore((x) => x.setFullscreen);
+  const handle = useLivestreamStore((x) => x.profile?.handle);
+
+  const setSrc = usePlayerStore((x) => x.setSrc);
+
+  useEffect(() => {
+    setSrc(props.src);
+  }, [props.src]);
+
+  // Re-calculate dimensions on orientation change
+  useEffect(() => {
+    const updateDimensions = () => {
+      setDimensions(Dimensions.get("window"));
+    };
+
+    const subscription = Dimensions.addEventListener(
+      "change",
+      updateDimensions,
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  // Hide status bar when in fullscreen mode
+  useEffect(() => {
+    if (fullscreen) {
+      SystemBars.setHidden(true);
+      console.log("setting sidebar hidden");
+
+      // Hide the navigation header
+      navigation.setOptions({
+        headerShown: false,
+      });
+
+      // Handle hardware back button
+      const backHandler = BackHandler.addEventListener(
+        "hardwareBackPress",
+        () => {
+          setFullscreen(false);
+          return true;
+        },
+      );
+
+      return () => {
+        backHandler.remove();
+      };
+    } else {
+      SystemBars.setHidden(false);
+
+      // Restore the navigation header
+      navigation.setOptions({
+        headerShown: true,
+      });
+    }
+
+    return () => {
+      SystemBars.setHidden(false);
+      // Ensure header is restored if component unmounts
+      navigation.setOptions({
+        headerShown: true,
+      });
+    };
+  }, [fullscreen, navigation, setFullscreen]);
+
+  // Handle fullscreen state changes for native video players
+  useEffect(() => {
+    // For WebRTC, we handle fullscreen manually via the custom implementation
+    if (protocol === PlayerProtocol.WEBRTC) {
+      return;
+    }
+
+    // For HLS and other protocols, sync with native fullscreen
+    if (ref.current) {
+      if (fullscreen) {
+        ref.current.enterFullscreen();
+      } else {
+        ref.current.exitFullscreen();
+      }
+    }
+  }, [fullscreen, protocol]);
+
+  if (fullscreen && protocol === PlayerProtocol.WEBRTC) {
+    // Determine if we're in landscape mode
+    const isLandscape = dimensions.width > dimensions.height;
+
+    // Calculate video container dimensions based on screen size and orientation
+    let videoWidth: number;
+    let videoHeight: number;
+
+    if (isLandscape) {
+      // In landscape, account for safe areas and use available height
+      const availableHeight = dimensions.height - (insets.top + insets.bottom);
+      const availableWidth = dimensions.width - (insets.left + insets.right);
+
+      videoHeight = availableHeight;
+      videoWidth = videoHeight * VIDEO_ASPECT_RATIO;
+
+      // If calculated width exceeds available width, constrain and maintain aspect ratio
+      if (videoWidth > availableWidth) {
+        videoWidth = availableWidth;
+        videoHeight = videoWidth / VIDEO_ASPECT_RATIO;
+      }
+    } else {
+      // In portrait, account for safe areas
+      const availableWidth = dimensions.width - (insets.left + insets.right);
+      videoWidth = availableWidth;
+      videoHeight = videoWidth / VIDEO_ASPECT_RATIO;
+    }
+
+    // Calculate position to center the video, accounting for safe areas
+    const leftPosition = (dimensions.width - videoWidth) / 2;
+    const topPosition = (dimensions.height - videoHeight) / 2;
+
+    // When in custom fullscreen mode
+    return (
+      <View
+        style={[
+          styles.fullscreenContainer,
+          {
+            width: isLandscape ? dimensions.width + 40 : dimensions.width,
+            height: dimensions.height,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.videoContainer,
+            {
+              width: isLandscape ? videoWidth + 40 : videoWidth,
+              height: videoHeight,
+              left: leftPosition,
+              top: topPosition,
+            },
+          ]}
+        >
+          <Video />
+        </View>
+      </View>
+    );
+  }
+
+  // Normal non-fullscreen mode
+  return (
+    <>
+      <Video />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  fullscreenContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "#000",
+    zIndex: 9999,
+    elevation: 9999,
+    margin: 0,
+    padding: 0,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  videoContainer: {
+    position: "absolute",
+    backgroundColor: "#111",
+    overflow: "hidden",
+  },
+});

package/src/components/mobile-player/fullscreen.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useRef } from "react";
+import { View as RNView } from "react-native";
+import { getFirstPlayerID, usePlayerStore } from "../..";
+import { View } from "../../components/ui";
+import Video from "./video";
+
+export function Fullscreen(props: { src: string }) {
+  const playerId = getFirstPlayerID();
+  const protocol = usePlayerStore((x) => x.protocol, playerId);
+  const fullscreen = usePlayerStore((x) => x.fullscreen, playerId);
+  const setFullscreen = usePlayerStore((x) => x.setFullscreen, playerId);
+  const setSrc = usePlayerStore((x) => x.setSrc);
+
+  const divRef = useRef<RNView>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  useEffect(() => {
+    setSrc(props.src);
+  }, [props.src]);
+
+  useEffect(() => {
+    if (!divRef.current) {
+      return;
+    }
+    (async () => {
+      if (fullscreen && !document.fullscreenElement) {
+        try {
+          const div = divRef.current as unknown as HTMLDivElement;
+          if (typeof div.requestFullscreen === "function") {
+            await div.requestFullscreen();
+          } else if (videoRef.current) {
+            if (
+              typeof (videoRef.current as any).webkitEnterFullscreen ===
+              "function"
+            ) {
+              await (videoRef.current as any).webkitEnterFullscreen();
+            } else if (
+              typeof videoRef.current.requestFullscreen === "function"
+            ) {
+              await videoRef.current.requestFullscreen();
+            }
+          }
+          setFullscreen(true);
+        } catch (e) {
+          console.error("fullscreen failed", e.message);
+        }
+      }
+      if (!fullscreen) {
+        if (document.fullscreenElement) {
+          try {
+            await document.exitFullscreen();
+          } catch (e) {
+            console.error("fullscreen exit failed", e.message);
+          }
+        }
+        setFullscreen(false);
+      }
+    })();
+  }, [fullscreen, protocol]);
+
+  useEffect(() => {
+    const listener = () => {
+      console.log("fullscreenchange", document.fullscreenElement);
+      setFullscreen(!!document.fullscreenElement);
+    };
+    document.body.addEventListener("fullscreenchange", listener);
+    document.body.addEventListener("webkitfullscreenchange", listener);
+    return () => {
+      document.body.removeEventListener("fullscreenchange", listener);
+      document.body.removeEventListener("webkitfullscreenchange", listener);
+    };
+  }, []);
+
+  return (
+    <View ref={divRef}>
+      <Video />
+    </View>
+  );
+}

package/src/components/mobile-player/player.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useState } from "react";
+import { flex, layout, w, zIndex } from "../../lib/theme/atoms";
+import { useSegment } from "../../livestream-store";
+import {
+  PlayerStatus,
+  PlayerStatusTracker,
+  usePlayerStore,
+} from "../../player-store";
+import { useStreamplaceStore } from "../../streamplace-store";
+import { Text, View } from "../ui";
+import { Fullscreen } from "./fullscreen";
+import { PlayerProps } from "./props";
+
+const OFFLINE_THRESHOLD = 10000;
+
+export * as PlayerUI from "./ui";
+
+export function Player(props: Partial<PlayerProps>) {
+  const playing = usePlayerStore((x) => x.status === PlayerStatus.PLAYING);
+
+  const setOffline = usePlayerStore((x) => x.setOffline);
+  const setIngest = usePlayerStore((x) => x.setIngestConnectionState);
+
+  const clearControlsTimeout = usePlayerStore((x) => x.clearControlsTimeout);
+
+  // Will call back every few seconds to send health updates
+  usePlayerStatus();
+
+  useEffect(() => {
+    setIngest(props.ingest ? "new" : null);
+  }, []);
+
+  if (typeof props.src !== "string") {
+    return (
+      <View>
+        <Text>No source provided 🤷</Text>
+      </View>
+    );
+  }
+
+  useEffect(() => {
+    return () => {
+      clearControlsTimeout();
+    };
+  }, []);
+
+  const segment = useSegment();
+  const [lastCheck, setLastCheck] = useState(0);
+
+  useEffect(() => {
+    if (playing) {
+      setOffline(false);
+      return;
+    }
+    if (!segment) {
+      setOffline(false);
+      return;
+    }
+    const startTime = Date.parse(segment.startTime);
+    if (!startTime) {
+      console.error("startTime is not a number", segment.startTime);
+      return;
+    }
+    const timeSinceStart = Date.now() - startTime;
+    if (timeSinceStart > OFFLINE_THRESHOLD) {
+      setOffline(true);
+      return;
+    }
+    const handle = setTimeout(() => {
+      setLastCheck(Date.now());
+    }, 1000);
+    return () => clearTimeout(handle);
+  }, [segment, playing, lastCheck]);
+
+  return (
+    <>
+      <View
+        style={[zIndex[0], flex.values[1], w.percent[100], layout.flex.center]}
+      >
+        <Fullscreen src={props.src}></Fullscreen>
+      </View>
+    </>
+  );
+}
+
+const POLL_INTERVAL = 5000;
+export function usePlayerStatus(): [PlayerStatus] {
+  const playerStatus = usePlayerStore((x) => x.status);
+  const url = useStreamplaceStore((x) => x.url);
+  const playerEvent = usePlayerStore((x) => x.playerEvent);
+  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;
+  };
+  // callback to update the status
+  useEffect(() => {
+    const now = new Date();
+    if (playerStatus !== whatDoing) {
+      setWhatDid(updateWhatDid(now));
+      setWhatDoing(playerStatus);
+      setDoingSince(now.getTime());
+    }
+  }, [playerStatus]);
+
+  useEffect(() => {
+    if (lastUpdated === 0) {
+      return;
+    }
+    const now = new Date();
+    const fullWhatDid = updateWhatDid(now);
+    setWhatDid({} as PlayerStatusTracker);
+    setDoingSince(now.getTime());
+    playerEvent(url, now.toISOString(), "aq-played", {
+      whatHappened: fullWhatDid,
+    });
+  }, [lastUpdated]);
+
+  useEffect(() => {
+    const interval = setInterval((_) => {
+      setLastUpdated(Date.now());
+    }, POLL_INTERVAL);
+    return () => clearInterval(interval);
+  }, []);
+  return [whatDoing];
+}

package/src/components/mobile-player/props.tsx

@@ -0,0 +1,11 @@
+export type PlayerProps = {
+  name: string;
+  playerId?: string;
+  src: string;
+  muted: boolean;
+  telemetry: boolean;
+  fullscreen: boolean;
+  setFullscreen: (isFullscreen: boolean) => void;
+  ingest?: boolean;
+  embedded?: boolean;
+};

package/src/components/mobile-player/shared.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from "react";
+import { PlayerProtocol, useStreamplaceStore } from "../..";
+
+const protocolSuffixes = {
+  m3u8: PlayerProtocol.HLS,
+  mp4: PlayerProtocol.PROGRESSIVE_MP4,
+  webm: PlayerProtocol.PROGRESSIVE_WEBM,
+  webrtc: PlayerProtocol.WEBRTC,
+};
+
+export function srcToUrl(
+  props: {
+    src: string;
+    selectedRendition?: string;
+  },
+  protocol: PlayerProtocol,
+): {
+  url: string;
+  protocol: string;
+} {
+  const url = useStreamplaceStore((x) => x.url);
+  return useMemo(() => {
+    if (props.src.startsWith("http://") || props.src.startsWith("https://")) {
+      const segments = props.src.split(/[./]/);
+      const suffix = segments[segments.length - 1];
+      if (protocolSuffixes[suffix]) {
+        return {
+          url: props.src,
+          protocol: protocolSuffixes[suffix],
+        };
+      } else {
+        throw new Error(`unknown playback protocol: ${suffix}`);
+      }
+    }
+    let outUrl: string;
+    if (protocol === PlayerProtocol.HLS) {
+      if (props.selectedRendition === "auto") {
+        outUrl = `${url}/api/playback/${props.src}/hls/index.m3u8`;
+      } else {
+        outUrl = `${url}/api/playback/${props.src}/hls/index.m3u8?rendition=${props.selectedRendition || "source"}`;
+      }
+    } else if (protocol === PlayerProtocol.PROGRESSIVE_MP4) {
+      outUrl = `${url}/api/playback/${props.src}/stream.mp4`;
+    } else if (protocol === PlayerProtocol.PROGRESSIVE_WEBM) {
+      outUrl = `${url}/api/playback/${props.src}/stream.webm`;
+    } else if (protocol === PlayerProtocol.WEBRTC) {
+      outUrl = `${url}/api/playback/${props.src}/webrtc?rendition=${props.selectedRendition || "source"}`;
+    } else {
+      throw new Error(`unknown playback protocol: ${protocol}`);
+    }
+    return {
+      protocol: protocol,
+      url: outUrl,
+    };
+  }, [props.src, props.selectedRendition, protocol, url]);
+}