sanity-plugin-mux-input 2.5.0 → 2.7.0

package/dist/index.mjs

@@ -1,9 +1,8 @@
-import { useClient as useClient$1, useDocumentStore, collate, useDocumentValues, createHookFromObservableFactory, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
+import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { ErrorOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, UploadIcon, ImageIcon, ResetIcon, TranslateIcon, DocumentVideoIcon } from "@sanity/icons";
-import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, TextInput, Tooltip, Inline, useToast, TabList, Tab, TabPanel, Label as Label$1, Grid, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
+import { ErrorOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, UploadIcon, ImageIcon, ResetIcon, TranslateIcon, WarningFilledIcon, DocumentVideoIcon } from "@sanity/icons";
+import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, TextInput, Tooltip, Inline, useToast, TabList, Tab, TabPanel, Label as Label$1, Grid, useTheme_v2, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
 import React, { useState, useMemo, useEffect, useRef, useId, memo, createContext, useContext, isValidElement, useCallback, useReducer, PureComponent, createElement, forwardRef, Suspense } from "react";
-import { useObservable } from "react-rx";
 import compact from "lodash/compact.js";
 import toLower from "lodash/toLower.js";
 import trim from "lodash/trim.js";
@@ -19,6 +18,7 @@ import { usePaneRouter } from "sanity/desk";
 import { IntentLink } from "sanity/router";
 import isNumber from "lodash/isNumber.js";
 import isString from "lodash/isString.js";
+import { useObservable } from "react-rx";
 import useSWR from "swr";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { UpChunk } from "@mux/upchunk";
@@ -71,38 +71,33 @@ const ASSET_SORT_OPTIONS = {
   createdAsc: { groq: "_createdAt asc", label: "First created (oldest)" },
   filenameAsc: { groq: "filename asc", label: "By filename (A-Z)" },
   filenameDesc: { groq: "filename desc", label: "By filename (Z-A)" }
-}, useAssetDocuments = ({
-  documentStore,
-  sort,
-  searchQuery
-}) => {
-  const memoizedObservable = useMemo(() => {
-    const search = createSearchFilter(searchQuery), filter = ['_type == "mux.videoAsset"', ...search.filter].filter(Boolean).join(" && "), sortFragment = ASSET_SORT_OPTIONS[sort].groq;
-    return documentStore.listenQuery(
-      /* groq */
-      `*[${filter}] | order(${sortFragment})`,
-      search.params,
-      {
-        apiVersion: SANITY_API_VERSION
-      }
-    );
-  }, [documentStore, sort, searchQuery]);
-  return useObservable(memoizedObservable, void 0);
-};
+}, useAssetDocuments = createHookFromObservableFactory(({ documentStore, sort, searchQuery }) => {
+  const search = createSearchFilter(searchQuery), filter = ['_type == "mux.videoAsset"', ...search.filter].filter(Boolean).join(" && "), sortFragment = ASSET_SORT_OPTIONS[sort].groq;
+  return documentStore.listenQuery(
+    /* groq */
+    `*[${filter}] | order(${sortFragment})`,
+    search.params,
+    {
+      apiVersion: SANITY_API_VERSION
+    }
+  );
+});
 function useAssets() {
-  const documentStore = useDocumentStore(), [sort, setSort] = useState("createdDesc"), [searchQuery, setSearchQuery] = useState(""), assetDocumentsObservable = useAssetDocuments({ documentStore, sort, searchQuery }), isLoading = assetDocumentsObservable === void 0;
+  const documentStore = useDocumentStore(), [sort, setSort] = useState("createdDesc"), [searchQuery, setSearchQuery] = useState(""), [assetDocuments = [], isLoading] = useAssetDocuments(
+    useMemo(() => ({ documentStore, sort, searchQuery }), [documentStore, sort, searchQuery])
+  );
   return {
     assets: useMemo(
       () => (
         // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
-        collate(assetDocumentsObservable ?? []).map(
+        collate(assetDocuments).map(
           (collated) => ({
             ...collated.draft || collated.published || {},
             _id: collated.id
           })
         )
       ),
-      [assetDocumentsObservable]
+      [assetDocuments]
     ),
     isLoading,
     sort,
@@ -285,8 +280,8 @@ function assetExistsInSanity(asset, existingAssets) {
     (existing) => existing.assetId === asset.id || existing.uploadId === asset.upload_id
   );
 }
-function useInView(options = {}) {
-  const [inView, setInView] = useState(!1), ref = useRef(null);
+function useInView(ref, options = {}) {
+  const [inView, setInView] = useState(!1);
   return useEffect(() => {
     if (!ref.current) return;
     const observer = new IntersectionObserver(([entry], obs) => {
@@ -296,7 +291,7 @@ function useInView(options = {}) {
     return observer.observe(toObserve), () => {
       toObserve && observer.unobserve(toObserve);
     };
-  }, [options]), { inView, ref };
+  }, [options, ref]), inView;
 }
 const _id = "secrets.mux";
 function readSecrets(client) {
@@ -403,7 +398,7 @@ function VideoThumbnail({
   width,
   staticImage = !1
 }) {
-  const { inView, ref } = useInView(), posterWidth = width || 250, [status, setStatus] = useState("loading"), client = useClient(), src = useMemo(() => {
+  const ref = useRef(null), inView = useInView(ref), posterWidth = width || 250, [status, setStatus] = useState("loading"), client = useClient(), src = useMemo(() => {
     try {
       let thumbnail;
       return staticImage ? thumbnail = getPosterSrc({ asset, client, width: posterWidth }) : thumbnail = getAnimatedPosterSrc({ asset, client, width: posterWidth }), thumbnail;
@@ -470,9 +465,7 @@ function VideoThumbnail({
             alt: `Preview for ${staticImage ? "image" : "video"} ${asset.filename || asset.assetId}`,
             onLoad: handleLoad,
             onError: handleError,
-            style: {
-              opacity: status === "loaded" ? 1 : 0
-            }
+            style: { opacity: status === "loaded" ? 1 : 0 }
           }
         )
       ] }) : null
@@ -923,7 +916,7 @@ function VideoPlayer({
             crossOrigin: "anonymous",
             metadata: {
               player_name: "Sanity Admin Dashboard",
-              player_version: "2.5.0",
+              player_version: "2.7.0",
               page_type: "Preview Player"
             },
             audio: isAudio,
@@ -1291,10 +1284,9 @@ function getVideoMetadata(doc) {
   };
 }
 function useVideoDetails(props) {
-  const documentStore = useDocumentStore(), toast = useToast(), client = useClient(), [references, referencesLoading] = useDocReferences({
-    documentStore,
-    id: props.asset._id
-  }), [originalAsset, setOriginalAsset] = useState(() => props.asset), [filename, setFilename] = useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = useState("idle");
+  const documentStore = useDocumentStore(), toast = useToast(), client = useClient(), [references, referencesLoading] = useDocReferences(
+    useMemo(() => ({ documentStore, id: props.asset._id }), [documentStore, props.asset._id])
+  ), [originalAsset, setOriginalAsset] = useState(() => props.asset), [filename, setFilename] = useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = useState("idle");
   function handleClose() {
     if (state === "idle") {
       if (modified) {
@@ -1936,13 +1928,19 @@ function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, s
   };
   return client.createOrReplace(doc);
 }
-function createSigningKeys(client) {
-  const { dataset } = client.config();
-  return client.request({
-    url: `/addons/mux/signing-keys/${dataset}`,
-    withCredentials: !0,
-    method: "POST"
-  });
+async function createSigningKeys(client) {
+  try {
+    const { dataset } = client.config();
+    return await client.request({
+      url: `/addons/mux/signing-keys/${dataset}`,
+      withCredentials: !0,
+      method: "POST"
+    });
+  } catch (error) {
+    console.error("Error creating signing keys", error);
+    const message = error.response?.statusCode === 401 ? 'Unauthorized - Failed to create the Signing Key. Please ensure that the token has "System" permissions' : error.message;
+    throw new Error(message);
+  }
 }
 function testSecrets(client) {
   const { dataset } = client.config();
@@ -2050,593 +2048,43 @@ function reducer(state, action) {
       throw new Error(`Unknown action type: ${action?.type}`);
   }
 }
-const useSecretsFormState = (secrets) => useReducer(reducer, secrets, init), ids = [
-  "title",
-  "a",
-  "b",
-  "c",
-  "d",
-  "e",
-  "f",
-  "g",
-  "h",
-  "i",
-  "j",
-  "k",
-  "l",
-  "m",
-  "n",
-  "o",
-  "p",
-  "q",
-  "r"
-];
+const useSecretsFormState = (secrets) => useReducer(reducer, secrets, init);
 function MuxLogo({ height = 26 }) {
-  const id = useId(), [titleId, a2, b, c2, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = useMemo(
-    () => ids.map((field) => `${id}-${field}`),
-    [id]
-  );
-  return /* @__PURE__ */ jsxs(
+  const id = useId(), fillColor = useTheme_v2().color._dark ? "white" : "black", titleId = useMemo(() => `${id}-title`, [id]), pathStyle = {
+    fillRule: "nonzero"
+  };
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       "aria-labelledby": titleId,
-      role: "img",
+      style: { height: `${height}px` },
+      viewBox: "0 0 1600 500",
+      version: "1.1",
       xmlns: "http://www.w3.org/2000/svg",
       xmlSpace: "preserve",
-      viewBox: "92.08878326416016 102.66712188720703 692.76123046875 219.99948120117188",
-      style: { height: `${height}px` },
-      children: [
-        /* @__PURE__ */ jsx("title", { id: titleId, children: "Mux Logo" }),
-        /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: c2,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(528.38055 0 0 -528.38055 63.801 159.5)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: d,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(523.66766 0 0 -523.66766 67.897 159.5)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: g,
-              spreadMethod: "pad",
-              gradientTransform: "rotate(180 296.075 79.75) scale(524.84045)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: i,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: j,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(523.08514 0 0 -523.08514 67.897 224.446)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: k,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.553)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: l,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: m,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.554)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: p,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(521.97632 0 0 -521.97632 69.067 191.973)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: q,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(523.09039 0 0 -523.09039 67.312 191.973)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: r,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("clipPath", { id: a2, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: b, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M423.64 242h164.999V77H423.64Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: e, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: f, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M311.3 242h93.031V77H311.3Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: h, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M198.96 242h35.106V77H198.96Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: n, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: o, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M69.067 242H169.12V141.947H69.067Z" }) })
-        ] }),
-        /* @__PURE__ */ jsx("g", { clipPath: `url(#${a2})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsx(
-          "g",
-          {
-            style: {
-              opacity: 0.69999701
-            },
-            clipPath: `url(#${b})`,
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                style: {
-                  fill: `url(#${c2})`,
-                  stroke: "none"
-                },
-                d: "M558.674 82.142c6.855-6.855 17.969-6.855 24.824 0 6.854 6.855 6.854 17.969 0 24.823L453.605 236.858c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
-              }
-            )
-          }
-        ) }),
+      children: /* @__PURE__ */ jsxs("g", { id: "Layer-1", fill: fillColor, children: [
         /* @__PURE__ */ jsx(
           "path",
           {
-            style: {
-              fill: `url(#${d})`,
-              stroke: "none"
-            },
-            d: "M558.674 236.858 428.781 106.966c-6.855-6.855-6.855-17.969 0-24.825 6.855-6.854 17.969-6.854 24.823 0l129.894 129.894c6.854 6.855 6.854 17.968 0 24.823A17.498 17.498 0 0 1 571.086 242a17.495 17.495 0 0 1-12.412-5.142",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+            d: "M994.287,93.486c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m0,-93.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,68.943 -56.09,125.033 -125.032,125.033c-68.942,-0 -125.03,-56.09 -125.03,-125.033l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,137.853 112.149,250.003 249.999,250.003c137.851,-0 250.001,-112.15 250.001,-250.003l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486",
+            style: pathStyle
           }
         ),
-        /* @__PURE__ */ jsxs("g", { clipPath: `url(#${e})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: [
-          /* @__PURE__ */ jsx(
-            "g",
-            {
-              style: {
-                opacity: 0.69999701
-              },
-              clipPath: `url(#${f})`,
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  style: {
-                    fill: `url(#${g})`,
-                    stroke: "none"
-                  },
-                  d: "M328.853 112.107c22.297 0 40.372 18.075 40.372 40.372v71.315c0 10.054 7.505 18.206 17.554 18.206 10.048 0 17.552-8.152 17.552-18.206v-71.315c0-41.686-33.793-75.479-75.478-75.479-9.694 0-17.553 7.859-17.553 17.554 0 9.694 7.859 17.553 17.553 17.553"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "g",
-            {
-              style: {
-                opacity: 0.69999701
-              },
-              clipPath: `url(#${h})`,
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  style: {
-                    fill: `url(#${i})`,
-                    stroke: "none"
-                  },
-                  d: "M216.513 242c-10.049 0-17.553-8.152-17.553-18.206V95.206c0-10.054 7.504-18.206 17.553-18.206 10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.054-7.505 18.206-17.553 18.206"
-                }
-              )
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsx(
           "path",
           {
-            style: {
-              fill: `url(#${j})`,
-              stroke: "none"
-            },
-            d: "M369.225 224.447c0-9.694 7.859-17.553 17.553-17.553 9.695 0 17.553 7.859 17.553 17.553s-7.858 17.552-17.553 17.552c-9.694 0-17.553-7.858-17.553-17.552",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            style: {
-              fill: `url(#${k})`,
-              stroke: "none"
-            },
-            d: "M553.532 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.552-17.554 17.552-9.694 0-17.553-7.858-17.553-17.552",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            style: {
-              fill: `url(#${l})`,
-              stroke: "none"
-            },
-            d: "M69.067 223.794V95.206C69.067 85.152 76.571 77 86.62 77c10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.055-7.505 18.205-17.553 18.205-10.049 0-17.553-8.15-17.553-18.205",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+            d: "M1537.51,468.511c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m-275.883,-218.509l-143.33,143.329c-24.402,24.402 -24.402,63.966 0,88.368c24.402,24.402 63.967,24.402 88.369,-0l143.33,-143.329l143.328,143.329c24.402,24.4 63.967,24.402 88.369,-0c24.403,-24.402 24.403,-63.966 0.001,-88.368l-143.33,-143.329l0.001,-0.004l143.329,-143.329c24.402,-24.402 24.402,-63.965 0,-88.367c-24.402,-24.402 -63.967,-24.402 -88.369,-0l-143.329,143.328l-143.329,-143.328c-24.402,-24.401 -63.967,-24.402 -88.369,-0c-24.402,24.402 -24.402,63.965 0,88.367l143.329,143.329l0,0.004Z",
+            style: pathStyle
           }
         ),
         /* @__PURE__ */ jsx(
           "path",
           {
-            style: {
-              fill: `url(#${m})`,
-              stroke: "none"
-            },
-            d: "M198.96 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.553-17.554 17.553-9.694 0-17.553-7.859-17.553-17.553",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
-          }
-        ),
-        /* @__PURE__ */ jsx("g", { clipPath: `url(#${n})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsx(
-          "g",
-          {
-            style: {
-              opacity: 0.69999701
-            },
-            clipPath: `url(#${o})`,
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                style: {
-                  fill: `url(#${p})`,
-                  stroke: "none"
-                },
-                d: "M139.155 147.088c6.855-6.855 17.969-6.855 24.824 0s6.855 17.969 0 24.824l-64.947 64.946c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            style: {
-              fill: `url(#${q})`,
-              stroke: "none"
-            },
-            d: "m204.101 236.858-64.947-64.946c-6.854-6.855-6.854-17.969 0-24.824 6.856-6.855 17.97-6.855 24.824 0l64.947 64.947c6.855 6.855 6.855 17.968 0 24.823A17.495 17.495 0 0 1 216.513 242a17.498 17.498 0 0 1-12.412-5.142",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            style: {
-              fill: `url(#${r})`,
-              stroke: "none"
-            },
-            d: "M253.374 223.794v-71.315c0-41.685 33.793-75.479 75.479-75.479 9.695 0 17.553 7.859 17.553 17.554 0 9.694-7.858 17.553-17.553 17.553-22.297 0-40.372 18.075-40.372 40.372v71.315c0 10.055-7.505 18.205-17.554 18.205s-17.553-8.15-17.553-18.205",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+            d: "M437.511,468.521c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m23.915,-463.762c-23.348,-9.672 -50.226,-4.327 -68.096,13.544l-143.331,143.329l-143.33,-143.329c-17.871,-17.871 -44.747,-23.216 -68.096,-13.544c-23.349,9.671 -38.574,32.455 -38.574,57.729l0,375.026c0,34.51 27.977,62.486 62.487,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-224.173l80.843,80.844c24.404,24.402 63.965,24.402 88.369,-0l80.843,-80.844l0,224.173c0,34.51 27.976,62.486 62.486,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-375.026c0,-25.274 -15.224,-48.058 -38.573,-57.729",
+            style: pathStyle
           }
         )
-      ]
+      ] })
     }
   );
 }
@@ -2731,6 +2179,8 @@ function ConfigureApi({ secrets, setDialogState }) {
             /* @__PURE__ */ jsx("strong", { children: "Mux Data" }),
             " (Read)",
             /* @__PURE__ */ jsx("br", {}),
+            "To use Signed URLs, the token must also have System permissions.",
+            /* @__PURE__ */ jsx("br", {}),
             "The credentials will be stored safely in a hidden document only available to editors."
           ] })
         ] }) }),
