@streamplace/components 0.8.6 → 0.8.9

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

@@ -1,10 +1,12 @@
-import { forwardRef } from "react";
-import { StyleSheet, View } from "react-native";
+import { forwardRef, type ComponentProps } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme, zero } from "../..";
 import { LICENSE_URL_LABELS } from "../../lib/metadata-constants";
-import { useTheme } from "../../lib/theme/theme";
 import { Text } from "../ui/text";
 
-export interface ContentRightsProps {
+const { layout, gap, mt, text: textStyles } = zero;
+
+export interface ContentRightsProps extends ComponentProps<typeof Text> {
   contentRights: {
     creator?: string;
     copyrightNotice?: string;
@@ -15,16 +17,13 @@ export interface ContentRightsProps {
   compact?: boolean;
 }
 
-export const ContentRights = forwardRef<any, ContentRightsProps>(
-  ({ contentRights }, ref) => {
-    const { theme } = useTheme();
-
+export const ContentRights = forwardRef<Text, ContentRightsProps>(
+  ({ contentRights, compact, ...rest }, ref) => {
+    const { zero } = useTheme();
     if (!contentRights || Object.keys(contentRights).length === 0) {
       return null;
     }
 
-    const styles = createStyles(theme);
-
     const formatLicense = (license: string) => {
       return LICENSE_URL_LABELS[license] || license;
     };
@@ -38,7 +37,11 @@ export const ContentRights = forwardRef<any, ContentRightsProps>(
     // }
 
     if (contentRights.copyrightYear) {
-      elements.push(`© ${contentRights.copyrightYear.toString()}`);
+      elements.push(
+        `© ${contentRights.copyrightYear.toString()}${contentRights.creditLine ? " " + contentRights.creditLine : ""}`,
+      );
+    } else if (contentRights.creditLine) {
+      elements.push(contentRights.creditLine);
     }
 
     if (contentRights.license) {
@@ -49,56 +52,28 @@ export const ContentRights = forwardRef<any, ContentRightsProps>(
       elements.push(contentRights.copyrightNotice);
     }
 
-    if (contentRights.creditLine) {
-      elements.push(contentRights.creditLine);
+    if (elements.length > 0) {
+      elements[0] = "Stream content is " + elements[0];
+    }
+
+    if (elements.length == 0) {
+      return null;
     }
 
     return (
-      <View ref={ref} style={styles.compactContainer}>
-        <Text style={styles.compactText}>{elements.join(" • ")}</Text>
-      </View>
+      <Text
+        ref={ref}
+        style={[
+          zero.text.mutedForeground,
+          mt[1],
+          StyleSheet.flatten(rest.style),
+        ]}
+        {...rest}
+      >
+        {elements.join(" • ")}
+      </Text>
     );
   },
 );
 
 ContentRights.displayName = "ContentRights";
-
-function createStyles(theme: any) {
-  return StyleSheet.create({
-    container: {
-      paddingVertical: theme.spacing[3],
-    },
-    title: {
-      fontSize: 14,
-      fontWeight: "600",
-      color: theme.colors.text,
-      marginBottom: theme.spacing[2],
-    },
-    content: {
-      gap: theme.spacing[2],
-    },
-    row: {
-      flexDirection: "row",
-      gap: theme.spacing[2],
-    },
-    label: {
-      fontSize: 13,
-      color: theme.colors.textMuted,
-    },
-    value: {
-      fontSize: 13,
-      color: theme.colors.text,
-    },
-    compactContainer: {
-      flexDirection: "row",
-      gap: theme.spacing[2],
-      flexWrap: "wrap",
-      marginTop: theme.spacing[1],
-    },
-    compactText: {
-      fontSize: 14,
-      fontWeight: "500",
-      color: theme.colors.text,
-    },
-  });
-}

package/src/components/content-metadata/content-warning-badge.tsx

@@ -0,0 +1,94 @@
+import { AlertTriangle, ChevronDown } from "lucide-react-native";
+import { View } from "react-native";
+import { zero } from "../..";
+import { C2PA_WARNING_LABELS } from "../../lib/metadata-constants";
+import { useTheme } from "../../lib/theme/theme";
+import { pt, r } from "../../ui";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  ResponsiveDropdownMenuContent,
+} from "../ui/dropdown";
+import { Text } from "../ui/text";
+
+const { px, py, gap, layout } = zero;
+
+export interface ContentWarningBadgeProps {
+  warnings: string[];
+}
+
+export function ContentWarningBadge({ warnings }: ContentWarningBadgeProps) {
+  const { theme } = useTheme();
+
+  const getWarningLabel = (warning: string): string => {
+    return C2PA_WARNING_LABELS[warning] || warning;
+  };
+
+  if (!warnings || warnings.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <View
+          style={[
+            layout.flex.row,
+            layout.flex.align.center,
+            gap.all[2],
+            px[3],
+            py[2],
+            r.md,
+            { backgroundColor: theme.colors.warning + "20" },
+          ]}
+        >
+          <AlertTriangle size={14} color={theme.colors.warningForeground} />
+          <Text
+            size="sm"
+            weight="semibold"
+            style={{ color: theme.colors.warningForeground }}
+          >
+            Intended for certain audiences
+          </Text>
+          <ChevronDown size={14} color={theme.colors.warningForeground} />
+        </View>
+      </DropdownMenuTrigger>
+
+      <ResponsiveDropdownMenuContent>
+        <View style={[layout.flex.column, px[2], pt[2]]}>
+          <Text>Heads up!</Text>
+          <Text>This stream may contain:</Text>
+        </View>
+        <View
+          style={[
+            layout.flex.row,
+            { flexWrap: "wrap" },
+            gap.all[2],
+            px[2],
+            py[2],
+          ]}
+        >
+          {warnings.map((warning, index) => (
+            <View
+              key={index}
+              style={[
+                { backgroundColor: theme.colors.warning },
+                px[3],
+                py[1],
+                r.full,
+              ]}
+            >
+              <Text
+                size="sm"
+                weight="semibold"
+                style={{ color: theme.colors.warningForeground }}
+              >
+                {getWarningLabel(warning)}
+              </Text>
+            </View>
+          ))}
+        </View>
+      </ResponsiveDropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -1,34 +1,50 @@
 import { forwardRef } from "react";
-import { StyleSheet, View } from "react-native";
+import { View } from "react-native";
+import { zero } from "../..";
 import { C2PA_WARNING_LABELS } from "../../lib/metadata-constants";
 import { useTheme } from "../../lib/theme/theme";
 import { Text } from "../ui/text";
 
+const { layout, gap, bg, r, p, px, py, text: textStyles, borders } = zero;
+
 export interface ContentWarningsProps {
   warnings: string[];
   compact?: boolean;
 }
 
-export const ContentWarnings = forwardRef<any, ContentWarningsProps>(
-  ({ warnings, compact = false }, ref) => {
+export const ContentWarnings = forwardRef<View, ContentWarningsProps>(
+  ({ warnings, compact = false, ...rest }, ref) => {
     const { theme } = useTheme();
 
     if (!warnings || warnings.length === 0) {
       return null;
     }
 
-    const styles = createStyles(theme, compact);
-
     const getWarningLabel = (warning: string): string => {
       return C2PA_WARNING_LABELS[warning] || warning;
     };
 
     if (compact) {
       return (
-        <View ref={ref} style={styles.compactContainer}>
+        <View
+          ref={ref}
+          style={[layout.flex.row, layout.flex.wrap.wrap, gap.all[1]]}
+          {...rest}
+        >
           {warnings.map((warning, index) => (
-            <View key={index} style={styles.compactWarning}>
-              <Text style={styles.compactWarningText}>
+            <View
+              key={index}
+              style={[
+                { backgroundColor: theme.colors.warning },
+                r.full,
+                px[2],
+                { paddingVertical: 2 },
+              ]}
+            >
+              <Text
+                size="sm"
+                style={[{ color: theme.colors.warningForeground }]}
+              >
                 {getWarningLabel(warning)}
               </Text>
             </View>
@@ -38,12 +54,29 @@ export const ContentWarnings = forwardRef<any, ContentWarningsProps>(
     }
 
     return (
-      <View ref={ref} style={styles.container}>
-        <Text style={styles.title}>Content Warnings</Text>
-        <View style={styles.warningsContainer}>
+      <View ref={ref} style={[layout.flex.column, gap.all[2]]} {...rest}>
+        <Text
+          style={[{ fontSize: 14, fontWeight: "600" }, textStyles.gray[900]]}
+        >
+          Content Warnings
+        </Text>
+        <View style={[layout.flex.row, layout.flex.wrap.wrap, gap.all[2]]}>
           {warnings.map((warning, index) => (
-            <View key={index} style={styles.warning}>
-              <Text style={styles.warningText}>{getWarningLabel(warning)}</Text>
+            <View
+              key={index}
+              style={[
+                { backgroundColor: theme.colors.warning },
+                r.full,
+                px[3],
+                py[1],
+              ]}
+            >
+              <Text
+                size="sm"
+                style={[{ color: theme.colors.warningForeground }]}
+              >
+                {getWarningLabel(warning)}
+              </Text>
             </View>
           ))}
         </View>
@@ -53,48 +86,3 @@ export const ContentWarnings = forwardRef<any, ContentWarningsProps>(
 );
 
 ContentWarnings.displayName = "ContentWarnings";
-
-function createStyles(theme: any, compact: boolean) {
-  return StyleSheet.create({
-    container: {
-      flexDirection: "column",
-      gap: theme.spacing[2],
-    },
-    title: {
-      fontSize: 14,
-      fontWeight: "600",
-      color: theme.colors.text,
-    },
-    warningsContainer: {
-      flexDirection: "row",
-      flexWrap: "wrap",
-      gap: theme.spacing[2],
-    },
-    warning: {
-      backgroundColor: theme.colors.warning,
-      borderRadius: theme.borderRadius.md,
-      padding: theme.spacing[2],
-    },
-    warningText: {
-      color: theme.colors.warningForeground,
-      fontSize: 12,
-      fontWeight: "500",
-    },
-    compactContainer: {
-      flexDirection: "row",
-      flexWrap: "wrap",
-      gap: theme.spacing[1],
-    },
-    compactWarning: {
-      backgroundColor: theme.colors.warning,
-      borderRadius: theme.borderRadius.full,
-      paddingHorizontal: 10,
-      paddingVertical: 4,
-    },
-    compactWarningText: {
-      color: theme.colors.warningForeground,
-      fontSize: 14,
-      fontWeight: "600",
-    },
-  });
-}

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

@@ -3,8 +3,10 @@ export { ContentMetadataForm } from "./content-metadata-form";
 
 // Display components
 export { ContentRights } from "./content-rights";
+export { ContentWarningBadge } from "./content-warning-badge";
 export { ContentWarnings } from "./content-warnings";
 
 export type { ContentRightsProps } from "./content-rights";
 
+export type { ContentWarningBadgeProps } from "./content-warning-badge";
 export type { ContentWarningsProps } from "./content-warnings";

package/src/components/mobile-player/ui/viewer-context-menu.tsx

@@ -1,15 +1,21 @@
 import { useRootContext } from "@rn-primitives/dropdown-menu";
 import { Menu } from "lucide-react-native";
 import { Image, Linking, Platform, Pressable, View } from "react-native";
-import { useAvatars, useLivestreamInfo, zero } from "../../..";
+import {
+  ContentRights,
+  ContentWarnings,
+  useAvatars,
+  useLivestreamInfo,
+  zero,
+} from "../../..";
 import { colors } from "../../../lib/theme";
 import { useLivestreamStore } from "../../../livestream-store";
 import { PlayerProtocol, usePlayerStore } from "../../../player-store/";
 import { useGraphManager } from "../../../streamplace-store/graph";
+import { gap, pt, px } from "../../../ui";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
-  DropdownMenuContentWithoutPortal,
   DropdownMenuGroup,
   DropdownMenuInfo,
   DropdownMenuItem,
@@ -17,6 +23,9 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   ResponsiveDropdownMenuContent,
   Text,
@@ -42,8 +51,14 @@ export function ContextMenu({
   const setReportSubject = usePlayerStore((x) => x.setReportSubject);
 
   const { profile } = useLivestreamInfo();
+
   const avatars = useAvatars(profile?.did ? [profile?.did] : []);
   const ls = useLivestreamStore((x) => x.livestream);
+  const segment = useLivestreamStore((x) => x.segment);
+
+  // Get content rights from the latest segment
+  const contentRights = segment?.contentRights;
+  const contentWarnings = segment?.contentWarnings?.warnings || [];
 
   let graphManager = useGraphManager(profile?.did);
 
@@ -58,10 +73,7 @@ export function ContextMenu({
   // dummy portal for mobile
   const Portal = isMobile ? View : DropdownMenuPortal;
 
-  // render the responsive version on mobile as we can't fullscreen there
-  const DropdownMenuContent = isMobile
-    ? ResponsiveDropdownMenuContent
-    : DropdownMenuContentWithoutPortal;
+  const DropdownMenuContent = ResponsiveDropdownMenuContent;
 
   return (
     <DropdownMenu>
@@ -160,28 +172,54 @@ export function ContextMenu({
               </DropdownMenuItem>
             </DropdownMenuGroup>
           )}
-          <DropdownMenuGroup title="Resolution">
-            <DropdownMenuRadioGroup value={quality} onValueChange={setQuality}>
-              <DropdownMenuRadioItem value="source">
-                <Text>Source (Original Quality)</Text>
-              </DropdownMenuRadioItem>
-              {qualities.map((r) => (
-                <DropdownMenuRadioItem value={r.name}>
-                  <Text>{r.name}</Text>
-                </DropdownMenuRadioItem>
-              ))}
-            </DropdownMenuRadioGroup>
+
+          <DropdownMenuGroup>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger subMenuTitle="Quality">
+                <View
+                  style={[
+                    zero.flex.values[1],
+                    zero.layout.flex.row,
+                    zero.layout.flex.spaceBetween,
+                    zero.pr[4],
+                  ]}
+                >
+                  <Text>Quality</Text>
+                  <Text muted>
+                    ({quality}, {lowLatency ? "low latency" : "regular latency"}
+                    )
+                  </Text>
+                </View>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuGroup title="Resolution">
+                  <DropdownMenuRadioGroup
+                    value={quality}
+                    onValueChange={setQuality}
+                  >
+                    <DropdownMenuRadioItem value="source">
+                      <Text>Source (Original Quality)</Text>
+                    </DropdownMenuRadioItem>
+                    {qualities.map((r) => (
+                      <DropdownMenuRadioItem key={r.name} value={r.name}>
+                        <Text>{r.name}</Text>
+                      </DropdownMenuRadioItem>
+                    ))}
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuGroup>
+                <DropdownMenuGroup>
+                  <DropdownMenuCheckboxItem
+                    checked={lowLatency}
+                    onCheckedChange={() => setLowLatency(!lowLatency)}
+                  >
+                    <Text>Low Latency</Text>
+                  </DropdownMenuCheckboxItem>
+                </DropdownMenuGroup>
+                <DropdownMenuInfo description="Reduces the delay between video and chat for a more real-time experience." />
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
           </DropdownMenuGroup>
           <DropdownMenuGroup title="Advanced">
-            <DropdownMenuCheckboxItem
-              checked={lowLatency}
-              onCheckedChange={() => setLowLatency(!lowLatency)}
-            >
-              <Text>Low Latency</Text>
-            </DropdownMenuCheckboxItem>
-          </DropdownMenuGroup>
-          <DropdownMenuInfo description="Reduces the delay between video and chat for a more real-time experience." />
-          <DropdownMenuGroup>
             <DropdownMenuCheckboxItem
               checked={debugInfo}
               onCheckedChange={() => setShowDebugInfo(!debugInfo)}
@@ -196,6 +234,23 @@ export function ContextMenu({
               setReportSubject={setReportSubject}
             />
           </DropdownMenuGroup>
+          <View style={[pt[3], px[2], gap.all[2]]}>
+            {contentWarnings && contentWarnings.length > 0 && (
+              <View style={[gap.all[1]]}>
+                <Text size="base" color="muted">
+                  Stream may contain
+                </Text>
+                <ContentWarnings warnings={contentWarnings} compact={true} />
+              </View>
+            )}
+            {contentRights && Object.keys(contentRights).length > 0 && (
+              <ContentRights
+                contentRights={contentRights}
+                size="xs"
+                color="muted"
+              />
+            )}
+          </View>
         </DropdownMenuContent>
       </Portal>
     </DropdownMenu>

package/src/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 import { Check } from "lucide-react-native";
 import { forwardRef } from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
-import { useTheme } from "../../lib/theme/theme";
+import { Theme, useTheme } from "../../lib/theme/theme";
 import { Text } from "./text";
 
 export interface CheckboxProps {
@@ -60,9 +60,23 @@ export const Checkbox = forwardRef<any, CheckboxProps>(
         </View>
         {(label || description) && (
           <View style={styles.content}>
-            {label && <Text style={styles.label}>{label}</Text>}
+            {label && (
+              <Text
+                size={size === "sm" ? "sm" : size === "lg" ? "lg" : "base"}
+                color={disabled ? "muted" : "default"}
+                leading="snug"
+              >
+                {label}
+              </Text>
+            )}
             {description && (
-              <Text style={styles.description}>{description}</Text>
+              <Text
+                size={size === "sm" ? "xs" : size === "lg" ? "base" : "sm"}
+                color={disabled ? "muted" : "muted"}
+                style={{ marginTop: theme.spacing[1] }}
+              >
+                {description}
+              </Text>
             )}
           </View>
         )}
@@ -74,7 +88,7 @@ export const Checkbox = forwardRef<any, CheckboxProps>(
 Checkbox.displayName = "Checkbox";
 
 function createStyles(
-  theme: any,
+  theme: Theme,
   size: string,
   disabled: boolean,
   checked: boolean,
@@ -90,13 +104,13 @@ function createStyles(
       checkboxSize: 20,
       borderRadius: 4,
       padding: theme.spacing[1],
-      gap: theme.spacing[2],
+      gap: theme.spacing[1],
     },
     lg: {
       checkboxSize: 24,
       borderRadius: 6,
-      padding: theme.spacing[2],
-      gap: theme.spacing[3],
+      padding: theme.spacing[1],
+      gap: theme.spacing[2],
     },
   };
 
@@ -116,7 +130,7 @@ function createStyles(
         ? theme.colors.border
         : checked
           ? theme.colors.primary
-          : theme.colors.border,
+          : theme.colors.textMuted,
       borderRadius: currentSize.borderRadius,
       backgroundColor: disabled
         ? theme.colors.muted
@@ -128,20 +142,8 @@ function createStyles(
     },
     content: {
       flex: 1,
-      paddingTop: currentSize.padding * 0.5,
+      paddingTop: currentSize.padding * 0.25,
       paddingLeft: theme.spacing[2],
     },
-    label: {
-      fontSize: size === "sm" ? 14 : size === "lg" ? 18 : 16,
-      fontWeight: "500",
-      color: disabled ? theme.colors.textDisabled : theme.colors.text,
-      lineHeight: size === "sm" ? 18 : size === "lg" ? 22 : 20,
-    },
-    description: {
-      fontSize: size === "sm" ? 12 : size === "lg" ? 16 : 14,
-      color: disabled ? theme.colors.textDisabled : theme.colors.textMuted,
-      marginTop: theme.spacing[1],
-      lineHeight: size === "sm" ? 16 : size === "lg" ? 20 : 18,
-    },
   });
 }