@streamplace/components 0.7.35 → 0.8.3

package/dist/components/content-metadata/content-metadata-form.js

@@ -0,0 +1,467 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentMetadataForm = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const metadata_constants_1 = require("../../lib/metadata-constants");
+const content_metadata_actions_1 = require("../../streamplace-store/content-metadata-actions");
+const streamplace_store_1 = require("../../streamplace-store/streamplace-store");
+const xrpc_1 = require("../../streamplace-store/xrpc");
+const zero = tslib_1.__importStar(require("../../ui"));
+const button_1 = require("../ui/button");
+const checkbox_1 = require("../ui/checkbox");
+const input_1 = require("../ui/input");
+const select_1 = require("../ui/select");
+const text_1 = require("../ui/text");
+const textarea_1 = require("../ui/textarea");
+const toast_1 = require("../ui/toast");
+const tooltip_1 = require("../ui/tooltip");
+const { p, r, bg, borders, w, text, layout, gap, flex } = zero;
+// ButtonSelector component (same as in livestream-panel)
+const ButtonSelector = ({ values, selectedValue, setSelectedValue, disabledValues = [], style = [], }) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, gap.all[1], ...style], children: values.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: selectedValue === value ? "primary" : "secondary", size: "pill", disabled: disabledValues.includes(value), onPress: () => setSelectedValue(value), style: [
+            r.md,
+            {
+                opacity: disabledValues.includes(value) ? 0.5 : 1,
+            },
+        ], children: (0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                selectedValue === value ? text.white : text.gray[300],
+                { fontSize: 14, fontWeight: "600" },
+            ], children: label }) }, value))) }));
+exports.ContentMetadataForm = (0, react_1.forwardRef)(({ showUpdateButton = false, onMetadataChange, initialMetadata, style }, ref) => {
+    const pdsAgent = (0, xrpc_1.usePDSAgent)();
+    const did = (0, streamplace_store_1.useDID)();
+    const getContentMetadata = (0, content_metadata_actions_1.useGetContentMetadata)();
+    const saveContentMetadata = (0, content_metadata_actions_1.useSaveContentMetadata)();
+    const toast = (0, toast_1.useToast)();
+    // Local state for metadata
+    const [contentWarnings, setContentWarnings] = (0, react_1.useState)([]);
+    const [distributionPolicy, setDistributionPolicy] = (0, react_1.useState)({});
+    const [contentRights, setContentRights] = (0, react_1.useState)({});
+    const [selectedLicense, setSelectedLicense] = (0, react_1.useState)("");
+    const [customLicenseText, setCustomLicenseText] = (0, react_1.useState)("");
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [hasMetadata, setHasMetadata] = (0, react_1.useState)(false);
+    // State for section toggles
+    const [activeSection, setActiveSection] = (0, react_1.useState)("contentWarnings");
+    const currentYear = new Date().getFullYear();
+    const getBroadcasterDID = (0, content_metadata_actions_1.useGetBroadcasterDID)();
+    (0, react_1.useEffect)(() => {
+        getBroadcasterDID();
+    }, [getBroadcasterDID]);
+    const broadcasterDID = (0, streamplace_store_1.useStreamplaceStore)((state) => state.broadcasterDID);
+    // Load existing metadata on mount or from initialMetadata prop
+    (0, react_1.useEffect)(() => {
+        if (initialMetadata) {
+            // Use provided initial metadata
+            if (initialMetadata.contentWarnings?.warnings) {
+                setContentWarnings(initialMetadata.contentWarnings.warnings);
+            }
+            if (initialMetadata.distributionPolicy) {
+                setDistributionPolicy(initialMetadata.distributionPolicy);
+            }
+            if (initialMetadata.contentRights) {
+                setContentRights(initialMetadata.contentRights);
+                setSelectedLicense(initialMetadata.contentRights.license || "");
+            }
+            return;
+        }
+        const loadMetadata = async () => {
+            if (!pdsAgent || !did)
+                return;
+            try {
+                const metadata = await getContentMetadata();
+                if (metadata?.record) {
+                    setHasMetadata(true);
+                    if (metadata.record.contentWarnings?.warnings) {
+                        setContentWarnings(metadata.record.contentWarnings.warnings);
+                    }
+                    if (metadata.record.distributionPolicy) {
+                        setDistributionPolicy(metadata.record.distributionPolicy);
+                    }
+                    if (metadata.record.contentRights) {
+                        setContentRights(metadata.record.contentRights);
+                        setSelectedLicense(metadata.record.contentRights.license || "");
+                    }
+                }
+            }
+            catch (error) {
+                // No existing metadata is fine
+                console.log("No existing metadata found");
+            }
+        };
+        loadMetadata();
+    }, [pdsAgent, did, initialMetadata]);
+    const handleContentWarningChange = (0, react_1.useCallback)((warning, checked) => {
+        const newWarnings = checked
+            ? [...contentWarnings, warning]
+            : contentWarnings.filter((w) => w !== warning);
+        setContentWarnings(newWarnings);
+        if (onMetadataChange) {
+            onMetadataChange({
+                $type: "place.stream.metadata.configuration",
+                contentWarnings: { warnings: newWarnings },
+                distributionPolicy,
+                contentRights,
+            });
+        }
+    }, [contentWarnings, distributionPolicy, contentRights, onMetadataChange]);
+    // Notify parent component when metadata changes
+    (0, react_1.useEffect)(() => {
+        if (onMetadataChange) {
+            onMetadataChange({
+                $type: "place.stream.metadata.configuration",
+                contentWarnings: { warnings: contentWarnings },
+                distributionPolicy,
+                contentRights,
+            });
+        }
+    }, [contentWarnings, distributionPolicy, contentRights, onMetadataChange]);
+    // Handle distribution policy changes
+    const handleDistributionPolicyChange = (0, react_1.useCallback)(({ deleteAfter, allowedBroadcasters, }) => {
+        let newDistributionPolicy = {
+            ...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;
+            }
+        }
+        if (typeof allowedBroadcasters === "string") {
+            newDistributionPolicy.allowedBroadcasters =
+                allowedBroadcasters.split("\n");
+        }
+        setDistributionPolicy(newDistributionPolicy);
+        if (onMetadataChange) {
+            onMetadataChange({
+                $type: "place.stream.metadata.configuration",
+                contentWarnings: { warnings: contentWarnings },
+                distributionPolicy: newDistributionPolicy,
+                contentRights,
+            });
+        }
+    }, [
+        contentWarnings,
+        contentRights,
+        onMetadataChange,
+        distributionPolicy,
+        setDistributionPolicy,
+    ]);
+    // Handle content rights changes
+    const handleContentRightsChange = (0, react_1.useCallback)((field, value) => {
+        const newRights = { ...contentRights, [field]: value };
+        setContentRights(newRights);
+        if (onMetadataChange) {
+            onMetadataChange({
+                $type: "place.stream.metadata.configuration",
+                contentWarnings: { warnings: contentWarnings },
+                distributionPolicy,
+                contentRights: newRights,
+            });
+        }
+    }, [contentWarnings, distributionPolicy, contentRights, onMetadataChange]);
+    const handleSave = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        try {
+            // Build the metadata object, only including non-empty fields
+            const metadata = {
+                $type: "place.stream.metadata.configuration",
+            };
+            // Only include contentWarnings if it has values
+            if (contentWarnings && contentWarnings.length > 0) {
+                metadata.contentWarnings = { warnings: contentWarnings };
+            }
+            // Only include contentRights if it has actual values
+            const rightsWithLicense = {
+                ...contentRights,
+                license: selectedLicense === "custom"
+                    ? customLicenseText
+                    : selectedLicense || undefined,
+            };
+            // Filter out empty values from contentRights and convert copyrightYear to number
+            const filteredRights = Object.fromEntries(Object.entries(rightsWithLicense)
+                .filter(([_, value]) => value !== undefined && value !== null && value !== "")
+                .map(([key, value]) => {
+                // Convert copyrightYear to integer as per lexicon
+                if (key === "copyrightYear" && typeof value === "string") {
+                    const year = parseInt(value, 10);
+                    return [key, isNaN(year) ? undefined : year];
+                }
+                return [key, value];
+            })
+                .filter(([_, value]) => value !== undefined));
+            if (Object.keys(filteredRights).length > 0) {
+                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
+            toast.show(hasMetadata ? "Content metadata updated" : "Content metadata created", "Your settings have been saved successfully");
+        }
+        catch (error) {
+            console.error("Failed to save metadata:", error);
+            // Show error toast
+            toast.show("Failed to save metadata", "Please try again later");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [
+        contentWarnings,
+        contentRights,
+        selectedLicense,
+        customLicenseText,
+        hasMetadata,
+        saveContentMetadata,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: ref, style: [{ flex: 1 }, style], showsVerticalScrollIndicator: false, contentContainerStyle: { flexGrow: 1 }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[8], w.percent[100], { alignItems: "stretch" }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [gap.all[4], w.percent[100]], children: (0, jsx_runtime_1.jsx)(ButtonSelector, { values: [
+                                { label: "Content Warnings", value: "contentWarnings" },
+                                { label: "Content Rights", value: "contentRights" },
+                                { label: "Distribution", value: "distribution" },
+                            ], selectedValue: activeSection, setSelectedValue: setActiveSection, style: [{ marginVertical: -2, flexDirection: "column" }] }) }), activeSection === "contentWarnings" && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3], w.percent[100]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                    layout.flex.row,
+                                    layout.flex.alignCenter,
+                                    w.percent[100],
+                                ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                            text.neutral[300],
+                                            {
+                                                minWidth: 100,
+                                                textAlign: "left",
+                                                paddingBottom: 8,
+                                                fontSize: 14,
+                                            },
+                                        ], children: "Content Warnings" }), (0, jsx_runtime_1.jsx)(text_1.Text, { style: [text.gray[500], { fontSize: 12, paddingBottom: 8 }], children: "optional" })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [gap.all[2], w.percent[100]], children: metadata_constants_1.CONTENT_WARNINGS.map((warning) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [w.percent[100]], children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: warning.description, position: "top", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: contentWarnings.includes(warning.value), onCheckedChange: (checked) => handleContentWarningChange(warning.value, checked), label: warning.label, style: [{ fontSize: 12 }] }) }) }, warning.value))) })] })), activeSection === "contentRights" && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3], w.percent[100]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                    layout.flex.row,
+                                    layout.flex.alignCenter,
+                                    w.percent[100],
+                                ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                            text.neutral[300],
+                                            {
+                                                minWidth: 100,
+                                                textAlign: "left",
+                                                paddingBottom: 8,
+                                                fontSize: 14,
+                                            },
+                                        ], children: "Content Rights" }), (0, jsx_runtime_1.jsx)(text_1.Text, { style: [text.gray[500], { fontSize: 12, paddingBottom: 8 }], children: "optional" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3], w.percent[100]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                            layout.flex.row,
+                                            layout.flex.alignCenter,
+                                            w.percent[100],
+                                        ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                                    text.neutral[300],
+                                                    {
+                                                        minWidth: 100,
+                                                        textAlign: "left",
+                                                        paddingBottom: 8,
+                                                        fontSize: 14,
+                                                    },
+                                                ], children: "Copyright Year" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1]], children: (0, jsx_runtime_1.jsx)(input_1.Input, { value: contentRights.copyrightYear?.toString() || "", onChange: (value) => handleContentRightsChange("copyrightYear", value), placeholder: currentYear.toString(), variant: "filled", inputStyle: [
+                                                        p[3],
+                                                        r.md,
+                                                        bg.neutral[800],
+                                                        text.white,
+                                                        borders.width.thin,
+                                                        borders.color.neutral[600],
+                                                        w.percent[100],
+                                                    ] }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                            layout.flex.row,
+                                            layout.flex.alignCenter,
+                                            w.percent[100],
+                                        ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                                    text.neutral[300],
+                                                    {
+                                                        minWidth: 100,
+                                                        textAlign: "left",
+                                                        paddingBottom: 8,
+                                                        fontSize: 14,
+                                                    },
+                                                ], children: "License" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1]], children: (0, jsx_runtime_1.jsx)(select_1.Select, { value: selectedLicense, onValueChange: (value) => {
+                                                        setSelectedLicense(value);
+                                                        handleContentRightsChange("license", value === "custom" ? customLicenseText : value);
+                                                    }, placeholder: "Select a license", items: metadata_constants_1.LICENSE_OPTIONS.map((opt) => ({
+                                                        label: opt.label,
+                                                        value: opt.value,
+                                                        description: opt.description,
+                                                    })), style: [
+                                                        p[3],
+                                                        r.md,
+                                                        bg.neutral[800],
+                                                        text.white,
+                                                        borders.width.thin,
+                                                        borders.color.neutral[600],
+                                                        w.percent[100],
+                                                    ] }) })] }), selectedLicense === "custom" && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                            layout.flex.row,
+                                            layout.flex.alignCenter,
+                                            w.percent[100],
+                                        ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                                    text.neutral[300],
+                                                    {
+                                                        minWidth: 100,
+                                                        textAlign: "left",
+                                                        paddingBottom: 8,
+                                                        fontSize: 14,
+                                                    },
+                                                ], children: "Custom License" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1]], children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { value: customLicenseText, onChangeText: (value) => {
+                                                        setCustomLicenseText(value);
+                                                        if (selectedLicense === "custom") {
+                                                            handleContentRightsChange("license", value);
+                                                        }
+                                                    }, placeholder: "Enter your custom license terms...", style: [
+                                                        p[3],
+                                                        r.md,
+                                                        bg.neutral[800],
+                                                        text.white,
+                                                        borders.width.thin,
+                                                        borders.color.neutral[600],
+                                                        w.percent[100],
+                                                    ] }) })] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                            layout.flex.row,
+                                            layout.flex.alignCenter,
+                                            w.percent[100],
+                                        ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                                    text.neutral[300],
+                                                    {
+                                                        minWidth: 100,
+                                                        textAlign: "left",
+                                                        paddingBottom: 8,
+                                                        fontSize: 14,
+                                                    },
+                                                ], children: "Copyright Notice" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1]], children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { value: contentRights.copyrightNotice || "", onChangeText: (value) => handleContentRightsChange("copyrightNotice", value), placeholder: "Enter your copyright notice...", style: [
+                                                        p[3],
+                                                        r.md,
+                                                        bg.neutral[800],
+                                                        text.white,
+                                                        borders.width.thin,
+                                                        borders.color.neutral[600],
+                                                        w.percent[100],
+                                                    ] }) })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                            layout.flex.row,
+                                            layout.flex.alignCenter,
+                                            w.percent[100],
+                                        ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                                    text.neutral[300],
+                                                    {
+                                                        minWidth: 100,
+                                                        textAlign: "left",
+                                                        paddingBottom: 8,
+                                                        fontSize: 14,
+                                                    },
+                                                ], children: "Credit Line" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [flex.values[1]], children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { value: contentRights.creditLine || "", onChangeText: (value) => handleContentRightsChange("creditLine", value), placeholder: "Enter your credit line...", style: [
+                                                        p[3],
+                                                        r.md,
+                                                        bg.neutral[800],
+                                                        text.white,
+                                                        borders.width.thin,
+                                                        borders.color.neutral[600],
+                                                        w.percent[100],
+                                                    ] }) })] })] })] })), activeSection === "distribution" && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3], w.percent[100]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                    layout.flex.row,
+                                    layout.flex.alignCenter,
+                                    w.percent[100],
+                                ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                            text.neutral[300],
+                                            { minWidth: 100, textAlign: "left", paddingBottom: 8 },
+                                        ], children: "Distribution" }), (0, jsx_runtime_1.jsx)(text_1.Text, { style: [text.gray[500], { fontSize: 12, paddingBottom: 8 }], children: "optional" })] }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: "Distribution of your content is unlimited, but they still have to respect the deleteAfter policy below.", position: "top", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: distributionPolicy.allowedBroadcasters?.includes("*") ||
+                                        false, onCheckedChange: (checked) => handleDistributionPolicyChange({
+                                        allowedBroadcasters: checked
+                                            ? "*"
+                                            : broadcasterDID || "",
+                                    }), label: "Allow everyone to distribute your content", style: [{ fontSize: 12 }] }) }), !distributionPolicy.allowedBroadcasters?.includes("*") && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [gap.all[3], w.percent[100]], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                        layout.flex.row,
+                                        layout.flex.alignCenter,
+                                        w.percent[100],
+                                    ], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: [
+                                                text.neutral[300],
+                                                {
+                                                    minWidth: 100,
+                                                    textAlign: "left",
+                                                    paddingBottom: 8,
+                                                    fontSize: 14,
+                                                },
+                                            ], children: ["Allowed", (0, jsx_runtime_1.jsx)("br", {}), "Broadcasters"] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [flex.values[1]], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                                        text.gray[500],
+                                                        { fontSize: 12, paddingBottom: 4 },
+                                                    ], children: "Enter the did:webs of the broadcasters you want to allow to distribute your content, one per line." }), (0, jsx_runtime_1.jsx)(input_1.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],
+                                                    ] })] })] }) })), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: "Anyone may archive your content indefinitely.", position: "top", children: (0, jsx_runtime_1.jsx)(checkbox_1.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 }] }) }), distributionPolicy.deleteAfter !== -1 && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [gap.all[3], w.percent[100]], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                        layout.flex.row,
+                                        layout.flex.alignCenter,
+                                        w.percent[100],
+                                    ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                                text.neutral[300],
+                                                {
+                                                    minWidth: 100,
+                                                    textAlign: "left",
+                                                    paddingBottom: 8,
+                                                    fontSize: 14,
+                                                },
+                                            ], children: "Delete After" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [flex.values[1]], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                                        text.gray[500],
+                                                        { fontSize: 12, paddingBottom: 4 },
+                                                    ], children: "Duration in seconds (e.g., 300 for 5 minutes)" }), (0, jsx_runtime_1.jsx)(input_1.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],
+                                                    ] })] })] }) }))] })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.center, w.percent[100]], children: (0, jsx_runtime_1.jsx)(button_1.Button, { onPress: handleSave, loading: loading, disabled: loading, style: [
+                                bg.primary[500],
+                                r.md,
+                                gap.all[3],
+                                { minWidth: 200 },
+                                layout.flex.center,
+                                { opacity: loading ? 0.5 : 1 },
+                            ], children: (0, jsx_runtime_1.jsx)(text_1.Text, { style: [
+                                    text.white,
+                                    w.percent[100],
+                                    { fontSize: 16, fontWeight: "bold" },
+                                ], children: hasMetadata ? "Update Metadata" : "Save Metadata" }) }) })] }) }) }));
+});
+exports.ContentMetadataForm.displayName = "ContentMetadataForm";

