@hh.ru/magritte-ui-video 1.0.1 → 1.0.3

package/index.css

@@ -21,7 +21,7 @@
 .magritte-zp-day-theme{
   --magritte-color-background-accent-v26-0-2:#7195AF;
 }
-.magritte-player___IHHy5_1-0-1{
+.magritte-player___IHHy5_1-0-3{
   position:relative;
   width:100%;
   overflow:hidden;
@@ -32,23 +32,23 @@
   -webkit-user-select:none;
   -webkit-touch-callout:none;
 }
-.magritte-player-fit___TX-6X_1-0-1{
+.magritte-player-fit___TX-6X_1-0-3{
   height:100%;
 }
-.magritte-player-embedded___GNvRb_1-0-1{
+.magritte-player-embedded___GNvRb_1-0-3{
   overflow:visible;
   background-color:transparent;
 }
-.magritte-video___4cS-u_1-0-1{
+.magritte-video___4cS-u_1-0-3{
   display:block;
   width:100%;
   height:100%;
   object-fit:contain;
 }
-.magritte-video-hidden___agqVq_1-0-1{
+.magritte-video-hidden___agqVq_1-0-3{
   visibility:hidden;
 }
-.magritte-overlay-button___MIRAP_1-0-1{
+.magritte-overlay-button___MIRAP_1-0-3{
   position:absolute;
   top:50%;
   left:50%;
@@ -58,7 +58,7 @@
   backdrop-filter:blur(24px);
   transition:opacity var(--magritte-semantic-animation-time-m-duration-v26-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v26-0-2);
 }
-.magritte-duration___ND1ei_1-0-1{
+.magritte-duration___ND1ei_1-0-3{
   position:absolute;
   right:16px;
   bottom:16px;
@@ -69,7 +69,7 @@
   backdrop-filter:blur(24px);
   pointer-events:none;
 }
-.magritte-seek-indicator___VJQBC_1-0-1{
+.magritte-seek-indicator___VJQBC_1-0-3{
   position:absolute;
   top:50%;
   display:flex;
@@ -78,25 +78,25 @@
   transform:translateY(-50%);
   pointer-events:none;
 }
-.magritte-seek-indicator-forward___9C5gD_1-0-1{
+.magritte-seek-indicator-forward___9C5gD_1-0-3{
   right:40px;
 }
-.magritte-seek-indicator-backward___gIZ0E_1-0-1{
+.magritte-seek-indicator-backward___gIZ0E_1-0-3{
   left:40px;
   flex-direction:row-reverse;
   --magritte-ui-video-seek-arrow-shift:16px;
 }
-.magritte-seek-arrows___Ql1eP_1-0-1{
+.magritte-seek-arrows___Ql1eP_1-0-3{
   position:relative;
   display:flex;
 }
-.magritte-seek-arrow-incoming___oZxww_1-0-1{
+.magritte-seek-arrow-incoming___oZxww_1-0-3{
   position:absolute;
   inset:0;
   display:flex;
-  animation:magritte-seek-arrow-in___CB4-s_1-0-1 var(--magritte-semantic-animation-time-m-duration-v26-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v26-0-2) both;
+  animation:magritte-seek-arrow-in___CB4-s_1-0-3 var(--magritte-semantic-animation-time-m-duration-v26-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v26-0-2) both;
 }
-@keyframes magritte-seek-arrow-in___CB4-s_1-0-1{
+@keyframes magritte-seek-arrow-in___CB4-s_1-0-3{
   from{
     transform:translateX(var(--magritte-ui-video-seek-arrow-shift, -16px));
   }
@@ -104,7 +104,7 @@
     transform:translateX(0);
   }
 }
-.magritte-boost-indicator___ujllx_1-0-1{
+.magritte-boost-indicator___ujllx_1-0-3{
   position:absolute;
   top:24px;
   left:50%;
@@ -118,7 +118,7 @@
   transform:translateX(-50%);
   pointer-events:none;
 }
-.magritte-loader___qVu0P_1-0-1{
+.magritte-loader___qVu0P_1-0-3{
   position:absolute;
   top:50%;
   left:50%;
@@ -126,7 +126,7 @@
   display:flex;
   pointer-events:none;
 }
-.magritte-error___Rm7uG_1-0-1{
+.magritte-error___Rm7uG_1-0-3{
   position:absolute;
   inset:0;
   display:flex;
@@ -135,12 +135,15 @@
   padding:16px;
   overflow:auto;
 }
-.magritte-overlay-button-hidden___AoGFc_1-0-1,
-.magritte-controls___pKoSN_1-0-1.magritte-controls-hidden___bePTD_1-0-1{
+.magritte-player-embedded___GNvRb_1-0-3 .magritte-error___Rm7uG_1-0-3{
+  touch-action:none;
+}
+.magritte-overlay-button-hidden___AoGFc_1-0-3,
+.magritte-controls___pKoSN_1-0-3.magritte-controls-hidden___bePTD_1-0-3{
   opacity:0;
   pointer-events:none;
 }
-.magritte-controls___pKoSN_1-0-1{
+.magritte-controls___pKoSN_1-0-3{
   display:flex;
   flex-direction:column;
   gap:4px;
@@ -148,52 +151,52 @@
   pointer-events:auto;
   transition:opacity var(--magritte-semantic-animation-time-m-duration-v26-0-2) var(--magritte-semantic-animation-ease-base-timing-function-v26-0-2);
 }
-.magritte-controls-mobile___tdKGT_1-0-1{
+.magritte-controls-mobile___tdKGT_1-0-3{
   gap:6px;
   padding:4px 16px 8px;
 }
-.magritte-controls-overlay___mRsJL_1-0-1{
+.magritte-controls-overlay___mRsJL_1-0-3{
   position:absolute;
   right:0;
   bottom:0;
   left:0;
 }
-.magritte-controls-row___2sdJg_1-0-1{
+.magritte-controls-row___2sdJg_1-0-3{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:8px;
 }
-.magritte-controls-group-start___yY9ZA_1-0-1,
-.magritte-controls-group-end___ziIm8_1-0-1{
+.magritte-controls-group-start___yY9ZA_1-0-3,
+.magritte-controls-group-end___ziIm8_1-0-3{
   display:flex;
   align-items:center;
   min-width:0;
 }
-.magritte-controls-group-start___yY9ZA_1-0-1{
+.magritte-controls-group-start___yY9ZA_1-0-3{
   gap:12px;
 }
-.magritte-controls-group-end___ziIm8_1-0-1{
+.magritte-controls-group-end___ziIm8_1-0-3{
   gap:8px;
 }
-.magritte-controls-mobile___tdKGT_1-0-1 .magritte-controls-group-end___ziIm8_1-0-1{
+.magritte-controls-mobile___tdKGT_1-0-3 .magritte-controls-group-end___ziIm8_1-0-3{
   gap:4px;
 }
-.magritte-control-pill___hK8Mv_1-0-1,
-.magritte-controls-time___e9zoz_1-0-1,
-.magritte-controls-volume___o4ajR_1-0-1{
+.magritte-control-pill___hK8Mv_1-0-3,
+.magritte-controls-time___e9zoz_1-0-3,
+.magritte-controls-volume___o4ajR_1-0-3{
   display:flex;
   align-items:center;
   justify-content:center;
   border-radius:999px;
   backdrop-filter:blur(24px);
 }
-.magritte-control-pill-bare___lU9ev_1-0-1{
+.magritte-control-pill-bare___lU9ev_1-0-3{
   backdrop-filter:none;
 }
-.magritte-control-button___VJ2Qr_1-0-1,
-.magritte-controls-time___e9zoz_1-0-1,
-.magritte-controls-volume___o4ajR_1-0-1{
+.magritte-control-button___VJ2Qr_1-0-3,
+.magritte-controls-time___e9zoz_1-0-3,
+.magritte-controls-volume___o4ajR_1-0-3{
   box-sizing:border-box;
   min-width:48px;
   min-height:48px;
@@ -201,27 +204,27 @@
   border-radius:999px;
   background-color:var(--magritte-color-background-overlay-v26-0-2);
 }
-.magritte-control-button___VJ2Qr_1-0-1{
+.magritte-control-button___VJ2Qr_1-0-3{
   display:flex;
   align-items:center;
   justify-content:center;
   border-width:0;
   cursor:pointer;
 }
-.magritte-control-button___VJ2Qr_1-0-1.focus-visible{
+.magritte-control-button___VJ2Qr_1-0-3.focus-visible{
   outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v26-0-2);
 }
-.magritte-controls-time___e9zoz_1-0-1{
+.magritte-controls-time___e9zoz_1-0-3{
   padding:12px 16px;
   white-space:nowrap;
 }
-.magritte-controls-mobile___tdKGT_1-0-1 .magritte-controls-time___e9zoz_1-0-1{
+.magritte-controls-mobile___tdKGT_1-0-3 .magritte-controls-time___e9zoz_1-0-3{
   padding:12px;
 }
-.magritte-controls-volume___o4ajR_1-0-1{
+.magritte-controls-volume___o4ajR_1-0-3{
   gap:6px;
 }
-.magritte-scrubber___-K3ik_1-0-1{
+.magritte-scrubber___-K3ik_1-0-3{
   position:relative;
   display:flex;
   align-items:center;
@@ -232,32 +235,32 @@
   --magritte-ui-video-scrubber-track-height:4px;
   --magritte-ui-video-scrubber-thumb-size:8px;
 }
-.magritte-controls-mobile___tdKGT_1-0-1 .magritte-scrubber___-K3ik_1-0-1::before{
+.magritte-controls-mobile___tdKGT_1-0-3 .magritte-scrubber___-K3ik_1-0-3::before{
   content:'';
   position:absolute;
   inset:calc(-1 * 20px) 0 calc(-1 * 6px);
 }
-.magritte-scrubber___-K3ik_1-0-1.focus-visible{
+.magritte-scrubber___-K3ik_1-0-3.focus-visible{
   outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v26-0-2);
   border-radius:4px;
 }
-.magritte-scrubber___-K3ik_1-0-1[data-scrubbing]{
+.magritte-scrubber___-K3ik_1-0-3[data-scrubbing]{
   --magritte-ui-video-scrubber-track-height:6px;
   --magritte-ui-video-scrubber-thumb-size:12px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout  .magritte-scrubber___-K3ik_1-0-1:hover{
+  body.magritte-old-layout  .magritte-scrubber___-K3ik_1-0-3:hover{
     --magritte-ui-video-scrubber-track-height:6px;
     --magritte-ui-video-scrubber-thumb-size:12px;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout)  .magritte-scrubber___-K3ik_1-0-1:hover{
+  body:not(.magritte-old-layout)  .magritte-scrubber___-K3ik_1-0-3:hover{
     --magritte-ui-video-scrubber-track-height:6px;
     --magritte-ui-video-scrubber-thumb-size:12px;
   }
 }
-.magritte-scrubber-track___ki1zV_1-0-1{
+.magritte-scrubber-track___ki1zV_1-0-3{
   position:relative;
   flex-grow:1;
   height:var(--magritte-ui-video-scrubber-track-height);
@@ -265,21 +268,21 @@
   border-radius:999px;
   background-color:var(--magritte-color-background-overlay-v26-0-2);
 }
-.magritte-scrubber-buffered___ufvLe_1-0-1,
-.magritte-scrubber-progress___ZIyew_1-0-1{
+.magritte-scrubber-buffered___ufvLe_1-0-3,
+.magritte-scrubber-progress___ZIyew_1-0-3{
   position:absolute;
   inset:0;
   transform-origin:left;
 }
-.magritte-scrubber-buffered___ufvLe_1-0-1{
+.magritte-scrubber-buffered___ufvLe_1-0-3{
   background-color:var(--magritte-color-stroke-neutral-v26-0-2);
   transform:scaleX(var(--magritte-ui-video-scrubber-buffered, 0));
 }
-.magritte-scrubber-progress___ZIyew_1-0-1{
+.magritte-scrubber-progress___ZIyew_1-0-3{
   background-color:var(--magritte-color-background-accent-v26-0-2);
   transform:scaleX(var(--magritte-ui-video-scrubber-progress, 0));
 }
-.magritte-scrubber-thumb___VXyPP_1-0-1{
+.magritte-scrubber-thumb___VXyPP_1-0-3{
   position:absolute;
   top:50%;
   left:calc(var(--magritte-ui-video-scrubber-progress, 0) * 100%);
@@ -290,7 +293,7 @@
   transform:translate(-50%, -50%);
   pointer-events:none;
 }
-.magritte-scrubber-timecode___M-syA_1-0-1{
+.magritte-scrubber-timecode___M-syA_1-0-3{
   position:absolute;
   bottom:calc(100% + 8px);
   left:calc(var(--magritte-ui-video-scrubber-timecode, 0) * 100%);
@@ -302,20 +305,20 @@
   white-space:nowrap;
   pointer-events:none;
 }
-.magritte-scrubber___-K3ik_1-0-1[data-scrubbing] .magritte-scrubber-timecode___M-syA_1-0-1{
+.magritte-scrubber___-K3ik_1-0-3[data-scrubbing] .magritte-scrubber-timecode___M-syA_1-0-3{
   display:flex;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout  .magritte-scrubber___-K3ik_1-0-1:hover .magritte-scrubber-timecode___M-syA_1-0-1{
+  body.magritte-old-layout  .magritte-scrubber___-K3ik_1-0-3:hover .magritte-scrubber-timecode___M-syA_1-0-3{
     display:flex;
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout)  .magritte-scrubber___-K3ik_1-0-1:hover .magritte-scrubber-timecode___M-syA_1-0-1{
+  body:not(.magritte-old-layout)  .magritte-scrubber___-K3ik_1-0-3:hover .magritte-scrubber-timecode___M-syA_1-0-3{
     display:flex;
   }
 }
-.magritte-volume-slider___qE2P7_1-0-1{
+.magritte-volume-slider___qE2P7_1-0-3{
   display:flex;
   align-items:center;
   width:64px;
@@ -324,25 +327,25 @@
   touch-action:none;
   outline:none;
 }
-.magritte-volume-slider___qE2P7_1-0-1.focus-visible{
+.magritte-volume-slider___qE2P7_1-0-3.focus-visible{
   outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v26-0-2);
   border-radius:4px;
 }
-.magritte-volume-track___up8nd_1-0-1{
+.magritte-volume-track___up8nd_1-0-3{
   position:relative;
   flex-grow:1;
   height:4px;
   border-radius:999px;
   background-color:var(--magritte-color-background-overlay-v26-0-2);
 }
-.magritte-volume-value___aUSuU_1-0-1{
+.magritte-volume-value___aUSuU_1-0-3{
   position:relative;
   width:calc(var(--magritte-ui-video-volume, 1) * 100%);
   height:100%;
   border-radius:999px;
   background-color:var(--magritte-color-stroke-neutral-v26-0-2);
 }
-.magritte-volume-value___aUSuU_1-0-1::after{
+.magritte-volume-value___aUSuU_1-0-3::after{
   content:'';
   position:absolute;
   top:50%;

package/index.js

@@ -11,7 +11,7 @@ import '@hh.ru/magritte-ui-icon/icon';
 import '@hh.ru/magritte-ui-typography';
 import './internal/ControlButton.js';
 import '@hh.ru/magritte-ui-tooltip';
-import './video-C-iklAZX.js';
+import './video-B0giLQLN.js';
 import './internal/Scrubber.js';
 import './internal/formatTime.js';
 import './internal/useSliderPointer.js';
@@ -30,4 +30,5 @@ import '@hh.ru/magritte-ui-placeholder';
 import './internal/SeekIndicator.js';
 import './internal/store.js';
 import './internal/useCanvasGestures.js';
+import './internal/useViewportVisibility.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/internal/ControlButton.js

@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import classnames from 'classnames';
 import { TooltipHover } from '@hh.ru/magritte-ui-tooltip';
-import { s as styles } from '../video-C-iklAZX.js';
+import { s as styles } from '../video-B0giLQLN.js';
 
 const ControlButton = ({
   control,

package/internal/Scrubber.js

@@ -6,7 +6,7 @@ import { Text } from '@hh.ru/magritte-ui-typography';
 import { formatTime, formatDuration } from './formatTime.js';
 import { useSliderPointer } from './useSliderPointer.js';
 import { SEEK_STEP_SECONDS } from './useVideoHotkeys.js';
-import { s as styles } from '../video-C-iklAZX.js';
+import { s as styles } from '../video-B0giLQLN.js';
 import '@hh.ru/magritte-common-keyboard';
 
 const KEYBOARD_SEEK_STEP = SEEK_STEP_SECONDS;

package/internal/SeekIndicator.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import classnames from 'classnames';
 import { ChevronRightOutlinedSize24, ChevronLeftOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { Text } from '@hh.ru/magritte-ui-typography';
-import { s as styles } from '../video-C-iklAZX.js';
+import { s as styles } from '../video-B0giLQLN.js';
 
 const SeekIndicator = ({ direction, seconds, count }) => {
   const forward = direction > 0;

package/internal/VolumeSlider.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useTranslation } from '@hh.ru/magritte-common-use-translation';
 import { useVideoState } from './context.js';
 import { useSliderPointer } from './useSliderPointer.js';
-import { s as styles } from '../video-C-iklAZX.js';
+import { s as styles } from '../video-B0giLQLN.js';
 import 'react';
 
 const KEYBOARD_VOLUME_STEP = 0.1;

package/internal/context.d.ts

@@ -5,6 +5,10 @@ export interface VideoContextValue {
     preview?: string;
     /** Длительность из пропсов — до загрузки метаданных */
     duration?: number;
+    /** `false` — неинтерактивный режим: без кнопок, контролов, жестов и горячих клавиш */
+    interactive: boolean;
+    /** Плеер сообщает стору свою видимость во вьюпорте (автовоспроизведение, автопауза) */
+    observeViewport: boolean;
 }
 export declare const VideoContext: import("react").Context<VideoContextValue | null>;
 export declare const useVideoContext: (componentName: string) => VideoContextValue;
@@ -18,5 +22,10 @@ export declare const VideoPlayerContext: import("react").Context<boolean>;
  */
 export interface VideoPlayerHost {
     renderVideo: (video: ReactElement) => ReactNode;
+    /**
+     * Атрибуты кнопки повтора на экране ошибки: в ошибке тапы по плееру обрабатывает хост, а по ним он отличает
+     * нажатие на кнопку от тапа по видео
+     */
+    retryButtonProps?: Record<`data-${string}`, string | boolean>;
 }
 export declare const VideoPlayerHostContext: import("react").Context<VideoPlayerHost | null>;

package/internal/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["src/internal/context.ts"],"sourcesContent":["import { createContext, type ReactElement, type ReactNode, useContext, useSyncExternalStore } from 'react';\n\nimport { type VideoState, type VideoStore } from '@hh.ru/magritte-ui-video/internal/store';\n\nexport interface VideoContextValue {\n    store: VideoStore;\n    preview?: string;\n    /** Длительность из пропсов — до загрузки метаданных */\n    duration?: number;\n}\n\nexport const VideoContext = createContext<VideoContextValue | null>(null);\n\nexport const useVideoContext = (componentName: string): VideoContextValue => {\n    const context = useContext(VideoContext);\n    if (!context) {\n        throw new Error(`${componentName} must be used within <Video>`);\n    }\n    return context;\n};\n\n/** Подписка на часть состояния: компонент перерендеривается, только когда она меняется */\nexport const useVideoState = <T>(store: VideoStore, selector: (state: VideoState) => T): T => {\n    const getSnapshot = () => selector(store.getState());\n    return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);\n};\n\n/** Части видео внутри `Video.Player` (например, `Video.Controls`) раскладываются поверх видео */\nexport const VideoPlayerContext = createContext(false);\n\n/**\n * Встраивание `Video.Player` в другой компонент дизайн-системы (вьювер медиа): хост оборачивает `<video>` в свою\n * разметку (например, трансформацию зума), оверлеи плеера остаются без неё. Только для внутреннего использования\n */\nexport interface VideoPlayerHost {\n    renderVideo: (video: ReactElement) => ReactNode;\n}\n\nexport const VideoPlayerHostContext = createContext<VideoPlayerHost | null>(null);\n"],"names":[],"mappings":";;AAWa,MAAA,YAAA,GAAe,cAAwC,IAAI,EAAA;AAE3D,MAAA,eAAA,GAAkB,CAAC,aAA6C,KAAA;AACzE,EAAM,MAAA,OAAA,GAAU,WAAW,YAAY,CAAA,CAAA;AACvC,EAAA,IAAI,CAAC,OAAS,EAAA;AACV,IAAA,MAAM,IAAI,KAAA,CAAM,CAAG,EAAA,aAAa,CAA8B,4BAAA,CAAA,CAAA,CAAA;AAAA,GAClE;AACA,EAAO,OAAA,OAAA,CAAA;AACX,EAAA;AAGa,MAAA,aAAA,GAAgB,CAAI,KAAA,EAAmB,QAA0C,KAAA;AAC1F,EAAA,MAAM,WAAc,GAAA,MAAM,QAAS,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AACnD,EAAA,OAAO,oBAAqB,CAAA,KAAA,CAAM,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACzE,EAAA;AAGa,MAAA,kBAAA,GAAqB,cAAc,KAAK,EAAA;AAUxC,MAAA,sBAAA,GAAyB,cAAsC,IAAI;;;;"}
+{"version":3,"file":"context.js","sources":["src/internal/context.ts"],"sourcesContent":["import { createContext, type ReactElement, type ReactNode, useContext, useSyncExternalStore } from 'react';\n\nimport { type VideoState, type VideoStore } from '@hh.ru/magritte-ui-video/internal/store';\n\nexport interface VideoContextValue {\n    store: VideoStore;\n    preview?: string;\n    /** Длительность из пропсов — до загрузки метаданных */\n    duration?: number;\n    /** `false` — неинтерактивный режим: без кнопок, контролов, жестов и горячих клавиш */\n    interactive: boolean;\n    /** Плеер сообщает стору свою видимость во вьюпорте (автовоспроизведение, автопауза) */\n    observeViewport: boolean;\n}\n\nexport const VideoContext = createContext<VideoContextValue | null>(null);\n\nexport const useVideoContext = (componentName: string): VideoContextValue => {\n    const context = useContext(VideoContext);\n    if (!context) {\n        throw new Error(`${componentName} must be used within <Video>`);\n    }\n    return context;\n};\n\n/** Подписка на часть состояния: компонент перерендеривается, только когда она меняется */\nexport const useVideoState = <T>(store: VideoStore, selector: (state: VideoState) => T): T => {\n    const getSnapshot = () => selector(store.getState());\n    return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);\n};\n\n/** Части видео внутри `Video.Player` (например, `Video.Controls`) раскладываются поверх видео */\nexport const VideoPlayerContext = createContext(false);\n\n/**\n * Встраивание `Video.Player` в другой компонент дизайн-системы (вьювер медиа): хост оборачивает `<video>` в свою\n * разметку (например, трансформацию зума), оверлеи плеера остаются без неё. Только для внутреннего использования\n */\nexport interface VideoPlayerHost {\n    renderVideo: (video: ReactElement) => ReactNode;\n    /**\n     * Атрибуты кнопки повтора на экране ошибки: в ошибке тапы по плееру обрабатывает хост, а по ним он отличает\n     * нажатие на кнопку от тапа по видео\n     */\n    retryButtonProps?: Record<`data-${string}`, string | boolean>;\n}\n\nexport const VideoPlayerHostContext = createContext<VideoPlayerHost | null>(null);\n"],"names":[],"mappings":";;AAea,MAAA,YAAA,GAAe,cAAwC,IAAI,EAAA;AAE3D,MAAA,eAAA,GAAkB,CAAC,aAA6C,KAAA;AACzE,EAAM,MAAA,OAAA,GAAU,WAAW,YAAY,CAAA,CAAA;AACvC,EAAA,IAAI,CAAC,OAAS,EAAA;AACV,IAAA,MAAM,IAAI,KAAA,CAAM,CAAG,EAAA,aAAa,CAA8B,4BAAA,CAAA,CAAA,CAAA;AAAA,GAClE;AACA,EAAO,OAAA,OAAA,CAAA;AACX,EAAA;AAGa,MAAA,aAAA,GAAgB,CAAI,KAAA,EAAmB,QAA0C,KAAA;AAC1F,EAAA,MAAM,WAAc,GAAA,MAAM,QAAS,CAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AACnD,EAAA,OAAO,oBAAqB,CAAA,KAAA,CAAM,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACzE,EAAA;AAGa,MAAA,kBAAA,GAAqB,cAAc,KAAK,EAAA;AAexC,MAAA,sBAAA,GAAyB,cAAsC,IAAI;;;;"}

package/internal/store.d.ts

@@ -3,6 +3,11 @@ export interface VideoState {
     status: VideoStatus;
     /** Воспроизведение запущено, но видео ждёт данные */
     waiting: boolean;
+    /**
+     * Повторная попытка после ошибки: до начала воспроизведения видео и превью не показываются — лоадер на тёмном
+     * фоне, а не мелькание превью перед новой ошибкой
+     */
+    retrying: boolean;
     /** Длительность из метаданных; `null`, пока неизвестна или бесконечна (live) */
     duration: number | null;
     /** Натуральный размер видео из метаданных */
@@ -27,6 +32,25 @@ export interface VideoState {
     /** Куда переносится индикатор ускорения вне fullscreen; `null` — вверху плеера */
     indicatorContainer: HTMLElement | null;
 }
+/**
+ * Исключение из правил владельца видимости контролов: `shown` — показать и не прятать (фокус с клавиатуры в контролах,
+ * перетаскивание бегунка), `hidden` — спрятать и не показывать от активности (ускорение удержанием на desktop),
+ * `null` — исключений нет
+ */
+export type VideoControlsPin = 'shown' | 'hidden' | null;
+/**
+ * Внешний владелец видимости контролов (тулбары вьювера медиа). Пока он подключён, контролы показываются и прячутся
+ * только по нему: собственного таймера у плеера нет, активность и тапы по видео передаются ему
+ */
+export interface VideoControlsVisibilityHost {
+    isVisible: () => boolean;
+    subscribe: (listener: (visible: boolean) => void) => VoidFunction;
+    /** Активность пользователя в плеере: движение мыши, нажатия, горячие клавиши */
+    notifyActivity: VoidFunction;
+    /** Тап по видео (mobile) */
+    toggle: VoidFunction;
+    setPin: (pin: VideoControlsPin) => void;
+}
 export interface VideoTime {
     current: number;
     duration: number;
@@ -43,11 +67,23 @@ export interface VideoSourceOptions {
     sources?: VideoSource[];
 }
 type VideoCallbacks = Pick<VideoProps, 'onPlay' | 'onPause' | 'onEnded' | 'onError'>;
+/** Режимы воспроизведения из пропсов `Video`; `interactive={false}` включает autoPlay и loop */
+export interface VideoPlaybackOptions {
+    autoPlay: boolean;
+    autoPause: boolean;
+    loop: boolean;
+    interactive: boolean;
+}
 export interface VideoStoreOptions extends VideoSourceOptions {
     /** Актуальные колбэки и attachMedia читаются в момент события — без пересоздания стора */
     getCallbacks: () => VideoCallbacks & {
         attachMedia?: VideoAttachMedia;
     };
+    /** Актуальные режимы воспроизведения; после их смены стор надо уведомить через `syncOptions` */
+    getOptions: () => VideoPlaybackOptions;
+    /** Звук и громкость на старте */
+    defaultMuted?: boolean;
+    defaultVolume?: number;
 }
 export interface VideoStore {
     getState: () => VideoState;
@@ -66,6 +102,13 @@ export interface VideoStore {
     seek: (seconds: number) => void;
     /** Перемотка относительно текущей позиции */
     seekBy: (seconds: number) => void;
+    /**
+     * Видимость плеера во вьюпорте (видно не меньше 10%): по ней работают автовоспроизведение и автопауза.
+     * `null` — неизвестно (плеер размонтирован)
+     */
+    setVisible: (visible: boolean | null) => void;
+    /** Режимы воспроизведения из пропсов изменились */
+    syncOptions: VoidFunction;
     /** Повторная загрузка после ошибки с запуском воспроизведения */
     retry: VoidFunction;
     /** play, если видео на паузе, закончилось или ещё не запускалось; иначе pause */
@@ -83,6 +126,8 @@ export interface VideoStore {
     setHideWhenPaused: (hide: boolean) => void;
     /** Пока удержание активно (фокус внутри контролов, перетаскивание ползунка), контролы не прячутся */
     holdControls: (hold: boolean) => void;
+    /** Подключить внешнего владельца видимости контролов; `null` — плеер снова управляет ими сам */
+    setControlsVisibilityHost: (host: VideoControlsVisibilityHost | null) => void;
     /** Callback ref для корня `Video.Player` — элемента, который разворачивается на весь экран */
     attachRoot: (element: HTMLElement | null) => void;
     getRoot: () => HTMLElement | null;
@@ -105,5 +150,5 @@ export declare const PLAYBACK_RATES: number[];
 export declare const BOOST_RATE = 2;
 /** Задержка автоскрытия контролов по спеке */
 export declare const CONTROLS_HIDE_DELAY_MS = 4000;
-export declare const createVideoStore: ({ getCallbacks, ...initialSource }: VideoStoreOptions) => VideoStore;
+export declare const createVideoStore: ({ getCallbacks, getOptions, defaultMuted, defaultVolume, ...initialSource }: VideoStoreOptions) => VideoStore;
 export {};