@streamplace/components 0.8.0 → 0.8.5

package/src/components/content-metadata/content-metadata-form.tsx

@@ -6,10 +6,19 @@ import {
 } from "../../lib/metadata-constants";
 
 import {
+  PlaceStreamMetadataConfiguration,
+  PlaceStreamMetadataContentRights,
+  PlaceStreamMetadataDistributionPolicy,
+} from "streamplace";
+import {
+  useGetBroadcasterDID,
   useGetContentMetadata,
   useSaveContentMetadata,
 } from "../../streamplace-store/content-metadata-actions";
-import { useDID } from "../../streamplace-store/streamplace-store";
+import {
+  useDID,
+  useStreamplaceStore,
+} from "../../streamplace-store/streamplace-store";
 import { usePDSAgent } from "../../streamplace-store/xrpc";
 import * as zero from "../../ui";
 import { Button } from "../ui/button";
@@ -23,29 +32,12 @@ import { Tooltip } from "../ui/tooltip";
 
 const { p, r, bg, borders, w, text, layout, gap, flex } = zero;
 
-// Types
-export interface DistributionPolicy {
-  deleteAfter?: number;
-}
-
-export interface Rights {
-  creator?: string;
-  copyrightNotice?: string;
-  copyrightYear?: string | number;
-  license?: string;
-  creditLine?: string;
-}
-
-export interface ContentMetadata {
-  contentWarnings: { warnings: string[] };
-  distributionPolicy: DistributionPolicy;
-  contentRights: Rights;
-}
-
 export interface ContentMetadataFormProps {
   showUpdateButton?: boolean;
-  onMetadataChange?: (metadata: ContentMetadata) => void;
-  initialMetadata?: ContentMetadata;
+  onMetadataChange?: (
+    metadata: PlaceStreamMetadataConfiguration.Record,
+  ) => void;
+  initialMetadata?: PlaceStreamMetadataConfiguration.Record;
   style?: any;
 }
 
@@ -105,11 +97,11 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
     // Local state for metadata
     const [contentWarnings, setContentWarnings] = useState<string[]>([]);
     const [distributionPolicy, setDistributionPolicy] =
-      useState<DistributionPolicy>({});
-    const [contentRights, setContentRights] = useState<Rights>({});
+      useState<PlaceStreamMetadataDistributionPolicy.Main>({});
+    const [contentRights, setContentRights] =
+      useState<PlaceStreamMetadataContentRights.Main>({});
     const [selectedLicense, setSelectedLicense] = useState<string>("");
     const [customLicenseText, setCustomLicenseText] = useState<string>("");
-    const [customDateTime, setCustomDateTime] = useState<string>("");
     const [loading, setLoading] = useState(false);
     const [hasMetadata, setHasMetadata] = useState(false);
 
@@ -119,6 +111,13 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
 
     const currentYear = new Date().getFullYear();
 
