@streamplace/components 0.9.7 → 0.9.9

package/src/hooks/useLivestreamInfo.ts

@@ -9,6 +9,7 @@ export function useLivestreamInfo(url?: string) {
   const ingestStarting = usePlayerStore((x) => x.ingestStarting);
   const setIngestStarting = usePlayerStore((x) => x.setIngestStarting);
   const setIngestLive = usePlayerStore((x) => x.setIngestLive);
+  const stopIngest = usePlayerStore((x) => x.stopIngest);
 
   const createStreamRecord = useCreateStreamRecord();
 
@@ -54,6 +55,12 @@ export function useLivestreamInfo(url?: string) {
     }
   };
 
+  // Stop the current broadcast
+  const toggleStopStream = () => {
+    console.log("Stopping stream...");
+    stopIngest();
+  };
+
   return {
     ingest,
     profile,
@@ -67,5 +74,6 @@ export function useLivestreamInfo(url?: string) {
     setIngestStarting,
     handleSubmit,
     toggleGoLive,
+    toggleStopStream,
   };
 }

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

@@ -63,6 +63,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

@@ -53,6 +53,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 })),

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