@ynput/ayon-frontend-shared 0.3.31 → 0.3.33

package/dist/shared/src/components/Thumbnail/StackedThumbnails.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../../../_virtual/jsx-runtime.cjs.js"),l=require("react"),q=require("styled-components"),d=require("./Thumbnail.cjs.js"),p=require("clsx");require("../../context/RemoteModulesContext.cjs.js");require("../../../../_virtual/runtime.cjs.js");require("../../../../_virtual/semver.cjs.js");require("../../api/base/client.cjs.js");require("../../api/generated/graphql.cjs.js");require("../../api/generated/graphqlLinks.cjs.js");require("../../api/generated/access.cjs.js");require("../../api/generated/actions.cjs.js");require("../../api/generated/activityFeed.cjs.js");require("../../api/generated/addons.cjs.js");require("../../api/generated/anatomy.cjs.js");require("../../api/generated/attributes.cjs.js");require("../../api/generated/authentication.cjs.js");require("../../api/generated/bundles.cjs.js");require("../../api/generated/configuration.cjs.js");require("../../api/generated/dataImport.cjs.js");require("../../api/generated/desktop.cjs.js");require("../../api/generated/entityLists.cjs.js");require("../../api/generated/events.cjs.js");require("../../api/generated/files.cjs.js");require("../../api/generated/folders.cjs.js");require("../../api/generated/inbox.cjs.js");require("../../api/generated/links.cjs.js");require("../../api/generated/market.cjs.js");require("../../api/generated/onboarding.cjs.js");require("../../api/generated/operations.cjs.js");require("../../api/generated/products.cjs.js");require("../../api/generated/projectDashboard.cjs.js");require("../../api/generated/projects.cjs.js");require("../../api/generated/projectFolders.cjs.js");require("../../api/generated/reviewables.cjs.js");require("../../api/generated/services.cjs.js");require("../../api/generated/system.cjs.js");require("../../api/generated/tasks.cjs.js");require("../../api/generated/teams.cjs.js");require("../../api/generated/thumbnails.cjs.js");require("../../api/generated/uRIs.cjs.js");require("../../api/generated/users.cjs.js");require("../../api/generated/versions.cjs.js");require("../../api/generated/workfiles.cjs.js");require("../../api/generated/ynputCloud.cjs.js");require("../../api/generated/grouping.cjs.js");require("../../api/generated/views.cjs.js");require("../../api/queries/actions/getActions.cjs.js");require("../../api/queries/activities/getActivities.cjs.js");require("../../api/queries/activities/updateActivities.cjs.js");require("../../api/queries/activities/updateReaction.cjs.js");require("../../api/queries/activities/getMentions.cjs.js");require("../../api/queries/activities/getCategories.cjs.js");require("../../api/queries/addons/getAddons.cjs.js");require("../../api/queries/addons/updateAddons.cjs.js");require("../../api/queries/attributes/getAttributes.cjs.js");require("../../api/queries/attributes/updateAttributes.cjs.js");require("../../api/queries/authentication/getAuthentication.cjs.js");require("../../api/queries/cloud/cloud.cjs.js");require("../../api/queries/config/getConfig.cjs.js");require("../../api/queries/config/updateConfig.cjs.js");require("../../api/queries/entities/getEntity.cjs.js");require("../../api/queries/entities/getEntityPanel.cjs.js");require("../../api/queries/overview/getOverview.cjs.js");require("../../api/queries/overview/updateOverview.cjs.js");require("../../api/queries/versions/getVersionsProducts.cjs.js");require("../../api/queries/links/getEntityLinks.cjs.js");require("../../api/queries/entities/updateEntity.cjs.js");require("../../api/queries/entityLists/getLists.cjs.js");require("../../api/queries/entityLists/updateLists.cjs.js");require("../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../api/queries/entityLists/listFolders.cjs.js");require("../../api/queries/folders/getFolders.cjs.js");require("../../api/queries/folders/getFolderDeleteInfo.cjs.js");require("../../api/queries/grouping/getGrouping.cjs.js");require("../../api/queries/links/updateLinks.cjs.js");require("../../api/queries/links/getLinks.cjs.js");require("../../api/queries/permissions/getPermissions.cjs.js");require("../../api/queries/products/createProduct.cjs.js");require("../../api/queries/products/getFolderProducts.cjs.js");require("../../api/queries/project/getProject.cjs.js");require("../../api/queries/project/updateProject.cjs.js");require("../../api/queries/projectFolders/projectFolders.cjs.js");require("../../api/queries/review/getReview.cjs.js");require("../../api/queries/review/updateReview.cjs.js");require("../../api/queries/share/share.cjs.js");require("../../api/queries/system/getSystem.cjs.js");require("../../api/queries/tasks/getTasks.cjs.js");require("../../api/queries/tasks/updateTasks.cjs.js");require("../../api/queries/teams/getTeams.cjs.js");require("../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../api/queries/users/getUsers.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../api/queries/users/guests.cjs.js");require("../../api/queries/versions/updateVersions.cjs.js");require("../../api/queries/views/getViews.cjs.js");require("../../api/queries/views/updateViews.cjs.js");require("../../api/queries/watchers/getWatchers.cjs.js");require("../../api/queries/uris/getUris.cjs.js");require("lodash");require("react-toastify");require("react-redux");require("custom-protocol-check");require("../../containers/ProjectTreeTable/components/GroupSettingsFallback.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");require("../../context/PowerpackContextInstance.cjs.js");require("../../context/UriContext.cjs.js");require("../../context/DetailsPanelContextInstance.cjs.js");require("../../context/SubtasksModulesContextInstance.cjs.js");const x=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");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");require("../../context/WebsocketContext.cjs.js");require("../../context/GlobalContext.cjs.js");require("../../context/ProjectContext.cjs.js");require("../../context/ProjectFoldersContext.cjs.js");const g=q.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../../../_virtual/jsx-runtime.cjs.js"),l=require("react"),q=require("styled-components"),d=require("./Thumbnail.cjs.js"),x=require("clsx");require("../../context/RemoteModulesContext.cjs.js");require("../../../../_virtual/runtime.cjs.js");require("../../../../_virtual/semver.cjs.js");require("../../api/base/client.cjs.js");require("../../api/generated/graphql.cjs.js");require("../../api/generated/graphqlLinks.cjs.js");require("../../api/generated/access.cjs.js");require("../../api/generated/actions.cjs.js");require("../../api/generated/activityFeed.cjs.js");require("../../api/generated/addons.cjs.js");require("../../api/generated/anatomy.cjs.js");require("../../api/generated/attributes.cjs.js");require("../../api/generated/authentication.cjs.js");require("../../api/generated/bundles.cjs.js");require("../../api/generated/configuration.cjs.js");require("../../api/generated/dataImport.cjs.js");require("../../api/generated/desktop.cjs.js");require("../../api/generated/entityLists.cjs.js");require("../../api/generated/events.cjs.js");require("../../api/generated/files.cjs.js");require("../../api/generated/folders.cjs.js");require("../../api/generated/inbox.cjs.js");require("../../api/generated/links.cjs.js");require("../../api/generated/market.cjs.js");require("../../api/generated/onboarding.cjs.js");require("../../api/generated/operations.cjs.js");require("../../api/generated/products.cjs.js");require("../../api/generated/projectDashboard.cjs.js");require("../../api/generated/projects.cjs.js");require("../../api/generated/projectFolders.cjs.js");require("../../api/generated/reviewables.cjs.js");require("../../api/generated/services.cjs.js");require("../../api/generated/system.cjs.js");require("../../api/generated/tasks.cjs.js");require("../../api/generated/teams.cjs.js");require("../../api/generated/thumbnails.cjs.js");require("../../api/generated/uRIs.cjs.js");require("../../api/generated/users.cjs.js");require("../../api/generated/versions.cjs.js");require("../../api/generated/workfiles.cjs.js");require("../../api/generated/ynputCloud.cjs.js");require("../../api/generated/grouping.cjs.js");require("../../api/generated/views.cjs.js");require("../../api/queries/actions/getActions.cjs.js");require("../../api/queries/activities/getActivities.cjs.js");require("../../api/queries/activities/updateActivities.cjs.js");require("../../api/queries/activities/updateReaction.cjs.js");require("../../api/queries/activities/getMentions.cjs.js");require("../../api/queries/activities/getCategories.cjs.js");require("../../api/queries/addons/getAddons.cjs.js");require("../../api/queries/addons/updateAddons.cjs.js");require("../../api/queries/attributes/getAttributes.cjs.js");require("../../api/queries/attributes/updateAttributes.cjs.js");require("../../api/queries/authentication/getAuthentication.cjs.js");require("../../api/queries/cloud/cloud.cjs.js");require("../../api/queries/columnStats/metricTargets.cjs.js");require("../../api/queries/config/getConfig.cjs.js");require("../../api/queries/config/updateConfig.cjs.js");require("../../api/queries/entities/getEntity.cjs.js");require("../../api/queries/entities/getEntityPanel.cjs.js");require("../../api/queries/overview/getOverview.cjs.js");require("../../api/queries/overview/updateOverview.cjs.js");require("../../api/queries/versions/getVersionsProducts.cjs.js");require("../../api/queries/links/getEntityLinks.cjs.js");require("../../api/queries/entities/updateEntity.cjs.js");require("../../api/queries/entityLists/getLists.cjs.js");require("../../api/queries/entityLists/updateLists.cjs.js");require("../../api/queries/entityLists/getListsAttributes.cjs.js");require("../../api/queries/entityLists/listItemsColumnStats.cjs.js");require("../../api/queries/entityLists/updateListsAttributes.cjs.js");require("../../api/queries/entityLists/listFolders.cjs.js");require("../../api/queries/folders/getFolders.cjs.js");require("../../api/queries/folders/getFolderDeleteInfo.cjs.js");require("../../api/queries/grouping/getGrouping.cjs.js");require("../../api/queries/links/updateLinks.cjs.js");require("../../api/queries/links/getLinks.cjs.js");require("../../api/queries/permissions/getPermissions.cjs.js");require("../../api/queries/products/createProduct.cjs.js");require("../../api/queries/products/getFolderProducts.cjs.js");require("../../api/queries/project/getProject.cjs.js");require("../../api/queries/project/updateProject.cjs.js");require("../../api/queries/projectFolders/projectFolders.cjs.js");require("../../api/queries/review/getReview.cjs.js");require("../../api/queries/review/updateReview.cjs.js");require("../../api/queries/share/share.cjs.js");require("../../api/queries/system/getSystem.cjs.js");require("../../api/queries/tasks/getTasks.cjs.js");require("../../api/queries/tasks/updateTasks.cjs.js");require("../../api/queries/teams/getTeams.cjs.js");require("../../api/queries/userDashboard/getUserDashboard.cjs.js");require("../../api/queries/users/getUsers.cjs.js");require("../../api/queries/users/updateUsers.cjs.js");require("../../api/queries/users/guests.cjs.js");require("../../api/queries/versions/updateVersions.cjs.js");require("../../api/queries/views/getViews.cjs.js");require("../../api/queries/views/updateViews.cjs.js");require("../../api/queries/watchers/getWatchers.cjs.js");require("../../api/queries/uris/getUris.cjs.js");require("lodash");require("react-toastify");require("react-redux");require("custom-protocol-check");require("../../containers/ProjectTreeTable/components/GroupSettingsFallback.cjs.js");require("uuid");require("../../util/pubsub.cjs.js");require("../../context/PowerpackContextInstance.cjs.js");require("../../context/UriContext.cjs.js");require("../../context/DetailsPanelContextInstance.cjs.js");require("../../context/SubtasksModulesContextInstance.cjs.js");const p=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");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");require("../../context/WebsocketContext.cjs.js");require("../../context/GlobalContext.cjs.js");require("../../context/ProjectContext.cjs.js");require("../../context/ProjectFoldersContext.cjs.js");const g=q.div`
   display: flex;
   z-index: 10;
   height: 100%;
@@ -35,5 +35,5 @@
       object-fit: cover;
     }
   }
-`,y=({thumbnails:e=[],isLoading:t,className:n,style:o,...s})=>{const{onContextMenu:c}=l.useContext(x.ThumbnailUploadContext);e=e.slice(0,5);const a=e.length>1;return e.length?u.jsxRuntimeExports.jsx(g,{$length:e.length,className:p("stacked-thumbnails",n,{stacking:a}),children:e.map((r,i)=>r?u.jsxRuntimeExports.jsx(d.Thumbnail,{projectName:r.projectName,entityType:r.type,entityId:r.id,icon:r.icon,color:r.color,style:{...o,zIndex:-i},entityUpdatedAt:r.updatedAt,isLoading:t,src:r.src,onContextMenu:c,...s},r.id||r.src||i):null)}):null};exports.StackedThumbnails=y;
+`,m=({thumbnails:e=[],isLoading:t,className:n,style:o,...s})=>{const{onContextMenu:c}=l.useContext(p.ThumbnailUploadContext);e=e.slice(0,5);const a=e.length>1;return e.length?u.jsxRuntimeExports.jsx(g,{$length:e.length,className:x("stacked-thumbnails",n,{stacking:a}),children:e.map((r,i)=>r?u.jsxRuntimeExports.jsx(d.Thumbnail,{projectName:r.projectName,entityType:r.type,entityId:r.id,icon:r.icon,color:r.color,style:{...o,zIndex:-i},thumbnailHash:r.thumbnailHash,isLoading:t,src:r.src,onContextMenu:c,...s},r.id||r.src||i):null)}):null};exports.StackedThumbnails=m;
 //# sourceMappingURL=StackedThumbnails.cjs.js.map

package/dist/shared/src/components/Thumbnail/StackedThumbnails.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedThumbnails.cjs.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n  $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n  display: flex;\n  z-index: 10;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  min-width: min-content;\n  cursor: pointer;\n\n  &.stacking {\n    & > * {\n      margin: unset;\n      aspect-ratio: 1;\n      border: solid 2px var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n\n      span {\n        font-size: 24px;\n      }\n\n      ${({ $length }) =>\n        $length > 1 &&\n        css`\n          :not(:last-child) {\n            box-shadow: 0 0 4px 0px black;\n          }\n        `}\n    }\n\n    /* create stacked effect */\n    & > * + * {\n      margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n    }\n\n    .thumbnail img {\n      object-fit: cover;\n    }\n  }\n`\n\ntype Thumbnail = {\n  id?: string\n  type?: string\n  projectName?: string\n  icon?: string\n  color?: string\n  updatedAt?: string\n  src?: string\n}\n\nexport interface StackedThumbnailsProps\n  extends Omit<ThumbnailProps, 'entityType' | 'entityId' | 'projectName'> {\n  thumbnails?: Thumbnail[]\n  isLoading?: boolean\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n  thumbnails = [],\n  isLoading,\n  className,\n  style,\n  ...props\n}: StackedThumbnailsProps) => {\n  const { onContextMenu } = useContext(ThumbnailUploadContext)\n  // limit to 5 users\n  thumbnails = thumbnails.slice(0, 5)\n  const isStacking = thumbnails.length > 1\n\n  if (!thumbnails.length) return null\n\n  return (\n    <StackedStyled\n      $length={thumbnails.length}\n      className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n    >\n      {thumbnails.map((thumb, i) =>\n        thumb ? (\n          <Thumbnail\n            projectName={thumb.projectName}\n            entityType={thumb.type}\n            entityId={thumb.id}\n            icon={thumb.icon}\n            color={thumb.color}\n            key={thumb.id || thumb.src || i}\n            style={{ ...style, zIndex: -i }}\n            entityUpdatedAt={thumb.updatedAt}\n            isLoading={isLoading}\n            src={thumb.src}\n            // @ts-ignore — Thumbnail forwards onContextMenu to its root element\n            onContextMenu={onContextMenu}\n            {...props}\n          />\n        ) : null,\n      )}\n    </StackedStyled>\n  )\n}\n"],"names":["StackedStyled","styled","$length","css","StackedThumbnails","thumbnails","isLoading","className","style","props","onContextMenu","useContext","ThumbnailUploadContext","isStacking","jsx","clsx","thumb","Thumbnail"],"mappings":"iwMAWA,MAAMA,EAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,CAAE,QAAAC,CAAA,IACHA,EAAU,GACVC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,CAAE,QAAAD,CAAA,IAAc,GAAG,KAAK,IAAI,IAAK,CAACA,EAAU,IAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BjEE,EAAoB,CAAC,CAChC,WAAAC,EAAa,CAAA,EACb,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IAA8B,CAC5B,KAAM,CAAE,cAAAC,CAAA,EAAkBC,EAAAA,WAAWC,wBAAsB,EAE3DP,EAAaA,EAAW,MAAM,EAAG,CAAC,EAClC,MAAMQ,EAAaR,EAAW,OAAS,EAEvC,OAAKA,EAAW,OAGdS,EAAAA,kBAAAA,IAACd,EAAA,CACC,QAASK,EAAW,OACpB,UAAWU,EAAK,qBAAsBR,EAAW,CAAE,SAAUM,EAAY,EAExE,SAAAR,EAAW,IAAI,CAACW,EAAO,IACtBA,EACEF,EAAAA,kBAAAA,IAACG,EAAAA,UAAA,CACC,YAAaD,EAAM,YACnB,WAAYA,EAAM,KAClB,SAAUA,EAAM,GAChB,KAAMA,EAAM,KACZ,MAAOA,EAAM,MAEb,MAAO,CAAE,GAAGR,EAAO,OAAQ,CAAC,CAAA,EAC5B,gBAAiBQ,EAAM,UACvB,UAAAV,EACA,IAAKU,EAAM,IAEX,cAAAN,EACC,GAAGD,CAAA,EAPCO,EAAM,IAAMA,EAAM,KAAO,CAAA,EAS9B,IAAA,CACN,CAAA,EAzB2B,IA4BjC"}
+{"version":3,"file":"StackedThumbnails.cjs.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n  $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n  display: flex;\n  z-index: 10;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  min-width: min-content;\n  cursor: pointer;\n\n  &.stacking {\n    & > * {\n      margin: unset;\n      aspect-ratio: 1;\n      border: solid 2px var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n\n      span {\n        font-size: 24px;\n      }\n\n      ${({ $length }) =>\n        $length > 1 &&\n        css`\n          :not(:last-child) {\n            box-shadow: 0 0 4px 0px black;\n          }\n        `}\n    }\n\n    /* create stacked effect */\n    & > * + * {\n      margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n    }\n\n    .thumbnail img {\n      object-fit: cover;\n    }\n  }\n`\n\ntype Thumbnail = {\n  id?: string\n  type?: string\n  projectName?: string\n  icon?: string\n  color?: string\n  thumbnailHash?: string\n  src?: string\n}\n\nexport interface StackedThumbnailsProps\n  extends Omit<ThumbnailProps, 'entityType' | 'entityId' | 'projectName' | 'thumbnailHash'> {\n  thumbnails?: Thumbnail[]\n  isLoading?: boolean\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n  thumbnails = [],\n  isLoading,\n  className,\n  style,\n  ...props\n}: StackedThumbnailsProps) => {\n  const { onContextMenu } = useContext(ThumbnailUploadContext)\n  // limit to 5 users\n  thumbnails = thumbnails.slice(0, 5)\n  const isStacking = thumbnails.length > 1\n\n  if (!thumbnails.length) return null\n\n  return (\n    <StackedStyled\n      $length={thumbnails.length}\n      className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n    >\n      {thumbnails.map((thumb, i) =>\n        thumb ? (\n          <Thumbnail\n            projectName={thumb.projectName}\n            entityType={thumb.type}\n            entityId={thumb.id}\n            icon={thumb.icon}\n            color={thumb.color}\n            key={thumb.id || thumb.src || i}\n            style={{ ...style, zIndex: -i }}\n            thumbnailHash={thumb.thumbnailHash}\n            isLoading={isLoading}\n            src={thumb.src}\n            // @ts-ignore — Thumbnail forwards onContextMenu to its root element\n            onContextMenu={onContextMenu}\n            {...props}\n          />\n        ) : null,\n      )}\n    </StackedStyled>\n  )\n}\n"],"names":["StackedStyled","styled","$length","css","StackedThumbnails","thumbnails","isLoading","className","style","props","onContextMenu","useContext","ThumbnailUploadContext","isStacking","jsx","clsx","thumb","Thumbnail"],"mappings":"o4MAWA,MAAMA,EAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,CAAE,QAAAC,CAAA,IACHA,EAAU,GACVC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,CAAE,QAAAD,CAAA,IAAc,GAAG,KAAK,IAAI,IAAK,CAACA,EAAU,IAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BjEE,EAAoB,CAAC,CAChC,WAAAC,EAAa,CAAA,EACb,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IAA8B,CAC5B,KAAM,CAAE,cAAAC,CAAA,EAAkBC,EAAAA,WAAWC,wBAAsB,EAE3DP,EAAaA,EAAW,MAAM,EAAG,CAAC,EAClC,MAAMQ,EAAaR,EAAW,OAAS,EAEvC,OAAKA,EAAW,OAGdS,EAAAA,kBAAAA,IAACd,EAAA,CACC,QAASK,EAAW,OACpB,UAAWU,EAAK,qBAAsBR,EAAW,CAAE,SAAUM,EAAY,EAExE,SAAAR,EAAW,IAAI,CAACW,EAAO,IACtBA,EACEF,EAAAA,kBAAAA,IAACG,EAAAA,UAAA,CACC,YAAaD,EAAM,YACnB,WAAYA,EAAM,KAClB,SAAUA,EAAM,GAChB,KAAMA,EAAM,KACZ,MAAOA,EAAM,MAEb,MAAO,CAAE,GAAGR,EAAO,OAAQ,CAAC,CAAA,EAC5B,cAAeQ,EAAM,cACrB,UAAAV,EACA,IAAKU,EAAM,IAEX,cAAAN,EACC,GAAGD,CAAA,EAPCO,EAAM,IAAMA,EAAM,KAAO,CAAA,EAS9B,IAAA,CACN,CAAA,EAzB2B,IA4BjC"}

