@streamplace/components 0.7.2 → 0.7.7

package/src/player-store/player-state.tsx

@@ -1,3 +1,4 @@
+import { ComAtprotoModerationCreateReport } from "@atproto/api";
 import { ChatMessageViewHydrated } from "streamplace";
 
 export enum PlayerProtocol {
@@ -99,10 +100,6 @@ export interface PlayerState {
   setPlayTime: (playTime: number) => void;
 
   /** Flag indicating if player is in offline state */
-  offline: boolean;
-
-  /** Function to set the offline state */
-  setOffline: (offline: boolean) => void;
   /** Reference to the video element for direct manipulation (used for PiP) */
   videoRef:
     | React.MutableRefObject<HTMLVideoElement | null>
@@ -119,6 +116,10 @@ export interface PlayerState {
       | undefined,
   ) => void;
 
+  pipAction: (() => void) | undefined;
+  /** Function to set the Picture-in-Picture action */
+  setPipAction: (action: (() => void) | undefined) => void;
+
   /** Player element width (CSS value or number) */
   playerWidth?: string | number;
   /** Function to set the player width */
@@ -176,6 +177,26 @@ export interface PlayerState {
 
   /** Function to set the mod message */
   setModMessage: (message: ChatMessageViewHydrated | null) => void;
+
+  /** URL to send player events to (if not default) */
+  reportingURL: string | null;
+
+  /** Function to set the reporting URL */
+  setReportingURL: (reportingURL: string | null) => void;
+
+  /** Is the report modal open? */
+  reportModalOpen: boolean;
+
+  /** Function to set the report modal open state */
+  setReportModalOpen: (reportModalOpen: boolean) => void;
+
+  /** Subject to report */
+  reportSubject: ComAtprotoModerationCreateReport.InputSchema["subject"] | null;
+
+  /** Function to set the report subject */
+  setReportSubject: (
+    subject: ComAtprotoModerationCreateReport.InputSchema["subject"] | null,
+  ) => void;
 }
 
 export type PlayerEvent = {

package/src/player-store/player-store.tsx

@@ -1,6 +1,8 @@
-import { useContext } from "react";
+import { ComAtprotoModerationCreateReport } from "@atproto/api";
+import { useContext, useEffect, useState } from "react";
 import { ChatMessageViewHydrated } from "streamplace";
 import { createStore, StoreApi, useStore } from "zustand";
+import { useLivestreamStore } from "../livestream-store";
 import { PlayerContext } from "./context";
 import {
   IngestMediaSource,
@@ -68,9 +70,6 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     playTime: 0,
     setPlayTime: (playTime: number) => set(() => ({ playTime })),
 
-    offline: false,
-    setOffline: (offline: boolean) => set(() => ({ offline })),
-
     videoRef: undefined,
     setVideoRef: (
       videoRef:
@@ -83,6 +82,11 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     pipMode: false,
     setPipMode: (pipMode: boolean) => set(() => ({ pipMode })),
 
+    // Picture-in-Picture action function (set by player component)
+    pipAction: undefined,
+    setPipAction: (action: (() => void) | undefined) =>
+      set(() => ({ pipAction: action })),
+
     // Player element width/height setters for global sync
     playerWidth: undefined,
     setPlayerWidth: (playerWidth: number) => set(() => ({ playerWidth })),
@@ -109,6 +113,10 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     ingestLive: false,
     setIngestLive: (ingestLive: boolean) => set(() => ({ ingestLive })),
 
+    reportingURL: null,
+    setReportingURL: (reportingURL: string | null) =>
+      set(() => ({ reportingURL })),
+
     playerEvent: async (
       url: string,
       time: string,
@@ -126,7 +134,8 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
         };
         try {
           // fetch url from sp provider
-          fetch(`${url}/api/player-event`, {
+          const reportingURL = x.reportingURL ?? `${url}/api/player-event`;
+          fetch(reportingURL, {
             method: "POST",
             body: JSON.stringify(data),
           });
@@ -163,6 +172,15 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     modMessage: null,
     setModMessage: (modMessage: ChatMessageViewHydrated | null) =>
       set(() => ({ modMessage })),
+
+    reportModalOpen: false,
+    setReportModalOpen: (reportModalOpen: boolean) =>
+      set(() => ({ reportModalOpen })),
+
+    reportSubject: null,
+    setReportSubject: (
+      subject: ComAtprotoModerationCreateReport.InputSchema["subject"] | null,
+    ) => set(() => ({ reportSubject: subject })),
   }));
 };
 
@@ -237,3 +255,23 @@ export const intoPlayerProtocol = (protocol: string): PlayerProtocol => {
       return PlayerProtocol.WEBRTC;
   }
 };
+
+// returns true if the livestream has been offline for more than 10 seconds and we're not playing
+export const useOffline = () => {
+  const status = usePlayerStore((x) => x.status);
+  const segment = useLivestreamStore((x) => x.segment);
+  const [now, setNow] = useState(Date.now());
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setNow(Date.now());
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+  if (status === PlayerStatus.PLAYING) {
+    return false;
+  }
+  if (!segment?.startTime) {
+    return false;
+  }
+  return now - Date.parse(segment.startTime) > 10000;
+};

package/src/streamplace-store/block.tsx

@@ -1,10 +1,12 @@
 import { AppBskyGraphBlock } from "@atproto/api";
+import { useState } from "react";
 import { usePDSAgent } from "./xrpc";
 
 export function useCreateBlockRecord() {
   let agent = usePDSAgent();
+  const [isLoading, setIsLoading] = useState(false);
 
-  return async (subjectDID: string) => {
+  const createBlock = async (subjectDID: string) => {
     if (!agent) {
       throw new Error("No PDS agent found");
     }
@@ -13,17 +15,57 @@ export function useCreateBlockRecord() {
       throw new Error("No user DID found, assuming not logged in");
     }
 
-    const record: AppBskyGraphBlock.Record = {
-      $type: "app.bsky.graph.block",
-      subject: subjectDID,
-      createdAt: new Date().toISOString(),
-    };
-    return await agent.com.atproto.repo.createRecord({
-      repo: agent.did,
-      collection: "app.bsky.graph.block",
-      record,
-    });
-
-    return record;
+    setIsLoading(true);
+    try {
+      const record: AppBskyGraphBlock.Record = {
+        $type: "app.bsky.graph.block",
+        subject: subjectDID,
+        createdAt: new Date().toISOString(),
+      };
+      const result = await agent.com.atproto.repo.createRecord({
+        repo: agent.did,
+        collection: "app.bsky.graph.block",
+        record,
+      });
+      return result;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { createBlock, isLoading };
+}
+
+export function useCreateHideChatRecord() {
+  let agent = usePDSAgent();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const createHideChat = async (chatMessageUri: string) => {
+    if (!agent) {
+      throw new Error("No PDS agent found");
+    }
+
+    if (!agent.did) {
+      throw new Error("No user DID found, assuming not logged in");
+    }
+
+    setIsLoading(true);
+    try {
+      const record = {
+        $type: "place.stream.chat.gate",
+        hiddenMessage: chatMessageUri,
+      };
+
+      const result = await agent.com.atproto.repo.createRecord({
+        repo: agent.did,
+        collection: "place.stream.chat.gate",
+        record,
+      });
+      return result;
+    } finally {
+      setIsLoading(false);
+    }
   };
+
+  return { createHideChat, isLoading };
 }

package/src/streamplace-store/stream.tsx

@@ -6,41 +6,62 @@ import { LivestreamViewHydrated } from "streamplace/src/useful-types";
 import { useUrl } from "./streamplace-store";
 import { usePDSAgent } from "./xrpc";
 
-const uploadThumbnail = async (
-  pdsAgent: StreamplaceAgent,
-  customThumbnail?: Blob,
-) => {
-  if (customThumbnail) {
-    let tries = 0;
-    try {
-      let thumbnail = await pdsAgent.uploadBlob(customThumbnail);
-
-      while (
-        thumbnail.data.blob.size === 0 &&
-        customThumbnail.size !== 0 &&
-        tries < 3
-      ) {
-        console.warn(
-          "Reuploading blob as blob sizes don't match! Blob size recieved is",
-          thumbnail.data.blob.size,
-          "and sent blob size is",
-          customThumbnail.size,
-        );
-        thumbnail = await pdsAgent.uploadBlob(customThumbnail);
-      }
+import { useEffect, useRef } from "react";
 
-      if (tries === 3) {
-        throw new Error("Could not successfully upload blob (tried thrice)");
-      }
+const useUploadThumbnail = () => {
+  const abortRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    return () => {
+      // On unmount, abort any ongoing upload
+      abortRef.current?.abort();
+    };
+  }, []);
+
+  const uploadThumbnail = async (
+    pdsAgent: StreamplaceAgent,
+    customThumbnail?: Blob,
+  ) => {
+    if (!customThumbnail) return undefined;
+
+    abortRef.current = new AbortController();
+    const { signal } = abortRef.current;
+
+    const maxTries = 3;
+    let lastError: unknown = null;
 
-      if (thumbnail.success) {
-        console.log("Successfully uploaded thumbnail");
-        return thumbnail.data.blob;
+    for (let tries = 0; tries < maxTries; tries++) {
+      try {
+        const thumbnail = await pdsAgent.uploadBlob(customThumbnail, {
+          signal,
+        });
+        if (
+          thumbnail.success &&
+          thumbnail.data.blob.size === customThumbnail.size
+        ) {
+          console.log("Successfully uploaded thumbnail");
+          return thumbnail.data.blob;
+        } else {
+          console.warn(
+            `Blob size mismatch (attempt ${tries + 1}): received ${thumbnail.data.blob.size}, expected ${customThumbnail.size}`,
+          );
+        }
+      } catch (e) {
+        if (signal.aborted) {
+          console.warn("Upload aborted");
+          return undefined;
+        }
+        lastError = e;
+        console.warn(`Error uploading thumbnail (attempt ${tries + 1}): ${e}`);
       }
-    } catch (e) {
-      throw new Error("Error uploading thumbnail: " + e);
     }
-  }
+
+    throw new Error(
+      `Could not successfully upload blob after ${maxTries} attempts. Last error: ${lastError}`,
+    );
+  };
+
+  return uploadThumbnail;
 };
 
 async function createNewPost(
@@ -57,13 +78,14 @@ async function createNewPost(
   }
 }
 
-function buildGoLivePost(
+async function buildGoLivePost(
   text: string,
   url: URL,
   profile: ProfileViewDetailed,
   params: URLSearchParams,
   thumbnail: BlobRef | undefined,
-): AppBskyFeedPost.Record {
+  agent: StreamplaceAgent,
+): Promise<AppBskyFeedPost.Record> {
   const now = new Date();
   const linkUrl = `${url.protocol}//${url.host}/${profile.handle}?${params.toString()}`;
   const prefix = `🔴 LIVE `;
@@ -72,7 +94,7 @@ function buildGoLivePost(
   const content = prefix + textUrl + suffix;
 
   const rt = new RichText({ text: content });
-  rt.detectFacetsWithoutResolution();
+  await rt.detectFacets(agent);
   const record: AppBskyFeedPost.Record = {
     $type: "app.bsky.feed.post",
     text: content,
@@ -99,6 +121,7 @@ function buildGoLivePost(
 export function useCreateStreamRecord() {
   let agent = usePDSAgent();
   let url = useUrl();
+  const uploadThumbnail = useUploadThumbnail();
 
   return async (
     title: string,
@@ -175,7 +198,14 @@ export function useCreateStreamRecord() {
         time: new Date().toISOString(),
       });
 
-      let post = buildGoLivePost(title, u, profile.data, params, thumbnail);
+      let post = await buildGoLivePost(
+        title,
+        u,
+        profile.data,
+        params,
+        thumbnail,
+        agent,
+      );
 
       newPost = await createNewPost(agent, post);
 
@@ -206,6 +236,7 @@ export function useCreateStreamRecord() {
 export function useUpdateStreamRecord() {
   let agent = usePDSAgent();
   let url = useUrl();
+  const uploadThumbnail = useUploadThumbnail();
 
   return async (
     title: string,

package/src/ui/index.ts

@@ -0,0 +1,86 @@
+/**
+ * @streamplace/components/ui - Streamplace ZeroCSS
+ *
+ * Clean export path for ZeroCSS styling utilities, design tokens, and atomic styles.
+ * ZeroCSS provides a zero-config, atomic styling system optimized for React Native.
+ */
+
+// Export the most commonly used ZeroCSS utilities
+export {
+  // Core atoms object
+  atoms,
+  // Common shorthand utilities
+  bg,
+  // Border utilities
+  borders,
+  bottom,
+  // Flex utilities
+  flex,
+  // Gap utilities (React Native 0.71+)
+  gap,
+  h,
+  // Layout utilities
+  layout,
+  left,
+  m,
+  mb,
+  ml,
+  mr,
+  mt,
+  mx,
+  my,
+  p,
+  pb,
+  pl,
+  // Position utilities
+  position,
+  pr,
+  pt,
+  px,
+  py,
+  r,
+  right,
+  text,
+  top,
+  w,
+} from "../lib/theme/atoms";
+
+// Export ZeroCSS design tokens
+export {
+  borderRadius,
+  breakpoints,
+  colors,
+  shadows,
+  spacing,
+  typography,
+} from "../lib/theme/tokens";
+
+// Export ZeroCSS utility functions
+export {
+  debounce,
+  mergeStyles,
+  platformStyle,
+  responsiveValue,
+} from "../lib/utils";
+
+// Export ZeroCSS theme system
+export {
+  ThemeProvider,
+  createThemeColors,
+  createThemeIcons,
+  createThemeStyles,
+  createThemedStyles,
+  darkTheme,
+  lightTheme,
+  usePlatformTypography,
+  useTheme,
+  type Theme,
+  type ThemeIcons,
+  type ThemeStyles,
+} from "../lib/theme/theme";
+
+// Namespace exports for power users
+export * as theme from "../lib/theme";
+export * as atomsNS from "../lib/theme/atoms";
+export * as tokens from "../lib/theme/tokens";
+export * as utils from "../lib/utils";