npm - @ynput/ayon-frontend-shared - Versions diffs - 0.2.9 → 0.2.10 - Mend

@ynput/ayon-frontend-shared 0.2.9 → 0.2.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.es.js CHANGED Viewed

@@ -6,37 +6,49 @@ const useAnnotationsUpload = ({ projectName, onSuccess }) => {
   const uploadAnnotations = async (annotations) => {
     try {
       const uploadPromises = annotations.map(async (annotation) => {
-        const blob = await (exportAnnotationComposite == null ? void 0 : exportAnnotationComposite(annotation.id));
-        if (!blob) {
+        const composite = await (exportAnnotationComposite == null ? void 0 : exportAnnotationComposite(annotation.id));
+        if (!composite) {
           throw new Error(`Exporting composite image for annotation ${annotation.id} failed`);
         }
-        const file = new File([blob], annotation.name, {
+        const compositeFile = new File([composite], annotation.name, {
           type: "image/png"
         });
-        return uploadFile(file, projectName, () => {
+        const transparent = await fetch(annotation.annotationData).then((r) => r.blob());
+        const transparentFile = new File([transparent], `annotation-${annotation.name}`, {
+          type: "image/png"
         });
+        const uploads = await Promise.all([
+          uploadFile(compositeFile, projectName, () => {
+          }),
+          uploadFile(transparentFile, projectName, () => {
+          })
+        ]);
+        return { annotation, uploads };
       });
       const res = await Promise.allSettled(uploadPromises);
       const successfulFiles = [];
+      const metadata = [];
       res.forEach((result) => {
-        var _a;
         if (result.status === "fulfilled") {
-          const newFile = onSuccess(result.value);
-          successfulFiles.push(newFile);
-          const annotationId = (_a = annotations.find(
-            (annotation) => annotation.name === result.value.file.name
-          )) == null ? void 0 : _a.id;
-          if (annotationId) {
-            removeAnnotation == null ? void 0 : removeAnnotation(annotationId);
-          }
+          const { uploads, annotation } = result.value;
+          uploads.forEach((upload) => {
+            successfulFiles.push(onSuccess(upload));
+          });
+          metadata.push({
+            range: annotation.range,
+            id: annotation.id,
+            composite: uploads[0].data.id,
+            transparent: uploads[1].data.id
+          });
+          removeAnnotation == null ? void 0 : removeAnnotation(annotation.id);
         } else {
           toast.error("Upload failed: " + result.reason.message);
         }
       });
-      return successfulFiles;
+      return { files: successfulFiles, metadata };
     } catch (error) {
       toast.error("Upload failed: " + error.message);
-      return [];
+      return { files: [], metadata: [] };
     }
   };
   return uploadAnnotations;

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAnnotationsUpload.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.ts"],"sourcesContent":["import { uploadFile } from '../helpers'\nimport { toast } from 'react-toastify'\nimport { useFeedContext } from '../../../context/FeedContext'\n\ntype Props = {\n projectName: string\n onSuccess: (data: any) => void\n}\n\nconst useAnnotationsUpload = ({ projectName, onSuccess }: Props) => {\n const { removeAnnotation, exportAnnotationComposite } = useFeedContext()\n\n const uploadAnnotations = async (annotations: any[]) => {\n try {\n const uploadPromises = annotations.map(async (annotation) => {\n const ~~blob~~ = await exportAnnotationComposite?.(annotation.id)\n if (!~~blob~~) {\n throw new Error(`Exporting composite image for annotation ${annotation.id} failed`)\n }\n\n const ~~file~~ = new File([~~blob~~], annotation.name, {\n type: 'image/png',\n })\n\n ~~return~~ uploadFile(~~file~~, projectName, () => {})\n })\n\n const res = await Promise.allSettled(uploadPromises)\n\n const successfulFiles: any[] = []\n ~~// for~~ ~~each~~ ~~result,~~ if ~~successful use callback~~\n res.forEach((result~~: any~~) => {\n if (result.status === 'fulfilled') {\n const ~~newFile~~ = ~~onSuccess(~~result.value)\n\n successfulFiles.push(~~newFile~~)\n\n ~~const annotationId = annotations~~.~~find~~(\n (annotation) => annotation.~~name~~ ~~===~~ ~~result~~.~~value~~.~~file.name~~,\n )~~?.id~~\n ~~if (annotationId) {~~\n removeAnnotation?.(~~annotationId~~)\n ~~}\n~~ } else {\n toast.error('Upload failed: ' + result.reason.message)\n }\n })\n\n return successfulFiles\n } catch (error: any) {\n toast.error('Upload failed: ' + error.message)\n return []\n }\n }\n\n return uploadAnnotations\n}\n\nexport default useAnnotationsUpload\n\nconst base64ToBlob = (base64: string) => {\n const byteString = atob(base64.split(',')[1])\n const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]\n const ab = new ArrayBuffer(byteString.length)\n const ia = new Uint8Array(ab)\n for (let i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i)\n }\n return new Blob([ab], { type: mimeString })\n}\n"],"names":[],"mappings":";;;~~AASA~~,MAAM,uBAAuB,CAAC,EAAE,aAAa,gBAAuB;AAClE,QAAM,EAAE,kBAAkB,0BAA0B,IAAI,eAAe;AAEjE,QAAA,oBAAoB,OAAO,gBAAuB;AAClD,QAAA;AACF,YAAM,iBAAiB,YAAY,IAAI,OAAO,eAAe;AAC3D,cAAM,~~OAAO~~,OAAM,uEAA4B,WAAW;~~AAC1D~~,YAAI,CAAC,~~MAAM~~;~~AACT~~,gBAAM,IAAI,MAAM,4CAA4C,WAAW,EAAE,SAAS;AAAA,QAAA;AAGpF,cAAM,~~OAAO~~,IAAI,KAAK,CAAC,~~IAAI~~,GAAG,WAAW,MAAM;AAAA,~~UAC7C~~,MAAM;AAAA,QAAA,CACP;~~AAEM~~,~~eAAA~~,WAAW,MAAM,~~aAAa~~,MAAM;AAAA,QAAA,CAAE;AAAA,MAAA,~~CAC9C~~;AAED,YAAM,MAAM,MAAM,QAAQ,WAAW,cAAc;AAEnD,YAAM,kBAAyB,CAAC;~~AAE5B~~,UAAA,QAAQ,CAAC,~~WAAgB;;AACvB~~,YAAA,OAAO,WAAW,aAAa;~~AAC3B~~,~~gBAAA~~,~~UAAU~~,~~UAAU~~,OAAO,~~KAAK~~;~~AAEtC~~,~~0BAAgB~~,KAAK,~~OAAO~~;~~AAE5B~~,~~gBAAM~~,~~gBAAe~~,~~iBAAY~~;AAAA,~~YAC/B~~,~~CAAC~~,~~eAAe~~,WAAW,~~SAAS~~,~~OAAO~~,~~MAAM~~,KAAK;AAAA,~~UAAA~~,~~MADnC~~,~~mBAElB;AACH~~,~~cAAI~~,~~cAAc;AAChB~~,~~iEAAmB~~;AAAA,~~UAAY~~;AAAA,~~QACjC~~,~~OACK~~;AACL,gBAAM,MAAM,oBAAoB,OAAO,OAAO,OAAO;AAAA,QAAA;AAAA,MACvD,CACD;AAEM,aAAA;AAAA,~~aACA~~,OAAY;AACb,YAAA,MAAM,oBAAoB,MAAM,OAAO;AAC7C,aAAO,~~CAAC~~;AAAA,IAAA;AAAA,~~EAEZ~~;AAEO,SAAA;AACT;"}
1	+ {"version":3,"file":"useAnnotationsUpload.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.ts"],"sourcesContent":["import { uploadFile } from '../helpers'\nimport { toast } from 'react-toastify'\nimport { useFeedContext } from '../../../context/FeedContext'\nimport { SavedAnnotationMetadata } from '../../../index'\n\ntype Props = {\n projectName: string\n onSuccess: (data: any) => void\n}\n\nconst useAnnotationsUpload = ({ projectName, onSuccess }: Props) => {\n const { removeAnnotation, exportAnnotationComposite } = useFeedContext()\n\n const uploadAnnotations = async (annotations: any[]) => {\n try {\n const uploadPromises = annotations.map(async (annotation) => {\n const composite = await exportAnnotationComposite?.(annotation.id)\n if (!composite) {\n throw new Error(`Exporting composite image for annotation ${annotation.id} failed`)\n }\n\n const compositeFile = new File([composite], annotation.name, {\n type: 'image/png',\n })\n\n const transparent = await fetch(annotation.annotationData).then(r => r.blob())\n const transparentFile = new File([transparent], `annotation-${annotation.name}`, {\n type: 'image/png',\n })\n\n const uploads = await Promise.all([\n uploadFile(compositeFile, projectName, () => {}),\n uploadFile(transparentFile, projectName, () => {}),\n ])\n\n return { annotation, uploads }\n })\n\n const res = await Promise.allSettled(uploadPromises)\n\n const successfulFiles: any[] = []\n const metadata: SavedAnnotationMetadata[] = []\n\n res.forEach((result) => {\n if (result.status === 'fulfilled') {\n const { uploads, annotation } = result.value\n\n uploads.forEach((upload: any) => {\n successfulFiles.push(onSuccess(upload))\n })\n\n metadata.push({\n range: annotation.range,\n id: annotation.id,\n composite: uploads[0].data.id,\n transparent: uploads[1].data.id,\n })\n\n removeAnnotation?.(annotation.id)\n } else {\n toast.error('Upload failed: ' + result.reason.message)\n }\n })\n\n return { files: successfulFiles, metadata }\n } catch (error: any) {\n toast.error('Upload failed: ' + error.message)\n return { files: [], metadata: [] }\n }\n }\n\n return uploadAnnotations\n}\n\nexport default useAnnotationsUpload\n\nconst base64ToBlob = (base64: string) => {\n const byteString = atob(base64.split(',')[1])\n const mimeString = base64.split(',')[0].split(':')[1].split(';')[0]\n const ab = new ArrayBuffer(byteString.length)\n const ia = new Uint8Array(ab)\n for (let i = 0; i < byteString.length; i++) {\n ia[i] = byteString.charCodeAt(i)\n }\n return new Blob([ab], { type: mimeString })\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,uBAAuB,CAAC,EAAE,aAAa,gBAAuB;AAClE,QAAM,EAAE,kBAAkB,0BAA0B,IAAI,eAAe;AAEjE,QAAA,oBAAoB,OAAO,gBAAuB;AAClD,QAAA;AACF,YAAM,iBAAiB,YAAY,IAAI,OAAO,eAAe;AAC3D,cAAM,YAAY,OAAM,uEAA4B,WAAW;AAC/D,YAAI,CAAC,WAAW;AACd,gBAAM,IAAI,MAAM,4CAA4C,WAAW,EAAE,SAAS;AAAA,QAAA;AAGpF,cAAM,gBAAgB,IAAI,KAAK,CAAC,SAAS,GAAG,WAAW,MAAM;AAAA,UAC3D,MAAM;AAAA,QAAA,CACP;AAEK,cAAA,cAAc,MAAM,MAAM,WAAW,cAAc,EAAE,KAAK,CAAA,MAAK,EAAE,MAAM;AACvE,cAAA,kBAAkB,IAAI,KAAK,CAAC,WAAW,GAAG,cAAc,WAAW,IAAI,IAAI;AAAA,UAC/E,MAAM;AAAA,QAAA,CACP;AAEK,cAAA,UAAU,MAAM,QAAQ,IAAI;AAAA,UAChC,WAAW,eAAe,aAAa,MAAM;AAAA,UAAA,CAAE;AAAA,UAC/C,WAAW,iBAAiB,aAAa,MAAM;AAAA,UAAE,CAAA;AAAA,QAAA,CAClD;AAEM,eAAA,EAAE,YAAY,QAAQ;AAAA,MAAA,CAC9B;AAED,YAAM,MAAM,MAAM,QAAQ,WAAW,cAAc;AAEnD,YAAM,kBAAyB,CAAC;AAChC,YAAM,WAAsC,CAAC;AAEzC,UAAA,QAAQ,CAAC,WAAW;AAClB,YAAA,OAAO,WAAW,aAAa;AACjC,gBAAM,EAAE,SAAS,WAAW,IAAI,OAAO;AAE/B,kBAAA,QAAQ,CAAC,WAAgB;AACf,4BAAA,KAAK,UAAU,MAAM,CAAC;AAAA,UAAA,CACvC;AAED,mBAAS,KAAK;AAAA,YACZ,OAAO,WAAW;AAAA,YAClB,IAAI,WAAW;AAAA,YACf,WAAW,QAAQ,CAAC,EAAE,KAAK;AAAA,YAC3B,aAAa,QAAQ,CAAC,EAAE,KAAK;AAAA,UAAA,CAC9B;AAED,+DAAmB,WAAW;AAAA,QAAE,OAC3B;AACL,gBAAM,MAAM,oBAAoB,OAAO,OAAO,OAAO;AAAA,QAAA;AAAA,MACvD,CACD;AAEM,aAAA,EAAE,OAAO,iBAAiB,SAAS;AAAA,aACnC,OAAY;AACb,YAAA,MAAM,oBAAoB,MAAM,OAAO;AAC7C,aAAO,EAAE,OAAO,IAAI,UAAU,CAAA,EAAG;AAAA,IAAA;AAAA,EAErC;AAEO,SAAA;AACT;"}

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

@@ -5,6 +5,15 @@ const FileUploadCard_styled = require("./FileUploadCard.styled.cjs.js");
 const clsx = require("clsx");
 const React = require("react");
 const FileUploadPreview = require("../FileUploadPreview/FileUploadPreview.cjs.js");
+require("../../../../context/RemoteModulesContext.cjs.js");
+const DetailsPanelContext = require("../../../../context/DetailsPanelContext.cjs.js");
+require("../../../../context/ThumbnailUploaderContext.cjs.js");
+require("../../../../context/SettingsPanelContext.cjs.js");
+require("../../../../context/pip/PiPProvider.cjs.js");
+require("react-dom");
+require("../../../../context/pip/PiPWrapper.cjs.js");
+require("../../../../context/AddonProjectContext.cjs.js");
+require("../../../../context/AddonContext.cjs.js");
 const fileIcons = {
   // special cases
   description: ["doc"],
@@ -60,31 +69,30 @@ const FileUploadCard = ({
   name,
   mime,
   src,
-  isAnnotation,
+  isUnsavedAnnotation,
+  savedAnnotation,
   size,
   progress,
   onRemove,
   isCompact,
   isDownloadable = false,
   onExpand,
+  onJumpTo,
   className,
   ...props
 }) => {
   const inProgress = progress && progress < 100;
   const [imageError, setImageError] = React.useState(false);
+  const { feedAnnotationsEnabled } = DetailsPanelContext.useDetailsPanelContext();
   const nameParts = name.split(".");
   const extension = nameParts.pop() || "";
   const fileName = nameParts.join(".");
   const isPreviewable = FileUploadPreview.isFilePreviewable(mime || "." + extension);
-  const isImage = (mime == null ? void 0 : mime.includes("image/")) || isAnnotation;
+  const isImage = (mime == null ? void 0 : mime.includes("image/")) || isUnsavedAnnotation;
   const downloadComponent = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "size", children: ayonReactComponents.getFileSizeString(size) }),
     /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "download", className: "download-icon" })
   ] });
-  const handleImageClick = () => {
-    if (!isPreviewable && !isAnnotation || !onExpand || imageError) return;
-    onExpand();
-  };
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
     FileUploadCard_styled.File,
     {
@@ -92,21 +100,23 @@ const FileUploadCard = ({
         compact: isCompact,
         isDownloadable,
         isPreviewable,
-        isAnnotation
+        isUnsavedAnnotation
       }),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
           FileUploadCard_styled.ContentWrapper,
           {
-            className: clsx("content-wrapper", { isPreviewable, isAnnotation }),
-            onClick: handleImageClick,
+            className: clsx("content-wrapper", { isPreviewable, isUnsavedAnnotation }),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: getIconForType(mime || "." + extension), className: "type-icon" }),
               isImage && src && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
                 FileUploadCard_styled.ImageWrapper,
                 {
-                  className: clsx({ isDownloadable: isDownloadable || isPreviewable || isAnnotation }),
+                  className: clsx({
+                    "image-wrapper": true,
+                    isDownloadable: isDownloadable || isPreviewable || isUnsavedAnnotation
+                  }),
                   children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
                     "img",
                     {
@@ -119,8 +129,26 @@ const FileUploadCard = ({
                   )
                 }
               ),
-              isPreviewable && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "open_in_full", className: "expand-icon" }),
-              isAnnotation && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "play_circle", className: "expand-icon" })
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(FileUploadCard_styled.Buttons, { className: "expand-buttons", children: [
+                isPreviewable && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                  FileUploadCard_styled.ExpandButton,
+                  {
+                    "data-tooltip": "Open preview",
+                    icon: "open_in_full",
+                    variant: "nav",
+                    onClick: onExpand
+                  }
+                ),
+                (isUnsavedAnnotation || feedAnnotationsEnabled && savedAnnotation) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                  FileUploadCard_styled.ExpandButton,
+                  {
+                    "data-tooltip": "Jump to annotation",
+                    icon: "play_circle",
+                    variant: "nav",
+                    onClick: onJumpTo
+                  }
+                )
+              ] })
             ]
           }
         ),

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

	@@ -1 +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 { useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n name: string\n mime?: string\n src?: string\n ~~isAnnotation~~?: boolean\n size: number\n progress: number\n onRemove?: () => void\n isCompact?: boolean\n isDownloadable?: boolean\n onExpand?: () => 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 ~~isAnnotation~~,\n size,\n progress,\n onRemove,\n isCompact,\n isDownloadable = false,\n onExpand,\n className,\n ...props\n}: FileUploadCardProps) => {\n const inProgress = progress && progress < 100\n\n const [imageError, setImageError] = useState(false)\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/') \|\| ~~isAnnotation~~\n\n const downloadComponent = (\n <>\n <span className=\"size\">{getFileSizeString(size)}</span>\n <Icon icon=\"download\" className=\"download-icon\" />\n </>\n )\n\n ~~const handleImageClick = () => {\n if ((!isPreviewable && !isAnnotation) \|\| !onExpand \|\| imageError)~~ return~~\n onExpand()\n }\n\n return~~ (\n <Styled.File\n className={clsx(className, {\n compact: isCompact,\n isDownloadable,\n isPreviewable,\n ~~isAnnotation~~,\n })}\n {...props}\n >\n <Styled.ContentWrapper\n className={clsx('content-wrapper', { isPreviewable, ~~isAnnotation~~ })}\n ~~onClick={handleImageClick}\n~~ >\n <Icon icon={getIconForType(mime \|\| '.' + extension)} className=\"type-icon\" />\n {isImage && src && (\n <Styled.ImageWrapper\n className={clsx({ isDownloadable: isDownloadable \|\| isPreviewable \|\| ~~isAnnotation~~ })}\n >\n <img\n src={src}\n onError={() => setImageError(true)}\n style={{\n display: imageError ? 'none' : 'block',\n }}\n />\n </Styled.ImageWrapper>\n )}\n {isPreviewable && <~~Icon~~ icon=\"open_in_full\" ~~className~~=\"~~expand-icon~~\" />}\n {~~isAnnotation~~ && <~~Icon~~ icon=\"play_circle\" ~~className~~=\"~~expand-icon~~\" />}\n </Styled.ContentWrapper>\n <Styled.Footer className={clsx({ inProgress, isPreviewable, isDownloadable })}>\n <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n <div className=\"name-wrapper\">\n <span className=\"name\">{fileName}</span>\n </div>\n <span className=\"extension\">.{extension}</span>\n {isDownloadable &&\n (!onRemove ? (\n <a href={src} download 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":["useState","isFilePreviewable","jsxs","Fragment","jsx","getFileSizeString","Icon","Styled.File","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Footer","Button"],"mappings":"~~;;;;;;;AAmBA~~,MAAM,YAAyC;AAAA;AAAA,EAE7C,aAAa,CAAC,KAAK;AAAA,EACnB,YAAY,CAAC,KAAK;AAAA,EAClB,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,OAAO,CAAC,QAAQ,OAAO,OAAO,SAAS;AAAA,EACvC,eAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU,CAAC,QAAQ,QAAQ,SAAS,OAAO,WAAW,WAAW,SAAS,MAAM;AAAA,EAChF,gBAAgB,CAAC,OAAO,MAAM;AAAA;AAAA,EAE9B,OAAO,CAAC,SAAS,QAAQ,QAAQ,SAAS,QAAQ,QAAQ,OAAO;AAAA,EACjE,UAAU,CAAC,SAAS,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,MAAM;AAAA,EACnE,iBAAiB,CAAC,aAAa;AAAA,EAC/B,YAAY,CAAC,OAAO;AAAA,EACpB,cAAc,CAAC,MAAM;AAAA,EACrB,aAAa,CAAC,UAAU;AAAA,EACxB,eAAe,CAAC,MAAM;AAAA,EACtB,eAAe,CAAC,SAAS,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,QAAQ,MAAM;AAClF;AAEA,MAAM,iBAAiB,CAAC,SAAyB;AAC/C,aAAW,CAAC,MAAM,QAAQ,KAAK,OAAO,QAAQ,SAAS,GAAG;AACpD,QAAA,SAAS,KAAK,CAAC,YAAY,KAAK,SAAS,OAAO,CAAC,GAAG;AAC/C,aAAA;AAAA,IAAA;AAAA,EACT;AAEK,SAAA;AACT;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACnB,QAAA,aAAa,YAAY,WAAW;AAE1C,QAAM,CAAC,YAAY,aAAa,IAAIA,MAAAA,SAAS,KAAK;~~AAG5C~~,QAAA,YAAY,KAAK,MAAM,GAAG;AAC1B,QAAA,YAAY,UAAU,IAAA,KAAS;AAC/B,QAAA,WAAW,UAAU,KAAK,GAAG;AAEnC,QAAM,gBAAgBC,kBAAA,kBAAkB,QAAQ,MAAM,SAAS;AAC/D,QAAM,WAAU,6BAAM,SAAS,cAAa;AAE5C,QAAM,oBAEFC,2BAAAA,kBAAAA,KAAAC,WAAA,kBAAA,UAAA,EAAA,UAAA;AAAA,IAAAC,iDAAC,QAAK,EAAA,WAAU,QAAQ,UAAAC,oBAAA,kBAAkB,IAAI,GAAE;AAAA,IAC/CD,2BAAA,kBAAA,IAAAE,oBAAA,MAAA,EAAK,MAAK,YAAW,WAAU,gBAAgB,CAAA;AAAA,EAAA,GAClD;~~AAGF~~,~~QAAM,mBAAmB,MAAM;AAC7B,QAAK,CAAC,iBAAiB,CAAC,gBAAiB,CAAC,YAAY,WAAY;AACzD,aAAA;AAAA,EACX;AAGE,~~SAAAJ,2BAAA,kBAAA;AAAA,IAACK,sBAAO;AAAA,IAAP;AAAA,MACC,WAAW,KAAK,WAAW;AAAA,QACzB,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAL,2BAAA,kBAAA;AAAA,UAACM,sBAAO;AAAA,UAAP;AAAA,YACC,WAAW,KAAK,mBAAmB,EAAE,eAAe,~~cAAc~~;AAAA,~~YAClE~~,~~SAAS;AAAA,YAET,~~UAAA;AAAA,cAACJ,2BAAAA,kBAAAA,IAAAE,oBAAA,MAAA,EAAK,MAAM,eAAe,QAAQ,MAAM,SAAS,GAAG,WAAU,aAAY;AAAA,cAC1E,WAAW,OACVF,2BAAA,kBAAA;AAAA,gBAACK,sBAAO;AAAA,gBAAP;AAAA,kBACC,WAAW,KAAK,~~EAAE~~,gBAAgB,kBAAkB,iBAAiB,~~cAAc~~;AAAA,~~kBAEnF~~,UAAAL,2BAAA,kBAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC;AAAA,sBACA,SAAS,MAAM,cAAc,IAAI;AAAA,sBACjC,OAAO;AAAA,wBACL,SAAS,aAAa,SAAS;AAAA,sBAAA;AAAA,oBACjC;AAAA,kBAAA;AAAA,gBACF;AAAA,cACF;AAAA,~~cAED~~,~~iBAAkBA~~,2BAAA,kBAAA,~~IAAAE~~,~~0BAAA~~,~~EAAK~~,MAAK,~~gBAAe~~,~~WAAU~~,~~eAAc~~;AAAA,~~cACnE~~,~~gBAAiBF~~,2BAAA,kBAAA,~~IAAAE~~,~~0BAAA~~,~~EAAK~~,MAAK,~~eAAc~~,~~WAAU~~,~~cAAc~~,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,~~QACpE~~;AAAA,~~QACAJ~~,~~kDAACQ~~,sBAAAA,QAAA,EAAc,WAAW,KAAK,EAAE,YAAY,eAAe,gBAAgB,GAC1E,UAAA;AAAA,~~UAACN~~,2BAAAA,kBAAAA,IAAA,QAAA,EAAK,WAAU,YAAW,OAAO,EAAE,OAAO,GAAG,MAAM,QAAQ,IAAO,EAAA,CAAA;AAAA,UACnEA,2BAAAA,kBAAAA,IAAC,SAAI,WAAU,gBACb,2DAAC,QAAK,EAAA,WAAU,QAAQ,UAAA,SAAA,CAAS,EACnC,CAAA;AAAA,UACAF,2BAAAA,kBAAAA,KAAC,QAAK,EAAA,WAAU,aAAY,UAAA;AAAA,YAAA;AAAA,YAAE;AAAA,UAAA,GAAU;AAAA,UACvC,mBACE,CAAC,WACCE,2BAAAA,kBAAAA,IAAA,KAAA,EAAE,MAAM,KAAK,UAAQ,MAAC,WAAU,YAC9B,UACH,mBAAA,qDAEC,OAAI,EAAA,WAAU,YAAY,UAAkB,mBAAA;AAAA,QAAA,GAEnD;AAAA,QACC,~~6DAAaO~~,oBAAO,QAAA,EAAA,WAAU,UAAS,SAAS,UAAU,MAAK,QAAQ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1E;AAEJ;;"}
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 { useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { SavedAnnotationMetadata } from '@shared/containers'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n name: string\n mime?: string\n src?: string\n isUnsavedAnnotation?: boolean\n savedAnnotation: SavedAnnotationMetadata\n size: number\n progress: number\n onRemove?: () => void\n isCompact?: boolean\n isDownloadable?: boolean\n onExpand?: () => void\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 isUnsavedAnnotation,\n savedAnnotation,\n size,\n progress,\n onRemove,\n isCompact,\n isDownloadable = false,\n onExpand,\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\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/') \|\| isUnsavedAnnotation\n\n const downloadComponent = (\n <>\n <span className=\"size\">{getFileSizeString(size)}</span>\n <Icon icon=\"download\" className=\"download-icon\" />\n </>\n )\n\n return (\n <Styled.File\n className={clsx(className, {\n compact: isCompact,\n isDownloadable,\n isPreviewable,\n isUnsavedAnnotation,\n })}\n {...props}\n >\n <Styled.ContentWrapper\n className={clsx('content-wrapper', { isPreviewable, isUnsavedAnnotation })}\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 \|\| isUnsavedAnnotation,\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 && (\n <Styled.ExpandButton\n data-tooltip=\"Open preview\"\n icon=\"open_in_full\"\n variant=\"nav\"\n onClick={onExpand}\n />\n )}\n {(isUnsavedAnnotation \|\| (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 className={clsx({ inProgress, isPreviewable, isDownloadable })}>\n <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n <div className=\"name-wrapper\">\n <span className=\"name\">{fileName}</span>\n </div>\n <span className=\"extension\">.{extension}</span>\n {isDownloadable &&\n (!onRemove ? (\n <a href={src} download 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":["useState","useDetailsPanelContext","isFilePreviewable","jsxs","Fragment","jsx","getFileSizeString","Icon","Styled.File","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Buttons","Styled.ExpandButton","Styled.Footer","Button"],"mappings":"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"}

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

@@ -1,9 +1,18 @@
 import { j as jsxRuntimeExports } from "../../../../../../_virtual/jsx-runtime.es.js";
 import { getFileSizeString, Icon, Button } from "@ynput/ayon-react-components";
-import { File, ContentWrapper, ImageWrapper, Footer } from "./FileUploadCard.styled.es.js";
+import { File, ContentWrapper, ImageWrapper, Buttons, ExpandButton, Footer } from "./FileUploadCard.styled.es.js";
 import clsx from "clsx";
 import { useState } from "react";
 import { isFilePreviewable } from "../FileUploadPreview/FileUploadPreview.es.js";
+import "../../../../context/RemoteModulesContext.es.js";
+import { useDetailsPanelContext } from "../../../../context/DetailsPanelContext.es.js";
+import "../../../../context/ThumbnailUploaderContext.es.js";
+import "../../../../context/SettingsPanelContext.es.js";
+import "../../../../context/pip/PiPProvider.es.js";
+import "react-dom";
+import "../../../../context/pip/PiPWrapper.es.js";
+import "../../../../context/AddonProjectContext.es.js";
+import "../../../../context/AddonContext.es.js";
 const fileIcons = {
   // special cases
   description: ["doc"],
@@ -59,31 +68,30 @@ const FileUploadCard = ({
   name,
   mime,
   src,
-  isAnnotation,
+  isUnsavedAnnotation,
+  savedAnnotation,
   size,
   progress,
   onRemove,
   isCompact,
   isDownloadable = false,
   onExpand,
+  onJumpTo,
   className,
   ...props
 }) => {
   const inProgress = progress && progress < 100;
   const [imageError, setImageError] = useState(false);
+  const { feedAnnotationsEnabled } = useDetailsPanelContext();
   const nameParts = name.split(".");
   const extension = nameParts.pop() || "";
   const fileName = nameParts.join(".");
   const isPreviewable = isFilePreviewable(mime || "." + extension);
-  const isImage = (mime == null ? void 0 : mime.includes("image/")) || isAnnotation;
+  const isImage = (mime == null ? void 0 : mime.includes("image/")) || isUnsavedAnnotation;
   const downloadComponent = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size", children: getFileSizeString(size) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "download", className: "download-icon" })
   ] });
-  const handleImageClick = () => {
-    if (!isPreviewable && !isAnnotation || !onExpand || imageError) return;
-    onExpand();
-  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     File,
     {
@@ -91,21 +99,23 @@ const FileUploadCard = ({
         compact: isCompact,
         isDownloadable,
         isPreviewable,
-        isAnnotation
+        isUnsavedAnnotation
       }),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           ContentWrapper,
           {
-            className: clsx("content-wrapper", { isPreviewable, isAnnotation }),
-            onClick: handleImageClick,
+            className: clsx("content-wrapper", { isPreviewable, isUnsavedAnnotation }),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: getIconForType(mime || "." + extension), className: "type-icon" }),
               isImage && src && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ImageWrapper,
                 {
-                  className: clsx({ isDownloadable: isDownloadable || isPreviewable || isAnnotation }),
+                  className: clsx({
+                    "image-wrapper": true,
+                    isDownloadable: isDownloadable || isPreviewable || isUnsavedAnnotation
+                  }),
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "img",
                     {
@@ -118,8 +128,26 @@ const FileUploadCard = ({
                   )
                 }
               ),
-              isPreviewable && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "open_in_full", className: "expand-icon" }),
-              isAnnotation && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "play_circle", className: "expand-icon" })
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Buttons, { className: "expand-buttons", children: [
+                isPreviewable && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ExpandButton,
+                  {
+                    "data-tooltip": "Open preview",
+                    icon: "open_in_full",
+                    variant: "nav",
+                    onClick: onExpand
+                  }
+                ),
+                (isUnsavedAnnotation || feedAnnotationsEnabled && savedAnnotation) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ExpandButton,
+                  {
+                    "data-tooltip": "Jump to annotation",
+                    icon: "play_circle",
+                    variant: "nav",
+                    onClick: onJumpTo
+                  }
+                )
+              ] })
             ]
           }
         ),

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

	@@ -1 +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 { useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n name: string\n mime?: string\n src?: string\n ~~isAnnotation~~?: boolean\n size: number\n progress: number\n onRemove?: () => void\n isCompact?: boolean\n isDownloadable?: boolean\n onExpand?: () => 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 ~~isAnnotation~~,\n size,\n progress,\n onRemove,\n isCompact,\n isDownloadable = false,\n onExpand,\n className,\n ...props\n}: FileUploadCardProps) => {\n const inProgress = progress && progress < 100\n\n const [imageError, setImageError] = useState(false)\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/') \|\| ~~isAnnotation~~\n\n const downloadComponent = (\n <>\n <span className=\"size\">{getFileSizeString(size)}</span>\n <Icon icon=\"download\" className=\"download-icon\" />\n </>\n )\n\n ~~const handleImageClick = () => {\n if ((!isPreviewable && !isAnnotation) \|\| !onExpand \|\| imageError)~~ return~~\n onExpand()\n }\n\n return~~ (\n <Styled.File\n className={clsx(className, {\n compact: isCompact,\n isDownloadable,\n isPreviewable,\n ~~isAnnotation~~,\n })}\n {...props}\n >\n <Styled.ContentWrapper\n className={clsx('content-wrapper', { isPreviewable, ~~isAnnotation~~ })}\n ~~onClick={handleImageClick}\n~~ >\n <Icon icon={getIconForType(mime \|\| '.' + extension)} className=\"type-icon\" />\n {isImage && src && (\n <Styled.ImageWrapper\n className={clsx({ isDownloadable: isDownloadable \|\| isPreviewable \|\| ~~isAnnotation~~ })}\n >\n <img\n src={src}\n onError={() => setImageError(true)}\n style={{\n display: imageError ? 'none' : 'block',\n }}\n />\n </Styled.ImageWrapper>\n )}\n {isPreviewable && <~~Icon~~ icon=\"open_in_full\" ~~className~~=\"~~expand-icon~~\" />}\n {~~isAnnotation~~ && <~~Icon~~ icon=\"play_circle\" ~~className~~=\"~~expand-icon~~\" />}\n </Styled.ContentWrapper>\n <Styled.Footer className={clsx({ inProgress, isPreviewable, isDownloadable })}>\n <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n <div className=\"name-wrapper\">\n <span className=\"name\">{fileName}</span>\n </div>\n <span className=\"extension\">.{extension}</span>\n {isDownloadable &&\n (!onRemove ? (\n <a href={src} download 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":["jsxs","Fragment","jsx","Styled.File","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Footer"],"mappings":"~~;;;;;;AAmBA~~,MAAM,YAAyC;AAAA;AAAA,EAE7C,aAAa,CAAC,KAAK;AAAA,EACnB,YAAY,CAAC,KAAK;AAAA,EAClB,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,OAAO,CAAC,QAAQ,OAAO,OAAO,SAAS;AAAA,EACvC,eAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU,CAAC,QAAQ,QAAQ,SAAS,OAAO,WAAW,WAAW,SAAS,MAAM;AAAA,EAChF,gBAAgB,CAAC,OAAO,MAAM;AAAA;AAAA,EAE9B,OAAO,CAAC,SAAS,QAAQ,QAAQ,SAAS,QAAQ,QAAQ,OAAO;AAAA,EACjE,UAAU,CAAC,SAAS,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,MAAM;AAAA,EACnE,iBAAiB,CAAC,aAAa;AAAA,EAC/B,YAAY,CAAC,OAAO;AAAA,EACpB,cAAc,CAAC,MAAM;AAAA,EACrB,aAAa,CAAC,UAAU;AAAA,EACxB,eAAe,CAAC,MAAM;AAAA,EACtB,eAAe,CAAC,SAAS,QAAQ,QAAQ,QAAQ,QAAQ,SAAS,QAAQ,MAAM;AAClF;AAEA,MAAM,iBAAiB,CAAC,SAAyB;AAC/C,aAAW,CAAC,MAAM,QAAQ,KAAK,OAAO,QAAQ,SAAS,GAAG;AACpD,QAAA,SAAS,KAAK,CAAC,YAAY,KAAK,SAAS,OAAO,CAAC,GAAG;AAC/C,aAAA;AAAA,IAAA;AAAA,EACT;AAEK,SAAA;AACT;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACnB,QAAA,aAAa,YAAY,WAAW;AAE1C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;~~AAG5C~~,QAAA,YAAY,KAAK,MAAM,GAAG;AAC1B,QAAA,YAAY,UAAU,IAAA,KAAS;AAC/B,QAAA,WAAW,UAAU,KAAK,GAAG;AAEnC,QAAM,gBAAgB,kBAAkB,QAAQ,MAAM,SAAS;AAC/D,QAAM,WAAU,6BAAM,SAAS,cAAa;AAE5C,QAAM,oBAEFA,kCAAAA,KAAAC,kBAAA,UAAA,EAAA,UAAA;AAAA,IAAAC,sCAAC,QAAK,EAAA,WAAU,QAAQ,UAAA,kBAAkB,IAAI,GAAE;AAAA,IAC/CA,kCAAA,IAAA,MAAA,EAAK,MAAK,YAAW,WAAU,gBAAgB,CAAA;AAAA,EAAA,GAClD;~~AAGF~~,~~QAAM,mBAAmB,MAAM;AAC7B,QAAK,CAAC,iBAAiB,CAAC,gBAAiB,CAAC,YAAY,WAAY;AACzD,aAAA;AAAA,EACX;AAGE,~~SAAAF,kCAAA;AAAA,IAACG;AAAAA,IAAA;AAAA,MACC,WAAW,KAAK,WAAW;AAAA,QACzB,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,MACA,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAH,kCAAA;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,WAAW,KAAK,mBAAmB,EAAE,eAAe,~~cAAc~~;AAAA,~~YAClE~~,~~SAAS;AAAA,YAET,~~UAAA;AAAA,cAACF,kCAAAA,IAAA,MAAA,EAAK,MAAM,eAAe,QAAQ,MAAM,SAAS,GAAG,WAAU,aAAY;AAAA,cAC1E,WAAW,OACVA,kCAAA;AAAA,gBAACG;AAAAA,gBAAA;AAAA,kBACC,WAAW,KAAK,~~EAAE~~,gBAAgB,kBAAkB,iBAAiB,~~cAAc~~;AAAA,~~kBAEnF~~,UAAAH,kCAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC;AAAA,sBACA,SAAS,MAAM,cAAc,IAAI;AAAA,sBACjC,OAAO;AAAA,wBACL,SAAS,aAAa,SAAS;AAAA,sBAAA;AAAA,oBACjC;AAAA,kBAAA;AAAA,gBACF;AAAA,cACF;AAAA,~~cAED~~,~~iBAAkBA~~,kCAAA,~~IAAA~~,~~MAAA~~,~~EAAK~~,MAAK,~~gBAAe~~,~~WAAU~~,~~eAAc~~;AAAA,~~cACnE~~,~~gBAAiBA~~,kCAAA,~~IAAA~~,~~MAAA~~,~~EAAK~~,MAAK,~~eAAc~~,~~WAAU~~,~~cAAc~~,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,~~QACpE~~;AAAA,~~QACAF~~,~~uCAACM~~,QAAA,EAAc,WAAW,KAAK,EAAE,YAAY,eAAe,gBAAgB,GAC1E,UAAA;AAAA,~~UAACJ~~,kCAAAA,IAAA,QAAA,EAAK,WAAU,YAAW,OAAO,EAAE,OAAO,GAAG,MAAM,QAAQ,IAAO,EAAA,CAAA;AAAA,UACnEA,kCAAAA,IAAC,SAAI,WAAU,gBACb,gDAAC,QAAK,EAAA,WAAU,QAAQ,UAAA,SAAA,CAAS,EACnC,CAAA;AAAA,UACAF,kCAAAA,KAAC,QAAK,EAAA,WAAU,aAAY,UAAA;AAAA,YAAA;AAAA,YAAE;AAAA,UAAA,GAAU;AAAA,UACvC,mBACE,CAAC,WACCE,kCAAAA,IAAA,KAAA,EAAE,MAAM,KAAK,UAAQ,MAAC,WAAU,YAC9B,UACH,mBAAA,0CAEC,OAAI,EAAA,WAAU,YAAY,UAAkB,mBAAA;AAAA,QAAA,GAEnD;AAAA,QACC,kDAAa,QAAO,EAAA,WAAU,UAAS,SAAS,UAAU,MAAK,QAAQ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1E;AAEJ;"}
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 { useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { SavedAnnotationMetadata } from '@shared/containers'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n name: string\n mime?: string\n src?: string\n isUnsavedAnnotation?: boolean\n savedAnnotation: SavedAnnotationMetadata\n size: number\n progress: number\n onRemove?: () => void\n isCompact?: boolean\n isDownloadable?: boolean\n onExpand?: () => void\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 isUnsavedAnnotation,\n savedAnnotation,\n size,\n progress,\n onRemove,\n isCompact,\n isDownloadable = false,\n onExpand,\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\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/') \|\| isUnsavedAnnotation\n\n const downloadComponent = (\n <>\n <span className=\"size\">{getFileSizeString(size)}</span>\n <Icon icon=\"download\" className=\"download-icon\" />\n </>\n )\n\n return (\n <Styled.File\n className={clsx(className, {\n compact: isCompact,\n isDownloadable,\n isPreviewable,\n isUnsavedAnnotation,\n })}\n {...props}\n >\n <Styled.ContentWrapper\n className={clsx('content-wrapper', { isPreviewable, isUnsavedAnnotation })}\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 \|\| isUnsavedAnnotation,\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 && (\n <Styled.ExpandButton\n data-tooltip=\"Open preview\"\n icon=\"open_in_full\"\n variant=\"nav\"\n onClick={onExpand}\n />\n )}\n {(isUnsavedAnnotation \|\| (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 className={clsx({ inProgress, isPreviewable, isDownloadable })}>\n <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n <div className=\"name-wrapper\">\n <span className=\"name\">{fileName}</span>\n </div>\n <span className=\"extension\">.{extension}</span>\n {isDownloadable &&\n (!onRemove ? (\n <a href={src} download 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":["jsxs","Fragment","jsx","Styled.File","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Buttons","Styled.ExpandButton","Styled.Footer"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ayonReactComponents = require("@ynput/ayon-react-components");
 const styled = require("styled-components");
 const File = styled.div`
   position: relative;
@@ -47,17 +48,6 @@ const File = styled.div`
   .download-icon {
     color: var(--md-sys-color-outline);
   }
-  .expand-icon {
-    pointer-events: none;
-    position: absolute;
-    /* center */
-    left: 50%;
-    bottom: calc(50% - 20px);
-    transform: translate(-50%, -50%);
-    display: none;
-  }
 `;
 const Footer = styled.footer`
   background-color: var(--md-sys-color-surface-container-low);
@@ -171,20 +161,24 @@ const ContentWrapper = styled.div`
   }
   /* previewable styles (it can be expanded) */
-  /* on hover it shows the expand icon */
+  /* on hover it shows the expand buttons */
   &.isPreviewable,
-  &.isAnnotation {
+  &.isUnsavedAnnotation {
     cursor: pointer;
     &:hover {
-      .expand-icon {
-        display: block;
+      .expand-buttons {
+        display: flex;
       }
       .type-icon {
         display: none;
       }
     }
   }
+  &:hover .image-wrapper::after {
+    opacity: 0.8;
+  }
 `;
 const ImageWrapper = styled.div`
   position: absolute;
@@ -213,10 +207,6 @@ const ImageWrapper = styled.div`
   &.isDownloadable {
     &:hover {
-      &::after {
-        opacity: 0.8;
-      }
       .icon {
         display: block;
         z-index: 10;
@@ -224,7 +214,31 @@ const ImageWrapper = styled.div`
     }
   }
 `;
+const Buttons = styled.div`
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: none;
+  height: calc(100% - 20px);
+  width: 100%;
+  gap: 0;
+`;
+const ExpandButton = styled(ayonReactComponents.Button)`
+  height: 100%;
+  width: 100%;
+  border: none;
+  opacity: 0.5;
+  transition: opacity 250ms;
+  &:hover {
+    background: none;
+    opacity: 1;
+  }
+`;
+exports.Buttons = Buttons;
 exports.ContentWrapper = ContentWrapper;
+exports.ExpandButton = ExpandButton;
 exports.File = File;
 exports.Footer = Footer;
 exports.ImageWrapper = ImageWrapper;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileUploadCard.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.ts"],"sourcesContent":["import 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 .expand-icon {\n pointer-events: none;\n position: absolute;\n / center /\n left: 50%;\n bottom: calc(50% - 20px);\n transform: translate(-50%, -50%);\n\n display: none;\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: inherit;\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 ~~icon~~ */\n &.isPreviewable,\n &.~~isAnnotation~~ {\n cursor: pointer;\n\n &:hover {\n .expand-~~icon~~ {\n display: ~~block~~;\n }\n .type-icon {\n display: none;\n }\n }\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 ~~&::after~~ {\n ~~opacity~~: ~~0.8~~;\n }\n\n ~~.icon {~~\n display: ~~block~~;\n z-~~index~~: 10;\n }\n }\n }\n`\n"],"names":[],"mappings":"~~;;;AAEO~~,MAAM,OAAO,OAAO;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;~~AA2DpB,MAAM,SAAS,OAAO~~;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;~~AA+FtB,MAAM,iBAAiB,OAAO~~;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;~~AAkC9B,MAAM,eAAe,OAAO~~;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~~;;;;;~~"}
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: inherit;\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":["Button"],"mappings":";;;;AAGO,MAAM,OAAO,OAAO;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;AAgDpB,MAAM,SAAS,OAAO;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;AA+FtB,MAAM,iBAAiB,OAAO;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;AAsC9B,MAAM,eAAe,OAAO;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;AAmC5B,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWjB,MAAA,eAAe,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;"}

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

@@ -1,3 +1,4 @@
+import { Button } from "@ynput/ayon-react-components";
 import styled from "styled-components";
 const File = styled.div`
   position: relative;
@@ -45,17 +46,6 @@ const File = styled.div`
   .download-icon {
     color: var(--md-sys-color-outline);
   }
-  .expand-icon {
-    pointer-events: none;
-    position: absolute;
-    /* center */
-    left: 50%;
-    bottom: calc(50% - 20px);
-    transform: translate(-50%, -50%);
-    display: none;
-  }
 `;
 const Footer = styled.footer`
   background-color: var(--md-sys-color-surface-container-low);
@@ -169,20 +159,24 @@ const ContentWrapper = styled.div`
   }
   /* previewable styles (it can be expanded) */
-  /* on hover it shows the expand icon */
+  /* on hover it shows the expand buttons */
   &.isPreviewable,
-  &.isAnnotation {
+  &.isUnsavedAnnotation {
     cursor: pointer;
     &:hover {
-      .expand-icon {
-        display: block;
+      .expand-buttons {
+        display: flex;
       }
       .type-icon {
         display: none;
       }
     }
   }
+  &:hover .image-wrapper::after {
+    opacity: 0.8;
+  }
 `;
 const ImageWrapper = styled.div`
   position: absolute;
@@ -211,10 +205,6 @@ const ImageWrapper = styled.div`
   &.isDownloadable {
     &:hover {
-      &::after {
-        opacity: 0.8;
-      }
       .icon {
         display: block;
         z-index: 10;
@@ -222,8 +212,32 @@ const ImageWrapper = styled.div`
     }
   }
 `;
+const Buttons = styled.div`
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: none;
+  height: calc(100% - 20px);
+  width: 100%;
+  gap: 0;
+`;
+const ExpandButton = styled(Button)`
+  height: 100%;
+  width: 100%;
+  border: none;
+  opacity: 0.5;
+  transition: opacity 250ms;
+  &:hover {
+    background: none;
+    opacity: 1;
+  }
+`;
 export {
+  Buttons,
   ContentWrapper,
+  ExpandButton,
   File,
   Footer,
   ImageWrapper