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

package/Video.js

@@ -13,7 +13,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-B0giLQLN.js';
+import './video-DR4YYLmP.js';
 import './internal/Scrubber.js';
 import './internal/formatTime.js';
 import './internal/useSliderPointer.js';

package/VideoControls.js

@@ -5,7 +5,7 @@ import { createPortal } from 'react-dom';
 import classnames from 'classnames';
 import { useTranslation } from '@hh.ru/magritte-common-use-translation';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
-import { SpeakerCrossedOutlinedSize24, SpeakerWaveOutlinedSize24, DashedSquareInOutlinedSize24, DashedSquareOutOutlinedSize24, PlayFilledSize24, ArrowPathClockwiseOutlinedSize24, PauseFilledSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { DashedSquareInOutlinedSize24, PlayFilledSize24, ArrowPathClockwiseOutlinedSize24, PauseFilledSize24, SpeakerCrossedOutlinedSize16, SpeakerCrossedOutlinedSize24, SpeakerWaveOutlinedSize16, SpeakerWaveOutlinedSize24, DashedSquareOutOutlinedSize16, DashedSquareOutOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { Text } from '@hh.ru/magritte-ui-typography';
 import { ControlButton } from './internal/ControlButton.js';
 import { Scrubber } from './internal/Scrubber.js';
@@ -15,7 +15,7 @@ import { useVideoContext, VideoPlayerContext, useVideoState } from './internal/c
 import { findFocusableControl, CONTROL_KEY_ATTRIBUTE } from './internal/controlKey.js';
 import { useInert } from './internal/useInert.js';
 import { useVideoHotkeys } from './internal/useVideoHotkeys.js';
-import { s as styles } from './video-B0giLQLN.js';
+import { s as styles } from './video-DR4YYLmP.js';
 import '@hh.ru/magritte-ui-tooltip';
 import './internal/formatTime.js';
 import './internal/useSliderPointer.js';
@@ -83,6 +83,7 @@ const VideoControls = ({ "data-qa": dataQa = "video-controls" }) => {
     return null;
   }
   const withTooltip = !isMobile && visible;
+  const compact = isMobile && !fullscreen;
   const showScrubber = !live || status === "loading";
   const onFocus = (event) => {
     focusedControlRef.current = event.target.closest(`[${CONTROL_KEY_ATTRIBUTE}]`)?.getAttribute(CONTROL_KEY_ATTRIBUTE) ?? null;
@@ -110,6 +111,9 @@ const VideoControls = ({ "data-qa": dataQa = "video-controls" }) => {
   } else if (status === "playing") {
     playPause = { label: pauseTrl, icon: PauseFilledSize24 };
   }
+  const SpeakerCrossedIcon = compact ? SpeakerCrossedOutlinedSize16 : SpeakerCrossedOutlinedSize24;
+  const SpeakerWaveIcon = compact ? SpeakerWaveOutlinedSize16 : SpeakerWaveOutlinedSize24;
+  const EnterFullscreenIcon = compact ? DashedSquareOutOutlinedSize16 : DashedSquareOutOutlinedSize24;
   const renderResult = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -118,6 +122,7 @@ const VideoControls = ({ "data-qa": dataQa = "video-controls" }) => {
       "aria-label": controlsTrl,
       className: classnames(styles.controls, {
         [styles.controlsMobile]: isMobile,
+        [styles.controlsCompact]: compact,
         [styles.controlsOverlay]: fullscreen || insidePlayer && !container,
         [styles.controlsHidden]: !visible
       }),
@@ -151,7 +156,7 @@ const VideoControls = ({ "data-qa": dataQa = "video-controls" }) => {
                 "data-qa": "video-play-pause"
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: styles.controlsTime, children: /* @__PURE__ */ jsx(TimeLabel, { store, live: live && status !== "loading" }) })
+            /* @__PURE__ */ jsx("div", { className: styles.controlsTime, children: /* @__PURE__ */ jsx(TimeLabel, { store, live: live && status !== "loading", compact }) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: styles.controlsGroupEnd, children: [
             /* @__PURE__ */ jsx(
@@ -163,9 +168,10 @@ const VideoControls = ({ "data-qa": dataQa = "video-controls" }) => {
                   store.notifyActivity();
                 },
                 withTooltip,
+                compact,
                 control: "playback-rate",
                 "data-qa": "video-playback-rate",
-                children: /* @__PURE__ */ jsx(Text, { typography: "subtitle-2-semibold", style: "constant", children: `${rate}x` })
+                children: /* @__PURE__ */ jsx(Text, { typography: compact ? "subtitle-3-semibold" : "subtitle-2-semibold", style: "constant", children: `${rate}x` })
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: styles.controlsVolume, children: [
@@ -173,7 +179,7 @@ const VideoControls = ({ "data-qa": dataQa = "video-controls" }) => {
                 ControlButton,
                 {
                   label: muted ? unmuteTrl : muteTrl,
-                  icon: muted ? SpeakerCrossedOutlinedSize24 : SpeakerWaveOutlinedSize24,
+                  icon: muted ? SpeakerCrossedIcon : SpeakerWaveIcon,
                   onClick: () => {
                     store.setMuted(!muted);
                     store.notifyActivity();
@@ -190,12 +196,13 @@ const VideoControls = ({ "data-qa": dataQa = "video-controls" }) => {
               ControlButton,
               {
                 label: fullscreen ? exitFullscreenTrl : enterFullscreenTrl,
-                icon: fullscreen ? DashedSquareInOutlinedSize24 : DashedSquareOutOutlinedSize24,
+                icon: fullscreen ? DashedSquareInOutlinedSize24 : EnterFullscreenIcon,
                 onClick: () => {
                   store.toggleFullscreen();
                   store.notifyActivity();
                 },
                 withTooltip,
+                compact,
                 control: "fullscreen",
                 "data-qa": "video-fullscreen"
               }

package/VideoControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoControls.js","sources":["src/VideoControls.tsx"],"sourcesContent":["import { type FC, type FocusEvent, useContext, useEffect, useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport {\n    ArrowPathClockwiseOutlinedSize24,\n    DashedSquareInOutlinedSize24,\n    DashedSquareOutOutlinedSize24,\n    PauseFilledSize24,\n    PlayFilledSize24,\n    SpeakerCrossedOutlinedSize24,\n    SpeakerWaveOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { ControlButton } from '@hh.ru/magritte-ui-video/internal/ControlButton';\nimport { Scrubber } from '@hh.ru/magritte-ui-video/internal/Scrubber';\nimport { TimeLabel } from '@hh.ru/magritte-ui-video/internal/TimeLabel';\nimport { VolumeSlider } from '@hh.ru/magritte-ui-video/internal/VolumeSlider';\nimport { useVideoContext, useVideoState, VideoPlayerContext } from '@hh.ru/magritte-ui-video/internal/context';\nimport { CONTROL_KEY_ATTRIBUTE, findFocusableControl } from '@hh.ru/magritte-ui-video/internal/controlKey';\nimport { useInert } from '@hh.ru/magritte-ui-video/internal/useInert';\nimport { useVideoHotkeys } from '@hh.ru/magritte-ui-video/internal/useVideoHotkeys';\nimport { type VideoControlsProps, type VideoStatus } from '@hh.ru/magritte-ui-video/types';\n\nimport styles from './video.less';\n\n/** Контролы есть только после запуска: в default и при ошибке их нет */\nconst STATUSES_WITH_CONTROLS: VideoStatus[] = ['loading', 'playing', 'paused', 'ended'];\n\n/**\n * Видеоконтролы: перемотка, время, play/pause (desktop), скорость, громкость, fullscreen.\n * Внутри `Video.Player` раскладываются поверх видео у нижнего края, снаружи — в потоке.\n * Стор может перенести их в другой контейнер (`setControlsContainer`), в fullscreen — всегда внутрь плеера\n */\nexport const VideoControls: FC<VideoControlsProps> = ({ 'data-qa': dataQa = 'video-controls' }) => {\n    const { store, interactive } = useVideoContext('Video.Controls');\n    const insidePlayer = useContext(VideoPlayerContext);\n    const { isMobile } = useBreakpoint();\n\n    const status = useVideoState(store, (state) => state.status);\n    const visible = useVideoState(store, (state) => state.controlsVisible);\n    const live = useVideoState(store, (state) => state.duration === null);\n    const rate = useVideoState(store, (state) => state.rate);\n    const muted = useVideoState(store, (state) => state.muted);\n    const fullscreen = useVideoState(store, (state) => state.fullscreen);\n    const container = useVideoState(store, (state) => state.controlsContainer);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const pointerFocusRef = useRef(false);\n    const holdingRef = useRef(false);\n    // имя контрола с фокусом (`data-video-control`) — по нему фокус возвращается, если узел под ним подменили\n    const focusedControlRef = useRef<string | null>(null);\n    const restoringFocusRef = useRef(false);\n    useInert(rootRef, !visible);\n    // контролы бывают вне плеера (в потоке, во вьювере) — фокус в них тоже «фокус в видео»\n    const onKeyDown = useVideoHotkeys(store);\n\n    // в неинтерактивном режиме контролов нет\n    const hasControls = interactive && STATUSES_WITH_CONTROLS.includes(status);\n\n    // Удержание (фокус с клавиатуры внутри) снимается по blur. Но если контролы пропали вместе с фокусом —\n    // ошибка или смена источника (компонент рендерит null) либо размонтирование, — blur не придёт:\n    // отпускаем удержание сами, иначе контролы больше никогда не спрячутся\n    useEffect(\n        () => () => {\n            if (holdingRef.current) {\n                holdingRef.current = false;\n                store.holdControls(false);\n            }\n        },\n        [store, hasControls]\n    );\n\n    // Кнопка со сменой иконки (звук, play/pause, fullscreen) пересоздаётся: у каждой иконки свой компонент.\n    // Вход и выход из fullscreen переносит контролы в портал и обратно — пересоздаются все. Фокус в обоих случаях\n    // падает на body без blur: возвращаем его на тот же контрол, чтобы клавиатурная навигация продолжалась с места\n    useLayoutEffect(() => {\n        const root = rootRef.current;\n        if (!root || !visible) {\n            focusedControlRef.current = null;\n            return;\n        }\n        const key = focusedControlRef.current;\n        const active = document.activeElement;\n        if (!key || (active && active !== document.body)) {\n            return;\n        }\n        const control = findFocusableControl(root, key);\n        if (!control) {\n            focusedControlRef.current = null;\n            return;\n        }\n        // фокус не новый — удержание контролов остаётся как было\n        restoringFocusRef.current = true;\n        control.focus({ preventScroll: true });\n        restoringFocusRef.current = false;\n    });\n\n    const controlsTrl = useTranslation('Video', 'controls');\n    const playTrl = useTranslation('Video', 'play');\n    const pauseTrl = useTranslation('Video', 'pause');\n    const replayTrl = useTranslation('Video', 'replay');\n    const playbackRateTrl = useTranslation('Video', 'playbackRate');\n    const muteTrl = useTranslation('Video', 'mute');\n    const unmuteTrl = useTranslation('Video', 'unmute');\n    const enterFullscreenTrl = useTranslation('Video', 'enterFullscreen');\n    const exitFullscreenTrl = useTranslation('Video', 'exitFullscreen');\n\n    if (!hasControls) {\n        return null;\n    }\n\n    const withTooltip = !isMobile && visible;\n    // live до загрузки метаданных не отличить от обычного видео — ползунок прячем только когда длительность так и не появилась\n    const showScrubber = !live || status === 'loading';\n\n    // фокус с клавиатуры внутри контролов — взаимодействие: пока он там, контролы не прячутся.\n    // Фокус после клика мышью не держит контролы, иначе они не спрячутся никогда\n    const onFocus = (event: FocusEvent<HTMLDivElement>) => {\n        focusedControlRef.current =\n            (event.target as HTMLElement).closest(`[${CONTROL_KEY_ATTRIBUTE}]`)?.getAttribute(CONTROL_KEY_ATTRIBUTE) ??\n            null;\n        const pointerFocus = pointerFocusRef.current;\n        pointerFocusRef.current = false;\n        if (\n            restoringFocusRef.current ||\n            pointerFocus ||\n            holdingRef.current ||\n            event.currentTarget.contains(event.relatedTarget)\n        ) {\n            return;\n        }\n        holdingRef.current = true;\n        store.holdControls(true);\n    };\n    const onBlur = (event: FocusEvent<HTMLDivElement>) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n            focusedControlRef.current = null;\n        }\n        if (!holdingRef.current || event.currentTarget.contains(event.relatedTarget)) {\n            return;\n        }\n        holdingRef.current = false;\n        store.holdControls(false);\n    };\n\n    let playPause = { label: playTrl, icon: PlayFilledSize24 };\n    if (status === 'ended') {\n        playPause = { label: replayTrl, icon: ArrowPathClockwiseOutlinedSize24 };\n    } else if (status === 'playing') {\n        playPause = { label: pauseTrl, icon: PauseFilledSize24 };\n    }\n\n    const renderResult = (\n        <div\n            ref={rootRef}\n            role=\"group\"\n            aria-label={controlsTrl}\n            className={classnames(styles.controls, {\n                [styles.controlsMobile]: isMobile,\n                [styles.controlsOverlay]: fullscreen || (insidePlayer && !container),\n                [styles.controlsHidden]: !visible,\n            })}\n            // холст игнорирует события из контролов по этому атрибуту\n            data-video-controls\n            data-qa={dataQa}\n            onPointerDownCapture={() => {\n                pointerFocusRef.current = true;\n            }}\n            // фокус от клика приходит до pointerup; если его не было — сбрасываем флаг\n            onPointerUpCapture={() => {\n                pointerFocusRef.current = false;\n            }}\n            onPointerMove={(event) => event.pointerType === 'mouse' && store.notifyActivity()}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onKeyDown={onKeyDown}\n        >\n            {showScrubber && <Scrubber store={store} />}\n            <div className={styles.controlsRow}>\n                <div className={styles.controlsGroupStart}>\n                    {!isMobile && (\n                        <ControlButton\n                            label={playPause.label}\n                            icon={playPause.icon}\n                            onClick={() => {\n                                store.toggle();\n                                store.notifyActivity();\n                            }}\n                            withTooltip={withTooltip}\n                            control=\"play-pause\"\n                            data-qa=\"video-play-pause\"\n                        />\n                    )}\n                    <div className={styles.controlsTime}>\n                        <TimeLabel store={store} live={live && status !== 'loading'} />\n                    </div>\n                </div>\n                <div className={styles.controlsGroupEnd}>\n                    <ControlButton\n                        label={`${playbackRateTrl ?? ''}: ${rate}x`}\n                        onClick={() => {\n                            store.cycleRate();\n                            store.notifyActivity();\n                        }}\n                        withTooltip={withTooltip}\n                        control=\"playback-rate\"\n                        data-qa=\"video-playback-rate\"\n                    >\n                        <Text typography=\"subtitle-2-semibold\" style=\"constant\">\n                            {`${rate}x`}\n                        </Text>\n                    </ControlButton>\n                    <div className={styles.controlsVolume}>\n                        <ControlButton\n                            label={muted ? unmuteTrl : muteTrl}\n                            icon={muted ? SpeakerCrossedOutlinedSize24 : SpeakerWaveOutlinedSize24}\n                            onClick={() => {\n                                store.setMuted(!muted);\n                                store.notifyActivity();\n                            }}\n                            withTooltip={withTooltip}\n                            bare\n                            control=\"mute\"\n                            data-qa=\"video-mute\"\n                        />\n                        {!isMobile && <VolumeSlider store={store} />}\n                    </div>\n                    <ControlButton\n                        label={fullscreen ? exitFullscreenTrl : enterFullscreenTrl}\n                        icon={fullscreen ? DashedSquareInOutlinedSize24 : DashedSquareOutOutlinedSize24}\n                        onClick={() => {\n                            store.toggleFullscreen();\n                            store.notifyActivity();\n                        }}\n                        withTooltip={withTooltip}\n                        control=\"fullscreen\"\n                        data-qa=\"video-fullscreen\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n\n    // в fullscreen разворачивается плеер — контролы переезжают в него; иначе — в заданный контейнер, если он есть\n    const target = (fullscreen && store.getRoot()) || container;\n    return target ? createPortal(renderResult, target) : renderResult;\n};\n\nVideoControls.displayName = 'VideoControls';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"VideoControls.js","sources":["src/VideoControls.tsx"],"sourcesContent":["import { type FC, type FocusEvent, useContext, useEffect, useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport classnames from 'classnames';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport {\n    ArrowPathClockwiseOutlinedSize24,\n    DashedSquareInOutlinedSize24,\n    DashedSquareOutOutlinedSize16,\n    DashedSquareOutOutlinedSize24,\n    PauseFilledSize24,\n    PlayFilledSize24,\n    SpeakerCrossedOutlinedSize16,\n    SpeakerCrossedOutlinedSize24,\n    SpeakerWaveOutlinedSize16,\n    SpeakerWaveOutlinedSize24,\n} from '@hh.ru/magritte-ui-icon/icon';\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { ControlButton } from '@hh.ru/magritte-ui-video/internal/ControlButton';\nimport { Scrubber } from '@hh.ru/magritte-ui-video/internal/Scrubber';\nimport { TimeLabel } from '@hh.ru/magritte-ui-video/internal/TimeLabel';\nimport { VolumeSlider } from '@hh.ru/magritte-ui-video/internal/VolumeSlider';\nimport { useVideoContext, useVideoState, VideoPlayerContext } from '@hh.ru/magritte-ui-video/internal/context';\nimport { CONTROL_KEY_ATTRIBUTE, findFocusableControl } from '@hh.ru/magritte-ui-video/internal/controlKey';\nimport { useInert } from '@hh.ru/magritte-ui-video/internal/useInert';\nimport { useVideoHotkeys } from '@hh.ru/magritte-ui-video/internal/useVideoHotkeys';\nimport { type VideoControlsProps, type VideoStatus } from '@hh.ru/magritte-ui-video/types';\n\nimport styles from './video.less';\n\n/** Контролы есть только после запуска: в default и при ошибке их нет */\nconst STATUSES_WITH_CONTROLS: VideoStatus[] = ['loading', 'playing', 'paused', 'ended'];\n\n/**\n * Видеоконтролы: перемотка, время, play/pause (desktop), скорость, громкость, fullscreen.\n * Внутри `Video.Player` раскладываются поверх видео у нижнего края, снаружи — в потоке.\n * Стор может перенести их в другой контейнер (`setControlsContainer`), в fullscreen — всегда внутрь плеера\n */\nexport const VideoControls: FC<VideoControlsProps> = ({ 'data-qa': dataQa = 'video-controls' }) => {\n    const { store, interactive } = useVideoContext('Video.Controls');\n    const insidePlayer = useContext(VideoPlayerContext);\n    const { isMobile } = useBreakpoint();\n\n    const status = useVideoState(store, (state) => state.status);\n    const visible = useVideoState(store, (state) => state.controlsVisible);\n    const live = useVideoState(store, (state) => state.duration === null);\n    const rate = useVideoState(store, (state) => state.rate);\n    const muted = useVideoState(store, (state) => state.muted);\n    const fullscreen = useVideoState(store, (state) => state.fullscreen);\n    const container = useVideoState(store, (state) => state.controlsContainer);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const pointerFocusRef = useRef(false);\n    const holdingRef = useRef(false);\n    // имя контрола с фокусом (`data-video-control`) — по нему фокус возвращается, если узел под ним подменили\n    const focusedControlRef = useRef<string | null>(null);\n    const restoringFocusRef = useRef(false);\n    useInert(rootRef, !visible);\n    // контролы бывают вне плеера (в потоке, во вьювере) — фокус в них тоже «фокус в видео»\n    const onKeyDown = useVideoHotkeys(store);\n\n    // в неинтерактивном режиме контролов нет\n    const hasControls = interactive && STATUSES_WITH_CONTROLS.includes(status);\n\n    // Удержание (фокус с клавиатуры внутри) снимается по blur. Но если контролы пропали вместе с фокусом —\n    // ошибка или смена источника (компонент рендерит null) либо размонтирование, — blur не придёт:\n    // отпускаем удержание сами, иначе контролы больше никогда не спрячутся\n    useEffect(\n        () => () => {\n            if (holdingRef.current) {\n                holdingRef.current = false;\n                store.holdControls(false);\n            }\n        },\n        [store, hasControls]\n    );\n\n    // Кнопка со сменой иконки (звук, play/pause, fullscreen) пересоздаётся: у каждой иконки свой компонент.\n    // Вход и выход из fullscreen переносит контролы в портал и обратно — пересоздаются все. Фокус в обоих случаях\n    // падает на body без blur: возвращаем его на тот же контрол, чтобы клавиатурная навигация продолжалась с места\n    useLayoutEffect(() => {\n        const root = rootRef.current;\n        if (!root || !visible) {\n            focusedControlRef.current = null;\n            return;\n        }\n        const key = focusedControlRef.current;\n        const active = document.activeElement;\n        if (!key || (active && active !== document.body)) {\n            return;\n        }\n        const control = findFocusableControl(root, key);\n        if (!control) {\n            focusedControlRef.current = null;\n            return;\n        }\n        // фокус не новый — удержание контролов остаётся как было\n        restoringFocusRef.current = true;\n        control.focus({ preventScroll: true });\n        restoringFocusRef.current = false;\n    });\n\n    const controlsTrl = useTranslation('Video', 'controls');\n    const playTrl = useTranslation('Video', 'play');\n    const pauseTrl = useTranslation('Video', 'pause');\n    const replayTrl = useTranslation('Video', 'replay');\n    const playbackRateTrl = useTranslation('Video', 'playbackRate');\n    const muteTrl = useTranslation('Video', 'mute');\n    const unmuteTrl = useTranslation('Video', 'unmute');\n    const enterFullscreenTrl = useTranslation('Video', 'enterFullscreen');\n    const exitFullscreenTrl = useTranslation('Video', 'exitFullscreen');\n\n    if (!hasControls) {\n        return null;\n    }\n\n    const withTooltip = !isMobile && visible;\n    // на mobile вне fullscreen видео небольшое — контролы компактные (кнопки 32px), в fullscreen — крупные (48px)\n    const compact = isMobile && !fullscreen;\n    // live до загрузки метаданных не отличить от обычного видео — ползунок прячем только когда длительность так и не появилась\n    const showScrubber = !live || status === 'loading';\n\n    // фокус с клавиатуры внутри контролов — взаимодействие: пока он там, контролы не прячутся.\n    // Фокус после клика мышью не держит контролы, иначе они не спрячутся никогда\n    const onFocus = (event: FocusEvent<HTMLDivElement>) => {\n        focusedControlRef.current =\n            (event.target as HTMLElement).closest(`[${CONTROL_KEY_ATTRIBUTE}]`)?.getAttribute(CONTROL_KEY_ATTRIBUTE) ??\n            null;\n        const pointerFocus = pointerFocusRef.current;\n        pointerFocusRef.current = false;\n        if (\n            restoringFocusRef.current ||\n            pointerFocus ||\n            holdingRef.current ||\n            event.currentTarget.contains(event.relatedTarget)\n        ) {\n            return;\n        }\n        holdingRef.current = true;\n        store.holdControls(true);\n    };\n    const onBlur = (event: FocusEvent<HTMLDivElement>) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n            focusedControlRef.current = null;\n        }\n        if (!holdingRef.current || event.currentTarget.contains(event.relatedTarget)) {\n            return;\n        }\n        holdingRef.current = false;\n        store.holdControls(false);\n    };\n\n    let playPause = { label: playTrl, icon: PlayFilledSize24 };\n    if (status === 'ended') {\n        playPause = { label: replayTrl, icon: ArrowPathClockwiseOutlinedSize24 };\n    } else if (status === 'playing') {\n        playPause = { label: pauseTrl, icon: PauseFilledSize24 };\n    }\n\n    // компактные иконки — 16, только вне fullscreen (выход из fullscreen всегда крупный)\n    const SpeakerCrossedIcon = compact ? SpeakerCrossedOutlinedSize16 : SpeakerCrossedOutlinedSize24;\n    const SpeakerWaveIcon = compact ? SpeakerWaveOutlinedSize16 : SpeakerWaveOutlinedSize24;\n    const EnterFullscreenIcon = compact ? DashedSquareOutOutlinedSize16 : DashedSquareOutOutlinedSize24;\n\n    const renderResult = (\n        <div\n            ref={rootRef}\n            role=\"group\"\n            aria-label={controlsTrl}\n            className={classnames(styles.controls, {\n                [styles.controlsMobile]: isMobile,\n                [styles.controlsCompact]: compact,\n                [styles.controlsOverlay]: fullscreen || (insidePlayer && !container),\n                [styles.controlsHidden]: !visible,\n            })}\n            // холст игнорирует события из контролов по этому атрибуту\n            data-video-controls\n            data-qa={dataQa}\n            onPointerDownCapture={() => {\n                pointerFocusRef.current = true;\n            }}\n            // фокус от клика приходит до pointerup; если его не было — сбрасываем флаг\n            onPointerUpCapture={() => {\n                pointerFocusRef.current = false;\n            }}\n            onPointerMove={(event) => event.pointerType === 'mouse' && store.notifyActivity()}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onKeyDown={onKeyDown}\n        >\n            {showScrubber && <Scrubber store={store} />}\n            <div className={styles.controlsRow}>\n                <div className={styles.controlsGroupStart}>\n                    {!isMobile && (\n                        <ControlButton\n                            label={playPause.label}\n                            icon={playPause.icon}\n                            onClick={() => {\n                                store.toggle();\n                                store.notifyActivity();\n                            }}\n                            withTooltip={withTooltip}\n                            control=\"play-pause\"\n                            data-qa=\"video-play-pause\"\n                        />\n                    )}\n                    <div className={styles.controlsTime}>\n                        <TimeLabel store={store} live={live && status !== 'loading'} compact={compact} />\n                    </div>\n                </div>\n                <div className={styles.controlsGroupEnd}>\n                    <ControlButton\n                        label={`${playbackRateTrl ?? ''}: ${rate}x`}\n                        onClick={() => {\n                            store.cycleRate();\n                            store.notifyActivity();\n                        }}\n                        withTooltip={withTooltip}\n                        compact={compact}\n                        control=\"playback-rate\"\n                        data-qa=\"video-playback-rate\"\n                    >\n                        <Text typography={compact ? 'subtitle-3-semibold' : 'subtitle-2-semibold'} style=\"constant\">\n                            {`${rate}x`}\n                        </Text>\n                    </ControlButton>\n                    <div className={styles.controlsVolume}>\n                        <ControlButton\n                            label={muted ? unmuteTrl : muteTrl}\n                            icon={muted ? SpeakerCrossedIcon : SpeakerWaveIcon}\n                            onClick={() => {\n                                store.setMuted(!muted);\n                                store.notifyActivity();\n                            }}\n                            withTooltip={withTooltip}\n                            bare\n                            control=\"mute\"\n                            data-qa=\"video-mute\"\n                        />\n                        {!isMobile && <VolumeSlider store={store} />}\n                    </div>\n                    <ControlButton\n                        label={fullscreen ? exitFullscreenTrl : enterFullscreenTrl}\n                        icon={fullscreen ? DashedSquareInOutlinedSize24 : EnterFullscreenIcon}\n                        onClick={() => {\n                            store.toggleFullscreen();\n                            store.notifyActivity();\n                        }}\n                        withTooltip={withTooltip}\n                        compact={compact}\n                        control=\"fullscreen\"\n                        data-qa=\"video-fullscreen\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n\n    // в fullscreen разворачивается плеер — контролы переезжают в него; иначе — в заданный контейнер, если он есть\n    const target = (fullscreen && store.getRoot()) || container;\n    return target ? createPortal(renderResult, target) : renderResult;\n};\n\nVideoControls.displayName = 'VideoControls';\n"],"names":[],"mappings":"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"}

package/VideoPlayer.js

@@ -19,7 +19,7 @@ import { useCanvasGestures } from './internal/useCanvasGestures.js';
 import { useInert } from './internal/useInert.js';
 import { useVideoHotkeys } from './internal/useVideoHotkeys.js';
 import { useViewportVisibility } from './internal/useViewportVisibility.js';
-import { s as styles } from './video-B0giLQLN.js';
+import { s as styles } from './video-DR4YYLmP.js';
 import '@hh.ru/magritte-common-keyboard';
 
 const ERROR_PLACEHOLDER_MAX_WIDTH = 343;

package/index.css

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

package/internal/ControlButton.d.ts

@@ -1,5 +1,5 @@
 import { type FC, type ReactNode } from 'react';
-import { type IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon';
+import { type IconWrapperComponentSize16, type IconWrapperComponentSize24 } from '@hh.ru/magritte-ui-icon';
 interface ControlButtonBaseProps {
     /** Имя контрола: по нему контролы находят кнопку (вернуть фокус после подмены). Не путать с `data-qa` */
     control: string;
@@ -8,11 +8,13 @@ interface ControlButtonBaseProps {
     onClick: VoidFunction;
     /** Подсказка при наведении — только на desktop и пока контролы видны */
     withTooltip: boolean;
+    /** Компактные кнопки 32px (mobile вне fullscreen): иконка 16 и отступы 8 */
+    compact?: boolean;
     'data-qa'?: string;
 }
 interface IconControlButtonProps extends ControlButtonBaseProps {
     /** Иконка-кнопка: подложку, отступы, скругление и состояния даёт сама иконка */
-    icon: IconWrapperComponentSize24;
+    icon: IconWrapperComponentSize24 | IconWrapperComponentSize16;
     /** Без собственной подложки — внутри общей «таблетки» (громкость) */
     bare?: boolean;
     children?: never;

package/internal/ControlButton.js

@@ -1,15 +1,16 @@
 import './../index.css';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } 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-B0giLQLN.js';
+import { s as styles } from '../video-DR4YYLmP.js';
 
 const ControlButton = ({
   control,
   label,
   onClick,
   withTooltip,
+  compact = false,
   icon: Icon,
   bare = false,
   children,
@@ -22,7 +23,7 @@ const ControlButton = ({
       "button",
       {
         type: "button",
-        className: styles.controlButton,
+        className: classnames(styles.controlButton, { [styles.controlButtonCompact]: compact }),
         "aria-label": label,
         onClick,
         "data-qa": dataQa,
@@ -36,7 +37,7 @@ const ControlButton = ({
       Icon,
       {
         initialColor: "constant",
-        padding: 12,
+        padding: compact ? 8 : 12,
         borderRadius: "halfHeight",
         backgroundStyle: "overlay",
         "aria-label": label,

package/internal/ControlButton.js.map

@@ -1 +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;;;;"}
+{"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 IconWrapperComponentSize16, 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    /** Компактные кнопки 32px (mobile вне fullscreen): иконка 16 и отступы 8 */\n    compact?: boolean;\n    'data-qa'?: string;\n}\n\ninterface IconControlButtonProps extends ControlButtonBaseProps {\n    /** Иконка-кнопка: подложку, отступы, скругление и состояния даёт сама иконка */\n    icon: IconWrapperComponentSize24 | IconWrapperComponentSize16;\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    compact = false,\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={classnames(styles.controlButton, { [styles.controlButtonCompact]: compact })}\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={compact ? 8 : 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":";;;;;;AAsCO,MAAM,gBAAwC,CAAC;AAAA,EAClD,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAU,GAAA,KAAA;AAAA,EACV,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,SAAA,EAAW,UAAW,CAAA,MAAA,CAAO,aAAe,EAAA,EAAE,CAAC,MAAO,CAAA,oBAAoB,GAAG,OAAA,EAAS,CAAA;AAAA,QACtF,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,OAAA,EAAS,UAAU,CAAI,GAAA,EAAA;AAAA,QACvB,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.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-B0giLQLN.js';
+import { s as styles } from '../video-DR4YYLmP.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-B0giLQLN.js';
+import { s as styles } from '../video-DR4YYLmP.js';
 
 const SeekIndicator = ({ direction, seconds, count }) => {
   const forward = direction > 0;

package/internal/TimeLabel.d.ts

@@ -7,4 +7,5 @@ import { type VideoStore } from '../internal/store';
 export declare const TimeLabel: FC<{
     store: VideoStore;
     live: boolean;
+    compact: boolean;
 }>;

package/internal/TimeLabel.js

@@ -4,7 +4,7 @@ import { useRef, useEffect } from 'react';
 import { Text } from '@hh.ru/magritte-ui-typography';
 import { formatTime } from './formatTime.js';
 
-const TimeLabel = ({ store, live }) => {
+const TimeLabel = ({ store, live, compact }) => {
   const ref = useRef(null);
   useEffect(
     () => store.subscribeTime(({ current, duration, origin }) => {
@@ -15,7 +15,7 @@ const TimeLabel = ({ store, live }) => {
     }),
     [store, live]
   );
-  return /* @__PURE__ */ jsx(Text, { typography: "paragraph-3-regular", style: "constant", children: /* @__PURE__ */ jsx("span", { ref, "data-qa": "video-time" }) });
+  return /* @__PURE__ */ jsx(Text, { typography: compact ? "paragraph-4-regular" : "paragraph-3-regular", style: "constant", children: /* @__PURE__ */ jsx("span", { ref, "data-qa": "video-time" }) });
 };
 
 export { TimeLabel };

package/internal/TimeLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeLabel.js","sources":["src/internal/TimeLabel.tsx"],"sourcesContent":["import { type FC, useEffect, useRef } from 'react';\n\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { formatTime } from '@hh.ru/magritte-ui-video/internal/formatTime';\nimport { type VideoStore } from '@hh.ru/magritte-ui-video/internal/store';\n\n/**\n * Время `текущее / длительность`. Для live (длительность неизвестна) — только прошедшее время от старта воспроизведения.\n * Текст пишется прямо в DOM из `subscribeTime`, без React-рендеров на каждом кадре\n */\nexport const TimeLabel: FC<{ store: VideoStore; live: boolean }> = ({ store, live }) => {\n    const ref = useRef<HTMLSpanElement>(null);\n\n    useEffect(\n        () =>\n            store.subscribeTime(({ current, duration, origin }) => {\n                if (!ref.current) {\n                    return;\n                }\n                ref.current.textContent = live\n                    ? formatTime(current - origin)\n                    : `${formatTime(current)} / ${formatTime(duration)}`;\n            }),\n        [store, live]\n    );\n\n    return (\n        <Text typography=\"paragraph-3-regular\" style=\"constant\">\n            <span ref={ref} data-qa=\"video-time\" />\n        </Text>\n    );\n};\n"],"names":[],"mappings":";;;;;AAUO,MAAM,SAAsD,GAAA,CAAC,EAAE,KAAA,EAAO,MAAW,KAAA;AACpF,EAAM,MAAA,GAAA,GAAM,OAAwB,IAAI,CAAA,CAAA;AAExC,EAAA,SAAA;AAAA,IACI,MACI,MAAM,aAAc,CAAA,CAAC,EAAE,OAAS,EAAA,QAAA,EAAU,QAAa,KAAA;AACnD,MAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AACd,QAAA,OAAA;AAAA,OACJ;AACA,MAAA,GAAA,CAAI,OAAQ,CAAA,WAAA,GAAc,IACpB,GAAA,UAAA,CAAW,UAAU,MAAM,CAAA,GAC3B,CAAG,EAAA,UAAA,CAAW,OAAO,CAAC,CAAM,GAAA,EAAA,UAAA,CAAW,QAAQ,CAAC,CAAA,CAAA,CAAA;AAAA,KACzD,CAAA;AAAA,IACL,CAAC,OAAO,IAAI,CAAA;AAAA,GAChB,CAAA;AAEA,EACI,uBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,UAAA,EAAW,qBAAsB,EAAA,KAAA,EAAM,UACzC,EAAA,QAAA,kBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,GAAA,EAAU,SAAQ,EAAA,YAAA,EAAa,CACzC,EAAA,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"TimeLabel.js","sources":["src/internal/TimeLabel.tsx"],"sourcesContent":["import { type FC, useEffect, useRef } from 'react';\n\nimport { Text } from '@hh.ru/magritte-ui-typography';\nimport { formatTime } from '@hh.ru/magritte-ui-video/internal/formatTime';\nimport { type VideoStore } from '@hh.ru/magritte-ui-video/internal/store';\n\n/**\n * Время `текущее / длительность`. Для live (длительность неизвестна) — только прошедшее время от старта воспроизведения.\n * Текст пишется прямо в DOM из `subscribeTime`, без React-рендеров на каждом кадре\n */\nexport const TimeLabel: FC<{ store: VideoStore; live: boolean; compact: boolean }> = ({ store, live, compact }) => {\n    const ref = useRef<HTMLSpanElement>(null);\n\n    useEffect(\n        () =>\n            store.subscribeTime(({ current, duration, origin }) => {\n                if (!ref.current) {\n                    return;\n                }\n                ref.current.textContent = live\n                    ? formatTime(current - origin)\n                    : `${formatTime(current)} / ${formatTime(duration)}`;\n            }),\n        [store, live]\n    );\n\n    return (\n        <Text typography={compact ? 'paragraph-4-regular' : 'paragraph-3-regular'} style=\"constant\">\n            <span ref={ref} data-qa=\"video-time\" />\n        </Text>\n    );\n};\n"],"names":[],"mappings":";;;;;AAUO,MAAM,YAAwE,CAAC,EAAE,KAAO,EAAA,IAAA,EAAM,SAAc,KAAA;AAC/G,EAAM,MAAA,GAAA,GAAM,OAAwB,IAAI,CAAA,CAAA;AAExC,EAAA,SAAA;AAAA,IACI,MACI,MAAM,aAAc,CAAA,CAAC,EAAE,OAAS,EAAA,QAAA,EAAU,QAAa,KAAA;AACnD,MAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AACd,QAAA,OAAA;AAAA,OACJ;AACA,MAAA,GAAA,CAAI,OAAQ,CAAA,WAAA,GAAc,IACpB,GAAA,UAAA,CAAW,UAAU,MAAM,CAAA,GAC3B,CAAG,EAAA,UAAA,CAAW,OAAO,CAAC,CAAM,GAAA,EAAA,UAAA,CAAW,QAAQ,CAAC,CAAA,CAAA,CAAA;AAAA,KACzD,CAAA;AAAA,IACL,CAAC,OAAO,IAAI,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,uBACK,GAAA,CAAA,IAAA,EAAA,EAAK,UAAY,EAAA,OAAA,GAAU,qBAAwB,GAAA,qBAAA,EAAuB,KAAM,EAAA,UAAA,EAC7E,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA,EAAK,GAAU,EAAA,SAAA,EAAQ,cAAa,CACzC,EAAA,CAAA,CAAA;AAER;;;;"}

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-B0giLQLN.js';
+import { s as styles } from '../video-DR4YYLmP.js';
 import 'react';
 
 const KEYBOARD_VOLUME_STEP = 0.1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-video",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -24,13 +24,13 @@
     "@hh.ru/magritte-common-use-translation": "3.8.0",
     "@hh.ru/magritte-design-tokens": "26.0.2",
     "@hh.ru/magritte-ui-breakpoint": "6.1.3",
-    "@hh.ru/magritte-ui-button": "7.3.9",
-    "@hh.ru/magritte-ui-button-stack": "4.0.38",
-    "@hh.ru/magritte-ui-icon": "15.1.6",
-    "@hh.ru/magritte-ui-loader": "4.1.7",
+    "@hh.ru/magritte-ui-button": "7.4.0",
+    "@hh.ru/magritte-ui-button-stack": "4.1.0",
+    "@hh.ru/magritte-ui-icon": "15.2.0",
+    "@hh.ru/magritte-ui-loader": "4.2.0",
     "@hh.ru/magritte-ui-mock-component": "1.1.9",
-    "@hh.ru/magritte-ui-placeholder": "11.1.52",
-    "@hh.ru/magritte-ui-tooltip": "11.0.54",
+    "@hh.ru/magritte-ui-placeholder": "11.2.0",
+    "@hh.ru/magritte-ui-tooltip": "11.1.0",
     "@hh.ru/magritte-ui-typography": "5.3.17"
   },
   "peerDependencies": {
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "17a448d4bbe9f55b342f0b1ba7612bfe7acd76d7"
+  "gitHead": "4cd5113b854b80bce029febd28c0bfdf4773da7c"
 }

package/video-DR4YYLmP.js

@@ -0,0 +1,5 @@
+import './index.css';
+var styles = {"player":"magritte-player___IHHy5_1-1-1","player-fit":"magritte-player-fit___TX-6X_1-1-1","playerFit":"magritte-player-fit___TX-6X_1-1-1","player-embedded":"magritte-player-embedded___GNvRb_1-1-1","playerEmbedded":"magritte-player-embedded___GNvRb_1-1-1","video":"magritte-video___4cS-u_1-1-1","video-hidden":"magritte-video-hidden___agqVq_1-1-1","videoHidden":"magritte-video-hidden___agqVq_1-1-1","overlay-button":"magritte-overlay-button___MIRAP_1-1-1","overlayButton":"magritte-overlay-button___MIRAP_1-1-1","duration":"magritte-duration___ND1ei_1-1-1","seek-indicator":"magritte-seek-indicator___VJQBC_1-1-1","seekIndicator":"magritte-seek-indicator___VJQBC_1-1-1","seek-indicator-forward":"magritte-seek-indicator-forward___9C5gD_1-1-1","seekIndicatorForward":"magritte-seek-indicator-forward___9C5gD_1-1-1","seek-indicator-backward":"magritte-seek-indicator-backward___gIZ0E_1-1-1","seekIndicatorBackward":"magritte-seek-indicator-backward___gIZ0E_1-1-1","seek-arrows":"magritte-seek-arrows___Ql1eP_1-1-1","seekArrows":"magritte-seek-arrows___Ql1eP_1-1-1","seek-arrow-incoming":"magritte-seek-arrow-incoming___oZxww_1-1-1","seekArrowIncoming":"magritte-seek-arrow-incoming___oZxww_1-1-1","seek-arrow-in":"magritte-seek-arrow-in___CB4-s_1-1-1","seekArrowIn":"magritte-seek-arrow-in___CB4-s_1-1-1","boost-indicator":"magritte-boost-indicator___ujllx_1-1-1","boostIndicator":"magritte-boost-indicator___ujllx_1-1-1","loader":"magritte-loader___qVu0P_1-1-1","error":"magritte-error___Rm7uG_1-1-1","overlay-button-hidden":"magritte-overlay-button-hidden___AoGFc_1-1-1","overlayButtonHidden":"magritte-overlay-button-hidden___AoGFc_1-1-1","controls":"magritte-controls___pKoSN_1-1-1","controls-hidden":"magritte-controls-hidden___bePTD_1-1-1","controlsHidden":"magritte-controls-hidden___bePTD_1-1-1","controls-mobile":"magritte-controls-mobile___tdKGT_1-1-1","controlsMobile":"magritte-controls-mobile___tdKGT_1-1-1","controls-compact":"magritte-controls-compact___WC9tB_1-1-1","controlsCompact":"magritte-controls-compact___WC9tB_1-1-1","controls-overlay":"magritte-controls-overlay___mRsJL_1-1-1","controlsOverlay":"magritte-controls-overlay___mRsJL_1-1-1","controls-row":"magritte-controls-row___2sdJg_1-1-1","controlsRow":"magritte-controls-row___2sdJg_1-1-1","controls-group-start":"magritte-controls-group-start___yY9ZA_1-1-1","controlsGroupStart":"magritte-controls-group-start___yY9ZA_1-1-1","controls-group-end":"magritte-controls-group-end___ziIm8_1-1-1","controlsGroupEnd":"magritte-controls-group-end___ziIm8_1-1-1","control-pill":"magritte-control-pill___hK8Mv_1-1-1","controlPill":"magritte-control-pill___hK8Mv_1-1-1","controls-time":"magritte-controls-time___e9zoz_1-1-1","controlsTime":"magritte-controls-time___e9zoz_1-1-1","controls-volume":"magritte-controls-volume___o4ajR_1-1-1","controlsVolume":"magritte-controls-volume___o4ajR_1-1-1","control-pill-bare":"magritte-control-pill-bare___lU9ev_1-1-1","controlPillBare":"magritte-control-pill-bare___lU9ev_1-1-1","control-button":"magritte-control-button___VJ2Qr_1-1-1","controlButton":"magritte-control-button___VJ2Qr_1-1-1","control-button-compact":"magritte-control-button-compact___WaR9x_1-1-1","controlButtonCompact":"magritte-control-button-compact___WaR9x_1-1-1","scrubber":"magritte-scrubber___-K3ik_1-1-1","scrubber-track":"magritte-scrubber-track___ki1zV_1-1-1","scrubberTrack":"magritte-scrubber-track___ki1zV_1-1-1","scrubber-buffered":"magritte-scrubber-buffered___ufvLe_1-1-1","scrubberBuffered":"magritte-scrubber-buffered___ufvLe_1-1-1","scrubber-progress":"magritte-scrubber-progress___ZIyew_1-1-1","scrubberProgress":"magritte-scrubber-progress___ZIyew_1-1-1","scrubber-thumb":"magritte-scrubber-thumb___VXyPP_1-1-1","scrubberThumb":"magritte-scrubber-thumb___VXyPP_1-1-1","scrubber-timecode":"magritte-scrubber-timecode___M-syA_1-1-1","scrubberTimecode":"magritte-scrubber-timecode___M-syA_1-1-1","volume-slider":"magritte-volume-slider___qE2P7_1-1-1","volumeSlider":"magritte-volume-slider___qE2P7_1-1-1","volume-track":"magritte-volume-track___up8nd_1-1-1","volumeTrack":"magritte-volume-track___up8nd_1-1-1","volume-value":"magritte-volume-value___aUSuU_1-1-1","volumeValue":"magritte-volume-value___aUSuU_1-1-1"};
+
+export { styles as s };
+//# sourceMappingURL=video-DR4YYLmP.js.map

package/video-DR4YYLmP.js.map

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

package/video-B0giLQLN.js

@@ -1,5 +0,0 @@
-import './index.css';
-var styles = {"player":"magritte-player___IHHy5_1-0-3","player-fit":"magritte-player-fit___TX-6X_1-0-3","playerFit":"magritte-player-fit___TX-6X_1-0-3","player-embedded":"magritte-player-embedded___GNvRb_1-0-3","playerEmbedded":"magritte-player-embedded___GNvRb_1-0-3","video":"magritte-video___4cS-u_1-0-3","video-hidden":"magritte-video-hidden___agqVq_1-0-3","videoHidden":"magritte-video-hidden___agqVq_1-0-3","overlay-button":"magritte-overlay-button___MIRAP_1-0-3","overlayButton":"magritte-overlay-button___MIRAP_1-0-3","duration":"magritte-duration___ND1ei_1-0-3","seek-indicator":"magritte-seek-indicator___VJQBC_1-0-3","seekIndicator":"magritte-seek-indicator___VJQBC_1-0-3","seek-indicator-forward":"magritte-seek-indicator-forward___9C5gD_1-0-3","seekIndicatorForward":"magritte-seek-indicator-forward___9C5gD_1-0-3","seek-indicator-backward":"magritte-seek-indicator-backward___gIZ0E_1-0-3","seekIndicatorBackward":"magritte-seek-indicator-backward___gIZ0E_1-0-3","seek-arrows":"magritte-seek-arrows___Ql1eP_1-0-3","seekArrows":"magritte-seek-arrows___Ql1eP_1-0-3","seek-arrow-incoming":"magritte-seek-arrow-incoming___oZxww_1-0-3","seekArrowIncoming":"magritte-seek-arrow-incoming___oZxww_1-0-3","seek-arrow-in":"magritte-seek-arrow-in___CB4-s_1-0-3","seekArrowIn":"magritte-seek-arrow-in___CB4-s_1-0-3","boost-indicator":"magritte-boost-indicator___ujllx_1-0-3","boostIndicator":"magritte-boost-indicator___ujllx_1-0-3","loader":"magritte-loader___qVu0P_1-0-3","error":"magritte-error___Rm7uG_1-0-3","overlay-button-hidden":"magritte-overlay-button-hidden___AoGFc_1-0-3","overlayButtonHidden":"magritte-overlay-button-hidden___AoGFc_1-0-3","controls":"magritte-controls___pKoSN_1-0-3","controls-hidden":"magritte-controls-hidden___bePTD_1-0-3","controlsHidden":"magritte-controls-hidden___bePTD_1-0-3","controls-mobile":"magritte-controls-mobile___tdKGT_1-0-3","controlsMobile":"magritte-controls-mobile___tdKGT_1-0-3","controls-overlay":"magritte-controls-overlay___mRsJL_1-0-3","controlsOverlay":"magritte-controls-overlay___mRsJL_1-0-3","controls-row":"magritte-controls-row___2sdJg_1-0-3","controlsRow":"magritte-controls-row___2sdJg_1-0-3","controls-group-start":"magritte-controls-group-start___yY9ZA_1-0-3","controlsGroupStart":"magritte-controls-group-start___yY9ZA_1-0-3","controls-group-end":"magritte-controls-group-end___ziIm8_1-0-3","controlsGroupEnd":"magritte-controls-group-end___ziIm8_1-0-3","control-pill":"magritte-control-pill___hK8Mv_1-0-3","controlPill":"magritte-control-pill___hK8Mv_1-0-3","controls-time":"magritte-controls-time___e9zoz_1-0-3","controlsTime":"magritte-controls-time___e9zoz_1-0-3","controls-volume":"magritte-controls-volume___o4ajR_1-0-3","controlsVolume":"magritte-controls-volume___o4ajR_1-0-3","control-pill-bare":"magritte-control-pill-bare___lU9ev_1-0-3","controlPillBare":"magritte-control-pill-bare___lU9ev_1-0-3","control-button":"magritte-control-button___VJ2Qr_1-0-3","controlButton":"magritte-control-button___VJ2Qr_1-0-3","scrubber":"magritte-scrubber___-K3ik_1-0-3","scrubber-track":"magritte-scrubber-track___ki1zV_1-0-3","scrubberTrack":"magritte-scrubber-track___ki1zV_1-0-3","scrubber-buffered":"magritte-scrubber-buffered___ufvLe_1-0-3","scrubberBuffered":"magritte-scrubber-buffered___ufvLe_1-0-3","scrubber-progress":"magritte-scrubber-progress___ZIyew_1-0-3","scrubberProgress":"magritte-scrubber-progress___ZIyew_1-0-3","scrubber-thumb":"magritte-scrubber-thumb___VXyPP_1-0-3","scrubberThumb":"magritte-scrubber-thumb___VXyPP_1-0-3","scrubber-timecode":"magritte-scrubber-timecode___M-syA_1-0-3","scrubberTimecode":"magritte-scrubber-timecode___M-syA_1-0-3","volume-slider":"magritte-volume-slider___qE2P7_1-0-3","volumeSlider":"magritte-volume-slider___qE2P7_1-0-3","volume-track":"magritte-volume-track___up8nd_1-0-3","volumeTrack":"magritte-volume-track___up8nd_1-0-3","volume-value":"magritte-volume-value___aUSuU_1-0-3","volumeValue":"magritte-volume-value___aUSuU_1-0-3"};
-
-export { styles as s };
-//# sourceMappingURL=video-B0giLQLN.js.map

package/video-B0giLQLN.js.map

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