+    const getBroadcasterDID = useGetBroadcasterDID();
+    useEffect(() => {
+      getBroadcasterDID();
+    }, [getBroadcasterDID]);
+
+    const broadcasterDID = useStreamplaceStore((state) => state.broadcasterDID);
+
     // Load existing metadata on mount or from initialMetadata prop
     useEffect(() => {
       if (initialMetadata) {
@@ -128,11 +127,6 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
         }
         if (initialMetadata.distributionPolicy) {
           setDistributionPolicy(initialMetadata.distributionPolicy);
-          setCustomDateTime(
-            initialMetadata.distributionPolicy.deleteAfter
-              ? String(initialMetadata.distributionPolicy.deleteAfter)
-              : "",
-          );
         }
         if (initialMetadata.contentRights) {
           setContentRights(initialMetadata.contentRights);
@@ -155,11 +149,6 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
             }
             if (metadata.record.distributionPolicy) {
               setDistributionPolicy(metadata.record.distributionPolicy);
-              setCustomDateTime(
-                metadata.record.distributionPolicy.deleteAfter
-                  ? String(metadata.record.distributionPolicy.deleteAfter)
-                  : "",
-              );
             }
             if (metadata.record.contentRights) {
               setContentRights(metadata.record.contentRights);
@@ -185,6 +174,7 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
 
         if (onMetadataChange) {
           onMetadataChange({
+            $type: "place.stream.metadata.configuration",
             contentWarnings: { warnings: newWarnings },
             distributionPolicy,
             contentRights,
@@ -198,6 +188,7 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
     useEffect(() => {
       if (onMetadataChange) {
         onMetadataChange({
+          $type: "place.stream.metadata.configuration",
           contentWarnings: { warnings: contentWarnings },
           distributionPolicy,
           contentRights,
@@ -207,19 +198,40 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
 
     // Handle distribution policy changes
     const handleDistributionPolicyChange = useCallback(
-      (deleteAfter: string) => {
-        let duration = parseInt(deleteAfter, 10);
-        if (isNaN(duration) || duration < 0) {
-          duration = 0;
+      ({
+        deleteAfter,
+        allowedBroadcasters,
+      }: {
+        deleteAfter?: string;
+        allowedBroadcasters?: string;
+      }) => {
+        let newDistributionPolicy: PlaceStreamMetadataDistributionPolicy.Main =
+          {
+            ...distributionPolicy,
+          };
+        if (typeof deleteAfter === "string") {
+          let duration = parseInt(deleteAfter, 10);
+          if (isNaN(duration)) {
+            newDistributionPolicy.deleteAfter = undefined;
+          } else {
+            if (isNaN(duration) || duration < 0) {
+              duration = -1;
+            }
+            newDistributionPolicy.deleteAfter =
+              duration === 0 ? undefined : duration;
+          }
         }
-        const newPolicy = duration > 0 ? { deleteAfter: duration } : {};
-        console.log("newPolicy", newPolicy);
-        setDistributionPolicy(newPolicy);
+        if (typeof allowedBroadcasters === "string") {
+          newDistributionPolicy.allowedBroadcasters =
+            allowedBroadcasters.split("\n");
+        }
+        setDistributionPolicy(newDistributionPolicy);
 
         if (onMetadataChange) {
           onMetadataChange({
+            $type: "place.stream.metadata.configuration",
             contentWarnings: { warnings: contentWarnings },
-            distributionPolicy: newPolicy,
+            distributionPolicy: newDistributionPolicy,
             contentRights,
           });
         }
@@ -241,6 +253,7 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
 
         if (onMetadataChange) {
           onMetadataChange({
+            $type: "place.stream.metadata.configuration",
             contentWarnings: { warnings: contentWarnings },
             distributionPolicy,
             contentRights: newRights,
@@ -254,20 +267,13 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
       setLoading(true);
       try {
         // Build the metadata object, only including non-empty fields
-        const metadata: any = {};
+        const metadata: PlaceStreamMetadataConfiguration.Record = {
+          $type: "place.stream.metadata.configuration",
+        };
 
         // Only include contentWarnings if it has values
         if (contentWarnings && contentWarnings.length > 0) {
-          metadata.contentWarnings = contentWarnings;
-        }
-
-        // Only include distributionPolicy if it has a deleteAfter value
-        const duration = parseInt(customDateTime, 10);
-        if (!isNaN(duration) && duration > 0) {
-          metadata.distributionPolicy = { deleteAfter: duration };
-          setCustomDateTime(`${duration}`);
-        } else {
-          setCustomDateTime("");
+          metadata.contentWarnings = { warnings: contentWarnings };
         }
 
         // Only include contentRights if it has actual values
@@ -301,6 +307,21 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
           metadata.contentRights = filteredRights;
         }
 
+        metadata.distributionPolicy = {
+          ...distributionPolicy,
+        };
+
+        if (distributionPolicy?.allowedBroadcasters) {
+          const filteredBs = distributionPolicy.allowedBroadcasters.filter(
+            (broadcaster) => broadcaster !== "",
+          );
+          metadata.distributionPolicy.allowedBroadcasters = filteredBs;
+          setDistributionPolicy({
+            ...distributionPolicy,
+            allowedBroadcasters: filteredBs,
+          });
+        }
+
         await saveContentMetadata(metadata);
         setHasMetadata(true);
         // Show success toast
@@ -320,7 +341,6 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
       contentRights,
       selectedLicense,
       customLicenseText,
-      customDateTime,
       hasMetadata,
       saveContentMetadata,
     ]);
@@ -670,58 +690,170 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                     optional
                   </Text>
                 </View>
-                <View style={[gap.all[3], w.percent[100]]}>
-                  <View
-                    style={[
-                      layout.flex.row,
-                      layout.flex.alignCenter,
-                      w.percent[100],
-                    ]}
-                  >
-                    <Text
+
+                {/* allow everyone to distribute your content */}
+                <Tooltip
+                  content="Distribution of your content is unlimited, but they still have to respect the deleteAfter policy below."
+                  position="top"
+                >
+                  <Checkbox
+                    checked={
+                      distributionPolicy.allowedBroadcasters?.includes("*") ||
+                      false
+                    }
+                    onCheckedChange={(checked) =>
+                      handleDistributionPolicyChange({
+                        allowedBroadcasters: checked
+                          ? "*"
+                          : broadcasterDID || "",
+                      })
+                    }
+                    label={"Allow everyone to distribute your content"}
+                    style={[{ fontSize: 12 }]}
+                  />
+                </Tooltip>
+
+                {/* allowedBroadcasters */}
+                {!distributionPolicy.allowedBroadcasters?.includes("*") && (
+                  <View style={[gap.all[3], w.percent[100]]}>
+                    <View
                       style={[
-                        text.neutral[300],
-                        {
-                          minWidth: 100,
-                          textAlign: "left",
-                          paddingBottom: 8,
-                          fontSize: 14,
-                        },
+                        layout.flex.row,
+                        layout.flex.alignCenter,
+                        w.percent[100],
                       ]}
                     >
-                      Delete After
-                    </Text>
-                    <View style={[flex.values[1]]}>
                       <Text
                         style={[
-                          text.gray[500],
-                          { fontSize: 12, paddingBottom: 4 },
+                          text.neutral[300],
+                          {
+                            minWidth: 100,
+                            textAlign: "left",
+                            paddingBottom: 8,
+                            fontSize: 14,
+                          },
                         ]}
                       >
-                        Duration in seconds (e.g., 300 for 5 minutes) or 0 to
-                        allow archiving your stream
+                        Allowed<br></br>Broadcasters
                       </Text>
-                      <Input
-                        value={customDateTime}
-                        onChange={(value) => {
-                          setCustomDateTime(value);
-                          handleDistributionPolicyChange(value);
-                        }}
-                        keyboardType="numeric"
-                        variant="filled"
-                        inputStyle={[
-                          p[3],
-                          r.md,
-                          bg.neutral[800],
-                          text.white,
-                          borders.width.thin,
-                          borders.color.neutral[600],
-                          w.percent[100],
+                      <View style={[flex.values[1]]}>
+                        <Text
+                          style={[
+                            text.gray[500],
+                            { fontSize: 12, paddingBottom: 4 },
+                          ]}
+                        >
+                          Enter the did:webs of the broadcasters you want to
+                          allow to distribute your content, one per line.
+                        </Text>
+                        <Input
+                          multiline={true}
+                          numberOfLines={4}
+                          value={
+                            distributionPolicy.allowedBroadcasters?.join(
+                              "\n",
+                            ) || ""
+                          }
+                          onChange={(value) => {
+                            handleDistributionPolicyChange({
+                              allowedBroadcasters: value,
+                            });
+                          }}
+                          variant="filled"
+                          inputStyle={[
+                            p[3],
+                            r.md,
+                            bg.neutral[800],
+                            text.white,
+                            borders.width.thin,
+                            borders.color.neutral[600],
+                            w.percent[100],
+                          ]}
+                        />
+                      </View>
+                    </View>
+                  </View>
+                )}
+
+                <Tooltip
+                  content="Anyone may archive your content indefinitely."
+                  position="top"
+                >
+                  <Checkbox
+                    checked={distributionPolicy.deleteAfter === -1}
+                    onCheckedChange={(checked) => {
+                      if (checked) {
+                        handleDistributionPolicyChange({
+                          deleteAfter: "-1",
+                        });
+                      } else {
+                        handleDistributionPolicyChange({
+                          deleteAfter: "300",
+                        });
+                      }
+                    }}
+                    label={"Allow everyone to archive your content"}
+                    style={[{ fontSize: 12 }]}
+                  />
+                </Tooltip>
+
+                {/* deleteAfter */}
+                {distributionPolicy.deleteAfter !== -1 && (
+                  <View style={[gap.all[3], w.percent[100]]}>
+                    <View
+                      style={[
+                        layout.flex.row,
+                        layout.flex.alignCenter,
+                        w.percent[100],
+                      ]}
+                    >
+                      <Text
+                        style={[
+                          text.neutral[300],
+                          {
+                            minWidth: 100,
+                            textAlign: "left",
+                            paddingBottom: 8,
+                            fontSize: 14,
+                          },
                         ]}
-                      />
+                      >
+                        Delete After
+                      </Text>
+                      <View style={[flex.values[1]]}>
+                        <Text
+                          style={[
+                            text.gray[500],
+                            { fontSize: 12, paddingBottom: 4 },
+                          ]}
+                        >
+                          Duration in seconds (e.g., 300 for 5 minutes)
+                        </Text>
+                        <Input
+                          value={
+                            distributionPolicy.deleteAfter?.toString() || ""
+                          }
+                          onChange={(value) => {
+                            handleDistributionPolicyChange({
+                              deleteAfter: value,
+                            });
+                          }}
+                          keyboardType="numeric"
+                          variant="filled"
+                          inputStyle={[
+                            p[3],
+                            r.md,
+                            bg.neutral[800],
+                            text.white,
+                            borders.width.thin,
+                            borders.color.neutral[600],
+                            w.percent[100],
+                          ]}
+                        />
+                      </View>
                     </View>
                   </View>
-                </View>
+                )}
               </View>
             )}
 

package/src/components/content-metadata/index.tsx

@@ -5,14 +5,6 @@ export { ContentMetadataForm } from "./content-metadata-form";
 export { ContentRights } from "./content-rights";
 export { ContentWarnings } from "./content-warnings";
 
-// Types
-export type {
-  ContentMetadata,
-  ContentMetadataFormProps,
-  DistributionPolicy,
-  Rights,
-} from "./content-metadata-form";
-
 export type { ContentRightsProps } from "./content-rights";
 
 export type { ContentWarningsProps } from "./content-warnings";

package/src/components/mobile-player/rotation-async.native.tsx

@@ -0,0 +1,15 @@
+let ScreenOrientation: typeof import("expo-screen-orientation") | null = null;
+
+try {
+  ScreenOrientation = require("expo-screen-orientation");
+} catch {
+  // expo-screen-orientation not available
+  if (__DEV__) {
+    console.warn(
+      "expo-screen-orientation not installed, rotation features disabled",
+    );
+  }
+}
+
+export const isRotationAvailable = ScreenOrientation != null;
+export { ScreenOrientation };

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

@@ -0,0 +1,200 @@
+import type { Orientation } from "expo-screen-orientation";
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import {
+  isRotationAvailable,
+  ScreenOrientation,
+} from "./rotation-async.native";
+
+export interface RotationContextValue {
+  currentOrientation: Orientation;
+  isLocked: boolean;
+  isActive: boolean;
+  rotateToLandscape: () => Promise<void>;
+  rotateToPortrait: () => Promise<void>;
+  toggleRotation: () => Promise<void>;
+  canRotate: boolean;
+}
+
+export interface RotationProviderProps {
+  children: React.ReactNode;
+  enabled?: boolean;
+}
+
+const RotationContext = createContext<RotationContextValue | null>(null);
+
+export const RotationProvider: React.FC<RotationProviderProps> = ({
+  children,
+  enabled = true,
+}) => {
+  const [isLocked, setIsLocked] = useState(false);
+  const [canRotate, setCanRotate] = useState(isRotationAvailable);
+  const [currentOrientation, setCurrentOrientation] = useState<Orientation>(
+    ScreenOrientation?.Orientation.PORTRAIT_UP ?? 1,
+  );
+
+  // If module not available, provide disabled context
+  if (!isRotationAvailable || !ScreenOrientation) {
+    const disabledContextValue: RotationContextValue = {
+      currentOrientation: 1, // Orientation.PORTRAIT_UP
+      isLocked: false,
+      isActive: false,
+      rotateToLandscape: async () => {},
+      rotateToPortrait: async () => {},
+      toggleRotation: async () => {},
+      canRotate: false,
+    };
+
+    return (
+      <RotationContext.Provider value={disabledContextValue}>
+        {children}
+      </RotationContext.Provider>
+    );
+  }
+
+  // Manual rotation functions
+  const rotateToLandscape = async () => {
+    if (!enabled || !canRotate || !ScreenOrientation) return;
+
+    try {
+      await ScreenOrientation.unlockAsync();
+      await ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
+      );
+      setIsLocked(true);
+
+      // set current orientation to landscape right
+      setCurrentOrientation(ScreenOrientation.Orientation.LANDSCAPE_RIGHT);
+
+      if (__DEV__) {
+        console.log("📲 Manual landscape");
+      }
+    } catch (error) {
+      console.warn("Failed to rotate to landscape:", error);
+    }
+  };
+
+  const rotateToPortrait = async () => {
+    if (!enabled || !canRotate || !ScreenOrientation) return;
+
+    try {
+      await ScreenOrientation.unlockAsync();
+      await ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.PORTRAIT_UP,
+      );
+      setIsLocked(true);
+
+      setCurrentOrientation(ScreenOrientation.Orientation.PORTRAIT_UP);
+
+      if (__DEV__) {
+        console.log("📲 Manual portrait");
+      }
+    } catch (error) {
+      console.warn("Failed to rotate to portrait:", error);
+    }
+  };
+
+  const toggleRotation = async () => {
+    if (!ScreenOrientation) return;
+
+    const isLandscape =
+      currentOrientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
+      currentOrientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
+
+    if (__DEV__) {
+      console.log(
+        `🔄 Toggle: current=${currentOrientation}, isLandscape=${isLandscape}`,
+      );
+    }
+
+    if (isLandscape) {
+      await rotateToPortrait();
+    } else {
+      await rotateToLandscape();
+    }
+  };
+
+  // Track orientation changes
+  useEffect(() => {
+    if (!enabled) return;
+
+    const getCurrentOrientation = async () => {
+      if (!ScreenOrientation) return;
+      try {
+        const orient = await ScreenOrientation.getOrientationAsync();
+        setCurrentOrientation(orient);
+
+        if (__DEV__) {
+          console.log(`📲 Orientation on load: ${orient}`);
+        }
+      } catch (error) {
+        console.warn("Failed to get orientation:", error);
+      }
+    };
+
+    getCurrentOrientation();
+
+    if (!ScreenOrientation) return;
+
+    const subscription = ScreenOrientation.addOrientationChangeListener(
+      (event) => {
+        const newOrientation = event.orientationInfo.orientation;
+        setCurrentOrientation(newOrientation);
+
+        if (__DEV__) {
+          console.log(
+            `🔄 Orientation: ${newOrientation} (locked: ${isLocked})`,
+          );
+        }
+      },
+    );
+
+    return () => {
+      subscription?.remove();
+      if (ScreenOrientation) {
+        ScreenOrientation.removeOrientationChangeListeners();
+        ScreenOrientation.unlockAsync().catch(() => {});
+      }
+    };
+  }, [enabled]);
+
+  const contextValue = useMemo(
+    () => ({
+      currentOrientation,
+      isLocked,
+      isActive: enabled,
+      rotateToLandscape,
+      rotateToPortrait,
+      toggleRotation,
+      canRotate,
+    }),
+    [
+      currentOrientation,
+      isLocked,
+      enabled,
+      canRotate,
+      rotateToLandscape,
+      rotateToPortrait,
+      toggleRotation,
+    ],
+  );
+
+  return (
+    <RotationContext.Provider value={contextValue}>
+      {children}
+    </RotationContext.Provider>
+  );
+};
+
+export const useRotation = (): RotationContextValue => {
+  const context = useContext(RotationContext);
+  if (!context) {
+    throw new Error("useRotation must be used within a RotationProvider");
+  }
+  return context;
+};

package/src/index.tsx

@@ -33,6 +33,16 @@ export * from "./components/chat/system-message";
 export { default as VideoRetry } from "./components/mobile-player/video-retry";
 export * from "./lib/system-messages";
 
+// Rotation lock system exports
+export {
+  RotationProvider,
+  useRotation,
+} from "./components/mobile-player/rotation-lock";
+export type {
+  RotationContextValue,
+  RotationProviderProps,
+} from "./components/mobile-player/rotation-lock";
+
 export * from "./components/share/sharesheet";
 
 export * from "./components/keep-awake";