sanity-plugin-mux-input 2.5.0 → 2.6.0

package/dist/index.js

@@ -19,7 +19,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), reactRx = require("react-rx"), compact = require("lodash/compact.js"), toLower = require("lodash/toLower.js"), trim = require("lodash/trim.js"), uniq = require("lodash/uniq.js"), words = require("lodash/words.js"), styledComponents = require("styled-components"), uuid = require("@sanity/uuid"), rxjs = require("rxjs"), operators = require("rxjs/operators"), suspendReact = require("suspend-react"), MuxPlayer = require("@mux/mux-player-react"), desk = require("sanity/desk"), router = require("sanity/router"), isNumber = require("lodash/isNumber.js"), isString = require("lodash/isString.js"), useSWR = require("swr"), scrollIntoView = require("scroll-into-view-if-needed"), upchunk = require("@mux/upchunk"), reactIs = require("react-is"), LanguagesList = require("iso-639-1");
+var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), React = require("react"), compact = require("lodash/compact.js"), toLower = require("lodash/toLower.js"), trim = require("lodash/trim.js"), uniq = require("lodash/uniq.js"), words = require("lodash/words.js"), styledComponents = require("styled-components"), uuid = require("@sanity/uuid"), rxjs = require("rxjs"), operators = require("rxjs/operators"), suspendReact = require("suspend-react"), MuxPlayer = require("@mux/mux-player-react"), desk = require("sanity/desk"), router = require("sanity/router"), isNumber = require("lodash/isNumber.js"), isString = require("lodash/isString.js"), reactRx = require("react-rx"), useSWR = require("swr"), scrollIntoView = require("scroll-into-view-if-needed"), upchunk = require("@mux/upchunk"), reactIs = require("react-is"), LanguagesList = require("iso-639-1");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -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 = React.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 reactRx.useObservable(memoizedObservable, void 0);
-};
+}, useAssetDocuments = sanity.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 = sanity.useDocumentStore(), [sort, setSort] = React.useState("createdDesc"), [searchQuery, setSearchQuery] = React.useState(""), assetDocumentsObservable = useAssetDocuments({ documentStore, sort, searchQuery }), isLoading = assetDocumentsObservable === void 0;
+  const documentStore = sanity.useDocumentStore(), [sort, setSort] = React.useState("createdDesc"), [searchQuery, setSearchQuery] = React.useState(""), [assetDocuments = [], isLoading] = useAssetDocuments(
+    React.useMemo(() => ({ documentStore, sort, searchQuery }), [documentStore, sort, searchQuery])
+  );
   return {
     assets: React.useMemo(
       () => (
         // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
-        sanity.collate(assetDocumentsObservable ?? []).map(
+        sanity.collate(assetDocuments).map(
           (collated) => ({
             ...collated.draft || collated.published || {},
             _id: collated.id
           })
         )
       ),
-      [assetDocumentsObservable]
+      [assetDocuments]
     ),
     isLoading,
     sort,
@@ -923,7 +918,7 @@ function VideoPlayer({
             crossOrigin: "anonymous",
             metadata: {
               player_name: "Sanity Admin Dashboard",
-              player_version: "2.5.0",
+              player_version: "2.6.0",
               page_type: "Preview Player"
             },
             audio: isAudio,
@@ -1291,10 +1286,9 @@ function getVideoMetadata(doc) {
   };
 }
 function useVideoDetails(props) {
-  const documentStore = sanity.useDocumentStore(), toast = ui.useToast(), client = useClient(), [references, referencesLoading] = useDocReferences({
-    documentStore,
-    id: props.asset._id
-  }), [originalAsset, setOriginalAsset] = React.useState(() => props.asset), [filename, setFilename] = React.useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = React.useState("idle");
+  const documentStore = sanity.useDocumentStore(), toast = ui.useToast(), client = useClient(), [references, referencesLoading] = useDocReferences(
+    React.useMemo(() => ({ documentStore, id: props.asset._id }), [documentStore, props.asset._id])
+  ), [originalAsset, setOriginalAsset] = React.useState(() => props.asset), [filename, setFilename] = React.useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = React.useState("idle");
   function handleClose() {
     if (state === "idle") {
       if (modified) {
@@ -1936,13 +1930,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 +2050,43 @@ function reducer(state, action) {
       throw new Error(`Unknown action type: ${action?.type}`);
   }
 }
-const useSecretsFormState = (secrets) => React.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) => React.useReducer(reducer, secrets, init);
 function MuxLogo({ height = 26 }) {
-  const id = React.useId(), [titleId, a2, b, c2, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = React.useMemo(
-    () => ids.map((field) => `${id}-${field}`),
-    [id]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const id = React.useId(), fillColor = ui.useTheme_v2().color._dark ? "white" : "black", titleId = React.useMemo(() => `${id}-title`, [id]), pathStyle = {
+    fillRule: "nonzero"
+  };
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("title", { id: titleId, children: "Mux Logo" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: a2, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: b, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M423.64 242h164.999V77H423.64Z" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: e, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: f, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M311.3 242h93.031V77H311.3Z" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: h, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M198.96 242h35.106V77H198.96Z" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: n, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: o, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M69.067 242H169.12V141.947H69.067Z" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${a2})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "g",
-          {
-            style: {
-              opacity: 0.69999701
-            },
-            clipPath: `url(#${b})`,
-            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { id: "Layer-1", fill: fillColor, children: [
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { clipPath: `url(#${e})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "g",
-            {
-              style: {
-                opacity: 0.69999701
-              },
-              clipPath: `url(#${f})`,
-              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            "g",
-            {
-              style: {
-                opacity: 0.69999701
-              },
-              clipPath: `url(#${h})`,
-              children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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)"
+            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__ */ jsxRuntime.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__ */ jsxRuntime.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)"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("g", { clipPath: `url(#${n})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "g",
-          {
-            style: {
-              opacity: 0.69999701
-            },
-            clipPath: `url(#${o})`,
-            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 +2181,8 @@ function ConfigureApi({ secrets, setDialogState }) {
             /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Mux Data" }),
             " (Read)",
             /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+            "To use Signed URLs, the token must also have System permissions.",
+            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
             "The credentials will be stored safely in a hidden document only available to editors."
           ] })
         ] }) }),
@@ -3603,6 +3055,88 @@ function TextTracksEditor({
     )
   ] }) });
 }
+function PlaybackPolicyOption({
+  id,
+  checked,
+  optionName,
+  description,
+  dispatch,
+  action
+}) {
+  const [scale, setScale] = React.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__ */ jsxRuntime.jsx("label", { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { gap: 3, padding: 3, style: boxStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Checkbox, { id, required: !0, checked, onChange: () => {
+      triggerAnimation(), dispatch({
+        action,
+        value: !checked
+      });
+    } }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { gap: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, weight: "bold", children: optionName }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, muted: !0, children: description })
+    ] })
+  ] }) });
+}
+function PlaybackPolicyWarning() {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, style: {
+    outline: "0.01rem solid grey",
+    backgroundColor: "#979cb0",
+    borderRadius: "0.5rem",
+    width: "max-content",
+    color: "#13141A"
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(icons.WarningFilledIcon, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs(ui.Grid, { gap: 3, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { weight: "bold", children: "Advanced Playback Policies" }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PlaybackPolicyWarning, {})
+  ] });
+}
 const ENCODING_OPTIONS = [
   { value: "smart", label: "Smart" },
   { value: "baseline", label: "Baseline" }
@@ -3635,7 +3169,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 +3181,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 +3218,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 +3338,9 @@ function UploadConfiguration({
               }) })
             }
           ),
-          (secrets.enableSignedUrls || config.encoding_tier === "smart") && /* @__PURE__ */ jsxRuntime.jsx(sanity.FormField, { title: "Additional Configuration", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
-            secrets.enableSignedUrls && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Checkbox,
-                {
-                  id: `${id}--signed`,
-                  style: { display: "block" },
-                  name: "signed",
-                  required: !0,
-                  checked: config.signed,
-                  onChange: (e) => dispatch({
-                    action: "signed",
-                    value: e.currentTarget.checked
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `${id}--signed`, children: "Signed playback URL" }) })
-            ] }),
-            config.encoding_tier === "smart" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, children: [
+          config.encoding_tier === "smart" && /* @__PURE__ */ jsxRuntime.jsx(sanity.FormField, { title: "Additional Configuration", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
+            config.encoding_tier === "smart" && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", gap: 2, padding: [0, 2], children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 ui.Checkbox,
                 {
@@ -3847,6 +3370,7 @@ function UploadConfiguration({
         /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
           ui.Button,
           {
+            disabled: config.encoding_tier === "smart" && !config.public_policy && !config.signed_policy,
             icon: icons.UploadIcon,
             text: "Upload",
             tone: "positive",
@@ -3857,6 +3381,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 +3409,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