package/dist/shared/src/components/Thumbnail/StackedThumbnails.es.js

@@ -1,6 +1,6 @@
 import { j as i } from "../../../../_virtual/jsx-runtime.es.js";
-import { useContext as a } from "react";
-import d, { css as l } from "styled-components";
+import { useContext as c } from "react";
+import l, { css as d } from "styled-components";
 import { Thumbnail as x } from "./Thumbnail.es.js";
 import f from "clsx";
 import "../../context/RemoteModulesContext.es.js";
@@ -58,6 +58,7 @@ import "../../api/queries/attributes/getAttributes.es.js";
 import "../../api/queries/attributes/updateAttributes.es.js";
 import "../../api/queries/authentication/getAuthentication.es.js";
 import "../../api/queries/cloud/cloud.es.js";
+import "../../api/queries/columnStats/metricTargets.es.js";
 import "../../api/queries/config/getConfig.es.js";
 import "../../api/queries/config/updateConfig.es.js";
 import "../../api/queries/entities/getEntity.es.js";
@@ -70,6 +71,7 @@ import "../../api/queries/entities/updateEntity.es.js";
 import "../../api/queries/entityLists/getLists.es.js";
 import "../../api/queries/entityLists/updateLists.es.js";
 import "../../api/queries/entityLists/getListsAttributes.es.js";
