@ynput/ayon-frontend-shared 0.2.13 → 0.2.14

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

@@ -1 +1 @@
-{"version":3,"file":"ActivityComment.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityComment/ActivityComment.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useCallback, useMemo } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport emoji from 'remark-emoji'\nimport remarkGfm from 'remark-gfm'\nimport remarkDirective from 'remark-directive'\nimport remarkDirectiveRehype from 'remark-directive-rehype'\n\nimport CommentInput from '../CommentInput/CommentInput'\nimport Reactions from '../ReactionContainer/Reactions'\nimport { Reaction } from '../ReactionContainer/types'\nimport useReferenceTooltip from '../../hooks/useReferenceTooltip'\nimport FilesGrid, { FilesGridProps } from '../FilesGrid/FilesGrid'\n\nimport { getTextRefs } from '../CommentInput/quillToMarkdown'\nimport * as Styled from './ActivityComment.styled'\nimport CommentWrapper from './CommentWrapper'\nimport { aTag, blockquoteTag, codeTag, inputTag } from './ActivityMarkdownComponents'\nimport { mapGraphQLReactions } from './mappers'\nimport { Icon } from '@ynput/ayon-react-components'\nimport ActivityStatus from '../ActivityStatus/ActivityStatus'\nimport { useFeedContext } from '../../context/FeedContext'\nimport { confirmDelete } from '../../../../util'\nimport ActivityHeader, { ActivityHeaderProps } from '../ActivityHeader/ActivityHeader'\nimport type { Status } from '../../../ProjectTreeTable/types/project'\nimport { SavedAnnotationMetadata } from '../../index'\nimport { useDetailsPanelContext } from '@shared/context'\n\ntype Props = {\n  activity: any\n  onCheckChange?: Function\n  onDelete?: (activityId: string, entityId: string, refs: any) => Promise<void>\n  onUpdate?: Function\n  projectInfo: any\n  editProps?: {\n    disabled: boolean\n    isLoading: boolean\n  }\n  projectName: string\n  entityType: string\n  onReferenceClick?: ActivityHeaderProps['onReferenceClick']\n  onFileExpand?: FilesGridProps['onExpand']\n  showOrigin?: boolean\n  isHighlighted?: boolean\n  readOnly?: boolean\n  statuses: Status[]\n}\n\nconst ActivityComment = ({\n  activity = {},\n  onCheckChange,\n  onDelete,\n  onUpdate,\n  projectInfo,\n  editProps,\n  projectName,\n  entityType,\n  onReferenceClick,\n  onFileExpand,\n  showOrigin,\n  isHighlighted,\n  readOnly,\n  statuses = [],\n}: Props) => {\n  const { userName, createReaction, deleteReaction } = useFeedContext()\n\n  let {\n    body,\n    authorName,\n    authorFullName,\n    createdAt,\n    referenceType,\n    entityId,\n    activityId,\n    author,\n    isOwner,\n    files = [],\n    origin,\n  } = activity\n  if (!authorName) authorName = author?.name || ''\n  if (!authorFullName) authorFullName = author?.fullName || authorName\n\n  const { editingId, setEditingId } = useFeedContext()\n  const { onGoToFrame, setHighlightedActivities } = useDetailsPanelContext()\n\n  const handleEditComment = () => {\n    setEditingId(activityId)\n  }\n\n  const handleEditCancel = () => {\n    // close the edit comment\n    setEditingId(null)\n  }\n\n  const handleSave = async (value: any, files: any) => {\n    await onUpdate?.(value, files)\n    setEditingId(null)\n  }\n\n  const isEditing = editingId === activityId\n\n  const isRef = referenceType !== 'origin' || showOrigin\n\n  const handleDelete = async () => {\n    const refs = getTextRefs(body)\n\n    // if the comment is a reference, (it's origin is not the entity)\n    // we need to delete the reference from the origin as well\n    // add it to the refs to delete\n    if (isRef && origin) {\n      refs.push({ id: origin.id, type: origin.type })\n    }\n\n    // note: body is used to match other refs to delete\n    onDelete && (await onDelete(activityId, entityId, refs))\n  }\n\n  const deleteConfirmation = () => {\n    confirmDelete({\n      title: 'Delete comment',\n      message: 'Are you sure you want to delete this comment?',\n      accept: async () => {\n        await handleDelete()\n      },\n    })\n  }\n\n  const [, setRefTooltip] = useReferenceTooltip()\n\n  const mappedReactions = useMemo(\n    () => mapGraphQLReactions(activity.reactions, userName),\n    [[...(activity.reactions || [])]],\n  )\n\n  const reactionChangeHandler = (reaction: Reaction) => {\n    if (reaction.isActive) {\n      createReaction({\n        projectName: projectName,\n        // @ts-ignore exposed endpoint doesn't need the username, we still need to pass it for the optimistic update\n        userName: userName,\n        activityId: activityId,\n        createReactionModel: {\n          reaction: reaction.type,\n        },\n      })\n    } else {\n      deleteReaction({\n        projectName: projectName,\n        // @ts-ignore exposed endpoint doesn't need the username, we still need to pass it for the optimistic update\n        userName: userName,\n        activityId: activityId,\n        reaction: reaction.type,\n      })\n    }\n  }\n\n  const onAnnotationClick = useCallback(\n    (file: any) => {\n      if (!file.annotation) return\n      // annotation frame numbers are 1-based\n      onGoToFrame?.((file.annotation as SavedAnnotationMetadata).range[0] - 1)\n      setHighlightedActivities([activityId])\n    },\n    [onGoToFrame],\n  )\n\n  return (\n    <>\n      <Styled.Comment\n        className={clsx('comment', { isOwner, isEditing, isHighlighted })}\n        id={activityId}\n      >\n        <ActivityHeader\n          name={authorName}\n          fullName={authorFullName}\n          date={createdAt}\n          isRef={isRef}\n          activity={activity}\n          // projectInfo={projectInfo}\n          projectName={projectName}\n          entityType={entityType}\n          onReferenceClick={onReferenceClick}\n          onReferenceTooltip={setRefTooltip}\n          children={undefined}\n        />\n        <Styled.Body className={clsx('comment-body', { isEditing })}>\n          {!readOnly && (\n            <Styled.Tools className={'tools'}>\n              {isOwner && onDelete && (\n                <Styled.ToolButton\n                  icon=\"delete\"\n                  onClick={deleteConfirmation}\n                  tooltip=\"Delete comment\"\n                />\n              )}\n              {isOwner && handleEditComment && (\n                <Styled.ToolButton icon=\"edit_square\" onClick={handleEditComment} />\n              )}\n            </Styled.Tools>\n          )}\n          {isEditing ? (\n            <CommentInput\n              initValue={body}\n              initFiles={files}\n              isEditing\n              onClose={handleEditCancel}\n              onSubmit={handleSave}\n              isOpen={true}\n              {...editProps}\n            />\n          ) : (\n            <>\n              <CommentWrapper>\n                <ReactMarkdown\n                  remarkPlugins={[remarkGfm, emoji, remarkDirective, remarkDirectiveRehype]}\n                  urlTransform={(url) => url}\n                  components={{\n                    // a links\n                    // @ts-ignore\n                    a: (props) =>\n                      // @ts-ignore\n                      aTag(props, {\n                        entityId,\n                        projectName,\n                        projectInfo,\n                        onReferenceClick,\n                        onReferenceTooltip: setRefTooltip,\n                        activityId,\n                      }),\n                    // checkbox inputs\n                    // @ts-ignore\n                    input: (props) => inputTag(props, { activity, onCheckChange }),\n                    // code syntax highlighting\n                    // eslint-disable-next-line\n                    // @ts-ignore\n                    code: (props) => codeTag(props),\n                    // @ts-ignore\n                    blockquote: (props) => blockquoteTag(props),\n                    // @ts-ignore\n                    tip: (props) => (\n                      <Styled.Tip>\n                        <Icon icon=\"info\" />\n                        {props.children}\n                      </Styled.Tip>\n                    ),\n                    // @ts-ignore\n                    status: (props) => {\n                      return (\n                        <ActivityStatus name={props.id} statuses={statuses}>\n                          {props.children}\n                        </ActivityStatus>\n                      )\n                    },\n                  }}\n                >\n                  {body}\n                </ReactMarkdown>\n              </CommentWrapper>\n              {/* file uploads */}\n              {/* @ts-ignore */}\n              <FilesGrid\n                files={files}\n                isCompact={files.length > 6}\n                activityId={activityId}\n                projectName={projectName}\n                isDownloadable\n                onExpand={onFileExpand}\n                onAnnotationClick={onAnnotationClick}\n                onRemove={undefined}\n              />\n            </>\n          )}\n\n          {!isEditing && (\n            <div style={{ marginTop: '16px' }}>\n              {mappedReactions && (\n                <Reactions\n                  reactions={mappedReactions}\n                  changeHandler={reactionChangeHandler}\n                  readOnly={readOnly}\n                />\n              )}\n            </div>\n          )}\n        </Styled.Body>\n      </Styled.Comment>\n    </>\n  )\n}\n\nexport default ActivityComment\n"],"names":["files","jsx","Fragment","jsxs","Styled.Comment","Styled.Body","Styled.Tools","Styled.ToolButton","Styled.Tip"],"mappings":"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"}
+{"version":3,"file":"ActivityComment.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityComment/ActivityComment.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useCallback, useMemo } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport emoji from 'remark-emoji'\nimport remarkGfm from 'remark-gfm'\nimport remarkDirective from 'remark-directive'\nimport remarkDirectiveRehype from 'remark-directive-rehype'\n\nimport CommentInput from '../CommentInput/CommentInput'\nimport Reactions from '../ReactionContainer/Reactions'\nimport { Reaction } from '../ReactionContainer/types'\nimport useReferenceTooltip from '../../hooks/useReferenceTooltip'\nimport FilesGrid, { FilesGridProps } from '../FilesGrid/FilesGrid'\n\nimport { getTextRefs } from '../CommentInput/quillToMarkdown'\nimport * as Styled from './ActivityComment.styled'\nimport CommentWrapper from './CommentWrapper'\nimport { aTag, blockquoteTag, codeTag, inputTag } from './ActivityMarkdownComponents'\nimport { mapGraphQLReactions } from './mappers'\nimport { Icon } from '@ynput/ayon-react-components'\nimport ActivityStatus from '../ActivityStatus/ActivityStatus'\nimport { useFeedContext } from '../../context/FeedContext'\nimport { confirmDelete } from '../../../../util'\nimport ActivityHeader, { ActivityHeaderProps } from '../ActivityHeader/ActivityHeader'\nimport type { Status } from '../../../ProjectTreeTable/types/project'\nimport { SavedAnnotationMetadata } from '../../index'\nimport { useDetailsPanelContext } from '@shared/context'\n\ntype Props = {\n  activity: any\n  onCheckChange?: Function\n  onDelete?: (activityId: string, entityId: string, refs: any) => Promise<void>\n  onUpdate?: Function\n  projectInfo: any\n  editProps?: {\n    disabled: boolean\n    isLoading: boolean\n  }\n  projectName: string\n  entityType: string\n  onReferenceClick?: ActivityHeaderProps['onReferenceClick']\n  onFileExpand?: FilesGridProps['onExpand']\n  showOrigin?: boolean\n  isHighlighted?: boolean\n  readOnly?: boolean\n  statuses: Status[]\n}\n\nconst ActivityComment = ({\n  activity = {},\n  onCheckChange,\n  onDelete,\n  onUpdate,\n  projectInfo,\n  editProps,\n  projectName,\n  entityType,\n  onReferenceClick,\n  onFileExpand,\n  showOrigin,\n  isHighlighted,\n  readOnly,\n  statuses = [],\n}: Props) => {\n  const { userName, createReaction, deleteReaction } = useFeedContext()\n\n  let {\n    body,\n    authorName,\n    authorFullName,\n    createdAt,\n    referenceType,\n    entityId,\n    activityId,\n    author,\n    isOwner,\n    files = [],\n    origin,\n  } = activity\n  if (!authorName) authorName = author?.name || ''\n  if (!authorFullName) authorFullName = author?.fullName || authorName\n\n  const { editingId, setEditingId } = useFeedContext()\n  const { onGoToFrame, setHighlightedActivities } = useDetailsPanelContext()\n\n  const handleEditComment = () => {\n    setEditingId(activityId)\n  }\n\n  const handleEditCancel = () => {\n    // close the edit comment\n    setEditingId(null)\n  }\n\n  const handleSave = async (value: any, files: any) => {\n    await onUpdate?.(value, files)\n    setEditingId(null)\n  }\n\n  const isEditing = editingId === activityId\n\n  const isRef = referenceType !== 'origin' || showOrigin\n\n  const handleDelete = async () => {\n    const refs = getTextRefs(body)\n\n    // if the comment is a reference, (it's origin is not the entity)\n    // we need to delete the reference from the origin as well\n    // add it to the refs to delete\n    if (isRef && origin) {\n      refs.push({ id: origin.id, type: origin.type })\n    }\n\n    // note: body is used to match other refs to delete\n    onDelete && (await onDelete(activityId, entityId, refs))\n  }\n\n  const deleteConfirmation = () => {\n    confirmDelete({\n      title: 'Delete comment',\n      message: 'Are you sure you want to delete this comment?',\n      accept: async () => {\n        await handleDelete()\n      },\n    })\n  }\n\n  const [, setRefTooltip] = useReferenceTooltip()\n\n  const mappedReactions = useMemo(\n    () => mapGraphQLReactions(activity.reactions, userName),\n    [[...(activity.reactions || [])]],\n  )\n\n  const reactionChangeHandler = (reaction: Reaction) => {\n    if (reaction.isActive) {\n      createReaction({\n        projectName: projectName,\n        // @ts-ignore exposed endpoint doesn't need the username, we still need to pass it for the optimistic update\n        userName: userName,\n        activityId: activityId,\n        createReactionModel: {\n          reaction: reaction.type,\n        },\n      })\n    } else {\n      deleteReaction({\n        projectName: projectName,\n        // @ts-ignore exposed endpoint doesn't need the username, we still need to pass it for the optimistic update\n        userName: userName,\n        activityId: activityId,\n        reaction: reaction.type,\n      })\n    }\n  }\n\n  const onAnnotationClick = useCallback(\n    (file: any) => {\n      if (!file.annotation) return\n      // annotation frame numbers are 1-based\n      onGoToFrame?.((file.annotation as SavedAnnotationMetadata).range[0])\n      setHighlightedActivities([activityId])\n    },\n    [onGoToFrame],\n  )\n\n  return (\n    <>\n      <Styled.Comment\n        className={clsx('comment', { isOwner, isEditing, isHighlighted })}\n        id={activityId}\n      >\n        <ActivityHeader\n          name={authorName}\n          fullName={authorFullName}\n          date={createdAt}\n          isRef={isRef}\n          activity={activity}\n          // projectInfo={projectInfo}\n          projectName={projectName}\n          entityType={entityType}\n          onReferenceClick={onReferenceClick}\n          onReferenceTooltip={setRefTooltip}\n          children={undefined}\n        />\n        <Styled.Body className={clsx('comment-body', { isEditing })}>\n          {!readOnly && (\n            <Styled.Tools className={'tools'}>\n              {isOwner && onDelete && (\n                <Styled.ToolButton\n                  icon=\"delete\"\n                  onClick={deleteConfirmation}\n                  tooltip=\"Delete comment\"\n                />\n              )}\n              {isOwner && handleEditComment && (\n                <Styled.ToolButton icon=\"edit_square\" onClick={handleEditComment} />\n              )}\n            </Styled.Tools>\n          )}\n          {isEditing ? (\n            <CommentInput\n              initValue={body}\n              initFiles={files}\n              isEditing\n              onClose={handleEditCancel}\n              onSubmit={handleSave}\n              isOpen={true}\n              {...editProps}\n            />\n          ) : (\n            <>\n              <CommentWrapper>\n                <ReactMarkdown\n                  remarkPlugins={[remarkGfm, emoji, remarkDirective, remarkDirectiveRehype]}\n                  urlTransform={(url) => url}\n                  components={{\n                    // a links\n                    // @ts-ignore\n                    a: (props) =>\n                      // @ts-ignore\n                      aTag(props, {\n                        entityId,\n                        projectName,\n                        projectInfo,\n                        onReferenceClick,\n                        onReferenceTooltip: setRefTooltip,\n                        activityId,\n                      }),\n                    // checkbox inputs\n                    // @ts-ignore\n                    input: (props) => inputTag(props, { activity, onCheckChange }),\n                    // code syntax highlighting\n                    // eslint-disable-next-line\n                    // @ts-ignore\n                    code: (props) => codeTag(props),\n                    // @ts-ignore\n                    blockquote: (props) => blockquoteTag(props),\n                    // @ts-ignore\n                    tip: (props) => (\n                      <Styled.Tip>\n                        <Icon icon=\"info\" />\n                        {props.children}\n                      </Styled.Tip>\n                    ),\n                    // @ts-ignore\n                    status: (props) => {\n                      return (\n                        <ActivityStatus name={props.id} statuses={statuses}>\n                          {props.children}\n                        </ActivityStatus>\n                      )\n                    },\n                  }}\n                >\n                  {body}\n                </ReactMarkdown>\n              </CommentWrapper>\n              {/* file uploads */}\n              {/* @ts-ignore */}\n              <FilesGrid\n                files={files}\n                isCompact={files.length > 6}\n                activityId={activityId}\n                projectName={projectName}\n                isDownloadable\n                onExpand={onFileExpand}\n                onAnnotationClick={onAnnotationClick}\n                onRemove={undefined}\n              />\n            </>\n          )}\n\n          {!isEditing && (\n            <div style={{ marginTop: '16px' }}>\n              {mappedReactions && (\n                <Reactions\n                  reactions={mappedReactions}\n                  changeHandler={reactionChangeHandler}\n                  readOnly={readOnly}\n                />\n              )}\n            </div>\n          )}\n        </Styled.Body>\n      </Styled.Comment>\n    </>\n  )\n}\n\nexport default ActivityComment\n"],"names":["files","jsx","Fragment","jsxs","Styled.Comment","Styled.Body","Styled.Tools","Styled.ToolButton","Styled.Tip"],"mappings":"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"}

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useAnnotationsSync.cjs.js

