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

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-1{
+.magritte-media-viewer___KnrXP_1-4-3{
   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-1::before{
+.magritte-media-viewer___KnrXP_1-4-3::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-1{
+.magritte-gallery-placeholder___rUoGL_1-4-3{
   display:flex;
   align-items:stretch;
   grid-area:gallery;
   min-height:0;
 }
-.magritte-media-viewer-gallery___P0SnN_1-4-1{
+.magritte-media-viewer-gallery___P0SnN_1-4-3{
   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-1{
+  body.magritte-old-layout .magritte-media-viewer-gallery___P0SnN_1-4-3{
     position:relative;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-4-1{
+  body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-4-3{
     position:relative;
   }
 }
-.magritte-gallery-item___Js0Z5_1-4-1{
+.magritte-gallery-item___Js0Z5_1-4-3{
   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-1{
+.magritte-gallery-item-transform-container___N8-sA_1-4-3{
   position:absolute;
   top:50%;
   left:50%;
@@ -77,37 +77,37 @@
   will-change:transform;
   touch-action:none;
 }
-.magritte-preview-counter___uP2Hc_1-4-1{
+.magritte-preview-counter___uP2Hc_1-4-3{
   min-width:0;
   text-align:center;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-4-1{
+  body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-4-3{
     text-align:left;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-4-1{
+  body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-4-3{
     text-align:left;
   }
 }
-.magritte-preview-counter___uP2Hc_1-4-1.magritte-with-description___-w7ld_1-4-1{
+.magritte-preview-counter___uP2Hc_1-4-3.magritte-with-description___-w7ld_1-4-3{
   cursor:pointer;
 }
-.magritte-counter-number___gUpMp_1-4-1{
+.magritte-counter-number___gUpMp_1-4-3{
   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-1 .magritte-counter-number___gUpMp_1-4-1{
+.magritte-with-description___-w7ld_1-4-3 .magritte-counter-number___gUpMp_1-4-3{
   transform:translateY(0);
 }
-.magritte-no-description-placeholder___qc6h2_1-4-1{
+.magritte-no-description-placeholder___qc6h2_1-4-3{
   display:block;
   height:18px;
   padding:0;
 }
-.magritte-preview-zoom-control___026jA_1-4-1{
+.magritte-preview-zoom-control___026jA_1-4-3{
   display:flex;
   flex-direction:row;
   gap:2px;
@@ -115,7 +115,7 @@
   justify-self:end;
   grid-column:3;
 }
-.magritte-preview-container___nwjNY_1-4-1{
+.magritte-preview-container___nwjNY_1-4-3{
   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-1{
+  body.magritte-old-layout .magritte-preview-container___nwjNY_1-4-3{
     padding:16px 24px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-4-1{
+  body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-4-3{
     padding:16px 24px;
   }
 }
-.magritte-preview___0Ge4C_1-4-1{
+.magritte-preview___0Ge4C_1-4-3{
   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-1{
+  body.magritte-old-layout .magritte-preview___0Ge4C_1-4-3{
     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-1{
+  body:not(.magritte-old-layout) .magritte-preview___0Ge4C_1-4-3{
     max-width:calc(((40 + 8) * (var(--media-viewer-max-visible-items) - 1) + 80) * 1px);
     overflow:hidden;
   }
 }
-.magritte-preview-list___SAXLZ_1-4-1{
+.magritte-preview-list___SAXLZ_1-4-3{
   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-1{
+  body.magritte-old-layout .magritte-preview-list___SAXLZ_1-4-3{
     margin:0;
     gap:8px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-4-1{
+  body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-4-3{
     margin:0;
     gap:8px;
   }
 }
-.magritte-preview-item___gz5f2_1-4-1{
+.magritte-preview-item___gz5f2_1-4-3{
   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-1{
+  body.magritte-old-layout .magritte-preview-item___gz5f2_1-4-3{
     height:80px;
     border-radius:8px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-4-1{
+  body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-4-3{
     height:80px;
     border-radius:8px;
   }
 }
-.magritte-preview-item-container___JDVsk_1-4-1{
+.magritte-preview-item-container___JDVsk_1-4-3{
   contain:layout paint size;
   overflow:hidden;
   scale:1;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-4-1{
+  body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-4-3{
     scale:1.66666667;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-4-1{
+  body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-4-3{
     scale:1.66666667;
   }
 }
-.magritte-preview-item-container___JDVsk_1-4-1 *{
+.magritte-preview-item-container___JDVsk_1-4-3 *{
   touch-action:none;
   position:absolute;
   top:0;
@@ -225,7 +225,7 @@
   height:100%;
   user-select:none;
 }
-.magritte-media-viewer-toolbar___2C8nr_1-4-1{
+.magritte-media-viewer-toolbar___2C8nr_1-4-3{
   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-1.magritte-no-description___NebrT_1-4-1{
+.magritte-media-viewer-toolbar___2C8nr_1-4-3.magritte-no-description___NebrT_1-4-3{
   display:flex;
   justify-content:space-between;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-4-1{
+  body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-4-3{
     display:none;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-4-1{
+  body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-4-3{
     display:none;
   }
 }
-.magritte-media-viewer-toolbar-left___YzkJt_1-4-1,
-.magritte-media-viewer-toolbar-right___kBER9_1-4-1{
+.magritte-media-viewer-toolbar-left___YzkJt_1-4-3,
+.magritte-media-viewer-toolbar-right___kBER9_1-4-3{
   display:flex;
   gap:4px;
 }
-.magritte-media-viewer-toolbar-right___kBER9_1-4-1{
+.magritte-media-viewer-toolbar-right___kBER9_1-4-3{
   justify-content:end;
 }
-.magritte-prev-button___WMYjR_1-4-1,
-.magritte-next-button___f8hJT_1-4-1{
+.magritte-prev-button___WMYjR_1-4-3,
+.magritte-next-button___f8hJT_1-4-3{
   cursor:pointer;
   position:absolute;
   top:0;
@@ -267,40 +267,40 @@
   width:48px;
   opacity:var(--media-viewer-background-opacity);
 }
-.magritte-prev-button___WMYjR_1-4-1:active,
-.magritte-next-button___f8hJT_1-4-1:active{
+.magritte-prev-button___WMYjR_1-4-3:active,
+.magritte-next-button___f8hJT_1-4-3: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-1,
-  body.magritte-old-layout .magritte-next-button___f8hJT_1-4-1{
+  body.magritte-old-layout .magritte-prev-button___WMYjR_1-4-3,
+  body.magritte-old-layout .magritte-next-button___f8hJT_1-4-3{
     width:88px;
   }
-  body.magritte-old-layout .magritte-prev-button___WMYjR_1-4-1:active,
-  body.magritte-old-layout .magritte-next-button___f8hJT_1-4-1:active{
+  body.magritte-old-layout .magritte-prev-button___WMYjR_1-4-3:active,
+  body.magritte-old-layout .magritte-next-button___f8hJT_1-4-3:active{
     background:none;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-4-1,
-  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-4-1{
+  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-4-3,
+  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-4-3{
     width:88px;
   }
-  body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-4-1:active,
-  body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-4-1:active{
+  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{
     background:none;
   }
 }
-.magritte-prev-button___WMYjR_1-4-1{
+.magritte-prev-button___WMYjR_1-4-3{
   left:0;
 }
-.magritte-prev-button___WMYjR_1-4-1:active{
+.magritte-prev-button___WMYjR_1-4-3:active{
   background:linear-gradient(270deg, var(--magritte-gradient-component-media-viewer-background-fade-v26-0-2));
 }
-.magritte-next-button___f8hJT_1-4-1{
+.magritte-next-button___f8hJT_1-4-3{
   right:0;
 }
-.magritte-slide-button___sY8LB_1-4-1{
+.magritte-slide-button___sY8LB_1-4-3{
   display:flex;
   background:none;
   padding:0;
@@ -310,7 +310,7 @@
   position:absolute;
   inset:0;
 }
-.magritte-preview-placeholder___yuhW1_1-4-1{
+.magritte-preview-placeholder___yuhW1_1-4-3{
   --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-1{
+  body.magritte-old-layout .magritte-preview-placeholder___yuhW1_1-4-3{
     --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-1{
+  body:not(.magritte-old-layout) .magritte-preview-placeholder___yuhW1_1-4-3{
     --magritte-media-viewer-preview-width:40px;
     --magritte-media-viewer-preview-gap:8px;
   }
 }
-.magritte-gallery-item-loader___70TDe_1-4-1{
+.magritte-gallery-item-loader___70TDe_1-4-3{
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
 }
-.magritte-gallery-item-error-container___Z-HyZ_1-4-1{
+.magritte-gallery-item-error-container___Z-HyZ_1-4-3{
   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-1{
+.magritte-description-bottom-sheet-content___swnEV_1-4-3{
   padding:8px 0;
 }
-.magritte-header___egZXt_1-4-1{
+.magritte-header___egZXt_1-4-3{
   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-1{
+.magritte-video-indicator-slot___FX0nD_1-4-3{
   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-1{
+.magritte-video-indicator-slot-content___kir3R_1-4-3{
   position:absolute;
   top:100%;
   right:0;
   left:0;
 }
-.magritte-video-item-fill___SKpC3_1-4-1{
+.magritte-video-item-fill___SKpC3_1-4-3{
   position:absolute;
   inset:0;
 }
-.magritte-video-item-controls___oe99H_1-4-1{
+.magritte-video-item-controls___oe99H_1-4-3{
   position:absolute;
   right:0;
   bottom:0;
@@ -388,22 +388,25 @@
   opacity:var(--media-viewer-background-opacity);
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-video-item-controls___oe99H_1-4-1.magritte-video-item-controls-with-arrows___d1JxC_1-4-1{
+  body.magritte-old-layout .magritte-video-item-controls___oe99H_1-4-3.magritte-video-item-controls-with-arrows___d1JxC_1-4-3{
     padding:0 88px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-video-item-controls___oe99H_1-4-1.magritte-video-item-controls-with-arrows___d1JxC_1-4-1{
+  body:not(.magritte-old-layout) .magritte-video-item-controls___oe99H_1-4-3.magritte-video-item-controls-with-arrows___d1JxC_1-4-3{
     padding:0 88px;
   }
 }
-.magritte-footer___rOH-M_1-4-1{
+.magritte-footer___rOH-M_1-4-3{
   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-description___dYc-E_1-4-1{
+.magritte-footer-video-controls___CYJnk_1-4-3{
+  background:var(--magritte-color-background-overlay-toolbar-v26-0-2);
+}
+.magritte-description___dYc-E_1-4-3{
   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-BOgoSXlr.js';
+import './media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.js';
 import './ImagesLoader.js';
 import './toolsVisibility.js';
 import '@use-gesture/react';

package/internal/VideoItemBody.d.ts

@@ -2,6 +2,11 @@ import { type FC } from 'react';
 import { type VideoProps } from '@hh.ru/magritte-ui-video/types';
 /** Внешние пропсы VideoItem — то, что передаёт пользователь */
 export interface VideoItemProps extends Pick<VideoProps, 'src' | 'sources' | 'preview' | 'duration' | 'attachMedia' | 'onPlay' | 'onPause' | 'onEnded' | 'onError'> {
+    /**
+     * Показывать бейдж длительности до начала воспроизведения
+     * @default false
+     */
+    showDuration?: boolean;
     /** Описание элемента */
     description?: string;
 }

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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.js';
 import '@hh.ru/magritte-design-tokens/core-tokens';
 import './animations.js';
 import './hooks/useDoubleTapScale.js';
@@ -26,7 +26,13 @@ const useMotionValueState = (value) => {
   useMotionValueEvent(value, "change", (next) => setState(() => next));
   return state;
 };
-const VideoSlideContent = ({ index, controller, setContentSize, slideControlsSlot }) => {
+const VideoSlideContent = ({
+  index,
+  controller,
+  setContentSize,
+  slideControlsSlot,
+  showDuration
+}) => {
   const globalContext = useMediaViewerContext();
   const { store } = useVideoContext("MediaViewer.VideoItem");
   const size = useVideoState(store, (state) => state.size);
@@ -77,26 +83,13 @@ const VideoSlideContent = ({ index, controller, setContentSize, slideControlsSlo
     globalContext.videoPlaying.set(true);
     return () => globalContext.videoPlaying.set(false);
   }, [lockSlideButtons, globalContext]);
-  useEffect(() => {
-    if (!active || isMobile) {
-      return void 0;
-    }
-    document.addEventListener("mousemove", store.notifyActivity);
-    return () => document.removeEventListener("mousemove", store.notifyActivity);
-  }, [active, isMobile, store]);
-  const syncTools = active && isMobile && started;
+  const syncTools = active && started;
   useEffect(() => {
     if (!syncTools) {
       return void 0;
     }
-    const source = globalContext.toolsVisibility.attachSource();
-    const sync = () => source.setVisible(store.getState().controlsVisible);
-    sync();
-    const unsubscribe = store.subscribe(sync);
-    return () => {
-      unsubscribe();
-      source.detach();
-    };
+    store.setControlsVisibilityHost(globalContext.toolsVisibility);
+    return () => store.setControlsVisibilityHost(null);
   }, [syncTools, store, globalContext]);
   const host = useMemo(() => {
     const transformed = !!size && !fullscreen;
@@ -111,9 +104,9 @@ const VideoSlideContent = ({ index, controller, setContentSize, slideControlsSlo
       )
     };
   }, [size, fullscreen, transformStyle]);
-  return /* @__PURE__ */ jsx(VideoPlayerHostContext.Provider, { value: host, children: /* @__PURE__ */ jsx(Video.Player, { children: active && /* @__PURE__ */ jsx(Video.Controls, {}) }) });
+  return /* @__PURE__ */ jsx(VideoPlayerHostContext.Provider, { value: host, children: /* @__PURE__ */ jsx(Video.Player, { showDuration, children: active && /* @__PURE__ */ jsx(Video.Controls, {}) }) });
 };
-const VideoItemBody = ({ index, description, ...props }) => {
+const VideoItemBody = ({ index, description, showDuration = false, ...props }) => {
   const globalContext = useMediaViewerContext();
   const url = props.src ?? props.sources?.[0]?.src ?? "";
   const [setContentSize, controller] = useGalleryItemController(globalContext, url, index, description, "video");
@@ -147,6 +140,7 @@ const VideoItemBody = ({ index, description, ...props }) => {
           /* @__PURE__ */ jsx(Video, { ...props, children: /* @__PURE__ */ jsx(
             VideoSlideContent,
             {
+              showDuration,
               index,
               controller,
               setContentSize,

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    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}\n\n/** Связь стора видео со слайдом и вьювером; живёт внутри `<Video>`, чтобы читать его стор */\nconst VideoSlideContent: FC<VideoSlideContentProps> = ({ index, controller, setContentSize, slideControlsSlot }) => {\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    // desktop: любое движение мыши во вьювере — взаимодействие с видео, контролы показываются\n    useEffect(() => {\n        if (!active || isMobile) {\n            return undefined;\n        }\n        document.addEventListener('mousemove', store.notifyActivity);\n        return () => document.removeEventListener('mousemove', store.notifyActivity);\n    }, [active, isMobile, store]);\n\n    // mobile: после запуска тулбары показываются и прячутся вместе с контролами (по их таймеру и тапу по видео).\n    // Уход со слайда или сброс видео отключает источник — тулбары возвращаются\n    const syncTools = active && isMobile && started;\n    useEffect(() => {\n        if (!syncTools) {\n            return undefined;\n        }\n        const source = globalContext.toolsVisibility.attachSource();\n        const sync = () => source.setVisible(store.getState().controlsVisible);\n        sync();\n        const unsubscribe = store.subscribe(sync);\n        return () => {\n            unsubscribe();\n            source.detach();\n        };\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>{active && <Video.Controls />}</Video.Player>\n        </VideoPlayerHostContext.Provider>\n    );\n};\n\nexport const VideoItemBody: FC<VideoItemInternalProps> = ({ index, description, ...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                    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}\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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"}

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-BOgoSXlr.js';
+import '../media-viewer-OWOdMZcE.js';
 import '@hh.ru/magritte-ui-typography';
 import './hooks/useVirtualization.js';
 import './VideoItemBody.js';

package/internal/toolsVisibility.d.ts

@@ -1,26 +1,27 @@
 import { type MotionValue } from 'motion/react';
+import { type VideoControlsPin, type VideoControlsVisibilityHost } from '@hh.ru/magritte-ui-video/internal/store';
 /** Задержка автоскрытия тулбаров без активности (desktop) */
 export declare const HIDE_TOOLS_DELAY_MS = 6000;
-/** Внешний источник видимости тулбаров */
-export interface ToolsVisibilitySource {
-    setVisible: (visible: boolean) => void;
-    detach: VoidFunction;
-}
-export interface ToolsVisibility {
+export interface ToolsVisibility extends VideoControlsVisibilityHost {
     /** Активность пользователя (движение мыши, клик): показать тулбары и перезапустить автоскрытие */
     notifyActivity: VoidFunction;
-    /** Тап по свободной области (mobile): показать или спрятать тулбары */
+    /** Тап по свободной области или по видео (mobile): показать или спрятать тулбары */
     toggle: VoidFunction;
     /** Автоскрытие по бездействию: включено на desktop */
     setAutoHide: (enabled: boolean) => void;
+    /** Тулбары видны */
+    isVisible: () => boolean;
+    /** Подписка на видимость: по ней показываются и прячутся контролы видео */
+    subscribe: (listener: (visible: boolean) => void) => VoidFunction;
     /**
-     * Подключить внешний источник видимости (контролы видео на mobile). Пока он подключён, видимость задаёт только
-     * он: активность, тапы и таймер не действуют. После отключения тулбары показываются, автоскрытие продолжается
+     * Исключение от видео: `shown` — показать и не прятать (фокус с клавиатуры в контролах, перетаскивание бегунка),
+     * `hidden` — спрятать и не показывать от активности (ускорение удержанием на desktop)
      */
-    attachSource: () => ToolsVisibilitySource;
+    setPin: (pin: VideoControlsPin) => void;
 }
 /**
- * Единственный владелец видимости тулбаров (`hideToolsProgress`: 0 — видны, 1 — спрятаны). Все, кто показывает
- * или прячет тулбары, делают это через него — так источники не перебивают анимации друг друга
+ * Единственный владелец видимости тулбаров (`hideToolsProgress`: 0 — видны, 1 — спрятаны) и контролов видео текущего
+ * слайда. Все, кто показывает или прячет тулбары, делают это через него — так источники не перебивают анимации друг
+ * друга, а контролы видео показываются и прячутся вместе с тулбарами
  */
 export declare const createToolsVisibility: (progress: MotionValue<number>) => ToolsVisibility;

package/internal/toolsVisibility.js

@@ -9,7 +9,8 @@ const createToolsVisibility = (progress) => {
   let target = Math.round(progress.get());
   let autoHide = false;
   let timer = null;
-  let source = null;
+  let pin = null;
+  const listeners = /* @__PURE__ */ new Set();
   const animateTo = (visible, duration) => {
     const nextTarget = visible ? 0 : 1;
     if (nextTarget === target) {
@@ -17,6 +18,7 @@ const createToolsVisibility = (progress) => {
     }
     target = nextTarget;
     animate(progress, nextTarget, { duration, ease: EASE_BASE });
+    listeners.forEach((listener) => listener(visible));
   };
   const clearTimer = () => {
     if (timer !== null) {
@@ -26,7 +28,7 @@ const createToolsVisibility = (progress) => {
   };
   const restartTimer = () => {
     clearTimer();
-    if (autoHide && !source) {
+    if (autoHide && pin === null) {
       timer = setTimeout(() => {
         timer = null;
         animateTo(false, durationOf("magritte-semantic-animation-time-l"));
@@ -35,42 +37,39 @@ const createToolsVisibility = (progress) => {
   };
   return {
     notifyActivity: () => {
-      if (source) {
+      if (pin === "hidden") {
         return;
       }
       animateTo(true, durationOf("magritte-semantic-animation-time-l"));
       restartTimer();
     },
     toggle: () => {
-      if (source) {
+      if (pin === "hidden") {
         return;
       }
-      animateTo(target === 1, durationOf("magritte-semantic-animation-time-m"));
+      animateTo(pin === "shown" || target === 1, durationOf("magritte-semantic-animation-time-m"));
       restartTimer();
     },
     setAutoHide: (enabled) => {
       autoHide = enabled;
       restartTimer();
     },
-    attachSource: () => {
-      const token = {};
-      source = token;
-      clearTimer();
-      return {
-        setVisible: (visible) => {
-          if (source === token) {
-            animateTo(visible, durationOf("magritte-semantic-animation-time-m"));
-          }
-        },
-        detach: () => {
-          if (source !== token) {
-            return;
-          }
-          source = null;
-          animateTo(true, durationOf("magritte-semantic-animation-time-m"));
-          restartTimer();
-        }
+    isVisible: () => target === 0,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
       };
+    },
+    setPin: (nextPin) => {
+      if (pin === nextPin) {
+        return;
+      }
+      pin = nextPin;
+      if (pin !== null) {
+        animateTo(pin === "shown", durationOf("magritte-semantic-animation-time-m"));
+      }
+      restartTimer();
     }
   };
 };

package/internal/toolsVisibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolsVisibility.js","sources":["src/internal/toolsVisibility.ts"],"sourcesContent":["import { animate, type MotionValue } from 'motion/react';\n\nimport CoreTokens from '@hh.ru/magritte-design-tokens/core-tokens';\nimport { EASE_BASE } from '@hh.ru/magritte-ui-media-viewer/internal/animations';\n\n/** Задержка автоскрытия тулбаров без активности (desktop) */\nexport const HIDE_TOOLS_DELAY_MS = 6000;\n\n/** Внешний источник видимости тулбаров */\nexport interface ToolsVisibilitySource {\n    setVisible: (visible: boolean) => void;\n    detach: VoidFunction;\n}\n\nexport interface ToolsVisibility {\n    /** Активность пользователя (движение мыши, клик): показать тулбары и перезапустить автоскрытие */\n    notifyActivity: VoidFunction;\n    /** Тап по свободной области (mobile): показать или спрятать тулбары */\n    toggle: VoidFunction;\n    /** Автоскрытие по бездействию: включено на desktop */\n    setAutoHide: (enabled: boolean) => void;\n    /**\n     * Подключить внешний источник видимости (контролы видео на mobile). Пока он подключён, видимость задаёт только\n     * он: активность, тапы и таймер не действуют. После отключения тулбары показываются, автоскрытие продолжается\n     */\n    attachSource: () => ToolsVisibilitySource;\n}\n\nconst durationOf = (token: 'magritte-semantic-animation-time-m' | 'magritte-semantic-animation-time-l'): number =>\n    CoreTokens[token].duration / 1000;\n\n/**\n * Единственный владелец видимости тулбаров (`hideToolsProgress`: 0 — видны, 1 — спрятаны). Все, кто показывает\n * или прячет тулбары, делают это через него — так источники не перебивают анимации друг друга\n */\nexport const createToolsVisibility = (progress: MotionValue<number>): ToolsVisibility => {\n    let target = Math.round(progress.get());\n    let autoHide = false;\n    let timer: ReturnType<typeof setTimeout> | null = null;\n    let source: object | null = null;\n\n    const animateTo = (visible: boolean, duration: number): void => {\n        const nextTarget = visible ? 0 : 1;\n        if (nextTarget === target) {\n            return;\n        }\n        target = nextTarget;\n        animate(progress, nextTarget, { duration, ease: EASE_BASE });\n    };\n\n    const clearTimer = (): void => {\n        if (timer !== null) {\n            clearTimeout(timer);\n            timer = null;\n        }\n    };\n\n    const restartTimer = (): void => {\n        clearTimer();\n        if (autoHide && !source) {\n            timer = setTimeout(() => {\n                timer = null;\n                animateTo(false, durationOf('magritte-semantic-animation-time-l'));\n            }, HIDE_TOOLS_DELAY_MS);\n        }\n    };\n\n    return {\n        notifyActivity: () => {\n            if (source) {\n                return;\n            }\n            animateTo(true, durationOf('magritte-semantic-animation-time-l'));\n            restartTimer();\n        },\n        toggle: () => {\n            if (source) {\n                return;\n            }\n            animateTo(target === 1, durationOf('magritte-semantic-animation-time-m'));\n            restartTimer();\n        },\n        setAutoHide: (enabled) => {\n            autoHide = enabled;\n            restartTimer();\n        },\n        attachSource: () => {\n            const token = {};\n            source = token;\n            clearTimer();\n            return {\n                setVisible: (visible) => {\n                    if (source === token) {\n                        animateTo(visible, durationOf('magritte-semantic-animation-time-m'));\n                    }\n                },\n                detach: () => {\n                    if (source !== token) {\n                        return;\n                    }\n                    source = null;\n                    animateTo(true, durationOf('magritte-semantic-animation-time-m'));\n                    restartTimer();\n                },\n            };\n        },\n    };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolsVisibility.js","sources":["src/internal/toolsVisibility.ts"],"sourcesContent":["import { animate, type MotionValue } from 'motion/react';\n\nimport CoreTokens from '@hh.ru/magritte-design-tokens/core-tokens';\nimport { EASE_BASE } from '@hh.ru/magritte-ui-media-viewer/internal/animations';\nimport { type VideoControlsPin, type VideoControlsVisibilityHost } from '@hh.ru/magritte-ui-video/internal/store';\n\n/** Задержка автоскрытия тулбаров без активности (desktop) */\nexport const HIDE_TOOLS_DELAY_MS = 6000;\n\nexport interface ToolsVisibility extends VideoControlsVisibilityHost {\n    /** Активность пользователя (движение мыши, клик): показать тулбары и перезапустить автоскрытие */\n    notifyActivity: VoidFunction;\n    /** Тап по свободной области или по видео (mobile): показать или спрятать тулбары */\n    toggle: VoidFunction;\n    /** Автоскрытие по бездействию: включено на desktop */\n    setAutoHide: (enabled: boolean) => void;\n    /** Тулбары видны */\n    isVisible: () => boolean;\n    /** Подписка на видимость: по ней показываются и прячутся контролы видео */\n    subscribe: (listener: (visible: boolean) => void) => VoidFunction;\n    /**\n     * Исключение от видео: `shown` — показать и не прятать (фокус с клавиатуры в контролах, перетаскивание бегунка),\n     * `hidden` — спрятать и не показывать от активности (ускорение удержанием на desktop)\n     */\n    setPin: (pin: VideoControlsPin) => void;\n}\n\nconst durationOf = (token: 'magritte-semantic-animation-time-m' | 'magritte-semantic-animation-time-l'): number =>\n    CoreTokens[token].duration / 1000;\n\n/**\n * Единственный владелец видимости тулбаров (`hideToolsProgress`: 0 — видны, 1 — спрятаны) и контролов видео текущего\n * слайда. Все, кто показывает или прячет тулбары, делают это через него — так источники не перебивают анимации друг\n * друга, а контролы видео показываются и прячутся вместе с тулбарами\n */\nexport const createToolsVisibility = (progress: MotionValue<number>): ToolsVisibility => {\n    let target = Math.round(progress.get());\n    let autoHide = false;\n    let timer: ReturnType<typeof setTimeout> | null = null;\n    let pin: VideoControlsPin = null;\n    const listeners = new Set<(visible: boolean) => void>();\n\n    const animateTo = (visible: boolean, duration: number): void => {\n        const nextTarget = visible ? 0 : 1;\n        if (nextTarget === target) {\n            return;\n        }\n        target = nextTarget;\n        animate(progress, nextTarget, { duration, ease: EASE_BASE });\n        listeners.forEach((listener) => listener(visible));\n    };\n\n    const clearTimer = (): void => {\n        if (timer !== null) {\n            clearTimeout(timer);\n            timer = null;\n        }\n    };\n\n    const restartTimer = (): void => {\n        clearTimer();\n        if (autoHide && pin === null) {\n            timer = setTimeout(() => {\n                timer = null;\n                animateTo(false, durationOf('magritte-semantic-animation-time-l'));\n            }, HIDE_TOOLS_DELAY_MS);\n        }\n    };\n\n    return {\n        notifyActivity: () => {\n            if (pin === 'hidden') {\n                return;\n            }\n            animateTo(true, durationOf('magritte-semantic-animation-time-l'));\n            restartTimer();\n        },\n        toggle: () => {\n            if (pin === 'hidden') {\n                return;\n            }\n            animateTo(pin === 'shown' || target === 1, durationOf('magritte-semantic-animation-time-m'));\n            restartTimer();\n        },\n        setAutoHide: (enabled) => {\n            autoHide = enabled;\n            restartTimer();\n        },\n        isVisible: () => target === 0,\n        subscribe: (listener) => {\n            listeners.add(listener);\n            return () => {\n                listeners.delete(listener);\n            };\n        },\n        setPin: (nextPin) => {\n            if (pin === nextPin) {\n                return;\n            }\n            pin = nextPin;\n            if (pin !== null) {\n                animateTo(pin === 'shown', durationOf('magritte-semantic-animation-time-m'));\n            }\n            restartTimer();\n        },\n    };\n};\n"],"names":[],"mappings":"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"}

package/media-viewer-OWOdMZcE.js

@@ -0,0 +1,5 @@
+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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-media-viewer",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "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.61",
+    "@hh.ru/magritte-ui-bottom-sheet": "9.4.62",
     "@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.1",
+    "@hh.ru/magritte-ui-video": "1.0.2",
     "@use-gesture/react": "10.3.1"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
     "motion": "^12.23.12",
     "react": ">=18.2.0"
   },
-  "gitHead": "d3182e9c5671dcf62e80e756b6701ec9f72cd7d0"
+  "gitHead": "cf2f64cd7ddcc1cdc569e66eb3eb88e54e1df97a"
 }

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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.js';
 import '../internal/ImagesLoader.js';
 import '../internal/toolsVisibility.js';
 import '@hh.ru/magritte-design-tokens/core-tokens';
@@ -17,7 +17,14 @@ const Footer = ({ children }) => {
     [globalContext]
   );
   return /* @__PURE__ */ jsxs("div", { "data-media-viewer-interactive": "true", className: styles.footer, children: [
-    /* @__PURE__ */ jsx(motion.div, { ref: setVideoControlsSlot, style: { opacity: globalContext.footerVideoControlsOpacity } }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref: setVideoControlsSlot,
+        className: styles.footerVideoControls,
+        style: { opacity: globalContext.footerVideoControlsOpacity }
+      }
+    ),
     children
   ] });
 };

package/public/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["src/public/Footer.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useCallback } from 'react';\nimport { motion } from 'motion/react';\n\nimport { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\n\nimport styles from './media-viewer.less';\n\nexport const Footer: FC<PropsWithChildren> = ({ children }) => {\n    const globalContext = useMediaViewerContext();\n    // mobile: контролы видео — часть тулбара, двигаются и прячутся вместе с ним\n    const setVideoControlsSlot = useCallback(\n        (element: HTMLDivElement | null) => globalContext.footerVideoControlsSlot.set(element),\n        [globalContext]\n    );\n\n    return (\n        <div data-media-viewer-interactive=\"true\" className={styles.footer}>\n            <motion.div ref={setVideoControlsSlot} style={{ opacity: globalContext.footerVideoControlsOpacity }} />\n            {children}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAOO,MAAM,MAAgC,GAAA,CAAC,EAAE,QAAA,EAAe,KAAA;AAC3D,EAAA,MAAM,gBAAgB,qBAAsB,EAAA,CAAA;AAE5C,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IACzB,CAAC,OAAA,KAAmC,aAAc,CAAA,uBAAA,CAAwB,IAAI,OAAO,CAAA;AAAA,IACrF,CAAC,aAAa,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,4BACK,KAAI,EAAA,EAAA,+BAAA,EAA8B,MAAO,EAAA,SAAA,EAAW,OAAO,MACxD,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,CAAO,GAAP,EAAA,EAAW,GAAK,EAAA,oBAAA,EAAsB,OAAO,EAAE,OAAA,EAAS,aAAc,CAAA,0BAAA,EAA8B,EAAA,CAAA;AAAA,IACpG,QAAA;AAAA,GACL,EAAA,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"Footer.js","sources":["src/public/Footer.tsx"],"sourcesContent":["import { FC, PropsWithChildren, useCallback } from 'react';\nimport { motion } from 'motion/react';\n\nimport { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\n\nimport styles from './media-viewer.less';\n\nexport const Footer: FC<PropsWithChildren> = ({ children }) => {\n    const globalContext = useMediaViewerContext();\n    // mobile: контролы видео — часть тулбара, двигаются и прячутся вместе с ним\n    const setVideoControlsSlot = useCallback(\n        (element: HTMLDivElement | null) => globalContext.footerVideoControlsSlot.set(element),\n        [globalContext]\n    );\n\n    return (\n        <div data-media-viewer-interactive=\"true\" className={styles.footer}>\n            <motion.div\n                ref={setVideoControlsSlot}\n                className={styles.footerVideoControls}\n                style={{ opacity: globalContext.footerVideoControlsOpacity }}\n            />\n            {children}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAOO,MAAM,MAAgC,GAAA,CAAC,EAAE,QAAA,EAAe,KAAA;AAC3D,EAAA,MAAM,gBAAgB,qBAAsB,EAAA,CAAA;AAE5C,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IACzB,CAAC,OAAA,KAAmC,aAAc,CAAA,uBAAA,CAAwB,IAAI,OAAO,CAAA;AAAA,IACrF,CAAC,aAAa,CAAA;AAAA,GAClB,CAAA;AAEA,EAAA,4BACK,KAAI,EAAA,EAAA,+BAAA,EAA8B,MAAO,EAAA,SAAA,EAAW,OAAO,MACxD,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAO,CAAA,GAAA;AAAA,MAAP;AAAA,QACG,GAAK,EAAA,oBAAA;AAAA,QACL,WAAW,MAAO,CAAA,mBAAA;AAAA,QAClB,KAAO,EAAA,EAAE,OAAS,EAAA,aAAA,CAAc,0BAA2B,EAAA;AAAA,OAAA;AAAA,KAC/D;AAAA,IACC,QAAA;AAAA,GACL,EAAA,CAAA,CAAA;AAER;;;;"}

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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import { s as styles } from '../media-viewer-OWOdMZcE.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-BOgoSXlr.js';
+import '../media-viewer-OWOdMZcE.js';
 import '@hh.ru/magritte-ui-video';
 import '@hh.ru/magritte-ui-video/internal/context';
 import '../internal/ImagesLoader.js';

package/media-viewer-BOgoSXlr.js

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

package/media-viewer-BOgoSXlr.js.map

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