+import "../../api/queries/entityLists/listItemsColumnStats.es.js";
 import "../../api/queries/entityLists/updateListsAttributes.es.js";
 import "../../api/queries/entityLists/listFolders.es.js";
 import "../../api/queries/folders/getFolders.es.js";
@@ -123,7 +125,7 @@ import "../../context/WebsocketContext.es.js";
 import "../../context/GlobalContext.es.js";
 import "../../context/ProjectContext.es.js";
 import "../../context/ProjectFoldersContext.es.js";
-const y = d.div`
+const y = l.div`
   display: flex;
   z-index: 10;
   height: 100%;
@@ -144,7 +146,7 @@ const y = d.div`
         font-size: 24px;
       }
 
-      ${({ $length: t }) => t > 1 && l`
+      ${({ $length: t }) => t > 1 && d`
           :not(:last-child) {
             box-shadow: 0 0 4px 0px black;
           }
@@ -160,21 +162,21 @@ const y = d.div`
       object-fit: cover;
     }
   }
-`, qo = ({
+`, Bo = ({
   thumbnails: t = [],
   isLoading: p,
   className: m,
   style: e,
   ...n
 }) => {
-  const { onContextMenu: s } = a(g);
+  const { onContextMenu: s } = c(g);
   t = t.slice(0, 5);
-  const c = t.length > 1;
+  const a = t.length > 1;
   return t.length ? /* @__PURE__ */ i.jsx(
     y,
     {
       $length: t.length,
-      className: f("stacked-thumbnails", m, { stacking: c }),
+      className: f("stacked-thumbnails", m, { stacking: a }),
       children: t.map(
         (o, r) => o ? /* @__PURE__ */ i.jsx(
           x,
@@ -185,7 +187,7 @@ const y = d.div`
             icon: o.icon,
             color: o.color,
             style: { ...e, zIndex: -r },
-            entityUpdatedAt: o.updatedAt,
+            thumbnailHash: o.thumbnailHash,
             isLoading: p,
             src: o.src,
             onContextMenu: s,
@@ -198,6 +200,6 @@ const y = d.div`
   ) : null;
 };
 export {
-  qo as StackedThumbnails
+  Bo as StackedThumbnails
 };
 //# sourceMappingURL=StackedThumbnails.es.js.map

package/dist/shared/src/components/Thumbnail/StackedThumbnails.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackedThumbnails.es.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n  $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n  display: flex;\n  z-index: 10;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  min-width: min-content;\n  cursor: pointer;\n\n  &.stacking {\n    & > * {\n      margin: unset;\n      aspect-ratio: 1;\n      border: solid 2px var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n\n      span {\n        font-size: 24px;\n      }\n\n      ${({ $length }) =>\n        $length > 1 &&\n        css`\n          :not(:last-child) {\n            box-shadow: 0 0 4px 0px black;\n          }\n        `}\n    }\n\n    /* create stacked effect */\n    & > * + * {\n      margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n    }\n\n    .thumbnail img {\n      object-fit: cover;\n    }\n  }\n`\n\ntype Thumbnail = {\n  id?: string\n  type?: string\n  projectName?: string\n  icon?: string\n  color?: string\n  updatedAt?: string\n  src?: string\n}\n\nexport interface StackedThumbnailsProps\n  extends Omit<ThumbnailProps, 'entityType' | 'entityId' | 'projectName'> {\n  thumbnails?: Thumbnail[]\n  isLoading?: boolean\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n  thumbnails = [],\n  isLoading,\n  className,\n  style,\n  ...props\n}: StackedThumbnailsProps) => {\n  const { onContextMenu } = useContext(ThumbnailUploadContext)\n  // limit to 5 users\n  thumbnails = thumbnails.slice(0, 5)\n  const isStacking = thumbnails.length > 1\n\n  if (!thumbnails.length) return null\n\n  return (\n    <StackedStyled\n      $length={thumbnails.length}\n      className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n    >\n      {thumbnails.map((thumb, i) =>\n        thumb ? (\n          <Thumbnail\n            projectName={thumb.projectName}\n            entityType={thumb.type}\n            entityId={thumb.id}\n            icon={thumb.icon}\n            color={thumb.color}\n            key={thumb.id || thumb.src || i}\n            style={{ ...style, zIndex: -i }}\n            entityUpdatedAt={thumb.updatedAt}\n            isLoading={isLoading}\n            src={thumb.src}\n            // @ts-ignore — Thumbnail forwards onContextMenu to its root element\n            onContextMenu={onContextMenu}\n            {...props}\n          />\n        ) : null,\n      )}\n    </StackedStyled>\n  )\n}\n"],"names":["StackedStyled","styled","$length","css","StackedThumbnails","thumbnails","isLoading","className","style","props","onContextMenu","useContext","ThumbnailUploadContext","isStacking","jsx","clsx","thumb","i","Thumbnail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAMA,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,EAAE,SAAAC,EAAA,MACHA,IAAU,KACVC;AAAA;AAAA;AAAA;AAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,EAAE,SAAAD,EAAA,MAAc,GAAG,KAAK,IAAI,KAAK,CAACA,IAAU,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2BjEE,KAAoB,CAAC;AAAA,EAChC,YAAAC,IAAa,CAAA;AAAA,EACb,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAA8B;AAC5B,QAAM,EAAE,eAAAC,EAAA,IAAkBC,EAAWC,CAAsB;AAE3D,EAAAP,IAAaA,EAAW,MAAM,GAAG,CAAC;AAClC,QAAMQ,IAAaR,EAAW,SAAS;AAEvC,SAAKA,EAAW,SAGdS,gBAAAA,EAAAA;AAAAA,IAACd;AAAA,IAAA;AAAA,MACC,SAASK,EAAW;AAAA,MACpB,WAAWU,EAAK,sBAAsBR,GAAW,EAAE,UAAUM,GAAY;AAAA,MAExE,UAAAR,EAAW;AAAA,QAAI,CAACW,GAAOC,MACtBD,IACEF,gBAAAA,EAAAA;AAAAA,UAACI;AAAA,UAAA;AAAA,YACC,aAAaF,EAAM;AAAA,YACnB,YAAYA,EAAM;AAAA,YAClB,UAAUA,EAAM;AAAA,YAChB,MAAMA,EAAM;AAAA,YACZ,OAAOA,EAAM;AAAA,YAEb,OAAO,EAAE,GAAGR,GAAO,QAAQ,CAACS,EAAA;AAAA,YAC5B,iBAAiBD,EAAM;AAAA,YACvB,WAAAV;AAAA,YACA,KAAKU,EAAM;AAAA,YAEX,eAAAN;AAAA,YACC,GAAGD;AAAA,UAAA;AAAA,UAPCO,EAAM,MAAMA,EAAM,OAAOC;AAAA,QAAA,IAS9B;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,IAzB2B;AA4BjC;"}
+{"version":3,"file":"StackedThumbnails.es.js","sources":["../../../../../src/components/Thumbnail/StackedThumbnails.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Thumbnail } from './Thumbnail'\nimport clsx from 'clsx'\nimport { ThumbnailUploadContext } from '@shared/context'\nimport { ThumbnailProps } from '@shared/components'\n\ntype StackedStyledProps = {\n  $length: number\n}\n\nconst StackedStyled = styled.div<StackedStyledProps>`\n  display: flex;\n  z-index: 10;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  border-radius: 8px;\n  min-width: min-content;\n  cursor: pointer;\n\n  &.stacking {\n    & > * {\n      margin: unset;\n      aspect-ratio: 1;\n      border: solid 2px var(--md-sys-color-outline-variant);\n      border-radius: 8px;\n\n      span {\n        font-size: 24px;\n      }\n\n      ${({ $length }) =>\n        $length > 1 &&\n        css`\n          :not(:last-child) {\n            box-shadow: 0 0 4px 0px black;\n          }\n        `}\n    }\n\n    /* create stacked effect */\n    & > * + * {\n      margin-left: ${({ $length }) => `${Math.max(-20, -$length * 1.5 - 8)}px`};\n    }\n\n    .thumbnail img {\n      object-fit: cover;\n    }\n  }\n`\n\ntype Thumbnail = {\n  id?: string\n  type?: string\n  projectName?: string\n  icon?: string\n  color?: string\n  thumbnailHash?: string\n  src?: string\n}\n\nexport interface StackedThumbnailsProps\n  extends Omit<ThumbnailProps, 'entityType' | 'entityId' | 'projectName' | 'thumbnailHash'> {\n  thumbnails?: Thumbnail[]\n  isLoading?: boolean\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport const StackedThumbnails = ({\n  thumbnails = [],\n  isLoading,\n  className,\n  style,\n  ...props\n}: StackedThumbnailsProps) => {\n  const { onContextMenu } = useContext(ThumbnailUploadContext)\n  // limit to 5 users\n  thumbnails = thumbnails.slice(0, 5)\n  const isStacking = thumbnails.length > 1\n\n  if (!thumbnails.length) return null\n\n  return (\n    <StackedStyled\n      $length={thumbnails.length}\n      className={clsx('stacked-thumbnails', className, { stacking: isStacking })}\n    >\n      {thumbnails.map((thumb, i) =>\n        thumb ? (\n          <Thumbnail\n            projectName={thumb.projectName}\n            entityType={thumb.type}\n            entityId={thumb.id}\n            icon={thumb.icon}\n            color={thumb.color}\n            key={thumb.id || thumb.src || i}\n            style={{ ...style, zIndex: -i }}\n            thumbnailHash={thumb.thumbnailHash}\n            isLoading={isLoading}\n            src={thumb.src}\n            // @ts-ignore — Thumbnail forwards onContextMenu to its root element\n            onContextMenu={onContextMenu}\n            {...props}\n          />\n        ) : null,\n      )}\n    </StackedStyled>\n  )\n}\n"],"names":["StackedStyled","styled","$length","css","StackedThumbnails","thumbnails","isLoading","className","style","props","onContextMenu","useContext","ThumbnailUploadContext","isStacking","jsx","clsx","thumb","i","Thumbnail"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAMA,IAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBrB,CAAC,EAAE,SAAAC,EAAA,MACHA,IAAU,KACVC;AAAA;AAAA;AAAA;AAAA,SAIC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKY,CAAC,EAAE,SAAAD,EAAA,MAAc,GAAG,KAAK,IAAI,KAAK,CAACA,IAAU,MAAM,CAAC,CAAC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2BjEE,KAAoB,CAAC;AAAA,EAChC,YAAAC,IAAa,CAAA;AAAA,EACb,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAA8B;AAC5B,QAAM,EAAE,eAAAC,EAAA,IAAkBC,EAAWC,CAAsB;AAE3D,EAAAP,IAAaA,EAAW,MAAM,GAAG,CAAC;AAClC,QAAMQ,IAAaR,EAAW,SAAS;AAEvC,SAAKA,EAAW,SAGdS,gBAAAA,EAAAA;AAAAA,IAACd;AAAA,IAAA;AAAA,MACC,SAASK,EAAW;AAAA,MACpB,WAAWU,EAAK,sBAAsBR,GAAW,EAAE,UAAUM,GAAY;AAAA,MAExE,UAAAR,EAAW;AAAA,QAAI,CAACW,GAAOC,MACtBD,IACEF,gBAAAA,EAAAA;AAAAA,UAACI;AAAA,UAAA;AAAA,YACC,aAAaF,EAAM;AAAA,YACnB,YAAYA,EAAM;AAAA,YAClB,UAAUA,EAAM;AAAA,YAChB,MAAMA,EAAM;AAAA,YACZ,OAAOA,EAAM;AAAA,YAEb,OAAO,EAAE,GAAGR,GAAO,QAAQ,CAACS,EAAA;AAAA,YAC5B,eAAeD,EAAM;AAAA,YACrB,WAAAV;AAAA,YACA,KAAKU,EAAM;AAAA,YAEX,eAAAN;AAAA,YACC,GAAGD;AAAA,UAAA;AAAA,UAPCO,EAAM,MAAMA,EAAM,OAAOC;AAAA,QAAA,IAS9B;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,IAzB2B;AA4BjC;"}

package/dist/shared/src/components/Thumbnail/Thumbnail.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../../_virtual/jsx-runtime.cjs.js"),l=require("react"),h=require("@ynput/ayon-react-components"),k=require("clsx"),j=require("./Thumbnail.styled.cjs.js"),v=({projectName:e="",entityType:t="",entityId:u="",icon:E,color:R,entityUpdatedAt:a,isLoading:c,shimmer:$,className:g,disabled:q,src:d,hoverIcon:m,showBorder:S=!0,...x})=>{const f=t==="project",p=["product"].includes(t),b=f?!!e:!!u;let s="";t&&a&&b&&(d?s=d:e&&(s=f?`/api/projects/${e}/thumbnail`:`/api/projects/${e}/${t}s/${u}/thumbnail`),s&&!/[?&]updatedAt=/.test(s)&&(s+=(s.includes("?")?"&":"?")+`updatedAt=${a}`));const[C,r]=l.useState(!1),[i,o]=l.useState(!1);return l.useEffect(()=>{if(s===""){o(!0),r(!0);return}o(!1),r(!1)},[s]),n.jsxRuntimeExports.jsxs(j.Card,{className:k(g,"thumbnail",{loading:$&&(c||!i),loaded:i,error:C,clickable:!!x.onClick,border:S}),...x,children:[(!c||!i)&&!q&&n.jsxRuntimeExports.jsx(h.Icon,{style:{color:R||void 0},icon:E||"image",className:"type-icon"}),t&&e&&!p&&b&&n.jsxRuntimeExports.jsx(j.Image,{alt:`Entity thumbnail ${u||e}`,src:s,onLoad:()=>{o(!0),r(!1)},onError:()=>{o(!0),r(!0)}}),m&&n.jsxRuntimeExports.jsx(h.Icon,{icon:m,className:"hover-icon"})]})};exports.Thumbnail=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../../_virtual/jsx-runtime.cjs.js"),l=require("react"),q=require("@ynput/ayon-react-components"),P=require("clsx"),E=require("./Thumbnail.styled.cjs.js");require("lodash");require("react-toastify");require("uuid");const T=require("../../util/getThumbnailUrl.cjs.js");require("../../util/pubsub.cjs.js");const U=({projectName:s="",entityType:e="",entityId:u="",icon:j,color:g,thumbnailHash:c,isLoading:a,shimmer:h,className:R,disabled:S,src:m,hoverIcon:x,showBorder:C=!0,...d})=>{const f=e==="project",k=["product"].includes(e),b=f?!!s:!!u;let r="";e&&(c||f)&&b&&(m?r=m:r=T.getEntityThumbnailUrl({projectName:s,entityType:e,entityId:u,thumbnailHash:c})??"");const[v,t]=l.useState(!1),[i,o]=l.useState(!1);return l.useEffect(()=>{if(r===""){o(!0),t(!0);return}o(!1),t(!1)},[r]),n.jsxRuntimeExports.jsxs(E.Card,{className:P(R,"thumbnail",{loading:h&&(a||!i),loaded:i,error:v,clickable:!!d.onClick,border:C}),...d,children:[(!a||!i)&&!S&&n.jsxRuntimeExports.jsx(q.Icon,{style:{color:g||void 0},icon:j||"image",className:"type-icon"}),e&&s&&!k&&b&&n.jsxRuntimeExports.jsx(E.Image,{alt:`Entity thumbnail ${u||s}`,src:r,onLoad:()=>{o(!0),t(!1)},onError:()=>{o(!0),t(!0)}}),x&&n.jsxRuntimeExports.jsx(q.Icon,{icon:x,className:"hover-icon"})]})};exports.Thumbnail=U;
 //# sourceMappingURL=Thumbnail.cjs.js.map

package/dist/shared/src/components/Thumbnail/Thumbnail.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.cjs.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useState } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport * as Styled from './Thumbnail.styled'\n\nexport interface ThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  projectName?: string\n  entityType?: string\n  entityId?: string\n  icon?: string | null\n  color?: string | null\n  entityUpdatedAt?: string\n  isLoading?: boolean\n  shimmer?: boolean\n  className?: string\n  disabled?: boolean\n  src?: string\n  hoverIcon?: string\n  showBorder?: boolean\n}\n\nexport const Thumbnail = ({\n  projectName = '',\n  entityType = '',\n  entityId = '',\n  icon,\n  color,\n  entityUpdatedAt,\n  isLoading,\n  shimmer,\n  className,\n  disabled,\n  src,\n  hoverIcon,\n  showBorder = true,\n  ...props\n}: ThumbnailProps) => {\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  let url = ''\n  if (entityType && entityUpdatedAt && hasIdentity) {\n    if (src) {\n      url = src\n    } else if (projectName) {\n      url = isProject\n        ? `/api/projects/${projectName}/thumbnail`\n        : `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n    }\n    if (url && !/[?&]updatedAt=/.test(url)) {\n      url += (url.includes('?') ? '&' : '?') + `updatedAt=${entityUpdatedAt}`\n    }\n  }\n\n  const [error, setError] = useState(false)\n  const [loaded, setLoaded] = useState(false)\n\n  useEffect(() => {\n    if (url === '') {\n      setLoaded(true)\n      setError(true)\n      return\n    }\n\n    setLoaded(false)\n    setError(false)\n  }, [url])\n\n  return (\n    <Styled.Card\n      className={clsx(className, 'thumbnail', {\n        loading: shimmer && (isLoading || !loaded),\n        loaded,\n        error,\n        clickable: !!props.onClick,\n        border: showBorder,\n      })}\n      {...props}\n    >\n      {(!isLoading || !loaded) && !disabled && (\n        <Icon style={{ color: color || undefined }} icon={icon || 'image'} className=\"type-icon\" />\n      )}\n      {entityType && projectName && !isWrongEntity && hasIdentity && (\n        <Styled.Image\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={url}\n          onLoad={() => {\n            setLoaded(true)\n            setError(false)\n          }}\n          onError={() => {\n            setLoaded(true)\n            setError(true)\n          }}\n        />\n      )}\n      {hoverIcon && <Icon icon={hoverIcon} className=\"hover-icon\" />}\n    </Styled.Card>\n  )\n}\n"],"names":["Thumbnail","projectName","entityType","entityId","icon","color","entityUpdatedAt","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","error","setError","useState","loaded","setLoaded","useEffect","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":"iQAqBaA,EAAY,CAAC,CACxB,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,KAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,SAAAC,EACA,IAAAC,EACA,UAAAC,EACA,WAAAC,EAAa,GACb,GAAGC,CACL,IAAsB,CACpB,MAAMC,EAAYb,IAAe,UAC3Bc,EAAgB,CAAC,SAAS,EAAE,SAASd,CAAU,EAC/Ce,EAAcF,EAAY,CAAC,CAACd,EAAc,CAAC,CAACE,EAElD,IAAIe,EAAM,GACNhB,GAAcI,GAAmBW,IAC/BN,EACFO,EAAMP,EACGV,IACTiB,EAAMH,EACF,iBAAiBd,CAAW,aAC5B,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,cAEzDe,GAAO,CAAC,iBAAiB,KAAKA,CAAG,IACnCA,IAAQA,EAAI,SAAS,GAAG,EAAI,IAAM,KAAO,aAAaZ,CAAe,KAIzE,KAAM,CAACa,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAK,EAClC,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EAE1CG,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIN,IAAQ,GAAI,CACdK,EAAU,EAAI,EACdH,EAAS,EAAI,EACb,MACF,CAEAG,EAAU,EAAK,EACfH,EAAS,EAAK,CAChB,EAAG,CAACF,CAAG,CAAC,EAGNO,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACC,UAAWC,EAAKlB,EAAW,YAAa,CACtC,QAASD,IAAYD,GAAa,CAACe,GACnC,OAAAA,EACA,MAAAH,EACA,UAAW,CAAC,CAACL,EAAM,QACnB,OAAQD,CAAA,CACT,EACA,GAAGC,EAEF,SAAA,EAAA,CAACP,GAAa,CAACe,IAAW,CAACZ,2BAC1BkB,EAAAA,KAAA,CAAK,MAAO,CAAE,MAAOvB,GAAS,MAAA,EAAa,KAAMD,GAAQ,QAAS,UAAU,YAAY,EAE1FF,GAAcD,GAAe,CAACe,GAAiBC,GAC9CY,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,IAAK,oBAAoB3B,GAAYF,CAAW,GAChD,IAAKiB,EACL,OAAQ,IAAM,CACZK,EAAU,EAAI,EACdH,EAAS,EAAK,CAChB,EACA,QAAS,IAAM,CACbG,EAAU,EAAI,EACdH,EAAS,EAAI,CACf,CAAA,CAAA,EAGHR,GAAaiB,EAAAA,kBAAAA,IAACD,OAAA,CAAK,KAAMhB,EAAW,UAAU,YAAA,CAAa,CAAA,CAAA,CAAA,CAGlE"}
+{"version":3,"file":"Thumbnail.cjs.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useState } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport * as Styled from './Thumbnail.styled'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  projectName?: string\n  entityType?: string\n  entityId?: string\n  icon?: string | null\n  color?: string | null\n  thumbnailHash?: string\n  isLoading?: boolean\n  shimmer?: boolean\n  className?: string\n  disabled?: boolean\n  src?: string\n  hoverIcon?: string\n  showBorder?: boolean\n}\n\nexport const Thumbnail = ({\n  projectName = '',\n  entityType = '',\n  entityId = '',\n  icon,\n  color,\n  thumbnailHash,\n  isLoading,\n  shimmer,\n  className,\n  disabled,\n  src,\n  hoverIcon,\n  showBorder = true,\n  ...props\n}: ThumbnailProps) => {\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  let url = ''\n  if (entityType && (thumbnailHash || isProject) && hasIdentity) {\n    if (src) {\n      url = src\n    } else {\n      url = getEntityThumbnailUrl({ projectName, entityType, entityId, thumbnailHash }) ?? ''\n    }\n  }\n\n  const [error, setError] = useState(false)\n  const [loaded, setLoaded] = useState(false)\n\n  useEffect(() => {\n    if (url === '') {\n      setLoaded(true)\n      setError(true)\n      return\n    }\n\n    setLoaded(false)\n    setError(false)\n  }, [url])\n\n  return (\n    <Styled.Card\n      className={clsx(className, 'thumbnail', {\n        loading: shimmer && (isLoading || !loaded),\n        loaded,\n        error,\n        clickable: !!props.onClick,\n        border: showBorder,\n      })}\n      {...props}\n    >\n      {(!isLoading || !loaded) && !disabled && (\n        <Icon style={{ color: color || undefined }} icon={icon || 'image'} className=\"type-icon\" />\n      )}\n      {entityType && projectName && !isWrongEntity && hasIdentity && (\n        <Styled.Image\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={url}\n          onLoad={() => {\n            setLoaded(true)\n            setError(false)\n          }}\n          onError={() => {\n            setLoaded(true)\n            setError(true)\n          }}\n        />\n      )}\n      {hoverIcon && <Icon icon={hoverIcon} className=\"hover-icon\" />}\n    </Styled.Card>\n  )\n}\n"],"names":["Thumbnail","projectName","entityType","entityId","icon","color","thumbnailHash","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","getEntityThumbnailUrl","error","setError","useState","loaded","setLoaded","useEffect","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":"sZAsBO,MAAMA,EAAY,CAAC,CACxB,YAAAC,EAAc,GACd,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,KAAAC,EACA,MAAAC,EACA,cAAAC,EACA,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,SAAAC,EACA,IAAAC,EACA,UAAAC,EACA,WAAAC,EAAa,GACb,GAAGC,CACL,IAAsB,CACpB,MAAMC,EAAYb,IAAe,UAC3Bc,EAAgB,CAAC,SAAS,EAAE,SAASd,CAAU,EAC/Ce,EAAcF,EAAY,CAAC,CAACd,EAAc,CAAC,CAACE,EAElD,IAAIe,EAAM,GACNhB,IAAeI,GAAiBS,IAAcE,IAC5CN,EACFO,EAAMP,EAENO,EAAMC,EAAAA,sBAAsB,CAAE,YAAAlB,EAAa,WAAAC,EAAY,SAAAC,EAAU,cAAAG,CAAA,CAAe,GAAK,IAIzF,KAAM,CAACc,EAAOC,CAAQ,EAAIC,EAAAA,SAAS,EAAK,EAClC,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAS,EAAK,EAE1CG,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAIP,IAAQ,GAAI,CACdM,EAAU,EAAI,EACdH,EAAS,EAAI,EACb,MACF,CAEAG,EAAU,EAAK,EACfH,EAAS,EAAK,CAChB,EAAG,CAACH,CAAG,CAAC,EAGNQ,EAAAA,kBAAAA,KAACC,EAAAA,KAAA,CACC,UAAWC,EAAKnB,EAAW,YAAa,CACtC,QAASD,IAAYD,GAAa,CAACgB,GACnC,OAAAA,EACA,MAAAH,EACA,UAAW,CAAC,CAACN,EAAM,QACnB,OAAQD,CAAA,CACT,EACA,GAAGC,EAEF,SAAA,EAAA,CAACP,GAAa,CAACgB,IAAW,CAACb,2BAC1BmB,EAAAA,KAAA,CAAK,MAAO,CAAE,MAAOxB,GAAS,MAAA,EAAa,KAAMD,GAAQ,QAAS,UAAU,YAAY,EAE1FF,GAAcD,GAAe,CAACe,GAAiBC,GAC9Ca,EAAAA,kBAAAA,IAACC,EAAAA,MAAA,CACC,IAAK,oBAAoB5B,GAAYF,CAAW,GAChD,IAAKiB,EACL,OAAQ,IAAM,CACZM,EAAU,EAAI,EACdH,EAAS,EAAK,CAChB,EACA,QAAS,IAAM,CACbG,EAAU,EAAI,EACdH,EAAS,EAAI,CACf,CAAA,CAAA,EAGHT,GAAakB,EAAAA,kBAAAA,IAACD,OAAA,CAAK,KAAMjB,EAAW,UAAU,YAAA,CAAa,CAAA,CAAA,CAAA,CAGlE"}

package/dist/shared/src/components/Thumbnail/Thumbnail.es.js

@@ -1,66 +1,71 @@
 import { j as i } from "../../../../_virtual/jsx-runtime.es.js";
-import { useState as b, useEffect as A } from "react";
-import { Icon as h } from "@ynput/ayon-react-components";
-import L from "clsx";
-import { Card as P, Image as R } from "./Thumbnail.styled.es.js";
-const B = ({
-  projectName: r = "",
-  entityType: o = "",
-  entityId: a = "",
-  icon: E,
-  color: $,
-  entityUpdatedAt: c,
-  isLoading: u,
-  shimmer: j,
-  className: p,
-  disabled: g,
+import { useState as E, useEffect as P } from "react";
+import { Icon as p } from "@ynput/ayon-react-components";
+import R from "clsx";
+import { Card as S, Image as U } from "./Thumbnail.styled.es.js";
+import "lodash";
+import "react-toastify";
+import "uuid";
+import { getEntityThumbnailUrl as W } from "../../util/getThumbnailUrl.es.js";
+import "../../util/pubsub.es.js";
+const J = ({
+  projectName: t = "",
+  entityType: r = "",
+  entityId: l = "",
+  icon: b,
+  color: j,
+  thumbnailHash: a,
+  isLoading: c,
+  shimmer: g,
+  className: h,
+  disabled: k,
   src: n,
-  hoverIcon: f,
-  showBorder: k = !0,
-  ...m
+  hoverIcon: u,
+  showBorder: C = !0,
+  ...f
 }) => {
-  const d = o === "project", C = ["product"].includes(o), x = d ? !!r : !!a;
-  let s = "";
-  o && c && x && (n ? s = n : r && (s = d ? `/api/projects/${r}/thumbnail` : `/api/projects/${r}/${o}s/${a}/thumbnail`), s && !/[?&]updatedAt=/.test(s) && (s += (s.includes("?") ? "&" : "?") + `updatedAt=${c}`));
-  const [v, t] = b(!1), [e, l] = b(!1);
-  return A(() => {
-    if (s === "") {
-      l(!0), t(!0);
+  const d = r === "project", v = ["product"].includes(r), x = d ? !!t : !!l;
+  let o = "";
+  r && (a || d) && x && (n ? o = n : o = W({ projectName: t, entityType: r, entityId: l, thumbnailHash: a }) ?? "");
+  const [L, s] = E(!1), [m, e] = E(!1);
+  return P(() => {
+    if (o === "") {
+      e(!0), s(!0);
       return;
     }
-    l(!1), t(!1);
-  }, [s]), /* @__PURE__ */ i.jsxs(
-    P,
+    e(!1), s(!1);
+  }, [o]), /* @__PURE__ */ i.jsxs(
+    S,
     {
-      className: L(p, "thumbnail", {
-        loading: j && (u || !e),
-        loaded: e,
-        error: v,
-        clickable: !!m.onClick,
-        border: k
+      className: R(h, "thumbnail", {
+        loading: g && (c || !m),
+        loaded: m,
+        error: L,
+        clickable: !!f.onClick,
+        border: C
       }),
-      ...m,
+      ...f,
       children: [
-        (!u || !e) && !g && /* @__PURE__ */ i.jsx(h, { style: { color: $ || void 0 }, icon: E || "image", className: "type-icon" }),
-        o && r && !C && x && /* @__PURE__ */ i.jsx(
-          R,
+        (!c || !m) && !k && /* @__PURE__ */ i.jsx(p, { style: { color: j || void 0 }, icon: b || "image", className: "type-icon" }),
+        r && t && !v && x && /* @__PURE__ */ i.jsx(
+          U,
           {
-            alt: `Entity thumbnail ${a || r}`,
-            src: s,
+            alt: `Entity thumbnail ${l || t}`,
+            src: o,
             onLoad: () => {
-              l(!0), t(!1);
+              e(!0), s(!1);
             },
             onError: () => {
-              l(!0), t(!0);
+              e(!0), s(!0);
             }
           }
         ),
-        f && /* @__PURE__ */ i.jsx(h, { icon: f, className: "hover-icon" })
+        u && /* @__PURE__ */ i.jsx(p, { icon: u, className: "hover-icon" })
       ]
     }
   );
 };
 export {
-  B as Thumbnail
+  J as Thumbnail
 };
 //# sourceMappingURL=Thumbnail.es.js.map

package/dist/shared/src/components/Thumbnail/Thumbnail.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.es.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useState } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport * as Styled from './Thumbnail.styled'\n\nexport interface ThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  projectName?: string\n  entityType?: string\n  entityId?: string\n  icon?: string | null\n  color?: string | null\n  entityUpdatedAt?: string\n  isLoading?: boolean\n  shimmer?: boolean\n  className?: string\n  disabled?: boolean\n  src?: string\n  hoverIcon?: string\n  showBorder?: boolean\n}\n\nexport const Thumbnail = ({\n  projectName = '',\n  entityType = '',\n  entityId = '',\n  icon,\n  color,\n  entityUpdatedAt,\n  isLoading,\n  shimmer,\n  className,\n  disabled,\n  src,\n  hoverIcon,\n  showBorder = true,\n  ...props\n}: ThumbnailProps) => {\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  let url = ''\n  if (entityType && entityUpdatedAt && hasIdentity) {\n    if (src) {\n      url = src\n    } else if (projectName) {\n      url = isProject\n        ? `/api/projects/${projectName}/thumbnail`\n        : `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n    }\n    if (url && !/[?&]updatedAt=/.test(url)) {\n      url += (url.includes('?') ? '&' : '?') + `updatedAt=${entityUpdatedAt}`\n    }\n  }\n\n  const [error, setError] = useState(false)\n  const [loaded, setLoaded] = useState(false)\n\n  useEffect(() => {\n    if (url === '') {\n      setLoaded(true)\n      setError(true)\n      return\n    }\n\n    setLoaded(false)\n    setError(false)\n  }, [url])\n\n  return (\n    <Styled.Card\n      className={clsx(className, 'thumbnail', {\n        loading: shimmer && (isLoading || !loaded),\n        loaded,\n        error,\n        clickable: !!props.onClick,\n        border: showBorder,\n      })}\n      {...props}\n    >\n      {(!isLoading || !loaded) && !disabled && (\n        <Icon style={{ color: color || undefined }} icon={icon || 'image'} className=\"type-icon\" />\n      )}\n      {entityType && projectName && !isWrongEntity && hasIdentity && (\n        <Styled.Image\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={url}\n          onLoad={() => {\n            setLoaded(true)\n            setError(false)\n          }}\n          onError={() => {\n            setLoaded(true)\n            setError(true)\n          }}\n        />\n      )}\n      {hoverIcon && <Icon icon={hoverIcon} className=\"hover-icon\" />}\n    </Styled.Card>\n  )\n}\n"],"names":["Thumbnail","projectName","entityType","entityId","icon","color","entityUpdatedAt","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","error","setError","useState","loaded","setLoaded","useEffect","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":";;;;;AAqBO,MAAMA,IAAY,CAAC;AAAA,EACxB,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,GAAGC;AACL,MAAsB;AACpB,QAAMC,IAAYb,MAAe,WAC3Bc,IAAgB,CAAC,SAAS,EAAE,SAASd,CAAU,GAC/Ce,IAAcF,IAAY,CAAC,CAACd,IAAc,CAAC,CAACE;AAElD,MAAIe,IAAM;AACV,EAAIhB,KAAcI,KAAmBW,MAC/BN,IACFO,IAAMP,IACGV,MACTiB,IAAMH,IACF,iBAAiBd,CAAW,eAC5B,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,eAEzDe,KAAO,CAAC,iBAAiB,KAAKA,CAAG,MACnCA,MAAQA,EAAI,SAAS,GAAG,IAAI,MAAM,OAAO,aAAaZ,CAAe;AAIzE,QAAM,CAACa,GAAOC,CAAQ,IAAIC,EAAS,EAAK,GAClC,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,SAAAG,EAAU,MAAM;AACd,QAAIN,MAAQ,IAAI;AACd,MAAAK,EAAU,EAAI,GACdH,EAAS,EAAI;AACb;AAAA,IACF;AAEA,IAAAG,EAAU,EAAK,GACfH,EAAS,EAAK;AAAA,EAChB,GAAG,CAACF,CAAG,CAAC,GAGNO,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAKlB,GAAW,aAAa;AAAA,QACtC,SAASD,MAAYD,KAAa,CAACe;AAAA,QACnC,QAAAA;AAAA,QACA,OAAAH;AAAA,QACA,WAAW,CAAC,CAACL,EAAM;AAAA,QACnB,QAAQD;AAAA,MAAA,CACT;AAAA,MACA,GAAGC;AAAA,MAEF,UAAA;AAAA,SAAA,CAACP,KAAa,CAACe,MAAW,CAACZ,2BAC1BkB,GAAA,EAAK,OAAO,EAAE,OAAOvB,KAAS,OAAA,GAAa,MAAMD,KAAQ,SAAS,WAAU,aAAY;AAAA,QAE1FF,KAAcD,KAAe,CAACe,KAAiBC,KAC9CY,gBAAAA,EAAAA;AAAAA,UAACC;AAAAA,UAAA;AAAA,YACC,KAAK,oBAAoB3B,KAAYF,CAAW;AAAA,YAChD,KAAKiB;AAAA,YACL,QAAQ,MAAM;AACZ,cAAAK,EAAU,EAAI,GACdH,EAAS,EAAK;AAAA,YAChB;AAAA,YACA,SAAS,MAAM;AACb,cAAAG,EAAU,EAAI,GACdH,EAAS,EAAI;AAAA,YACf;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHR,KAAaiB,gBAAAA,EAAAA,IAACD,GAAA,EAAK,MAAMhB,GAAW,WAAU,aAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlE;"}
+{"version":3,"file":"Thumbnail.es.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.tsx"],"sourcesContent":["import { HTMLAttributes, useEffect, useState } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport * as Styled from './Thumbnail.styled'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  projectName?: string\n  entityType?: string\n  entityId?: string\n  icon?: string | null\n  color?: string | null\n  thumbnailHash?: string\n  isLoading?: boolean\n  shimmer?: boolean\n  className?: string\n  disabled?: boolean\n  src?: string\n  hoverIcon?: string\n  showBorder?: boolean\n}\n\nexport const Thumbnail = ({\n  projectName = '',\n  entityType = '',\n  entityId = '',\n  icon,\n  color,\n  thumbnailHash,\n  isLoading,\n  shimmer,\n  className,\n  disabled,\n  src,\n  hoverIcon,\n  showBorder = true,\n  ...props\n}: ThumbnailProps) => {\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  let url = ''\n  if (entityType && (thumbnailHash || isProject) && hasIdentity) {\n    if (src) {\n      url = src\n    } else {\n      url = getEntityThumbnailUrl({ projectName, entityType, entityId, thumbnailHash }) ?? ''\n    }\n  }\n\n  const [error, setError] = useState(false)\n  const [loaded, setLoaded] = useState(false)\n\n  useEffect(() => {\n    if (url === '') {\n      setLoaded(true)\n      setError(true)\n      return\n    }\n\n    setLoaded(false)\n    setError(false)\n  }, [url])\n\n  return (\n    <Styled.Card\n      className={clsx(className, 'thumbnail', {\n        loading: shimmer && (isLoading || !loaded),\n        loaded,\n        error,\n        clickable: !!props.onClick,\n        border: showBorder,\n      })}\n      {...props}\n    >\n      {(!isLoading || !loaded) && !disabled && (\n        <Icon style={{ color: color || undefined }} icon={icon || 'image'} className=\"type-icon\" />\n      )}\n      {entityType && projectName && !isWrongEntity && hasIdentity && (\n        <Styled.Image\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={url}\n          onLoad={() => {\n            setLoaded(true)\n            setError(false)\n          }}\n          onError={() => {\n            setLoaded(true)\n            setError(true)\n          }}\n        />\n      )}\n      {hoverIcon && <Icon icon={hoverIcon} className=\"hover-icon\" />}\n    </Styled.Card>\n  )\n}\n"],"names":["Thumbnail","projectName","entityType","entityId","icon","color","thumbnailHash","isLoading","shimmer","className","disabled","src","hoverIcon","showBorder","props","isProject","isWrongEntity","hasIdentity","url","getEntityThumbnailUrl","error","setError","useState","loaded","setLoaded","useEffect","jsxs","Styled.Card","clsx","Icon","jsx","Styled.Image"],"mappings":";;;;;;;;;;AAsBO,MAAMA,IAAY,CAAC;AAAA,EACxB,aAAAC,IAAc;AAAA,EACd,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,GAAGC;AACL,MAAsB;AACpB,QAAMC,IAAYb,MAAe,WAC3Bc,IAAgB,CAAC,SAAS,EAAE,SAASd,CAAU,GAC/Ce,IAAcF,IAAY,CAAC,CAACd,IAAc,CAAC,CAACE;AAElD,MAAIe,IAAM;AACV,EAAIhB,MAAeI,KAAiBS,MAAcE,MAC5CN,IACFO,IAAMP,IAENO,IAAMC,EAAsB,EAAE,aAAAlB,GAAa,YAAAC,GAAY,UAAAC,GAAU,eAAAG,EAAA,CAAe,KAAK;AAIzF,QAAM,CAACc,GAAOC,CAAQ,IAAIC,EAAS,EAAK,GAClC,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,SAAAG,EAAU,MAAM;AACd,QAAIP,MAAQ,IAAI;AACd,MAAAM,EAAU,EAAI,GACdH,EAAS,EAAI;AACb;AAAA,IACF;AAEA,IAAAG,EAAU,EAAK,GACfH,EAAS,EAAK;AAAA,EAChB,GAAG,CAACH,CAAG,CAAC,GAGNQ,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAKnB,GAAW,aAAa;AAAA,QACtC,SAASD,MAAYD,KAAa,CAACgB;AAAA,QACnC,QAAAA;AAAA,QACA,OAAAH;AAAA,QACA,WAAW,CAAC,CAACN,EAAM;AAAA,QACnB,QAAQD;AAAA,MAAA,CACT;AAAA,MACA,GAAGC;AAAA,MAEF,UAAA;AAAA,SAAA,CAACP,KAAa,CAACgB,MAAW,CAACb,2BAC1BmB,GAAA,EAAK,OAAO,EAAE,OAAOxB,KAAS,OAAA,GAAa,MAAMD,KAAQ,SAAS,WAAU,aAAY;AAAA,QAE1FF,KAAcD,KAAe,CAACe,KAAiBC,KAC9Ca,gBAAAA,EAAAA;AAAAA,UAACC;AAAAA,UAAA;AAAA,YACC,KAAK,oBAAoB5B,KAAYF,CAAW;AAAA,YAChD,KAAKiB;AAAA,YACL,QAAQ,MAAM;AACZ,cAAAM,EAAU,EAAI,GACdH,EAAS,EAAK;AAAA,YAChB;AAAA,YACA,SAAS,MAAM;AACb,cAAAG,EAAU,EAAI,GACdH,EAAS,EAAI;AAAA,YACf;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHT,KAAakB,gBAAAA,EAAAA,IAACD,GAAA,EAAK,MAAMjB,GAAW,WAAU,aAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlE;"}

package/dist/shared/src/components/ThumbnailSimple/ThumbnailSimple.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),n=require("styled-components"),j=require("@ynput/ayon-react-components"),y=n.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../../_virtual/jsx-runtime.cjs.js"),r=require("styled-components"),f=require("@ynput/ayon-react-components");require("lodash");require("react-toastify");require("uuid");const q=require("../../util/getThumbnailUrl.cjs.js");require("../../util/pubsub.cjs.js");const v=r.div`
   position: relative;
   width: 100%;
   max-width: 500px;
@@ -20,7 +20,7 @@
     background-color: hsl(220 20% 8%);
     color: var(--md-sys-color-outline);
   }
-`,f=n.img`
+`,y=r.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -29,5 +29,5 @@
   display: block;
   position: absolute;
   inset: 0;
-`,w=({projectName:o,entityType:t,entityId:s,icon:r,entityUpdatedAt:l,isLoading:a,className:c,disabled:u,src:i,onLoad:m,onError:d,iconOnly:p,...h})=>{const x=o&&`/api/projects/${o}/${t}s/${s}/thumbnail`,b=`?updatedAt=${l}`,g=["product"].includes(t);return e.jsxRuntimeExports.jsxs(y,{className:c+" thumbnail",...h,children:[!a&&!u&&e.jsxRuntimeExports.jsx(j.Icon,{icon:r||"image"}),(t&&!(g||!s)||i)&&!p&&e.jsxRuntimeExports.jsx(f,{alt:`Entity thumbnail ${s}`,src:i||`${x}${b}`,onLoad:m,onError:d})]})};exports.ThumbnailSimple=w;
+`,w=({projectName:e,entityType:t,entityId:i,icon:l,thumbnailHash:n,isLoading:a,className:c,disabled:u,src:s,onLoad:m,onError:d,iconOnly:h,...b})=>{const x=q.getEntityThumbnailUrl({projectName:e,entityType:t,entityId:i,thumbnailHash:n?String(n):void 0}),g=t==="project",p=["product"].includes(t),j=g?!!e:!!i;return o.jsxRuntimeExports.jsxs(v,{className:c+" thumbnail",...b,children:[!a&&!u&&o.jsxRuntimeExports.jsx(f.Icon,{icon:l||"image"}),(t&&!p&&j||s)&&!h&&o.jsxRuntimeExports.jsx(y,{alt:`Entity thumbnail ${i||e}`,src:s||x||void 0,onLoad:m,onError:d})]})};exports.ThumbnailSimple=w;
 //# sourceMappingURL=ThumbnailSimple.cjs.js.map

package/dist/shared/src/components/ThumbnailSimple/ThumbnailSimple.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailSimple.cjs.js","sources":["../../../../../src/components/ThumbnailSimple/ThumbnailSimple.tsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '@ynput/ayon-react-components'\n\nexport interface ThumbnailSimpleProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  icon?: string\n  entityUpdatedAt: string | number\n  isLoading?: boolean\n  disabled?: boolean\n  src?: string\n  onLoad?: React.ReactEventHandler<HTMLImageElement>\n  onError?: React.ReactEventHandler<HTMLImageElement>\n  iconOnly?: boolean\n}\n\nconst ThumbnailStyled = styled.div`\n  position: relative;\n  width: 100%;\n  max-width: 500px;\n  aspect-ratio: 1.77;\n  overflow: hidden;\n  margin: auto;\n  max-width: 250px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* icon */\n  span {\n    position: absolute;\n    font-size: 4rem;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n    background-color: hsl(220 20% 8%);\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst ImageStyled = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n`\n\nexport const ThumbnailSimple: React.FC<ThumbnailSimpleProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  icon,\n  entityUpdatedAt,\n  isLoading,\n  className,\n  disabled,\n  src,\n  onLoad,\n  onError,\n  iconOnly,\n  ...props\n}) => {\n  const url = projectName && `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n  const queryArgs = `?updatedAt=${entityUpdatedAt}`\n  const isWrongEntity = ['product'].includes(entityType)\n\n  return (\n    <ThumbnailStyled className={className + ' thumbnail'} {...props}>\n      {!isLoading && !disabled && <Icon icon={icon || 'image'} />}\n      {((entityType && !(isWrongEntity || !entityId)) || src) && !iconOnly && (\n        <ImageStyled\n          alt={`Entity thumbnail ${entityId}`}\n          src={src || `${url}${queryArgs}`}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      )}\n    </ThumbnailStyled>\n  )\n}\n"],"names":["ThumbnailStyled","styled","ImageStyled","ThumbnailSimple","projectName","entityType","entityId","icon","entityUpdatedAt","isLoading","className","disabled","src","onLoad","onError","iconOnly","props","url","queryArgs","isWrongEntity","Icon","jsx"],"mappings":"oNAkBMA,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBzBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWdE,EAAkD,CAAC,CAC9D,YAAAC,EACA,WAAAC,EACA,SAAAC,EACA,KAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,IAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAMb,GAAe,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,aAC5EY,EAAY,cAAcV,CAAe,GACzCW,EAAgB,CAAC,SAAS,EAAE,SAASd,CAAU,EAErD,gCACGL,EAAA,CAAgB,UAAWU,EAAY,aAAe,GAAGM,EACvD,SAAA,CAAA,CAACP,GAAa,CAACE,2BAAaS,EAAAA,KAAA,CAAK,KAAMb,GAAQ,QAAS,GACtDF,GAAc,EAAEc,GAAiB,CAACb,IAAcM,IAAQ,CAACG,GAC1DM,EAAAA,kBAAAA,IAACnB,EAAA,CACC,IAAK,oBAAoBI,CAAQ,GACjC,IAAKM,GAAO,GAAGK,CAAG,GAAGC,CAAS,GAC9B,OAAAL,EACA,QAAAC,CAAA,CAAA,CACF,EAEJ,CAEJ"}
+{"version":3,"file":"ThumbnailSimple.cjs.js","sources":["../../../../../src/components/ThumbnailSimple/ThumbnailSimple.tsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailSimpleProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  icon?: string\n  thumbnailHash?: string\n  isLoading?: boolean\n  disabled?: boolean\n  src?: string\n  onLoad?: React.ReactEventHandler<HTMLImageElement>\n  onError?: React.ReactEventHandler<HTMLImageElement>\n  iconOnly?: boolean\n}\n\nconst ThumbnailStyled = styled.div`\n  position: relative;\n  width: 100%;\n  max-width: 500px;\n  aspect-ratio: 1.77;\n  overflow: hidden;\n  margin: auto;\n  max-width: 250px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* icon */\n  span {\n    position: absolute;\n    font-size: 4rem;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n    background-color: hsl(220 20% 8%);\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst ImageStyled = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n`\n\nexport const ThumbnailSimple: React.FC<ThumbnailSimpleProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  icon,\n  thumbnailHash,\n  isLoading,\n  className,\n  disabled,\n  src,\n  onLoad,\n  onError,\n  iconOnly,\n  ...props\n}) => {\n  const url = getEntityThumbnailUrl({\n    projectName,\n    entityType,\n    entityId,\n    thumbnailHash: thumbnailHash ? String(thumbnailHash) : undefined,\n  })\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  return (\n    <ThumbnailStyled className={className + ' thumbnail'} {...props}>\n      {!isLoading && !disabled && <Icon icon={icon || 'image'} />}\n      {((entityType && !isWrongEntity && hasIdentity) || src) && !iconOnly && (\n        <ImageStyled\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={src || url || undefined}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      )}\n    </ThumbnailStyled>\n  )\n}\n"],"names":["ThumbnailStyled","styled","ImageStyled","ThumbnailSimple","projectName","entityType","entityId","icon","thumbnailHash","isLoading","className","disabled","src","onLoad","onError","iconOnly","props","url","getEntityThumbnailUrl","isProject","isWrongEntity","hasIdentity","Icon","jsx"],"mappings":"yWAmBA,MAAMA,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBzBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWdE,EAAkD,CAAC,CAC9D,YAAAC,EACA,WAAAC,EACA,SAAAC,EACA,KAAAC,EACA,cAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,IAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAMC,EAAAA,sBAAsB,CAChC,YAAAd,EACA,WAAAC,EACA,SAAAC,EACA,cAAeE,EAAgB,OAAOA,CAAa,EAAI,MAAA,CACxD,EACKW,EAAYd,IAAe,UAC3Be,EAAgB,CAAC,SAAS,EAAE,SAASf,CAAU,EAC/CgB,EAAcF,EAAY,CAAC,CAACf,EAAc,CAAC,CAACE,EAElD,gCACGN,EAAA,CAAgB,UAAWU,EAAY,aAAe,GAAGM,EACvD,SAAA,CAAA,CAACP,GAAa,CAACE,2BAAaW,EAAAA,KAAA,CAAK,KAAMf,GAAQ,QAAS,GACtDF,GAAc,CAACe,GAAiBC,GAAgBT,IAAQ,CAACG,GAC1DQ,EAAAA,kBAAAA,IAACrB,EAAA,CACC,IAAK,oBAAoBI,GAAYF,CAAW,GAChD,IAAKQ,GAAOK,GAAO,OACnB,OAAAJ,EACA,QAAAC,CAAA,CAAA,CACF,EAEJ,CAEJ"}

package/dist/shared/src/components/ThumbnailSimple/ThumbnailSimple.es.js

@@ -1,7 +1,12 @@
 import { j as s } from "../../../../_virtual/jsx-runtime.es.js";
 import e from "styled-components";
-import { Icon as g } from "@ynput/ayon-react-components";
-const j = e.div`
+import { Icon as j } from "@ynput/ayon-react-components";
+import "lodash";
+import "react-toastify";
+import "uuid";
+import { getEntityThumbnailUrl as v } from "../../util/getThumbnailUrl.es.js";
+import "../../util/pubsub.es.js";
+const w = e.div`
   position: relative;
   width: 100%;
   max-width: 500px;
@@ -23,7 +28,7 @@ const j = e.div`
     background-color: hsl(220 20% 8%);
     color: var(--md-sys-color-outline);
   }
-`, w = e.img`
+`, y = e.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
@@ -32,36 +37,41 @@ const j = e.div`
   display: block;
   position: absolute;
   inset: 0;
-`, k = ({
-  projectName: i,
+`, W = ({
+  projectName: t,
   entityType: o,
-  entityId: t,
-  icon: r,
-  entityUpdatedAt: a,
-  isLoading: l,
+  entityId: i,
+  icon: l,
+  thumbnailHash: n,
+  isLoading: a,
   className: c,
   disabled: m,
-  src: n,
-  onLoad: u,
-  onError: d,
+  src: r,
+  onLoad: d,
+  onError: u,
   iconOnly: p,
   ...h
 }) => {
-  const b = i && `/api/projects/${i}/${o}s/${t}/thumbnail`, x = `?updatedAt=${a}`, f = ["product"].includes(o);
-  return /* @__PURE__ */ s.jsxs(j, { className: c + " thumbnail", ...h, children: [
-    !l && !m && /* @__PURE__ */ s.jsx(g, { icon: r || "image" }),
-    (o && !(f || !t) || n) && !p && /* @__PURE__ */ s.jsx(
-      w,
+  const b = v({
+    projectName: t,
+    entityType: o,
+    entityId: i,
+    thumbnailHash: n ? String(n) : void 0
+  }), f = o === "project", g = ["product"].includes(o), x = f ? !!t : !!i;
+  return /* @__PURE__ */ s.jsxs(w, { className: c + " thumbnail", ...h, children: [
+    !a && !m && /* @__PURE__ */ s.jsx(j, { icon: l || "image" }),
+    (o && !g && x || r) && !p && /* @__PURE__ */ s.jsx(
+      y,
       {
-        alt: `Entity thumbnail ${t}`,
-        src: n || `${b}${x}`,
-        onLoad: u,
-        onError: d
+        alt: `Entity thumbnail ${i || t}`,
+        src: r || b || void 0,
+        onLoad: d,
+        onError: u
       }
     )
   ] });
 };
 export {
-  k as ThumbnailSimple
+  W as ThumbnailSimple
 };
 //# sourceMappingURL=ThumbnailSimple.es.js.map

package/dist/shared/src/components/ThumbnailSimple/ThumbnailSimple.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThumbnailSimple.es.js","sources":["../../../../../src/components/ThumbnailSimple/ThumbnailSimple.tsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '@ynput/ayon-react-components'\n\nexport interface ThumbnailSimpleProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  icon?: string\n  entityUpdatedAt: string | number\n  isLoading?: boolean\n  disabled?: boolean\n  src?: string\n  onLoad?: React.ReactEventHandler<HTMLImageElement>\n  onError?: React.ReactEventHandler<HTMLImageElement>\n  iconOnly?: boolean\n}\n\nconst ThumbnailStyled = styled.div`\n  position: relative;\n  width: 100%;\n  max-width: 500px;\n  aspect-ratio: 1.77;\n  overflow: hidden;\n  margin: auto;\n  max-width: 250px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* icon */\n  span {\n    position: absolute;\n    font-size: 4rem;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n    background-color: hsl(220 20% 8%);\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst ImageStyled = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n`\n\nexport const ThumbnailSimple: React.FC<ThumbnailSimpleProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  icon,\n  entityUpdatedAt,\n  isLoading,\n  className,\n  disabled,\n  src,\n  onLoad,\n  onError,\n  iconOnly,\n  ...props\n}) => {\n  const url = projectName && `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n  const queryArgs = `?updatedAt=${entityUpdatedAt}`\n  const isWrongEntity = ['product'].includes(entityType)\n\n  return (\n    <ThumbnailStyled className={className + ' thumbnail'} {...props}>\n      {!isLoading && !disabled && <Icon icon={icon || 'image'} />}\n      {((entityType && !(isWrongEntity || !entityId)) || src) && !iconOnly && (\n        <ImageStyled\n          alt={`Entity thumbnail ${entityId}`}\n          src={src || `${url}${queryArgs}`}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      )}\n    </ThumbnailStyled>\n  )\n}\n"],"names":["ThumbnailStyled","styled","ImageStyled","ThumbnailSimple","projectName","entityType","entityId","icon","entityUpdatedAt","isLoading","className","disabled","src","onLoad","onError","iconOnly","props","url","queryArgs","isWrongEntity","Icon","jsx"],"mappings":";;;AAkBA,MAAMA,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwBzBC,IAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdE,IAAkD,CAAC;AAAA,EAC9D,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAMb,KAAe,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,cAC5EY,IAAY,cAAcV,CAAe,IACzCW,IAAgB,CAAC,SAAS,EAAE,SAASd,CAAU;AAErD,gCACGL,GAAA,EAAgB,WAAWU,IAAY,cAAe,GAAGM,GACvD,UAAA;AAAA,IAAA,CAACP,KAAa,CAACE,2BAAaS,GAAA,EAAK,MAAMb,KAAQ,SAAS;AAAA,KACtDF,KAAc,EAAEc,KAAiB,CAACb,MAAcM,MAAQ,CAACG,KAC1DM,gBAAAA,EAAAA;AAAAA,MAACnB;AAAA,MAAA;AAAA,QACC,KAAK,oBAAoBI,CAAQ;AAAA,QACjC,KAAKM,KAAO,GAAGK,CAAG,GAAGC,CAAS;AAAA,QAC9B,QAAAL;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}
+{"version":3,"file":"ThumbnailSimple.es.js","sources":["../../../../../src/components/ThumbnailSimple/ThumbnailSimple.tsx"],"sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { getEntityThumbnailUrl } from '@shared/util'\n\nexport interface ThumbnailSimpleProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  icon?: string\n  thumbnailHash?: string\n  isLoading?: boolean\n  disabled?: boolean\n  src?: string\n  onLoad?: React.ReactEventHandler<HTMLImageElement>\n  onError?: React.ReactEventHandler<HTMLImageElement>\n  iconOnly?: boolean\n}\n\nconst ThumbnailStyled = styled.div`\n  position: relative;\n  width: 100%;\n  max-width: 500px;\n  aspect-ratio: 1.77;\n  overflow: hidden;\n  margin: auto;\n  max-width: 250px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* icon */\n  span {\n    position: absolute;\n    font-size: 4rem;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n    background-color: hsl(220 20% 8%);\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst ImageStyled = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n`\n\nexport const ThumbnailSimple: React.FC<ThumbnailSimpleProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  icon,\n  thumbnailHash,\n  isLoading,\n  className,\n  disabled,\n  src,\n  onLoad,\n  onError,\n  iconOnly,\n  ...props\n}) => {\n  const url = getEntityThumbnailUrl({\n    projectName,\n    entityType,\n    entityId,\n    thumbnailHash: thumbnailHash ? String(thumbnailHash) : undefined,\n  })\n  const isProject = entityType === 'project'\n  const isWrongEntity = ['product'].includes(entityType)\n  const hasIdentity = isProject ? !!projectName : !!entityId\n\n  return (\n    <ThumbnailStyled className={className + ' thumbnail'} {...props}>\n      {!isLoading && !disabled && <Icon icon={icon || 'image'} />}\n      {((entityType && !isWrongEntity && hasIdentity) || src) && !iconOnly && (\n        <ImageStyled\n          alt={`Entity thumbnail ${entityId || projectName}`}\n          src={src || url || undefined}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      )}\n    </ThumbnailStyled>\n  )\n}\n"],"names":["ThumbnailStyled","styled","ImageStyled","ThumbnailSimple","projectName","entityType","entityId","icon","thumbnailHash","isLoading","className","disabled","src","onLoad","onError","iconOnly","props","url","getEntityThumbnailUrl","isProject","isWrongEntity","hasIdentity","Icon","jsx"],"mappings":";;;;;;;;AAmBA,MAAMA,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwBzBC,IAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdE,IAAkD,CAAC;AAAA,EAC9D,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAMC,EAAsB;AAAA,IAChC,aAAAd;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAeE,IAAgB,OAAOA,CAAa,IAAI;AAAA,EAAA,CACxD,GACKW,IAAYd,MAAe,WAC3Be,IAAgB,CAAC,SAAS,EAAE,SAASf,CAAU,GAC/CgB,IAAcF,IAAY,CAAC,CAACf,IAAc,CAAC,CAACE;AAElD,gCACGN,GAAA,EAAgB,WAAWU,IAAY,cAAe,GAAGM,GACvD,UAAA;AAAA,IAAA,CAACP,KAAa,CAACE,2BAAaW,GAAA,EAAK,MAAMf,KAAQ,SAAS;AAAA,KACtDF,KAAc,CAACe,KAAiBC,KAAgBT,MAAQ,CAACG,KAC1DQ,gBAAAA,EAAAA;AAAAA,MAACrB;AAAA,MAAA;AAAA,QACC,KAAK,oBAAoBI,KAAYF,CAAW;AAAA,QAChD,KAAKQ,KAAOK,KAAO;AAAA,QACnB,QAAAJ;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}