sanity-plugin-mux-input 2.0.0-v3-studio.22 → 2.0.0

package/README.md

@@ -1,24 +1,7 @@
-## Installation
-
-```
-npm install --save-exact sanity-plugin-mux-input@studio-v3
-```
-
-or
-
-```
-yarn add --exact sanity-plugin-mux-input@studio-v3
-```
-
-## Usage
-
 # Mux Video Input Sanity Plugin
 
-> **NOTE**
->
-> This is the **Sanity Studio v3 version** of sanity-plugin-mux-input.
->
-> For the v2 version, please refer to the [studio-v2 branch](https://github.com/sanity-io/sanity-plugin-mux-input/tree/studio-v2).
+> This is a **Sanity Studio v3** plugin.
+> For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity-plugin-mux-input/tree/studio-v2).
 
 This is a plugin that let you use [Mux](https://www.mux.com) video assets in your Sanity studio.
 
@@ -28,6 +11,18 @@ The Mux plugin for Sanity gives you a way to upload and preview videos easily.
 
 Not familiar with Sanity? [Visit www.sanity.io](https://www.sanity.io/)
 
+## Installation
+
+```
+npm install --save-exact sanity-plugin-mux-input
+```
+
+or
+
+```
+yarn add --exact sanity-plugin-mux-input
+```
+
 ## Quick start
 
 - While in your project folder, run `npm i sanity-plugin-mux-input@studio-v3`.

package/lib/_chunks/{Input-1a203976.js → Input-2ba004d3.js}

@@ -1,2 +1,2 @@
-"use strict";const e=["icon","id","accept","capture","fontSize","multiple","onSelect","padding","space","textAlign","text","disabled"],t=["onSelect"];var n,s,r,i,a,o,l,d,c,u,p,h,g,f,x,m,y,b,j;function v(e,t){if(null==e)return{};var n,s,r=function(e,t){if(null==e)return{};var n,s,r={},i=Object.keys(e);for(s=0;s<i.length;s++)n=i[s],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(s=0;s<i.length;s++)n=i[s],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function w(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function k(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,s)}return n}function C(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?k(Object(n),!0).forEach((function(t){S(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):k(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var P=require("react/jsx-runtime"),O=require("react"),I=require("./VideoSource.styled-64c9f864.js"),U=require("sanity"),D=require("swr"),T=require("./index-dd3a5498.js"),M=require("rxjs"),E=require("rxjs/operators"),_=require("@sanity/uuid"),F=require("@mux/upchunk"),R=require("@sanity/ui"),B=require("@sanity/icons"),K=require("motion"),z=require("styled-components"),q=require("use-device-pixel-ratio"),L=require("@mux/playback-core"),A=require("media-chrome/dist/react"),V=require("react-is"),G=require("suspend-react");function H(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function N(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}require("use-error-boundary"),require("scroll-into-view-if-needed");var Y=H(O),Z=H(D),W=N(F),X=H(z);const J=["token","secretKey","enableSignedUrls","signingKeyId","signingKeyPrivate"];function $(e,t,n){return new M.Observable((s=>{const r=W.createUpload({endpoint:t,file:n,dynamicChunkSize:!0});return r.on("success",(()=>{s.next({type:"success",id:e}),s.complete()})),r.on("error",(e=>s.error(new Error(e.detail.message)))),r.on("progress",(e=>s.next({type:"progress",percent:e.detail}))),r.on("offline",(()=>{r.pause(),s.next({type:"pause",id:e})})),r.on("online",(()=>{r.resume(),s.next({type:"resume",id:e})})),()=>r.abort()}))}function Q(e,t){const{dataset:n}=e.config();return e.request({url:"/addons/mux/assets/".concat(n,"/").concat(t),withCredentials:!0,method:"DELETE"})}function ee(e,t,n,s,r,i){const a={_id:"secrets.mux",_type:"mux.apiKey",token:t,secretKey:n,enableSignedUrls:s,signingKeyId:r,signingKeyPrivate:i};return e.createOrReplace(a)}function te(e){const{dataset:t}=e.config();return M.defer((()=>e.observable.request({url:"/addons/mux/secrets/".concat(t,"/test"),withCredentials:!0,method:"GET"})))}function ne(e,t){return e.observable.request({url:"/addons/mux/uploads/".concat(e.clientConfig.dataset,"/").concat(t),withCredentials:!0,method:"DELETE"})}async function se(e,t){let n,s;try{n=await function(e,t){let n,s,r,i=0;return new Promise(((a,o)=>{n=setInterval((async()=>{try{r=await function(e,t){const{dataset:n}=e.config();return e.request({url:"/addons/mux/uploads/".concat(n,"/").concat(t),withCredentials:!0,method:"GET"})}(e,t)}catch(e){return void o(e)}s=r&&r.data&&r.data.asset_id,s&&(clearInterval(n),a(r)),i>10&&(clearInterval(n),o(new Error("Upload did not finish"))),i++}),2e3)}))}(e,t)}catch(e){return Promise.reject(e)}try{s=await function(e,t){const{dataset:n}=e.config();return e.request({url:"/addons/mux/assets/".concat(n,"/data/").concat(t),withCredentials:!0,method:"GET"})}(e,n.data.asset_id)}catch(e){return Promise.reject(e)}const r={_id:t,_type:"mux.videoAsset",status:s.data.status,data:s.data,assetId:s.data.id,playbackId:s.data.playback_ids[0].id,uploadId:n.data.id};return e.createOrReplace(r).then((()=>r))}function re(e){if("undefined"!=typeof window&&e instanceof window.File){const t=function(e,t){if("undefined"==typeof window||!(t instanceof window.File))return e;return{name:!1===e.preserveFilename?void 0:t.name,type:t.type}}({},e);return M.of(t)}return M.throwError(new Error("Invalid file"))}function ie(e){const t=new Error("Invalid URL");if("string"!=typeof e)return M.throwError(t);let n;try{n=new URL(e)}catch(e){return M.throwError(t)}return n&&!n.protocol.match(/http:|https:/)?M.throwError(t):M.of(e)}function ae(e){const t=Array.from(e.files||[]),n=Array.from(e.items||[]);return t&&t.length>0?Promise.resolve(t):function(e){return Promise.all(e.map((e=>{if("file"===e.kind&&e.webkitGetAsEntry){let t;try{t=e.webkitGetAsEntry()}catch(t){return[e.getAsFile()]}return t?t.isDirectory?oe(t):[e.getAsFile()]:[]}if("file"===e.kind){const t=e.getAsFile();return Promise.resolve(t?[t]:[])}return new Promise((t=>e.getAsString(t))).then((t=>t?[new File([t],"unknown.txt",{type:e.type})]:[]))})))}(n).then((e=>e.flat()))}function oe(e){if(function(e){return e.isFile}(e))return new Promise((t=>e.file(t))).then((e=>[e]));if(function(e){return e.isDirectory}(e)){const t=e.createReader();return new Promise((e=>t.readEntries(e))).then((e=>e.filter((e=>!e.name.startsWith("."))))).then((e=>Promise.all(e.map(oe)).then((e=>e.flat()))))}return Promise.resolve([])}function le(e){const{asset:t}=e,n=O.useId(),[s,r]=O.useState(),[i,a]=O.useState(!1),[o,l]=O.useState(null),d=O.useCallback((()=>r("confirm-delete")),[]),c=O.useCallback((()=>{r(!1),a(!0)}),[r]),u=O.useCallback((()=>{r(!1),a(!1)}),[r]);return O.useEffect((()=>{i&&s&&a(!1)}),[s,i]),R.useClickOutside(O.useCallback((()=>a(!1)),[]),[o]),P.jsxs(P.Fragment,{children:[P.jsx(R.MenuButton,{id:"".concat(n,"-asset-menu"),button:P.jsx(R.Button,{icon:B.EllipsisVerticalIcon,mode:"ghost",onClick:c,padding:2}),menu:P.jsx(R.Menu,{ref:l,children:P.jsx(R.MenuItem,{tone:"critical",icon:B.TrashIcon,text:"Delete",onClick:d})}),portal:!0,placement:"right"}),"confirm-delete"===s&&P.jsx(de,{asset:t,onClose:u})]})}function de(e){const{asset:t,onClose:n}=e,s=I.useClient(),{push:r}=R.useToast(),[i,a]=O.useState(!1),[o,l]=O.useState(!1),d=O.useId(),c=200*q.getDevicePixelRatio({maxDpr:2}),u=O.useCallback((async()=>{var e,i,l;a(!0);try{(null==t?void 0:t._id)&&await s.delete(t._id),o&&(null==t?void 0:t.assetId)&&await Q(s,t.assetId),null==(l=null==(i=null==(e=document.querySelector('[data-id="'.concat(t._id,'"]')))?void 0:e.parentElement)?void 0:i.setAttribute)||l.call(i,"hidden","true")}catch(e){console.error("Failed during delete",e),r({closable:!0,description:null==e?void 0:e.message,duration:5e3,title:"Uncaught error",status:"error"})}finally{a(!1),n()}}),[t._id,t.assetId,s,o,n,r]);return P.jsx(R.Dialog,{onClose:n,id:"".concat(d,"-confirm-delete"),header:"Delete video",footer:P.jsxs(R.Grid,{padding:2,gap:2,columns:2,children:[P.jsx(R.Button,{mode:"bleed",text:"Cancel",onClick:n}),P.jsx(R.Button,{text:"Delete",tone:"critical",icon:B.TrashIcon,onClick:u,loading:i})]}),width:1,children:P.jsx(R.Stack,{paddingX:0,paddingY:0,space:1,children:P.jsx(R.Card,{paddingX:[2,3,4],paddingY:[3,3,3,4],children:P.jsxs(R.Grid,{columns:3,gap:3,children:[P.jsx(R.Flex,{style:{gridColumn:"span 2"},align:"center",children:P.jsx(R.Box,{padding:4,children:P.jsxs(R.Stack,{space:4,children:[P.jsxs(R.Flex,{align:"center",as:"label",children:[P.jsx(R.Checkbox,{checked:o,onChange:()=>l((e=>!e))}),P.jsx(R.Text,{style:{margin:"0 10px"},children:"Delete asset on Mux"})]}),P.jsxs(R.Flex,{align:"center",as:"label",children:[P.jsx(R.Checkbox,{disabled:!0,checked:!0}),P.jsx(R.Text,{style:{margin:"0 10px"},children:"Delete video from dataset"})]})]})})}),P.jsx(I.VideoThumbnail,{asset:t,width:c,showTip:!0})]})})})})}function ce(e){let{assets:t,isLoading:n,isLastPage:s,onSelect:r,onLoadMore:i}=e;const a=O.useCallback((e=>r(e.currentTarget.dataset.id)),[r]),o=O.useCallback((e=>{"Enter"===e.key&&r(e.currentTarget.dataset.id)}),[r]),l=200*q.getDevicePixelRatio({maxDpr:2});return P.jsxs(P.Fragment,{children:[P.jsxs(R.Box,{padding:4,children:[P.jsx(I.ThumbGrid,{gap:2,children:t.map((e=>P.jsx(ue,{asset:e,onClick:a,onKeyPress:o,width:l},e._id)))}),n&&0===t.length&&P.jsx(R.Flex,{justify:"center",children:P.jsx(R.Spinner,{muted:!0})}),!n&&0===t.length&&P.jsx(R.Text,{align:"center",muted:!0,children:"No videos"})]}),t.length>0&&!s&&P.jsx(I.CardLoadMore,{tone:"default",padding:4,children:P.jsx(R.Flex,{direction:"column",children:P.jsx(R.Button,{type:"button",icon:B.DownloadIcon,loading:n,onClick:i,text:"Load more",tone:"primary"})})})]})}const ue=O.memo((e=>{let{asset:t,onClick:n,onKeyPress:s,width:r}=e;const[i,a]=O.useState(null),o=O.useRef(null);return O.useLayoutEffect((()=>{o.current&&null!==i&&(i?K.animate(o.current,{opacity:1}):K.animate(o.current,{opacity:0}))}),[i]),P.jsxs(R.Box,{height:"fill",style:{position:"relative"},children:[P.jsxs(R.Card,{as:"button","data-id":t._id,onClick:n,onKeyPress:s,tabIndex:0,radius:2,padding:1,style:{lineHeight:0,position:"relative"},__unstable_focusRing:!0,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1),children:[P.jsx(I.VideoThumbnail,{asset:t,width:r,showTip:!0}),(null==t?void 0:t.playbackId)&&P.jsx(pe,{tone:"transparent",ref:o,margin:1,radius:1,children:null!==i&&P.jsx(I.AnimatedVideoThumbnail,{asset:t,width:r})})]}),P.jsx(he,{children:P.jsx(le,{asset:t})})]})})),pe=X.default(R.Card)(n||(n=w(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  will-change: opacity;\n  background: transparent;\n  background-color: hsl(0deg 0% 0% / 33%);\n  opacity: 0;\n  pointer-events: none;\n"]))),he=X.default.div(s||(s=w(["\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 300;\n  opacity: 0;\n  top: 7px;\n  right: 7px;\n\n  button:hover + &,\n  button:focus-visible + &,\n  &:hover,\n  &:focus-visible {\n    opacity: 1;\n  }\n"])));function ge(e){let{asset:t,onChange:n,setDialogState:s}=e;const r=I.useClient(),i=O.useRef(0),[a,o]=O.useState(!1),[l,d]=O.useState(!1),[c,u]=O.useState([]),p=O.useCallback((e=>{const t=200*e,n=t+200;return d(!0),r.fetch(function(){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:200;return'*[_type == "mux.videoAsset"] | order(_updatedAt desc) ['.concat(arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,"...").concat(e,"]")}(t,n)).then((e=>{o(e.length<200),u((t=>t.concat(e)))})).finally((()=>d(!1)))}),[r]),h=O.useCallback((e=>{const t=c.find((t=>t._id===e));if(!t)throw new TypeError("Failed to find video asset with id: ".concat(e));n(U.PatchEvent.from([U.setIfMissing({asset:{}}),U.set({_type:"reference",_weak:!0,_ref:t._id},["asset"])])),s(!1)}),[c,n,s]),g=O.useCallback((()=>{p(++i.current)}),[p]);return O.useEffect((()=>{p(i.current)}),[p]),P.jsx(ce,{onSelect:h,assets:c,isLastPage:a,isLoading:l,onLoadMore:g})}function fe(e){let{setDialogState:t,asset:n,onChange:s}=e;const r="InputBrowser".concat(O.useId()),i=O.useCallback((()=>t(!1)),[t]);return P.jsx(R.Dialog,{scheme:"dark",__unstable_autoFocus:!0,header:"Select video",id:r,onClose:i,width:2,children:P.jsx(ge,{asset:n,onChange:s,setDialogState:t})})}function xe(e){let{asset:t,getCurrentTime:n,setDialogState:s}=e;const r=I.useClient(),i="EditThumbnailDialog".concat(O.useId()),a=O.useMemo((()=>n()),[n]),o=O.useMemo((()=>C(C({},t),{},{thumbTime:a})),[t,a]),[l,d]=O.useState(!1),[c,u]=O.useState(null),p=O.useCallback((()=>{d(!0),r.patch(t._id).set({thumbTime:a}).commit({returnDocuments:!1}).then((()=>{s(!1)})).catch(u).finally((()=>{d(!1)}))}),[r,t._id,a,s]),h=300*q.getDevicePixelRatio({maxDpr:2});if(c)throw c;return P.jsx(R.Dialog,{id:i,header:"Edit thumbnail",onClose:()=>s(!1),footer:P.jsx(R.Stack,{padding:3,children:P.jsx(R.Button,{mode:"ghost",tone:"primary",loading:l,onClick:p,text:"Set new thumbnail"},"thumbnail")}),children:P.jsxs(R.Stack,{space:3,padding:3,children:[P.jsxs(R.Stack,{space:2,children:[P.jsx(R.Text,{size:1,weight:"semibold",children:"Current:"}),P.jsx(I.VideoThumbnail,{asset:t,width:h})]}),P.jsxs(R.Stack,{space:2,children:[P.jsx(R.Text,{size:1,weight:"semibold",children:"New:"}),P.jsx(I.VideoThumbnail,{asset:o,width:h})]})]})})}const me=X.default(R.Card)(r||(r=w(["\n  position: relative;\n  min-height: 150px;\n  aspect-ratio: 16 / 9;\n  overflow: hidden;\n  border-radius: 1px;\n  media-airplay-button[media-airplay-unavailable] {\n    display: none;\n  }\n  media-volume-range[media-volume-unavailable] {\n    display: none;\n  }\n  media-pip-button[media-pip-unavailable] {\n    display: none;\n  }\n  media-controller {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-range-track-background-color: rgba(255, 255, 255, 0.5);\n    --media-range-track-border-radius: 3px;\n    width: 100%;\n    height: 100%;\n    background-color: transparent;\n  }\n  media-control-bar {\n    --media-button-icon-width: 18px;\n    --media-preview-time-margin: 0px;\n  }\n  media-control-bar:not([slot]) :is([role='button'], [role='switch'], button) {\n    height: 44px;\n  }\n  .size-extra-small media-control-bar [role='button'],\n  .size-extra-small media-control-bar [role='switch'] {\n    height: auto;\n    padding: 4.4% 3.2%;\n  }\n  .mxp-spacer {\n    flex-grow: 1;\n    height: 100%;\n    background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));\n  }\n  media-controller::part(vertical-layer) {\n    transition: background-color 1s;\n  }\n  media-controller:is([media-paused], :not([user-inactive]))::part(vertical-layer) {\n    background-color: rgba(0, 0, 0, 0.6);\n    transition: background-color 0.25s;\n  }\n  .mxp-center-controls {\n    --media-background-color: transparent;\n    --media-button-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n  }\n  .mxp-center-controls media-play-button {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    padding: 0;\n    width: max(27px, min(9%, 90px));\n  }\n  .mxp-center-controls media-seek-backward-button,\n  .mxp-center-controls media-seek-forward-button {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    padding: 0;\n    margin: 0 10%;\n    width: min(7%, 70px);\n  }\n  media-loading-indicator {\n    --media-loading-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    position: absolute;\n    width: min(15%, 150px);\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n  }\n  /* Intentionally don't target the div for transition but the children\n of the div. Prevents messing with media-chrome's autohide feature. */\n  media-loading-indicator + div * {\n    transition: opacity 0.15s;\n    opacity: 1;\n  }\n  media-loading-indicator[media-loading]:not([media-paused]) ~ div > * {\n    opacity: 0;\n    transition-delay: 400ms;\n  }\n  media-volume-range {\n    width: min(100%, 100px);\n  }\n  media-time-display {\n    white-space: nowrap;\n  }\n  :is(media-time-display, media-text-display, media-playback-rate-button) {\n    color: inherit;\n  }\n  media-controller:fullscreen media-control-bar[slot='top-chrome'] {\n    /* Hide menus and buttons that trigger modals when in full-screen */\n    display: none;\n  }\n  video {\n    background: transparent;\n  }\n  media-controller:not(:fullscreen) video {\n    aspect-ratio: 16 / 9;\n  }\n  media-controller:not(:-webkit-full-screen) video {\n    aspect-ratio: 16 / 9;\n  }\n"]))),ye=X.default.div(i||(i=w(["\n  && {\n    --media-background-color: transparent;\n    --media-button-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n    media-play-button {\n      --media-control-background: transparent;\n      --media-control-hover-background: transparent;\n      padding: 0;\n      width: max(27px, min(9%, 90px));\n    }\n  }\n"]))),be=X.default(A.MediaControlBar)(a||(a=w(["\n  justify-content: flex-end;\n  button {\n    height: auto;\n  }\n"])));function je(e){let{asset:t}=e;const n=I.useClient(),s=O.useRef(null),r=O.useMemo((()=>I.getPosterSrc({client:n,asset:t,width:1920,height:1080})),[n,t]);return O.useEffect((()=>{var e;if(s.current){const t=document.createElement("style");t.innerHTML="img { object-fit: contain; }",(null==(e=s.current)?void 0:e.shadowRoot)&&s.current.shadowRoot.appendChild(t)}}),[]),P.jsx(A.MediaPosterImage,{ref:s,slot:"poster",src:r})}function ve(e){let{asset:t}=e;const n=I.useClient(),[s]=O.useState((()=>function(e){let{asset:t,client:n}=e;const s=I.getPlaybackId(t),r=new URLSearchParams;if("signed"===I.getPlaybackPolicy(t)){const e=I.generateJwt(n,s,"s");r.set("token",e)}return"https://image.mux.com/".concat(s,"/storyboard.vtt?").concat(r)}({asset:t,client:n})));return P.jsx("track",{label:"thumbnails",default:!0,kind:"metadata",src:s})}const we=X.default(R.Card)(o||(o=w(["\n  min-height: 82px;\n  box-sizing: border-box;\n"]))),ke=X.default(R.Flex)(l||(l=w(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"]))),Ce=X.default(R.Stack)(d||(d=w(["\n  position: relative;\n  width: 60%;\n"]))),Se=X.default(R.Code)(c||(c=w(["\n  position: relative;\n  width: 100%;\n\n  code {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    position: relative;\n    max-width: 200px;\n  }\n"]))),Pe=e=>{let{progress:t=100,onCancel:n,filename:s,text:r="Uploading"}=e;return P.jsx(we,{tone:"primary",padding:4,border:!0,height:"fill",children:P.jsxs(ke,{align:"center",justify:"space-between",height:"fill",direction:"row",gap:2,children:[P.jsxs(Ce,{children:[P.jsx(R.Flex,{justify:"center",gap:[3,3,2,2],direction:["column","column","row"],children:P.jsx(R.Text,{size:1,children:P.jsxs(R.Inline,{space:2,children:[r,P.jsx(Se,{size:1,children:s||"..."})]})})}),P.jsx(R.Card,{marginTop:3,radius:5,shadow:1,children:P.jsx(U.LinearProgress,{value:t})})]}),n?P.jsx(R.Button,{fontSize:2,text:"Cancel upload",mode:"ghost",tone:"critical",onClick:n}):null]})})},Oe=e=>{let{asset:t,buttons:n,readOnly:s,onChange:r,dialogState:i,setDialogState:a}=e;var o,l,d,c;const u=I.useClient(),p=O.useMemo((()=>"preparing"===(null==t?void 0:t.status)?"Preparing the video":"waiting_for_upload"===(null==t?void 0:t.status)?"Waiting for upload to start":"waiting"===(null==t?void 0:t.status)?"Processing upload":"ready"!==(null==t?void 0:t.status)&&void 0!==(null==t?void 0:t.status)),[t]),h=O.useMemo((()=>{var e,n,s,r;return"preparing"===(null==(n=null==(e=null==t?void 0:t.data)?void 0:e.static_renditions)?void 0:n.status)||(null==(r=null==(s=null==t?void 0:t.data)?void 0:s.static_renditions)||r.status,!1)}),[null==(l=null==(o=null==t?void 0:t.data)?void 0:o.static_renditions)?void 0:l.status]),g=O.useMemo((()=>t.playbackId&&function(e){let{asset:t,client:n}=e;const s=I.getPlaybackId(t),r=new URLSearchParams;if("signed"===I.getPlaybackPolicy(t)){const e=I.generateJwt(n,s,"v");r.set("token",e)}return"https://stream.mux.com/".concat(s,".m3u8?").concat(r)}({client:u,asset:t})),[t,u]),[f,x]=O.useState(null),m=O.useCallback((e=>x(e.currentTarget.error)),[]),y=O.useRef(null),b=O.useRef(null),j=O.useRef(null),v=O.useCallback((()=>{var e,t;return null!=(t=null==(e=j.current)?void 0:e.currentTime)?t:0}),[j]),w=((e,t)=>{const n=I.useClient();return O.useCallback((()=>{e&&(t(U.PatchEvent.from(U.unset())),e.assetId&&Q(n,e.assetId),e._id&&n.delete(e._id))}),[e,n,t])})(t,r);O.useEffect((()=>{var e,t;const n=document.createElement("style");n.innerHTML="button svg { vertical-align: middle; }",(null==(e=y.current)?void 0:e.shadowRoot)&&y.current.shadowRoot.appendChild(n),(null==(t=null==b?void 0:b.current)?void 0:t.shadowRoot)&&b.current.shadowRoot.appendChild(n.cloneNode(!0))}),[]);const[k]=O.useState((()=>L.generatePlayerInitTime())),C=O.useRef(void 0);if(O.useEffect((()=>{if(p||!g)return;const e=L.initialize({src:g,playerInitTime:k,playerSoftwareName:"sanity-plugin-mux-input",playerSoftwareVersion:"dev-preview"},j.current,C.current);C.current=e}),[g,p,k]),O.useEffect((()=>{var e,n,s;if("errored"===(null==t?void 0:t.status))throw w(),new Error(null==(s=null==(n=null==(e=t.data)?void 0:e.errors)?void 0:n.messages)?void 0:s.join(" "))}),[null==(c=null==(d=t.data)?void 0:d.errors)?void 0:c.messages,null==t?void 0:t.status,w]),f)throw f;return t&&t.status?p?P.jsx(Pe,{progress:100,filename:null==t?void 0:t.filename,text:!0!==p&&p||"Waiting for Mux to complete the file",onCancel:s?void 0:()=>w()}):P.jsxs(P.Fragment,{children:[P.jsxs(me,{shadow:1,tone:"transparent",scheme:"dark",children:[P.jsxs(A.MediaController,{children:[P.jsx("video",{playsInline:!0,ref:j,onError:m,slot:"media",preload:"metadata",crossOrigin:"anonomous",children:P.jsx(ve,{asset:t})}),P.jsx(je,{asset:t}),P.jsx(A.MediaLoadingIndicator,{slot:"centered-chrome",noAutoHide:!0}),P.jsx(ye,{slot:"centered-chrome",children:P.jsx(A.MediaPlayButton,{})}),n&&P.jsx(be,{slot:"top-chrome",children:n}),P.jsxs(A.MediaControlBar,{children:[P.jsx(A.MediaMuteButton,{}),P.jsx(A.MediaTimeDisplay,{}),P.jsx(A.MediaTimeRange,{}),P.jsx(A.MediaDurationDisplay,{}),P.jsx(A.MediaFullscreenButton,{})]})]}),h&&P.jsx(R.Card,{padding:2,radius:1,style:{background:"var(--card-fg-color)",position:"absolute",top:"0.5em",left:"0.5em"},children:P.jsx(R.Text,{size:1,style:{color:"var(--card-bg-color)"},children:"MUX is preparing static renditions, please stand by"})})]}),"edit-thumbnail"===i&&P.jsx(xe,{asset:t,getCurrentTime:v,setDialogState:a})]}):null};function Ie(e){return"inset 0 0 0 ".concat(e.width,"px ").concat(e.color)}function Ue(e){const{base:t,border:n,focusRing:s}=e,r=s.offset+s.width,i=0-s.offset,a=t?t.bg:"var(--card-bg-color)";return[i>0&&"inset 0 0 0 ".concat(i,"px var(--card-focus-ring-color)"),n&&Ie(n),i<0&&"0 0 0 ".concat(0-i,"px ").concat(a),r>0&&"0 0 0 ".concat(r,"px var(--card-focus-ring-color)")].filter(Boolean).join(",")}const De=X.default(R.MenuItem)((e=>{let{theme:t}=e;const{focusRing:n}=t.sanity,s=t.sanity.color.base;return z.css(u||(u=w(["\n    position: relative;\n\n    &:not([data-disabled='true']) {\n      &:focus-within {\n        box-shadow: ",";\n      }\n    }\n\n    & input {\n      overflow: hidden;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      min-width: 0;\n      display: block;\n      appearance: none;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      opacity: 0;\n    }\n  "])),Ue({base:s,border:{width:1,color:"var(--card-border-color)"},focusRing:n}))})),Te=Y.default.forwardRef((function(t,n){const{icon:s,id:r,accept:i,capture:a,fontSize:o,multiple:l,onSelect:d,padding:c=3,space:u=3,textAlign:p,text:h,disabled:g}=t,f=v(t,e),x=O.useId(),m=r||x,y=Y.default.useCallback((e=>{d&&e.target.files&&d(Array.from(e.target.files))}),[d]),b=P.jsxs(R.Flex,{align:"center",justify:"flex-start",padding:c,children:[s&&P.jsx(R.Box,{marginRight:h?u:void 0,children:P.jsxs(R.Text,{size:o,children:[O.isValidElement(s)&&s,V.isValidElementType(s)&&O.createElement(s)]})}),h&&P.jsx(R.Text,{align:p,size:o,textOverflow:"ellipsis",children:h})]});return P.jsxs(De,C(C({},f),{},{htmlFor:m,padding:0,fontSize:2,disabled:g,ref:n,children:[b,P.jsx("input",{"data-testid":"file-button-input",accept:i,capture:a,id:m,multiple:l,onChange:y,type:"file",value:"",disabled:g})]}))})),Me=X.default(R.Card)(p||(p=w(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0.6;\n  mix-blend-mode: screen;\n  background: transparent;\n"]))),Ee=X.default(R.Button)(h||(h=w(["\n  background: transparent;\n  color: white;\n"])));var _e=O.memo((function(e){const{asset:t,readOnly:n,dialogState:s,setDialogState:r,onChange:i,onUpload:a}=e,[o,l]=O.useState(!1),[d,c]=O.useState(null),u=O.useMemo((()=>"signed"===I.getPlaybackPolicy(t)),[t]),p=O.useCallback((()=>i(U.PatchEvent.from(U.unset([])))),[i]);return O.useEffect((()=>{o&&s&&l(!1)}),[s,o]),R.useClickOutside(O.useCallback((()=>l(!1)),[]),[d]),P.jsxs(R.Inline,{space:1,padding:2,children:[u&&P.jsx(R.Tooltip,{content:P.jsx(R.Box,{padding:2,children:P.jsx(R.Text,{muted:!0,size:1,children:"Signed playback policy"})}),placement:"right",portal:!0,children:P.jsx(Me,{radius:2,margin:2,scheme:"dark",tone:"positive",children:P.jsx(Ee,{icon:B.LockIcon,mode:"bleed",tone:"positive"})})}),!n&&P.jsx(R.Button,{icon:B.EditIcon,mode:"ghost",onClick:()=>r("edit-thumbnail")}),P.jsx(R.Popover,{content:P.jsxs(R.Menu,{ref:c,children:[P.jsx(R.Box,{padding:2,children:P.jsx(R.Label,{muted:!0,size:1,children:"Replace"})}),P.jsx(Te,{accept:"video/*",icon:B.UploadIcon,mode:"bleed",onSelect:a,text:"Upload",disabled:n,fontSize:2}),P.jsx(R.MenuItem,{icon:B.SearchIcon,text:"Browse",onClick:()=>r("select-video")}),P.jsx(R.MenuDivider,{}),P.jsx(R.MenuItem,{icon:B.PlugIcon,text:"Configure API",onClick:()=>r("secrets")}),P.jsx(R.MenuDivider,{}),P.jsx(R.MenuItem,{tone:"critical",icon:B.ResetIcon,text:"Clear field",onClick:p,disabled:n})]}),portal:!0,open:o,children:P.jsx(R.Button,{icon:B.EllipsisVerticalIcon,mode:"ghost",onClick:()=>{r(!1),l(!0)}})})]})}));const Fe=(Re=R.Card,X.default(Re)((e=>{const t={width:e.$border?1:0,color:"var(--card-border-color)"};return z.css(g||(g=w(["\n        --card-focus-box-shadow: ",";\n\n        border-radius: ",";\n        outline: none;\n        box-shadow: var(--card-focus-box-shadow);\n\n        &:focus {\n          --card-focus-box-shadow: ",";\n        }\n      "])),Ie(t),R.rem(e.theme.sanity.radius[1]),Ue({base:e.theme.sanity.color.base,border:t,focusRing:e.theme.sanity.focusRing}))})));var Re;const Be=O.forwardRef(((e,t)=>{let{children:n,tone:s,onPaste:r,onDrop:i,onDragEnter:a,onDragLeave:o,onDragOver:l}=e;const d=O.useRef(!1),c=O.useRef(null),u=O.useCallback((e=>{17!=e.keyCode&&91!=e.keyCode||(d.current=!0);d.current&&86==e.keyCode&&c.current.focus()}),[]),p=O.useCallback((e=>{17!=e.keyCode&&91!=e.keyCode||(d.current=!1)}),[]);return P.jsxs(Fe,{tone:s,height:"fill",ref:t,padding:0,radius:2,shadow:0,tabIndex:0,onKeyDown:u,onKeyUp:p,onPaste:r,onDrop:i,onDragEnter:a,onDragLeave:o,onDragOver:l,children:[P.jsx(Ke,{ref:c,onPaste:r}),n]})})),Ke=X.default.input.attrs({type:"text"})(f||(f=w(["\n  position: absolute;\n  border: 0;\n  color: white;\n  opacity: 0;\n\n  &:focus {\n    outline: none;\n  }\n"]))),ze=X.default.input(x||(x=w(["\n  overflow: hidden;\n  width: 0.1px;\n  height: 0.1px;\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n"]))),qe=X.default.label(m||(m=w(["\n  position: relative;\n"]))),Le=e=>{let{onSelect:n}=e,s=v(e,t);const r="FileSelect".concat(O.useId()),i=O.useRef(null),a=O.useCallback((e=>{n&&n(e.target.files)}),[n]),o=O.useCallback((()=>{var e;return null==(e=i.current)?void 0:e.click()}),[]);return P.jsxs(qe,{htmlFor:r,children:[P.jsx(ze,{accept:"video/*",ref:i,tabIndex:0,type:"file",id:r,onChange:a,value:""}),P.jsx(R.Button,C({onClick:o,mode:"default",tone:"primary",style:{width:"100%"}},s))]})},Ae=X.default(R.Card)(y||(y=w(["\n  && {\n    border-style: dashed;\n  }\n"]))),Ve=X.default(R.Box)(b||(b=w(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));function Ge(e){const{setDialogState:t,readOnly:n,onSelect:s,hovering:r,needsSetup:i}=e,a=O.useCallback((()=>t("select-video")),[t]),o=O.useCallback((()=>t("secrets")),[t]);return P.jsx(R.Box,{style:{padding:1,position:"relative"},height:"stretch",children:P.jsxs(Ae,{sizing:"border",height:"fill",tone:n?"transparent":"inherit",border:!0,padding:3,style:r?{borderColor:"transparent"}:void 0,children:[P.jsx(Ve,{padding:3,children:P.jsx(R.Button,{padding:3,radius:3,tone:i?"critical":void 0,onClick:o,icon:B.PlugIcon,mode:"bleed"})}),P.jsxs(R.Flex,{align:"center",justify:"space-between",gap:4,direction:["column","column","row"],paddingY:[2,2,0],sizing:"border",height:"fill",children:[P.jsxs(R.Flex,{align:"center",justify:"center",gap:2,flex:1,children:[P.jsx(R.Flex,{justify:"center",children:P.jsx(R.Text,{muted:!0,children:P.jsx(B.DocumentVideoIcon,{})})}),P.jsx(R.Flex,{justify:"center",children:P.jsx(R.Text,{size:1,muted:!0,children:"Drag video or paste URL here"})})]}),P.jsxs(R.Inline,{space:2,children:[P.jsx(Le,{mode:"ghost",tone:"default",icon:B.UploadIcon,text:"Upload",onSelect:s}),P.jsx(R.Button,{mode:"ghost",icon:B.SearchIcon,text:"Select",onClick:a})]})]})]})})}class He extends O.Component{constructor(){super(...arguments),this.state={isDraggingOver:!1,invalidPaste:!1,invalidFile:!1,uploadProgress:null,fileInfo:null,uuid:null,error:null,url:null},this.dragEnteredEls=[],this.ctrlDown=!1,this.upload=null,this.container=Y.default.createRef(),this.handleProgress=e=>{this.setState({uploadProgress:e.percent})},this.onUpload=e=>{this.setState({uploadProgress:0,fileInfo:null,uuid:null}),this.upload=function(e,t,n){let s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};return re(n).pipe(E.switchMap((r=>M.concat(M.of({type:"file",file:r}),te(t).pipe(E.switchMap((r=>{if(!r||!r.status)return M.throwError(new Error("Invalid credentials"));const i=_.uuid(),{enableSignedUrls:a}=s,o={mp4_support:e.mp4_support,playback_policy:[a?"signed":"public"]};return M.concat(M.of({type:"uuid",uuid:i}),M.defer((()=>t.observable.request({url:"/addons/mux/uploads/".concat(t.clientConfig.dataset),withCredentials:!0,method:"POST",headers:{"MUX-Proxy-UUID":i,"Content-Type":"application/json"},body:o}))).pipe(E.mergeMap((e=>$(i,e.upload.url,n).pipe(E.mergeMap((e=>"success"!==e.type?M.of(e):M.from(se(t,i)).pipe(E.mergeMap((t=>M.of(C(C({},e),{},{asset:t}))))))),E.catchError((e=>ne(t,i).pipe(E.mergeMapTo(M.throwError(e))))))))))})))))))}(this.props.config,this.props.client,e[0],{enableSignedUrls:this.props.secrets.enableSignedUrls}).pipe(E.takeUntil(this.onCancelUploadButtonClick$.pipe(E.tap((()=>{this.state.uuid&&this.props.client.delete(this.state.uuid)}))))).subscribe({complete:()=>{this.setState({error:null,uploadProgress:null,uuid:null})},next:e=>{this.handleUploadEvent(e)},error:e=>{this.setState({error:e,uploadProgress:null,uuid:null})}})},this.handleUploadEvent=e=>{switch(e.type){case"success":return this.handleUploadSuccess(e.asset);case"progress":return this.handleProgress(e);case"file":return this.setState({fileInfo:e.file});case"uuid":return this.setState({uuid:e.uuid});case"url":return this.setState({url:e.url,uploadProgress:100});default:return null}},this.handleUploadSuccess=e=>{this.setState({uploadProgress:100}),this.props.onChange(U.PatchEvent.from([U.setIfMissing({asset:{}}),U.set({_type:"reference",_weak:!0,_ref:e._id},["asset"])]))},this.handlePaste=e=>{const t=(e.clipboardData||window.clipboardData).getData("text"),n={enableSignedUrls:this.props.secrets.enableSignedUrls};this.upload=function(e,t,n){let s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};return ie(n).pipe(E.switchMap((n=>M.concat(M.of({type:"url",url:n}),te(t).pipe(E.switchMap((r=>{if(!r||!r.status)return M.throwError(new Error("Invalid credentials"));const i=_.uuid(),{enableSignedUrls:a}=s,o={input:n,playback_policy:[a?"signed":"public"],mp4_support:e.mp4_support},l={muxBody:JSON.stringify(o),filename:n.split("/").slice(-1)[0]},d=t.clientConfig.dataset;return M.defer((()=>t.observable.request({url:"/addons/mux/assets/".concat(d),withCredentials:!0,method:"POST",headers:{"MUX-Proxy-UUID":i,"Content-Type":"application/json"},query:l}))).pipe(E.mergeMap((e=>{const t=e&&e.results&&e.results[0]&&e.results[0].document||null;return t?M.of({type:"success",id:i,asset:t}):M.throwError(new Error("No asset document returned"))})))})))))))}(this.props.config,this.props.client,t,n).subscribe({complete:()=>{this.setState({error:null,uploadProgress:null,url:null})},next:e=>{this.handleUploadEvent(e)},error:e=>{let t;e.message.toLowerCase().match("invalid url")||(t=e),this.setState({invalidPaste:!0,error:t},(()=>{setTimeout((()=>{this.setState({invalidPaste:!1,uploadProgress:null})}),2e3)}))}})},this.handleDrop=e=>{this.setState({isDraggingOver:!1}),e.preventDefault(),e.stopPropagation(),ae(e.nativeEvent.dataTransfer).then((e=>{e&&this.onUpload(e)}))},this.handleDragOver=e=>{e.preventDefault(),e.stopPropagation()},this.handleDragEnter=e=>{var t,n;e.stopPropagation(),this.dragEnteredEls.push(e.target),this.setState({isDraggingOver:!0});const s=null==(n=null==(t=e.dataTransfer.items)?void 0:t[0])?void 0:n.type;this.setState({invalidFile:!s.startsWith("video/")})},this.handleDragLeave=e=>{e.stopPropagation();const t=this.dragEnteredEls.indexOf(e.target);t>-1&&this.dragEnteredEls.splice(t,1),0===this.dragEnteredEls.length&&this.setState({isDraggingOver:!1})}}componentWillUnmount(){this.unSubscribeToUpload()}componentDidMount(){const e=new M.Subject;this.onCancelUploadButtonClick$=e.asObservable(),this.handleCancelUploadButtonClick=t=>e.next(t)}unSubscribeToUpload(){this.upload&&!this.upload.closed&&this.upload.unsubscribe()}render(){var e;if(null!==this.state.uploadProgress)return P.jsx(Pe,{onCancel:this.handleCancelUploadButtonClick,progress:this.state.uploadProgress,filename:(null==(e=this.state.fileInfo)?void 0:e.name)||this.state.url});if(this.state.error)throw this.state.error;return P.jsxs(P.Fragment,{children:[P.jsx(Be,{tone:this.state.isDraggingOver&&(this.state.invalidPaste||this.state.invalidFile)?"critical":this.state.isDraggingOver?"positive":void 0,onDrop:this.handleDrop,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDragEnter:this.handleDragEnter,onPaste:this.handlePaste,ref:this.container,children:this.props.asset?P.jsx(Oe,{readOnly:this.props.readOnly,asset:this.props.asset,onChange:this.props.onChange,dialogState:this.props.dialogState,setDialogState:this.props.setDialogState,buttons:P.jsx(_e,{asset:this.props.asset,dialogState:this.props.dialogState,setDialogState:this.props.setDialogState,onChange:this.props.onChange,onUpload:this.onUpload,readOnly:this.props.readOnly})}):P.jsx(Ge,{hovering:this.state.isDraggingOver,onSelect:this.onUpload,readOnly:this.props.readOnly,setDialogState:this.props.setDialogState,needsSetup:this.props.needsSetup})}),"select-video"===this.props.dialogState&&P.jsx(fe,{asset:this.props.asset,onChange:this.props.onChange,setDialogState:this.props.setDialogState})]})}}const Ne=(e,t)=>O.useCallback((async n=>{let{token:s,secretKey:r,enableSignedUrls:i}=n,{signingKeyId:a,signingKeyPrivate:o}=t;try{await ee(e,s,r,i,a,o);const t=await function(e){const{dataset:t}=e.config();return e.request({url:"/addons/mux/secrets/".concat(t,"/test"),withCredentials:!0,method:"GET"})}(e);if(!(null==t?void 0:t.status)&&s&&r)throw new Error("Invalid secrets")}catch(e){throw console.error("Error while trying to save secrets:",e),e}if(i){const t=await async function(e,t,n){if(!t||!n)return!1;const{dataset:s}=e.config();try{const n=await e.request({url:"/addons/mux/signing-keys/".concat(s,"/").concat(t),withCredentials:!0,method:"GET"});return!(!n.data||!n.data.id)}catch(e){return console.error("Error fetching signingKeyId",t,"assuming it is not valid"),!1}}(e,a,o);if(!t)try{const{data:t}=await function(e){const{dataset:t}=e.config();return e.request({url:"/addons/mux/signing-keys/".concat(t),withCredentials:!0,method:"POST"})}(e);a=t.id,o=t.private_key,await ee(e,s,r,i,a,o)}catch(e){throw console.log("Error while creating and saving signing key:",null==e?void 0:e.message),e}}return{token:s,secretKey:r,enableSignedUrls:i,signingKeyId:a,signingKeyPrivate:o}}),[e,t]);function Ye(e){let{token:t,secretKey:n,enableSignedUrls:s}=e;return{submitting:!1,error:null,token:null!=t?t:"",secretKey:null!=n?n:"",enableSignedUrls:null!=s&&s}}function Ze(e,t){switch(null==t?void 0:t.type){case"submit":return C(C({},e),{},{submitting:!0,error:null});case"error":return C(C({},e),{},{submitting:!1,error:t.payload});case"reset":return Ye(t.payload);case"change":return C(C({},e),{},{[t.payload.name]:t.payload.value});default:throw new Error("Unknown action type: ".concat(null==t?void 0:t.type))}}const We=["title","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r"];function Xe(e){let{height:t=26}=e;const n=O.useId(),[s,r,i,a,o,l,d,c,u,p,h,g,f,x,m,y,b,j,v]=O.useMemo((()=>We.map((e=>"".concat(n,"-").concat(e)))),[n]);return P.jsxs("svg",{"aria-labelledby":s,role:"img",xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",viewBox:"92.08878326416016 102.66712188720703 692.76123046875 219.99948120117188",style:{height:"".concat(t,"px")},children:[P.jsx("title",{id:s,children:"Mux Logo"}),P.jsxs("defs",{children:[P.jsxs("linearGradient",{id:a,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:o,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:c,spreadMethod:"pad",gradientTransform:"rotate(180 296.075 79.75) scale(524.84045)",gradientUnits:"userSpaceOnUse",y2:0,x2:1,y1:0,x1:0,children:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:p,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:h,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:g,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:f,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:x,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:b,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:j,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:v,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsx("clipPath",{id:r,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M0 319h657.706V0H0Z"})}),P.jsx("clipPath",{id:i,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M423.64 242h164.999V77H423.64Z"})}),P.jsx("clipPath",{id:l,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M0 319h657.706V0H0Z"})}),P.jsx("clipPath",{id:d,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M311.3 242h93.031V77H311.3Z"})}),P.jsx("clipPath",{id:u,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M198.96 242h35.106V77H198.96Z"})}),P.jsx("clipPath",{id:m,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M0 319h657.706V0H0Z"})}),P.jsx("clipPath",{id:y,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M69.067 242H169.12V141.947H69.067Z"})})]}),P.jsx("g",{clipPath:"url(#".concat(r,")"),transform:"matrix(1.33333 0 0 -1.33333 0 425.333)",children:P.jsx("g",{style:{opacity:.69999701},clipPath:"url(#".concat(i,")"),children:P.jsx("path",{style:{fill:"url(#".concat(a,")"),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"})})}),P.jsx("path",{style:{fill:"url(#".concat(o,")"),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)"}),P.jsxs("g",{clipPath:"url(#".concat(l,")"),transform:"matrix(1.33333 0 0 -1.33333 0 425.333)",children:[P.jsx("g",{style:{opacity:.69999701},clipPath:"url(#".concat(d,")"),children:P.jsx("path",{style:{fill:"url(#".concat(c,")"),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"})}),P.jsx("g",{style:{opacity:.69999701},clipPath:"url(#".concat(u,")"),children:P.jsx("path",{style:{fill:"url(#".concat(p,")"),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"})})]}),P.jsx("path",{style:{fill:"url(#".concat(h,")"),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)"}),P.jsx("path",{style:{fill:"url(#".concat(g,")"),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)"}),P.jsx("path",{style:{fill:"url(#".concat(f,")"),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)"}),P.jsx("path",{style:{fill:"url(#".concat(x,")"),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)"}),P.jsx("g",{clipPath:"url(#".concat(m,")"),transform:"matrix(1.33333 0 0 -1.33333 0 425.333)",children:P.jsx("g",{style:{opacity:.69999701},clipPath:"url(#".concat(y,")"),children:P.jsx("path",{style:{fill:"url(#".concat(b,")"),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"})})}),P.jsx("path",{style:{fill:"url(#".concat(j,")"),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)"}),P.jsx("path",{style:{fill:"url(#".concat(v,")"),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)"})]})}const Je=X.default.span(j||(j=w(["\n  display: inline-block;\n  height: 0.8em;\n  margin-right: 1em;\n  transform: translate(0.3em, -0.2em);\n"]))),$e=()=>P.jsxs(P.Fragment,{children:[P.jsx(Je,{children:P.jsx(Xe,{height:13})}),"API Credentials"]});var Qe=O.memo((function(e){const{children:t,title:n,description:s,inputId:r}=e;return P.jsxs(R.Stack,{space:1,children:[P.jsx(R.Flex,{align:"flex-end",children:P.jsx(R.Box,{flex:1,paddingY:2,children:P.jsx(R.Stack,{space:2,children:P.jsxs(R.Flex,{children:[P.jsx(R.Text,{as:"label",htmlFor:r,weight:"semibold",size:1,children:n||P.jsx("em",{children:"Untitled"})}),s&&P.jsx(R.Text,{muted:!0,size:1,children:s})]})})})}),P.jsx("div",{children:t})]})}));const et=["token","secretKey","enableSignedUrls"];var tt=O.memo((function(e){let{secrets:t,setDialogState:n}=e;var s,r;const i=I.useClient(),[a,o]=(e=>O.useReducer(Ze,e,Ye))(t),l=O.useMemo((()=>t.token&&t.secretKey),[t]),d=O.useCallback((()=>n(!1)),[n]),c=O.useMemo((()=>t.token!==a.token||t.secretKey!==a.secretKey||t.enableSignedUrls!==a.enableSignedUrls),[t,a]),u="ConfigureApi".concat(O.useId()),[p,h,g]=O.useMemo((()=>et.map((e=>"".concat(u,"-").concat(e)))),[u]),f=O.useRef(null),x=Ne(i,t),m=O.useRef(!1),y=O.useCallback((e=>{if(e.preventDefault(),!m.current&&e.currentTarget.reportValidity()){m.current=!0,o({type:"submit"});const{token:e,secretKey:t,enableSignedUrls:s}=a;x({token:e,secretKey:t,enableSignedUrls:s}).then((e=>{const{projectId:t,dataset:s}=i.config();G.clear([T.cacheNs,I._id,t,s]),G.preload((()=>Promise.resolve(e)),[T.cacheNs,I._id,t,s]),n(!1)})).catch((e=>o({type:"error",payload:e.message}))).finally((()=>{m.current=!1}))}}),[i,o,x,n,a]),b=O.useCallback((e=>{o({type:"change",payload:{name:"token",value:e.currentTarget.value}})}),[o]),j=O.useCallback((e=>{o({type:"change",payload:{name:"secretKey",value:e.currentTarget.value}})}),[o]),v=O.useCallback((e=>{o({type:"change",payload:{name:"enableSignedUrls",value:e.currentTarget.checked}})}),[o]);return O.useEffect((()=>{f.current&&f.current.focus()}),[f]),P.jsx(R.Dialog,{id:u,onClose:d,header:P.jsx($e,{}),width:0,children:P.jsx(R.Box,{padding:4,style:{position:"relative"},children:P.jsx("form",{onSubmit:y,noValidate:!0,children:P.jsxs(R.Stack,{space:4,children:[!l&&P.jsx(R.Card,{padding:[3,3,3],radius:2,shadow:1,tone:"primary",children:P.jsxs(R.Stack,{space:3,children:[P.jsxs(R.Text,{size:1,children:["To set up a new access token, go to your"," ",P.jsx("a",{href:"https://dashboard.mux.com/settings/access-tokens",target:"_blank",rel:"noreferrer noopener",children:"account on mux.com"}),"."]}),P.jsxs(R.Text,{size:1,children:["The access token needs permissions: ",P.jsx("strong",{children:"Mux Video "}),"(Full Access) and ",P.jsx("strong",{children:"Mux Data"})," (Read)",P.jsx("br",{}),"The credentials will be stored safely in a hidden document only available to editors."]})]})}),P.jsx(Qe,{title:"Access Token",inputId:p,children:P.jsx(R.TextInput,{id:p,ref:f,onChange:b,type:"text",value:null!=(s=a.token)?s:"",required:!!a.secretKey||a.enableSignedUrls})}),P.jsx(Qe,{title:"Secret Key",inputId:h,children:P.jsx(R.TextInput,{id:h,onChange:j,type:"text",value:null!=(r=a.secretKey)?r:"",required:!!a.token||a.enableSignedUrls})}),P.jsxs(R.Stack,{space:4,children:[P.jsxs(R.Flex,{align:"center",children:[P.jsx(R.Checkbox,{id:g,onChange:v,checked:a.enableSignedUrls,style:{display:"block"}}),P.jsx(R.Box,{flex:1,paddingLeft:3,children:P.jsx(R.Text,{children:P.jsx("label",{htmlFor:g,children:"Enable Signed Urls"})})})]}),t.signingKeyId&&a.enableSignedUrls?P.jsx(R.Card,{padding:[3,3,3],radius:2,shadow:1,tone:"caution",children:P.jsxs(R.Stack,{space:3,children:[P.jsx(R.Text,{size:1,children:"The signing key ID that Sanity will use is:"}),P.jsx(R.Code,{size:1,children:t.signingKeyId}),P.jsxs(R.Text,{size:1,children:["This key is only used for previewing content in the Sanity UI.",P.jsx("br",{}),"You should generate a different key to use in your application server."]})]})}):null]}),P.jsxs(R.Inline,{space:2,children:[P.jsx(R.Button,{text:"Save",disabled:!c,loading:a.submitting,tone:"primary",mode:"default",type:"submit"}),P.jsx(R.Button,{disabled:a.submitting,text:"Cancel",mode:"bleed",onClick:d})]}),a.error&&P.jsx(R.Card,{padding:[3,3,3],radius:2,shadow:1,tone:"critical",children:P.jsx(R.Text,{children:a.error})})]})})})})}));function nt(e){const{setDialogState:t}=e,n=O.useCallback((()=>t("secrets")),[t]);return P.jsx(P.Fragment,{children:P.jsx("div",{style:{padding:2},children:P.jsx(R.Card,{display:"flex",sizing:"border",style:{aspectRatio:"16/9",width:"100%",boxShadow:"var(--card-bg-color) 0 0 0 2px"},paddingX:[2,3,4,4],radius:1,tone:"transparent",children:P.jsx(R.Flex,{justify:"flex-start",align:"center",children:P.jsxs(R.Grid,{columns:1,gap:[2,3,4,4],children:[P.jsx(R.Inline,{paddingY:1,children:P.jsx("div",{style:{height:"32px"},children:P.jsx(Xe,{})})}),P.jsx(R.Inline,{paddingY:1,children:P.jsx(R.Heading,{size:[0,1,2,2],children:"Upload and preview videos directly from your studio."})}),P.jsx(R.Inline,{paddingY:1,children:P.jsx(R.Button,{mode:"ghost",icon:B.PlugIcon,text:"Configure API",onClick:n})})]})})})})})}var st=O.memo((e=>{var t;const n=I.useClient(),s=(()=>{const{error:e,isLoading:t,value:n}=U.useDocumentValues(T.muxSecretsDocumentId,J);return{error:e,isLoading:t,value:O.useMemo((()=>{const e=Boolean(n),t={token:(null==n?void 0:n.token)||null,secretKey:(null==n?void 0:n.secretKey)||null,enableSignedUrls:(null==n?void 0:n.enableSignedUrls)||!1,signingKeyId:(null==n?void 0:n.signingKeyId)||null,signingKeyPrivate:(null==n?void 0:n.signingKeyPrivate)||null};return{isInitialSetup:!e,needsSetup:!(null==t?void 0:t.token)||!(null==t?void 0:t.secretKey),secrets:t}}),[n])}})(),r=I.useAssetDocumentValues(null==(t=e.value)?void 0:t.asset),i=(e=>{var t,n;const s=I.useClient(),r=U.useProjectId(),i=U.useDataset(),a=O.useMemo((()=>{var t,n;return!!(null==e?void 0:e.assetId)&&("preparing"===(null==e?void 0:e.status)||"preparing"===(null==(n=null==(t=null==e?void 0:e.data)?void 0:t.static_renditions)?void 0:n.status))}),[null==e?void 0:e.assetId,null==(n=null==(t=null==e?void 0:e.data)?void 0:t.static_renditions)?void 0:n.status,null==e?void 0:e.status]);return Z.default(a?"/".concat(r,"/addons/mux/assets/").concat(i,"/data/").concat(null==e?void 0:e.assetId):null,(async()=>{const{data:t}=await s.request({url:"/addons/mux/assets/".concat(i,"/data/").concat(e.assetId),withCredentials:!0,method:"GET"});s.patch(e._id).set({status:t.status,data:t}).commit({returnDocuments:!1})}),{refreshInterval:2e3,refreshWhenHidden:!0,dedupingInterval:1e3})})(e.readOnly?void 0:(null==r?void 0:r.value)||void 0),[a,o]=O.useState(!1),l=s.error||r.error||i.error;if(l)throw l;const d=s.isLoading||r.isLoading;return P.jsx(P.Fragment,{children:d?P.jsx(T.InputFallback,{}):P.jsxs(P.Fragment,{children:[s.value.needsSetup&&!r.value?P.jsx(nt,{setDialogState:o}):P.jsx(He,C(C({},e),{},{config:e.config,onChange:e.onChange,client:n,secrets:s.value.secrets,asset:r.value,dialogState:a,setDialogState:o,needsSetup:s.value.needsSetup})),"secrets"===a&&P.jsx(tt,{setDialogState:o,secrets:s.value.secrets})]})})}));exports.default=st;
-//# sourceMappingURL=Input-1a203976.js.map
+"use strict";const e=["icon","id","accept","capture","fontSize","multiple","onSelect","padding","space","textAlign","text","disabled"],t=["onSelect"];var n,s,r,i,a,o,l,d,c,u,p,h,g,f,x,m,y,b,j;function v(e,t){if(null==e)return{};var n,s,r=function(e,t){if(null==e)return{};var n,s,r={},i=Object.keys(e);for(s=0;s<i.length;s++)n=i[s],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(s=0;s<i.length;s++)n=i[s],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}function w(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function k(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,s)}return n}function C(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?k(Object(n),!0).forEach((function(t){S(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):k(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function S(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var P=require("react/jsx-runtime"),O=require("react"),I=require("./VideoSource.styled-1b994d90.js"),U=require("sanity"),D=require("swr"),T=require("./index-efe6ce48.js"),M=require("rxjs"),E=require("rxjs/operators"),_=require("@sanity/uuid"),F=require("@mux/upchunk"),R=require("@sanity/ui"),B=require("@sanity/icons"),K=require("motion"),z=require("styled-components"),q=require("use-device-pixel-ratio"),L=require("@mux/playback-core"),A=require("media-chrome/dist/react"),V=require("react-is"),G=require("suspend-react");function H(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function N(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}require("use-error-boundary"),require("scroll-into-view-if-needed");var Y=H(O),Z=H(D),W=N(F),X=H(z);const J=["token","secretKey","enableSignedUrls","signingKeyId","signingKeyPrivate"];function $(e,t,n){return new M.Observable((s=>{const r=W.createUpload({endpoint:t,file:n,dynamicChunkSize:!0});return r.on("success",(()=>{s.next({type:"success",id:e}),s.complete()})),r.on("error",(e=>s.error(new Error(e.detail.message)))),r.on("progress",(e=>s.next({type:"progress",percent:e.detail}))),r.on("offline",(()=>{r.pause(),s.next({type:"pause",id:e})})),r.on("online",(()=>{r.resume(),s.next({type:"resume",id:e})})),()=>r.abort()}))}function Q(e,t){const{dataset:n}=e.config();return e.request({url:"/addons/mux/assets/".concat(n,"/").concat(t),withCredentials:!0,method:"DELETE"})}function ee(e,t,n,s,r,i){const a={_id:"secrets.mux",_type:"mux.apiKey",token:t,secretKey:n,enableSignedUrls:s,signingKeyId:r,signingKeyPrivate:i};return e.createOrReplace(a)}function te(e){const{dataset:t}=e.config();return M.defer((()=>e.observable.request({url:"/addons/mux/secrets/".concat(t,"/test"),withCredentials:!0,method:"GET"})))}function ne(e,t){return e.observable.request({url:"/addons/mux/uploads/".concat(e.clientConfig.dataset,"/").concat(t),withCredentials:!0,method:"DELETE"})}async function se(e,t){let n,s;try{n=await function(e,t){let n,s,r,i=0;return new Promise(((a,o)=>{n=setInterval((async()=>{try{r=await function(e,t){const{dataset:n}=e.config();return e.request({url:"/addons/mux/uploads/".concat(n,"/").concat(t),withCredentials:!0,method:"GET"})}(e,t)}catch(e){return void o(e)}s=r&&r.data&&r.data.asset_id,s&&(clearInterval(n),a(r)),i>10&&(clearInterval(n),o(new Error("Upload did not finish"))),i++}),2e3)}))}(e,t)}catch(e){return Promise.reject(e)}try{s=await function(e,t){const{dataset:n}=e.config();return e.request({url:"/addons/mux/assets/".concat(n,"/data/").concat(t),withCredentials:!0,method:"GET"})}(e,n.data.asset_id)}catch(e){return Promise.reject(e)}const r={_id:t,_type:"mux.videoAsset",status:s.data.status,data:s.data,assetId:s.data.id,playbackId:s.data.playback_ids[0].id,uploadId:n.data.id};return e.createOrReplace(r).then((()=>r))}function re(e){if("undefined"!=typeof window&&e instanceof window.File){const t=function(e,t){if("undefined"==typeof window||!(t instanceof window.File))return e;return{name:!1===e.preserveFilename?void 0:t.name,type:t.type}}({},e);return M.of(t)}return M.throwError(new Error("Invalid file"))}function ie(e){const t=new Error("Invalid URL");if("string"!=typeof e)return M.throwError(t);let n;try{n=new URL(e)}catch(e){return M.throwError(t)}return n&&!n.protocol.match(/http:|https:/)?M.throwError(t):M.of(e)}function ae(e){const t=Array.from(e.files||[]),n=Array.from(e.items||[]);return t&&t.length>0?Promise.resolve(t):function(e){return Promise.all(e.map((e=>{if("file"===e.kind&&e.webkitGetAsEntry){let t;try{t=e.webkitGetAsEntry()}catch(t){return[e.getAsFile()]}return t?t.isDirectory?oe(t):[e.getAsFile()]:[]}if("file"===e.kind){const t=e.getAsFile();return Promise.resolve(t?[t]:[])}return new Promise((t=>e.getAsString(t))).then((t=>t?[new File([t],"unknown.txt",{type:e.type})]:[]))})))}(n).then((e=>e.flat()))}function oe(e){if(function(e){return e.isFile}(e))return new Promise((t=>e.file(t))).then((e=>[e]));if(function(e){return e.isDirectory}(e)){const t=e.createReader();return new Promise((e=>t.readEntries(e))).then((e=>e.filter((e=>!e.name.startsWith("."))))).then((e=>Promise.all(e.map(oe)).then((e=>e.flat()))))}return Promise.resolve([])}function le(e){const{asset:t}=e,n=O.useId(),[s,r]=O.useState(),[i,a]=O.useState(!1),[o,l]=O.useState(null),d=O.useCallback((()=>r("confirm-delete")),[]),c=O.useCallback((()=>{r(!1),a(!0)}),[r]),u=O.useCallback((()=>{r(!1),a(!1)}),[r]);return O.useEffect((()=>{i&&s&&a(!1)}),[s,i]),R.useClickOutside(O.useCallback((()=>a(!1)),[]),[o]),P.jsxs(P.Fragment,{children:[P.jsx(R.MenuButton,{id:"".concat(n,"-asset-menu"),button:P.jsx(R.Button,{icon:B.EllipsisVerticalIcon,mode:"ghost",onClick:c,padding:2}),menu:P.jsx(R.Menu,{ref:l,children:P.jsx(R.MenuItem,{tone:"critical",icon:B.TrashIcon,text:"Delete",onClick:d})}),portal:!0,placement:"right"}),"confirm-delete"===s&&P.jsx(de,{asset:t,onClose:u})]})}function de(e){const{asset:t,onClose:n}=e,s=I.useClient(),{push:r}=R.useToast(),[i,a]=O.useState(!1),[o,l]=O.useState(!1),d=O.useId(),c=200*q.getDevicePixelRatio({maxDpr:2}),u=O.useCallback((async()=>{var e,i,l;a(!0);try{(null==t?void 0:t._id)&&await s.delete(t._id),o&&(null==t?void 0:t.assetId)&&await Q(s,t.assetId),null==(l=null==(i=null==(e=document.querySelector('[data-id="'.concat(t._id,'"]')))?void 0:e.parentElement)?void 0:i.setAttribute)||l.call(i,"hidden","true")}catch(e){console.error("Failed during delete",e),r({closable:!0,description:null==e?void 0:e.message,duration:5e3,title:"Uncaught error",status:"error"})}finally{a(!1),n()}}),[t._id,t.assetId,s,o,n,r]);return P.jsx(R.Dialog,{onClose:n,id:"".concat(d,"-confirm-delete"),header:"Delete video",footer:P.jsxs(R.Grid,{padding:2,gap:2,columns:2,children:[P.jsx(R.Button,{mode:"bleed",text:"Cancel",onClick:n}),P.jsx(R.Button,{text:"Delete",tone:"critical",icon:B.TrashIcon,onClick:u,loading:i})]}),width:1,children:P.jsx(R.Stack,{paddingX:0,paddingY:0,space:1,children:P.jsx(R.Card,{paddingX:[2,3,4],paddingY:[3,3,3,4],children:P.jsxs(R.Grid,{columns:3,gap:3,children:[P.jsx(R.Flex,{style:{gridColumn:"span 2"},align:"center",children:P.jsx(R.Box,{padding:4,children:P.jsxs(R.Stack,{space:4,children:[P.jsxs(R.Flex,{align:"center",as:"label",children:[P.jsx(R.Checkbox,{checked:o,onChange:()=>l((e=>!e))}),P.jsx(R.Text,{style:{margin:"0 10px"},children:"Delete asset on Mux"})]}),P.jsxs(R.Flex,{align:"center",as:"label",children:[P.jsx(R.Checkbox,{disabled:!0,checked:!0}),P.jsx(R.Text,{style:{margin:"0 10px"},children:"Delete video from dataset"})]})]})})}),P.jsx(I.VideoThumbnail,{asset:t,width:c,showTip:!0})]})})})})}function ce(e){let{assets:t,isLoading:n,isLastPage:s,onSelect:r,onLoadMore:i}=e;const a=O.useCallback((e=>r(e.currentTarget.dataset.id)),[r]),o=O.useCallback((e=>{"Enter"===e.key&&r(e.currentTarget.dataset.id)}),[r]),l=200*q.getDevicePixelRatio({maxDpr:2});return P.jsxs(P.Fragment,{children:[P.jsxs(R.Box,{padding:4,children:[P.jsx(I.ThumbGrid,{gap:2,children:t.map((e=>P.jsx(ue,{asset:e,onClick:a,onKeyPress:o,width:l},e._id)))}),n&&0===t.length&&P.jsx(R.Flex,{justify:"center",children:P.jsx(R.Spinner,{muted:!0})}),!n&&0===t.length&&P.jsx(R.Text,{align:"center",muted:!0,children:"No videos"})]}),t.length>0&&!s&&P.jsx(I.CardLoadMore,{tone:"default",padding:4,children:P.jsx(R.Flex,{direction:"column",children:P.jsx(R.Button,{type:"button",icon:B.DownloadIcon,loading:n,onClick:i,text:"Load more",tone:"primary"})})})]})}const ue=O.memo((e=>{let{asset:t,onClick:n,onKeyPress:s,width:r}=e;const[i,a]=O.useState(null),o=O.useRef(null);return O.useLayoutEffect((()=>{o.current&&null!==i&&(i?K.animate(o.current,{opacity:1}):K.animate(o.current,{opacity:0}))}),[i]),P.jsxs(R.Box,{height:"fill",style:{position:"relative"},children:[P.jsxs(R.Card,{as:"button","data-id":t._id,onClick:n,onKeyPress:s,tabIndex:0,radius:2,padding:1,style:{lineHeight:0,position:"relative"},__unstable_focusRing:!0,onMouseEnter:()=>a(!0),onMouseLeave:()=>a(!1),children:[P.jsx(I.VideoThumbnail,{asset:t,width:r,showTip:!0}),(null==t?void 0:t.playbackId)&&P.jsx(pe,{tone:"transparent",ref:o,margin:1,radius:1,children:null!==i&&P.jsx(I.AnimatedVideoThumbnail,{asset:t,width:r})})]}),P.jsx(he,{children:P.jsx(le,{asset:t})})]})})),pe=X.default(R.Card)(n||(n=w(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  will-change: opacity;\n  background: transparent;\n  background-color: hsl(0deg 0% 0% / 33%);\n  opacity: 0;\n  pointer-events: none;\n"]))),he=X.default.div(s||(s=w(["\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 300;\n  opacity: 0;\n  top: 7px;\n  right: 7px;\n\n  button:hover + &,\n  button:focus-visible + &,\n  &:hover,\n  &:focus-visible {\n    opacity: 1;\n  }\n"])));function ge(e){let{asset:t,onChange:n,setDialogState:s}=e;const r=I.useClient(),i=O.useRef(0),[a,o]=O.useState(!1),[l,d]=O.useState(!1),[c,u]=O.useState([]),p=O.useCallback((e=>{const t=200*e,n=t+200;return d(!0),r.fetch(function(){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:200;return'*[_type == "mux.videoAsset"] | order(_updatedAt desc) ['.concat(arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,"...").concat(e,"]")}(t,n)).then((e=>{o(e.length<200),u((t=>t.concat(e)))})).finally((()=>d(!1)))}),[r]),h=O.useCallback((e=>{const t=c.find((t=>t._id===e));if(!t)throw new TypeError("Failed to find video asset with id: ".concat(e));n(U.PatchEvent.from([U.setIfMissing({asset:{}}),U.set({_type:"reference",_weak:!0,_ref:t._id},["asset"])])),s(!1)}),[c,n,s]),g=O.useCallback((()=>{p(++i.current)}),[p]);return O.useEffect((()=>{p(i.current)}),[p]),P.jsx(ce,{onSelect:h,assets:c,isLastPage:a,isLoading:l,onLoadMore:g})}function fe(e){let{setDialogState:t,asset:n,onChange:s}=e;const r="InputBrowser".concat(O.useId()),i=O.useCallback((()=>t(!1)),[t]);return P.jsx(R.Dialog,{scheme:"dark",__unstable_autoFocus:!0,header:"Select video",id:r,onClose:i,width:2,children:P.jsx(ge,{asset:n,onChange:s,setDialogState:t})})}function xe(e){let{asset:t,getCurrentTime:n,setDialogState:s}=e;const r=I.useClient(),i="EditThumbnailDialog".concat(O.useId()),a=O.useMemo((()=>n()),[n]),o=O.useMemo((()=>C(C({},t),{},{thumbTime:a})),[t,a]),[l,d]=O.useState(!1),[c,u]=O.useState(null),p=O.useCallback((()=>{d(!0),r.patch(t._id).set({thumbTime:a}).commit({returnDocuments:!1}).then((()=>{s(!1)})).catch(u).finally((()=>{d(!1)}))}),[r,t._id,a,s]),h=300*q.getDevicePixelRatio({maxDpr:2});if(c)throw c;return P.jsx(R.Dialog,{id:i,header:"Edit thumbnail",onClose:()=>s(!1),footer:P.jsx(R.Stack,{padding:3,children:P.jsx(R.Button,{mode:"ghost",tone:"primary",loading:l,onClick:p,text:"Set new thumbnail"},"thumbnail")}),children:P.jsxs(R.Stack,{space:3,padding:3,children:[P.jsxs(R.Stack,{space:2,children:[P.jsx(R.Text,{size:1,weight:"semibold",children:"Current:"}),P.jsx(I.VideoThumbnail,{asset:t,width:h})]}),P.jsxs(R.Stack,{space:2,children:[P.jsx(R.Text,{size:1,weight:"semibold",children:"New:"}),P.jsx(I.VideoThumbnail,{asset:o,width:h})]})]})})}const me=X.default(R.Card)(r||(r=w(["\n  position: relative;\n  min-height: 150px;\n  aspect-ratio: 16 / 9;\n  overflow: hidden;\n  border-radius: 1px;\n  media-airplay-button[media-airplay-unavailable] {\n    display: none;\n  }\n  media-volume-range[media-volume-unavailable] {\n    display: none;\n  }\n  media-pip-button[media-pip-unavailable] {\n    display: none;\n  }\n  media-controller {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-range-track-background-color: rgba(255, 255, 255, 0.5);\n    --media-range-track-border-radius: 3px;\n    width: 100%;\n    height: 100%;\n    background-color: transparent;\n  }\n  media-control-bar {\n    --media-button-icon-width: 18px;\n    --media-preview-time-margin: 0px;\n  }\n  media-control-bar:not([slot]) :is([role='button'], [role='switch'], button) {\n    height: 44px;\n  }\n  .size-extra-small media-control-bar [role='button'],\n  .size-extra-small media-control-bar [role='switch'] {\n    height: auto;\n    padding: 4.4% 3.2%;\n  }\n  .mxp-spacer {\n    flex-grow: 1;\n    height: 100%;\n    background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));\n  }\n  media-controller::part(vertical-layer) {\n    transition: background-color 1s;\n  }\n  media-controller:is([media-paused], :not([user-inactive]))::part(vertical-layer) {\n    background-color: rgba(0, 0, 0, 0.6);\n    transition: background-color 0.25s;\n  }\n  .mxp-center-controls {\n    --media-background-color: transparent;\n    --media-button-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n  }\n  .mxp-center-controls media-play-button {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    padding: 0;\n    width: max(27px, min(9%, 90px));\n  }\n  .mxp-center-controls media-seek-backward-button,\n  .mxp-center-controls media-seek-forward-button {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    padding: 0;\n    margin: 0 10%;\n    width: min(7%, 70px);\n  }\n  media-loading-indicator {\n    --media-loading-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    position: absolute;\n    width: min(15%, 150px);\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n  }\n  /* Intentionally don't target the div for transition but the children\n of the div. Prevents messing with media-chrome's autohide feature. */\n  media-loading-indicator + div * {\n    transition: opacity 0.15s;\n    opacity: 1;\n  }\n  media-loading-indicator[media-loading]:not([media-paused]) ~ div > * {\n    opacity: 0;\n    transition-delay: 400ms;\n  }\n  media-volume-range {\n    width: min(100%, 100px);\n  }\n  media-time-display {\n    white-space: nowrap;\n  }\n  :is(media-time-display, media-text-display, media-playback-rate-button) {\n    color: inherit;\n  }\n  media-controller:fullscreen media-control-bar[slot='top-chrome'] {\n    /* Hide menus and buttons that trigger modals when in full-screen */\n    display: none;\n  }\n  video {\n    background: transparent;\n  }\n  media-controller:not(:fullscreen) video {\n    aspect-ratio: 16 / 9;\n  }\n  media-controller:not(:-webkit-full-screen) video {\n    aspect-ratio: 16 / 9;\n  }\n"]))),ye=X.default.div(i||(i=w(["\n  && {\n    --media-background-color: transparent;\n    --media-button-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n    media-play-button {\n      --media-control-background: transparent;\n      --media-control-hover-background: transparent;\n      padding: 0;\n      width: max(27px, min(9%, 90px));\n    }\n  }\n"]))),be=X.default(A.MediaControlBar)(a||(a=w(["\n  justify-content: flex-end;\n  button {\n    height: auto;\n  }\n"])));function je(e){let{asset:t}=e;const n=I.useClient(),s=O.useRef(null),r=O.useMemo((()=>I.getPosterSrc({client:n,asset:t,width:1920,height:1080})),[n,t]);return O.useEffect((()=>{var e;if(s.current){const t=document.createElement("style");t.innerHTML="img { object-fit: contain; }",(null==(e=s.current)?void 0:e.shadowRoot)&&s.current.shadowRoot.appendChild(t)}}),[]),P.jsx(A.MediaPosterImage,{ref:s,slot:"poster",src:r})}function ve(e){let{asset:t}=e;const n=I.useClient(),[s]=O.useState((()=>function(e){let{asset:t,client:n}=e;const s=I.getPlaybackId(t),r=new URLSearchParams;if("signed"===I.getPlaybackPolicy(t)){const e=I.generateJwt(n,s,"s");r.set("token",e)}return"https://image.mux.com/".concat(s,"/storyboard.vtt?").concat(r)}({asset:t,client:n})));return P.jsx("track",{label:"thumbnails",default:!0,kind:"metadata",src:s})}const we=X.default(R.Card)(o||(o=w(["\n  min-height: 82px;\n  box-sizing: border-box;\n"]))),ke=X.default(R.Flex)(l||(l=w(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"]))),Ce=X.default(R.Stack)(d||(d=w(["\n  position: relative;\n  width: 60%;\n"]))),Se=X.default(R.Code)(c||(c=w(["\n  position: relative;\n  width: 100%;\n\n  code {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    position: relative;\n    max-width: 200px;\n  }\n"]))),Pe=e=>{let{progress:t=100,onCancel:n,filename:s,text:r="Uploading"}=e;return P.jsx(we,{tone:"primary",padding:4,border:!0,height:"fill",children:P.jsxs(ke,{align:"center",justify:"space-between",height:"fill",direction:"row",gap:2,children:[P.jsxs(Ce,{children:[P.jsx(R.Flex,{justify:"center",gap:[3,3,2,2],direction:["column","column","row"],children:P.jsx(R.Text,{size:1,children:P.jsxs(R.Inline,{space:2,children:[r,P.jsx(Se,{size:1,children:s||"..."})]})})}),P.jsx(R.Card,{marginTop:3,radius:5,shadow:1,children:P.jsx(U.LinearProgress,{value:t})})]}),n?P.jsx(R.Button,{fontSize:2,text:"Cancel upload",mode:"ghost",tone:"critical",onClick:n}):null]})})},Oe=e=>{let{asset:t,buttons:n,readOnly:s,onChange:r,dialogState:i,setDialogState:a}=e;var o,l,d,c;const u=I.useClient(),p=O.useMemo((()=>"preparing"===(null==t?void 0:t.status)?"Preparing the video":"waiting_for_upload"===(null==t?void 0:t.status)?"Waiting for upload to start":"waiting"===(null==t?void 0:t.status)?"Processing upload":"ready"!==(null==t?void 0:t.status)&&void 0!==(null==t?void 0:t.status)),[t]),h=O.useMemo((()=>{var e,n,s,r;return"preparing"===(null==(n=null==(e=null==t?void 0:t.data)?void 0:e.static_renditions)?void 0:n.status)||(null==(r=null==(s=null==t?void 0:t.data)?void 0:s.static_renditions)||r.status,!1)}),[null==(l=null==(o=null==t?void 0:t.data)?void 0:o.static_renditions)?void 0:l.status]),g=O.useMemo((()=>t.playbackId&&function(e){let{asset:t,client:n}=e;const s=I.getPlaybackId(t),r=new URLSearchParams;if("signed"===I.getPlaybackPolicy(t)){const e=I.generateJwt(n,s,"v");r.set("token",e)}return"https://stream.mux.com/".concat(s,".m3u8?").concat(r)}({client:u,asset:t})),[t,u]),[f,x]=O.useState(null),m=O.useCallback((e=>x(e.currentTarget.error)),[]),y=O.useRef(null),b=O.useRef(null),j=O.useRef(null),v=O.useCallback((()=>{var e,t;return null!=(t=null==(e=j.current)?void 0:e.currentTime)?t:0}),[j]),w=((e,t)=>{const n=I.useClient();return O.useCallback((()=>{e&&(t(U.PatchEvent.from(U.unset())),e.assetId&&Q(n,e.assetId),e._id&&n.delete(e._id))}),[e,n,t])})(t,r);O.useEffect((()=>{var e,t;const n=document.createElement("style");n.innerHTML="button svg { vertical-align: middle; }",(null==(e=y.current)?void 0:e.shadowRoot)&&y.current.shadowRoot.appendChild(n),(null==(t=null==b?void 0:b.current)?void 0:t.shadowRoot)&&b.current.shadowRoot.appendChild(n.cloneNode(!0))}),[]);const[k]=O.useState((()=>L.generatePlayerInitTime())),C=O.useRef(void 0);if(O.useEffect((()=>{if(p||!g)return;const e=L.initialize({src:g,playerInitTime:k,playerSoftwareName:"sanity-plugin-mux-input",playerSoftwareVersion:"dev-preview"},j.current,C.current);C.current=e}),[g,p,k]),O.useEffect((()=>{var e,n,s;if("errored"===(null==t?void 0:t.status))throw w(),new Error(null==(s=null==(n=null==(e=t.data)?void 0:e.errors)?void 0:n.messages)?void 0:s.join(" "))}),[null==(c=null==(d=t.data)?void 0:d.errors)?void 0:c.messages,null==t?void 0:t.status,w]),f)throw f;return t&&t.status?p?P.jsx(Pe,{progress:100,filename:null==t?void 0:t.filename,text:!0!==p&&p||"Waiting for Mux to complete the file",onCancel:s?void 0:()=>w()}):P.jsxs(P.Fragment,{children:[P.jsxs(me,{shadow:1,tone:"transparent",scheme:"dark",children:[P.jsxs(A.MediaController,{children:[P.jsx("video",{playsInline:!0,ref:j,onError:m,slot:"media",preload:"metadata",crossOrigin:"anonomous",children:P.jsx(ve,{asset:t})}),P.jsx(je,{asset:t}),P.jsx(A.MediaLoadingIndicator,{slot:"centered-chrome",noAutoHide:!0}),P.jsx(ye,{slot:"centered-chrome",children:P.jsx(A.MediaPlayButton,{})}),n&&P.jsx(be,{slot:"top-chrome",children:n}),P.jsxs(A.MediaControlBar,{children:[P.jsx(A.MediaMuteButton,{}),P.jsx(A.MediaTimeDisplay,{}),P.jsx(A.MediaTimeRange,{}),P.jsx(A.MediaDurationDisplay,{}),P.jsx(A.MediaFullscreenButton,{})]})]}),h&&P.jsx(R.Card,{padding:2,radius:1,style:{background:"var(--card-fg-color)",position:"absolute",top:"0.5em",left:"0.5em"},children:P.jsx(R.Text,{size:1,style:{color:"var(--card-bg-color)"},children:"MUX is preparing static renditions, please stand by"})})]}),"edit-thumbnail"===i&&P.jsx(xe,{asset:t,getCurrentTime:v,setDialogState:a})]}):null};function Ie(e){return"inset 0 0 0 ".concat(e.width,"px ").concat(e.color)}function Ue(e){const{base:t,border:n,focusRing:s}=e,r=s.offset+s.width,i=0-s.offset,a=t?t.bg:"var(--card-bg-color)";return[i>0&&"inset 0 0 0 ".concat(i,"px var(--card-focus-ring-color)"),n&&Ie(n),i<0&&"0 0 0 ".concat(0-i,"px ").concat(a),r>0&&"0 0 0 ".concat(r,"px var(--card-focus-ring-color)")].filter(Boolean).join(",")}const De=X.default(R.MenuItem)((e=>{let{theme:t}=e;const{focusRing:n}=t.sanity,s=t.sanity.color.base;return z.css(u||(u=w(["\n    position: relative;\n\n    &:not([data-disabled='true']) {\n      &:focus-within {\n        box-shadow: ",";\n      }\n    }\n\n    & input {\n      overflow: hidden;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      min-width: 0;\n      display: block;\n      appearance: none;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      opacity: 0;\n    }\n  "])),Ue({base:s,border:{width:1,color:"var(--card-border-color)"},focusRing:n}))})),Te=Y.default.forwardRef((function(t,n){const{icon:s,id:r,accept:i,capture:a,fontSize:o,multiple:l,onSelect:d,padding:c=3,space:u=3,textAlign:p,text:h,disabled:g}=t,f=v(t,e),x=O.useId(),m=r||x,y=Y.default.useCallback((e=>{d&&e.target.files&&d(Array.from(e.target.files))}),[d]),b=P.jsxs(R.Flex,{align:"center",justify:"flex-start",padding:c,children:[s&&P.jsx(R.Box,{marginRight:h?u:void 0,children:P.jsxs(R.Text,{size:o,children:[O.isValidElement(s)&&s,V.isValidElementType(s)&&O.createElement(s)]})}),h&&P.jsx(R.Text,{align:p,size:o,textOverflow:"ellipsis",children:h})]});return P.jsxs(De,C(C({},f),{},{htmlFor:m,padding:0,fontSize:2,disabled:g,ref:n,children:[b,P.jsx("input",{"data-testid":"file-button-input",accept:i,capture:a,id:m,multiple:l,onChange:y,type:"file",value:"",disabled:g})]}))})),Me=X.default(R.Card)(p||(p=w(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0.6;\n  mix-blend-mode: screen;\n  background: transparent;\n"]))),Ee=X.default(R.Button)(h||(h=w(["\n  background: transparent;\n  color: white;\n"])));var _e=O.memo((function(e){const{asset:t,readOnly:n,dialogState:s,setDialogState:r,onChange:i,onUpload:a}=e,[o,l]=O.useState(!1),[d,c]=O.useState(null),u=O.useMemo((()=>"signed"===I.getPlaybackPolicy(t)),[t]),p=O.useCallback((()=>i(U.PatchEvent.from(U.unset([])))),[i]);return O.useEffect((()=>{o&&s&&l(!1)}),[s,o]),R.useClickOutside(O.useCallback((()=>l(!1)),[]),[d]),P.jsxs(R.Inline,{space:1,padding:2,children:[u&&P.jsx(R.Tooltip,{content:P.jsx(R.Box,{padding:2,children:P.jsx(R.Text,{muted:!0,size:1,children:"Signed playback policy"})}),placement:"right",portal:!0,children:P.jsx(Me,{radius:2,margin:2,scheme:"dark",tone:"positive",children:P.jsx(Ee,{icon:B.LockIcon,mode:"bleed",tone:"positive"})})}),!n&&P.jsx(R.Button,{icon:B.EditIcon,mode:"ghost",onClick:()=>r("edit-thumbnail")}),P.jsx(R.Popover,{content:P.jsxs(R.Menu,{ref:c,children:[P.jsx(R.Box,{padding:2,children:P.jsx(R.Label,{muted:!0,size:1,children:"Replace"})}),P.jsx(Te,{accept:"video/*",icon:B.UploadIcon,mode:"bleed",onSelect:a,text:"Upload",disabled:n,fontSize:2}),P.jsx(R.MenuItem,{icon:B.SearchIcon,text:"Browse",onClick:()=>r("select-video")}),P.jsx(R.MenuDivider,{}),P.jsx(R.MenuItem,{icon:B.PlugIcon,text:"Configure API",onClick:()=>r("secrets")}),P.jsx(R.MenuDivider,{}),P.jsx(R.MenuItem,{tone:"critical",icon:B.ResetIcon,text:"Clear field",onClick:p,disabled:n})]}),portal:!0,open:o,children:P.jsx(R.Button,{icon:B.EllipsisVerticalIcon,mode:"ghost",onClick:()=>{r(!1),l(!0)}})})]})}));const Fe=(Re=R.Card,X.default(Re)((e=>{const t={width:e.$border?1:0,color:"var(--card-border-color)"};return z.css(g||(g=w(["\n        --card-focus-box-shadow: ",";\n\n        border-radius: ",";\n        outline: none;\n        box-shadow: var(--card-focus-box-shadow);\n\n        &:focus {\n          --card-focus-box-shadow: ",";\n        }\n      "])),Ie(t),R.rem(e.theme.sanity.radius[1]),Ue({base:e.theme.sanity.color.base,border:t,focusRing:e.theme.sanity.focusRing}))})));var Re;const Be=O.forwardRef(((e,t)=>{let{children:n,tone:s,onPaste:r,onDrop:i,onDragEnter:a,onDragLeave:o,onDragOver:l}=e;const d=O.useRef(!1),c=O.useRef(null),u=O.useCallback((e=>{17!=e.keyCode&&91!=e.keyCode||(d.current=!0);d.current&&86==e.keyCode&&c.current.focus()}),[]),p=O.useCallback((e=>{17!=e.keyCode&&91!=e.keyCode||(d.current=!1)}),[]);return P.jsxs(Fe,{tone:s,height:"fill",ref:t,padding:0,radius:2,shadow:0,tabIndex:0,onKeyDown:u,onKeyUp:p,onPaste:r,onDrop:i,onDragEnter:a,onDragLeave:o,onDragOver:l,children:[P.jsx(Ke,{ref:c,onPaste:r}),n]})})),Ke=X.default.input.attrs({type:"text"})(f||(f=w(["\n  position: absolute;\n  border: 0;\n  color: white;\n  opacity: 0;\n\n  &:focus {\n    outline: none;\n  }\n"]))),ze=X.default.input(x||(x=w(["\n  overflow: hidden;\n  width: 0.1px;\n  height: 0.1px;\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n"]))),qe=X.default.label(m||(m=w(["\n  position: relative;\n"]))),Le=e=>{let{onSelect:n}=e,s=v(e,t);const r="FileSelect".concat(O.useId()),i=O.useRef(null),a=O.useCallback((e=>{n&&n(e.target.files)}),[n]),o=O.useCallback((()=>{var e;return null==(e=i.current)?void 0:e.click()}),[]);return P.jsxs(qe,{htmlFor:r,children:[P.jsx(ze,{accept:"video/*",ref:i,tabIndex:0,type:"file",id:r,onChange:a,value:""}),P.jsx(R.Button,C({onClick:o,mode:"default",tone:"primary",style:{width:"100%"}},s))]})},Ae=X.default(R.Card)(y||(y=w(["\n  && {\n    border-style: dashed;\n  }\n"]))),Ve=X.default(R.Box)(b||(b=w(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));function Ge(e){const{setDialogState:t,readOnly:n,onSelect:s,hovering:r,needsSetup:i}=e,a=O.useCallback((()=>t("select-video")),[t]),o=O.useCallback((()=>t("secrets")),[t]);return P.jsx(R.Box,{style:{padding:1,position:"relative"},height:"stretch",children:P.jsxs(Ae,{sizing:"border",height:"fill",tone:n?"transparent":"inherit",border:!0,padding:3,style:r?{borderColor:"transparent"}:void 0,children:[P.jsx(Ve,{padding:3,children:P.jsx(R.Button,{padding:3,radius:3,tone:i?"critical":void 0,onClick:o,icon:B.PlugIcon,mode:"bleed"})}),P.jsxs(R.Flex,{align:"center",justify:"space-between",gap:4,direction:["column","column","row"],paddingY:[2,2,0],sizing:"border",height:"fill",children:[P.jsxs(R.Flex,{align:"center",justify:"center",gap:2,flex:1,children:[P.jsx(R.Flex,{justify:"center",children:P.jsx(R.Text,{muted:!0,children:P.jsx(B.DocumentVideoIcon,{})})}),P.jsx(R.Flex,{justify:"center",children:P.jsx(R.Text,{size:1,muted:!0,children:"Drag video or paste URL here"})})]}),P.jsxs(R.Inline,{space:2,children:[P.jsx(Le,{mode:"ghost",tone:"default",icon:B.UploadIcon,text:"Upload",onSelect:s}),P.jsx(R.Button,{mode:"ghost",icon:B.SearchIcon,text:"Select",onClick:a})]})]})]})})}class He extends O.Component{constructor(){super(...arguments),this.state={isDraggingOver:!1,invalidPaste:!1,invalidFile:!1,uploadProgress:null,fileInfo:null,uuid:null,error:null,url:null},this.dragEnteredEls=[],this.ctrlDown=!1,this.upload=null,this.container=Y.default.createRef(),this.handleProgress=e=>{this.setState({uploadProgress:e.percent})},this.onUpload=e=>{this.setState({uploadProgress:0,fileInfo:null,uuid:null}),this.upload=function(e,t,n){let s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};return re(n).pipe(E.switchMap((r=>M.concat(M.of({type:"file",file:r}),te(t).pipe(E.switchMap((r=>{if(!r||!r.status)return M.throwError(new Error("Invalid credentials"));const i=_.uuid(),{enableSignedUrls:a}=s,o={mp4_support:e.mp4_support,playback_policy:[a?"signed":"public"]};return M.concat(M.of({type:"uuid",uuid:i}),M.defer((()=>t.observable.request({url:"/addons/mux/uploads/".concat(t.clientConfig.dataset),withCredentials:!0,method:"POST",headers:{"MUX-Proxy-UUID":i,"Content-Type":"application/json"},body:o}))).pipe(E.mergeMap((e=>$(i,e.upload.url,n).pipe(E.mergeMap((e=>"success"!==e.type?M.of(e):M.from(se(t,i)).pipe(E.mergeMap((t=>M.of(C(C({},e),{},{asset:t}))))))),E.catchError((e=>ne(t,i).pipe(E.mergeMapTo(M.throwError(e))))))))))})))))))}(this.props.config,this.props.client,e[0],{enableSignedUrls:this.props.secrets.enableSignedUrls}).pipe(E.takeUntil(this.onCancelUploadButtonClick$.pipe(E.tap((()=>{this.state.uuid&&this.props.client.delete(this.state.uuid)}))))).subscribe({complete:()=>{this.setState({error:null,uploadProgress:null,uuid:null})},next:e=>{this.handleUploadEvent(e)},error:e=>{this.setState({error:e,uploadProgress:null,uuid:null})}})},this.handleUploadEvent=e=>{switch(e.type){case"success":return this.handleUploadSuccess(e.asset);case"progress":return this.handleProgress(e);case"file":return this.setState({fileInfo:e.file});case"uuid":return this.setState({uuid:e.uuid});case"url":return this.setState({url:e.url,uploadProgress:100});default:return null}},this.handleUploadSuccess=e=>{this.setState({uploadProgress:100}),this.props.onChange(U.PatchEvent.from([U.setIfMissing({asset:{}}),U.set({_type:"reference",_weak:!0,_ref:e._id},["asset"])]))},this.handlePaste=e=>{const t=(e.clipboardData||window.clipboardData).getData("text"),n={enableSignedUrls:this.props.secrets.enableSignedUrls};this.upload=function(e,t,n){let s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};return ie(n).pipe(E.switchMap((n=>M.concat(M.of({type:"url",url:n}),te(t).pipe(E.switchMap((r=>{if(!r||!r.status)return M.throwError(new Error("Invalid credentials"));const i=_.uuid(),{enableSignedUrls:a}=s,o={input:n,playback_policy:[a?"signed":"public"],mp4_support:e.mp4_support},l={muxBody:JSON.stringify(o),filename:n.split("/").slice(-1)[0]},d=t.clientConfig.dataset;return M.defer((()=>t.observable.request({url:"/addons/mux/assets/".concat(d),withCredentials:!0,method:"POST",headers:{"MUX-Proxy-UUID":i,"Content-Type":"application/json"},query:l}))).pipe(E.mergeMap((e=>{const t=e&&e.results&&e.results[0]&&e.results[0].document||null;return t?M.of({type:"success",id:i,asset:t}):M.throwError(new Error("No asset document returned"))})))})))))))}(this.props.config,this.props.client,t,n).subscribe({complete:()=>{this.setState({error:null,uploadProgress:null,url:null})},next:e=>{this.handleUploadEvent(e)},error:e=>{let t;e.message.toLowerCase().match("invalid url")||(t=e),this.setState({invalidPaste:!0,error:t},(()=>{setTimeout((()=>{this.setState({invalidPaste:!1,uploadProgress:null})}),2e3)}))}})},this.handleDrop=e=>{this.setState({isDraggingOver:!1}),e.preventDefault(),e.stopPropagation(),ae(e.nativeEvent.dataTransfer).then((e=>{e&&this.onUpload(e)}))},this.handleDragOver=e=>{e.preventDefault(),e.stopPropagation()},this.handleDragEnter=e=>{var t,n;e.stopPropagation(),this.dragEnteredEls.push(e.target),this.setState({isDraggingOver:!0});const s=null==(n=null==(t=e.dataTransfer.items)?void 0:t[0])?void 0:n.type;this.setState({invalidFile:!s.startsWith("video/")})},this.handleDragLeave=e=>{e.stopPropagation();const t=this.dragEnteredEls.indexOf(e.target);t>-1&&this.dragEnteredEls.splice(t,1),0===this.dragEnteredEls.length&&this.setState({isDraggingOver:!1})}}componentWillUnmount(){this.unSubscribeToUpload()}componentDidMount(){const e=new M.Subject;this.onCancelUploadButtonClick$=e.asObservable(),this.handleCancelUploadButtonClick=t=>e.next(t)}unSubscribeToUpload(){this.upload&&!this.upload.closed&&this.upload.unsubscribe()}render(){var e;if(null!==this.state.uploadProgress)return P.jsx(Pe,{onCancel:this.handleCancelUploadButtonClick,progress:this.state.uploadProgress,filename:(null==(e=this.state.fileInfo)?void 0:e.name)||this.state.url});if(this.state.error)throw this.state.error;return P.jsxs(P.Fragment,{children:[P.jsx(Be,{tone:this.state.isDraggingOver&&(this.state.invalidPaste||this.state.invalidFile)?"critical":this.state.isDraggingOver?"positive":void 0,onDrop:this.handleDrop,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDragEnter:this.handleDragEnter,onPaste:this.handlePaste,ref:this.container,children:this.props.asset?P.jsx(Oe,{readOnly:this.props.readOnly,asset:this.props.asset,onChange:this.props.onChange,dialogState:this.props.dialogState,setDialogState:this.props.setDialogState,buttons:P.jsx(_e,{asset:this.props.asset,dialogState:this.props.dialogState,setDialogState:this.props.setDialogState,onChange:this.props.onChange,onUpload:this.onUpload,readOnly:this.props.readOnly})}):P.jsx(Ge,{hovering:this.state.isDraggingOver,onSelect:this.onUpload,readOnly:this.props.readOnly,setDialogState:this.props.setDialogState,needsSetup:this.props.needsSetup})}),"select-video"===this.props.dialogState&&P.jsx(fe,{asset:this.props.asset,onChange:this.props.onChange,setDialogState:this.props.setDialogState})]})}}const Ne=(e,t)=>O.useCallback((async n=>{let{token:s,secretKey:r,enableSignedUrls:i}=n,{signingKeyId:a,signingKeyPrivate:o}=t;try{await ee(e,s,r,i,a,o);const t=await function(e){const{dataset:t}=e.config();return e.request({url:"/addons/mux/secrets/".concat(t,"/test"),withCredentials:!0,method:"GET"})}(e);if(!(null==t?void 0:t.status)&&s&&r)throw new Error("Invalid secrets")}catch(e){throw console.error("Error while trying to save secrets:",e),e}if(i){const t=await async function(e,t,n){if(!t||!n)return!1;const{dataset:s}=e.config();try{const n=await e.request({url:"/addons/mux/signing-keys/".concat(s,"/").concat(t),withCredentials:!0,method:"GET"});return!(!n.data||!n.data.id)}catch(e){return console.error("Error fetching signingKeyId",t,"assuming it is not valid"),!1}}(e,a,o);if(!t)try{const{data:t}=await function(e){const{dataset:t}=e.config();return e.request({url:"/addons/mux/signing-keys/".concat(t),withCredentials:!0,method:"POST"})}(e);a=t.id,o=t.private_key,await ee(e,s,r,i,a,o)}catch(e){throw console.log("Error while creating and saving signing key:",null==e?void 0:e.message),e}}return{token:s,secretKey:r,enableSignedUrls:i,signingKeyId:a,signingKeyPrivate:o}}),[e,t]);function Ye(e){let{token:t,secretKey:n,enableSignedUrls:s}=e;return{submitting:!1,error:null,token:null!=t?t:"",secretKey:null!=n?n:"",enableSignedUrls:null!=s&&s}}function Ze(e,t){switch(null==t?void 0:t.type){case"submit":return C(C({},e),{},{submitting:!0,error:null});case"error":return C(C({},e),{},{submitting:!1,error:t.payload});case"reset":return Ye(t.payload);case"change":return C(C({},e),{},{[t.payload.name]:t.payload.value});default:throw new Error("Unknown action type: ".concat(null==t?void 0:t.type))}}const We=["title","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r"];function Xe(e){let{height:t=26}=e;const n=O.useId(),[s,r,i,a,o,l,d,c,u,p,h,g,f,x,m,y,b,j,v]=O.useMemo((()=>We.map((e=>"".concat(n,"-").concat(e)))),[n]);return P.jsxs("svg",{"aria-labelledby":s,role:"img",xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",viewBox:"92.08878326416016 102.66712188720703 692.76123046875 219.99948120117188",style:{height:"".concat(t,"px")},children:[P.jsx("title",{id:s,children:"Mux Logo"}),P.jsxs("defs",{children:[P.jsxs("linearGradient",{id:a,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:o,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:c,spreadMethod:"pad",gradientTransform:"rotate(180 296.075 79.75) scale(524.84045)",gradientUnits:"userSpaceOnUse",y2:0,x2:1,y1:0,x1:0,children:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:p,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:h,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:g,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:f,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:x,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:b,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:j,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsxs("linearGradient",{id:v,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:[P.jsx("stop",{offset:0,style:{stopOpacity:1,stopColor:"#ff4e00"}}),P.jsx("stop",{offset:1,style:{stopOpacity:1,stopColor:"#ff1791"}})]}),P.jsx("clipPath",{id:r,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M0 319h657.706V0H0Z"})}),P.jsx("clipPath",{id:i,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M423.64 242h164.999V77H423.64Z"})}),P.jsx("clipPath",{id:l,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M0 319h657.706V0H0Z"})}),P.jsx("clipPath",{id:d,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M311.3 242h93.031V77H311.3Z"})}),P.jsx("clipPath",{id:u,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M198.96 242h35.106V77H198.96Z"})}),P.jsx("clipPath",{id:m,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M0 319h657.706V0H0Z"})}),P.jsx("clipPath",{id:y,clipPathUnits:"userSpaceOnUse",children:P.jsx("path",{d:"M69.067 242H169.12V141.947H69.067Z"})})]}),P.jsx("g",{clipPath:"url(#".concat(r,")"),transform:"matrix(1.33333 0 0 -1.33333 0 425.333)",children:P.jsx("g",{style:{opacity:.69999701},clipPath:"url(#".concat(i,")"),children:P.jsx("path",{style:{fill:"url(#".concat(a,")"),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"})})}),P.jsx("path",{style:{fill:"url(#".concat(o,")"),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)"}),P.jsxs("g",{clipPath:"url(#".concat(l,")"),transform:"matrix(1.33333 0 0 -1.33333 0 425.333)",children:[P.jsx("g",{style:{opacity:.69999701},clipPath:"url(#".concat(d,")"),children:P.jsx("path",{style:{fill:"url(#".concat(c,")"),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"})}),P.jsx("g",{style:{opacity:.69999701},clipPath:"url(#".concat(u,")"),children:P.jsx("path",{style:{fill:"url(#".concat(p,")"),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"})})]}),P.jsx("path",{style:{fill:"url(#".concat(h,")"),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)"}),P.jsx("path",{style:{fill:"url(#".concat(g,")"),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)"}),P.jsx("path",{style:{fill:"url(#".concat(f,")"),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)"}),P.jsx("path",{style:{fill:"url(#".concat(x,")"),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)"}),P.jsx("g",{clipPath:"url(#".concat(m,")"),transform:"matrix(1.33333 0 0 -1.33333 0 425.333)",children:P.jsx("g",{style:{opacity:.69999701},clipPath:"url(#".concat(y,")"),children:P.jsx("path",{style:{fill:"url(#".concat(b,")"),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"})})}),P.jsx("path",{style:{fill:"url(#".concat(j,")"),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)"}),P.jsx("path",{style:{fill:"url(#".concat(v,")"),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)"})]})}const Je=X.default.span(j||(j=w(["\n  display: inline-block;\n  height: 0.8em;\n  margin-right: 1em;\n  transform: translate(0.3em, -0.2em);\n"]))),$e=()=>P.jsxs(P.Fragment,{children:[P.jsx(Je,{children:P.jsx(Xe,{height:13})}),"API Credentials"]});var Qe=O.memo((function(e){const{children:t,title:n,description:s,inputId:r}=e;return P.jsxs(R.Stack,{space:1,children:[P.jsx(R.Flex,{align:"flex-end",children:P.jsx(R.Box,{flex:1,paddingY:2,children:P.jsx(R.Stack,{space:2,children:P.jsxs(R.Flex,{children:[P.jsx(R.Text,{as:"label",htmlFor:r,weight:"semibold",size:1,children:n||P.jsx("em",{children:"Untitled"})}),s&&P.jsx(R.Text,{muted:!0,size:1,children:s})]})})})}),P.jsx("div",{children:t})]})}));const et=["token","secretKey","enableSignedUrls"];var tt=O.memo((function(e){let{secrets:t,setDialogState:n}=e;var s,r;const i=I.useClient(),[a,o]=(e=>O.useReducer(Ze,e,Ye))(t),l=O.useMemo((()=>t.token&&t.secretKey),[t]),d=O.useCallback((()=>n(!1)),[n]),c=O.useMemo((()=>t.token!==a.token||t.secretKey!==a.secretKey||t.enableSignedUrls!==a.enableSignedUrls),[t,a]),u="ConfigureApi".concat(O.useId()),[p,h,g]=O.useMemo((()=>et.map((e=>"".concat(u,"-").concat(e)))),[u]),f=O.useRef(null),x=Ne(i,t),m=O.useRef(!1),y=O.useCallback((e=>{if(e.preventDefault(),!m.current&&e.currentTarget.reportValidity()){m.current=!0,o({type:"submit"});const{token:e,secretKey:t,enableSignedUrls:s}=a;x({token:e,secretKey:t,enableSignedUrls:s}).then((e=>{const{projectId:t,dataset:s}=i.config();G.clear([T.cacheNs,I._id,t,s]),G.preload((()=>Promise.resolve(e)),[T.cacheNs,I._id,t,s]),n(!1)})).catch((e=>o({type:"error",payload:e.message}))).finally((()=>{m.current=!1}))}}),[i,o,x,n,a]),b=O.useCallback((e=>{o({type:"change",payload:{name:"token",value:e.currentTarget.value}})}),[o]),j=O.useCallback((e=>{o({type:"change",payload:{name:"secretKey",value:e.currentTarget.value}})}),[o]),v=O.useCallback((e=>{o({type:"change",payload:{name:"enableSignedUrls",value:e.currentTarget.checked}})}),[o]);return O.useEffect((()=>{f.current&&f.current.focus()}),[f]),P.jsx(R.Dialog,{id:u,onClose:d,header:P.jsx($e,{}),width:0,children:P.jsx(R.Box,{padding:4,style:{position:"relative"},children:P.jsx("form",{onSubmit:y,noValidate:!0,children:P.jsxs(R.Stack,{space:4,children:[!l&&P.jsx(R.Card,{padding:[3,3,3],radius:2,shadow:1,tone:"primary",children:P.jsxs(R.Stack,{space:3,children:[P.jsxs(R.Text,{size:1,children:["To set up a new access token, go to your"," ",P.jsx("a",{href:"https://dashboard.mux.com/settings/access-tokens",target:"_blank",rel:"noreferrer noopener",children:"account on mux.com"}),"."]}),P.jsxs(R.Text,{size:1,children:["The access token needs permissions: ",P.jsx("strong",{children:"Mux Video "}),"(Full Access) and ",P.jsx("strong",{children:"Mux Data"})," (Read)",P.jsx("br",{}),"The credentials will be stored safely in a hidden document only available to editors."]})]})}),P.jsx(Qe,{title:"Access Token",inputId:p,children:P.jsx(R.TextInput,{id:p,ref:f,onChange:b,type:"text",value:null!=(s=a.token)?s:"",required:!!a.secretKey||a.enableSignedUrls})}),P.jsx(Qe,{title:"Secret Key",inputId:h,children:P.jsx(R.TextInput,{id:h,onChange:j,type:"text",value:null!=(r=a.secretKey)?r:"",required:!!a.token||a.enableSignedUrls})}),P.jsxs(R.Stack,{space:4,children:[P.jsxs(R.Flex,{align:"center",children:[P.jsx(R.Checkbox,{id:g,onChange:v,checked:a.enableSignedUrls,style:{display:"block"}}),P.jsx(R.Box,{flex:1,paddingLeft:3,children:P.jsx(R.Text,{children:P.jsx("label",{htmlFor:g,children:"Enable Signed Urls"})})})]}),t.signingKeyId&&a.enableSignedUrls?P.jsx(R.Card,{padding:[3,3,3],radius:2,shadow:1,tone:"caution",children:P.jsxs(R.Stack,{space:3,children:[P.jsx(R.Text,{size:1,children:"The signing key ID that Sanity will use is:"}),P.jsx(R.Code,{size:1,children:t.signingKeyId}),P.jsxs(R.Text,{size:1,children:["This key is only used for previewing content in the Sanity UI.",P.jsx("br",{}),"You should generate a different key to use in your application server."]})]})}):null]}),P.jsxs(R.Inline,{space:2,children:[P.jsx(R.Button,{text:"Save",disabled:!c,loading:a.submitting,tone:"primary",mode:"default",type:"submit"}),P.jsx(R.Button,{disabled:a.submitting,text:"Cancel",mode:"bleed",onClick:d})]}),a.error&&P.jsx(R.Card,{padding:[3,3,3],radius:2,shadow:1,tone:"critical",children:P.jsx(R.Text,{children:a.error})})]})})})})}));function nt(e){const{setDialogState:t}=e,n=O.useCallback((()=>t("secrets")),[t]);return P.jsx(P.Fragment,{children:P.jsx("div",{style:{padding:2},children:P.jsx(R.Card,{display:"flex",sizing:"border",style:{aspectRatio:"16/9",width:"100%",boxShadow:"var(--card-bg-color) 0 0 0 2px"},paddingX:[2,3,4,4],radius:1,tone:"transparent",children:P.jsx(R.Flex,{justify:"flex-start",align:"center",children:P.jsxs(R.Grid,{columns:1,gap:[2,3,4,4],children:[P.jsx(R.Inline,{paddingY:1,children:P.jsx("div",{style:{height:"32px"},children:P.jsx(Xe,{})})}),P.jsx(R.Inline,{paddingY:1,children:P.jsx(R.Heading,{size:[0,1,2,2],children:"Upload and preview videos directly from your studio."})}),P.jsx(R.Inline,{paddingY:1,children:P.jsx(R.Button,{mode:"ghost",icon:B.PlugIcon,text:"Configure API",onClick:n})})]})})})})})}var st=O.memo((e=>{var t;const n=I.useClient(),s=(()=>{const{error:e,isLoading:t,value:n}=U.useDocumentValues(T.muxSecretsDocumentId,J);return{error:e,isLoading:t,value:O.useMemo((()=>{const e=Boolean(n),t={token:(null==n?void 0:n.token)||null,secretKey:(null==n?void 0:n.secretKey)||null,enableSignedUrls:(null==n?void 0:n.enableSignedUrls)||!1,signingKeyId:(null==n?void 0:n.signingKeyId)||null,signingKeyPrivate:(null==n?void 0:n.signingKeyPrivate)||null};return{isInitialSetup:!e,needsSetup:!(null==t?void 0:t.token)||!(null==t?void 0:t.secretKey),secrets:t}}),[n])}})(),r=I.useAssetDocumentValues(null==(t=e.value)?void 0:t.asset),i=(e=>{var t,n;const s=I.useClient(),r=U.useProjectId(),i=U.useDataset(),a=O.useMemo((()=>{var t,n;return!!(null==e?void 0:e.assetId)&&("preparing"===(null==e?void 0:e.status)||"preparing"===(null==(n=null==(t=null==e?void 0:e.data)?void 0:t.static_renditions)?void 0:n.status))}),[null==e?void 0:e.assetId,null==(n=null==(t=null==e?void 0:e.data)?void 0:t.static_renditions)?void 0:n.status,null==e?void 0:e.status]);return Z.default(a?"/".concat(r,"/addons/mux/assets/").concat(i,"/data/").concat(null==e?void 0:e.assetId):null,(async()=>{const{data:t}=await s.request({url:"/addons/mux/assets/".concat(i,"/data/").concat(e.assetId),withCredentials:!0,method:"GET"});s.patch(e._id).set({status:t.status,data:t}).commit({returnDocuments:!1})}),{refreshInterval:2e3,refreshWhenHidden:!0,dedupingInterval:1e3})})(e.readOnly?void 0:(null==r?void 0:r.value)||void 0),[a,o]=O.useState(!1),l=s.error||r.error||i.error;if(l)throw l;const d=s.isLoading||r.isLoading;return P.jsx(P.Fragment,{children:d?P.jsx(T.InputFallback,{}):P.jsxs(P.Fragment,{children:[s.value.needsSetup&&!r.value?P.jsx(nt,{setDialogState:o}):P.jsx(He,C(C({},e),{},{config:e.config,onChange:e.onChange,client:n,secrets:s.value.secrets,asset:r.value,dialogState:a,setDialogState:o,needsSetup:s.value.needsSetup})),"secrets"===a&&P.jsx(tt,{setDialogState:o,secrets:s.value.secrets})]})})}));exports.default=st;
+//# sourceMappingURL=Input-2ba004d3.js.map