@@ -3603,6 +3053,88 @@ function TextTracksEditor({
     )
   ] }) });
 }
+function PlaybackPolicyOption({
+  id,
+  checked,
+  optionName,
+  description,
+  dispatch,
+  action
+}) {
+  const [scale, setScale] = useState(1), boxStyle = {
+    outline: "0.01rem solid grey",
+    transform: `scale(${scale})`,
+    transition: "transform 0.1s ease-in-out",
+    cursor: "pointer",
+    borderRadius: "0.25rem"
+  }, triggerAnimation = () => {
+    setScale(0.98), setTimeout(() => {
+      setScale(1);
+    }, 100);
+  };
+  return /* @__PURE__ */ jsx("label", { children: /* @__PURE__ */ jsxs(Flex, { gap: 3, padding: 3, style: boxStyle, children: [
+    /* @__PURE__ */ jsx(Checkbox, { id, required: !0, checked, onChange: () => {
+      triggerAnimation(), dispatch({
+        action,
+        value: !checked
+      });
+    } }),
+    /* @__PURE__ */ jsxs(Grid, { gap: 3, children: [
+      /* @__PURE__ */ jsx(Text, { size: 3, weight: "bold", children: optionName }),
+      /* @__PURE__ */ jsx(Text, { size: 2, muted: !0, children: description })
+    ] })
+  ] }) });
+}
+function PlaybackPolicyWarning() {
+  return /* @__PURE__ */ jsx(Box, { padding: 2, style: {
+    outline: "0.01rem solid grey",
+    backgroundColor: "#979cb0",
+    borderRadius: "0.5rem",
+    width: "max-content",
+    color: "#13141A"
+  }, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+    /* @__PURE__ */ jsx(WarningFilledIcon, {}),
+    /* @__PURE__ */ jsx(Text, { size: 1, style: {
+      color: "#13141A",
+      fontWeight: 500
+    }, children: "Please select at least one Playback Policy" })
+  ] }) });
+}
+function PlaybackPolicy({
+  id,
+  config,
+  secrets,
+  dispatch
+}) {
+  const noPolicySelected = !(config.public_policy || config.signed_policy);
+  return /* @__PURE__ */ jsxs(Grid, { gap: 3, children: [
+    /* @__PURE__ */ jsx(Text, { weight: "bold", children: "Advanced Playback Policies" }),
+    /* @__PURE__ */ jsx(
+      PlaybackPolicyOption,
+      {
+        id: `${id}--public`,
+        checked: config.public_policy,
+        optionName: "Public",
+        description: "Playback IDs are accessible by constructing an HLS URL like https://stream.mux.com/{PLAYBACK_ID}",
+        dispatch,
+        action: "public_policy"
+      }
+    ),
+    secrets.enableSignedUrls && /* @__PURE__ */ jsx(
+      PlaybackPolicyOption,
+      {
+        id: `${id}--signed`,
+        checked: config.signed_policy,
+        optionName: "Signed",
+        description: `Playback IDs should be used with tokens https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}. 
+                // See Secure video playback for details about creating tokens.`,
+        dispatch,
+        action: "signed_policy"
+      }
+    ),
+    noPolicySelected && /* @__PURE__ */ jsx(PlaybackPolicyWarning, {})
+  ] });
+}
 const ENCODING_OPTIONS = [
   { value: "smart", label: "Smart" },
   { value: "baseline", label: "Baseline" }
@@ -3635,7 +3167,9 @@ function UploadConfiguration({
             encoding_tier: action.value,
             mp4_support: "none",
             max_resolution_tier: "1080p",
-            text_tracks: prev.text_tracks?.filter(({ type }) => type !== "autogenerated")
+            text_tracks: prev.text_tracks?.filter(({ type }) => type !== "autogenerated"),
+            public_policy: !0,
+            signed_policy: !1
           }) : Object.assign({}, prev, {
             encoding_tier: action.value,
             mp4_support: pluginConfig.mp4_support,
@@ -3645,7 +3179,9 @@ function UploadConfiguration({
         case "mp4_support":
         case "max_resolution_tier":
         case "normalize_audio":
-        case "signed":
+        case "signed_policy":
+          return Object.assign({}, prev, { [action.action]: action.value });
+        case "public_policy":
           return Object.assign({}, prev, { [action.action]: action.value });
         // Updating individual tracks
         case "track": {
@@ -3680,7 +3216,8 @@ function UploadConfiguration({
       encoding_tier: pluginConfig.encoding_tier,
       max_resolution_tier: pluginConfig.max_resolution_tier,
       mp4_support: pluginConfig.mp4_support,
-      signed: secrets.enableSignedUrls && pluginConfig.defaultSigned,
+      signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
+      public_policy: !0,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks
     }
@@ -3799,25 +3336,9 @@ function UploadConfiguration({
               }) })
             }
           ),
-          (secrets.enableSignedUrls || config.encoding_tier === "smart") && /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-            secrets.enableSignedUrls && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: `${id}--signed`,
-                  style: { display: "block" },
-                  name: "signed",
-                  required: !0,
-                  checked: config.signed,
-                  onChange: (e) => dispatch({
-                    action: "signed",
-                    value: e.currentTarget.checked
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: `${id}--signed`, children: "Signed playback URL" }) })
-            ] }),
-            config.encoding_tier === "smart" && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+          config.encoding_tier === "smart" && /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
+            config.encoding_tier === "smart" && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, padding: [0, 2], children: [
               /* @__PURE__ */ jsx(
                 Checkbox,
                 {
@@ -3847,6 +3368,7 @@ function UploadConfiguration({
         /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
           Button,
           {
+            disabled: config.encoding_tier === "smart" && !config.public_policy && !config.signed_policy,
             icon: UploadIcon,
             text: "Upload",
             tone: "positive",
@@ -3857,6 +3379,10 @@ function UploadConfiguration({
     }
   );
 }
+function setPlaybackPolicy(config) {
+  const playback_policy = [];
+  return config.public_policy && playback_policy.push("public"), config.signed_policy && playback_policy.push("signed"), playback_policy;
+}
 function formatUploadConfig(config) {
   const generated_subtitles = config.text_tracks.filter(isAutogeneratedTrack).map((track) => ({
     name: track.name,
@@ -3881,7 +3407,7 @@ function formatUploadConfig(config) {
       )
     ],
     mp4_support: config.mp4_support,
-    playback_policy: config.signed ? ["public", "signed"] : ["public"],
+    playback_policy: setPlaybackPolicy(config),
     max_resolution_tier: config.max_resolution_tier,
     encoding_tier: config.encoding_tier,
     normalize_audio: config.normalize_audio