@hh.ru/magritte-ui-media-viewer 1.4.3 → 1.4.5

package/index.css

@@ -15,7 +15,7 @@
 .magritte-night-theme{
   --magritte-color-component-skeleton-background-content-v26-0-2:#5e5e5e3d;
 }
-.magritte-media-viewer___KnrXP_1-4-3{
+.magritte-media-viewer___KnrXP_1-4-5{
   position:fixed;
   inset:0;
   display:grid;
@@ -28,7 +28,7 @@
   --media-viewer-background-opacity:calc(1 - var(--magritte-ui-media-viewer-close-progress));
   --magritte-ui-nav-bar-background-color-override:var(--magritte-color-background-overlay-toolbar-v26-0-2);
 }
-.magritte-media-viewer___KnrXP_1-4-3::before{
+.magritte-media-viewer___KnrXP_1-4-5::before{
   content:'';
   position:absolute;
   inset:0;
@@ -36,13 +36,13 @@
   opacity:var(--media-viewer-background-opacity);
   pointer-events:none;
 }
-.magritte-gallery-placeholder___rUoGL_1-4-3{
+.magritte-gallery-placeholder___rUoGL_1-4-5{
   display:flex;
   align-items:stretch;
   grid-area:gallery;
   min-height:0;
 }
-.magritte-media-viewer-gallery___P0SnN_1-4-3{
+.magritte-media-viewer-gallery___P0SnN_1-4-5{
   display:grid;
   flex-grow:1;
   contain:layout size;
@@ -51,16 +51,16 @@
   inset:0;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-media-viewer-gallery___P0SnN_1-4-3{
+  body.magritte-old-layout .magritte-media-viewer-gallery___P0SnN_1-4-5{
     position:relative;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-4-3{
+  body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-4-5{
     position:relative;
   }
 }
-.magritte-gallery-item___Js0Z5_1-4-3{
+.magritte-gallery-item___Js0Z5_1-4-5{
   position:relative;
   grid-area:1 / 1;
   contain:size;
@@ -69,7 +69,7 @@
   overflow-y:visible;
   opacity:calc(1 - var(--magritte-ui-media-viewer-image-close-progress, 0));
 }
-.magritte-gallery-item-transform-container___N8-sA_1-4-3{
+.magritte-gallery-item-transform-container___N8-sA_1-4-5{
   position:absolute;
   top:50%;
   left:50%;
@@ -77,37 +77,37 @@
   will-change:transform;
   touch-action:none;
 }
-.magritte-preview-counter___uP2Hc_1-4-3{
+.magritte-preview-counter___uP2Hc_1-4-5{
   min-width:0;
   text-align:center;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-4-3{
+  body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-4-5{
     text-align:left;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-4-3{
+  body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-4-5{
     text-align:left;
   }
 }
-.magritte-preview-counter___uP2Hc_1-4-3.magritte-with-description___-w7ld_1-4-3{
+.magritte-preview-counter___uP2Hc_1-4-5.magritte-with-description___-w7ld_1-4-5{
   cursor:pointer;
 }
-.magritte-counter-number___gUpMp_1-4-3{
+.magritte-counter-number___gUpMp_1-4-5{
   display:block;
   transform:translateY(calc(18px * 0.5));
   transition:transform var(--magritte-semantic-animation-time-m-duration-v26-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v26-0-2);
 }
-.magritte-with-description___-w7ld_1-4-3 .magritte-counter-number___gUpMp_1-4-3{
+.magritte-with-description___-w7ld_1-4-5 .magritte-counter-number___gUpMp_1-4-5{
   transform:translateY(0);
 }
-.magritte-no-description-placeholder___qc6h2_1-4-3{
+.magritte-no-description-placeholder___qc6h2_1-4-5{
   display:block;
   height:18px;
   padding:0;
 }
-.magritte-preview-zoom-control___026jA_1-4-3{
+.magritte-preview-zoom-control___026jA_1-4-5{
   display:flex;
   flex-direction:row;
   gap:2px;
@@ -115,7 +115,7 @@
   justify-self:end;
   grid-column:3;
 }
-.magritte-preview-container___nwjNY_1-4-3{
+.magritte-preview-container___nwjNY_1-4-5{
   display:grid;
   grid-template-columns:1fr auto 1fr;
   gap:16px;
@@ -126,16 +126,16 @@
   z-index:10;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-container___nwjNY_1-4-3{
+  body.magritte-old-layout .magritte-preview-container___nwjNY_1-4-5{
     padding:16px 24px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-4-3{
+  body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-4-5{
     padding:16px 24px;
   }
 }
-.magritte-preview___0Ge4C_1-4-3{
+.magritte-preview___0Ge4C_1-4-5{
   display:flex;
   flex-direction:row;
   touch-action:none;
@@ -143,18 +143,18 @@
   min-width:0;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview___0Ge4C_1-4-3{
+  body.magritte-old-layout .magritte-preview___0Ge4C_1-4-5{
     max-width:calc(((40 + 8) * (var(--media-viewer-max-visible-items) - 1) + 80) * 1px);
     overflow:hidden;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview___0Ge4C_1-4-3{
+  body:not(.magritte-old-layout) .magritte-preview___0Ge4C_1-4-5{
     max-width:calc(((40 + 8) * (var(--media-viewer-max-visible-items) - 1) + 80) * 1px);
     overflow:hidden;
   }
 }
-.magritte-preview-list___SAXLZ_1-4-3{
+.magritte-preview-list___SAXLZ_1-4-5{
   margin-left:50%;
   contain:layout paint;
   display:flex;
@@ -164,18 +164,18 @@
   flex:0 0 auto;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-list___SAXLZ_1-4-3{
+  body.magritte-old-layout .magritte-preview-list___SAXLZ_1-4-5{
     margin:0;
     gap:8px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-4-3{
+  body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-4-5{
     margin:0;
     gap:8px;
   }
 }
-.magritte-preview-item___gz5f2_1-4-3{
+.magritte-preview-item___gz5f2_1-4-5{
   contain:layout paint size;
   position:relative;
   flex-shrink:0;
@@ -189,33 +189,33 @@
   background-color:var(--magritte-color-component-skeleton-background-content-v26-0-2);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-item___gz5f2_1-4-3{
+  body.magritte-old-layout .magritte-preview-item___gz5f2_1-4-5{
     height:80px;
     border-radius:8px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-4-3{
+  body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-4-5{
     height:80px;
     border-radius:8px;
   }
 }
-.magritte-preview-item-container___JDVsk_1-4-3{
+.magritte-preview-item-container___JDVsk_1-4-5{
   contain:layout paint size;
   overflow:hidden;
   scale:1;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-4-3{
+  body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-4-5{
     scale:1.66666667;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-4-3{
+  body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-4-5{
     scale:1.66666667;
   }
 }
-.magritte-preview-item-container___JDVsk_1-4-3 *{
+.magritte-preview-item-container___JDVsk_1-4-5 *{
   touch-action:none;
   position:absolute;
   top:0;
@@ -225,7 +225,7 @@
   height:100%;
   user-select:none;
 }
-.magritte-media-viewer-toolbar___2C8nr_1-4-3{
+.magritte-media-viewer-toolbar___2C8nr_1-4-5{
   background:var(--magritte-color-background-overlay-toolbar-v26-0-2);
   padding:0 8px;
   display:grid;
@@ -236,30 +236,30 @@
   grid-area:toolbar;
   z-index:10;
 }
-.magritte-media-viewer-toolbar___2C8nr_1-4-3.magritte-no-description___NebrT_1-4-3{
+.magritte-media-viewer-toolbar___2C8nr_1-4-5.magritte-no-description___NebrT_1-4-5{
   display:flex;
   justify-content:space-between;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-4-3{
+  body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-4-5{
     display:none;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-4-3{
+  body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-4-5{
     display:none;
   }
 }
-.magritte-media-viewer-toolbar-left___YzkJt_1-4-3,
-.magritte-media-viewer-toolbar-right___kBER9_1-4-3{
+.magritte-media-viewer-toolbar-left___YzkJt_1-4-5,
+.magritte-media-viewer-toolbar-right___kBER9_1-4-5{
   display:flex;
   gap:4px;
 }
-.magritte-media-viewer-toolbar-right___kBER9_1-4-3{
+.magritte-media-viewer-toolbar-right___kBER9_1-4-5{
   justify-content:end;
 }
-.magritte-prev-button___WMYjR_1-4-3,
-.magritte-next-button___f8hJT_1-4-3{
+.magritte-prev-button___WMYjR_1-4-5,
+.magritte-next-button___f8hJT_1-4-5{
   cursor:pointer;
   position:absolute;
   top:0;
@@ -267,40 +267,40 @@
   width:48px;
   opacity:var(--media-viewer-background-opacity);
 }
-.magritte-prev-button___WMYjR_1-4-3:active,
-.magritte-next-button___f8hJT_1-4-3:active{
+.magritte-prev-button___WMYjR_1-4-5:active,
+.magritte-next-button___f8hJT_1-4-5:active{
   background:linear-gradient(90deg, var(--magritte-gradient-component-media-viewer-background-fade-v26-0-2));
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-prev-button___WMYjR_1-4-3,
-  body.magritte-old-layout .magritte-next-button___f8hJT_1-4-3{
+  body.magritte-old-layout .magritte-prev-button___WMYjR_1-4-5,
+  body.magritte-old-layout .magritte-next-button___f8hJT_1-4-5{
     width:88px;
   }
-  body.magritte-old-layout .magritte-prev-button___WMYjR_1-4-3:active,
-  body.magritte-old-layout .magritte-next-button___f8hJT_1-4-3:active{
+  body.magritte-old-layout .magritte-prev-button___WMYjR_1-4-5:active,
+  body.magritte-old-layout .magritte-next-button___f8hJT_1-4-5:active{
     background:none;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-4-3,
-  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-4-3{
+  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-4-5,
+  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-4-5{
     width:88px;
   }
-  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-4-3:active,
-  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-4-3:active{
+  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-4-5:active,
+  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-4-5:active{
     background:none;
   }
 }
-.magritte-prev-button___WMYjR_1-4-3{
+.magritte-prev-button___WMYjR_1-4-5{
   left:0;
 }
-.magritte-prev-button___WMYjR_1-4-3:active{
+.magritte-prev-button___WMYjR_1-4-5:active{
   background:linear-gradient(270deg, var(--magritte-gradient-component-media-viewer-background-fade-v26-0-2));
 }
-.magritte-next-button___f8hJT_1-4-3{
+.magritte-next-button___f8hJT_1-4-5{
   right:0;
 }
-.magritte-slide-button___sY8LB_1-4-3{
+.magritte-slide-button___sY8LB_1-4-5{
   display:flex;
   background:none;
   padding:0;
@@ -310,7 +310,7 @@
   position:absolute;
   inset:0;
 }
-.magritte-preview-placeholder___yuhW1_1-4-3{
+.magritte-preview-placeholder___yuhW1_1-4-5{
   --magritte-media-viewer-preview-width:24px;
   --magritte-media-viewer-preview-gap:2px;
   flex:0 0 auto;
@@ -319,24 +319,24 @@
   flex-grow:0;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-placeholder___yuhW1_1-4-3{
+  body.magritte-old-layout .magritte-preview-placeholder___yuhW1_1-4-5{
     --magritte-media-viewer-preview-width:40px;
     --magritte-media-viewer-preview-gap:8px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-placeholder___yuhW1_1-4-3{
+  body:not(.magritte-old-layout) .magritte-preview-placeholder___yuhW1_1-4-5{
     --magritte-media-viewer-preview-width:40px;
     --magritte-media-viewer-preview-gap:8px;
   }
 }
-.magritte-gallery-item-loader___70TDe_1-4-3{
+.magritte-gallery-item-loader___70TDe_1-4-5{
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
 }
-.magritte-gallery-item-error-container___Z-HyZ_1-4-3{
+.magritte-gallery-item-error-container___Z-HyZ_1-4-5{
   display:flex;
   flex-direction:column;
   align-items:center;
@@ -350,10 +350,10 @@
   width:100%;
   box-sizing:border-box;
 }
-.magritte-description-bottom-sheet-content___swnEV_1-4-3{
+.magritte-description-bottom-sheet-content___swnEV_1-4-5{
   padding:8px 0;
 }
-.magritte-header___egZXt_1-4-3{
+.magritte-header___egZXt_1-4-5{
   grid-area:header;
   z-index:2;
   opacity:var(--media-viewer-toolbars-opacity);
@@ -361,7 +361,7 @@
   --magritte-ui-nav-bar-title-color-override:var(--magritte-color-text-constant-v26-0-2);
   --magritte-ui-nav-bar-subtitle-color-override:var(--magritte-color-text-constant-secondary-v26-0-2);
 }
-.magritte-video-indicator-slot___FX0nD_1-4-3{
+.magritte-video-indicator-slot___FX0nD_1-4-5{
   position:relative;
   grid-area:header;
   z-index:1;
@@ -369,17 +369,17 @@
   transform:translateY(calc(var(--magritte-ui-media-viewer-hide-tools-progress) * -100%));
   pointer-events:none;
 }
-.magritte-video-indicator-slot-content___kir3R_1-4-3{
+.magritte-video-indicator-slot-content___kir3R_1-4-5{
   position:absolute;
   top:100%;
   right:0;
   left:0;
 }
-.magritte-video-item-fill___SKpC3_1-4-3{
+.magritte-video-item-fill___SKpC3_1-4-5{
   position:absolute;
   inset:0;
 }
-.magritte-video-item-controls___oe99H_1-4-3{
+.magritte-video-item-controls___oe99H_1-4-5{
   position:absolute;
   right:0;
   bottom:0;
@@ -388,25 +388,25 @@
   opacity:var(--media-viewer-background-opacity);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-video-item-controls___oe99H_1-4-3.magritte-video-item-controls-with-arrows___d1JxC_1-4-3{
+  body.magritte-old-layout .magritte-video-item-controls___oe99H_1-4-5.magritte-video-item-controls-with-arrows___d1JxC_1-4-5{
     padding:0 88px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-video-item-controls___oe99H_1-4-3.magritte-video-item-controls-with-arrows___d1JxC_1-4-3{
+  body:not(.magritte-old-layout) .magritte-video-item-controls___oe99H_1-4-5.magritte-video-item-controls-with-arrows___d1JxC_1-4-5{
     padding:0 88px;
   }
 }
-.magritte-footer___rOH-M_1-4-3{
+.magritte-footer___rOH-M_1-4-5{
   grid-area:footer;
   z-index:2;
   opacity:var(--media-viewer-toolbars-opacity);
   transform:translateY(calc(var(--magritte-ui-media-viewer-hide-tools-progress) * 100%));
 }
-.magritte-footer-video-controls___CYJnk_1-4-3{
+.magritte-footer-video-controls___CYJnk_1-4-5{
   background:var(--magritte-color-background-overlay-toolbar-v26-0-2);
 }
-.magritte-description___dYc-E_1-4-3{
+.magritte-description___dYc-E_1-4-5{
   display:inline-block;
   max-width:100%;
 }

package/index.js

@@ -18,7 +18,7 @@ import './internal/utils.js';
 import './internal/hooks/useTapToToggleTools.js';
 import './internal/hooks/useVirtualization.js';
 import './public/Footer.js';
-import './media-viewer-OWOdMZcE.js';
+import './media-viewer-CK6Xlh-B.js';
 import './public/Gallery.js';
 import '@hh.ru/magritte-common-resize';
 import '@hh.ru/magritte-ui-icon/icon';

package/internal/Counter.js

@@ -8,7 +8,7 @@ import { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
 import { useMediaViewerContext } from './context.js';
 import { TooltipHover } from '@hh.ru/magritte-ui-tooltip';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import './ImagesLoader.js';
 import './toolsVisibility.js';
 import '@hh.ru/magritte-design-tokens/core-tokens';

package/internal/GalleryItemBody.js

@@ -8,7 +8,7 @@ import { useSlideTransformStyle, Slide } from './Slide.js';
 import { useMediaViewerContext, GalleryItemContext } from './context.js';
 import { useGalleryItemController } from './hooks/useGalleryItemController.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import '@hh.ru/magritte-design-tokens/core-tokens';
 import './animations.js';
 import './hooks/useDoubleTapScale.js';

package/internal/PreviewItem.js

@@ -10,7 +10,7 @@ import '@hh.ru/magritte-ui-icon/icon';
 import './utils.js';
 import '@hh.ru/magritte-design-tokens/core-tokens';
 import './animations.js';
-import '../media-viewer-OWOdMZcE.js';
+import '../media-viewer-CK6Xlh-B.js';
 import './ImagesLoader.js';
 import './toolsVisibility.js';
 

package/internal/PreviewItemBody.js

@@ -6,7 +6,7 @@ import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { PlayFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { useMediaViewerContext, usePreviewContext } from './context.js';
 import { useDetectDiscreteChange, clamp } from './utils.js';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import './ImagesLoader.js';
 import './toolsVisibility.js';
 import '@hh.ru/magritte-design-tokens/core-tokens';

package/internal/PreviewZoomControl.js

@@ -9,7 +9,7 @@ import { EASE_BASE } from './animations.js';
 import { useMediaViewerContext } from './context.js';
 import { useInitOnce, findNextValue, getDimensionsAfterRotation, clampOffset } from './utils.js';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import './ImagesLoader.js';
 import './toolsVisibility.js';
 

package/internal/Slide.js

@@ -11,7 +11,7 @@ import { usePan } from './hooks/usePan.js';
 import { usePinchToZoom } from './hooks/usePinchToZoom.js';
 import { useWheelToZoom } from './hooks/useWheelToZoom.js';
 import { lerp, clamp } from './utils.js';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import './ImagesLoader.js';
 import './toolsVisibility.js';
 import '@use-gesture/react';

package/internal/VideoItemBody.js

@@ -10,7 +10,7 @@ import { useGalleryItemController } from './hooks/useGalleryItemController.js';
 import { clamp } from './utils.js';
 import { Video } from '@hh.ru/magritte-ui-video';
 import { useVideoContext, useVideoState, VideoPlayerHostContext } from '@hh.ru/magritte-ui-video/internal/context';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import '@hh.ru/magritte-design-tokens/core-tokens';
 import './animations.js';
 import './hooks/useDoubleTapScale.js';
@@ -31,7 +31,8 @@ const VideoSlideContent = ({
   controller,
   setContentSize,
   slideControlsSlot,
-  showDuration
+  showDuration,
+  onErrorChange
 }) => {
   const globalContext = useMediaViewerContext();
   const { store } = useVideoContext("MediaViewer.VideoItem");
@@ -39,6 +40,7 @@ const VideoSlideContent = ({
   const fullscreen = useVideoState(store, (state) => state.fullscreen);
   const started = useVideoState(store, (state) => state.status !== "idle" && state.status !== "error");
   const playing = useVideoState(store, (state) => state.status === "playing");
+  const error = useVideoState(store, (state) => state.status === "error");
   const { isMobile } = useBreakpoint();
   const transformStyle = useSlideTransformStyle(controller);
   const [active, setActive] = useState(() => Math.round(globalContext.currentSlideIndex.get()) === index);
@@ -46,6 +48,7 @@ const VideoSlideContent = ({
   const footerSlot = useMotionValueState(globalContext.footerVideoControlsSlot);
   const indicatorSlot = useMotionValueState(globalContext.videoIndicatorSlot);
   useEffect(() => setContentSize(size), [size, setContentSize]);
+  useEffect(() => onErrorChange(error), [error, onErrorChange]);
   const inFooter = active && isMobile && !!footerSlot;
   const container = active ? inFooter && footerSlot || slideControlsSlot : null;
   useLayoutEffect(() => store.setControlsContainer(container), [store, container]);
@@ -101,7 +104,8 @@ const VideoSlideContent = ({
           style: transformed ? { ...transformStyle, width: size.width, height: size.height } : { scale: 1, rotate: 0, x: 0, y: 0 },
           children: video
         }
-      )
+      ),
+      retryButtonProps: { "data-media-viewer-interactive": true }
     };
   }, [size, fullscreen, transformStyle]);
   return /* @__PURE__ */ jsx(VideoPlayerHostContext.Provider, { value: host, children: /* @__PURE__ */ jsx(Video.Player, { showDuration, children: active && /* @__PURE__ */ jsx(Video.Controls, {}) }) });
@@ -112,6 +116,7 @@ const VideoItemBody = ({ index, description, showDuration = false, ...props }) =
   const [setContentSize, controller] = useGalleryItemController(globalContext, url, index, description, "video");
   const hasMultipleSlides = useMotionValueState(globalContext.totalSlides) > 1;
   const [controlsSlot, setControlsSlot] = useState(null);
+  const [error, setError] = useState(false);
   const stopControlsWheel = (event) => {
     const target = event.target;
     if (controlsSlot?.contains(target) || !event.currentTarget.contains(target)) {
@@ -127,7 +132,8 @@ const VideoItemBody = ({ index, description, showDuration = false, ...props }) =
     return () => controlsSlot.removeEventListener("wheel", stopWheel);
   }, [controlsSlot]);
   return (
-    // тапы и клики по видео обрабатывает плеер: вьювер не переключает по ним тулбары
+    // тапы и клики по видео обрабатывает плеер: вьювер не переключает по ним тулбары. В ошибке видео нет — тап
+    // по экрану ошибки переключает тулбары, как на обычном слайде
     /* @__PURE__ */ jsxs(
       Slide,
       {
@@ -135,7 +141,7 @@ const VideoItemBody = ({ index, description, showDuration = false, ...props }) =
         controller,
         doubleTapAndPan: false,
         onWheelCapture: stopControlsWheel,
-        "data-media-viewer-interactive": true,
+        "data-media-viewer-interactive": !error || void 0,
         children: [
           /* @__PURE__ */ jsx(Video, { ...props, children: /* @__PURE__ */ jsx(
             VideoSlideContent,
@@ -144,7 +150,8 @@ const VideoItemBody = ({ index, description, showDuration = false, ...props }) =
               index,
               controller,
               setContentSize,
-              slideControlsSlot: controlsSlot
+              slideControlsSlot: controlsSlot,
+              onErrorChange: setError
             }
           ) }),
           /* @__PURE__ */ jsx(

package/internal/VideoItemBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoItemBody.js","sources":["src/internal/VideoItemBody.tsx"],"sourcesContent":["import { type FC, type ReactElement, type WheelEvent, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport classnames from 'classnames';\nimport { motion, type MotionValue, useMotionValueEvent } from 'motion/react';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Slide, useSlideTransformStyle } from '@hh.ru/magritte-ui-media-viewer/internal/Slide';\nimport { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport {\n    type GalleryItemController,\n    useGalleryItemController,\n} from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useGalleryItemController';\nimport { clamp } from '@hh.ru/magritte-ui-media-viewer/internal/utils';\nimport { type Size } from '@hh.ru/magritte-ui-media-viewer/public/types';\nimport { Video } from '@hh.ru/magritte-ui-video';\nimport {\n    type VideoPlayerHost,\n    VideoPlayerHostContext,\n    useVideoContext,\n    useVideoState,\n} from '@hh.ru/magritte-ui-video/internal/context';\nimport { type VideoProps } from '@hh.ru/magritte-ui-video/types';\n\nimport styles from '../public/media-viewer.less';\n\n/** Внешние пропсы VideoItem — то, что передаёт пользователь */\nexport interface VideoItemProps extends Pick<\n    VideoProps,\n    'src' | 'sources' | 'preview' | 'duration' | 'attachMedia' | 'onPlay' | 'onPause' | 'onEnded' | 'onError'\n> {\n    /**\n     * Показывать бейдж длительности до начала воспроизведения\n     * @default false\n     */\n    showDuration?: boolean;\n    /** Описание элемента */\n    description?: string;\n}\n\n/** Внутренние пропсы VideoItem — включают index, инжектируемый Gallery */\nexport interface VideoItemInternalProps extends VideoItemProps {\n    index: number;\n}\n\nconst useMotionValueState = <T,>(value: MotionValue<T>): T => {\n    const [state, setState] = useState<T>(value.get());\n    useMotionValueEvent(value, 'change', (next) => setState(() => next));\n    return state;\n};\n\ninterface VideoSlideContentProps {\n    index: number;\n    controller: GalleryItemController;\n    setContentSize: (size: Size | null) => void;\n    /** Место контролов в самом слайде (desktop и mobile без футера) */\n    slideControlsSlot: HTMLElement | null;\n    showDuration: boolean;\n}\n\n/** Связь стора видео со слайдом и вьювером; живёт внутри `<Video>`, чтобы читать его стор */\nconst VideoSlideContent: FC<VideoSlideContentProps> = ({\n    index,\n    controller,\n    setContentSize,\n    slideControlsSlot,\n    showDuration,\n}) => {\n    const globalContext = useMediaViewerContext();\n    const { store } = useVideoContext('MediaViewer.VideoItem');\n    const size = useVideoState(store, (state) => state.size);\n    const fullscreen = useVideoState(store, (state) => state.fullscreen);\n    const started = useVideoState(store, (state) => state.status !== 'idle' && state.status !== 'error');\n    const playing = useVideoState(store, (state) => state.status === 'playing');\n    const { isMobile } = useBreakpoint();\n    const transformStyle = useSlideTransformStyle(controller);\n\n    const [active, setActive] = useState(() => Math.round(globalContext.currentSlideIndex.get()) === index);\n    useMotionValueEvent(globalContext.currentSlideIndex, 'change', (value) => setActive(Math.round(value) === index));\n    const footerSlot = useMotionValueState(globalContext.footerVideoControlsSlot);\n    const indicatorSlot = useMotionValueState(globalContext.videoIndicatorSlot);\n\n    useEffect(() => setContentSize(size), [size, setContentSize]);\n\n    // mobile: контролы — часть тулбара и уезжают вместе с ним; desktop (и mobile без футера): у нижнего края слайда,\n    // над тулбаром — едут вместе со слайдом при листании, но не зумятся и не поворачиваются, прячутся сами\n    const inFooter = active && isMobile && !!footerSlot;\n    const container = active ? (inFooter && footerSlot) || slideControlsSlot : null;\n    useLayoutEffect(() => store.setControlsContainer(container), [store, container]);\n    useLayoutEffect(() => store.setIndicatorContainer(active ? indicatorSlot : null), [store, active, indicatorSlot]);\n\n    useEffect(() => {\n        if (!active) {\n            store.pause();\n        }\n    }, [active, store]);\n\n    useEffect(() => {\n        if (!active) {\n            return undefined;\n        }\n        globalContext.videoFullscreen.set(fullscreen);\n        return () => globalContext.videoFullscreen.set(false);\n    }, [active, fullscreen, globalContext]);\n\n    // mobile: контролы в футере не уезжают со слайдом — при листании они гаснут к середине свайпа, когда активным\n    // становится соседний слайд. Так они не пропадают рывком, а контролы соседнего видео так же проявляются\n    useEffect(() => {\n        if (!inFooter) {\n            return undefined;\n        }\n        const opacity = globalContext.footerVideoControlsOpacity;\n        const update = (slideIndex: number) => opacity.set(clamp(1 - 2 * Math.abs(slideIndex - index), 0, 1));\n        update(globalContext.currentSlideIndex.get());\n        const unsubscribe = globalContext.currentSlideIndex.on('change', update);\n        return () => {\n            unsubscribe();\n            opacity.set(1);\n        };\n    }, [inFooter, index, globalContext]);\n\n    // mobile: двойной тап по краю видео — перемотка, кнопки листания на краях ей мешают — пока видео играет, их нет\n    const lockSlideButtons = active && isMobile && playing;\n    useEffect(() => {\n        if (!lockSlideButtons) {\n            return undefined;\n        }\n        globalContext.videoPlaying.set(true);\n        return () => globalContext.videoPlaying.set(false);\n    }, [lockSlideButtons, globalContext]);\n\n    // После запуска контролами управляют тулбары вьювера: контролы показываются и прячутся вместе с ними, по их\n    // таймеру и активности; тап по видео (mobile) переключает тулбары. Уход со слайда или сброс видео возвращает\n    // контролам собственное управление\n    const syncTools = active && started;\n    useEffect(() => {\n        if (!syncTools) {\n            return undefined;\n        }\n        store.setControlsVisibilityHost(globalContext.toolsVisibility);\n        return () => store.setControlsVisibilityHost(null);\n    }, [syncTools, store, globalContext]);\n\n    // `<video>` получает трансформацию слайда (зум, поворот, смещение), оверлеи плеера — нет. До метаданных\n    // и в fullscreen видео просто вписано в плеер. Меняется только стиль обёртки: `<video>` не пересоздаётся\n    const host = useMemo<VideoPlayerHost>(() => {\n        const transformed = !!size && !fullscreen;\n        return {\n            renderVideo: (video: ReactElement) => (\n                <motion.div\n                    className={transformed ? styles.galleryItemTransformContainer : styles.videoItemFill}\n                    style={\n                        transformed\n                            ? { ...transformStyle, width: size.width, height: size.height }\n                            : { scale: 1, rotate: 0, x: 0, y: 0 }\n                    }\n                >\n                    {video}\n                </motion.div>\n            ),\n        };\n    }, [size, fullscreen, transformStyle]);\n\n    return (\n        <VideoPlayerHostContext.Provider value={host}>\n            <Video.Player showDuration={showDuration}>{active && <Video.Controls />}</Video.Player>\n        </VideoPlayerHostContext.Provider>\n    );\n};\n\nexport const VideoItemBody: FC<VideoItemInternalProps> = ({ index, description, showDuration = false, ...props }) => {\n    const globalContext = useMediaViewerContext();\n    const url = props.src ?? props.sources?.[0]?.src ?? '';\n    const [setContentSize, controller] = useGalleryItemController(globalContext, url, index, description, 'video');\n    const hasMultipleSlides = useMotionValueState(globalContext.totalSlides) > 1;\n    const [controlsSlot, setControlsSlot] = useState<HTMLDivElement | null>(null);\n\n    // колесо и pinch трекпадом над контролами — не зум видео. Жесты слайда слушают и React-событие (оно из портала\n    // всплывает по дереву компонентов, где бы ни лежали контролы), и нативное (pinch) — останавливаем оба\n    const stopControlsWheel = (event: WheelEvent<HTMLDivElement>) => {\n        const target = event.target as Node;\n        if (controlsSlot?.contains(target) || !event.currentTarget.contains(target)) {\n            event.stopPropagation();\n        }\n    };\n    useEffect(() => {\n        if (!controlsSlot) {\n            return undefined;\n        }\n        const stopWheel = (event: Event) => event.stopPropagation();\n        controlsSlot.addEventListener('wheel', stopWheel);\n        return () => controlsSlot.removeEventListener('wheel', stopWheel);\n    }, [controlsSlot]);\n\n    return (\n        // тапы и клики по видео обрабатывает плеер: вьювер не переключает по ним тулбары\n        <Slide\n            index={index}\n            controller={controller}\n            doubleTapAndPan={false}\n            onWheelCapture={stopControlsWheel}\n            data-media-viewer-interactive\n        >\n            <Video {...props}>\n                <VideoSlideContent\n                    showDuration={showDuration}\n                    index={index}\n                    controller={controller}\n                    setContentSize={setContentSize}\n                    slideControlsSlot={controlsSlot}\n                />\n            </Video>\n            <div\n                ref={setControlsSlot}\n                className={classnames(styles.videoItemControls, {\n                    [styles.videoItemControlsWithArrows]: hasMultipleSlides,\n                })}\n            />\n        </Slide>\n    );\n};\n"],"names":["classnames"],"mappings":"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"}
+{"version":3,"file":"VideoItemBody.js","sources":["src/internal/VideoItemBody.tsx"],"sourcesContent":["import { type FC, type ReactElement, type WheelEvent, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport classnames from 'classnames';\nimport { motion, type MotionValue, useMotionValueEvent } from 'motion/react';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Slide, useSlideTransformStyle } from '@hh.ru/magritte-ui-media-viewer/internal/Slide';\nimport { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport {\n    type GalleryItemController,\n    useGalleryItemController,\n} from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useGalleryItemController';\nimport { clamp } from '@hh.ru/magritte-ui-media-viewer/internal/utils';\nimport { type Size } from '@hh.ru/magritte-ui-media-viewer/public/types';\nimport { Video } from '@hh.ru/magritte-ui-video';\nimport {\n    type VideoPlayerHost,\n    VideoPlayerHostContext,\n    useVideoContext,\n    useVideoState,\n} from '@hh.ru/magritte-ui-video/internal/context';\nimport { type VideoProps } from '@hh.ru/magritte-ui-video/types';\n\nimport styles from '../public/media-viewer.less';\n\n/** Внешние пропсы VideoItem — то, что передаёт пользователь */\nexport interface VideoItemProps extends Pick<\n    VideoProps,\n    'src' | 'sources' | 'preview' | 'duration' | 'attachMedia' | 'onPlay' | 'onPause' | 'onEnded' | 'onError'\n> {\n    /**\n     * Показывать бейдж длительности до начала воспроизведения\n     * @default false\n     */\n    showDuration?: boolean;\n    /** Описание элемента */\n    description?: string;\n}\n\n/** Внутренние пропсы VideoItem — включают index, инжектируемый Gallery */\nexport interface VideoItemInternalProps extends VideoItemProps {\n    index: number;\n}\n\nconst useMotionValueState = <T,>(value: MotionValue<T>): T => {\n    const [state, setState] = useState<T>(value.get());\n    useMotionValueEvent(value, 'change', (next) => setState(() => next));\n    return state;\n};\n\ninterface VideoSlideContentProps {\n    index: number;\n    controller: GalleryItemController;\n    setContentSize: (size: Size | null) => void;\n    /** Место контролов в самом слайде (desktop и mobile без футера) */\n    slideControlsSlot: HTMLElement | null;\n    showDuration: boolean;\n    onErrorChange: (error: boolean) => void;\n}\n\n/** Связь стора видео со слайдом и вьювером; живёт внутри `<Video>`, чтобы читать его стор */\nconst VideoSlideContent: FC<VideoSlideContentProps> = ({\n    index,\n    controller,\n    setContentSize,\n    slideControlsSlot,\n    showDuration,\n    onErrorChange,\n}) => {\n    const globalContext = useMediaViewerContext();\n    const { store } = useVideoContext('MediaViewer.VideoItem');\n    const size = useVideoState(store, (state) => state.size);\n    const fullscreen = useVideoState(store, (state) => state.fullscreen);\n    const started = useVideoState(store, (state) => state.status !== 'idle' && state.status !== 'error');\n    const playing = useVideoState(store, (state) => state.status === 'playing');\n    const error = useVideoState(store, (state) => state.status === 'error');\n    const { isMobile } = useBreakpoint();\n    const transformStyle = useSlideTransformStyle(controller);\n\n    const [active, setActive] = useState(() => Math.round(globalContext.currentSlideIndex.get()) === index);\n    useMotionValueEvent(globalContext.currentSlideIndex, 'change', (value) => setActive(Math.round(value) === index));\n    const footerSlot = useMotionValueState(globalContext.footerVideoControlsSlot);\n    const indicatorSlot = useMotionValueState(globalContext.videoIndicatorSlot);\n\n    useEffect(() => setContentSize(size), [size, setContentSize]);\n    useEffect(() => onErrorChange(error), [error, onErrorChange]);\n\n    // mobile: контролы — часть тулбара и уезжают вместе с ним; desktop (и mobile без футера): у нижнего края слайда,\n    // над тулбаром — едут вместе со слайдом при листании, но не зумятся и не поворачиваются, прячутся сами\n    const inFooter = active && isMobile && !!footerSlot;\n    const container = active ? (inFooter && footerSlot) || slideControlsSlot : null;\n    useLayoutEffect(() => store.setControlsContainer(container), [store, container]);\n    useLayoutEffect(() => store.setIndicatorContainer(active ? indicatorSlot : null), [store, active, indicatorSlot]);\n\n    useEffect(() => {\n        if (!active) {\n            store.pause();\n        }\n    }, [active, store]);\n\n    useEffect(() => {\n        if (!active) {\n            return undefined;\n        }\n        globalContext.videoFullscreen.set(fullscreen);\n        return () => globalContext.videoFullscreen.set(false);\n    }, [active, fullscreen, globalContext]);\n\n    // mobile: контролы в футере не уезжают со слайдом — при листании они гаснут к середине свайпа, когда активным\n    // становится соседний слайд. Так они не пропадают рывком, а контролы соседнего видео так же проявляются\n    useEffect(() => {\n        if (!inFooter) {\n            return undefined;\n        }\n        const opacity = globalContext.footerVideoControlsOpacity;\n        const update = (slideIndex: number) => opacity.set(clamp(1 - 2 * Math.abs(slideIndex - index), 0, 1));\n        update(globalContext.currentSlideIndex.get());\n        const unsubscribe = globalContext.currentSlideIndex.on('change', update);\n        return () => {\n            unsubscribe();\n            opacity.set(1);\n        };\n    }, [inFooter, index, globalContext]);\n\n    // mobile: двойной тап по краю видео — перемотка, кнопки листания на краях ей мешают — пока видео играет, их нет\n    const lockSlideButtons = active && isMobile && playing;\n    useEffect(() => {\n        if (!lockSlideButtons) {\n            return undefined;\n        }\n        globalContext.videoPlaying.set(true);\n        return () => globalContext.videoPlaying.set(false);\n    }, [lockSlideButtons, globalContext]);\n\n    // После запуска контролами управляют тулбары вьювера: контролы показываются и прячутся вместе с ними, по их\n    // таймеру и активности; тап по видео (mobile) переключает тулбары. Уход со слайда или сброс видео возвращает\n    // контролам собственное управление\n    const syncTools = active && started;\n    useEffect(() => {\n        if (!syncTools) {\n            return undefined;\n        }\n        store.setControlsVisibilityHost(globalContext.toolsVisibility);\n        return () => store.setControlsVisibilityHost(null);\n    }, [syncTools, store, globalContext]);\n\n    // `<video>` получает трансформацию слайда (зум, поворот, смещение), оверлеи плеера — нет. До метаданных\n    // и в fullscreen видео просто вписано в плеер. Меняется только стиль обёртки: `<video>` не пересоздаётся\n    const host = useMemo<VideoPlayerHost>(() => {\n        const transformed = !!size && !fullscreen;\n        return {\n            renderVideo: (video: ReactElement) => (\n                <motion.div\n                    className={transformed ? styles.galleryItemTransformContainer : styles.videoItemFill}\n                    style={\n                        transformed\n                            ? { ...transformStyle, width: size.width, height: size.height }\n                            : { scale: 1, rotate: 0, x: 0, y: 0 }\n                    }\n                >\n                    {video}\n                </motion.div>\n            ),\n            retryButtonProps: { 'data-media-viewer-interactive': true },\n        };\n    }, [size, fullscreen, transformStyle]);\n\n    return (\n        <VideoPlayerHostContext.Provider value={host}>\n            <Video.Player showDuration={showDuration}>{active && <Video.Controls />}</Video.Player>\n        </VideoPlayerHostContext.Provider>\n    );\n};\n\nexport const VideoItemBody: FC<VideoItemInternalProps> = ({ index, description, showDuration = false, ...props }) => {\n    const globalContext = useMediaViewerContext();\n    const url = props.src ?? props.sources?.[0]?.src ?? '';\n    const [setContentSize, controller] = useGalleryItemController(globalContext, url, index, description, 'video');\n    const hasMultipleSlides = useMotionValueState(globalContext.totalSlides) > 1;\n    const [controlsSlot, setControlsSlot] = useState<HTMLDivElement | null>(null);\n    const [error, setError] = useState(false);\n\n    // колесо и pinch трекпадом над контролами — не зум видео. Жесты слайда слушают и React-событие (оно из портала\n    // всплывает по дереву компонентов, где бы ни лежали контролы), и нативное (pinch) — останавливаем оба\n    const stopControlsWheel = (event: WheelEvent<HTMLDivElement>) => {\n        const target = event.target as Node;\n        if (controlsSlot?.contains(target) || !event.currentTarget.contains(target)) {\n            event.stopPropagation();\n        }\n    };\n    useEffect(() => {\n        if (!controlsSlot) {\n            return undefined;\n        }\n        const stopWheel = (event: Event) => event.stopPropagation();\n        controlsSlot.addEventListener('wheel', stopWheel);\n        return () => controlsSlot.removeEventListener('wheel', stopWheel);\n    }, [controlsSlot]);\n\n    return (\n        // тапы и клики по видео обрабатывает плеер: вьювер не переключает по ним тулбары. В ошибке видео нет — тап\n        // по экрану ошибки переключает тулбары, как на обычном слайде\n        <Slide\n            index={index}\n            controller={controller}\n            doubleTapAndPan={false}\n            onWheelCapture={stopControlsWheel}\n            data-media-viewer-interactive={!error || undefined}\n        >\n            <Video {...props}>\n                <VideoSlideContent\n                    showDuration={showDuration}\n                    index={index}\n                    controller={controller}\n                    setContentSize={setContentSize}\n                    slideControlsSlot={controlsSlot}\n                    onErrorChange={setError}\n                />\n            </Video>\n            <div\n                ref={setControlsSlot}\n                className={classnames(styles.videoItemControls, {\n                    [styles.videoItemControlsWithArrows]: hasMultipleSlides,\n                })}\n            />\n        </Slide>\n    );\n};\n"],"names":["classnames"],"mappings":"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"}

package/internal/slides.js

@@ -20,7 +20,7 @@ import './hooks/usePan.js';
 import '@use-gesture/react';
 import './hooks/usePinchToZoom.js';
 import './hooks/useWheelToZoom.js';
-import '../media-viewer-OWOdMZcE.js';
+import '../media-viewer-CK6Xlh-B.js';
 import '@hh.ru/magritte-ui-typography';
 import './hooks/useVirtualization.js';
 import './VideoItemBody.js';

package/media-viewer-CK6Xlh-B.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"media-viewer":"magritte-media-viewer___KnrXP_1-4-5","mediaViewer":"magritte-media-viewer___KnrXP_1-4-5","gallery-placeholder":"magritte-gallery-placeholder___rUoGL_1-4-5","galleryPlaceholder":"magritte-gallery-placeholder___rUoGL_1-4-5","media-viewer-gallery":"magritte-media-viewer-gallery___P0SnN_1-4-5","mediaViewerGallery":"magritte-media-viewer-gallery___P0SnN_1-4-5","gallery-item":"magritte-gallery-item___Js0Z5_1-4-5","galleryItem":"magritte-gallery-item___Js0Z5_1-4-5","gallery-item-transform-container":"magritte-gallery-item-transform-container___N8-sA_1-4-5","galleryItemTransformContainer":"magritte-gallery-item-transform-container___N8-sA_1-4-5","preview-counter":"magritte-preview-counter___uP2Hc_1-4-5","previewCounter":"magritte-preview-counter___uP2Hc_1-4-5","with-description":"magritte-with-description___-w7ld_1-4-5","withDescription":"magritte-with-description___-w7ld_1-4-5","counter-number":"magritte-counter-number___gUpMp_1-4-5","counterNumber":"magritte-counter-number___gUpMp_1-4-5","no-description-placeholder":"magritte-no-description-placeholder___qc6h2_1-4-5","noDescriptionPlaceholder":"magritte-no-description-placeholder___qc6h2_1-4-5","preview-zoom-control":"magritte-preview-zoom-control___026jA_1-4-5","previewZoomControl":"magritte-preview-zoom-control___026jA_1-4-5","preview-container":"magritte-preview-container___nwjNY_1-4-5","previewContainer":"magritte-preview-container___nwjNY_1-4-5","preview":"magritte-preview___0Ge4C_1-4-5","preview-list":"magritte-preview-list___SAXLZ_1-4-5","previewList":"magritte-preview-list___SAXLZ_1-4-5","preview-item":"magritte-preview-item___gz5f2_1-4-5","previewItem":"magritte-preview-item___gz5f2_1-4-5","preview-item-container":"magritte-preview-item-container___JDVsk_1-4-5","previewItemContainer":"magritte-preview-item-container___JDVsk_1-4-5","media-viewer-toolbar":"magritte-media-viewer-toolbar___2C8nr_1-4-5","mediaViewerToolbar":"magritte-media-viewer-toolbar___2C8nr_1-4-5","no-description":"magritte-no-description___NebrT_1-4-5","noDescription":"magritte-no-description___NebrT_1-4-5","media-viewer-toolbar-left":"magritte-media-viewer-toolbar-left___YzkJt_1-4-5","mediaViewerToolbarLeft":"magritte-media-viewer-toolbar-left___YzkJt_1-4-5","media-viewer-toolbar-right":"magritte-media-viewer-toolbar-right___kBER9_1-4-5","mediaViewerToolbarRight":"magritte-media-viewer-toolbar-right___kBER9_1-4-5","prev-button":"magritte-prev-button___WMYjR_1-4-5","prevButton":"magritte-prev-button___WMYjR_1-4-5","next-button":"magritte-next-button___f8hJT_1-4-5","nextButton":"magritte-next-button___f8hJT_1-4-5","slide-button":"magritte-slide-button___sY8LB_1-4-5","slideButton":"magritte-slide-button___sY8LB_1-4-5","preview-placeholder":"magritte-preview-placeholder___yuhW1_1-4-5","previewPlaceholder":"magritte-preview-placeholder___yuhW1_1-4-5","gallery-item-loader":"magritte-gallery-item-loader___70TDe_1-4-5","galleryItemLoader":"magritte-gallery-item-loader___70TDe_1-4-5","gallery-item-error-container":"magritte-gallery-item-error-container___Z-HyZ_1-4-5","galleryItemErrorContainer":"magritte-gallery-item-error-container___Z-HyZ_1-4-5","description-bottom-sheet-content":"magritte-description-bottom-sheet-content___swnEV_1-4-5","descriptionBottomSheetContent":"magritte-description-bottom-sheet-content___swnEV_1-4-5","header":"magritte-header___egZXt_1-4-5","video-indicator-slot":"magritte-video-indicator-slot___FX0nD_1-4-5","videoIndicatorSlot":"magritte-video-indicator-slot___FX0nD_1-4-5","video-indicator-slot-content":"magritte-video-indicator-slot-content___kir3R_1-4-5","videoIndicatorSlotContent":"magritte-video-indicator-slot-content___kir3R_1-4-5","video-item-fill":"magritte-video-item-fill___SKpC3_1-4-5","videoItemFill":"magritte-video-item-fill___SKpC3_1-4-5","video-item-controls":"magritte-video-item-controls___oe99H_1-4-5","videoItemControls":"magritte-video-item-controls___oe99H_1-4-5","video-item-controls-with-arrows":"magritte-video-item-controls-with-arrows___d1JxC_1-4-5","videoItemControlsWithArrows":"magritte-video-item-controls-with-arrows___d1JxC_1-4-5","footer":"magritte-footer___rOH-M_1-4-5","footer-video-controls":"magritte-footer-video-controls___CYJnk_1-4-5","footerVideoControls":"magritte-footer-video-controls___CYJnk_1-4-5","description":"magritte-description___dYc-E_1-4-5"};
+
+export { styles as s };
+//# sourceMappingURL=media-viewer-CK6Xlh-B.js.map

package/media-viewer-CK6Xlh-B.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-viewer-CK6Xlh-B.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-media-viewer",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -33,7 +33,7 @@
     "@hh.ru/magritte-common-use-translation": "3.8.0",
     "@hh.ru/magritte-design-tokens": "26.0.2",
     "@hh.ru/magritte-internal-accessible-region": "1.0.5",
-    "@hh.ru/magritte-ui-bottom-sheet": "9.4.62",
+    "@hh.ru/magritte-ui-bottom-sheet": "9.4.63",
     "@hh.ru/magritte-ui-breakpoint": "6.1.3",
     "@hh.ru/magritte-ui-icon": "15.1.6",
     "@hh.ru/magritte-ui-layer": "3.2.9",
@@ -42,7 +42,7 @@
     "@hh.ru/magritte-ui-nav-bar": "2.0.24",
     "@hh.ru/magritte-ui-tooltip": "11.0.54",
     "@hh.ru/magritte-ui-typography": "5.3.17",
-    "@hh.ru/magritte-ui-video": "1.0.2",
+    "@hh.ru/magritte-ui-video": "1.0.3",
     "@use-gesture/react": "10.3.1"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
     "motion": "^12.23.12",
     "react": ">=18.2.0"
   },
-  "gitHead": "cf2f64cd7ddcc1cdc569e66eb3eb88e54e1df97a"
+  "gitHead": "17a448d4bbe9f55b342f0b1ba7612bfe7acd76d7"
 }

package/public/Footer.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { motion } from 'motion/react';
 import { useMediaViewerContext } from '../internal/context.js';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import '../internal/ImagesLoader.js';
 import '../internal/toolsVisibility.js';
 import '@hh.ru/magritte-design-tokens/core-tokens';

package/public/Gallery.js

@@ -10,7 +10,7 @@ import { useMediaViewerContext, useGalleryItemsContext } from '../internal/conte
 import { useSwipe } from '../internal/hooks/useSwipe.js';
 import { isSlideElement } from '../internal/slides.js';
 import { clamp } from '../internal/utils.js';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import '../internal/ImagesLoader.js';
 import '../internal/toolsVisibility.js';
 import '@hh.ru/magritte-design-tokens/core-tokens';

package/public/GalleryItem.js

@@ -17,7 +17,7 @@ import '../internal/hooks/usePan.js';
 import '@use-gesture/react';
 import '../internal/hooks/usePinchToZoom.js';
 import '../internal/hooks/useWheelToZoom.js';
-import '../media-viewer-OWOdMZcE.js';
+import '../media-viewer-CK6Xlh-B.js';
 import '@hh.ru/magritte-ui-typography';
 import '../internal/ImagesLoader.js';
 import '../internal/toolsVisibility.js';

package/public/Header.js

@@ -2,7 +2,7 @@ import './../index.css';
 import { jsx } from 'react/jsx-runtime';
 import { MEDIA_VIEWER_HEADER_ACTIONS_ICONS_DEFAULTS } from './headerDefaults.js';
 import { NavBarDefaultPropsContext } from '@hh.ru/magritte-ui-nav-bar';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 
 const NAV_BAR_ACTIONS_DEFAULT_PROPS = {
   verticalAlign: "top"

package/public/MediaViewer.js

@@ -23,7 +23,7 @@ import { Preview } from './Preview.js';
 import { Toolbar } from './Toolbar.js';
 import { DesktopTool, MobileTool, RotateTool, CloseTool, FullWidthTool } from './Tools.js';
 import { VideoItem } from './VideoItem.js';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import '../internal/ImagesLoader.js';
 import '../internal/toolsVisibility.js';
 import '@use-gesture/react';

package/public/Preview.js

@@ -13,7 +13,7 @@ import { useMediaViewerContext, useGalleryItemsContext, PreviewContext } from '.
 import { useVirtualization } from '../internal/hooks/useVirtualization.js';
 import { getSlideThumbnail } from '../internal/slides.js';
 import { useDetectDiscreteChange, useInitOnce, clamp } from '../internal/utils.js';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import 'classnames';
 import '@hh.ru/magritte-common-use-translation';
 import '@hh.ru/magritte-ui-bottom-sheet';

package/public/Toolbar.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';
 import { hasCounterContent, Counter } from '../internal/Counter.js';
 import { useGalleryItemsContext } from '../internal/context.js';
-import { s as styles } from '../media-viewer-OWOdMZcE.js';
+import { s as styles } from '../media-viewer-CK6Xlh-B.js';
 import 'react';
 import 'motion/react';
 import '@hh.ru/magritte-common-use-translation';

package/public/VideoItem.js

@@ -17,7 +17,7 @@ import '../internal/hooks/usePan.js';
 import '@use-gesture/react';
 import '../internal/hooks/usePinchToZoom.js';
 import '../internal/hooks/useWheelToZoom.js';
-import '../media-viewer-OWOdMZcE.js';
+import '../media-viewer-CK6Xlh-B.js';
 import '@hh.ru/magritte-ui-video';
 import '@hh.ru/magritte-ui-video/internal/context';
 import '../internal/ImagesLoader.js';

package/media-viewer-OWOdMZcE.js

@@ -1,5 +0,0 @@
-import './index.css';
-var styles = {"media-viewer":"magritte-media-viewer___KnrXP_1-4-3","mediaViewer":"magritte-media-viewer___KnrXP_1-4-3","gallery-placeholder":"magritte-gallery-placeholder___rUoGL_1-4-3","galleryPlaceholder":"magritte-gallery-placeholder___rUoGL_1-4-3","media-viewer-gallery":"magritte-media-viewer-gallery___P0SnN_1-4-3","mediaViewerGallery":"magritte-media-viewer-gallery___P0SnN_1-4-3","gallery-item":"magritte-gallery-item___Js0Z5_1-4-3","galleryItem":"magritte-gallery-item___Js0Z5_1-4-3","gallery-item-transform-container":"magritte-gallery-item-transform-container___N8-sA_1-4-3","galleryItemTransformContainer":"magritte-gallery-item-transform-container___N8-sA_1-4-3","preview-counter":"magritte-preview-counter___uP2Hc_1-4-3","previewCounter":"magritte-preview-counter___uP2Hc_1-4-3","with-description":"magritte-with-description___-w7ld_1-4-3","withDescription":"magritte-with-description___-w7ld_1-4-3","counter-number":"magritte-counter-number___gUpMp_1-4-3","counterNumber":"magritte-counter-number___gUpMp_1-4-3","no-description-placeholder":"magritte-no-description-placeholder___qc6h2_1-4-3","noDescriptionPlaceholder":"magritte-no-description-placeholder___qc6h2_1-4-3","preview-zoom-control":"magritte-preview-zoom-control___026jA_1-4-3","previewZoomControl":"magritte-preview-zoom-control___026jA_1-4-3","preview-container":"magritte-preview-container___nwjNY_1-4-3","previewContainer":"magritte-preview-container___nwjNY_1-4-3","preview":"magritte-preview___0Ge4C_1-4-3","preview-list":"magritte-preview-list___SAXLZ_1-4-3","previewList":"magritte-preview-list___SAXLZ_1-4-3","preview-item":"magritte-preview-item___gz5f2_1-4-3","previewItem":"magritte-preview-item___gz5f2_1-4-3","preview-item-container":"magritte-preview-item-container___JDVsk_1-4-3","previewItemContainer":"magritte-preview-item-container___JDVsk_1-4-3","media-viewer-toolbar":"magritte-media-viewer-toolbar___2C8nr_1-4-3","mediaViewerToolbar":"magritte-media-viewer-toolbar___2C8nr_1-4-3","no-description":"magritte-no-description___NebrT_1-4-3","noDescription":"magritte-no-description___NebrT_1-4-3","media-viewer-toolbar-left":"magritte-media-viewer-toolbar-left___YzkJt_1-4-3","mediaViewerToolbarLeft":"magritte-media-viewer-toolbar-left___YzkJt_1-4-3","media-viewer-toolbar-right":"magritte-media-viewer-toolbar-right___kBER9_1-4-3","mediaViewerToolbarRight":"magritte-media-viewer-toolbar-right___kBER9_1-4-3","prev-button":"magritte-prev-button___WMYjR_1-4-3","prevButton":"magritte-prev-button___WMYjR_1-4-3","next-button":"magritte-next-button___f8hJT_1-4-3","nextButton":"magritte-next-button___f8hJT_1-4-3","slide-button":"magritte-slide-button___sY8LB_1-4-3","slideButton":"magritte-slide-button___sY8LB_1-4-3","preview-placeholder":"magritte-preview-placeholder___yuhW1_1-4-3","previewPlaceholder":"magritte-preview-placeholder___yuhW1_1-4-3","gallery-item-loader":"magritte-gallery-item-loader___70TDe_1-4-3","galleryItemLoader":"magritte-gallery-item-loader___70TDe_1-4-3","gallery-item-error-container":"magritte-gallery-item-error-container___Z-HyZ_1-4-3","galleryItemErrorContainer":"magritte-gallery-item-error-container___Z-HyZ_1-4-3","description-bottom-sheet-content":"magritte-description-bottom-sheet-content___swnEV_1-4-3","descriptionBottomSheetContent":"magritte-description-bottom-sheet-content___swnEV_1-4-3","header":"magritte-header___egZXt_1-4-3","video-indicator-slot":"magritte-video-indicator-slot___FX0nD_1-4-3","videoIndicatorSlot":"magritte-video-indicator-slot___FX0nD_1-4-3","video-indicator-slot-content":"magritte-video-indicator-slot-content___kir3R_1-4-3","videoIndicatorSlotContent":"magritte-video-indicator-slot-content___kir3R_1-4-3","video-item-fill":"magritte-video-item-fill___SKpC3_1-4-3","videoItemFill":"magritte-video-item-fill___SKpC3_1-4-3","video-item-controls":"magritte-video-item-controls___oe99H_1-4-3","videoItemControls":"magritte-video-item-controls___oe99H_1-4-3","video-item-controls-with-arrows":"magritte-video-item-controls-with-arrows___d1JxC_1-4-3","videoItemControlsWithArrows":"magritte-video-item-controls-with-arrows___d1JxC_1-4-3","footer":"magritte-footer___rOH-M_1-4-3","footer-video-controls":"magritte-footer-video-controls___CYJnk_1-4-3","footerVideoControls":"magritte-footer-video-controls___CYJnk_1-4-3","description":"magritte-description___dYc-E_1-4-3"};
-
-export { styles as s };
-//# sourceMappingURL=media-viewer-OWOdMZcE.js.map

package/media-viewer-OWOdMZcE.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"media-viewer-OWOdMZcE.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}