@ynput/ayon-frontend-shared 0.4.2 → 0.4.4

package/dist/shared/src/containers/Feed/components/CommentInput/modules/ImageUploader.es.js

@@ -1,7 +1,7 @@
 import { uploadFile as n } from "../helpers.es.js";
 class h {
-  constructor(i, t) {
-    this.quill = i, this.options = t, this.range = null, this.placeholderDelta = null, this.options.project || console.warn("[Missing config] project name is required");
+  constructor(t, i) {
+    this.quill = t, this.options = i, this.range = null, this.placeholderDelta = null, this.options.project || console.warn("[Missing config] project name is required");
     var e = this.quill.getModule("toolbar");
     e && e.addHandler("image", this.selectLocalImage.bind(this)), this.handlePaste = this.handlePaste.bind(this), this.quill.root.addEventListener("paste", this.handlePaste, !1);
   }
@@ -10,33 +10,33 @@ class h {
       document.body.removeChild(this.fileHolder);
     });
   }
-  handlePaste(i) {
-    let t = i.clipboardData || window.clipboardData;
-    if (t && (t.items || t.files)) {
-      let e = t.items || t.files;
+  handlePaste(t) {
+    let i = t.clipboardData || window.clipboardData;
+    if (i && (i.items || i.files)) {
+      let e = i.items || i.files;
       const s = [];
       for (let l = 0; l < e.length; l++) {
         let o = e[l].getAsFile ? e[l].getAsFile() : e[l];
-        o && (this.quill.focus(), this.range = this.quill.getSelection(), i.preventDefault(), s.push(o));
+        o && (this.quill.focus(), this.range = this.quill.getSelection(), t.preventDefault(), s.push(o));
       }
       this.readAndUploadFiles(s);
     }
   }
-  readAndUploadFiles(i = []) {
-    if (i.length !== 0)
-      for (const t of i)
-        n(t, this.options.projectName, this.options.onUploadProgress).then(
+  readAndUploadFiles(t = []) {
+    if (t.length !== 0)
+      for (const i of t)
+        n(i, this.options.projectName, this.options.onUploadProgress).then(
           (e) => {
             this.options.onUpload && this.options.onUpload(e);
           },
           (e) => {
-            this.options.onReject && this.options.onReject(e), console.warn(e);
+            this.options.onReject && this.options.onReject(e, i), console.warn(e);
           }
         );
   }
   fileChanged() {
-    const i = this.fileHolder.files;
-    this.readAndUploadFiles(i);
+    const t = this.fileHolder.files;
+    this.readAndUploadFiles(t);
   }
 }
 export {

package/dist/shared/src/containers/Feed/components/CommentInput/modules/ImageUploader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUploader.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/modules/ImageUploader.ts"],"sourcesContent":["// @ts-nocheck\n// inspired by quill-image-uploader\n// credit: NoelOConnell\n\nimport { uploadFile } from '../helpers'\n\nclass ImageUploader {\n  constructor(quill, options) {\n    this.quill = quill\n    this.options = options\n    this.range = null\n    this.placeholderDelta = null\n\n    if (!this.options.project) console.warn('[Missing config] project name is required')\n\n    var toolbar = this.quill.getModule('toolbar')\n    if (toolbar) {\n      toolbar.addHandler('image', this.selectLocalImage.bind(this))\n    }\n\n    this.handlePaste = this.handlePaste.bind(this)\n\n    this.quill.root.addEventListener('paste', this.handlePaste, false)\n  }\n\n  selectLocalImage() {\n    this.quill.focus()\n    this.range = this.quill.getSelection()\n    this.fileHolder = document.createElement('input')\n    this.fileHolder.setAttribute('type', 'file')\n    this.fileHolder.setAttribute('multiple', 'true')\n    this.fileHolder.setAttribute('style', 'visibility:hidden')\n\n    this.fileHolder.onchange = this.fileChanged.bind(this)\n\n    document.body.appendChild(this.fileHolder)\n\n    this.fileHolder.click()\n\n    window.requestAnimationFrame(() => {\n      document.body.removeChild(this.fileHolder)\n    })\n  }\n\n  handlePaste(evt) {\n    let clipboard = evt.clipboardData || window.clipboardData\n\n    // IE 11 is .files other browsers are .items\n    if (clipboard && (clipboard.items || clipboard.files)) {\n      let items = clipboard.items || clipboard.files\n\n      const files = []\n      for (let i = 0; i < items.length; i++) {\n        let file = items[i].getAsFile ? items[i].getAsFile() : items[i]\n\n        if (file) {\n          this.quill.focus()\n          this.range = this.quill.getSelection()\n          evt.preventDefault()\n\n          files.push(file)\n        }\n      }\n\n      this.readAndUploadFiles(files)\n    }\n  }\n\n  readAndUploadFiles(files = []) {\n    if (files.length === 0) return\n\n    for (const file of files) {\n      uploadFile(file, this.options.projectName, this.options.onUploadProgress).then(\n        (data) => {\n          this.options.onUpload && this.options.onUpload(data)\n        },\n        (error) => {\n          this.options.onReject && this.options.onReject(error)\n          console.warn(error)\n        },\n      )\n    }\n  }\n\n  fileChanged() {\n    const files = this.fileHolder.files\n    this.readAndUploadFiles(files)\n  }\n}\n\nexport default ImageUploader\n"],"names":["ImageUploader","quill","options","toolbar","evt","clipboard","items","files","i","file","uploadFile","data","error"],"mappings":";AAMA,MAAMA,EAAc;AAAA,EAClB,YAAYC,GAAOC,GAAS;AAC1B,SAAK,QAAQD,GACb,KAAK,UAAUC,GACf,KAAK,QAAQ,MACb,KAAK,mBAAmB,MAEnB,KAAK,QAAQ,WAAS,QAAQ,KAAK,2CAA2C;AAEnF,QAAIC,IAAU,KAAK,MAAM,UAAU,SAAS;AAC5C,IAAIA,KACFA,EAAQ,WAAW,SAAS,KAAK,iBAAiB,KAAK,IAAI,CAAC,GAG9D,KAAK,cAAc,KAAK,YAAY,KAAK,IAAI,GAE7C,KAAK,MAAM,KAAK,iBAAiB,SAAS,KAAK,aAAa,EAAK;AAAA,EACnE;AAAA,EAEA,mBAAmB;AACjB,SAAK,MAAM,MAAA,GACX,KAAK,QAAQ,KAAK,MAAM,aAAA,GACxB,KAAK,aAAa,SAAS,cAAc,OAAO,GAChD,KAAK,WAAW,aAAa,QAAQ,MAAM,GAC3C,KAAK,WAAW,aAAa,YAAY,MAAM,GAC/C,KAAK,WAAW,aAAa,SAAS,mBAAmB,GAEzD,KAAK,WAAW,WAAW,KAAK,YAAY,KAAK,IAAI,GAErD,SAAS,KAAK,YAAY,KAAK,UAAU,GAEzC,KAAK,WAAW,MAAA,GAEhB,OAAO,sBAAsB,MAAM;AACjC,eAAS,KAAK,YAAY,KAAK,UAAU;AAAA,IAC3C,CAAC;AAAA,EACH;AAAA,EAEA,YAAYC,GAAK;AACf,QAAIC,IAAYD,EAAI,iBAAiB,OAAO;AAG5C,QAAIC,MAAcA,EAAU,SAASA,EAAU,QAAQ;AACrD,UAAIC,IAAQD,EAAU,SAASA,EAAU;AAEzC,YAAME,IAAQ,CAAA;AACd,eAASC,IAAI,GAAGA,IAAIF,EAAM,QAAQE,KAAK;AACrC,YAAIC,IAAOH,EAAME,CAAC,EAAE,YAAYF,EAAME,CAAC,EAAE,cAAcF,EAAME,CAAC;AAE9D,QAAIC,MACF,KAAK,MAAM,MAAA,GACX,KAAK,QAAQ,KAAK,MAAM,aAAA,GACxBL,EAAI,eAAA,GAEJG,EAAM,KAAKE,CAAI;AAAA,MAEnB;AAEA,WAAK,mBAAmBF,CAAK;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,mBAAmBA,IAAQ,IAAI;AAC7B,QAAIA,EAAM,WAAW;AAErB,iBAAWE,KAAQF;AACjB,QAAAG,EAAWD,GAAM,KAAK,QAAQ,aAAa,KAAK,QAAQ,gBAAgB,EAAE;AAAA,UACxE,CAACE,MAAS;AACR,iBAAK,QAAQ,YAAY,KAAK,QAAQ,SAASA,CAAI;AAAA,UACrD;AAAA,UACA,CAACC,MAAU;AACT,iBAAK,QAAQ,YAAY,KAAK,QAAQ,SAASA,CAAK,GACpD,QAAQ,KAAKA,CAAK;AAAA,UACpB;AAAA,QAAA;AAAA,EAGN;AAAA,EAEA,cAAc;AACZ,UAAML,IAAQ,KAAK,WAAW;AAC9B,SAAK,mBAAmBA,CAAK;AAAA,EAC/B;AACF;"}
+{"version":3,"file":"ImageUploader.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/modules/ImageUploader.ts"],"sourcesContent":["// @ts-nocheck\n// inspired by quill-image-uploader\n// credit: NoelOConnell\n\nimport { uploadFile } from '../helpers'\n\nclass ImageUploader {\n  constructor(quill, options) {\n    this.quill = quill\n    this.options = options\n    this.range = null\n    this.placeholderDelta = null\n\n    if (!this.options.project) console.warn('[Missing config] project name is required')\n\n    var toolbar = this.quill.getModule('toolbar')\n    if (toolbar) {\n      toolbar.addHandler('image', this.selectLocalImage.bind(this))\n    }\n\n    this.handlePaste = this.handlePaste.bind(this)\n\n    this.quill.root.addEventListener('paste', this.handlePaste, false)\n  }\n\n  selectLocalImage() {\n    this.quill.focus()\n    this.range = this.quill.getSelection()\n    this.fileHolder = document.createElement('input')\n    this.fileHolder.setAttribute('type', 'file')\n    this.fileHolder.setAttribute('multiple', 'true')\n    this.fileHolder.setAttribute('style', 'visibility:hidden')\n\n    this.fileHolder.onchange = this.fileChanged.bind(this)\n\n    document.body.appendChild(this.fileHolder)\n\n    this.fileHolder.click()\n\n    window.requestAnimationFrame(() => {\n      document.body.removeChild(this.fileHolder)\n    })\n  }\n\n  handlePaste(evt) {\n    let clipboard = evt.clipboardData || window.clipboardData\n\n    // IE 11 is .files other browsers are .items\n    if (clipboard && (clipboard.items || clipboard.files)) {\n      let items = clipboard.items || clipboard.files\n\n      const files = []\n      for (let i = 0; i < items.length; i++) {\n        let file = items[i].getAsFile ? items[i].getAsFile() : items[i]\n\n        if (file) {\n          this.quill.focus()\n          this.range = this.quill.getSelection()\n          evt.preventDefault()\n\n          files.push(file)\n        }\n      }\n\n      this.readAndUploadFiles(files)\n    }\n  }\n\n  readAndUploadFiles(files = []) {\n    if (files.length === 0) return\n\n    for (const file of files) {\n      uploadFile(file, this.options.projectName, this.options.onUploadProgress).then(\n        (data) => {\n          this.options.onUpload && this.options.onUpload(data)\n        },\n        (error) => {\n          this.options.onReject && this.options.onReject(error, file)\n          console.warn(error)\n        },\n      )\n    }\n  }\n\n  fileChanged() {\n    const files = this.fileHolder.files\n    this.readAndUploadFiles(files)\n  }\n}\n\nexport default ImageUploader\n"],"names":["ImageUploader","quill","options","toolbar","evt","clipboard","items","files","i","file","uploadFile","data","error"],"mappings":";AAMA,MAAMA,EAAc;AAAA,EAClB,YAAYC,GAAOC,GAAS;AAC1B,SAAK,QAAQD,GACb,KAAK,UAAUC,GACf,KAAK,QAAQ,MACb,KAAK,mBAAmB,MAEnB,KAAK,QAAQ,WAAS,QAAQ,KAAK,2CAA2C;AAEnF,QAAIC,IAAU,KAAK,MAAM,UAAU,SAAS;AAC5C,IAAIA,KACFA,EAAQ,WAAW,SAAS,KAAK,iBAAiB,KAAK,IAAI,CAAC,GAG9D,KAAK,cAAc,KAAK,YAAY,KAAK,IAAI,GAE7C,KAAK,MAAM,KAAK,iBAAiB,SAAS,KAAK,aAAa,EAAK;AAAA,EACnE;AAAA,EAEA,mBAAmB;AACjB,SAAK,MAAM,MAAA,GACX,KAAK,QAAQ,KAAK,MAAM,aAAA,GACxB,KAAK,aAAa,SAAS,cAAc,OAAO,GAChD,KAAK,WAAW,aAAa,QAAQ,MAAM,GAC3C,KAAK,WAAW,aAAa,YAAY,MAAM,GAC/C,KAAK,WAAW,aAAa,SAAS,mBAAmB,GAEzD,KAAK,WAAW,WAAW,KAAK,YAAY,KAAK,IAAI,GAErD,SAAS,KAAK,YAAY,KAAK,UAAU,GAEzC,KAAK,WAAW,MAAA,GAEhB,OAAO,sBAAsB,MAAM;AACjC,eAAS,KAAK,YAAY,KAAK,UAAU;AAAA,IAC3C,CAAC;AAAA,EACH;AAAA,EAEA,YAAYC,GAAK;AACf,QAAIC,IAAYD,EAAI,iBAAiB,OAAO;AAG5C,QAAIC,MAAcA,EAAU,SAASA,EAAU,QAAQ;AACrD,UAAIC,IAAQD,EAAU,SAASA,EAAU;AAEzC,YAAME,IAAQ,CAAA;AACd,eAASC,IAAI,GAAGA,IAAIF,EAAM,QAAQE,KAAK;AACrC,YAAIC,IAAOH,EAAME,CAAC,EAAE,YAAYF,EAAME,CAAC,EAAE,cAAcF,EAAME,CAAC;AAE9D,QAAIC,MACF,KAAK,MAAM,MAAA,GACX,KAAK,QAAQ,KAAK,MAAM,aAAA,GACxBL,EAAI,eAAA,GAEJG,EAAM,KAAKE,CAAI;AAAA,MAEnB;AAEA,WAAK,mBAAmBF,CAAK;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,mBAAmBA,IAAQ,IAAI;AAC7B,QAAIA,EAAM,WAAW;AAErB,iBAAWE,KAAQF;AACjB,QAAAG,EAAWD,GAAM,KAAK,QAAQ,aAAa,KAAK,QAAQ,gBAAgB,EAAE;AAAA,UACxE,CAACE,MAAS;AACR,iBAAK,QAAQ,YAAY,KAAK,QAAQ,SAASA,CAAI;AAAA,UACrD;AAAA,UACA,CAACC,MAAU;AACT,iBAAK,QAAQ,YAAY,KAAK,QAAQ,SAASA,GAAOH,CAAI,GAC1D,QAAQ,KAAKG,CAAK;AAAA,UACpB;AAAA,QAAA;AAAA,EAGN;AAAA,EAEA,cAAc;AACZ,UAAML,IAAQ,KAAK,WAAW;AAC9B,SAAK,mBAAmBA,CAAK;AAAA,EAC/B;AACF;"}

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("../../../../../../_virtual/jsx-runtime.cjs.js"),a=require("@ynput/ayon-react-components"),n=require("./FileUploadCard.styled.cjs.js"),p=require("clsx"),x=require("react"),z=require("../FileUploadPreview/FileUploadPreview.cjs.js"),S=require("../../context/FeedContext.cjs.js"),M=require("../../../../context/DetailsPanelContext.cjs.js"),O={description:["doc"],folder_zip:["zip"],code_blocks:["json","javascript","python","html","css",".py",".js",".html",".css",".json",".ts"],brush:[".psd",".ai",".xd",".sketch"],"3d_rotation":[".mb",".ma",".c4d",".blend",".max",".3ds",".lwo",".lws",".lxo",".hip",".hda"],theaters:[".aep",".tpl",".clip",".nk",".fusion",".prproj",".spsm",".drp"],picture_as_pdf:["pdf",".pdf"],image:["image",".png",".jpg",".jpeg",".gif",".svg",".webp"],videocam:["video",".mp4",".mov",".avi",".mkv",".webm",".mxf"],business_center:["application"],audio_file:["audio"],text_snippet:["text"],filter_none:["sequence"],font_download:["font"],deployed_code:["model",".obj",".abc",".stl",".fbx",".gltf",".glb",".usd"]},W=m=>{for(const[o,r]of Object.entries(O))if(r.some(s=>m.includes(s)))return o;return"draft"},$=({name:m,mime:o,src:r,unsavedAnnotation:s,savedAnnotation:d,size:w,progress:u,onRemove:j,isCompact:_,isDownloadable:c=!1,onExpand:y,disableExpand:E,onJumpTo:C,className:v,...F})=>{const k=u&&u<100,[q,I]=x.useState(!1),{feedAnnotationsEnabled:P}=M.useDetailsPanelContext(),{entities:R}=S.useFeedContext(),h=m.split("."),f=h.pop()||"",B=h.join("."),i=z.isFilePreviewable(o||"."+f),U=o?.includes("image/")||!!s,N=e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("span",{className:"size",children:a.getFileSizeString(w)}),e.jsxRuntimeExports.jsx(a.Icon,{icon:"download",className:"download-icon"})]}),t=x.useMemo(()=>s??d,[s,d]),b=x.useMemo(()=>R.at(0),[R]),l=x.useMemo(()=>{if(!t?.range)return[1,1];if(!b?.attrib)return t?.range??[1,1];const{frameStart:g}=b?.attrib;return Number.isNaN(g)?t?.range??[1,1]:[g-1+t.range[0],g-1+t.range[1]]},[t]);return e.jsxRuntimeExports.jsxs(n.File,{className:p(v,{compact:_,isDownloadable:c,isPreviewable:i,isUnsavedAnnotation:!!s}),...F,children:[e.jsxRuntimeExports.jsxs(n.ContentWrapper,{className:p("content-wrapper",{isPreviewable:i,isUnsavedAnnotation:!!s}),children:[e.jsxRuntimeExports.jsx(a.Icon,{icon:W(o||"."+f),className:"type-icon"}),U&&r&&e.jsxRuntimeExports.jsx(n.ImageWrapper,{className:p({"image-wrapper":!0,isDownloadable:c||i||s}),children:e.jsxRuntimeExports.jsx("img",{src:r,onError:()=>I(!0),style:{display:q?"none":"block"}})}),e.jsxRuntimeExports.jsxs(n.Buttons,{className:"expand-buttons",children:[i&&!E&&e.jsxRuntimeExports.jsx(n.ExpandButton,{"data-tooltip":"Open preview",icon:"open_in_full",variant:"nav",onClick:y}),(s||P&&d)&&e.jsxRuntimeExports.jsx(n.ExpandButton,{"data-tooltip":"Jump to annotation",icon:"play_circle",variant:"nav",onClick:C})]})]}),e.jsxRuntimeExports.jsxs(n.Footer,{className:p({inProgress:k,isPreviewable:i&&!E,isDownloadable:c}),children:[e.jsxRuntimeExports.jsx("span",{className:"progress",style:{right:`${100-u}%`}}),e.jsxRuntimeExports.jsx("div",{className:"name-wrapper",children:t?e.jsxRuntimeExports.jsxs("span",{className:"name",children:[e.jsxRuntimeExports.jsx(a.Icon,{icon:"draw"}),l[0],l[1]!==l[0]&&` - ${l[1]}`]}):e.jsxRuntimeExports.jsxs("span",{className:"name",children:[B,e.jsxRuntimeExports.jsxs("span",{className:"extension",children:[".",f]})]})}),c&&(j?e.jsxRuntimeExports.jsx("div",{className:"download",children:N}):e.jsxRuntimeExports.jsx("a",{href:r,target:"_blank",rel:"noopener noreferrer",className:"download",children:N}))]}),j&&e.jsxRuntimeExports.jsx(a.Button,{className:"remove",onClick:j,icon:"close"})]})};module.exports=$;
+"use strict";const e=require("../../../../../../_virtual/jsx-runtime.cjs.js"),c=require("@ynput/ayon-react-components"),t=require("./FileUploadCard.styled.cjs.js"),l=require("clsx"),p=require("react"),W=require("../FileUploadPreview/FileUploadPreview.cjs.js"),$=require("../../context/FeedContext.cjs.js"),O=require("../../../../context/DetailsPanelContext.cjs.js"),V={description:["doc"],folder_zip:["zip"],code_blocks:["json","javascript","python","html","css",".py",".js",".html",".css",".json",".ts"],brush:[".psd",".ai",".xd",".sketch"],"3d_rotation":[".mb",".ma",".c4d",".blend",".max",".3ds",".lwo",".lws",".lxo",".hip",".hda"],theaters:[".aep",".tpl",".clip",".nk",".fusion",".prproj",".spsm",".drp"],picture_as_pdf:["pdf",".pdf"],image:["image",".png",".jpg",".jpeg",".gif",".svg",".webp"],videocam:["video",".mp4",".mov",".avi",".mkv",".webm",".mxf"],business_center:["application"],audio_file:["audio"],text_snippet:["text"],filter_none:["sequence"],font_download:["font"],deployed_code:["model",".obj",".abc",".stl",".fbx",".gltf",".glb",".usd"]},D=m=>{for(const[r,n]of Object.entries(V))if(n.some(s=>m.includes(s)))return r;return"draft"},J=({name:m,mime:r,src:n,unsavedAnnotation:s,savedAnnotation:d,size:y,progress:u,onRemove:j,isCompact:v,isDownloadable:a=!1,onExpand:C,disableExpand:g,onJumpTo:F,className:k,...I})=>{const P=u&&u<100,[q,B]=p.useState(!1),[R,S]=p.useState(!1),{feedAnnotationsEnabled:U}=O.useDetailsPanelContext(),{entities:h}=$.useFeedContext(),N=m.split("."),E=N.pop()||"",z=N.join("."),i=W.isFilePreviewable(r||"."+E),M=r?.includes("image/")||!!s,b=!!r?.includes("video/")&&!s&&n?`${n}/thumbnail`:void 0,w=e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("span",{className:"size",children:c.getFileSizeString(y)}),e.jsxRuntimeExports.jsx(c.Icon,{icon:"download",className:"download-icon"})]}),o=p.useMemo(()=>s??d,[s,d]),_=p.useMemo(()=>h.at(0),[h]),x=p.useMemo(()=>{if(!o?.range)return[1,1];if(!_?.attrib)return o?.range??[1,1];const{frameStart:f}=_?.attrib;return isNaN(f)?o?.range??[1,1]:[f-1+o.range[0],f-1+o.range[1]]},[o]);return e.jsxRuntimeExports.jsxs(t.File,{className:l(k,{compact:v,isDownloadable:a,isPreviewable:i,isUnsavedAnnotation:!!s}),...I,children:[e.jsxRuntimeExports.jsxs(t.ContentWrapper,{className:l("content-wrapper",{isPreviewable:i,isUnsavedAnnotation:!!s}),children:[e.jsxRuntimeExports.jsx(c.Icon,{icon:D(r||"."+E),className:"type-icon"}),M&&n&&e.jsxRuntimeExports.jsx(t.ImageWrapper,{className:l({"image-wrapper":!0,isDownloadable:a||i||s}),children:e.jsxRuntimeExports.jsx("img",{src:n,onError:()=>B(!0),style:{display:q?"none":"block"}})}),b&&e.jsxRuntimeExports.jsxs(t.ImageWrapper,{className:l({"image-wrapper":!0,isDownloadable:a||i,posterError:R}),children:[!R&&e.jsxRuntimeExports.jsx("img",{src:b,onError:()=>S(!0)}),e.jsxRuntimeExports.jsx(t.PlayIcon,{})]}),e.jsxRuntimeExports.jsxs(t.Buttons,{className:"expand-buttons",children:[i&&!g&&e.jsxRuntimeExports.jsx(t.ExpandButton,{"data-tooltip":"Open preview",icon:"open_in_full",variant:"nav",onClick:C}),(s||U&&d)&&e.jsxRuntimeExports.jsx(t.ExpandButton,{"data-tooltip":"Jump to annotation",icon:"play_circle",variant:"nav",onClick:F})]})]}),e.jsxRuntimeExports.jsxs(t.Footer,{className:l({inProgress:P,isPreviewable:i&&!g,isDownloadable:a}),children:[e.jsxRuntimeExports.jsx("span",{className:"progress",style:{right:`${100-u}%`}}),e.jsxRuntimeExports.jsx("div",{className:"name-wrapper",children:o?e.jsxRuntimeExports.jsxs("span",{className:"name",children:[e.jsxRuntimeExports.jsx(c.Icon,{icon:"draw"}),x[0],x[1]!==x[0]&&` - ${x[1]}`]}):e.jsxRuntimeExports.jsxs("span",{className:"name",children:[z,e.jsxRuntimeExports.jsxs("span",{className:"extension",children:[".",E]})]})}),a&&(j?e.jsxRuntimeExports.jsx("div",{className:"download",children:w}):e.jsxRuntimeExports.jsx("a",{href:n,target:"_blank",rel:"noopener noreferrer",className:"download",children:w}))]}),j&&e.jsxRuntimeExports.jsx(c.Button,{className:"remove",onClick:j,icon:"close"})]})};module.exports=J;
 //# sourceMappingURL=FileUploadCard.cjs.js.map

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCard.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.tsx"],"sourcesContent":["import { Button, getFileSizeString, Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './FileUploadCard.styled'\nimport clsx from 'clsx'\nimport { useMemo, useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport type { SavedAnnotationMetadata } from '../../index'\nimport { useFeedContext } from '../../context/FeedContext'\nimport { useDetailsPanelContext } from '@shared/context/DetailsPanelContext'\nimport { AnnotationPreview } from '../CommentInput/hooks/useAnnotationsSync'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  unsavedAnnotation?: AnnotationPreview\n  savedAnnotation?: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  disableExpand?: boolean\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  unsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  disableExpand,\n  onJumpTo,\n  className,\n  ...props\n}: FileUploadCardProps) => {\n  const inProgress = progress && progress < 100\n\n  const [imageError, setImageError] = useState(false)\n  const { feedAnnotationsEnabled } = useDetailsPanelContext()\n  const { entities } = useFeedContext()\n\n  // split name and file extension\n  const nameParts = name.split('.')\n  const extension = nameParts.pop() || ''\n  const fileName = nameParts.join('.')\n\n  const isPreviewable = isFilePreviewable(mime || '.' + extension)\n  const isImage = mime?.includes('image/') || Boolean(unsavedAnnotation)\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  const someAnnotation = useMemo(\n    () => unsavedAnnotation ?? savedAnnotation,\n    [unsavedAnnotation, savedAnnotation],\n  )\n\n  const firstEntity = useMemo(() => {\n    return entities.at(0)\n  }, [entities])\n\n  const annotationDisplayRange = useMemo(() => {\n    if (!someAnnotation?.range) {\n      return [1, 1]\n    }\n\n    if (!firstEntity?.attrib) {\n      return someAnnotation?.range ?? [1, 1]\n    }\n\n    const { frameStart } = firstEntity?.attrib\n    if (Number.isNaN(frameStart)) {\n      return someAnnotation?.range ?? [1, 1]\n    }\n\n    return [frameStart - 1 + someAnnotation.range[0], frameStart - 1 + someAnnotation.range[1]]\n  }, [someAnnotation])\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation: Boolean(unsavedAnnotation),\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', {\n          isPreviewable,\n          isUnsavedAnnotation: Boolean(unsavedAnnotation),\n        })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && !disableExpand && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(unsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer\n        className={clsx({\n          inProgress,\n          isPreviewable: isPreviewable && !disableExpand,\n          isDownloadable,\n        })}\n      >\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          {someAnnotation ? (\n            <span className=\"name\">\n              <Icon icon=\"draw\" />\n              {annotationDisplayRange[0]}\n              {annotationDisplayRange[1] !== annotationDisplayRange[0] &&\n                ` - ${annotationDisplayRange[1]}`}\n            </span>\n          ) : (\n            <span className=\"name\">\n              {fileName}\n              <span className=\"extension\">.{extension}</span>\n            </span>\n          )}\n        </div>\n\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} target=\"_blank\" rel=\"noopener noreferrer\" className=\"download\">\n              {downloadComponent}\n            </a>\n          ) : (\n            <div className=\"download\">{downloadComponent}</div>\n          ))}\n      </Styled.Footer>\n      {onRemove && <Button className=\"remove\" onClick={onRemove} icon=\"close\" />}\n    </Styled.File>\n  )\n}\n\nexport default FileUploadCard\n"],"names":["fileIcons","getIconForType","type","icon","keywords","keyword","FileUploadCard","name","mime","src","unsavedAnnotation","savedAnnotation","size","progress","onRemove","isCompact","isDownloadable","onExpand","disableExpand","onJumpTo","className","props","inProgress","imageError","setImageError","useState","feedAnnotationsEnabled","useDetailsPanelContext","entities","useFeedContext","nameParts","extension","fileName","isPreviewable","isFilePreviewable","isImage","downloadComponent","jsxs","Fragment","jsx","getFileSizeString","Icon","someAnnotation","useMemo","firstEntity","annotationDisplayRange","frameStart","Styled.File","clsx","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Buttons","Styled.ExpandButton","Styled.Footer","Button"],"mappings":"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"}
+{"version":3,"file":"FileUploadCard.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.tsx"],"sourcesContent":["import { Button, getFileSizeString, Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './FileUploadCard.styled'\nimport clsx from 'clsx'\nimport { useMemo, useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport type { SavedAnnotationMetadata } from '../../index'\nimport { useFeedContext } from '../../context/FeedContext'\nimport { useDetailsPanelContext } from '@shared/context/DetailsPanelContext'\nimport { AnnotationPreview } from '../CommentInput/hooks/useAnnotationsSync'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  unsavedAnnotation?: AnnotationPreview\n  savedAnnotation?: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  disableExpand?: boolean\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  unsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  disableExpand,\n  onJumpTo,\n  className,\n  ...props\n}: FileUploadCardProps) => {\n  const inProgress = progress && progress < 100\n\n  const [imageError, setImageError] = useState(false)\n  const [posterError, setPosterError] = useState(false)\n  const { feedAnnotationsEnabled } = useDetailsPanelContext()\n  const { entities } = useFeedContext()\n\n  // split name and file extension\n  const nameParts = name.split('.')\n  const extension = nameParts.pop() || ''\n  const fileName = nameParts.join('.')\n\n  const isPreviewable = isFilePreviewable(mime || '.' + extension)\n  const isImage = mime?.includes('image/') || Boolean(unsavedAnnotation)\n  const isVideo = Boolean(mime?.includes('video/')) && !unsavedAnnotation\n  const posterSrc = isVideo && src ? `${src}/thumbnail` : undefined\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  const someAnnotation = useMemo(\n    () => unsavedAnnotation ?? savedAnnotation,\n    [unsavedAnnotation, savedAnnotation],\n  )\n\n  const firstEntity = useMemo(() => {\n    return entities.at(0)\n  }, [entities])\n\n  const annotationDisplayRange = useMemo(() => {\n    if (!someAnnotation?.range) {\n      return [1, 1]\n    }\n\n    if (!firstEntity?.attrib) {\n      return someAnnotation?.range ?? [1, 1]\n    }\n\n    const { frameStart } = firstEntity?.attrib\n    // using isNaN here because Number.isNaN(undefined) returns false\n    if (isNaN(frameStart)) {\n      return someAnnotation?.range ?? [1, 1]\n    }\n\n    return [frameStart - 1 + someAnnotation.range[0], frameStart - 1 + someAnnotation.range[1]]\n  }, [someAnnotation])\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation: Boolean(unsavedAnnotation),\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', {\n          isPreviewable,\n          isUnsavedAnnotation: Boolean(unsavedAnnotation),\n        })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        {posterSrc && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable,\n              posterError,\n            })}\n          >\n            {!posterError && <img src={posterSrc} onError={() => setPosterError(true)} />}\n            <Styled.PlayIcon />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && !disableExpand && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(unsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer\n        className={clsx({\n          inProgress,\n          isPreviewable: isPreviewable && !disableExpand,\n          isDownloadable,\n        })}\n      >\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          {someAnnotation ? (\n            <span className=\"name\">\n              <Icon icon=\"draw\" />\n              {annotationDisplayRange[0]}\n              {annotationDisplayRange[1] !== annotationDisplayRange[0] &&\n                ` - ${annotationDisplayRange[1]}`}\n            </span>\n          ) : (\n            <span className=\"name\">\n              {fileName}\n              <span className=\"extension\">.{extension}</span>\n            </span>\n          )}\n        </div>\n\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} target=\"_blank\" rel=\"noopener noreferrer\" className=\"download\">\n              {downloadComponent}\n            </a>\n          ) : (\n            <div className=\"download\">{downloadComponent}</div>\n          ))}\n      </Styled.Footer>\n      {onRemove && <Button className=\"remove\" onClick={onRemove} icon=\"close\" />}\n    </Styled.File>\n  )\n}\n\nexport default FileUploadCard\n"],"names":["fileIcons","getIconForType","type","icon","keywords","keyword","FileUploadCard","name","mime","src","unsavedAnnotation","savedAnnotation","size","progress","onRemove","isCompact","isDownloadable","onExpand","disableExpand","onJumpTo","className","props","inProgress","imageError","setImageError","useState","posterError","setPosterError","feedAnnotationsEnabled","useDetailsPanelContext","entities","useFeedContext","nameParts","extension","fileName","isPreviewable","isFilePreviewable","isImage","posterSrc","downloadComponent","jsxs","Fragment","jsx","getFileSizeString","Icon","someAnnotation","useMemo","firstEntity","annotationDisplayRange","frameStart","Styled.File","clsx","Styled.ContentWrapper","Styled.ImageWrapper","Styled.PlayIcon","Styled.Buttons","Styled.ExpandButton","Styled.Footer","Button"],"mappings":"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"}

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.es.js