@@ -14,7 +14,10 @@ require("../../../../../context/AddonContext.cjs.js");
 const filterEntityAnnotations = (annotations, entityId, filesUploading) => {
   return Object.values(annotations).filter(
     (annotation) => annotation.versionId === entityId && !filesUploading.some((file) => file.name === annotation.name)
-  ).map((annotation) => ({ ...annotation, isUnsavedAnnotation: true }));
+  ).map((annotationFile) => ({
+    ...annotationFile,
+    unsavedAnnotation: annotationFile
+  }));
 };
 const useAnnotationsSync = ({ entityId, filesUploading }) => {
   const { editingId, setEditingId, annotations, removeAnnotation } = FeedContext.useFeedContext();

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useAnnotationsSync.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnnotationsSync.cjs.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useAnnotationsSync.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { FEED_NEW_COMMENT, useFeedContext } from '../../../context/FeedContext'\nimport { useDetailsPanelContext } from '@shared/context'\n\ntype Props = {\n  entityId: string\n  filesUploading: File[]\n}\n\nexport type AnnotationPreview = any & {\n  isUnsavedAnnotation: true\n}\n\n// annotations are temporary store\nexport const filterEntityAnnotations = (\n  annotations: Record<string, any>,\n  entityId: string,\n  filesUploading: File[],\n): AnnotationPreview[] => {\n  return Object.values(annotations)\n    .filter(\n      (annotation) =>\n        annotation.versionId === entityId &&\n        !filesUploading.some((file) => file.name === annotation.name),\n    )\n    .map((annotation) => ({ ...annotation, isUnsavedAnnotation: true })) as AnnotationPreview[]\n}\n\nconst useAnnotationsSync = ({ entityId, filesUploading }: Props) => {\n  const { editingId, setEditingId, annotations, removeAnnotation } = useFeedContext()\n  const { onGoToFrame } = useDetailsPanelContext()\n\n  // filter out annotations that are for this entity and are NOT uploading\n  const filteredAnnotations = filterEntityAnnotations(annotations || [], entityId, filesUploading)\n\n  // when annotations change, update the state\n  useEffect(() => {\n    // open the comment input if there are annotations and something is not being edited already\n    if (filteredAnnotations.length > 0 && !editingId) {\n      setEditingId(FEED_NEW_COMMENT)\n    }\n  }, [filteredAnnotations])\n\n  const handleGoToAnnotation = (annotation: AnnotationPreview) => {\n    const firstFrame = annotation.range[0]\n    onGoToFrame?.(firstFrame)\n  }\n\n  return {\n    annotations: filteredAnnotations,\n    goToAnnotation: handleGoToAnnotation,\n    removeAnnotation,\n  }\n}\n\nexport default useAnnotationsSync\n"],"names":["useFeedContext","useDetailsPanelContext","useEffect","FEED_NEW_COMMENT"],"mappings":";;;;;;;;;;;;;AAcO,MAAM,0BAA0B,CACrC,aACA,UACA,mBACwB;AACjB,SAAA,OAAO,OAAO,WAAW,EAC7B;AAAA,IACC,CAAC,eACC,WAAW,cAAc,YACzB,CAAC,eAAe,KAAK,CAAC,SAAS,KAAK,SAAS,WAAW,IAAI;AAAA,EAAA,EAE/D,IAAI,CAAC,gBAAgB,EAAE,GAAG,YAAY,qBAAqB,KAAA,EAAO;AACvE;AAEA,MAAM,qBAAqB,CAAC,EAAE,UAAU,qBAA4B;AAClE,QAAM,EAAE,WAAW,cAAc,aAAa,iBAAA,IAAqBA,YAAAA,eAAe;AAC5E,QAAA,EAAE,YAAY,IAAIC,2CAAuB;AAG/C,QAAM,sBAAsB,wBAAwB,eAAe,CAAA,GAAI,UAAU,cAAc;AAG/FC,QAAAA,UAAU,MAAM;AAEd,QAAI,oBAAoB,SAAS,KAAK,CAAC,WAAW;AAChD,mBAAaC,YAAAA,gBAAgB;AAAA,IAAA;AAAA,EAC/B,GACC,CAAC,mBAAmB,CAAC;AAElB,QAAA,uBAAuB,CAAC,eAAkC;AACxD,UAAA,aAAa,WAAW,MAAM,CAAC;AACrC,+CAAc;AAAA,EAChB;AAEO,SAAA;AAAA,IACL,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB;AAAA,EACF;AACF;;;"}
+{"version":3,"file":"useAnnotationsSync.cjs.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useAnnotationsSync.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { FEED_NEW_COMMENT, useFeedContext } from '../../../context/FeedContext'\nimport { useDetailsPanelContext } from '@shared/context'\n\ntype Props = {\n  entityId: string\n  filesUploading: File[]\n}\n\nexport type AnnotationPreview = any & {\n  unsavedAnnotation: any\n}\n\n// annotations are temporary store\nexport const filterEntityAnnotations = (\n  annotations: Record<string, any>,\n  entityId: string,\n  filesUploading: File[],\n): AnnotationPreview[] => {\n  return Object.values(annotations)\n    .filter(\n      (annotation) =>\n        annotation.versionId === entityId &&\n        !filesUploading.some((file) => file.name === annotation.name),\n    )\n    .map((annotationFile) => ({\n      ...annotationFile,\n      unsavedAnnotation: annotationFile,\n    })) as AnnotationPreview[]\n}\n\nconst useAnnotationsSync = ({ entityId, filesUploading }: Props) => {\n  const { editingId, setEditingId, annotations, removeAnnotation } = useFeedContext()\n  const { onGoToFrame } = useDetailsPanelContext()\n\n  // filter out annotations that are for this entity and are NOT uploading\n  const filteredAnnotations = filterEntityAnnotations(annotations || [], entityId, filesUploading)\n\n  // when annotations change, update the state\n  useEffect(() => {\n    // open the comment input if there are annotations and something is not being edited already\n    if (filteredAnnotations.length > 0 && !editingId) {\n      setEditingId(FEED_NEW_COMMENT)\n    }\n  }, [filteredAnnotations])\n\n  const handleGoToAnnotation = (annotation: AnnotationPreview) => {\n    const firstFrame = annotation.range[0]\n    onGoToFrame?.(firstFrame)\n  }\n\n  return {\n    annotations: filteredAnnotations,\n    goToAnnotation: handleGoToAnnotation,\n    removeAnnotation,\n  }\n}\n\nexport default useAnnotationsSync\n"],"names":["useFeedContext","useDetailsPanelContext","useEffect","FEED_NEW_COMMENT"],"mappings":";;;;;;;;;;;;;AAcO,MAAM,0BAA0B,CACrC,aACA,UACA,mBACwB;AACjB,SAAA,OAAO,OAAO,WAAW,EAC7B;AAAA,IACC,CAAC,eACC,WAAW,cAAc,YACzB,CAAC,eAAe,KAAK,CAAC,SAAS,KAAK,SAAS,WAAW,IAAI;AAAA,EAAA,EAE/D,IAAI,CAAC,oBAAoB;AAAA,IACxB,GAAG;AAAA,IACH,mBAAmB;AAAA,EAAA,EACnB;AACN;AAEA,MAAM,qBAAqB,CAAC,EAAE,UAAU,qBAA4B;AAClE,QAAM,EAAE,WAAW,cAAc,aAAa,iBAAA,IAAqBA,YAAAA,eAAe;AAC5E,QAAA,EAAE,YAAY,IAAIC,2CAAuB;AAG/C,QAAM,sBAAsB,wBAAwB,eAAe,CAAA,GAAI,UAAU,cAAc;AAG/FC,QAAAA,UAAU,MAAM;AAEd,QAAI,oBAAoB,SAAS,KAAK,CAAC,WAAW;AAChD,mBAAaC,YAAAA,gBAAgB;AAAA,IAAA;AAAA,EAC/B,GACC,CAAC,mBAAmB,CAAC;AAElB,QAAA,uBAAuB,CAAC,eAAkC;AACxD,UAAA,aAAa,WAAW,MAAM,CAAC;AACrC,+CAAc;AAAA,EAChB;AAEO,SAAA;AAAA,IACL,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB;AAAA,EACF;AACF;;;"}

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useAnnotationsSync.es.js

