@streamplace/components 0.9.7 → 0.9.10

package/src/hooks/useLivestreamInfo.ts

@@ -1,15 +1,15 @@
 import { useState } from "react";
 import { useLivestreamStore } from "../livestream-store";
 import { usePlayerStore } from "../player-store";
-import { useCreateStreamRecord } from "../streamplace-store";
+import { useCreateStreamRecord, useEndLivestream } from "../streamplace-store";
 
 export function useLivestreamInfo(url?: string) {
   const ingest = usePlayerStore((x) => x.ingestConnectionState);
   const profile = useLivestreamStore((x) => x.profile);
-  const ingestStarting = usePlayerStore((x) => x.ingestStarting);
-  const setIngestStarting = usePlayerStore((x) => x.setIngestStarting);
-  const setIngestLive = usePlayerStore((x) => x.setIngestLive);
-
+  const endLivestream = useEndLivestream();
+  const setLocalLivestreamURI = useLivestreamStore(
+    (x) => x.setLocalLivestreamURI,
+  );
   const createStreamRecord = useCreateStreamRecord();
 
   const [title, setTitle] = useState<string>("");
@@ -21,10 +21,11 @@ export function useLivestreamInfo(url?: string) {
       if (title !== "") {
         setRecordSubmitted(true);
         // Create the livestream record with title and custom url if available
-        await createStreamRecord({
+        const { uri } = await createStreamRecord({
           title,
           canonicalUrl: url || undefined,
         });
+        setLocalLivestreamURI(uri);
       }
     } catch (error) {
       console.error("Error creating livestream:", error);
@@ -38,20 +39,19 @@ export function useLivestreamInfo(url?: string) {
     keyboardHeight?: number,
     closeKeyboard?: () => void,
   ) => {
-    if (!ingestStarting) {
-      // Optionally close keyboard if provided
-      if (closeKeyboard) closeKeyboard();
-      setShowCountdown(true);
-      setIngestStarting(true);
-      setIngestLive(true);
-      // wait ~3 seconds before announcing
-      setTimeout(() => {
-        handleSubmit();
-      }, 3000);
-    } else {
-      setIngestStarting(false);
-      setIngestLive(false);
-    }
+    // Optionally close keyboard if provided
+    if (closeKeyboard) closeKeyboard();
+    setShowCountdown(true);
+    // wait ~3 seconds before announcing
+    setTimeout(() => {
+      handleSubmit();
+    }, 3000);
+  };
+
+  // Stop the current broadcast
+  const toggleStopStream = () => {
+    console.log("Stopping stream...");
+    endLivestream();
   };
 
   return {
@@ -63,9 +63,8 @@ export function useLivestreamInfo(url?: string) {
     setShowCountdown,
     recordSubmitted,
     setRecordSubmitted,
-    ingestStarting,
-    setIngestStarting,
     handleSubmit,
     toggleGoLive,
+    toggleStopStream,
   };
 }

package/src/hooks/useSegmentTiming.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
-import { useLivestreamStore } from "../livestream-store";
+import { useLivestream, useLivestreamStore } from "../livestream-store";
 
-export type ConnectionQuality = "good" | "degraded" | "poor";
+export type ConnectionQuality = "good" | "degraded" | "poor" | "pre-live";
 
 function getLiveConnectionQuality(
   timeBetweenSegments: number | null,
@@ -24,6 +24,7 @@ export function useSegmentTiming() {
   const [segmentDeltas, setSegmentDeltas] = useState<number[]>([]);
   const prevSegmentRef = useRef<any>();
   const prevTimestampRef = useRef<number | null>(null);
+  const ls = useLivestream();
 
   // Dummy state to force update every second
   const [, setNow] = useState(Date.now());
@@ -84,5 +85,9 @@ export function useSegmentTiming() {
     segmentDeltas.length,
   );
 
+  if (!ls) {
+    to_ret.connectionQuality = "pre-live";
+  }
+
   return to_ret;
 }

package/src/i18n/i18n-loader.native.ts

@@ -10,6 +10,10 @@ import frFRCommon from "../../public/locales/fr-FR/common.json";
 import frFRSettings from "../../public/locales/fr-FR/settings.json";
 import ptBRCommon from "../../public/locales/pt-BR/common.json";
 import ptBRSettings from "../../public/locales/pt-BR/settings.json";
+import roROCommon from "../../public/locales/ro-RO/common.json";
+import roROSettings from "../../public/locales/ro-RO/settings.json";
+import zhHansCommon from "../../public/locales/zh-Hans/common.json";
+import zhHansSettings from "../../public/locales/zh-Hans/settings.json";
 import zhHantCommon from "../../public/locales/zh-Hant/common.json";
 import zhHantSettings from "../../public/locales/zh-Hant/settings.json";
 
@@ -20,10 +24,14 @@ const translationMap: Record<string, any> = {
   "pt-BR/settings": ptBRSettings,
   "es-ES/common": esESCommon,
   "es-ES/settings": esESSettings,
+  "zh-Hans/common": zhHansCommon,
+  "zh-Hans/settings": zhHansSettings,
   "zh-Hant/common": zhHantCommon,
   "zh-Hant/settings": zhHantSettings,
   "fr-FR/common": frFRCommon,
   "fr-FR/settings": frFRSettings,
+  "ro-RO/common": roROCommon,
+  "ro-RO/settings": roROSettings,
 };
 
 export async function loadTranslationData(
@@ -39,6 +47,7 @@ export async function loadTranslationData(
         es: "es-ES",
         zh: "zh-Hant",
         fr: "fr-FR",
+        ro: "ro-RO",
       }[locale] || locale;
 
   const localeNamespaceKey = `${fullLocale}/${namespace}`;

package/src/lib/slash-commands/teleport.ts

@@ -21,16 +21,84 @@ export async function deleteTeleport(
   });
 }
 
+export async function createTeleport(
+  pdsAgent: StreamplaceAgent,
+  userDID: string,
+  targetHandle: string,
+  countdownSeconds: number,
+  setActiveTeleportUri?: (uri: string | null) => void,
+): Promise<{ success: boolean; error?: string }> {
+  if (countdownSeconds < 5 || countdownSeconds > 300) {
+    return {
+      success: false,
+      error: "Countdown must be between 5 seconds and 5 minutes",
+    };
+  }
+
+  let targetDID: string;
+  try {
+    const resolution = await pdsAgent.resolveHandle({
+      handle: targetHandle,
+    });
+    targetDID = resolution.data.did;
+  } catch (err) {
+    return {
+      success: false,
+      error: `Could not resolve handle: ${targetHandle}`,
+    };
+  }
+
+  if (targetDID === userDID) {
+    return {
+      success: false,
+      error: "You cannot teleport to yourself",
+    };
+  }
+
+  const startsAt = new Date(Date.now() + countdownSeconds * 1000).toISOString();
+
+  const record: PlaceStreamLiveTeleport.Record = {
+    $type: "place.stream.live.teleport",
+    streamer: targetDID,
+    startsAt,
+    countdownSeconds,
+  };
+
+  try {
+    const result = await pdsAgent.com.atproto.repo.createRecord({
+      repo: userDID,
+      collection: "place.stream.live.teleport",
+      record,
+    });
+
+    if (setActiveTeleportUri) {
+      setActiveTeleportUri(result.data.uri);
+    }
+
+    return { success: true };
+  } catch (err) {
+    return {
+      success: false,
+      error: err instanceof Error ? err.message : "Failed to create teleport",
+    };
+  }
+}
+
 export function registerTeleportCommand(
   pdsAgent: StreamplaceAgent,
   userDID: string,
   setActiveTeleportUri?: (uri: string | null) => void,
+  onOpenModal?: () => void,
 ) {
   const teleportHandler: SlashCommandHandler = async (
     args,
     rawInput,
   ): Promise<SlashCommandResult> => {
     if (args.length === 0) {
+      if (onOpenModal) {
+        onOpenModal();
+        return { handled: true };
+      }
       return {
         handled: true,
         error: "Usage: /teleport @handle.bsky.social [duration_seconds]",

package/src/livestream-store/chat.tsx

@@ -155,6 +155,18 @@ export const useDeleteChatMessage = () => {
   };
 };
 
+export const useAddSystemMessage = () => {
+  const store = getStoreFromContext();
+  return useCallback(
+    (message: ChatMessageViewHydrated) => {
+      const state = store.getState();
+      const newState = reduceChat(state, [message], []);
+      store.setState(newState);
+    },
+    [store],
+  );
+};
+
 const buildSortedChatList = (
   chatIndex: { [key: string]: ChatMessageViewHydrated },
   existingChatList: ChatMessageViewHydrated[],

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

@@ -32,6 +32,8 @@ export interface LivestreamState {
   setModerationPermissions: (
     permissions: PlaceStreamModerationPermission.Record[],
   ) => void;
+  localLivestreamURI: string | null;
+  setLocalLivestreamURI: (uri: string | null) => void;
 }
 
 export interface LivestreamProblem {

package/src/livestream-store/livestream-store.tsx

@@ -29,6 +29,8 @@ export const makeLivestreamStore = (): StoreApi<LivestreamState> => {
     hasReceivedSegment: false,
     moderationPermissions: [],
     setModerationPermissions: (perms) => set({ moderationPermissions: perms }),
+    localLivestreamURI: null,
+    setLocalLivestreamURI: (uri) => set({ localLivestreamURI: uri }),
   }));
 };
 
@@ -62,7 +64,13 @@ export const useProfile = () => useLivestreamStore((x) => x.profile);
 
 export const useViewers = () => useLivestreamStore((x) => x.viewers);
 
-export const useLivestream = () => useLivestreamStore((x) => x.livestream);
+export const useLivestream = (includeEnded: boolean = false) =>
+  useLivestreamStore((x) => {
+    const ls = x.livestream;
+    if (!ls) return null;
+    if (!includeEnded && ls.record.endedAt !== undefined) return null;
+    return ls;
+  });
 
 export const useSegment = () => useLivestreamStore((x) => x.segment);
 

package/src/livestream-store/websocket-consumer.tsx

@@ -80,6 +80,7 @@ export const handleWebSocketMessages = (
           chatProfile: (message as any).chatProfile,
           replyTo: (message as any).replyTo,
           deleted: message.deleted,
+          badges: message.badges,
         };
         state = reduceChat(state, [hydrated], [], []);
       } else if (PlaceStreamSegment.isRecord(message)) {

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

@@ -32,18 +32,12 @@ export interface PlayerState {
   protocol: PlayerProtocol;
   setProtocol: (protocol: PlayerProtocol) => void;
 
-  /** Source */
+  /** Source (streamer did) */
   src: string;
 
   /** Function to set the source URL */
   setSrc: (src: string) => void;
 
-  /** Flag indicating if ingest (stream input) is currently starting */
-  ingestStarting: boolean;
-
-  /** Function to set the ingestStarting flag */
-  setIngestStarting: (ingestStarting: boolean) => void;
-
   /** Flag indicating if ingest is live */
   ingestLive: boolean;
   setIngestLive: (ingestLive: boolean) => void;
@@ -63,6 +57,9 @@ export interface PlayerState {
   ingestAutoStart?: boolean;
   setIngestAutoStart?: (autoStart: boolean) => void;
 
+  /**  stop ingest process, again with a slight delay to allow UI to update */
+  stopIngest: () => void;
+
   /** Timestamp (number) when ingest started, or null if not started */
   ingestStarted: number | null;
 

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

@@ -20,7 +20,18 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     id: id || Math.random().toString(36).slice(8),
     selectedRendition: "source",
     setSelectedRendition: (rendition: string) =>
-      set((state) => ({ ...state, selectedRendition: rendition })),
+      set((state) => {
+        if (rendition === "audio" && state.controlsTimeout) {
+          clearTimeout(state.controlsTimeout);
+          return {
+            ...state,
+            selectedRendition: rendition,
+            showControls: true,
+            controlsTimeout: undefined,
+          };
+        }
+        return { ...state, selectedRendition: rendition };
+      }),
     protocol: PlayerProtocol.WEBRTC,
     setProtocol: (protocol: PlayerProtocol) =>
       set((state) => ({ ...state, protocol: protocol })),
@@ -28,10 +39,6 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     src: "",
     setSrc: (src: string) => set(() => ({ src })),
 
-    ingestStarting: false,
-    setIngestStarting: (ingestStarting: boolean) =>
-      set(() => ({ ingestStarting })),
-
     ingestMediaSource: undefined,
     setIngestMediaSource: (ingestMediaSource: IngestMediaSource | undefined) =>
       set(() => ({ ingestMediaSource })),
@@ -45,7 +52,7 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
       ingestConnectionState: RTCPeerConnectionState | null,
     ) => set(() => ({ ingestConnectionState })),
 
-    ingestAutoStart: false,
+    ingestAutoStart: true,
     setIngestAutoStart: (ingestAutoStart: boolean) =>
       set(() => ({ ingestAutoStart })),
 
@@ -53,6 +60,23 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
     setIngestStarted: (timestamp: number | null) =>
       set(() => ({ ingestStarted: timestamp })),
 
+    stopIngest: () => {
+      set(() => ({
+        ingestLive: false,
+        ingestConnectionState: "new",
+        ingestStarted: null,
+      })),
+        setTimeout(
+          () =>
+            set(() => ({
+              ingestLive: false,
+              ingestConnectionState: "new",
+              ingestStarted: null,
+            })),
+          200,
+        );
+    },
+
     fullscreen: false,
     setFullscreen: (isFullscreen: boolean) =>
       set(() => ({ fullscreen: isFullscreen })),
@@ -154,10 +178,12 @@ export const makePlayerStore = (id?: string): StoreApi<PlayerState> => {
 
     setUserInteraction: () =>
       set((p) => {
-        // controls timeout
         if (p.controlsTimeout) {
           clearTimeout(p.controlsTimeout);
         }
+        if (p.selectedRendition === "audio") {
+          return { showControls: true, controlsTimeout: undefined };
+        }
         let controlsTimeout = setTimeout(() => p.setShowControls(false), 1000);
         return { showControls: true, controlsTimeout };
       }),

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

@@ -143,16 +143,12 @@ export function useCurrentPlayerRendition(): [
  * Hook to get the ingest state of the current player
  */
 export function useCurrentPlayerIngest(): {
-  starting: boolean;
-  setStarting: (starting: boolean) => void;
   connectionState: RTCPeerConnectionState | null;
   setConnectionState: (state: RTCPeerConnectionState | null) => void;
   startedTimestamp: number | null;
   setStartedTimestamp: (timestamp: number | null) => void;
 } {
   return useCurrentPlayerStore((state) => ({
-    starting: state.ingestStarting,
-    setStarting: state.setIngestStarting,
     connectionState: state.ingestConnectionState,
     setConnectionState: state.setIngestConnectionState,
     startedTimestamp: state.ingestStarted,

package/src/streamplace-store/branding.tsx

@@ -25,11 +25,66 @@ const blobToBase64 = (blob: Blob): Promise<string> => {
   });
 };
 
+const PropsInHeader = [
+  "siteTitle",
+  "siteDescription",
+  "primaryColor",
+  "accentColor",
+  "defaultStreamer",
+  "mainLogo",
+  "favicon",
+  "sidebarBg",
+  "legalLinks",
+];
+
+function getMetaContent(key: string): BrandingAsset | null {
+  if (typeof window === "undefined" || !window.document) return null;
+  const meta = document.querySelector(`meta[name="internal-brand:${key}`);
+  if (meta && meta.getAttribute("content")) {
+    let content = meta.getAttribute("content");
+    if (content) return JSON.parse(content) as BrandingAsset;
+  }
+
+  return null;
+}
+
 // hook to fetch broadcaster DID (unauthenticated)
 export function useFetchBroadcasterDID() {
   const streamplaceAgent = usePossiblyUnauthedPDSAgent();
   const store = getStreamplaceStoreFromContext();
 
+  // prefetch from meta records, if on web
+  useEffect(() => {
+    if (typeof window !== "undefined" && window.document) {
+      try {
+        const metaRecords = PropsInHeader.reduce(
+          (acc, key) => {
+            const meta = document.querySelector(
+              `meta[name="internal-brand:${key}`,
+            );
+            // hrmmmmmmmmmmmm
+            if (meta && meta.getAttribute("content")) {
+              let content = meta.getAttribute("content");
+              if (content) acc[key] = JSON.parse(content) as BrandingAsset;
+            }
+            return acc;
+          },
+          {} as Record<string, BrandingAsset>,
+        );
+
+        console.log("Found meta records for broadcaster DID:", metaRecords);
+        // filter out all non-text values, can get on second fetch?
+        for (const key of Object.keys(metaRecords)) {
+          if (metaRecords[key].mimeType != "text/plain") {
+            delete metaRecords[key];
+          }
+        }
+      } catch (e) {
+        console.warn("Failed to parse broadcaster DID from meta tags", e);
+      }
+    }
+  }, []);
+
   return useCallback(async () => {
     try {
       if (!streamplaceAgent) {
@@ -140,7 +195,11 @@ export function useFetchBranding() {
 
 // hook to get a specific branding asset by key
 export function useBrandingAsset(key: string): BrandingAsset | undefined {
-  return useStreamplaceStore((state) => state.branding?.[key]);
+  return (
+    useStreamplaceStore((state) => state.branding?.[key]) ||
+    getMetaContent(key) ||
+    undefined
+  );
 }
 
 // convenience hook for main logo

package/src/streamplace-store/stream.tsx

@@ -127,111 +127,25 @@ export function useCreateStreamRecord() {
   let agent = usePDSAgent();
   let url = useUrl();
   const uploadThumbnail = useUploadThumbnail();
-
   return async ({
     title,
     customThumbnail,
     submitPost,
     canonicalUrl,
     notificationSettings,
+    idleTimeoutSeconds,
   }: {
     title: string;
     customThumbnail?: Blob;
     submitPost?: boolean;
     canonicalUrl?: string;
     notificationSettings?: PlaceStreamLivestream.NotificationSettings;
+    idleTimeoutSeconds?: number;
   }) => {
-    if (typeof submitPost !== "boolean") {
-      submitPost = true;
-    }
     if (!agent) {
       throw new Error("No PDS agent found");
     }
 
-    if (!agent.did) {
-      throw new Error("No user DID found, assuming not logged in");
-    }
-
-    const u = new URL(url);
-
-    let thumbnail: BlobRef | undefined = undefined;
-
-    if (customThumbnail) {
-      try {
-        thumbnail = await uploadThumbnail(agent, customThumbnail);
-      } catch (e) {
-        throw new Error(`Custom thumbnail upload failed ${e}`);
-      }
-    } else {
-      // No custom thumbnail: fetch the server-side image and upload it
-      // try thrice lel
-      let tries = 0;
-      try {
-        for (; tries < 3; tries++) {
-          try {
-            console.log(
-              `Fetching thumbnail from ${u.protocol}//${u.host}/api/playback/${agent.did}/stream.png`,
-            );
-            const thumbnailRes = await fetch(
-              `${u.protocol}//${u.host}/api/playback/${agent.did}/stream.png`,
-            );
-            if (!thumbnailRes.ok) {
-              throw new Error(
-                `Failed to fetch thumbnail: ${thumbnailRes.status})`,
-              );
-            }
-            const thumbnailBlob = await thumbnailRes.blob();
-            console.log(thumbnailBlob);
-            thumbnail = await uploadThumbnail(agent, thumbnailBlob);
-          } catch (e) {
-            console.warn(
-              `Failed to fetch thumbnail, retrying (${tries + 1}/3): ${e}`,
-            );
-            // Wait 1 second before retrying
-            await new Promise((resolve) => setTimeout(resolve, 2000));
-            if (tries === 2) {
-              throw new Error(`Failed to fetch thumbnail after 3 tries: ${e}`);
-            }
-          }
-        }
-      } catch (e) {
-        throw new Error(`Thumbnail upload failed ${e}`);
-      }
-    }
-
-    let newPost: undefined | { uri: string; cid: string } = undefined;
-
-    const did = agent.did;
-    const profile = await agent.getProfile({ actor: did });
-
-    if (submitPost) {
-      if (!profile) {
-        throw new Error("No profile found for the user DID");
-      }
-
-      const params = new URLSearchParams({
-        did: did,
-        time: new Date().toISOString(),
-      });
-
-      let post = await buildGoLivePost(
-        title,
-        u,
-        profile.data,
-        params,
-        thumbnail,
-        agent,
-      );
-
-      newPost = await createNewPost(agent, post);
-
-      if (!newPost.uri || !newPost.cid) {
-        throw new Error(
-          "Cannot read properties of undefined (reading 'uri' or 'cid')",
-        );
-      }
-    }
-
     let platform: string = Platform.OS;
     let platVersion: string = Platform.Version
       ? Platform.Version.toString()
@@ -244,36 +158,50 @@ export function useCreateStreamRecord() {
     ) {
       platVersion = getBrowserName(window.navigator.userAgent);
     }
-
-    const thisUrl = `${url}/${profile.data.handle}`;
-    if (!canonicalUrl) {
-      canonicalUrl = thisUrl;
+    if (!agent.did) {
+      throw new Error("No user DID found, assuming not logged in");
     }
 
+    const thisUrl = `${url}/${agent.did}`;
+
     const record: PlaceStreamLivestream.Record = {
       $type: "place.stream.livestream",
       title: title,
       url: thisUrl,
       createdAt: new Date().toISOString(),
+      lastSeenAt: new Date().toISOString(),
       // would match up with e.g. https://stream.place/iame.li
       canonicalUrl: canonicalUrl,
       // user agent style string
       // e.g. `@streamplace/components/0.1.0 (ios, 32.0)`
       agent: `@streamplace/components/${PackageJson.version} (${platform}, ${platVersion})`,
-      post: newPost,
-      thumb: thumbnail,
+      idleTimeoutSeconds: idleTimeoutSeconds,
     };
 
     if (notificationSettings) {
       record.notificationSettings = notificationSettings;
     }
 
-    await agent.com.atproto.repo.createRecord({
-      repo: agent.did,
-      collection: "place.stream.livestream",
-      record,
+    if (customThumbnail) {
+      try {
+        const thumbnail = await uploadThumbnail(agent, customThumbnail);
+        record.thumb = thumbnail;
+      } catch (e) {
+        throw new Error(`Custom thumbnail upload failed ${e}`);
+      }
+    }
+
+    const output = await agent.place.stream.live.startLivestream({
+      livestream: record,
+      streamer: agent.did,
+      createBlueskyPost: submitPost,
     });
-    return record;
+
+    if (!output.success) {
+      throw new Error("Failed to start livestream");
+    }
+
+    return output.data;
   };
 }
 
@@ -339,3 +267,18 @@ export function useUpdateStreamRecord(customUrl: string | null = null) {
     return record;
   };
 }
+
+export function useEndLivestream() {
+  let agent = usePDSAgent();
+  return async () => {
+    if (!agent) {
+      throw new Error("No PDS agent found");
+    }
+
+    if (!agent.did) {
+      throw new Error("No user DID found, assuming not logged in");
+    }
+
+    return await agent.place.stream.live.stopLivestream({});
+  };
+}