@ynput/ayon-frontend-shared 0.4.3 → 0.4.4

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

@@ -1,6 +1,7 @@
 import { Button as e } from "@ynput/ayon-react-components";
 import o from "styled-components";
-const r = o.div`
+import { PlayableIcon as n } from "../../../../components/PlayableIcon/PlayableIcon.es.js";
+const a = o.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -46,7 +47,7 @@ const r = o.div`
   .download-icon {
     color: var(--md-sys-color-outline);
   }
-`, t = o.footer`
+`, s = o.footer`
   background-color: var(--md-sys-color-surface-container-low);
   display: flex;
   align-items: center;
@@ -146,7 +147,7 @@ const r = o.div`
       }
     }
   }
-`, a = o.div`
+`, l = o.div`
   position: relative;
   display: flex;
   justify-content: center;
@@ -173,7 +174,8 @@ const r = o.div`
       .expand-buttons {
         display: flex;
       }
-      .type-icon {
+      .type-icon,
+      .playable {
         display: none;
       }
     }
@@ -182,7 +184,7 @@ const r = o.div`
   &:hover .image-wrapper::after {
     opacity: 0.8;
   }
-`, s = o.div`
+`, c = o.div`
   position: absolute;
   inset: 0;
   display: flex;
@@ -205,6 +207,7 @@ const r = o.div`
     background-color: var(--md-sys-color-surface-container-lowest);
     opacity: 0;
     transition: opacity 0.1s ease;