@@ -1,12 +1,12 @@
 import { j as e } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { getFileSizeString as O, Icon as j, Button as W } from "@ynput/ayon-react-components";
-import { File as $, ContentWrapper as q, ImageWrapper as J, Buttons as M, ExpandButton as _, Footer as T } from "./FileUploadCard.styled.es.js";
-import c from "clsx";
-import { useState as D, useMemo as g } from "react";
-import { isFilePreviewable as G } from "../FileUploadPreview/FileUploadPreview.es.js";
-import { useFeedContext as H } from "../../context/FeedContext.es.js";
-import { useDetailsPanelContext as K } from "../../../../context/DetailsPanelContext.es.js";
-const L = {
+import { getFileSizeString as J, Icon as j, Button as M } from "@ynput/ayon-react-components";
+import { File as T, ContentWrapper as D, ImageWrapper as v, PlayIcon as G, Buttons as H, ExpandButton as k, Footer as K } from "./FileUploadCard.styled.es.js";
+import i from "clsx";
+import { useState as E, useMemo as g } from "react";
+import { isFilePreviewable as L } from "../FileUploadPreview/FileUploadPreview.es.js";
+import { useFeedContext as Q } from "../../context/FeedContext.es.js";
+import { useDetailsPanelContext as R } from "../../../../context/DetailsPanelContext.es.js";
+const X = {
   // special cases
   description: ["doc"],
   folder_zip: ["zip"],
@@ -48,98 +48,112 @@ const L = {
   filter_none: ["sequence"],
   font_download: ["font"],
   deployed_code: ["model", ".obj", ".abc", ".stl", ".fbx", ".gltf", ".glb", ".usd"]
-}, Q = (l) => {
-  for (const [n, t] of Object.entries(L))
-    if (t.some((s) => l.includes(s)))
+}, Y = (l) => {
+  for (const [n, o] of Object.entries(X))
+    if (o.some((s) => l.includes(s)))
       return n;
   return "draft";
-}, oe = ({
+}, ie = ({
   name: l,
   mime: n,
-  src: t,
+  src: o,
   unsavedAnnotation: s,
   savedAnnotation: p,
-  size: y,
+  size: C,
   progress: m,
   onRemove: d,
-  isCompact: k,
-  isDownloadable: r = !1,
-  onExpand: v,
+  isCompact: F,
+  isDownloadable: a = !1,
+  onExpand: P,
   disableExpand: u,
-  onJumpTo: C,
-  className: F,
-  ...B
+  onJumpTo: B,
+  className: I,
+  ...S
 }) => {
-  const E = m && m < 100, [I, P] = D(!1), { feedAnnotationsEnabled: z } = K(), { entities: h } = H(), N = l.split("."), f = N.pop() || "", S = N.join("."), a = G(n || "." + f), U = n?.includes("image/") || !!s, b = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("span", { className: "size", children: O(y) }),
+  const z = m && m < 100, [U, $] = E(!1), [h, O] = E(!1), { feedAnnotationsEnabled: V } = R(), { entities: N } = Q(), b = l.split("."), f = b.pop() || "", W = b.join("."), t = L(n || "." + f), q = n?.includes("image/") || !!s, w = !!n?.includes("video/") && !s && o ? `${o}/thumbnail` : void 0, _ = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("span", { className: "size", children: J(C) }),
     /* @__PURE__ */ e.jsx(j, { icon: "download", className: "download-icon" })
-  ] }), o = g(
+  ] }), r = g(
     () => s ?? p,
     [s, p]
-  ), w = g(() => h.at(0), [h]), i = g(() => {
-    if (!o?.range)
+  ), y = g(() => N.at(0), [N]), c = g(() => {
+    if (!r?.range)
       return [1, 1];
-    if (!w?.attrib)
-      return o?.range ?? [1, 1];
-    const { frameStart: x } = w?.attrib;
-    return Number.isNaN(x) ? o?.range ?? [1, 1] : [x - 1 + o.range[0], x - 1 + o.range[1]];
-  }, [o]);
+    if (!y?.attrib)
+      return r?.range ?? [1, 1];
+    const { frameStart: x } = y?.attrib;
+    return isNaN(x) ? r?.range ?? [1, 1] : [x - 1 + r.range[0], x - 1 + r.range[1]];
+  }, [r]);
   return /* @__PURE__ */ e.jsxs(
-    $,
+    T,
     {
-      className: c(F, {
-        compact: k,
-        isDownloadable: r,
-        isPreviewable: a,
+      className: i(I, {
+        compact: F,
+        isDownloadable: a,
+        isPreviewable: t,
         isUnsavedAnnotation: !!s
       }),
-      ...B,
+      ...S,
       children: [
         /* @__PURE__ */ e.jsxs(
-          q,
+          D,
           {
-            className: c("content-wrapper", {
-              isPreviewable: a,
+            className: i("content-wrapper", {
+              isPreviewable: t,
               isUnsavedAnnotation: !!s
             }),
             children: [
-              /* @__PURE__ */ e.jsx(j, { icon: Q(n || "." + f), className: "type-icon" }),
-              U && t && /* @__PURE__ */ e.jsx(
-                J,
+              /* @__PURE__ */ e.jsx(j, { icon: Y(n || "." + f), className: "type-icon" }),
+              q && o && /* @__PURE__ */ e.jsx(
+                v,
                 {
-                  className: c({
+                  className: i({
                     "image-wrapper": !0,
-                    isDownloadable: r || a || s
+                    isDownloadable: a || t || s
                   }),
                   children: /* @__PURE__ */ e.jsx(
                     "img",
                     {
-                      src: t,
-                      onError: () => P(!0),
+                      src: o,
+                      onError: () => $(!0),
                       style: {
-                        display: I ? "none" : "block"
+                        display: U ? "none" : "block"
                       }
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ e.jsxs(M, { className: "expand-buttons", children: [
-                a && !u && /* @__PURE__ */ e.jsx(
-                  _,
+              w && /* @__PURE__ */ e.jsxs(
+                v,
+                {
+                  className: i({
+                    "image-wrapper": !0,
+                    isDownloadable: a || t,
+                    posterError: h
+                  }),
+                  children: [
+                    !h && /* @__PURE__ */ e.jsx("img", { src: w, onError: () => O(!0) }),
+                    /* @__PURE__ */ e.jsx(G, {})
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e.jsxs(H, { className: "expand-buttons", children: [
+                t && !u && /* @__PURE__ */ e.jsx(
+                  k,
                   {
                     "data-tooltip": "Open preview",
                     icon: "open_in_full",
                     variant: "nav",
-                    onClick: v
+                    onClick: P
                   }
                 ),
-                (s || z && p) && /* @__PURE__ */ e.jsx(
-                  _,
+                (s || V && p) && /* @__PURE__ */ e.jsx(
+                  k,
                   {
                     "data-tooltip": "Jump to annotation",
                     icon: "play_circle",
                     variant: "nav",
-                    onClick: C
+                    onClick: B
                   }
                 )
               ] })
@@ -147,36 +161,36 @@ const L = {
           }
         ),
         /* @__PURE__ */ e.jsxs(
-          T,
+          K,
           {
-            className: c({
-              inProgress: E,
-              isPreviewable: a && !u,
-              isDownloadable: r
+            className: i({
+              inProgress: z,
+              isPreviewable: t && !u,
+              isDownloadable: a
             }),
             children: [
               /* @__PURE__ */ e.jsx("span", { className: "progress", style: { right: `${100 - m}%` } }),
-              /* @__PURE__ */ e.jsx("div", { className: "name-wrapper", children: o ? /* @__PURE__ */ e.jsxs("span", { className: "name", children: [
+              /* @__PURE__ */ e.jsx("div", { className: "name-wrapper", children: r ? /* @__PURE__ */ e.jsxs("span", { className: "name", children: [
                 /* @__PURE__ */ e.jsx(j, { icon: "draw" }),
-                i[0],
-                i[1] !== i[0] && ` - ${i[1]}`
+                c[0],
+                c[1] !== c[0] && ` - ${c[1]}`
               ] }) : /* @__PURE__ */ e.jsxs("span", { className: "name", children: [
-                S,
+                W,
                 /* @__PURE__ */ e.jsxs("span", { className: "extension", children: [
                   ".",
                   f
                 ] })
               ] }) }),
-              r && (d ? /* @__PURE__ */ e.jsx("div", { className: "download", children: b }) : /* @__PURE__ */ e.jsx("a", { href: t, target: "_blank", rel: "noopener noreferrer", className: "download", children: b }))
+              a && (d ? /* @__PURE__ */ e.jsx("div", { className: "download", children: _ }) : /* @__PURE__ */ e.jsx("a", { href: o, target: "_blank", rel: "noopener noreferrer", className: "download", children: _ }))
             ]
           }
         ),
-        d && /* @__PURE__ */ e.jsx(W, { className: "remove", onClick: d, icon: "close" })
+        d && /* @__PURE__ */ e.jsx(M, { className: "remove", onClick: d, icon: "close" })
       ]
     }
   );
 };
 export {
-  oe as default
+  ie as default
 };
 //# sourceMappingURL=FileUploadCard.es.js.map

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCard.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.tsx"],"sourcesContent":["import { Button, getFileSizeString, Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './FileUploadCard.styled'\nimport clsx from 'clsx'\nimport { useMemo, useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport type { SavedAnnotationMetadata } from '../../index'\nimport { useFeedContext } from '../../context/FeedContext'\nimport { useDetailsPanelContext } from '@shared/context/DetailsPanelContext'\nimport { AnnotationPreview } from '../CommentInput/hooks/useAnnotationsSync'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  unsavedAnnotation?: AnnotationPreview\n  savedAnnotation?: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  disableExpand?: boolean\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  unsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  disableExpand,\n  onJumpTo,\n  className,\n  ...props\n}: FileUploadCardProps) => {\n  const inProgress = progress && progress < 100\n\n  const [imageError, setImageError] = useState(false)\n  const { feedAnnotationsEnabled } = useDetailsPanelContext()\n  const { entities } = useFeedContext()\n\n  // split name and file extension\n  const nameParts = name.split('.')\n  const extension = nameParts.pop() || ''\n  const fileName = nameParts.join('.')\n\n  const isPreviewable = isFilePreviewable(mime || '.' + extension)\n  const isImage = mime?.includes('image/') || Boolean(unsavedAnnotation)\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  const someAnnotation = useMemo(\n    () => unsavedAnnotation ?? savedAnnotation,\n    [unsavedAnnotation, savedAnnotation],\n  )\n\n  const firstEntity = useMemo(() => {\n    return entities.at(0)\n  }, [entities])\n\n  const annotationDisplayRange = useMemo(() => {\n    if (!someAnnotation?.range) {\n      return [1, 1]\n    }\n\n    if (!firstEntity?.attrib) {\n      return someAnnotation?.range ?? [1, 1]\n    }\n\n    const { frameStart } = firstEntity?.attrib\n    if (Number.isNaN(frameStart)) {\n      return someAnnotation?.range ?? [1, 1]\n    }\n\n    return [frameStart - 1 + someAnnotation.range[0], frameStart - 1 + someAnnotation.range[1]]\n  }, [someAnnotation])\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation: Boolean(unsavedAnnotation),\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', {\n          isPreviewable,\n          isUnsavedAnnotation: Boolean(unsavedAnnotation),\n        })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && !disableExpand && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(unsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer\n        className={clsx({\n          inProgress,\n          isPreviewable: isPreviewable && !disableExpand,\n          isDownloadable,\n        })}\n      >\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          {someAnnotation ? (\n            <span className=\"name\">\n              <Icon icon=\"draw\" />\n              {annotationDisplayRange[0]}\n              {annotationDisplayRange[1] !== annotationDisplayRange[0] &&\n                ` - ${annotationDisplayRange[1]}`}\n            </span>\n          ) : (\n            <span className=\"name\">\n              {fileName}\n              <span className=\"extension\">.{extension}</span>\n            </span>\n          )}\n        </div>\n\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} target=\"_blank\" rel=\"noopener noreferrer\" className=\"download\">\n              {downloadComponent}\n            </a>\n          ) : (\n            <div className=\"download\">{downloadComponent}</div>\n          ))}\n      </Styled.Footer>\n      {onRemove && <Button className=\"remove\" onClick={onRemove} icon=\"close\" />}\n    </Styled.File>\n  )\n}\n\nexport default FileUploadCard\n"],"names":["fileIcons","getIconForType","type","icon","keywords","keyword","FileUploadCard","name","mime","src","unsavedAnnotation","savedAnnotation","size","progress","onRemove","isCompact","isDownloadable","onExpand","disableExpand","onJumpTo","className","props","inProgress","imageError","setImageError","useState","feedAnnotationsEnabled","useDetailsPanelContext","entities","useFeedContext","nameParts","extension","fileName","isPreviewable","isFilePreviewable","isImage","downloadComponent","jsxs","Fragment","jsx","getFileSizeString","Icon","someAnnotation","useMemo","firstEntity","annotationDisplayRange","frameStart","Styled.File","clsx","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Buttons","Styled.ExpandButton","Styled.Footer","Button"],"mappings":"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"}
+{"version":3,"file":"FileUploadCard.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.tsx"],"sourcesContent":["import { Button, getFileSizeString, Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './FileUploadCard.styled'\nimport clsx from 'clsx'\nimport { useMemo, useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport type { SavedAnnotationMetadata } from '../../index'\nimport { useFeedContext } from '../../context/FeedContext'\nimport { useDetailsPanelContext } from '@shared/context/DetailsPanelContext'\nimport { AnnotationPreview } from '../CommentInput/hooks/useAnnotationsSync'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  unsavedAnnotation?: AnnotationPreview\n  savedAnnotation?: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  disableExpand?: boolean\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  unsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  disableExpand,\n  onJumpTo,\n  className,\n  ...props\n}: FileUploadCardProps) => {\n  const inProgress = progress && progress < 100\n\n  const [imageError, setImageError] = useState(false)\n  const [posterError, setPosterError] = useState(false)\n  const { feedAnnotationsEnabled } = useDetailsPanelContext()\n  const { entities } = useFeedContext()\n\n  // split name and file extension\n  const nameParts = name.split('.')\n  const extension = nameParts.pop() || ''\n  const fileName = nameParts.join('.')\n\n  const isPreviewable = isFilePreviewable(mime || '.' + extension)\n  const isImage = mime?.includes('image/') || Boolean(unsavedAnnotation)\n  const isVideo = Boolean(mime?.includes('video/')) && !unsavedAnnotation\n  const posterSrc = isVideo && src ? `${src}/thumbnail` : undefined\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  const someAnnotation = useMemo(\n    () => unsavedAnnotation ?? savedAnnotation,\n    [unsavedAnnotation, savedAnnotation],\n  )\n\n  const firstEntity = useMemo(() => {\n    return entities.at(0)\n  }, [entities])\n\n  const annotationDisplayRange = useMemo(() => {\n    if (!someAnnotation?.range) {\n      return [1, 1]\n    }\n\n    if (!firstEntity?.attrib) {\n      return someAnnotation?.range ?? [1, 1]\n    }\n\n    const { frameStart } = firstEntity?.attrib\n    // using isNaN here because Number.isNaN(undefined) returns false\n    if (isNaN(frameStart)) {\n      return someAnnotation?.range ?? [1, 1]\n    }\n\n    return [frameStart - 1 + someAnnotation.range[0], frameStart - 1 + someAnnotation.range[1]]\n  }, [someAnnotation])\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation: Boolean(unsavedAnnotation),\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', {\n          isPreviewable,\n          isUnsavedAnnotation: Boolean(unsavedAnnotation),\n        })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        {posterSrc && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable,\n              posterError,\n            })}\n          >\n            {!posterError && <img src={posterSrc} onError={() => setPosterError(true)} />}\n            <Styled.PlayIcon />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && !disableExpand && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(unsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer\n        className={clsx({\n          inProgress,\n          isPreviewable: isPreviewable && !disableExpand,\n          isDownloadable,\n        })}\n      >\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          {someAnnotation ? (\n            <span className=\"name\">\n              <Icon icon=\"draw\" />\n              {annotationDisplayRange[0]}\n              {annotationDisplayRange[1] !== annotationDisplayRange[0] &&\n                ` - ${annotationDisplayRange[1]}`}\n            </span>\n          ) : (\n            <span className=\"name\">\n              {fileName}\n              <span className=\"extension\">.{extension}</span>\n            </span>\n          )}\n        </div>\n\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} target=\"_blank\" rel=\"noopener noreferrer\" className=\"download\">\n              {downloadComponent}\n            </a>\n          ) : (\n            <div className=\"download\">{downloadComponent}</div>\n          ))}\n      </Styled.Footer>\n      {onRemove && <Button className=\"remove\" onClick={onRemove} icon=\"close\" />}\n    </Styled.File>\n  )\n}\n\nexport default FileUploadCard\n"],"names":["fileIcons","getIconForType","type","icon","keywords","keyword","FileUploadCard","name","mime","src","unsavedAnnotation","savedAnnotation","size","progress","onRemove","isCompact","isDownloadable","onExpand","disableExpand","onJumpTo","className","props","inProgress","imageError","setImageError","useState","posterError","setPosterError","feedAnnotationsEnabled","useDetailsPanelContext","entities","useFeedContext","nameParts","extension","fileName","isPreviewable","isFilePreviewable","isImage","posterSrc","downloadComponent","jsxs","Fragment","jsx","getFileSizeString","Icon","someAnnotation","useMemo","firstEntity","annotationDisplayRange","frameStart","Styled.File","clsx","Styled.ContentWrapper","Styled.ImageWrapper","Styled.PlayIcon","Styled.Buttons","Styled.ExpandButton","Styled.Footer","Button"],"mappings":"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"}

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@ynput/ayon-react-components"),o=require("styled-components"),n=o.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@ynput/ayon-react-components"),o=require("styled-components"),n=require("../../../../components/PlayableIcon/PlayableIcon.cjs.js"),t=o.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -144,7 +144,7 @@
       }
     }
   }
-`,t=o.div`
+`,r=o.div`
   position: relative;
   display: flex;
   justify-content: center;
@@ -171,7 +171,8 @@
       .expand-buttons {
         display: flex;
       }
-      .type-icon {
+      .type-icon,
+      .playable {
         display: none;
       }
     }
@@ -180,7 +181,7 @@
   &:hover .image-wrapper::after {
     opacity: 0.8;
   }
-`,r=o.div`
+`,a=o.div`
   position: absolute;
   inset: 0;
   display: flex;
@@ -203,6 +204,7 @@
     background-color: var(--md-sys-color-surface-container-lowest);
     opacity: 0;
     transition: opacity 0.1s ease;
+    pointer-events: none;
   }
 
   &.isDownloadable {
@@ -213,7 +215,12 @@
       }
     }
   }
-`,a=o.div`
+
+  /* failed thumbnail: let the videocam type icon show through */
+  &.posterError {
+    background-color: transparent;
+  }
+`,s=o.div`
   display: none;
   position: absolute;
   left: 0;
@@ -222,7 +229,7 @@
   height: calc(100% - 20px);
   width: 100%;
   gap: 0;
-`,s=o(e.Button)`
+`,l=o(e.Button)`
   height: 100%;
   width: 100%;
   border: none;
@@ -233,5 +240,17 @@
     background: none;
     opacity: 1;
   }
-`;exports.Buttons=a;exports.ContentWrapper=t;exports.ExpandButton=s;exports.File=n;exports.Footer=i;exports.ImageWrapper=r;
+`,c=o(n.PlayableIcon)`
+  --icon-size: 32px;
+  top: calc(50% - 10px);
+  left: 50%;
+  right: unset;
+  translate: -50% -50%;
+  z-index: 2;
+  pointer-events: none;
+
+  .icon {
+    font-size: var(--icon-size);
+  }
+`;exports.Buttons=s;exports.ContentWrapper=r;exports.ExpandButton=l;exports.File=t;exports.Footer=i;exports.ImageWrapper=a;exports.PlayIcon=c;
 //# sourceMappingURL=FileUploadCard.styled.cjs.js.map

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCard.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const File = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--border-radius-m);\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  z-index: 0;\n  user-select: none;\n\n  height: 105px;\n\n  &.compact {\n    height: 75px;\n  }\n\n  .icon {\n    font-size: 30px;\n  }\n\n  .remove {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n      color: var(--md-sys-color-on-error-container);\n    }\n\n    .icon {\n      font-size: 20px;\n    }\n  }\n\n  /* move icon up slightly to center it */\n  .type-icon {\n    margin-top: -20px;\n  }\n\n  /* set download default color outline */\n  .download,\n  .download-icon {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const Footer = styled.footer`\n  background-color: var(--md-sys-color-surface-container-low);\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--padding-s);\n  overflow: hidden;\n  color: var(--md-sys-color-on-surface);\n\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n\n  transition: padding 0.2s ease;\n\n  span {\n    font-size: 12px;\n  }\n\n  .name-wrapper {\n    overflow: hidden;\n  }\n\n  .download {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    display: none;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .name {\n    position: relative;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 20;\n    display: flex;\n    align-items: center;\n\n    .icon {\n      font-size: inherit;\n      margin-right: var(--padding-s);\n      vertical-align: text-top;\n    }\n  }\n\n  .extension {\n    z-index: 20;\n    min-width: fit-content;\n    overflow: hidden;\n  }\n\n  .progress {\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-primary-container);\n    z-index: 10;\n\n    transition: right 0.3s;\n\n    display: none;\n  }\n\n  &.inProgress {\n    .progress {\n      display: block;\n    }\n  }\n\n  .download-icon {\n    font-size: 20px;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      cursor: pointer;\n\n      padding: var(--padding-m) var(--padding-s);\n\n      background-color: var(--md-sys-color-surface-container-low-hover);\n\n      .download,\n      .download-icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* reveal size and download */\n      .download {\n        display: flex;\n      }\n      .name-wrapper,\n      .extension {\n        display: none;\n      }\n    }\n  }\n`\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  flex: 1;\n\n  .icon {\n    user-select: none;\n  }\n\n  .download-icon {\n    display: none;\n  }\n\n  /* previewable styles (it can be expanded) */\n  /* on hover it shows the expand buttons */\n  &.isPreviewable,\n  &.isUnsavedAnnotation {\n    cursor: pointer;\n\n    &:hover {\n      .expand-buttons {\n        display: flex;\n      }\n      .type-icon {\n        display: none;\n      }\n    }\n  }\n\n  &:hover .image-wrapper::after {\n    opacity: 0.8;\n  }\n`\n\nexport const ImageWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  img {\n    position: absolute;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    height: calc(100% - 20px);\n\n    transition: scale 0.2s ease;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    opacity: 0;\n    transition: opacity 0.1s ease;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      .icon {\n        display: block;\n        z-index: 10;\n      }\n    }\n  }\n`\n\nexport const Buttons = styled.div`\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: none;\n  height: calc(100% - 20px);\n  width: 100%;\n  gap: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n  height: 100%;\n  width: 100%;\n  border: none;\n  opacity: 0.5;\n  transition: opacity 250ms;\n\n  &:hover {\n    background: none;\n    opacity: 1;\n  }\n`\n"],"names":["File","styled","Footer","ContentWrapper","ImageWrapper","Buttons","ExpandButton","Button"],"mappings":"+JAGaA,EAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgDdC,EAASD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsGhBE,EAAiBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsCxBG,EAAeH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmCtBI,EAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWjBK,EAAeL,EAAOM,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"FileUploadCard.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\nimport { PlayableIcon } from '@shared/components/PlayableIcon/PlayableIcon'\n\nexport const File = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--border-radius-m);\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  z-index: 0;\n  user-select: none;\n\n  height: 105px;\n\n  &.compact {\n    height: 75px;\n  }\n\n  .icon {\n    font-size: 30px;\n  }\n\n  .remove {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n      color: var(--md-sys-color-on-error-container);\n    }\n\n    .icon {\n      font-size: 20px;\n    }\n  }\n\n  /* move icon up slightly to center it */\n  .type-icon {\n    margin-top: -20px;\n  }\n\n  /* set download default color outline */\n  .download,\n  .download-icon {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const Footer = styled.footer`\n  background-color: var(--md-sys-color-surface-container-low);\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--padding-s);\n  overflow: hidden;\n  color: var(--md-sys-color-on-surface);\n\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n\n  transition: padding 0.2s ease;\n\n  span {\n    font-size: 12px;\n  }\n\n  .name-wrapper {\n    overflow: hidden;\n  }\n\n  .download {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    display: none;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .name {\n    position: relative;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 20;\n    display: flex;\n    align-items: center;\n\n    .icon {\n      font-size: inherit;\n      margin-right: var(--padding-s);\n      vertical-align: text-top;\n    }\n  }\n\n  .extension {\n    z-index: 20;\n    min-width: fit-content;\n    overflow: hidden;\n  }\n\n  .progress {\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-primary-container);\n    z-index: 10;\n\n    transition: right 0.3s;\n\n    display: none;\n  }\n\n  &.inProgress {\n    .progress {\n      display: block;\n    }\n  }\n\n  .download-icon {\n    font-size: 20px;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      cursor: pointer;\n\n      padding: var(--padding-m) var(--padding-s);\n\n      background-color: var(--md-sys-color-surface-container-low-hover);\n\n      .download,\n      .download-icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* reveal size and download */\n      .download {\n        display: flex;\n      }\n      .name-wrapper,\n      .extension {\n        display: none;\n      }\n    }\n  }\n`\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  flex: 1;\n\n  .icon {\n    user-select: none;\n  }\n\n  .download-icon {\n    display: none;\n  }\n\n  /* previewable styles (it can be expanded) */\n  /* on hover it shows the expand buttons */\n  &.isPreviewable,\n  &.isUnsavedAnnotation {\n    cursor: pointer;\n\n    &:hover {\n      .expand-buttons {\n        display: flex;\n      }\n      .type-icon,\n      .playable {\n        display: none;\n      }\n    }\n  }\n\n  &:hover .image-wrapper::after {\n    opacity: 0.8;\n  }\n`\n\nexport const ImageWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  img {\n    position: absolute;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    height: calc(100% - 20px);\n\n    transition: scale 0.2s ease;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    opacity: 0;\n    transition: opacity 0.1s ease;\n    pointer-events: none;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      .icon {\n        display: block;\n        z-index: 10;\n      }\n    }\n  }\n\n  /* failed thumbnail: let the videocam type icon show through */\n  &.posterError {\n    background-color: transparent;\n  }\n`\n\nexport const Buttons = styled.div`\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: none;\n  height: calc(100% - 20px);\n  width: 100%;\n  gap: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n  height: 100%;\n  width: 100%;\n  border: none;\n  opacity: 0.5;\n  transition: opacity 250ms;\n\n  &:hover {\n    background: none;\n    opacity: 1;\n  }\n`\n\n/* the footer overlays the bottom 20px, so shift the glyph up to sit centered on the poster */\nexport const PlayIcon = styled(PlayableIcon)`\n  --icon-size: 32px;\n  top: calc(50% - 10px);\n  left: 50%;\n  right: unset;\n  translate: -50% -50%;\n  z-index: 2;\n  pointer-events: none;\n\n  .icon {\n    font-size: var(--icon-size);\n  }\n`\n"],"names":["File","styled","Footer","ContentWrapper","ImageWrapper","Buttons","ExpandButton","Button","PlayIcon","PlayableIcon"],"mappings":"oOAIaA,EAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgDdC,EAASD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsGhBE,EAAiBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuCxBG,EAAeH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyCtBI,EAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWjBK,EAAeL,EAAOM,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc5BC,EAAWP,EAAOQ,cAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}