@@ -12,7 +12,10 @@ import "../../../../../context/AddonContext.es.js";
 const filterEntityAnnotations = (annotations, entityId, filesUploading) => {
   return Object.values(annotations).filter(
     (annotation) => annotation.versionId === entityId && !filesUploading.some((file) => file.name === annotation.name)
-  ).map((annotation) => ({ ...annotation, isUnsavedAnnotation: true }));
+  ).map((annotationFile) => ({
+    ...annotationFile,
+    unsavedAnnotation: annotationFile
+  }));
 };
 const useAnnotationsSync = ({ entityId, filesUploading }) => {
   const { editingId, setEditingId, annotations, removeAnnotation } = useFeedContext();

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useAnnotationsSync.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnnotationsSync.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useAnnotationsSync.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { FEED_NEW_COMMENT, useFeedContext } from '../../../context/FeedContext'\nimport { useDetailsPanelContext } from '@shared/context'\n\ntype Props = {\n  entityId: string\n  filesUploading: File[]\n}\n\nexport type AnnotationPreview = any & {\n  isUnsavedAnnotation: true\n}\n\n// annotations are temporary store\nexport const filterEntityAnnotations = (\n  annotations: Record<string, any>,\n  entityId: string,\n  filesUploading: File[],\n): AnnotationPreview[] => {\n  return Object.values(annotations)\n    .filter(\n      (annotation) =>\n        annotation.versionId === entityId &&\n        !filesUploading.some((file) => file.name === annotation.name),\n    )\n    .map((annotation) => ({ ...annotation, isUnsavedAnnotation: true })) as AnnotationPreview[]\n}\n\nconst useAnnotationsSync = ({ entityId, filesUploading }: Props) => {\n  const { editingId, setEditingId, annotations, removeAnnotation } = useFeedContext()\n  const { onGoToFrame } = useDetailsPanelContext()\n\n  // filter out annotations that are for this entity and are NOT uploading\n  const filteredAnnotations = filterEntityAnnotations(annotations || [], entityId, filesUploading)\n\n  // when annotations change, update the state\n  useEffect(() => {\n    // open the comment input if there are annotations and something is not being edited already\n    if (filteredAnnotations.length > 0 && !editingId) {\n      setEditingId(FEED_NEW_COMMENT)\n    }\n  }, [filteredAnnotations])\n\n  const handleGoToAnnotation = (annotation: AnnotationPreview) => {\n    const firstFrame = annotation.range[0]\n    onGoToFrame?.(firstFrame)\n  }\n\n  return {\n    annotations: filteredAnnotations,\n    goToAnnotation: handleGoToAnnotation,\n    removeAnnotation,\n  }\n}\n\nexport default useAnnotationsSync\n"],"names":[],"mappings":";;;;;;;;;;;AAcO,MAAM,0BAA0B,CACrC,aACA,UACA,mBACwB;AACjB,SAAA,OAAO,OAAO,WAAW,EAC7B;AAAA,IACC,CAAC,eACC,WAAW,cAAc,YACzB,CAAC,eAAe,KAAK,CAAC,SAAS,KAAK,SAAS,WAAW,IAAI;AAAA,EAAA,EAE/D,IAAI,CAAC,gBAAgB,EAAE,GAAG,YAAY,qBAAqB,KAAA,EAAO;AACvE;AAEA,MAAM,qBAAqB,CAAC,EAAE,UAAU,qBAA4B;AAClE,QAAM,EAAE,WAAW,cAAc,aAAa,iBAAA,IAAqB,eAAe;AAC5E,QAAA,EAAE,YAAY,IAAI,uBAAuB;AAG/C,QAAM,sBAAsB,wBAAwB,eAAe,CAAA,GAAI,UAAU,cAAc;AAG/F,YAAU,MAAM;AAEd,QAAI,oBAAoB,SAAS,KAAK,CAAC,WAAW;AAChD,mBAAa,gBAAgB;AAAA,IAAA;AAAA,EAC/B,GACC,CAAC,mBAAmB,CAAC;AAElB,QAAA,uBAAuB,CAAC,eAAkC;AACxD,UAAA,aAAa,WAAW,MAAM,CAAC;AACrC,+CAAc;AAAA,EAChB;AAEO,SAAA;AAAA,IACL,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB;AAAA,EACF;AACF;"}
+{"version":3,"file":"useAnnotationsSync.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useAnnotationsSync.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { FEED_NEW_COMMENT, useFeedContext } from '../../../context/FeedContext'\nimport { useDetailsPanelContext } from '@shared/context'\n\ntype Props = {\n  entityId: string\n  filesUploading: File[]\n}\n\nexport type AnnotationPreview = any & {\n  unsavedAnnotation: any\n}\n\n// annotations are temporary store\nexport const filterEntityAnnotations = (\n  annotations: Record<string, any>,\n  entityId: string,\n  filesUploading: File[],\n): AnnotationPreview[] => {\n  return Object.values(annotations)\n    .filter(\n      (annotation) =>\n        annotation.versionId === entityId &&\n        !filesUploading.some((file) => file.name === annotation.name),\n    )\n    .map((annotationFile) => ({\n      ...annotationFile,\n      unsavedAnnotation: annotationFile,\n    })) as AnnotationPreview[]\n}\n\nconst useAnnotationsSync = ({ entityId, filesUploading }: Props) => {\n  const { editingId, setEditingId, annotations, removeAnnotation } = useFeedContext()\n  const { onGoToFrame } = useDetailsPanelContext()\n\n  // filter out annotations that are for this entity and are NOT uploading\n  const filteredAnnotations = filterEntityAnnotations(annotations || [], entityId, filesUploading)\n\n  // when annotations change, update the state\n  useEffect(() => {\n    // open the comment input if there are annotations and something is not being edited already\n    if (filteredAnnotations.length > 0 && !editingId) {\n      setEditingId(FEED_NEW_COMMENT)\n    }\n  }, [filteredAnnotations])\n\n  const handleGoToAnnotation = (annotation: AnnotationPreview) => {\n    const firstFrame = annotation.range[0]\n    onGoToFrame?.(firstFrame)\n  }\n\n  return {\n    annotations: filteredAnnotations,\n    goToAnnotation: handleGoToAnnotation,\n    removeAnnotation,\n  }\n}\n\nexport default useAnnotationsSync\n"],"names":[],"mappings":";;;;;;;;;;;AAcO,MAAM,0BAA0B,CACrC,aACA,UACA,mBACwB;AACjB,SAAA,OAAO,OAAO,WAAW,EAC7B;AAAA,IACC,CAAC,eACC,WAAW,cAAc,YACzB,CAAC,eAAe,KAAK,CAAC,SAAS,KAAK,SAAS,WAAW,IAAI;AAAA,EAAA,EAE/D,IAAI,CAAC,oBAAoB;AAAA,IACxB,GAAG;AAAA,IACH,mBAAmB;AAAA,EAAA,EACnB;AACN;AAEA,MAAM,qBAAqB,CAAC,EAAE,UAAU,qBAA4B;AAClE,QAAM,EAAE,WAAW,cAAc,aAAa,iBAAA,IAAqB,eAAe;AAC5E,QAAA,EAAE,YAAY,IAAI,uBAAuB;AAG/C,QAAM,sBAAsB,wBAAwB,eAAe,CAAA,GAAI,UAAU,cAAc;AAG/F,YAAU,MAAM;AAEd,QAAI,oBAAoB,SAAS,KAAK,CAAC,WAAW;AAChD,mBAAa,gBAAgB;AAAA,IAAA;AAAA,EAC/B,GACC,CAAC,mBAAmB,CAAC;AAElB,QAAA,uBAAuB,CAAC,eAAkC;AACxD,UAAA,aAAa,WAAW,MAAM,CAAC;AACrC,+CAAc;AAAA,EAChB;AAEO,SAAA;AAAA,IACL,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB;AAAA,EACF;AACF;"}

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useAnnotationsUpload.cjs.js.map

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

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

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

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