+    pointer-events: none;
   }
 
   &.isDownloadable {
@@ -215,7 +218,12 @@ const r = o.div`
       }
     }
   }
-`, l = o.div`
+
+  /* failed thumbnail: let the videocam type icon show through */
+  &.posterError {
+    background-color: transparent;
+  }
+`, d = o.div`
   display: none;
   position: absolute;
   left: 0;
@@ -224,7 +232,7 @@ const r = o.div`
   height: calc(100% - 20px);
   width: 100%;
   gap: 0;
-`, d = o(e)`
+`, p = o(e)`
   height: 100%;
   width: 100%;
   border: none;
@@ -235,13 +243,26 @@ const r = o.div`
     background: none;
     opacity: 1;
   }
+`, v = o(n)`
+  --icon-size: 32px;
+  top: calc(50% - 10px);
+  left: 50%;
+  right: unset;
+  translate: -50% -50%;
+  z-index: 2;
+  pointer-events: none;
+
+  .icon {
+    font-size: var(--icon-size);
+  }
 `;
 export {
-  l as Buttons,
-  a as ContentWrapper,
-  d as ExpandButton,
-  r as File,
-  t as Footer,
-  s as ImageWrapper
+  d as Buttons,
+  l as ContentWrapper,
+  p as ExpandButton,
+  a as File,
+  s as Footer,
+  c as ImageWrapper,
+  v as PlayIcon
 };
 //# sourceMappingURL=FileUploadCard.styled.es.js.map

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: flex;\n    align-items: center;\n\n    .icon {\n      font-size: inherit;\n      margin-right: var(--padding-s);\n      vertical-align: text-top;\n    }\n  }\n\n  .extension {\n    z-index: 20;\n    min-width: fit-content;\n    overflow: hidden;\n  }\n\n  .progress {\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-primary-container);\n    z-index: 10;\n\n    transition: right 0.3s;\n\n    display: none;\n  }\n\n  &.inProgress {\n    .progress {\n      display: block;\n    }\n  }\n\n  .download-icon {\n    font-size: 20px;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      cursor: pointer;\n\n      padding: var(--padding-m) var(--padding-s);\n\n      background-color: var(--md-sys-color-surface-container-low-hover);\n\n      .download,\n      .download-icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* reveal size and download */\n      .download {\n        display: flex;\n      }\n      .name-wrapper,\n      .extension {\n        display: none;\n      }\n    }\n  }\n`\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  flex: 1;\n\n  .icon {\n    user-select: none;\n  }\n\n  .download-icon {\n    display: none;\n  }\n\n  /* previewable styles (it can be expanded) */\n  /* on hover it shows the expand buttons */\n  &.isPreviewable,\n  &.isUnsavedAnnotation {\n    cursor: pointer;\n\n    &:hover {\n      .expand-buttons {\n        display: flex;\n      }\n      .type-icon {\n        display: none;\n      }\n    }\n  }\n\n  &:hover .image-wrapper::after {\n    opacity: 0.8;\n  }\n`\n\nexport const ImageWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  img {\n    position: absolute;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    height: calc(100% - 20px);\n\n    transition: scale 0.2s ease;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    opacity: 0;\n    transition: opacity 0.1s ease;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      .icon {\n        display: block;\n        z-index: 10;\n      }\n    }\n  }\n`\n\nexport const Buttons = styled.div`\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: none;\n  height: calc(100% - 20px);\n  width: 100%;\n  gap: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n  height: 100%;\n  width: 100%;\n  border: none;\n  opacity: 0.5;\n  transition: opacity 250ms;\n\n  &:hover {\n    background: none;\n    opacity: 1;\n  }\n`\n"],"names":["File","styled","Footer","ContentWrapper","ImageWrapper","Buttons","ExpandButton","Button"],"mappings":";;AAGO,MAAMA,IAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgDdC,IAASD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAsGhBE,IAAiBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAsCxBG,IAAeH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmCtBI,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWjBK,IAAeL,EAAOM,CAAM;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'\nimport { PlayableIcon } from '@shared/components/PlayableIcon/PlayableIcon'\n\nexport const File = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--border-radius-m);\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  z-index: 0;\n  user-select: none;\n\n  height: 105px;\n\n  &.compact {\n    height: 75px;\n  }\n\n  .icon {\n    font-size: 30px;\n  }\n\n  .remove {\n    position: absolute;\n    top: 2px;\n    right: 2px;\n    padding: 2px;\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n      color: var(--md-sys-color-on-error-container);\n    }\n\n    .icon {\n      font-size: 20px;\n    }\n  }\n\n  /* move icon up slightly to center it */\n  .type-icon {\n    margin-top: -20px;\n  }\n\n  /* set download default color outline */\n  .download,\n  .download-icon {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const Footer = styled.footer`\n  background-color: var(--md-sys-color-surface-container-low);\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 var(--padding-s);\n  overflow: hidden;\n  color: var(--md-sys-color-on-surface);\n\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n\n  transition: padding 0.2s ease;\n\n  span {\n    font-size: 12px;\n  }\n\n  .name-wrapper {\n    overflow: hidden;\n  }\n\n  .download {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    display: none;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  .name {\n    position: relative;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    z-index: 20;\n    display: flex;\n    align-items: center;\n\n    .icon {\n      font-size: inherit;\n      margin-right: var(--padding-s);\n      vertical-align: text-top;\n    }\n  }\n\n  .extension {\n    z-index: 20;\n    min-width: fit-content;\n    overflow: hidden;\n  }\n\n  .progress {\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-primary-container);\n    z-index: 10;\n\n    transition: right 0.3s;\n\n    display: none;\n  }\n\n  &.inProgress {\n    .progress {\n      display: block;\n    }\n  }\n\n  .download-icon {\n    font-size: 20px;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      cursor: pointer;\n\n      padding: var(--padding-m) var(--padding-s);\n\n      background-color: var(--md-sys-color-surface-container-low-hover);\n\n      .download,\n      .download-icon {\n        color: var(--md-sys-color-on-surface);\n      }\n\n      /* reveal size and download */\n      .download {\n        display: flex;\n      }\n      .name-wrapper,\n      .extension {\n        display: none;\n      }\n    }\n  }\n`\n\nexport const ContentWrapper = styled.div`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  flex: 1;\n\n  .icon {\n    user-select: none;\n  }\n\n  .download-icon {\n    display: none;\n  }\n\n  /* previewable styles (it can be expanded) */\n  /* on hover it shows the expand buttons */\n  &.isPreviewable,\n  &.isUnsavedAnnotation {\n    cursor: pointer;\n\n    &:hover {\n      .expand-buttons {\n        display: flex;\n      }\n      .type-icon,\n      .playable {\n        display: none;\n      }\n    }\n  }\n\n  &:hover .image-wrapper::after {\n    opacity: 0.8;\n  }\n`\n\nexport const ImageWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  justify-content: center;\n  background-color: var(--md-sys-color-surface-container-lowest);\n  img {\n    position: absolute;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: contain;\n    height: calc(100% - 20px);\n\n    transition: scale 0.2s ease;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--md-sys-color-surface-container-lowest);\n    opacity: 0;\n    transition: opacity 0.1s ease;\n    pointer-events: none;\n  }\n\n  &.isDownloadable {\n    &:hover {\n      .icon {\n        display: block;\n        z-index: 10;\n      }\n    }\n  }\n\n  /* failed thumbnail: let the videocam type icon show through */\n  &.posterError {\n    background-color: transparent;\n  }\n`\n\nexport const Buttons = styled.div`\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  transform: none;\n  height: calc(100% - 20px);\n  width: 100%;\n  gap: 0;\n`\n\nexport const ExpandButton = styled(Button)`\n  height: 100%;\n  width: 100%;\n  border: none;\n  opacity: 0.5;\n  transition: opacity 250ms;\n\n  &:hover {\n    background: none;\n    opacity: 1;\n  }\n`\n\n/* the footer overlays the bottom 20px, so shift the glyph up to sit centered on the poster */\nexport const PlayIcon = styled(PlayableIcon)`\n  --icon-size: 32px;\n  top: calc(50% - 10px);\n  left: 50%;\n  right: unset;\n  translate: -50% -50%;\n  z-index: 2;\n  pointer-events: none;\n\n  .icon {\n    font-size: var(--icon-size);\n  }\n`\n"],"names":["File","styled","Footer","ContentWrapper","ImageWrapper","Buttons","ExpandButton","Button","PlayIcon","PlayableIcon"],"mappings":";;;AAIO,MAAMA,IAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgDdC,IAASD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAsGhBE,IAAiBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuCxBG,IAAeH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyCtBI,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWjBK,IAAeL,EAAOM,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAc5BC,IAAWP,EAAOQ,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../../../../../_virtual/jsx-runtime.cjs.js"),w=require("react"),B=require("./fileUtils.cjs.js"),K=require("./Mimes/ImageMime.cjs.js"),W=require("./Mimes/TextMime.cjs.js"),r=require("clsx"),y=require("@ynput/ayon-react-components"),G=require("./hooks/useAttachmentNavigation.cjs.js"),j=require("./FileUploadPreview.styled.cjs.js"),p={image:{component:K,mimeTypes:["image/"],fullPreviews:["png","jpg","jpeg","gif","svg","webp"],id:"image"},text:{component:W,mimeTypes:["text/","application/json","scss","jsx"],id:"text"},pdf:{component:null,mimeTypes:["pdf"],id:"pdf",callback:t=>window.open(B.getFileURL(t.id,t.projectName),"_blank")}},H=(t="",s="")=>Object.values(p).some(({mimeTypes:o=[]})=>o.some(n=>(t||s)?.includes(n))),J=({files:t,index:s,activityId:o,projectName:n,onFilePreviewClose:R,onNavigate:N})=>{const{canNavigateDown:I,canNavigateUp:T,canNavigateLeft:m,canNavigateRight:g,getByIndexActivity:q,navigateUp:C,navigateDown:P,navigateLeft:k,navigateRight:A}=G({files:t,index:s,activityId:o,onNavigate:N}),u={...q(o,s),projectName:n},{id:a,mime:E,extension:D,name:M}=u,v=w.useRef(null);w.useEffect(()=>{a&&n&&v.current?.focus()},[a,n]);const d=()=>{R()};if(!a||!n)return null;const U=Object.values(p).find(({mimeTypes:e})=>e.some(S=>(E||D)?.includes(S))),{component:x,id:_,callback:f,fullPreviews:z}=U||{};if(f)return f(u),null;const F=()=>T()&&C(),L=()=>I()&&P(),b=()=>m()&&k(),h=()=>g()&&A(),l=_==="image",c=50,O=e=>{e.code==="ArrowUp"&&F(),e.code==="ArrowDown"&&L(),e.code==="ArrowRight"&&h(),e.code==="ArrowLeft"&&b(),e.key==="Escape"&&(e.preventDefault(),d())};return x?i.jsxRuntimeExports.jsxs(j.DialogWrapper,{onKeyDown:O,size:"full",isOpen:!!(a&&n),onClose:d,hideCancelButton:l,ref:v,className:r({isImage:l},"block-shortcuts"),header:l?null:M,children:[i.jsxRuntimeExports.jsx("div",{style:{position:"absolute",inset:0,zIndex:c},onClick:d}),i.jsxRuntimeExports.jsx(y.Icon,{style:{zIndex:c+1},icon:"chevron_left",className:r("navIcon","left",{disabled:!m()}),onClick:b}),i.jsxRuntimeExports.jsx(j.ScrollableContent,{style:{zIndex:c+1},className:r({scrollable:!l}),children:i.jsxRuntimeExports.jsx(x,{file:u,fullPreviews:z})}),i.jsxRuntimeExports.jsx(y.Icon,{style:{zIndex:c+1},icon:"chevron_right",className:r("navIcon","right",{disabled:!g()}),onClick:h})]}):null};exports.default=J;exports.expandableMimeTypes=p;exports.isFilePreviewable=H;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../../../../../_virtual/jsx-runtime.cjs.js"),b=require("react"),W=require("./fileUtils.cjs.js"),X=require("./Mimes/ImageMime.cjs.js"),G=require("./Mimes/TextMime.cjs.js"),J=require("./Mimes/VideoMime.cjs.js"),m=require("clsx"),P=require("@ynput/ayon-react-components"),Q=require("./hooks/useAttachmentNavigation.cjs.js"),k=require("./FileUploadPreview.styled.cjs.js"),w={image:{component:X,mimeTypes:["image/"],fullPreviews:["png","jpg","jpeg","gif","svg","webp"],id:"image"},video:{component:J,mimeTypes:["video/"],id:"video"},text:{component:G,mimeTypes:["text/","application/json","scss","jsx"],id:"text"},pdf:{component:null,mimeTypes:["pdf"],id:"pdf",callback:t=>window.open(W.getFileURL(t.id,t.projectName),"_blank")}},Y=(t="",s="")=>Object.values(w).some(({mimeTypes:a=[]})=>a.some(e=>(t||s)?.includes(e))),Z=({files:t,index:s,activityId:a,projectName:e,onFilePreviewClose:q,onNavigate:C})=>{const{canNavigateDown:N,canNavigateUp:M,canNavigateLeft:p,canNavigateRight:g,getByIndexActivity:A,navigateUp:U,navigateDown:D,navigateLeft:y,navigateRight:h}=Q({files:t,index:s,activityId:a,onNavigate:C}),v={...A(a,s),projectName:e},{id:i,mime:L,extension:_,name:z}=v,R=b.useRef(null);b.useEffect(()=>{i&&e&&R.current?.focus()},[i,e]);const f=()=>{q()},F=Object.values(w).find(({mimeTypes:x})=>x.some(d=>(L||_)?.includes(d))),{component:l,id:j,callback:r,fullPreviews:O}=F||{};if(b.useEffect(()=>{if(!i||!e||!l||r)return;const x={ArrowUp:[M,U],ArrowDown:[N,D],ArrowLeft:[p,y],ArrowRight:[g,h]},d=n=>{if(n.key==="Escape"){n.preventDefault(),n.stopPropagation(),f();return}const T=x[n.code];if(!T)return;if(n.target instanceof HTMLElement){const{tagName:I,isContentEditable:K}=n.target;if(I==="INPUT"||I==="TEXTAREA"||K)return}n.preventDefault(),n.stopPropagation();const[V,H]=T;V()&&H()};return document.addEventListener("keydown",d,!0),()=>document.removeEventListener("keydown",d,!0)},[i,e,t,s,a,l,r]),!i||!e)return null;if(r)return r(v),null;const S=()=>p()&&y(),B=()=>g()&&h(),c=j==="image",E=j==="video",u=50;return l?o.jsxRuntimeExports.jsxs(k.DialogWrapper,{size:"full",isOpen:!!(i&&e),onClose:f,hideCancelButton:c,ref:R,className:m({isImage:c},"block-shortcuts"),header:c?null:z,children:[o.jsxRuntimeExports.jsx("div",{style:{position:"absolute",inset:0,zIndex:u},onClick:f}),o.jsxRuntimeExports.jsx(P.Icon,{style:{zIndex:u+1},icon:"chevron_left",className:m("navIcon","left",{disabled:!p()}),onClick:S}),o.jsxRuntimeExports.jsx(k.ScrollableContent,{style:{zIndex:u+1},className:m({scrollable:!c&&!E,fill:E}),children:o.jsxRuntimeExports.jsx(l,{file:v,fullPreviews:O})}),o.jsxRuntimeExports.jsx(P.Icon,{style:{zIndex:u+1},icon:"chevron_right",className:m("navIcon","right",{disabled:!g()}),onClick:B})]}):null};exports.default=Z;exports.expandableMimeTypes=w;exports.isFilePreviewable=Y;
 //# sourceMappingURL=FileUploadPreview.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadPreview.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { getFileURL } from './fileUtils'\nimport ImageMime from './Mimes/ImageMime'\nimport TextMime from './Mimes/TextMime'\nimport clsx from 'clsx'\nimport { Icon } from '@ynput/ayon-react-components'\nimport useAttachmentNavigation from './hooks/useAttachmentNavigation'\nimport * as Styled from './FileUploadPreview.styled'\n\nexport type MimeTypeDefinition = {\n  component: React.FC<any> | null\n  mimeTypes: string[]\n  fullPreviews?: string[]\n  id: string\n  callback?: (file: any) => void\n}\n\n// define expandable mime types and their components\nexport const expandableMimeTypes: { [key: string]: MimeTypeDefinition } = {\n  image: {\n    component: ImageMime,\n    mimeTypes: ['image/'],\n    fullPreviews: ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'],\n    id: 'image',\n  },\n  text: {\n    component: TextMime,\n    mimeTypes: ['text/', 'application/json', 'scss', 'jsx'],\n    id: 'text',\n  },\n  pdf: {\n    component: null,\n    mimeTypes: ['pdf'],\n    id: 'pdf',\n    callback: (file: any) => window.open(getFileURL(file.id, file.projectName), '_blank'),\n  },\n}\n\nexport const isFilePreviewable = (mime = '', ext = '') =>\n  Object.values(expandableMimeTypes).some(({ mimeTypes = [] }) =>\n    mimeTypes.some((type) => (mime || ext)?.includes(type)),\n  )\n\ninterface FileUploadPreviewProps {\n  files: any[] // replace with correct type\n  index: number\n  activityId: string\n  projectName: string\n  onFilePreviewClose: () => void\n  onNavigate: (payload: any) => void // replace with correct type\n}\n\nconst FileUploadPreview: React.FC<FileUploadPreviewProps> = ({\n  files,\n  index,\n  activityId,\n  projectName,\n  onFilePreviewClose,\n  onNavigate,\n}) => {\n  const {\n    canNavigateDown,\n    canNavigateUp,\n    canNavigateLeft,\n    canNavigateRight,\n    getByIndexActivity,\n    navigateUp,\n    navigateDown,\n    navigateLeft,\n    navigateRight,\n  } = useAttachmentNavigation({ files, index, activityId, onNavigate })\n  const file = { ...getByIndexActivity(activityId, index), projectName }\n  const { id, mime, extension, name } = file\n\n  // when dialog open, focus on the dialog\n  // we do this so that the user can navigate with the keyboard (esc works)\n  const dialogRef = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (id && projectName) {\n      dialogRef.current?.focus()\n    }\n  }, [id, projectName])\n\n  const handleClose = () => {\n    onFilePreviewClose()\n  }\n\n  if (!id || !projectName) return null\n\n  // get the correct mime type component based on mimeTypes match\n  const previewable = Object.values(expandableMimeTypes).find(({ mimeTypes }) =>\n    mimeTypes.some((type) => (mime || extension)?.includes(type)),\n  )\n\n  // @ts-ignore\n  const { component: MimeComponent, id: typeId, callback, fullPreviews } = previewable || {}\n\n  // if there is a callback, run it and return null\n  // mainly for pdfs\n  if (callback) {\n    callback(file)\n    return null\n  }\n\n  const handleNavigateToPrevActivity = () => canNavigateUp() && navigateUp()\n  const handleNavigateToNextActivity = () => canNavigateDown() && navigateDown()\n  const handleNavigateToPrevious = () => canNavigateLeft() && navigateLeft()\n  const handleNavigateToNext = () => canNavigateRight() && navigateRight()\n\n  const isImage = typeId === 'image'\n  const zIndex = 50\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.code === 'ArrowUp') {\n      handleNavigateToPrevActivity()\n    }\n    if (e.code === 'ArrowDown') {\n      handleNavigateToNextActivity()\n    }\n    if (e.code === 'ArrowRight') {\n      handleNavigateToNext()\n    }\n    if (e.code === 'ArrowLeft') {\n      handleNavigateToPrevious()\n    }\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      handleClose()\n    }\n  }\n\n  if (!MimeComponent) {\n    return null\n  }\n\n  return (\n    <Styled.DialogWrapper\n      onKeyDown={handleKeyDown}\n      size=\"full\"\n      isOpen={!!(id && projectName)}\n      onClose={handleClose}\n      hideCancelButton={isImage}\n      ref={dialogRef}\n      className={clsx({ isImage }, 'block-shortcuts')}\n      header={isImage ? null : name}\n    >\n      <div style={{ position: 'absolute', inset: 0, zIndex: zIndex }} onClick={handleClose}></div>\n\n      <Icon\n        style={{ zIndex: zIndex + 1 }}\n        icon=\"chevron_left\"\n        className={clsx('navIcon', 'left', { disabled: !canNavigateLeft() })}\n        onClick={handleNavigateToPrevious}\n      />\n\n      <Styled.ScrollableContent\n        style={{ zIndex: zIndex + 1 }}\n        className={clsx({ scrollable: !isImage })}\n      >\n        <MimeComponent file={file} fullPreviews={fullPreviews} />\n      </Styled.ScrollableContent>\n\n      <Icon\n        style={{ zIndex: zIndex + 1 }}\n        icon=\"chevron_right\"\n        className={clsx('navIcon', 'right', { disabled: !canNavigateRight() })}\n        onClick={handleNavigateToNext}\n      />\n    </Styled.DialogWrapper>\n  )\n}\n\nexport default FileUploadPreview\n"],"names":["expandableMimeTypes","ImageMime","TextMime","file","getFileURL","isFilePreviewable","mime","ext","mimeTypes","type","FileUploadPreview","files","index","activityId","projectName","onFilePreviewClose","onNavigate","canNavigateDown","canNavigateUp","canNavigateLeft","canNavigateRight","getByIndexActivity","navigateUp","navigateDown","navigateLeft","navigateRight","useAttachmentNavigation","id","extension","name","dialogRef","useRef","useEffect","handleClose","previewable","MimeComponent","typeId","callback","fullPreviews","handleNavigateToPrevActivity","handleNavigateToNextActivity","handleNavigateToPrevious","handleNavigateToNext","isImage","zIndex","handleKeyDown","jsxs","Styled.DialogWrapper","clsx","jsx","Icon","Styled.ScrollableContent"],"mappings":"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"}