package/dist/components/content-metadata/content-rights.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentRights = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const metadata_constants_1 = require("../../lib/metadata-constants");
+const theme_1 = require("../../lib/theme/theme");
+const text_1 = require("../ui/text");
+exports.ContentRights = (0, react_1.forwardRef)(({ contentRights }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    if (!contentRights || Object.keys(contentRights).length === 0) {
+        return null;
+    }
+    const styles = createStyles(theme);
+    const formatLicense = (license) => {
+        return metadata_constants_1.LICENSE_URL_LABELS[license] || license;
+    };
+    // Display rights in bottom metadata view
+    const elements = [];
+    // TODO: Map DID to handle creator
+    // if (contentRights.creator) {
+    //   elements.push(`Creator: ${contentRights.creator}`);
+    // }
+    if (contentRights.copyrightYear) {
+        elements.push(`© ${contentRights.copyrightYear.toString()}`);
+    }
+    if (contentRights.license) {
+        elements.push(formatLicense(contentRights.license));
+    }
+    if (contentRights.copyrightNotice) {
+        elements.push(contentRights.copyrightNotice);
+    }
+    if (contentRights.creditLine) {
+        elements.push(contentRights.creditLine);
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: styles.compactContainer, children: (0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.compactText, children: elements.join(" • ") }) }));
+});
+exports.ContentRights.displayName = "ContentRights";
+function createStyles(theme) {
+    return react_native_1.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/dist/components/content-metadata/content-warnings.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWarnings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const metadata_constants_1 = require("../../lib/metadata-constants");
+const theme_1 = require("../../lib/theme/theme");
+const text_1 = require("../ui/text");
+exports.ContentWarnings = (0, react_1.forwardRef)(({ warnings, compact = false }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    if (!warnings || warnings.length === 0) {
+        return null;
+    }
+    const styles = createStyles(theme, compact);
+    const getWarningLabel = (warning) => {
+        return metadata_constants_1.C2PA_WARNING_LABELS[warning] || warning;
+    };
+    if (compact) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: styles.compactContainer, children: warnings.map((warning, index) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.compactWarning, children: (0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.compactWarningText, children: getWarningLabel(warning) }) }, index))) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: ref, style: styles.container, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.title, children: "Content Warnings" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.warningsContainer, children: warnings.map((warning, index) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.warning, children: (0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.warningText, children: getWarningLabel(warning) }) }, index))) })] }));
+});
+exports.ContentWarnings.displayName = "ContentWarnings";
+function createStyles(theme, compact) {
+    return react_native_1.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/dist/components/content-metadata/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWarnings = exports.ContentRights = exports.ContentMetadataForm = void 0;
+// Main form component
+var content_metadata_form_1 = require("./content-metadata-form");
+Object.defineProperty(exports, "ContentMetadataForm", { enumerable: true, get: function () { return content_metadata_form_1.ContentMetadataForm; } });
+// Display components
+var content_rights_1 = require("./content-rights");
+Object.defineProperty(exports, "ContentRights", { enumerable: true, get: function () { return content_rights_1.ContentRights; } });
+var content_warnings_1 = require("./content-warnings");
+Object.defineProperty(exports, "ContentWarnings", { enumerable: true, get: function () { return content_warnings_1.ContentWarnings; } });

package/dist/components/mobile-player/player.js

@@ -18,12 +18,16 @@ function Player(props) {
     const setIngest = (0, player_store_1.usePlayerStore)((x) => x.setIngestConnectionState);
     const clearControlsTimeout = (0, player_store_1.usePlayerStore)((x) => x.clearControlsTimeout);
     const setReportingURL = (0, player_store_1.usePlayerStore)((x) => x.setReportingURL);
+    const setEmbedded = (0, player_store_1.usePlayerStore)((x) => x.setEmbedded);
     const reportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.reportModalOpen);
     const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
     const reportSubject = (0, player_store_1.usePlayerStore)((x) => x.reportSubject);
     (0, react_1.useEffect)(() => {
         setReportingURL(props.reportingURL ?? null);
     }, [props.reportingURL]);
+    (0, react_1.useEffect)(() => {
+        setEmbedded(props.embedded ?? false);
+    }, [props.embedded]);
     // Will call back every few seconds to send health updates
     usePlayerStatus();
     (0, react_1.useEffect)(() => {