@@ -69,7 +69,7 @@ const FileUploadCard = ({
   name,
   mime,
   src,
-  isUnsavedAnnotation,
+  unsavedAnnotation,
   savedAnnotation,
   size,
   progress,
@@ -88,11 +88,12 @@ const FileUploadCard = ({
   const extension = nameParts.pop() || "";
   const fileName = nameParts.join(".");
   const isPreviewable = FileUploadPreview.isFilePreviewable(mime || "." + extension);
-  const isImage = (mime == null ? void 0 : mime.includes("image/")) || isUnsavedAnnotation;
+  const isImage = (mime == null ? void 0 : mime.includes("image/")) || Boolean(unsavedAnnotation);
   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 someAnnotation = unsavedAnnotation ?? savedAnnotation;
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
     FileUploadCard_styled.File,
     {
@@ -100,14 +101,17 @@ const FileUploadCard = ({
         compact: isCompact,
         isDownloadable,
         isPreviewable,
-        isUnsavedAnnotation
+        isUnsavedAnnotation: Boolean(unsavedAnnotation)
       }),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
           FileUploadCard_styled.ContentWrapper,
           {
-            className: clsx("content-wrapper", { isPreviewable, isUnsavedAnnotation }),
+            className: clsx("content-wrapper", {
+              isPreviewable,
+              isUnsavedAnnotation: Boolean(unsavedAnnotation)
+            }),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: getIconForType(mime || "." + extension), className: "type-icon" }),
               isImage && src && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
@@ -115,7 +119,7 @@ const FileUploadCard = ({
                 {
                   className: clsx({
                     "image-wrapper": true,
-                    isDownloadable: isDownloadable || isPreviewable || isUnsavedAnnotation
+                    isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation
                   }),
                   children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
                     "img",
@@ -139,7 +143,7 @@ const FileUploadCard = ({
                     onClick: onExpand
                   }
                 ),
-                (isUnsavedAnnotation || feedAnnotationsEnabled && savedAnnotation) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+                (unsavedAnnotation || feedAnnotationsEnabled && savedAnnotation) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
                   FileUploadCard_styled.ExpandButton,
                   {
                     "data-tooltip": "Jump to annotation",
@@ -154,11 +158,17 @@ const FileUploadCard = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(FileUploadCard_styled.Footer, { className: clsx({ inProgress, isPreviewable, isDownloadable }), children: [
           /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "progress", style: { right: `${100 - progress}%` } }),
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "name-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "name", children: fileName }) }),
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { className: "extension", children: [
-            ".",
-            extension
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "name-wrapper", children: someAnnotation ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { className: "name", children: [
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "draw" }),
+            someAnnotation.range[0],
+            someAnnotation.range[1] !== someAnnotation.range[0] && ` - ${someAnnotation.range[1]}`
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { className: "name", children: [
+            fileName,
+            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("span", { className: "extension", children: [
+              ".",
+              extension
+            ] })
+          ] }) }),
           isDownloadable && (!onRemove ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("a", { href: src, download: true, className: "download", children: downloadComponent }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "download", children: downloadComponent }))
         ] }),
         onRemove && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Button, { className: "remove", onClick: onRemove, icon: "close" })

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'\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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"}
+{"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'\nimport { AnnotationPreview } from '../CommentInput/hooks/useAnnotationsSync'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  unsavedAnnotation?: AnnotationPreview\n  savedAnnotation?: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  unsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  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/') || Boolean(unsavedAnnotation)\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  const someAnnotation = unsavedAnnotation ?? savedAnnotation\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation: Boolean(unsavedAnnotation),\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', {\n          isPreviewable,\n          isUnsavedAnnotation: Boolean(unsavedAnnotation),\n        })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(unsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer className={clsx({ inProgress, isPreviewable, isDownloadable })}>\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          {someAnnotation ? (\n            <span className=\"name\">\n              <Icon icon=\"draw\" />\n              {someAnnotation.range[0]}\n              {someAnnotation.range[1] !== someAnnotation.range[0] &&\n                ` - ${someAnnotation.range[1]}`}\n            </span>\n          ) : (\n            <span className=\"name\">\n              {fileName}\n              <span className=\"extension\">.{extension}</span>\n            </span>\n          )}\n        </div>\n\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} 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":";;;;;;;;;;;;;;;;AAwBA,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,IAAIA,MAAAA,SAAS,KAAK;AAC5C,QAAA,EAAE,uBAAuB,IAAIC,2CAAuB;AAGpD,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,QAAQ,iBAAiB;AAErE,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,iBAAiB,qBAAqB;AAG1C,SAAAJ,2BAAA,kBAAA;AAAA,IAACK,sBAAO;AAAA,IAAP;AAAA,MACC,WAAW,KAAK,WAAW;AAAA,QACzB,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,qBAAqB,QAAQ,iBAAiB;AAAA,MAAA,CAC/C;AAAA,MACA,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAL,2BAAA,kBAAA;AAAA,UAACM,sBAAO;AAAA,UAAP;AAAA,YACC,WAAW,KAAK,mBAAmB;AAAA,cACjC;AAAA,cACA,qBAAqB,QAAQ,iBAAiB;AAAA,YAAA,CAC/C;AAAA,YAED,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;AAAA,oBACd,iBAAiB;AAAA,oBACjB,gBAAgB,kBAAkB,iBAAiB;AAAA,kBAAA,CACpD;AAAA,kBAED,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,cAEDF,2BAAAA,kBAAAA,KAAAQ,sBAAAA,SAAA,EAAe,WAAU,kBACvB,UAAA;AAAA,gBACC,iBAAAN,2BAAA,kBAAA;AAAA,kBAACO,sBAAO;AAAA,kBAAP;AAAA,oBACC,gBAAa;AAAA,oBACb,MAAK;AAAA,oBACL,SAAQ;AAAA,oBACR,SAAS;AAAA,kBAAA;AAAA,gBACX;AAAA,iBAEA,qBAAsB,0BAA0B,oBAChDP,2BAAA,kBAAA;AAAA,kBAACO,sBAAO;AAAA,kBAAP;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,QACAT,kDAACU,sBAAAA,QAAA,EAAc,WAAW,KAAK,EAAE,YAAY,eAAe,gBAAgB,GAC1E,UAAA;AAAA,UAACR,2BAAAA,kBAAAA,IAAA,QAAA,EAAK,WAAU,YAAW,OAAO,EAAE,OAAO,GAAG,MAAM,QAAQ,IAAO,EAAA,CAAA;AAAA,UACnEA,2BAAAA,kBAAAA,IAAC,SAAI,WAAU,gBACZ,2BACEF,2BAAAA,kBAAAA,KAAA,QAAA,EAAK,WAAU,QACd,UAAA;AAAA,YAACE,2BAAAA,kBAAAA,IAAAE,oBAAA,MAAA,EAAK,MAAK,OAAO,CAAA;AAAA,YACjB,eAAe,MAAM,CAAC;AAAA,YACtB,eAAe,MAAM,CAAC,MAAM,eAAe,MAAM,CAAC,KACjD,MAAM,eAAe,MAAM,CAAC,CAAC;AAAA,UAAA,EACjC,CAAA,IAEAJ,2BAAAA,kBAAAA,KAAC,QAAK,EAAA,WAAU,QACb,UAAA;AAAA,YAAA;AAAA,YACDA,2BAAAA,kBAAAA,KAAC,QAAK,EAAA,WAAU,aAAY,UAAA;AAAA,cAAA;AAAA,cAAE;AAAA,YAAA,EAAU,CAAA;AAAA,UAAA,EAAA,CAC1C,EAEJ,CAAA;AAAA,UAEC,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,6DAAaS,oBAAO,QAAA,EAAA,WAAU,UAAS,SAAS,UAAU,MAAK,QAAQ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC1E;AAEJ;;"}

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

@@ -68,7 +68,7 @@ const FileUploadCard = ({
   name,
   mime,
   src,
-  isUnsavedAnnotation,
+  unsavedAnnotation,
   savedAnnotation,
   size,
   progress,
@@ -87,11 +87,12 @@ const FileUploadCard = ({
   const extension = nameParts.pop() || "";
   const fileName = nameParts.join(".");
   const isPreviewable = isFilePreviewable(mime || "." + extension);
-  const isImage = (mime == null ? void 0 : mime.includes("image/")) || isUnsavedAnnotation;
+  const isImage = (mime == null ? void 0 : mime.includes("image/")) || Boolean(unsavedAnnotation);
   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 someAnnotation = unsavedAnnotation ?? savedAnnotation;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     File,
     {
@@ -99,14 +100,17 @@ const FileUploadCard = ({
         compact: isCompact,
         isDownloadable,
         isPreviewable,
-        isUnsavedAnnotation
+        isUnsavedAnnotation: Boolean(unsavedAnnotation)
       }),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           ContentWrapper,
           {
-            className: clsx("content-wrapper", { isPreviewable, isUnsavedAnnotation }),
+            className: clsx("content-wrapper", {
+              isPreviewable,
+              isUnsavedAnnotation: Boolean(unsavedAnnotation)
+            }),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: getIconForType(mime || "." + extension), className: "type-icon" }),
               isImage && src && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -114,7 +118,7 @@ const FileUploadCard = ({
                 {
                   className: clsx({
                     "image-wrapper": true,
-                    isDownloadable: isDownloadable || isPreviewable || isUnsavedAnnotation
+                    isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation
                   }),
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "img",
@@ -138,7 +142,7 @@ const FileUploadCard = ({
                     onClick: onExpand
                   }
                 ),
-                (isUnsavedAnnotation || feedAnnotationsEnabled && savedAnnotation) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                (unsavedAnnotation || feedAnnotationsEnabled && savedAnnotation) && /* @__PURE__ */ jsxRuntimeExports.jsx(
                   ExpandButton,
                   {
                     "data-tooltip": "Jump to annotation",
@@ -153,11 +157,17 @@ const FileUploadCard = ({
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Footer, { className: clsx({ inProgress, isPreviewable, isDownloadable }), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "progress", style: { right: `${100 - progress}%` } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "name-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "name", children: fileName }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "extension", children: [
-            ".",
-            extension
-          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "name-wrapper", children: someAnnotation ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "name", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "draw" }),
+            someAnnotation.range[0],
+            someAnnotation.range[1] !== someAnnotation.range[0] && ` - ${someAnnotation.range[1]}`
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "name", children: [
+            fileName,
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "extension", children: [
+              ".",
+              extension
+            ] })
+          ] }) }),
           isDownloadable && (!onRemove ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: src, download: true, className: "download", children: downloadComponent }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "download", children: downloadComponent }))
         ] }),
         onRemove && /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "remove", onClick: onRemove, icon: "close" })

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

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