+{"version":3,"file":"FileUploadPreview.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { getFileURL } from './fileUtils'\nimport ImageMime from './Mimes/ImageMime'\nimport TextMime from './Mimes/TextMime'\nimport VideoMime from './Mimes/VideoMime'\nimport clsx from 'clsx'\nimport { Icon } from '@ynput/ayon-react-components'\nimport useAttachmentNavigation from './hooks/useAttachmentNavigation'\nimport * as Styled from './FileUploadPreview.styled'\n\nexport type MimeTypeDefinition = {\n  component: React.FC<any> | null\n  mimeTypes: string[]\n  fullPreviews?: string[]\n  id: string\n  callback?: (file: any) => void\n}\n\n// define expandable mime types and their components\nexport const expandableMimeTypes: { [key: string]: MimeTypeDefinition } = {\n  image: {\n    component: ImageMime,\n    mimeTypes: ['image/'],\n    fullPreviews: ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'],\n    id: 'image',\n  },\n  video: {\n    component: VideoMime,\n    mimeTypes: ['video/'],\n    id: 'video',\n  },\n  text: {\n    component: TextMime,\n    mimeTypes: ['text/', 'application/json', 'scss', 'jsx'],\n    id: 'text',\n  },\n  pdf: {\n    component: null,\n    mimeTypes: ['pdf'],\n    id: 'pdf',\n    callback: (file: any) => window.open(getFileURL(file.id, file.projectName), '_blank'),\n  },\n}\n\nexport const isFilePreviewable = (mime = '', ext = '') =>\n  Object.values(expandableMimeTypes).some(({ mimeTypes = [] }) =>\n    mimeTypes.some((type) => (mime || ext)?.includes(type)),\n  )\n\ninterface FileUploadPreviewProps {\n  files: any[] // replace with correct type\n  index: number\n  activityId: string\n  projectName: string\n  onFilePreviewClose: () => void\n  onNavigate: (payload: any) => void // replace with correct type\n}\n\nconst FileUploadPreview: React.FC<FileUploadPreviewProps> = ({\n  files,\n  index,\n  activityId,\n  projectName,\n  onFilePreviewClose,\n  onNavigate,\n}) => {\n  const {\n    canNavigateDown,\n    canNavigateUp,\n    canNavigateLeft,\n    canNavigateRight,\n    getByIndexActivity,\n    navigateUp,\n    navigateDown,\n    navigateLeft,\n    navigateRight,\n  } = useAttachmentNavigation({ files, index, activityId, onNavigate })\n  const file = { ...getByIndexActivity(activityId, index), projectName }\n  const { id, mime, extension, name } = file\n\n  // when dialog open, focus on the dialog\n  // we do this so that the user can navigate with the keyboard (esc works)\n  const dialogRef = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (id && projectName) {\n      dialogRef.current?.focus()\n    }\n  }, [id, projectName])\n\n  const handleClose = () => {\n    onFilePreviewClose()\n  }\n\n  // get the correct mime type component based on mimeTypes match\n  const previewable = Object.values(expandableMimeTypes).find(({ mimeTypes }) =>\n    mimeTypes.some((type) => (mime || extension)?.includes(type)),\n  )\n\n  // @ts-ignore\n  const { component: MimeComponent, id: typeId, callback, fullPreviews } = previewable || {}\n\n  // ayon-player binds its own document keydown listener for frame stepping, so claim the arrow\n  // keys in the capture phase — otherwise each press would navigate and seek at the same time\n  useEffect(() => {\n    // callback mimes (pdf) never render the dialog, so a global listener would outlive it\n    if (!id || !projectName || !MimeComponent || callback) return\n\n    const navigation: { [key: string]: [() => boolean, () => void] } = {\n      ArrowUp: [canNavigateUp, navigateUp],\n      ArrowDown: [canNavigateDown, navigateDown],\n      ArrowLeft: [canNavigateLeft, navigateLeft],\n      ArrowRight: [canNavigateRight, navigateRight],\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        e.stopPropagation()\n        handleClose()\n        return\n      }\n\n      const move = navigation[e.code]\n      if (!move) return\n\n      if (e.target instanceof HTMLElement) {\n        const { tagName, isContentEditable } = e.target\n        if (tagName === 'INPUT' || tagName === 'TEXTAREA' || isContentEditable) return\n      }\n\n      e.preventDefault()\n      e.stopPropagation()\n      const [canNavigate, navigate] = move\n      if (canNavigate()) navigate()\n    }\n\n    document.addEventListener('keydown', handleKeyDown, true)\n    return () => document.removeEventListener('keydown', handleKeyDown, true)\n  }, [id, projectName, files, index, activityId, MimeComponent, callback])\n\n  if (!id || !projectName) return null\n\n  // if there is a callback, run it and return null\n  // mainly for pdfs\n  if (callback) {\n    callback(file)\n    return null\n  }\n\n  const handleNavigateToPrevious = () => canNavigateLeft() && navigateLeft()\n  const handleNavigateToNext = () => canNavigateRight() && navigateRight()\n\n  const isImage = typeId === 'image'\n  const isVideo = typeId === 'video'\n  const zIndex = 50\n\n  if (!MimeComponent) {\n    return null\n  }\n\n  return (\n    <Styled.DialogWrapper\n      size=\"full\"\n      isOpen={!!(id && projectName)}\n      onClose={handleClose}\n      hideCancelButton={isImage}\n      ref={dialogRef}\n      className={clsx({ isImage }, 'block-shortcuts')}\n      header={isImage ? null : name}\n    >\n      <div style={{ position: 'absolute', inset: 0, zIndex: zIndex }} onClick={handleClose}></div>\n\n      <Icon\n        style={{ zIndex: zIndex + 1 }}\n        icon=\"chevron_left\"\n        className={clsx('navIcon', 'left', { disabled: !canNavigateLeft() })}\n        onClick={handleNavigateToPrevious}\n      />\n\n      <Styled.ScrollableContent\n        style={{ zIndex: zIndex + 1 }}\n        className={clsx({ scrollable: !isImage && !isVideo, fill: isVideo })}\n      >\n        <MimeComponent file={file} fullPreviews={fullPreviews} />\n      </Styled.ScrollableContent>\n\n      <Icon\n        style={{ zIndex: zIndex + 1 }}\n        icon=\"chevron_right\"\n        className={clsx('navIcon', 'right', { disabled: !canNavigateRight() })}\n        onClick={handleNavigateToNext}\n      />\n    </Styled.DialogWrapper>\n  )\n}\n\nexport default FileUploadPreview\n"],"names":["expandableMimeTypes","ImageMime","VideoMime","TextMime","file","getFileURL","isFilePreviewable","mime","ext","mimeTypes","type","FileUploadPreview","files","index","activityId","projectName","onFilePreviewClose","onNavigate","canNavigateDown","canNavigateUp","canNavigateLeft","canNavigateRight","getByIndexActivity","navigateUp","navigateDown","navigateLeft","navigateRight","useAttachmentNavigation","id","extension","name","dialogRef","useRef","useEffect","handleClose","previewable","MimeComponent","typeId","callback","fullPreviews","navigation","handleKeyDown","e","move","tagName","isContentEditable","canNavigate","navigate","handleNavigateToPrevious","handleNavigateToNext","isImage","isVideo","zIndex","jsxs","Styled.DialogWrapper","clsx","jsx","Icon","Styled.ScrollableContent"],"mappings":"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"}

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

