@hh.ru/magritte-ui-video 0.0.0-stage → 1.0.2

package/index.css

@@ -0,0 +1,355 @@
+:root{
+  --magritte-color-background-accent-v26-0-2:#0070ff;
+  --magritte-color-background-overlay-v26-0-2:#20262bad;
+  --magritte-color-background-overlay-toolbar-v26-0-2:#000000a3;
+  --magritte-color-background-constant-v26-0-2:#000000;
+  --magritte-color-stroke-neutral-v26-0-2:#DCE3EB;
+  --magritte-color-stroke-state-focused-accessible-v26-0-2:#0070ff7a;
+  --magritte-color-icon-constant-v26-0-2:#ffffff;
+}
+
+:root{
+  --magritte-semantic-animation-time-m-duration-v26-0-2:400ms;
+  --magritte-semantic-animation-ease-base-timing-function-v26-0-2:cubic-bezier(0.4, 0.24, 0, 1);
+}
+
+.magritte-night-theme{
+  --magritte-color-background-accent-v26-0-2:#2b7fff;
+  --magritte-color-stroke-neutral-v26-0-2:#303030;
+}
+
+.magritte-zp-day-theme{
+  --magritte-color-background-accent-v26-0-2:#7195AF;
+}
+.magritte-player___IHHy5_1-0-2{
+  position:relative;
+  width:100%;
+  overflow:hidden;
+  background-color:var(--magritte-color-background-constant-v26-0-2);
+  outline:none;
+  isolation:isolate;
+  user-select:none;
+  -webkit-user-select:none;
+  -webkit-touch-callout:none;
+}
+.magritte-player-fit___TX-6X_1-0-2{
+  height:100%;
+}
+.magritte-player-embedded___GNvRb_1-0-2{
+  overflow:visible;
+  background-color:transparent;
+}
+.magritte-video___4cS-u_1-0-2{
+  display:block;
+  width:100%;
+  height:100%;
+  object-fit:contain;
+}
+.magritte-video-hidden___agqVq_1-0-2{
+  visibility:hidden;
+}
+.magritte-overlay-button___MIRAP_1-0-2{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  display:flex;
+  border-radius:50%;
+  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-2{
+  position:absolute;
+  right:16px;
+  bottom:16px;
+  display:flex;
+  padding:2px 6px 1px;
+  border-radius:4px;
+  background-color:var(--magritte-color-background-overlay-toolbar-v26-0-2);
+  backdrop-filter:blur(24px);
+  pointer-events:none;
+}
+.magritte-seek-indicator___VJQBC_1-0-2{
+  position:absolute;
+  top:50%;
+  display:flex;
+  align-items:center;
+  gap:12px;
+  transform:translateY(-50%);
+  pointer-events:none;
+}
+.magritte-seek-indicator-forward___9C5gD_1-0-2{
+  right:40px;
+}
+.magritte-seek-indicator-backward___gIZ0E_1-0-2{
+  left:40px;
+  flex-direction:row-reverse;
+  --magritte-ui-video-seek-arrow-shift:16px;
+}
+.magritte-seek-arrows___Ql1eP_1-0-2{
+  position:relative;
+  display:flex;
+}
+.magritte-seek-arrow-incoming___oZxww_1-0-2{
+  position:absolute;
+  inset:0;
+  display:flex;
+  animation:magritte-seek-arrow-in___CB4-s_1-0-2 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-2{
+  from{
+    transform:translateX(var(--magritte-ui-video-seek-arrow-shift, -16px));
+  }
+  to{
+    transform:translateX(0);
+  }
+}
+.magritte-boost-indicator___ujllx_1-0-2{
+  position:absolute;
+  top:24px;
+  left:50%;
+  display:flex;
+  align-items:center;
+  gap:4px;
+  padding:6px 12px;
+  border-radius:999px;
+  background-color:var(--magritte-color-background-overlay-v26-0-2);
+  backdrop-filter:blur(24px);
+  transform:translateX(-50%);
+  pointer-events:none;
+}
+.magritte-loader___qVu0P_1-0-2{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  display:flex;
+  pointer-events:none;
+}
+.magritte-error___Rm7uG_1-0-2{
+  position:absolute;
+  inset:0;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding:16px;
+  overflow:auto;
+}
+.magritte-overlay-button-hidden___AoGFc_1-0-2,
+.magritte-controls___pKoSN_1-0-2.magritte-controls-hidden___bePTD_1-0-2{
+  opacity:0;
+  pointer-events:none;
+}
+.magritte-controls___pKoSN_1-0-2{
+  display:flex;
+  flex-direction:column;
+  gap:4px;
+  padding:4px 12px 12px;
+  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-2{
+  gap:6px;
+  padding:4px 16px 8px;
+}
+.magritte-controls-overlay___mRsJL_1-0-2{
+  position:absolute;
+  right:0;
+  bottom:0;
+  left:0;
+}
+.magritte-controls-row___2sdJg_1-0-2{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:8px;
+}
+.magritte-controls-group-start___yY9ZA_1-0-2,
+.magritte-controls-group-end___ziIm8_1-0-2{
+  display:flex;
+  align-items:center;
+  min-width:0;
+}
+.magritte-controls-group-start___yY9ZA_1-0-2{
+  gap:12px;
+}
+.magritte-controls-group-end___ziIm8_1-0-2{
+  gap:8px;
+}
+.magritte-controls-mobile___tdKGT_1-0-2 .magritte-controls-group-end___ziIm8_1-0-2{
+  gap:4px;
+}
+.magritte-control-pill___hK8Mv_1-0-2,
+.magritte-controls-time___e9zoz_1-0-2,
+.magritte-controls-volume___o4ajR_1-0-2{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border-radius:999px;
+  backdrop-filter:blur(24px);
+}
+.magritte-control-pill-bare___lU9ev_1-0-2{
+  backdrop-filter:none;
+}
+.magritte-control-button___VJ2Qr_1-0-2,
+.magritte-controls-time___e9zoz_1-0-2,
+.magritte-controls-volume___o4ajR_1-0-2{
+  box-sizing:border-box;
+  min-width:48px;
+  min-height:48px;
+  padding:12px;
+  border-radius:999px;
+  background-color:var(--magritte-color-background-overlay-v26-0-2);
+}
+.magritte-control-button___VJ2Qr_1-0-2{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border-width:0;
+  cursor:pointer;
+}
+.magritte-control-button___VJ2Qr_1-0-2.focus-visible{
+  outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v26-0-2);
+}
+.magritte-controls-time___e9zoz_1-0-2{
+  padding:12px 16px;
+  white-space:nowrap;
+}
+.magritte-controls-mobile___tdKGT_1-0-2 .magritte-controls-time___e9zoz_1-0-2{
+  padding:12px;
+}
+.magritte-controls-volume___o4ajR_1-0-2{
+  gap:6px;
+}
+.magritte-scrubber___-K3ik_1-0-2{
+  position:relative;
+  display:flex;
+  align-items:center;
+  height:12px;
+  cursor:pointer;
+  touch-action:none;
+  outline:none;
+  --magritte-ui-video-scrubber-track-height:4px;
+  --magritte-ui-video-scrubber-thumb-size:8px;
+}
+.magritte-controls-mobile___tdKGT_1-0-2 .magritte-scrubber___-K3ik_1-0-2::before{
+  content:'';
+  position:absolute;
+  inset:calc(-1 * 20px) 0 calc(-1 * 6px);
+}
+.magritte-scrubber___-K3ik_1-0-2.focus-visible{
+  outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v26-0-2);
+  border-radius:4px;
+}
+.magritte-scrubber___-K3ik_1-0-2[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-2: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-2:hover{
+    --magritte-ui-video-scrubber-track-height:6px;
+    --magritte-ui-video-scrubber-thumb-size:12px;
+  }
+}
+.magritte-scrubber-track___ki1zV_1-0-2{
+  position:relative;
+  flex-grow:1;
+  height:var(--magritte-ui-video-scrubber-track-height);
+  overflow:hidden;
+  border-radius:999px;
+  background-color:var(--magritte-color-background-overlay-v26-0-2);
+}
+.magritte-scrubber-buffered___ufvLe_1-0-2,
+.magritte-scrubber-progress___ZIyew_1-0-2{
+  position:absolute;
+  inset:0;
+  transform-origin:left;
+}
+.magritte-scrubber-buffered___ufvLe_1-0-2{
+  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-2{
+  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-2{
+  position:absolute;
+  top:50%;
+  left:calc(var(--magritte-ui-video-scrubber-progress, 0) * 100%);
+  width:var(--magritte-ui-video-scrubber-thumb-size);
+  height:var(--magritte-ui-video-scrubber-thumb-size);
+  border-radius:50%;
+  background-color:var(--magritte-color-icon-constant-v26-0-2);
+  transform:translate(-50%, -50%);
+  pointer-events:none;
+}
+.magritte-scrubber-timecode___M-syA_1-0-2{
+  position:absolute;
+  bottom:calc(100% + 8px);
+  left:calc(var(--magritte-ui-video-scrubber-timecode, 0) * 100%);
+  display:none;
+  padding:1px 6px 0;
+  border-radius:999px;
+  background-color:var(--magritte-color-background-overlay-v26-0-2);
+  transform:translateX(-50%);
+  white-space:nowrap;
+  pointer-events:none;
+}
+.magritte-scrubber___-K3ik_1-0-2[data-scrubbing] .magritte-scrubber-timecode___M-syA_1-0-2{
+  display:flex;
+}
+@media (min-width: 1020px){
+  body.magritte-old-layout  .magritte-scrubber___-K3ik_1-0-2:hover .magritte-scrubber-timecode___M-syA_1-0-2{
+    display:flex;
+  }
+}
+@media (min-width: 1024px){
+  body:not(.magritte-old-layout)  .magritte-scrubber___-K3ik_1-0-2:hover .magritte-scrubber-timecode___M-syA_1-0-2{
+    display:flex;
+  }
+}
+.magritte-volume-slider___qE2P7_1-0-2{
+  display:flex;
+  align-items:center;
+  width:64px;
+  height:12px;
+  cursor:pointer;
+  touch-action:none;
+  outline:none;
+}
+.magritte-volume-slider___qE2P7_1-0-2.focus-visible{
+  outline:4px solid var(--magritte-color-stroke-state-focused-accessible-v26-0-2);
+  border-radius:4px;
+}
+.magritte-volume-track___up8nd_1-0-2{
+  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-2{
+  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-2::after{
+  content:'';
+  position:absolute;
+  top:50%;
+  right:-4px;
+  width:8px;
+  height:8px;
+  border-radius:50%;
+  background-color:var(--magritte-color-icon-constant-v26-0-2);
+  transform:translateY(-50%);
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+export { Video } from './Video';
+export { type VideoAttachMedia, type VideoAttachMediaApi, type VideoControlsProps, type VideoHandle, type VideoPlayerProps, type VideoProps, type VideoSource, type VideoStatus, } from './types';

package/index.js

@@ -0,0 +1,34 @@
+import './index.css';
+export { Video } from './Video.js';
+import 'react/jsx-runtime';
+import 'react';
+import './VideoControls.js';
+import 'react-dom';
+import 'classnames';
+import '@hh.ru/magritte-common-use-translation';
+import '@hh.ru/magritte-ui-breakpoint';
+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-BnfN4Emx.js';
+import './internal/Scrubber.js';
+import './internal/formatTime.js';
+import './internal/useSliderPointer.js';
+import './internal/useVideoHotkeys.js';
+import '@hh.ru/magritte-common-keyboard';
+import './internal/TimeLabel.js';
+import './internal/VolumeSlider.js';
+import './internal/context.js';
+import './internal/controlKey.js';
+import './internal/useInert.js';
+import './VideoPlayer.js';
+import '@hh.ru/magritte-ui-button';
+import '@hh.ru/magritte-ui-button-stack';
+import '@hh.ru/magritte-ui-loader';
+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

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

package/index.mock.d.ts

@@ -0,0 +1,2 @@
+export { type VideoAttachMedia, type VideoAttachMediaApi, type VideoControlsProps, type VideoHandle, type VideoPlayerProps, type VideoProps, type VideoSource, type VideoStatus, } from './types';
+export declare const Video: import("react").ForwardRefExoticComponent<Record<string, unknown>>;

package/index.mock.js

@@ -0,0 +1,16 @@
+import './index.css';
+import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
+
+const Video = mockComponent(
+  "Video",
+  {
+    Player: mockComponent("Video.Player", {}, { withChildren: true }),
+    Controls: mockComponent("Video.Controls")
+  },
+  {
+    withChildren: true
+  }
+);
+
+export { Video };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["src/index.mock.ts"],"sourcesContent":["import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport {\n    type VideoAttachMedia,\n    type VideoAttachMediaApi,\n    type VideoControlsProps,\n    type VideoHandle,\n    type VideoPlayerProps,\n    type VideoProps,\n    type VideoSource,\n    type VideoStatus,\n} from '@hh.ru/magritte-ui-video/types';\n\nexport const Video = mockComponent(\n    'Video',\n    {\n        Player: mockComponent('Video.Player', {}, { withChildren: true }),\n        Controls: mockComponent('Video.Controls'),\n    },\n    {\n        withChildren: true,\n    }\n);\n"],"names":[],"mappings":";;AAaO,MAAM,KAAQ,GAAA,aAAA;AAAA,EACjB,OAAA;AAAA,EACA;AAAA,IACI,MAAA,EAAQ,cAAc,cAAgB,EAAA,IAAI,EAAE,YAAA,EAAc,MAAM,CAAA;AAAA,IAChE,QAAA,EAAU,cAAc,gBAAgB,CAAA;AAAA,GAC5C;AAAA,EACA;AAAA,IACI,YAAc,EAAA,IAAA;AAAA,GAClB;AACJ;;;;"}

package/internal/ControlButton.d.ts

@@ -0,0 +1,28 @@
+import { type FC, type ReactNode } from 'react';
+import { type IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon';
+interface ControlButtonBaseProps {
+    /** Имя контрола: по нему контролы находят кнопку (вернуть фокус после подмены). Не путать с `data-qa` */
+    control: string;
+    /** aria-label и текст подсказки */
+    label?: string;
+    onClick: VoidFunction;
+    /** Подсказка при наведении — только на desktop и пока контролы видны */
+    withTooltip: boolean;
+    'data-qa'?: string;
+}
+interface IconControlButtonProps extends ControlButtonBaseProps {
+    /** Иконка-кнопка: подложку, отступы, скругление и состояния даёт сама иконка */
+    icon: IconWrapperComponentSize24;
+    /** Без собственной подложки — внутри общей «таблетки» (громкость) */
+    bare?: boolean;
+    children?: never;
+}
+interface TextControlButtonProps extends ControlButtonBaseProps {
+    icon?: never;
+    bare?: never;
+    /** Текстовое содержимое кнопки (скорость воспроизведения) */
+    children: ReactNode;
+}
+type ControlButtonProps = IconControlButtonProps | TextControlButtonProps;
+export declare const ControlButton: FC<ControlButtonProps>;
+export {};

package/internal/ControlButton.js

@@ -0,0 +1,63 @@
+import './../index.css';
+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-BnfN4Emx.js';
+
+const ControlButton = ({
+  control,
+  label,
+  onClick,
+  withTooltip,
+  icon: Icon,
+  bare = false,
+  children,
+  "data-qa": dataQa
+}) => {
+  const ref = useRef(null);
+  let button;
+  if (!Icon) {
+    button = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles.controlButton,
+        "aria-label": label,
+        onClick,
+        "data-qa": dataQa,
+        children
+      }
+    );
+  } else if (bare) {
+    button = /* @__PURE__ */ jsx(Icon, { initialColor: "constant", "aria-label": label, onClick, "data-qa": dataQa });
+  } else {
+    button = /* @__PURE__ */ jsx(
+      Icon,
+      {
+        initialColor: "constant",
+        padding: 12,
+        borderRadius: "halfHeight",
+        backgroundStyle: "overlay",
+        "aria-label": label,
+        onClick,
+        "data-qa": dataQa
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: classnames(styles.controlPill, { [styles.controlPillBare]: bare }),
+        "data-video-control": control,
+        children: button
+      }
+    ),
+    withTooltip && label && /* @__PURE__ */ jsx(TooltipHover, { activatorRef: ref, placement: "top-center", size: "small", children: label })
+  ] });
+};
+
+export { ControlButton };
+//# sourceMappingURL=ControlButton.js.map

package/internal/ControlButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlButton.js","sources":["src/internal/ControlButton.tsx"],"sourcesContent":["import { type FC, type ReactNode, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { type IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon';\nimport { TooltipHover } from '@hh.ru/magritte-ui-tooltip';\n\nimport styles from '../video.less';\n\ninterface ControlButtonBaseProps {\n    /** Имя контрола: по нему контролы находят кнопку (вернуть фокус после подмены). Не путать с `data-qa` */\n    control: string;\n    /** aria-label и текст подсказки */\n    label?: string;\n    onClick: VoidFunction;\n    /** Подсказка при наведении — только на desktop и пока контролы видны */\n    withTooltip: boolean;\n    'data-qa'?: string;\n}\n\ninterface IconControlButtonProps extends ControlButtonBaseProps {\n    /** Иконка-кнопка: подложку, отступы, скругление и состояния даёт сама иконка */\n    icon: IconWrapperComponentSize24;\n    /** Без собственной подложки — внутри общей «таблетки» (громкость) */\n    bare?: boolean;\n    children?: never;\n}\n\ninterface TextControlButtonProps extends ControlButtonBaseProps {\n    icon?: never;\n    bare?: never;\n    /** Текстовое содержимое кнопки (скорость воспроизведения) */\n    children: ReactNode;\n}\n\ntype ControlButtonProps = IconControlButtonProps | TextControlButtonProps;\n\nexport const ControlButton: FC<ControlButtonProps> = ({\n    control,\n    label,\n    onClick,\n    withTooltip,\n    icon: Icon,\n    bare = false,\n    children,\n    'data-qa': dataQa,\n}) => {\n    // активатор подсказки — обёртка: наведение на кнопку внутри неё тоже считается\n    const ref = useRef<HTMLSpanElement>(null);\n\n    let button: ReactNode;\n    if (!Icon) {\n        button = (\n            <button\n                type=\"button\"\n                className={styles.controlButton}\n                aria-label={label}\n                onClick={onClick}\n                data-qa={dataQa}\n            >\n                {children}\n            </button>\n        );\n    } else if (bare) {\n        button = <Icon initialColor=\"constant\" aria-label={label} onClick={onClick} data-qa={dataQa} />;\n    } else {\n        button = (\n            <Icon\n                initialColor=\"constant\"\n                padding={12}\n                borderRadius=\"halfHeight\"\n                backgroundStyle=\"overlay\"\n                aria-label={label}\n                onClick={onClick}\n                data-qa={dataQa}\n            />\n        );\n    }\n\n    return (\n        <>\n            {/* иконка-кнопка отдаёт свои атрибуты svg, а не кнопке — имя контрола на обёртке */}\n            <span\n                ref={ref}\n                className={classnames(styles.controlPill, { [styles.controlPillBare]: bare })}\n                data-video-control={control}\n            >\n                {button}\n            </span>\n            {withTooltip && label && (\n                <TooltipHover activatorRef={ref} placement=\"top-center\" size=\"small\">\n                    {label}\n                </TooltipHover>\n            )}\n        </>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAoCO,MAAM,gBAAwC,CAAC;AAAA,EAClD,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAM,EAAA,IAAA;AAAA,EACN,IAAO,GAAA,KAAA;AAAA,EACP,QAAA;AAAA,EACA,SAAW,EAAA,MAAA;AACf,CAAM,KAAA;AAEF,EAAM,MAAA,GAAA,GAAM,OAAwB,IAAI,CAAA,CAAA;AAExC,EAAI,IAAA,MAAA,CAAA;AACJ,EAAA,IAAI,CAAC,IAAM,EAAA;AACP,IACI,MAAA,mBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACG,IAAK,EAAA,QAAA;AAAA,QACL,WAAW,MAAO,CAAA,aAAA;AAAA,QAClB,YAAY,EAAA,KAAA;AAAA,QACZ,OAAA;AAAA,QACA,SAAS,EAAA,MAAA;AAAA,QAER,QAAA;AAAA,OAAA;AAAA,KACL,CAAA;AAAA,aAEG,IAAM,EAAA;AACb,IAAS,MAAA,mBAAA,GAAA,CAAC,QAAK,YAAa,EAAA,UAAA,EAAW,cAAY,KAAO,EAAA,OAAA,EAAkB,WAAS,MAAQ,EAAA,CAAA,CAAA;AAAA,GAC1F,MAAA;AACH,IACI,MAAA,mBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACG,YAAa,EAAA,UAAA;AAAA,QACb,OAAS,EAAA,EAAA;AAAA,QACT,YAAa,EAAA,YAAA;AAAA,QACb,eAAgB,EAAA,SAAA;AAAA,QAChB,YAAY,EAAA,KAAA;AAAA,QACZ,OAAA;AAAA,QACA,SAAS,EAAA,MAAA;AAAA,OAAA;AAAA,KACb,CAAA;AAAA,GAER;AAEA,EAAA,uBAGQ,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACG,GAAA;AAAA,QACA,SAAA,EAAW,UAAW,CAAA,MAAA,CAAO,WAAa,EAAA,EAAE,CAAC,MAAO,CAAA,eAAe,GAAG,IAAA,EAAM,CAAA;AAAA,QAC5E,oBAAoB,EAAA,OAAA;AAAA,QAEnB,QAAA,EAAA,MAAA;AAAA,OAAA;AAAA,KACL;AAAA,IACC,WAAA,IAAe,KACZ,oBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,YAAA,EAAc,KAAK,SAAU,EAAA,YAAA,EAAa,IAAK,EAAA,OAAA,EACxD,QACL,EAAA,KAAA,EAAA,CAAA;AAAA,GAER,EAAA,CAAA,CAAA;AAER;;;;"}

package/internal/Scrubber.d.ts

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+import { type VideoStore } from '../internal/store';
+interface ScrubberProps {
+    store: VideoStore;
+}
+/**
+ * Ползунок перемотки. Позиция, загруженная часть и таймкод пишутся прямо в DOM из `subscribeTime` —
+ * без React-рендеров на каждом кадре. Перемотка применяется при отпускании бегунка
+ */
+export declare const Scrubber: FC<ScrubberProps>;
+export {};

package/internal/Scrubber.js

@@ -0,0 +1,125 @@
+import './../index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { useTranslation } from '@hh.ru/magritte-common-use-translation';
+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-BnfN4Emx.js';
+import '@hh.ru/magritte-common-keyboard';
+
+const KEYBOARD_SEEK_STEP = SEEK_STEP_SECONDS;
+const Scrubber = ({ store }) => {
+  const rootRef = useRef(null);
+  const progressRef = useRef(null);
+  const bufferedRef = useRef(null);
+  const thumbRef = useRef(null);
+  const timecodeRef = useRef(null);
+  const timecodeTextRef = useRef(null);
+  const draggingRef = useRef(false);
+  const seekTrl = useTranslation("Video", "seek");
+  const ofTrl = useTranslation("Video", "of");
+  const paintPosition = (ratio) => {
+    progressRef.current?.style.setProperty("--magritte-ui-video-scrubber-progress", String(ratio));
+    thumbRef.current?.style.setProperty("--magritte-ui-video-scrubber-progress", String(ratio));
+  };
+  const paintTimecode = (ratio) => {
+    const duration = store.getTime().duration;
+    timecodeRef.current?.style.setProperty("--magritte-ui-video-scrubber-timecode", String(ratio));
+    if (timecodeTextRef.current) {
+      timecodeTextRef.current.textContent = formatDuration(ratio * duration);
+    }
+  };
+  useEffect(
+    () => store.subscribeTime(({ current, duration, buffered }) => {
+      const root = rootRef.current;
+      if (!root || duration <= 0) {
+        return;
+      }
+      bufferedRef.current?.style.setProperty(
+        "--magritte-ui-video-scrubber-buffered",
+        String(Math.min(buffered / duration, 1))
+      );
+      if (!draggingRef.current) {
+        paintPosition(Math.min(current / duration, 1));
+      }
+      root.setAttribute("aria-valuenow", String(Math.round(current)));
+      root.setAttribute("aria-valuemax", String(Math.round(duration)));
+      root.setAttribute("aria-valuetext", `${formatTime(current)} ${ofTrl ?? ""} ${formatTime(duration)}`);
+    }),
+    [store, ofTrl]
+  );
+  useEffect(
+    () => () => {
+      if (draggingRef.current) {
+        draggingRef.current = false;
+        store.holdControls(false);
+      }
+    },
+    [store]
+  );
+  const onChange = (ratio, phase) => {
+    paintPosition(ratio);
+    paintTimecode(ratio);
+    if (phase === "start") {
+      if (!draggingRef.current) {
+        draggingRef.current = true;
+        rootRef.current?.setAttribute("data-scrubbing", "");
+        store.holdControls(true);
+      }
+      return;
+    }
+    if (phase === "end") {
+      draggingRef.current = false;
+      rootRef.current?.removeAttribute("data-scrubbing");
+      store.seek(ratio * store.getTime().duration);
+      store.holdControls(false);
+    }
+  };
+  const pointerHandlers = useSliderPointer(onChange, paintTimecode);
+  const onKeyDown = (event) => {
+    const { current, duration } = store.getTime();
+    const targets = {
+      ArrowLeft: current - KEYBOARD_SEEK_STEP,
+      ArrowDown: current - KEYBOARD_SEEK_STEP,
+      ArrowRight: current + KEYBOARD_SEEK_STEP,
+      ArrowUp: current + KEYBOARD_SEEK_STEP,
+      Home: 0,
+      End: duration
+    };
+    if (!(event.key in targets)) {
+      return;
+    }
+    event.preventDefault();
+    store.seek(targets[event.key]);
+    store.notifyActivity();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": seekTrl,
+      "aria-valuemin": 0,
+      "aria-orientation": "horizontal",
+      className: styles.scrubber,
+      onKeyDown,
+      "data-video-control": "scrubber",
+      "data-qa": "video-scrubber",
+      ...pointerHandlers,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.scrubberTrack, children: [
+          /* @__PURE__ */ jsx("div", { ref: bufferedRef, className: styles.scrubberBuffered }),
+          /* @__PURE__ */ jsx("div", { ref: progressRef, className: styles.scrubberProgress })
+        ] }),
+        /* @__PURE__ */ jsx("div", { ref: thumbRef, className: styles.scrubberThumb }),
+        /* @__PURE__ */ jsx("div", { ref: timecodeRef, className: styles.scrubberTimecode, "aria-hidden": true, children: /* @__PURE__ */ jsx(Text, { typography: "paragraph-3-regular", style: "constant", children: /* @__PURE__ */ jsx("span", { ref: timecodeTextRef }) }) })
+      ]
+    }
+  );
+};
+
+export { Scrubber };
+//# sourceMappingURL=Scrubber.js.map