@@ -90,6 +90,12 @@ const Footer = styled.footer`
     white-space: nowrap;
     z-index: 20;
     display: inherit;
+
+    .icon {
+      font-size: inherit;
+      margin-right: var(--padding-s);
+      vertical-align: text-top;
+    }
   }
 
   .extension {

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCard.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.styled.ts"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const File = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--border-radius-m);\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  z-index: 0;\n  user-select: none;\n\n  height: 105px;\n\n  &.compact {\n    height: 75px;\n  }\n\n  .icon {\n    font-size: 30px;\n  }\n\n  .remove {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n      color: var(--md-sys-color-on-error-container);\n    }\n\n    .icon {\n      font-size: 20px;\n    }\n  }\n\n  /* move icon up slightly to center it */\n  .type-icon {\n    margin-top: -20px;\n  }\n\n  /* set download default color outline */\n  .download,\n  .download-icon {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const Footer = styled.footer`\n  background-color: var(--md-sys-color-surface-container-low);\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--padding-s);\n  overflow: hidden;\n  color: var(--md-sys-color-on-surface);\n\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n\n  transition: padding 0.2s ease;\n\n  span {\n    font-size: 12px;\n  }\n\n  .name-wrapper {\n    overflow: hidden;\n  }\n\n  .download {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    display: none;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .name {\n    position: relative;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 20;\n    display: 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;;;;;;;"}
+{"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    .icon {\n      font-size: inherit;\n      margin-right: var(--padding-s);\n      vertical-align: text-top;\n    }\n  }\n\n  .extension {\n    z-index: 20;\n    min-width: fit-content;\n    overflow: hidden;\n  }\n\n  .progress {\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-primary-container);\n    z-index: 10;\n\n    transition: right 0.3s;\n\n    display: none;\n  }\n\n  &.inProgress {\n    .progress {\n      display: block;\n    }\n  }\n\n  .download-icon {\n    font-size: 20px;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      cursor: pointer;\n\n      padding: var(--padding-m) var(--padding-s);\n\n      background-color: var(--md-sys-color-surface-container-low-hover);\n\n      .download,\n      .download-icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* reveal size and download */\n      .download {\n        display: flex;\n      }\n      .name-wrapper,\n      .extension {\n        display: none;\n      }\n    }\n  }\n`\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  flex: 1;\n\n  .icon {\n    user-select: none;\n  }\n\n  .download-icon {\n    display: none;\n  }\n\n  /* previewable styles (it can be expanded) */\n  /* on hover it shows the expand buttons */\n  &.isPreviewable,\n  &.isUnsavedAnnotation {\n    cursor: pointer;\n\n    &:hover {\n      .expand-buttons {\n        display: flex;\n      }\n      .type-icon {\n        display: none;\n      }\n    }\n  }\n\n  &:hover .image-wrapper::after {\n    opacity: 0.8;\n  }\n`\n\nexport const ImageWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  img {\n    position: absolute;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    height: calc(100% - 20px);\n\n    transition: scale 0.2s ease;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    opacity: 0;\n    transition: opacity 0.1s ease;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      .icon {\n        display: block;\n        z-index: 10;\n      }\n    }\n  }\n`\n\nexport const Buttons = styled.div`\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: none;\n  height: calc(100% - 20px);\n  width: 100%;\n  gap: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n  height: 100%;\n  width: 100%;\n  border: none;\n  opacity: 0.5;\n  transition: opacity 250ms;\n\n  &:hover {\n    background: none;\n    opacity: 1;\n  }\n`\n"],"names":["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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqGtB,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

@@ -88,6 +88,12 @@ const Footer = styled.footer`
     white-space: nowrap;
     z-index: 20;
     display: inherit;
+
+    .icon {
+      font-size: inherit;
+      margin-right: var(--padding-s);
+      vertical-align: text-top;
+    }
   }
 
   .extension {

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 { 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;"}
+{"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    .icon {\n      font-size: inherit;\n      margin-right: var(--padding-s);\n      vertical-align: text-top;\n    }\n  }\n\n  .extension {\n    z-index: 20;\n    min-width: fit-content;\n    overflow: hidden;\n  }\n\n  .progress {\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-primary-container);\n    z-index: 10;\n\n    transition: right 0.3s;\n\n    display: none;\n  }\n\n  &.inProgress {\n    .progress {\n      display: block;\n    }\n  }\n\n  .download-icon {\n    font-size: 20px;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      cursor: pointer;\n\n      padding: var(--padding-m) var(--padding-s);\n\n      background-color: var(--md-sys-color-surface-container-low-hover);\n\n      .download,\n      .download-icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* reveal size and download */\n      .download {\n        display: flex;\n      }\n      .name-wrapper,\n      .extension {\n        display: none;\n      }\n    }\n  }\n`\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  flex: 1;\n\n  .icon {\n    user-select: none;\n  }\n\n  .download-icon {\n    display: none;\n  }\n\n  /* previewable styles (it can be expanded) */\n  /* on hover it shows the expand buttons */\n  &.isPreviewable,\n  &.isUnsavedAnnotation {\n    cursor: pointer;\n\n    &:hover {\n      .expand-buttons {\n        display: flex;\n      }\n      .type-icon {\n        display: none;\n      }\n    }\n  }\n\n  &:hover .image-wrapper::after {\n    opacity: 0.8;\n  }\n`\n\nexport const ImageWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  img {\n    position: absolute;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    height: calc(100% - 20px);\n\n    transition: scale 0.2s ease;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    opacity: 0;\n    transition: opacity 0.1s ease;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      .icon {\n        display: block;\n        z-index: 10;\n      }\n    }\n  }\n`\n\nexport const Buttons = styled.div`\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: none;\n  height: calc(100% - 20px);\n  width: 100%;\n  gap: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n  height: 100%;\n  width: 100%;\n  border: none;\n  opacity: 0.5;\n  transition: opacity 250ms;\n\n  &:hover {\n    background: none;\n    opacity: 1;\n  }\n`\n"],"names":[],"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqGtB,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

@@ -32,11 +32,11 @@ const FilesGrid = ({
       name: file.name,
       mime: file.mime || file.type,
       size: file.size,
-      src: file.isUnsavedAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
-      isUnsavedAnnotation: file.isUnsavedAnnotation,
+      src: file.unsavedAnnotation ? file.thumbnail : `/api/projects/${projectName}/files/${file.id}`,
+      unsavedAnnotation: file.unsavedAnnotation,
       savedAnnotation: file.annotation,
       progress: file.progress,
-      onRemove: onRemove ? () => onRemove(file.id, file.name, file.isUnsavedAnnotation) : void 0,
+      onRemove: onRemove ? () => onRemove(file.id, file.name, !!file.unsavedAnnotation) : void 0,
       isCompact,
       isDownloadable,
       onExpand: () => handleExpand(index),

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

@@ -1 +1 @@
-{"version":3,"file":"FilesGrid.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.tsx"],"sourcesContent":["import * as Styled from './FilesGrid.styled'\nimport clsx from 'clsx'\nimport FileUploadCard from '../FileUploadCard'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { useCallback } from 'react'\n\nexport interface FilesGridProps {\n  files?: any[]\n  activityId?: string\n  isCompact?: boolean\n  onRemove?: (id: string, name: string, isUnsavedAnnotation: boolean) => void\n  projectName: string\n  isDownloadable?: boolean\n  onExpand?: (data: { files: any[]; index: number; activityId: string }) => void\n  onAnnotationClick?: (file: any) => void\n  [key: string]: any\n}\n\nconst FilesGrid: React.FC<FilesGridProps> = ({\n  files = [],\n  activityId,\n  isCompact,\n  onRemove,\n  projectName,\n  isDownloadable,\n  onExpand,\n  onAnnotationClick,\n  ...props\n}) => {\n  if (!files.length) return null\n\n  const handleExpand = useCallback(\n    (index: number) => {\n      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext))\n      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id)\n      onExpand?.({ files: filteredFiles, index: updatedIndex, activityId: activityId || '' })\n    },\n    [onExpand],\n  )\n\n  return (\n    <Styled.Grid className={clsx({ compact: isCompact })} {...props}>\n      {files.map((file, index) => (\n        <FileUploadCard\n          key={index}\n          id={file.id || file.name}\n          name={file.name}\n          mime={file.mime || file.type}\n          size={file.size}\n          src={\n            file.isUnsavedAnnotation\n              ? file.thumbnail\n              : `/api/projects/${projectName}/files/${file.id}`\n          }\n          isUnsavedAnnotation={file.isUnsavedAnnotation}\n          savedAnnotation={file.annotation}\n          progress={file.progress}\n          onRemove={\n            onRemove ? () => onRemove(file.id, file.name, file.isUnsavedAnnotation) : undefined\n          }\n          isCompact={isCompact}\n          isDownloadable={isDownloadable}\n          onExpand={() => handleExpand(index)}\n          onJumpTo={() => onAnnotationClick?.(file)}\n        />\n      ))}\n    </Styled.Grid>\n  )\n}\n\nexport default FilesGrid\n"],"names":["useCallback","isFilePreviewable","Styled.Grid","jsx"],"mappings":";;;;;;;AAkBA,MAAM,YAAsC,CAAC;AAAA,EAC3C,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACA,MAAA,CAAC,MAAM,OAAe,QAAA;AAE1B,QAAM,eAAeA,MAAA;AAAA,IACnB,CAAC,UAAkB;AACX,YAAA,gBAAgB,MAAM,OAAO,CAAC,SAASC,oCAAkB,KAAK,MAAM,KAAK,GAAG,CAAC;AAC7E,YAAA,eAAe,cAAc,UAAU,CAAC,SAAS,KAAK,OAAO,MAAM,KAAK,EAAE,EAAE;AACvE,2CAAA,EAAE,OAAO,eAAe,OAAO,cAAc,YAAY,cAAc;IACpF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,0DACGC,iBAAAA,MAAA,EAAY,WAAW,KAAK,EAAE,SAAS,UAAU,CAAC,GAAI,GAAG,OACvD,gBAAM,IAAI,CAAC,MAAM,UAChBC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,IAAI,KAAK,MAAM,KAAK;AAAA,MACpB,MAAM,KAAK;AAAA,MACX,MAAM,KAAK,QAAQ,KAAK;AAAA,MACxB,MAAM,KAAK;AAAA,MACX,KACE,KAAK,sBACD,KAAK,YACL,iBAAiB,WAAW,UAAU,KAAK,EAAE;AAAA,MAEnD,qBAAqB,KAAK;AAAA,MAC1B,iBAAiB,KAAK;AAAA,MACtB,UAAU,KAAK;AAAA,MACf,UACE,WAAW,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,mBAAmB,IAAI;AAAA,MAE5E;AAAA,MACA;AAAA,MACA,UAAU,MAAM,aAAa,KAAK;AAAA,MAClC,UAAU,MAAM,uDAAoB;AAAA,IAAI;AAAA,IAnBnC;AAAA,EAqBR,CAAA,GACH;AAEJ;;"}
+{"version":3,"file":"FilesGrid.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.tsx"],"sourcesContent":["import * as Styled from './FilesGrid.styled'\nimport clsx from 'clsx'\nimport FileUploadCard from '../FileUploadCard'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { useCallback } from 'react'\n\nexport interface FilesGridProps {\n  files?: any[]\n  activityId?: string\n  isCompact?: boolean\n  onRemove?: (id: string, name: string, isUnsavedAnnotation: boolean) => void\n  projectName: string\n  isDownloadable?: boolean\n  onExpand?: (data: { files: any[]; index: number; activityId: string }) => void\n  onAnnotationClick?: (file: any) => void\n  [key: string]: any\n}\n\nconst FilesGrid: React.FC<FilesGridProps> = ({\n  files = [],\n  activityId,\n  isCompact,\n  onRemove,\n  projectName,\n  isDownloadable,\n  onExpand,\n  onAnnotationClick,\n  ...props\n}) => {\n  if (!files.length) return null\n\n  const handleExpand = useCallback(\n    (index: number) => {\n      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext))\n      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id)\n      onExpand?.({ files: filteredFiles, index: updatedIndex, activityId: activityId || '' })\n    },\n    [onExpand],\n  )\n\n  return (\n    <Styled.Grid className={clsx({ compact: isCompact })} {...props}>\n      {files.map((file, index) => (\n        <FileUploadCard\n          key={index}\n          id={file.id || file.name}\n          name={file.name}\n          mime={file.mime || file.type}\n          size={file.size}\n          src={\n            file.unsavedAnnotation\n              ? file.thumbnail\n              : `/api/projects/${projectName}/files/${file.id}`\n          }\n          unsavedAnnotation={file.unsavedAnnotation}\n          savedAnnotation={file.annotation}\n          progress={file.progress}\n          onRemove={\n            onRemove ? () => onRemove(file.id, file.name, !!file.unsavedAnnotation) : undefined\n          }\n          isCompact={isCompact}\n          isDownloadable={isDownloadable}\n          onExpand={() => handleExpand(index)}\n          onJumpTo={() => onAnnotationClick?.(file)}\n        />\n      ))}\n    </Styled.Grid>\n  )\n}\n\nexport default FilesGrid\n"],"names":["useCallback","isFilePreviewable","Styled.Grid","jsx"],"mappings":";;;;;;;AAkBA,MAAM,YAAsC,CAAC;AAAA,EAC3C,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACA,MAAA,CAAC,MAAM,OAAe,QAAA;AAE1B,QAAM,eAAeA,MAAA;AAAA,IACnB,CAAC,UAAkB;AACX,YAAA,gBAAgB,MAAM,OAAO,CAAC,SAASC,oCAAkB,KAAK,MAAM,KAAK,GAAG,CAAC;AAC7E,YAAA,eAAe,cAAc,UAAU,CAAC,SAAS,KAAK,OAAO,MAAM,KAAK,EAAE,EAAE;AACvE,2CAAA,EAAE,OAAO,eAAe,OAAO,cAAc,YAAY,cAAc;IACpF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,0DACGC,iBAAAA,MAAA,EAAY,WAAW,KAAK,EAAE,SAAS,UAAU,CAAC,GAAI,GAAG,OACvD,gBAAM,IAAI,CAAC,MAAM,UAChBC,2BAAA,kBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,IAAI,KAAK,MAAM,KAAK;AAAA,MACpB,MAAM,KAAK;AAAA,MACX,MAAM,KAAK,QAAQ,KAAK;AAAA,MACxB,MAAM,KAAK;AAAA,MACX,KACE,KAAK,oBACD,KAAK,YACL,iBAAiB,WAAW,UAAU,KAAK,EAAE;AAAA,MAEnD,mBAAmB,KAAK;AAAA,MACxB,iBAAiB,KAAK;AAAA,MACtB,UAAU,KAAK;AAAA,MACf,UACE,WAAW,MAAM,SAAS,KAAK,IAAI,KAAK,MAAM,CAAC,CAAC,KAAK,iBAAiB,IAAI;AAAA,MAE5E;AAAA,MACA;AAAA,MACA,UAAU,MAAM,aAAa,KAAK;AAAA,MAClC,UAAU,MAAM,uDAAoB;AAAA,IAAI;AAAA,IAnBnC;AAAA,EAqBR,CAAA,GACH;AAEJ;;"}