@@ -1,21 +1,27 @@
-import { j as o } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { useRef as B, useEffect as K } from "react";
-import { getFileURL as S } from "./fileUtils.es.js";
-import W from "./Mimes/ImageMime.es.js";
-import q from "./Mimes/TextMime.es.js";
-import r from "clsx";
-import { Icon as w } from "@ynput/ayon-react-components";
-import G from "./hooks/useAttachmentNavigation.es.js";
-import { DialogWrapper as H, ScrollableContent as J } from "./FileUploadPreview.styled.es.js";
-const b = {
+import { j as i } from "../../../../../../_virtual/jsx-runtime.es.js";
+import { useRef as W, useEffect as N } from "react";
+import { getFileURL as X } from "./fileUtils.es.js";
+import q from "./Mimes/ImageMime.es.js";
+import G from "./Mimes/TextMime.es.js";
+import J from "./Mimes/VideoMime.es.js";
+import p from "clsx";
+import { Icon as j } from "@ynput/ayon-react-components";
+import Q from "./hooks/useAttachmentNavigation.es.js";
+import { DialogWrapper as Y, ScrollableContent as Z } from "./FileUploadPreview.styled.es.js";
+const C = {
   image: {
-    component: W,
+    component: q,
     mimeTypes: ["image/"],
     fullPreviews: ["png", "jpg", "jpeg", "gif", "svg", "webp"],
     id: "image"
   },
+  video: {
+    component: J,
+    mimeTypes: ["video/"],
+    id: "video"
+  },
   text: {
-    component: q,
+    component: G,
     mimeTypes: ["text/", "application/json", "scss", "jsx"],
     id: "text"
   },
@@ -23,81 +29,100 @@ const b = {
     component: null,
     mimeTypes: ["pdf"],
     id: "pdf",
-    callback: (t) => window.open(S(t.id, t.projectName), "_blank")
+    callback: (t) => window.open(X(t.id, t.projectName), "_blank")
   }
-}, oe = (t = "", i = "") => Object.values(b).some(
-  ({ mimeTypes: s = [] }) => s.some((n) => (t || i)?.includes(n))
-), ie = ({
+}, ce = (t = "", s = "") => Object.values(C).some(
+  ({ mimeTypes: a = [] }) => a.some((e) => (t || s)?.includes(e))
+), me = ({
   files: t,
-  index: i,
-  activityId: s,
-  projectName: n,
-  onFilePreviewClose: y,
-  onNavigate: N
+  index: s,
+  activityId: a,
+  projectName: e,
+  onFilePreviewClose: E,
+  onNavigate: A
 }) => {
   const {
-    canNavigateDown: j,
-    canNavigateUp: I,
-    canNavigateLeft: p,
-    canNavigateRight: f,
-    getByIndexActivity: T,
-    navigateUp: k,
-    navigateDown: A,
-    navigateLeft: C,
-    navigateRight: D
-  } = G({ files: t, index: i, activityId: s, onNavigate: N }), m = { ...T(s, i), projectName: n }, { id: a, mime: R, extension: P, name: z } = m, g = B(null);
-  K(() => {
-    a && n && g.current?.focus();
-  }, [a, n]);
-  const d = () => {
-    y();
-  };
-  if (!a || !n) return null;
-  const U = Object.values(b).find(
-    ({ mimeTypes: e }) => e.some((_) => (R || P)?.includes(_))
-  ), { component: v, id: L, callback: u, fullPreviews: M } = U || {};
-  if (u)
-    return u(m), null;
-  const E = () => I() && k(), F = () => j() && A(), x = () => p() && C(), h = () => f() && D(), l = L === "image", c = 50, O = (e) => {
-    e.code === "ArrowUp" && E(), e.code === "ArrowDown" && F(), e.code === "ArrowRight" && h(), e.code === "ArrowLeft" && x(), e.key === "Escape" && (e.preventDefault(), d());
-  };
-  return v ? /* @__PURE__ */ o.jsxs(
-    H,
+    canNavigateDown: P,
+    canNavigateUp: R,
+    canNavigateLeft: f,
+    canNavigateRight: g,
+    getByIndexActivity: D,
+    navigateUp: L,
+    navigateDown: M,
+    navigateLeft: w,
+    navigateRight: h
+  } = Q({ files: t, index: s, activityId: a, onNavigate: A }), u = { ...D(a, s), projectName: e }, { id: o, mime: U, extension: z, name: F } = u, b = W(null);
+  N(() => {
+    o && e && b.current?.focus();
+  }, [o, e]);
+  const v = () => {
+    E();
+  }, O = Object.values(C).find(
+    ({ mimeTypes: x }) => x.some((d) => (U || z)?.includes(d))
+  ), { component: l, id: y, callback: r, fullPreviews: _ } = O || {};
+  if (N(() => {
+    if (!o || !e || !l || r) return;
+    const x = {
+      ArrowUp: [R, L],
+      ArrowDown: [P, M],
+      ArrowLeft: [f, w],
+      ArrowRight: [g, h]
+    }, d = (n) => {
+      if (n.key === "Escape") {
+        n.preventDefault(), n.stopPropagation(), v();
+        return;
+      }
+      const k = x[n.code];
+      if (!k) return;
+      if (n.target instanceof HTMLElement) {
+        const { tagName: I, isContentEditable: S } = n.target;
+        if (I === "INPUT" || I === "TEXTAREA" || S) return;
+      }
+      n.preventDefault(), n.stopPropagation();
+      const [H, K] = k;
+      H() && K();
+    };
+    return document.addEventListener("keydown", d, !0), () => document.removeEventListener("keydown", d, !0);
+  }, [o, e, t, s, a, l, r]), !o || !e) return null;
+  if (r)
+    return r(u), null;
+  const B = () => f() && w(), V = () => g() && h(), c = y === "image", T = y === "video", m = 50;
+  return l ? /* @__PURE__ */ i.jsxs(
+    Y,
     {
-      onKeyDown: O,
       size: "full",
-      isOpen: !!(a && n),
-      onClose: d,
-      hideCancelButton: l,
-      ref: g,
-      className: r({ isImage: l }, "block-shortcuts"),
-      header: l ? null : z,
+      isOpen: !!(o && e),
+      onClose: v,
+      hideCancelButton: c,
+      ref: b,
+      className: p({ isImage: c }, "block-shortcuts"),
+      header: c ? null : F,
       children: [
-        /* @__PURE__ */ o.jsx("div", { style: { position: "absolute", inset: 0, zIndex: c }, onClick: d }),
-        /* @__PURE__ */ o.jsx(
-          w,
+        /* @__PURE__ */ i.jsx("div", { style: { position: "absolute", inset: 0, zIndex: m }, onClick: v }),
+        /* @__PURE__ */ i.jsx(
+          j,
           {
-            style: { zIndex: c + 1 },
+            style: { zIndex: m + 1 },
             icon: "chevron_left",
-            className: r("navIcon", "left", { disabled: !p() }),
-            onClick: x
+            className: p("navIcon", "left", { disabled: !f() }),
+            onClick: B
           }
         ),
-        /* @__PURE__ */ o.jsx(
-          J,
+        /* @__PURE__ */ i.jsx(
+          Z,
           {
-            style: { zIndex: c + 1 },
-            className: r({ scrollable: !l }),
-            children: /* @__PURE__ */ o.jsx(v, { file: m, fullPreviews: M })
+            style: { zIndex: m + 1 },
+            className: p({ scrollable: !c && !T, fill: T }),
+            children: /* @__PURE__ */ i.jsx(l, { file: u, fullPreviews: _ })
           }
         ),
-        /* @__PURE__ */ o.jsx(
-          w,
+        /* @__PURE__ */ i.jsx(
+          j,
           {
-            style: { zIndex: c + 1 },
+            style: { zIndex: m + 1 },
             icon: "chevron_right",
-            className: r("navIcon", "right", { disabled: !f() }),
-            onClick: h
+            className: p("navIcon", "right", { disabled: !g() }),
+            onClick: V
           }
         )
       ]
@@ -105,8 +130,8 @@ const b = {
   ) : null;
 };
 export {
-  ie as default,
-  b as expandableMimeTypes,
-  oe as isFilePreviewable
+  me as default,
+  C as expandableMimeTypes,
+  ce as isFilePreviewable
 };
 //# sourceMappingURL=FileUploadPreview.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadPreview.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { getFileURL } from './fileUtils'\nimport ImageMime from './Mimes/ImageMime'\nimport TextMime from './Mimes/TextMime'\nimport clsx from 'clsx'\nimport { Icon } from '@ynput/ayon-react-components'\nimport useAttachmentNavigation from './hooks/useAttachmentNavigation'\nimport * as Styled from './FileUploadPreview.styled'\n\nexport type MimeTypeDefinition = {\n  component: React.FC<any> | null\n  mimeTypes: string[]\n  fullPreviews?: string[]\n  id: string\n  callback?: (file: any) => void\n}\n\n// define expandable mime types and their components\nexport const expandableMimeTypes: { [key: string]: MimeTypeDefinition } = {\n  image: {\n    component: ImageMime,\n    mimeTypes: ['image/'],\n    fullPreviews: ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'],\n    id: 'image',\n  },\n  text: {\n    component: TextMime,\n    mimeTypes: ['text/', 'application/json', 'scss', 'jsx'],\n    id: 'text',\n  },\n  pdf: {\n    component: null,\n    mimeTypes: ['pdf'],\n    id: 'pdf',\n    callback: (file: any) => window.open(getFileURL(file.id, file.projectName), '_blank'),\n  },\n}\n\nexport const isFilePreviewable = (mime = '', ext = '') =>\n  Object.values(expandableMimeTypes).some(({ mimeTypes = [] }) =>\n    mimeTypes.some((type) => (mime || ext)?.includes(type)),\n  )\n\ninterface FileUploadPreviewProps {\n  files: any[] // replace with correct type\n  index: number\n  activityId: string\n  projectName: string\n  onFilePreviewClose: () => void\n  onNavigate: (payload: any) => void // replace with correct type\n}\n\nconst FileUploadPreview: React.FC<FileUploadPreviewProps> = ({\n  files,\n  index,\n  activityId,\n  projectName,\n  onFilePreviewClose,\n  onNavigate,\n}) => {\n  const {\n    canNavigateDown,\n    canNavigateUp,\n    canNavigateLeft,\n    canNavigateRight,\n    getByIndexActivity,\n    navigateUp,\n    navigateDown,\n    navigateLeft,\n    navigateRight,\n  } = useAttachmentNavigation({ files, index, activityId, onNavigate })\n  const file = { ...getByIndexActivity(activityId, index), projectName }\n  const { id, mime, extension, name } = file\n\n  // when dialog open, focus on the dialog\n  // we do this so that the user can navigate with the keyboard (esc works)\n  const dialogRef = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (id && projectName) {\n      dialogRef.current?.focus()\n    }\n  }, [id, projectName])\n\n  const handleClose = () => {\n    onFilePreviewClose()\n  }\n\n  if (!id || !projectName) return null\n\n  // get the correct mime type component based on mimeTypes match\n  const previewable = Object.values(expandableMimeTypes).find(({ mimeTypes }) =>\n    mimeTypes.some((type) => (mime || extension)?.includes(type)),\n  )\n\n  // @ts-ignore\n  const { component: MimeComponent, id: typeId, callback, fullPreviews } = previewable || {}\n\n  // if there is a callback, run it and return null\n  // mainly for pdfs\n  if (callback) {\n    callback(file)\n    return null\n  }\n\n  const handleNavigateToPrevActivity = () => canNavigateUp() && navigateUp()\n  const handleNavigateToNextActivity = () => canNavigateDown() && navigateDown()\n  const handleNavigateToPrevious = () => canNavigateLeft() && navigateLeft()\n  const handleNavigateToNext = () => canNavigateRight() && navigateRight()\n\n  const isImage = typeId === 'image'\n  const zIndex = 50\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.code === 'ArrowUp') {\n      handleNavigateToPrevActivity()\n    }\n    if (e.code === 'ArrowDown') {\n      handleNavigateToNextActivity()\n    }\n    if (e.code === 'ArrowRight') {\n      handleNavigateToNext()\n    }\n    if (e.code === 'ArrowLeft') {\n      handleNavigateToPrevious()\n    }\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      handleClose()\n    }\n  }\n\n  if (!MimeComponent) {\n    return null\n  }\n\n  return (\n    <Styled.DialogWrapper\n      onKeyDown={handleKeyDown}\n      size=\"full\"\n      isOpen={!!(id && projectName)}\n      onClose={handleClose}\n      hideCancelButton={isImage}\n      ref={dialogRef}\n      className={clsx({ isImage }, 'block-shortcuts')}\n      header={isImage ? null : name}\n    >\n      <div style={{ position: 'absolute', inset: 0, zIndex: zIndex }} onClick={handleClose}></div>\n\n      <Icon\n        style={{ zIndex: zIndex + 1 }}\n        icon=\"chevron_left\"\n        className={clsx('navIcon', 'left', { disabled: !canNavigateLeft() })}\n        onClick={handleNavigateToPrevious}\n      />\n\n      <Styled.ScrollableContent\n        style={{ zIndex: zIndex + 1 }}\n        className={clsx({ scrollable: !isImage })}\n      >\n        <MimeComponent file={file} fullPreviews={fullPreviews} />\n      </Styled.ScrollableContent>\n\n      <Icon\n        style={{ zIndex: zIndex + 1 }}\n        icon=\"chevron_right\"\n        className={clsx('navIcon', 'right', { disabled: !canNavigateRight() })}\n        onClick={handleNavigateToNext}\n      />\n    </Styled.DialogWrapper>\n  )\n}\n\nexport default FileUploadPreview\n"],"names":["expandableMimeTypes","ImageMime","TextMime","file","getFileURL","isFilePreviewable","mime","ext","mimeTypes","type","FileUploadPreview","files","index","activityId","projectName","onFilePreviewClose","onNavigate","canNavigateDown","canNavigateUp","canNavigateLeft","canNavigateRight","getByIndexActivity","navigateUp","navigateDown","navigateLeft","navigateRight","useAttachmentNavigation","id","extension","name","dialogRef","useRef","useEffect","handleClose","previewable","MimeComponent","typeId","callback","fullPreviews","handleNavigateToPrevActivity","handleNavigateToNextActivity","handleNavigateToPrevious","handleNavigateToNext","isImage","zIndex","handleKeyDown","jsxs","Styled.DialogWrapper","clsx","jsx","Icon","Styled.ScrollableContent"],"mappings":";;;;;;;;;AAkBO,MAAMA,IAA6D;AAAA,EACxE,OAAO;AAAA,IACL,WAAWC;AAAA,IACX,WAAW,CAAC,QAAQ;AAAA,IACpB,cAAc,CAAC,OAAO,OAAO,QAAQ,OAAO,OAAO,MAAM;AAAA,IACzD,IAAI;AAAA,EAAA;AAAA,EAEN,MAAM;AAAA,IACJ,WAAWC;AAAA,IACX,WAAW,CAAC,SAAS,oBAAoB,QAAQ,KAAK;AAAA,IACtD,IAAI;AAAA,EAAA;AAAA,EAEN,KAAK;AAAA,IACH,WAAW;AAAA,IACX,WAAW,CAAC,KAAK;AAAA,IACjB,IAAI;AAAA,IACJ,UAAU,CAACC,MAAc,OAAO,KAAKC,EAAWD,EAAK,IAAIA,EAAK,WAAW,GAAG,QAAQ;AAAA,EAAA;AAExF,GAEaE,KAAoB,CAACC,IAAO,IAAIC,IAAM,OACjD,OAAO,OAAOP,CAAmB,EAAE;AAAA,EAAK,CAAC,EAAE,WAAAQ,IAAY,SACrDA,EAAU,KAAK,CAACC,OAAUH,KAAQC,IAAM,SAASE,CAAI,CAAC;AACxD,GAWIC,KAAsD,CAAC;AAAA,EAC3D,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AACF,MAAM;AACJ,QAAM;AAAA,IACJ,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACEC,EAAwB,EAAE,OAAAf,GAAO,OAAAC,GAAO,YAAAC,GAAY,YAAAG,GAAY,GAC9Db,IAAO,EAAE,GAAGkB,EAAmBR,GAAYD,CAAK,GAAG,aAAAE,EAAA,GACnD,EAAE,IAAAa,GAAI,MAAArB,GAAM,WAAAsB,GAAW,MAAAC,MAAS1B,GAIhC2B,IAAYC,EAAuB,IAAI;AAC7C,EAAAC,EAAU,MAAM;AACd,IAAIL,KAAMb,KACRgB,EAAU,SAAS,MAAA;AAAA,EAEvB,GAAG,CAACH,GAAIb,CAAW,CAAC;AAEpB,QAAMmB,IAAc,MAAM;AACxB,IAAAlB,EAAA;AAAA,EACF;AAEA,MAAI,CAACY,KAAM,CAACb,EAAa,QAAO;AAGhC,QAAMoB,IAAc,OAAO,OAAOlC,CAAmB,EAAE;AAAA,IAAK,CAAC,EAAE,WAAAQ,EAAA,MAC7DA,EAAU,KAAK,CAACC,OAAUH,KAAQsB,IAAY,SAASnB,CAAI,CAAC;AAAA,EAAA,GAIxD,EAAE,WAAW0B,GAAe,IAAIC,GAAQ,UAAAC,GAAU,cAAAC,MAAiBJ,KAAe,CAAA;AAIxF,MAAIG;AACF,WAAAA,EAASlC,CAAI,GACN;AAGT,QAAMoC,IAA+B,MAAMrB,EAAA,KAAmBI,EAAA,GACxDkB,IAA+B,MAAMvB,EAAA,KAAqBM,EAAA,GAC1DkB,IAA2B,MAAMtB,EAAA,KAAqBK,EAAA,GACtDkB,IAAuB,MAAMtB,EAAA,KAAsBK,EAAA,GAEnDkB,IAAUP,MAAW,SACrBQ,IAAS,IAETC,IAAgB,CAAC,MAA2B;AAChD,IAAI,EAAE,SAAS,aACbN,EAAA,GAEE,EAAE,SAAS,eACbC,EAAA,GAEE,EAAE,SAAS,gBACbE,EAAA,GAEE,EAAE,SAAS,eACbD,EAAA,GAEE,EAAE,QAAQ,aACZ,EAAE,eAAA,GACFR,EAAA;AAAA,EAEJ;AAEA,SAAKE,IAKHW,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAK;AAAA,MACL,QAAQ,CAAC,EAAElB,KAAMb;AAAA,MACjB,SAASmB;AAAA,MACT,kBAAkBU;AAAA,MAClB,KAAKb;AAAA,MACL,WAAWkB,EAAK,EAAE,SAAAL,EAAA,GAAW,iBAAiB;AAAA,MAC9C,QAAQA,IAAU,OAAOd;AAAA,MAEzB,UAAA;AAAA,QAAAoB,gBAAAA,EAAAA,IAAC,OAAA,EAAI,OAAO,EAAE,UAAU,YAAY,OAAO,GAAG,QAAAL,EAAA,GAAkB,SAASX,EAAA,CAAa;AAAA,QAEtFgB,gBAAAA,EAAAA;AAAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,QAAQN,IAAS,EAAA;AAAA,YAC1B,MAAK;AAAA,YACL,WAAWI,EAAK,WAAW,QAAQ,EAAE,UAAU,CAAC7B,EAAA,GAAmB;AAAA,YACnE,SAASsB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGXQ,gBAAAA,EAAAA;AAAAA,UAACE;AAAAA,UAAA;AAAA,YACC,OAAO,EAAE,QAAQP,IAAS,EAAA;AAAA,YAC1B,WAAWI,EAAK,EAAE,YAAY,CAACL,GAAS;AAAA,YAExC,UAAAM,gBAAAA,EAAAA,IAACd,GAAA,EAAc,MAAAhC,GAAY,cAAAmC,EAAA,CAA4B;AAAA,UAAA;AAAA,QAAA;AAAA,QAGzDW,gBAAAA,EAAAA;AAAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,QAAQN,IAAS,EAAA;AAAA,YAC1B,MAAK;AAAA,YACL,WAAWI,EAAK,WAAW,SAAS,EAAE,UAAU,CAAC5B,EAAA,GAAoB;AAAA,YACrE,SAASsB;AAAA,UAAA;AAAA,QAAA;AAAA,MACX;AAAA,IAAA;AAAA,EAAA,IAnCK;AAsCX;"}
+{"version":3,"file":"FileUploadPreview.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { getFileURL } from './fileUtils'\nimport ImageMime from './Mimes/ImageMime'\nimport TextMime from './Mimes/TextMime'\nimport VideoMime from './Mimes/VideoMime'\nimport clsx from 'clsx'\nimport { Icon } from '@ynput/ayon-react-components'\nimport useAttachmentNavigation from './hooks/useAttachmentNavigation'\nimport * as Styled from './FileUploadPreview.styled'\n\nexport type MimeTypeDefinition = {\n  component: React.FC<any> | null\n  mimeTypes: string[]\n  fullPreviews?: string[]\n  id: string\n  callback?: (file: any) => void\n}\n\n// define expandable mime types and their components\nexport const expandableMimeTypes: { [key: string]: MimeTypeDefinition } = {\n  image: {\n    component: ImageMime,\n    mimeTypes: ['image/'],\n    fullPreviews: ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'],\n    id: 'image',\n  },\n  video: {\n    component: VideoMime,\n    mimeTypes: ['video/'],\n    id: 'video',\n  },\n  text: {\n    component: TextMime,\n    mimeTypes: ['text/', 'application/json', 'scss', 'jsx'],\n    id: 'text',\n  },\n  pdf: {\n    component: null,\n    mimeTypes: ['pdf'],\n    id: 'pdf',\n    callback: (file: any) => window.open(getFileURL(file.id, file.projectName), '_blank'),\n  },\n}\n\nexport const isFilePreviewable = (mime = '', ext = '') =>\n  Object.values(expandableMimeTypes).some(({ mimeTypes = [] }) =>\n    mimeTypes.some((type) => (mime || ext)?.includes(type)),\n  )\n\ninterface FileUploadPreviewProps {\n  files: any[] // replace with correct type\n  index: number\n  activityId: string\n  projectName: string\n  onFilePreviewClose: () => void\n  onNavigate: (payload: any) => void // replace with correct type\n}\n\nconst FileUploadPreview: React.FC<FileUploadPreviewProps> = ({\n  files,\n  index,\n  activityId,\n  projectName,\n  onFilePreviewClose,\n  onNavigate,\n}) => {\n  const {\n    canNavigateDown,\n    canNavigateUp,\n    canNavigateLeft,\n    canNavigateRight,\n    getByIndexActivity,\n    navigateUp,\n    navigateDown,\n    navigateLeft,\n    navigateRight,\n  } = useAttachmentNavigation({ files, index, activityId, onNavigate })\n  const file = { ...getByIndexActivity(activityId, index), projectName }\n  const { id, mime, extension, name } = file\n\n  // when dialog open, focus on the dialog\n  // we do this so that the user can navigate with the keyboard (esc works)\n  const dialogRef = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (id && projectName) {\n      dialogRef.current?.focus()\n    }\n  }, [id, projectName])\n\n  const handleClose = () => {\n    onFilePreviewClose()\n  }\n\n  // get the correct mime type component based on mimeTypes match\n  const previewable = Object.values(expandableMimeTypes).find(({ mimeTypes }) =>\n    mimeTypes.some((type) => (mime || extension)?.includes(type)),\n  )\n\n  // @ts-ignore\n  const { component: MimeComponent, id: typeId, callback, fullPreviews } = previewable || {}\n\n  // ayon-player binds its own document keydown listener for frame stepping, so claim the arrow\n  // keys in the capture phase — otherwise each press would navigate and seek at the same time\n  useEffect(() => {\n    // callback mimes (pdf) never render the dialog, so a global listener would outlive it\n    if (!id || !projectName || !MimeComponent || callback) return\n\n    const navigation: { [key: string]: [() => boolean, () => void] } = {\n      ArrowUp: [canNavigateUp, navigateUp],\n      ArrowDown: [canNavigateDown, navigateDown],\n      ArrowLeft: [canNavigateLeft, navigateLeft],\n      ArrowRight: [canNavigateRight, navigateRight],\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault()\n        e.stopPropagation()\n        handleClose()\n        return\n      }\n\n      const move = navigation[e.code]\n      if (!move) return\n\n      if (e.target instanceof HTMLElement) {\n        const { tagName, isContentEditable } = e.target\n        if (tagName === 'INPUT' || tagName === 'TEXTAREA' || isContentEditable) return\n      }\n\n      e.preventDefault()\n      e.stopPropagation()\n      const [canNavigate, navigate] = move\n      if (canNavigate()) navigate()\n    }\n\n    document.addEventListener('keydown', handleKeyDown, true)\n    return () => document.removeEventListener('keydown', handleKeyDown, true)\n  }, [id, projectName, files, index, activityId, MimeComponent, callback])\n\n  if (!id || !projectName) return null\n\n  // if there is a callback, run it and return null\n  // mainly for pdfs\n  if (callback) {\n    callback(file)\n    return null\n  }\n\n  const handleNavigateToPrevious = () => canNavigateLeft() && navigateLeft()\n  const handleNavigateToNext = () => canNavigateRight() && navigateRight()\n\n  const isImage = typeId === 'image'\n  const isVideo = typeId === 'video'\n  const zIndex = 50\n\n  if (!MimeComponent) {\n    return null\n  }\n\n  return (\n    <Styled.DialogWrapper\n      size=\"full\"\n      isOpen={!!(id && projectName)}\n      onClose={handleClose}\n      hideCancelButton={isImage}\n      ref={dialogRef}\n      className={clsx({ isImage }, 'block-shortcuts')}\n      header={isImage ? null : name}\n    >\n      <div style={{ position: 'absolute', inset: 0, zIndex: zIndex }} onClick={handleClose}></div>\n\n      <Icon\n        style={{ zIndex: zIndex + 1 }}\n        icon=\"chevron_left\"\n        className={clsx('navIcon', 'left', { disabled: !canNavigateLeft() })}\n        onClick={handleNavigateToPrevious}\n      />\n\n      <Styled.ScrollableContent\n        style={{ zIndex: zIndex + 1 }}\n        className={clsx({ scrollable: !isImage && !isVideo, fill: isVideo })}\n      >\n        <MimeComponent file={file} fullPreviews={fullPreviews} />\n      </Styled.ScrollableContent>\n\n      <Icon\n        style={{ zIndex: zIndex + 1 }}\n        icon=\"chevron_right\"\n        className={clsx('navIcon', 'right', { disabled: !canNavigateRight() })}\n        onClick={handleNavigateToNext}\n      />\n    </Styled.DialogWrapper>\n  )\n}\n\nexport default FileUploadPreview\n"],"names":["expandableMimeTypes","ImageMime","VideoMime","TextMime","file","getFileURL","isFilePreviewable","mime","ext","mimeTypes","type","FileUploadPreview","files","index","activityId","projectName","onFilePreviewClose","onNavigate","canNavigateDown","canNavigateUp","canNavigateLeft","canNavigateRight","getByIndexActivity","navigateUp","navigateDown","navigateLeft","navigateRight","useAttachmentNavigation","id","extension","name","dialogRef","useRef","useEffect","handleClose","previewable","MimeComponent","typeId","callback","fullPreviews","navigation","handleKeyDown","e","move","tagName","isContentEditable","canNavigate","navigate","handleNavigateToPrevious","handleNavigateToNext","isImage","isVideo","zIndex","jsxs","Styled.DialogWrapper","clsx","jsx","Icon","Styled.ScrollableContent"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@ynput/ayon-react-components"),o=require("styled-components"),t=o(e.Dialog)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@ynput/ayon-react-components"),e=require("styled-components"),t=e(o.Dialog)`
   min-height: 90vh;
   max-height: 90vh;
   min-width: min(90vw, 100%);
@@ -83,7 +83,7 @@
   &:focus-visible {
     outline: none;
   }
-`,n=o.img`
+`,r=e.img`
   height: 100%;
   width: 100%;
 
@@ -93,11 +93,34 @@
   max-width: 90vw;
   min-width: 300px;
   background-color: var(--md-sys-color-surface-container-lowest);
-`,r=o.div`
+`,n=e.div`
   &.scrollable {
     position: absolute;
     inset: 56px;
     overflow: auto;
   }
-`;exports.DialogWrapper=t;exports.Image=n;exports.ScrollableContent=r;
+
+  &.fill {
+    position: absolute;
+    inset: 56px 0 0 0;
+    display: flex;
+  }
+`,i=e.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+
+  /* EmptyPlaceholder defaults to top: 30%, center it in the lightbox */
+  .empty-placeholder {
+    top: 50%;
+  }
+
+  /* the player's root splitter has no intrinsic size */
+  > * {
+    flex: 1;
+    min-width: 0;
+  }
+`;exports.DialogWrapper=t;exports.Image=r;exports.PlayerWrapper=i;exports.ScrollableContent=n;
 //# sourceMappingURL=FileUploadPreview.styled.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadPreview.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.ts"],"sourcesContent":["import { Dialog } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const DialogWrapper = styled(Dialog)`\n  min-height: 90vh;\n  max-height: 90vh;\n  min-width: min(90vw, 100%);\n  max-width: 1000px;\n\n  .body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-content: center;\n    padding-top: 0;\n    overflow: hidden;\n  }\n  .navIcon {\n    position: absolute;\n    top: 50%;\n    user-select: none;\n\n    &.left {\n      left: 0;\n      translate: -100% -50%;\n    }\n    &.right {\n      right: 0;\n      translate: 100% -50%;\n    }\n    align-content: center;\n    font-size: 60px;\n    &:hover {\n      cursor: pointer;\n      color: var(--md-sys-color-primary);\n    }\n    &.disabled {\n      color: var(--md-sys-color-outline-variant);\n      &:hover {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  /* custom image styles */\n  &.isImage {\n    /* remove min/max height */\n\n    background-color: unset;\n    border-radius: 0;\n\n    width: 0;\n\n    .cancelButton {\n      top: 1px;\n      right: 1px;\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n\n    /* Backdrop property affects inactive area around modal */\n    &::backdrop {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n\n    .header {\n      display: none;\n    }\n\n    .body {\n      padding: 0;\n      align-items: stretch;\n      user-select: none;\n      overflow: hidden;\n    }\n\n    footer {\n      display: none;\n    }\n\n    /* remove focus outline */\n    &:focus {\n      outline: none;\n    }\n  }\n  /* remove focus outline */\n  &:focus-visible {\n    outline: none;\n  }\n`\n\nexport const Image = styled.img`\n  height: 100%;\n  width: 100%;\n\n  width: max-content;\n  height: max-content;\n  max-height: 80vh;\n  max-width: 90vw;\n  min-width: 300px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n`\n\nexport const ScrollableContent = styled.div`\n  &.scrollable {\n    position: absolute;\n    inset: 56px;\n    overflow: auto;\n  }\n`\n"],"names":["DialogWrapper","styled","Dialog","Image","ScrollableContent"],"mappings":"+JAGaA,EAAgBC,EAAOC,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuF7BC,EAAQF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYfG,EAAoBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"FileUploadPreview.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.ts"],"sourcesContent":["import { Dialog } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const DialogWrapper = styled(Dialog)`\n  min-height: 90vh;\n  max-height: 90vh;\n  min-width: min(90vw, 100%);\n  max-width: 1000px;\n\n  .body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-content: center;\n    padding-top: 0;\n    overflow: hidden;\n  }\n  .navIcon {\n    position: absolute;\n    top: 50%;\n    user-select: none;\n\n    &.left {\n      left: 0;\n      translate: -100% -50%;\n    }\n    &.right {\n      right: 0;\n      translate: 100% -50%;\n    }\n    align-content: center;\n    font-size: 60px;\n    &:hover {\n      cursor: pointer;\n      color: var(--md-sys-color-primary);\n    }\n    &.disabled {\n      color: var(--md-sys-color-outline-variant);\n      &:hover {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  /* custom image styles */\n  &.isImage {\n    /* remove min/max height */\n\n    background-color: unset;\n    border-radius: 0;\n\n    width: 0;\n\n    .cancelButton {\n      top: 1px;\n      right: 1px;\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n\n    /* Backdrop property affects inactive area around modal */\n    &::backdrop {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n\n    .header {\n      display: none;\n    }\n\n    .body {\n      padding: 0;\n      align-items: stretch;\n      user-select: none;\n      overflow: hidden;\n    }\n\n    footer {\n      display: none;\n    }\n\n    /* remove focus outline */\n    &:focus {\n      outline: none;\n    }\n  }\n  /* remove focus outline */\n  &:focus-visible {\n    outline: none;\n  }\n`\n\nexport const Image = styled.img`\n  height: 100%;\n  width: 100%;\n\n  width: max-content;\n  height: max-content;\n  max-height: 80vh;\n  max-width: 90vw;\n  min-width: 300px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n`\n\nexport const ScrollableContent = styled.div`\n  &.scrollable {\n    position: absolute;\n    inset: 56px;\n    overflow: auto;\n  }\n\n  &.fill {\n    position: absolute;\n    inset: 56px 0 0 0;\n    display: flex;\n  }\n`\n\nexport const PlayerWrapper = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n\n  /* EmptyPlaceholder defaults to top: 30%, center it in the lightbox */\n  .empty-placeholder {\n    top: 50%;\n  }\n\n  /* the player's root splitter has no intrinsic size */\n  > * {\n    flex: 1;\n    min-width: 0;\n  }\n`\n"],"names":["DialogWrapper","styled","Dialog","Image","ScrollableContent","PlayerWrapper"],"mappings":"+JAGaA,EAAgBC,EAAOC,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuF7BC,EAAQF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYfG,EAAoBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAc3BI,EAAgBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

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

@@ -1,6 +1,6 @@
 import { Dialog as e } from "@ynput/ayon-react-components";
 import o from "styled-components";
-const n = o(e)`
+const r = o(e)`
   min-height: 90vh;
   max-height: 90vh;
   min-width: min(90vw, 100%);
@@ -85,7 +85,7 @@ const n = o(e)`
   &:focus-visible {
     outline: none;
   }
-`, i = o.img`
+`, n = o.img`
   height: 100%;
   width: 100%;
 
@@ -101,10 +101,34 @@ const n = o(e)`
     inset: 56px;
     overflow: auto;
   }
+
+  &.fill {
+    position: absolute;
+    inset: 56px 0 0 0;
+    display: flex;
+  }
+`, l = o.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+
+  /* EmptyPlaceholder defaults to top: 30%, center it in the lightbox */
+  .empty-placeholder {
+    top: 50%;
+  }
+
+  /* the player's root splitter has no intrinsic size */
+  > * {
+    flex: 1;
+    min-width: 0;
+  }
 `;
 export {
-  n as DialogWrapper,
-  i as Image,
+  r as DialogWrapper,
+  n as Image,
+  l as PlayerWrapper,
   a as ScrollableContent
 };
 //# sourceMappingURL=FileUploadPreview.styled.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadPreview.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.ts"],"sourcesContent":["import { Dialog } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const DialogWrapper = styled(Dialog)`\n  min-height: 90vh;\n  max-height: 90vh;\n  min-width: min(90vw, 100%);\n  max-width: 1000px;\n\n  .body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-content: center;\n    padding-top: 0;\n    overflow: hidden;\n  }\n  .navIcon {\n    position: absolute;\n    top: 50%;\n    user-select: none;\n\n    &.left {\n      left: 0;\n      translate: -100% -50%;\n    }\n    &.right {\n      right: 0;\n      translate: 100% -50%;\n    }\n    align-content: center;\n    font-size: 60px;\n    &:hover {\n      cursor: pointer;\n      color: var(--md-sys-color-primary);\n    }\n    &.disabled {\n      color: var(--md-sys-color-outline-variant);\n      &:hover {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  /* custom image styles */\n  &.isImage {\n    /* remove min/max height */\n\n    background-color: unset;\n    border-radius: 0;\n\n    width: 0;\n\n    .cancelButton {\n      top: 1px;\n      right: 1px;\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n\n    /* Backdrop property affects inactive area around modal */\n    &::backdrop {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n\n    .header {\n      display: none;\n    }\n\n    .body {\n      padding: 0;\n      align-items: stretch;\n      user-select: none;\n      overflow: hidden;\n    }\n\n    footer {\n      display: none;\n    }\n\n    /* remove focus outline */\n    &:focus {\n      outline: none;\n    }\n  }\n  /* remove focus outline */\n  &:focus-visible {\n    outline: none;\n  }\n`\n\nexport const Image = styled.img`\n  height: 100%;\n  width: 100%;\n\n  width: max-content;\n  height: max-content;\n  max-height: 80vh;\n  max-width: 90vw;\n  min-width: 300px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n`\n\nexport const ScrollableContent = styled.div`\n  &.scrollable {\n    position: absolute;\n    inset: 56px;\n    overflow: auto;\n  }\n`\n"],"names":["DialogWrapper","styled","Dialog","Image","ScrollableContent"],"mappings":";;AAGO,MAAMA,IAAgBC,EAAOC,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuF7BC,IAAQF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYfG,IAAoBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"FileUploadPreview.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.ts"],"sourcesContent":["import { Dialog } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const DialogWrapper = styled(Dialog)`\n  min-height: 90vh;\n  max-height: 90vh;\n  min-width: min(90vw, 100%);\n  max-width: 1000px;\n\n  .body {\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-content: center;\n    padding-top: 0;\n    overflow: hidden;\n  }\n  .navIcon {\n    position: absolute;\n    top: 50%;\n    user-select: none;\n\n    &.left {\n      left: 0;\n      translate: -100% -50%;\n    }\n    &.right {\n      right: 0;\n      translate: 100% -50%;\n    }\n    align-content: center;\n    font-size: 60px;\n    &:hover {\n      cursor: pointer;\n      color: var(--md-sys-color-primary);\n    }\n    &.disabled {\n      color: var(--md-sys-color-outline-variant);\n      &:hover {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  /* custom image styles */\n  &.isImage {\n    /* remove min/max height */\n\n    background-color: unset;\n    border-radius: 0;\n\n    width: 0;\n\n    .cancelButton {\n      top: 1px;\n      right: 1px;\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n\n    /* Backdrop property affects inactive area around modal */\n    &::backdrop {\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n\n    .header {\n      display: none;\n    }\n\n    .body {\n      padding: 0;\n      align-items: stretch;\n      user-select: none;\n      overflow: hidden;\n    }\n\n    footer {\n      display: none;\n    }\n\n    /* remove focus outline */\n    &:focus {\n      outline: none;\n    }\n  }\n  /* remove focus outline */\n  &:focus-visible {\n    outline: none;\n  }\n`\n\nexport const Image = styled.img`\n  height: 100%;\n  width: 100%;\n\n  width: max-content;\n  height: max-content;\n  max-height: 80vh;\n  max-width: 90vw;\n  min-width: 300px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n`\n\nexport const ScrollableContent = styled.div`\n  &.scrollable {\n    position: absolute;\n    inset: 56px;\n    overflow: auto;\n  }\n\n  &.fill {\n    position: absolute;\n    inset: 56px 0 0 0;\n    display: flex;\n  }\n`\n\nexport const PlayerWrapper = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n\n  /* EmptyPlaceholder defaults to top: 30%, center it in the lightbox */\n  .empty-placeholder {\n    top: 50%;\n  }\n\n  /* the player's root splitter has no intrinsic size */\n  > * {\n    flex: 1;\n    min-width: 0;\n  }\n`\n"],"names":["DialogWrapper","styled","Dialog","Image","ScrollableContent","PlayerWrapper"],"mappings":";;AAGO,MAAMA,IAAgBC,EAAOC,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuF7BC,IAAQF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYfG,IAAoBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAc3BI,IAAgBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}