@ynput/ayon-frontend-shared 0.2.7 → 0.2.10

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

@@ -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

@@ -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;;"}
+{"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

@@ -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

@@ -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":"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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 { 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":";;;;;;;;;;;;;;;AAuBA,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;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACnB,QAAA,aAAa,YAAY,WAAW;AAE1C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAC5C,QAAA,EAAE,uBAAuB,IAAI,uBAAuB;AAGpD,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;AAIA,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,qBAAqB;AAAA,YAEzE,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;AAAA,oBACd,iBAAiB;AAAA,oBACjB,gBAAgB,kBAAkB,iBAAiB;AAAA,kBAAA,CACpD;AAAA,kBAED,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,cAEDF,kCAAAA,KAAAM,SAAA,EAAe,WAAU,kBACvB,UAAA;AAAA,gBACC,iBAAAJ,kCAAA;AAAA,kBAACK;AAAAA,kBAAA;AAAA,oBACC,gBAAa;AAAA,oBACb,MAAK;AAAA,oBACL,SAAQ;AAAA,oBACR,SAAS;AAAA,kBAAA;AAAA,gBACX;AAAA,iBAEA,uBAAwB,0BAA0B,oBAClDL,kCAAA;AAAA,kBAACK;AAAAA,kBAAA;AAAA,oBACC,gBAAa;AAAA,oBACb,MAAK;AAAA,oBACL,SAAQ;AAAA,oBACR,SAAS;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACX,EAEJ,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,QACAP,uCAACQ,QAAA,EAAc,WAAW,KAAK,EAAE,YAAY,eAAe,gBAAgB,GAC1E,UAAA;AAAA,UAACN,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;"}

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

@@ -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

@@ -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;;;;;"}
+{"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

@@ -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

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCard.styled.es.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;"}
+{"version":3,"file":"FileUploadCard.styled.es.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":[],"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,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -4,6 +4,7 @@ const FilesGrid_styled = require("./FilesGrid.styled.cjs.js");
 const clsx = require("clsx");
 const FileUploadCard = require("../FileUploadCard/FileUploadCard.cjs.js");
 const FileUploadPreview = require("../FileUploadPreview/FileUploadPreview.cjs.js");
+const React = require("react");
 const FilesGrid = ({
   files = [],
   activityId,
@@ -16,15 +17,14 @@ const FilesGrid = ({
   ...props
 }) => {
   if (!files.length) return null;
-  const handleExpand = (file, index) => {
-    if (file.isAnnotation) {
-      onAnnotationClick == null ? void 0 : onAnnotationClick(file);
-    } else {
-      const filteredFiles = files.filter((file2) => FileUploadPreview.isFilePreviewable(file2.mime, file2.ext));
-      const updatedIndex = filteredFiles.findIndex((file2) => file2.id === files[index].id);
+  const handleExpand = React.useCallback(
+    (index) => {
+      const filteredFiles = files.filter((file) => FileUploadPreview.isFilePreviewable(file.mime, file.ext));
+      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id);
       onExpand == null ? void 0 : onExpand({ files: filteredFiles, index: updatedIndex, activityId: activityId || "" });
-    }
-  };
+    },
+    [onExpand]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(FilesGrid_styled.Grid, { className: clsx({ compact: isCompact }), ...props, children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     FileUploadCard,
     {
@@ -32,13 +32,15 @@ const FilesGrid = ({
       name: file.name,
       mime: file.mime || file.type,
       size: file.size,
-      src: file.isAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
-      isAnnotation: file.isAnnotation,
+      src: file.isUnsavedAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
+      isUnsavedAnnotation: file.isUnsavedAnnotation,
+      savedAnnotation: file.annotation,
       progress: file.progress,
-      onRemove: onRemove ? () => onRemove(file.id, file.name, file.isAnnotation) : void 0,
+      onRemove: onRemove ? () => onRemove(file.id, file.name, file.isUnsavedAnnotation) : void 0,
       isCompact,
       isDownloadable,
-      onExpand: () => handleExpand(file, index)
+      onExpand: () => handleExpand(index),
+      onJumpTo: () => onAnnotationClick == null ? void 0 : onAnnotationClick(file)
     },
     index
   )) });