npm - @videojs/react - Versions diffs - 10.0.0-beta.15 → 10.0.0-beta.17 - Mend

@videojs/react 10.0.0-beta.15 → 10.0.0-beta.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/dist/dev/presets/audio/skin.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { AlertDialogPopup } from "../../ui/alert-dialog/alert-dialog-popup.js";
 import { AlertDialogTitle } from "../../ui/alert-dialog/alert-dialog-title.js";
 import { ErrorDialogDescription } from "../../ui/error-dialog/error-dialog-description.js";
 import { ErrorDialogRoot } from "../../ui/error-dialog/error-dialog-root.js";
+import { MediaHotkey } from "../../ui/hotkey/media-hotkey.js";
 import { MuteButton } from "../../ui/mute-button/mute-button.js";
 import { PlayButton } from "../../ui/play-button/play-button.js";
 import { PlaybackRateButton } from "../../ui/playback-rate-button/playback-rate-button.js";
@@ -197,6 +198,70 @@ function AudioSkin(props) {
 						}), /* @__PURE__ */ jsx(VolumePopover, {})]
 					})
 				] })
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "Space",
+				action: "togglePaused"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "k",
+				action: "togglePaused"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "m",
+				action: "toggleMuted"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowRight",
+				action: "seekStep",
+				value: 5
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowLeft",
+				action: "seekStep",
+				value: -5
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "l",
+				action: "seekStep",
+				value: 10
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "j",
+				action: "seekStep",
+				value: -10
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowUp",
+				action: "volumeStep",
+				value: .05
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowDown",
+				action: "volumeStep",
+				value: -.05
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "0-9",
+				action: "seekToPercent"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "Home",
+				action: "seekToPercent",
+				value: 0
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "End",
+				action: "seekToPercent",
+				value: 100
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: ">",
+				action: "speedUp"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "<",
+				action: "speedDown"
 			})
 		]
 	});

package/dist/dev/presets/audio/skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","ErrorDialog.Root","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/skin.tsx"],"sourcesContent":["import {\n PauseIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type AudioSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn('media-button media-button--subtle media-button--icon', className)}\n {...props}\n />\n );\n});\n\nfunction VolumePopover(): ReactNode {\n const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n const muteButton = (\n <MuteButton className=\"media-button--mute\" render={<Button />}>\n <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n </MuteButton>\n );\n\n if (volumeUnsupported) return muteButton;\n\n return (\n <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n <Popover.Trigger render={muteButton} />\n <Popover.Popup className=\"media-surface media-popover media-popover--volume\">\n <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n <VolumeSlider.Track className=\"media-slider__track\">\n <VolumeSlider.Fill className=\"media-slider__fill\" />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Root>\n );\n}\n\nexport function AudioSkin(props: AudioSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-default-skin media-default-skin--audio', className)} {...rest}>\n {children}\n\n <ErrorDialog.Root>\n <ErrorDialog.Popup className=\"media-error\">\n <div className=\"media-error__dialog\">\n <div className=\"media-error__content\">\n <ErrorDialog.Title className=\"media-error__title\">Something went wrong.</ErrorDialog.Title>\n <ErrorDialog.Description className=\"media-error__description\" />\n </div>\n <div className=\"media-error__actions\">\n <ErrorDialog.Close className=\"media-button media-button--subtle\">OK</ErrorDialog.Close>\n </div>\n </div>\n </ErrorDialog.Popup>\n </ErrorDialog.Root>\n\n <div className=\"media-surface media-controls\">\n <Tooltip.Provider>\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton className=\"media-button--play\" render={<Button />}>\n <RestartIcon className=\"media-icon media-icon--restart\" />\n <PlayIcon className=\"media-icon media-icon--play\" />\n <PauseIcon className=\"media-icon media-icon--pause\" />\n </PlayButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\" />\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </SeekButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </SeekButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className=\"media-time-controls\">\n <Time.Value type=\"current\" className=\"media-time\" />\n <TimeSlider.Root className=\"media-slider\">\n <TimeSlider.Track className=\"media-slider__track\">\n <TimeSlider.Fill className=\"media-slider__fill\" />\n <TimeSlider.Buffer className=\"media-slider__buffer\" />\n </TimeSlider.Track>\n <TimeSlider.Thumb className=\"media-slider__thumb\" />\n </TimeSlider.Root>\n <Time.Value type=\"duration\" className=\"media-time\" />\n </div>\n\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n </Tooltip.Root>\n\n <VolumePopover />\n </div>\n </Tooltip.Provider>\n </div>\n </Container>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","ErrorDialog.Root","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/skin.tsx"],"sourcesContent":["import {\n PauseIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { MediaHotkey } from '@/ui/hotkey/media-hotkey';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type AudioSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn('media-button media-button--subtle media-button--icon', className)}\n {...props}\n />\n );\n});\n\nfunction VolumePopover(): ReactNode {\n const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n const muteButton = (\n <MuteButton className=\"media-button--mute\" render={<Button />}>\n <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n </MuteButton>\n );\n\n if (volumeUnsupported) return muteButton;\n\n return (\n <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n <Popover.Trigger render={muteButton} />\n <Popover.Popup className=\"media-surface media-popover media-popover--volume\">\n <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n <VolumeSlider.Track className=\"media-slider__track\">\n <VolumeSlider.Fill className=\"media-slider__fill\" />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Root>\n );\n}\n\nexport function AudioSkin(props: AudioSkinProps): ReactNode {\n const { children, className, ...rest } = props;\n\n return (\n <Container className={cn('media-default-skin media-default-skin--audio', className)} {...rest}>\n {children}\n\n <ErrorDialog.Root>\n <ErrorDialog.Popup className=\"media-error\">\n <div className=\"media-error__dialog\">\n <div className=\"media-error__content\">\n <ErrorDialog.Title className=\"media-error__title\">Something went wrong.</ErrorDialog.Title>\n <ErrorDialog.Description className=\"media-error__description\" />\n </div>\n <div className=\"media-error__actions\">\n <ErrorDialog.Close className=\"media-button media-button--subtle\">OK</ErrorDialog.Close>\n </div>\n </div>\n </ErrorDialog.Popup>\n </ErrorDialog.Root>\n\n <div className=\"media-surface media-controls\">\n <Tooltip.Provider>\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton className=\"media-button--play\" render={<Button />}>\n <RestartIcon className=\"media-icon media-icon--restart\" />\n <PlayIcon className=\"media-icon media-icon--play\" />\n <PauseIcon className=\"media-icon media-icon--pause\" />\n </PlayButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\" />\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </SeekButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </SeekButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className=\"media-time-controls\">\n <Time.Value type=\"current\" className=\"media-time\" />\n <TimeSlider.Root className=\"media-slider\">\n <TimeSlider.Track className=\"media-slider__track\">\n <TimeSlider.Fill className=\"media-slider__fill\" />\n <TimeSlider.Buffer className=\"media-slider__buffer\" />\n </TimeSlider.Track>\n <TimeSlider.Thumb className=\"media-slider__thumb\" />\n </TimeSlider.Root>\n <Time.Value type=\"duration\" className=\"media-time\" />\n </div>\n\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n </Tooltip.Root>\n\n <VolumePopover />\n </div>\n </Tooltip.Provider>\n </div>\n\n {/* Hotkeys */}\n <MediaHotkey keys=\"Space\" action=\"togglePaused\" />\n <MediaHotkey keys=\"k\" action=\"togglePaused\" />\n <MediaHotkey keys=\"m\" action=\"toggleMuted\" />\n <MediaHotkey keys=\"ArrowRight\" action=\"seekStep\" value={5} />\n <MediaHotkey keys=\"ArrowLeft\" action=\"seekStep\" value={-5} />\n <MediaHotkey keys=\"l\" action=\"seekStep\" value={10} />\n <MediaHotkey keys=\"j\" action=\"seekStep\" value={-10} />\n <MediaHotkey keys=\"ArrowUp\" action=\"volumeStep\" value={0.05} />\n <MediaHotkey keys=\"ArrowDown\" action=\"volumeStep\" value={-0.05} />\n <MediaHotkey keys=\"0-9\" action=\"seekToPercent\" />\n <MediaHotkey keys=\"Home\" action=\"seekToPercent\" value={0} />\n <MediaHotkey keys=\"End\" action=\"seekToPercent\" value={100} />\n <MediaHotkey keys=\">\" action=\"speedUp\" />\n <MediaHotkey keys=\"<\" action=\"speedDown\" />\n </Container>\n );\n}\n"],"mappings":"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"}

package/dist/dev/presets/video/minimal-skin.css CHANGED Viewed

@@ -34,6 +34,12 @@
   height: 100%;
   width: 100%;
   border-radius: var(--media-border-radius, 0.75rem);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  &:focus-visible {
+    outline-color: currentColor;
+  }
   font-family:
     Inter Variable,
     Inter,
@@ -607,6 +613,23 @@
   }
 }
+/* Dragging — thumb and fill follow the pointer position */
+.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"] {
+  left: var(--media-slider-pointer);
+}
+.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"] {
+  top: calc(100% - var(--media-slider-pointer));
+}
+.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"] {
+  width: var(--media-slider-pointer);
+}
+.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"] {
+  height: var(--media-slider-pointer);
+}
 /* ==========================================================================
    Popups & Animations
    ========================================================================== */

package/dist/dev/presets/video/skin.css CHANGED Viewed

@@ -34,6 +34,12 @@
   height: 100%;
   width: 100%;
   border-radius: var(--media-border-radius, 2rem);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  &:focus-visible {
+    outline-color: currentColor;
+  }
   font-family:
     Inter Variable,
     Inter,
@@ -633,6 +639,23 @@
   }
 }
+/* Dragging — thumb and fill follow the pointer position */
+.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"] {
+  left: var(--media-slider-pointer);
+}
+.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"] {
+  top: calc(100% - var(--media-slider-pointer));
+}
+.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"] {
+  width: var(--media-slider-pointer);
+}
+.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"] {
+  height: var(--media-slider-pointer);
+}
 /* ==========================================================================
    Popups & Tooltips
    ========================================================================== */

package/dist/dev/presets/video/skin.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/presets/video/skin.tsx"],"mappings":";;;;~~KA0CY~~,cAAA,GAAiB,kBAAA;AAAA,iBAyCb,SAAA,CAAU,KAAA,EAAO,cAAA,GAAiB,SAAA"}
1	+ {"version":3,"file":"skin.d.ts","names":[],"sources":["../../../../src/presets/video/skin.tsx"],"mappings":";;;;KA4CY,cAAA,GAAiB,kBAAA;AAAA,iBAyCb,SAAA,CAAU,KAAA,EAAO,cAAA,GAAiB,SAAA"}

package/dist/dev/presets/video/skin.js CHANGED Viewed

@@ -9,6 +9,8 @@ import { ControlsRoot } from "../../ui/controls/controls-root.js";
 import { ErrorDialogDescription } from "../../ui/error-dialog/error-dialog-description.js";
 import { ErrorDialogRoot } from "../../ui/error-dialog/error-dialog-root.js";
 import { FullscreenButton } from "../../ui/fullscreen-button/fullscreen-button.js";
+import { MediaGesture } from "../../ui/gesture/media-gesture.js";
+import { MediaHotkey } from "../../ui/hotkey/media-hotkey.js";
 import { MuteButton } from "../../ui/mute-button/mute-button.js";
 import { PiPButton } from "../../ui/pip-button/pip-button.js";
 import { PlayButton } from "../../ui/play-button/play-button.js";
@@ -268,7 +270,111 @@ function VideoSkin(props) {
 					})
 				] })
 			}),
-			/* @__PURE__ */ jsx("div", { className: "media-overlay" })
+			/* @__PURE__ */ jsx("div", { className: "media-overlay" }),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "Space",
+				action: "togglePaused"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "k",
+				action: "togglePaused"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "m",
+				action: "toggleMuted"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "f",
+				action: "toggleFullscreen"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "c",
+				action: "toggleSubtitles"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "i",
+				action: "togglePictureInPicture"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowRight",
+				action: "seekStep",
+				value: 5
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowLeft",
+				action: "seekStep",
+				value: -5
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "l",
+				action: "seekStep",
+				value: 10
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "j",
+				action: "seekStep",
+				value: -10
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowUp",
+				action: "volumeStep",
+				value: .05
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowDown",
+				action: "volumeStep",
+				value: -.05
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "0-9",
+				action: "seekToPercent"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "Home",
+				action: "seekToPercent",
+				value: 0
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "End",
+				action: "seekToPercent",
+				value: 100
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: ">",
+				action: "speedUp"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "<",
+				action: "speedDown"
+			}),
+			/* @__PURE__ */ jsx(MediaGesture, {
+				type: "tap",
+				action: "togglePaused",
+				pointer: "mouse",
+				region: "center"
+			}),
+			/* @__PURE__ */ jsx(MediaGesture, {
+				type: "tap",
+				action: "toggleControls",
+				pointer: "touch"
+			}),
+			/* @__PURE__ */ jsx(MediaGesture, {
+				type: "doubletap",
+				action: "seekStep",
+				value: -10,
+				region: "left"
+			}),
+			/* @__PURE__ */ jsx(MediaGesture, {
+				type: "doubletap",
+				action: "toggleFullscreen",
+				region: "center"
+			}),
+			/* @__PURE__ */ jsx(MediaGesture, {
+				type: "doubletap",
+				action: "seekStep",
+				value: 10,
+				region: "right"
+			})
 		]
 	});
 }

package/dist/dev/presets/video/skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","ErrorDialog.Root","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close","Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/skin.tsx"],"sourcesContent":["import {\n CaptionsOffIcon,\n CaptionsOnIcon,\n FullscreenEnterIcon,\n FullscreenExitIcon,\n PauseIcon,\n PipEnterIcon,\n PipExitIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n SpinnerIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { isString } from '@videojs/utils/predicate';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { Poster } from '@/ui/poster';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Slider } from '@/ui/slider';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { isRenderProp } from '@/utils/use-render';\nimport type { BaseVideoSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type VideoSkinProps = BaseVideoSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn('media-button media-button--subtle media-button--icon', className)}\n {...props}\n />\n );\n});\n\nfunction VolumePopover(): ReactNode {\n const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n const muteButton = (\n <MuteButton className=\"media-button--mute\" render={<Button />}>\n <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n </MuteButton>\n );\n\n if (volumeUnsupported) return muteButton;\n\n return (\n <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n <Popover.Trigger render={muteButton} />\n <Popover.Popup className=\"media-surface media-popover media-popover--volume\">\n <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n <VolumeSlider.Track className=\"media-slider__track\">\n <VolumeSlider.Fill className=\"media-slider__fill\" />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Root>\n );\n}\n\nexport function VideoSkin(props: VideoSkinProps): ReactNode {\n const { children, className, poster, ...rest } = props;\n\n return (\n <Container className={cn('media-default-skin media-default-skin--video', className)} {...rest}>\n {children}\n\n {poster && (\n <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />\n )}\n\n <BufferingIndicator\n render={(props) => (\n <div {...props} className=\"media-buffering-indicator\">\n <div className=\"media-surface\">\n <SpinnerIcon className=\"media-icon\" />\n </div>\n </div>\n )}\n />\n\n <ErrorDialog.Root>\n <ErrorDialog.Popup className=\"media-error\">\n <div className=\"media-error__dialog media-surface\">\n <div className=\"media-error__content\">\n <ErrorDialog.Title className=\"media-error__title\">Something went wrong.</ErrorDialog.Title>\n <ErrorDialog.Description className=\"media-error__description\" />\n </div>\n <div className=\"media-error__actions\">\n <ErrorDialog.Close className=\"media-button media-button--primary\">OK</ErrorDialog.Close>\n </div>\n </div>\n </ErrorDialog.Popup>\n </ErrorDialog.Root>\n\n <Controls.Root className=\"media-surface media-controls\">\n <Tooltip.Provider>\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton className=\"media-button--play\" render={<Button />}>\n <RestartIcon className=\"media-icon media-icon--restart\" />\n <PlayIcon className=\"media-icon media-icon--play\" />\n <PauseIcon className=\"media-icon media-icon--pause\" />\n </PlayButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\" />\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </SeekButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </SeekButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className=\"media-time-controls\">\n <Time.Value type=\"current\" className=\"media-time\" />\n <TimeSlider.Root className=\"media-slider\">\n <TimeSlider.Track className=\"media-slider__track\">\n <TimeSlider.Fill className=\"media-slider__fill\" />\n <TimeSlider.Buffer className=\"media-slider__buffer\" />\n </TimeSlider.Track>\n <TimeSlider.Thumb className=\"media-slider__thumb\" />\n\n <div className=\"media-surface media-preview media-slider__preview\">\n <Slider.Thumbnail className=\"media-preview__thumbnail\" />\n <TimeSlider.Value type=\"pointer\" className=\"media-time media-preview__time\" />\n <SpinnerIcon className=\"media-preview__spinner media-icon\" />\n </div>\n </TimeSlider.Root>\n <Time.Value type=\"duration\" className=\"media-time\" />\n </div>\n\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n </Tooltip.Root>\n\n <VolumePopover />\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <CaptionsButton className=\"media-button--captions\" render={<Button />}>\n <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n </CaptionsButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\" />\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PiPButton className=\"media-button--pip\" render={<Button />}>\n <PipEnterIcon className=\"media-icon media-icon--pip-enter\" />\n <PipExitIcon className=\"media-icon media-icon--pip-exit\" />\n </PiPButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\" />\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <FullscreenButton className=\"media-button--fullscreen\" render={<Button />}>\n <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n </FullscreenButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\" />\n </Tooltip.Root>\n </div>\n </Tooltip.Provider>\n </Controls.Root>\n\n <div className=\"media-overlay\" />\n </Container>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","ErrorDialog.Root","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close","Controls.Root","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb","Slider.Thumbnail","TimeSlider.Value"],"sources":["../../../../src/presets/video/skin.tsx"],"sourcesContent":["import {\n CaptionsOffIcon,\n CaptionsOnIcon,\n FullscreenEnterIcon,\n FullscreenExitIcon,\n PauseIcon,\n PipEnterIcon,\n PipExitIcon,\n PlayIcon,\n RestartIcon,\n SeekIcon,\n SpinnerIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { isString } from '@videojs/utils/predicate';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { BufferingIndicator } from '@/ui/buffering-indicator';\nimport { CaptionsButton } from '@/ui/captions-button';\nimport { Controls } from '@/ui/controls';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { FullscreenButton } from '@/ui/fullscreen-button';\nimport { MediaGesture } from '@/ui/gesture/media-gesture';\nimport { MediaHotkey } from '@/ui/hotkey/media-hotkey';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PiPButton } from '@/ui/pip-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { Poster } from '@/ui/poster';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Slider } from '@/ui/slider';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport { isRenderProp } from '@/utils/use-render';\nimport type { BaseVideoSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type VideoSkinProps = BaseVideoSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n return (\n <button\n ref={ref}\n type=\"button\"\n className={cn('media-button media-button--subtle media-button--icon', className)}\n {...props}\n />\n );\n});\n\nfunction VolumePopover(): ReactNode {\n const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n const muteButton = (\n <MuteButton className=\"media-button--mute\" render={<Button />}>\n <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n </MuteButton>\n );\n\n if (volumeUnsupported) return muteButton;\n\n return (\n <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n <Popover.Trigger render={muteButton} />\n <Popover.Popup className=\"media-surface media-popover media-popover--volume\">\n <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n <VolumeSlider.Track className=\"media-slider__track\">\n <VolumeSlider.Fill className=\"media-slider__fill\" />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Root>\n );\n}\n\nexport function VideoSkin(props: VideoSkinProps): ReactNode {\n const { children, className, poster, ...rest } = props;\n\n return (\n <Container className={cn('media-default-skin media-default-skin--video', className)} {...rest}>\n {children}\n\n {poster && (\n <Poster src={isString(poster) ? poster : undefined} render={isRenderProp(poster) ? poster : undefined} />\n )}\n\n <BufferingIndicator\n render={(props) => (\n <div {...props} className=\"media-buffering-indicator\">\n <div className=\"media-surface\">\n <SpinnerIcon className=\"media-icon\" />\n </div>\n </div>\n )}\n />\n\n <ErrorDialog.Root>\n <ErrorDialog.Popup className=\"media-error\">\n <div className=\"media-error__dialog media-surface\">\n <div className=\"media-error__content\">\n <ErrorDialog.Title className=\"media-error__title\">Something went wrong.</ErrorDialog.Title>\n <ErrorDialog.Description className=\"media-error__description\" />\n </div>\n <div className=\"media-error__actions\">\n <ErrorDialog.Close className=\"media-button media-button--primary\">OK</ErrorDialog.Close>\n </div>\n </div>\n </ErrorDialog.Popup>\n </ErrorDialog.Root>\n\n <Controls.Root className=\"media-surface media-controls\">\n <Tooltip.Provider>\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PlayButton className=\"media-button--play\" render={<Button />}>\n <RestartIcon className=\"media-icon media-icon--restart\" />\n <PlayIcon className=\"media-icon media-icon--play\" />\n <PauseIcon className=\"media-icon media-icon--pause\" />\n </PlayButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\" />\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </SeekButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n <span className=\"media-icon__container\">\n <SeekIcon className=\"media-icon media-icon--seek\" />\n <span className=\"media-icon__label\">{SEEK_TIME}</span>\n </span>\n </SeekButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n </Tooltip.Root>\n </div>\n\n <div className=\"media-time-controls\">\n <Time.Value type=\"current\" className=\"media-time\" />\n <TimeSlider.Root className=\"media-slider\">\n <TimeSlider.Track className=\"media-slider__track\">\n <TimeSlider.Fill className=\"media-slider__fill\" />\n <TimeSlider.Buffer className=\"media-slider__buffer\" />\n </TimeSlider.Track>\n <TimeSlider.Thumb className=\"media-slider__thumb\" />\n\n <div className=\"media-surface media-preview media-slider__preview\">\n <Slider.Thumbnail className=\"media-preview__thumbnail\" />\n <TimeSlider.Value type=\"pointer\" className=\"media-time media-preview__time\" />\n <SpinnerIcon className=\"media-preview__spinner media-icon\" />\n </div>\n </TimeSlider.Root>\n <Time.Value type=\"duration\" className=\"media-time\" />\n </div>\n\n <div className=\"media-button-group\">\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n </Tooltip.Root>\n\n <VolumePopover />\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <CaptionsButton className=\"media-button--captions\" render={<Button />}>\n <CaptionsOffIcon className=\"media-icon media-icon--captions-off\" />\n <CaptionsOnIcon className=\"media-icon media-icon--captions-on\" />\n </CaptionsButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\" />\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <PiPButton className=\"media-button--pip\" render={<Button />}>\n <PipEnterIcon className=\"media-icon media-icon--pip-enter\" />\n <PipExitIcon className=\"media-icon media-icon--pip-exit\" />\n </PiPButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\" />\n </Tooltip.Root>\n\n <Tooltip.Root side=\"top\">\n <Tooltip.Trigger\n render={\n <FullscreenButton className=\"media-button--fullscreen\" render={<Button />}>\n <FullscreenEnterIcon className=\"media-icon media-icon--fullscreen-enter\" />\n <FullscreenExitIcon className=\"media-icon media-icon--fullscreen-exit\" />\n </FullscreenButton>\n }\n />\n <Tooltip.Popup className=\"media-surface media-tooltip\" />\n </Tooltip.Root>\n </div>\n </Tooltip.Provider>\n </Controls.Root>\n\n <div className=\"media-overlay\" />\n\n {/* Hotkeys /}\n <MediaHotkey keys=\"Space\" action=\"togglePaused\" />\n <MediaHotkey keys=\"k\" action=\"togglePaused\" />\n <MediaHotkey keys=\"m\" action=\"toggleMuted\" />\n <MediaHotkey keys=\"f\" action=\"toggleFullscreen\" />\n <MediaHotkey keys=\"c\" action=\"toggleSubtitles\" />\n <MediaHotkey keys=\"i\" action=\"togglePictureInPicture\" />\n <MediaHotkey keys=\"ArrowRight\" action=\"seekStep\" value={5} />\n <MediaHotkey keys=\"ArrowLeft\" action=\"seekStep\" value={-5} />\n <MediaHotkey keys=\"l\" action=\"seekStep\" value={10} />\n <MediaHotkey keys=\"j\" action=\"seekStep\" value={-10} />\n <MediaHotkey keys=\"ArrowUp\" action=\"volumeStep\" value={0.05} />\n <MediaHotkey keys=\"ArrowDown\" action=\"volumeStep\" value={-0.05} />\n <MediaHotkey keys=\"0-9\" action=\"seekToPercent\" />\n <MediaHotkey keys=\"Home\" action=\"seekToPercent\" value={0} />\n <MediaHotkey keys=\"End\" action=\"seekToPercent\" value={100} />\n <MediaHotkey keys=\">\" action=\"speedUp\" />\n <MediaHotkey keys=\"<\" action=\"speedDown\" />\n\n {/ Gestures */}\n <MediaGesture type=\"tap\" action=\"togglePaused\" pointer=\"mouse\" region=\"center\" />\n <MediaGesture type=\"tap\" action=\"toggleControls\" pointer=\"touch\" />\n <MediaGesture type=\"doubletap\" action=\"seekStep\" value={-10} region=\"left\" />\n <MediaGesture type=\"doubletap\" action=\"toggleFullscreen\" region=\"center\" />\n <MediaGesture type=\"doubletap\" action=\"seekStep\" value={10} region=\"right\" />\n </Container>\n );\n}\n"],"mappings":"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"}

package/dist/dev/ui/captions-button/captions-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"captions-button.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"mappings":";;;;;UAQiB,mBAAA,SACP,gBAAA,WAA2B,kBAAA,CAAmB,KAAA,GACpD,kBAAA,CAAmB,KAAA;;cAGV,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,~~kBAQV~~,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,kBAAA,CAAmB,KAAA;AAAA"}
1	+ {"version":3,"file":"captions-button.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"mappings":";;;;;UAQiB,mBAAA,SACP,gBAAA,WAA2B,kBAAA,CAAmB,KAAA,GACpD,kBAAA,CAAmB,KAAA;;cAGV,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,kBAAA,CAAmB,KAAA;AAAA"}

package/dist/dev/ui/captions-button/captions-button.js CHANGED Viewed

@@ -9,7 +9,8 @@ const CaptionsButton = createMediaButton({
 	core: CaptionsButtonCore,
 	stateAttrMap: CaptionsButtonDataAttrs,
 	selector: selectTextTrack,
-	action: (core, state) => core.toggle(state)
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "toggleSubtitles"
 });
 //#endregion
 export { CaptionsButton };

package/dist/dev/ui/captions-button/captions-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"sourcesContent":["'use client';\n\nimport { CaptionsButtonCore, CaptionsButtonDataAttrs } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface CaptionsButtonProps\n extends UIComponentProps<'button', CaptionsButtonCore.State>,\n CaptionsButtonCore.Props {}\n\n/** A button that toggles captions. */\nexport const CaptionsButton = createMediaButton<CaptionsButtonCore, CaptionsButtonProps>({\n displayName: 'CaptionsButton',\n core: CaptionsButtonCore,\n stateAttrMap: CaptionsButtonDataAttrs,\n selector: selectTextTrack,\n action: (core, state) => core.toggle(state),\n});\n\nexport namespace CaptionsButton {\n export type Props = CaptionsButtonProps;\n export type State = CaptionsButtonCore.State;\n}\n"],"mappings":";;;;;;AAaA,MAAa,iBAAiB,kBAA2D;CACvF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;~~CAC5C~~,CAAC"}
1	+ {"version":3,"file":"captions-button.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button.tsx"],"sourcesContent":["'use client';\n\nimport { CaptionsButtonCore, CaptionsButtonDataAttrs } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface CaptionsButtonProps\n extends UIComponentProps<'button', CaptionsButtonCore.State>,\n CaptionsButtonCore.Props {}\n\n/** A button that toggles captions. */\nexport const CaptionsButton = createMediaButton<CaptionsButtonCore, CaptionsButtonProps>({\n displayName: 'CaptionsButton',\n core: CaptionsButtonCore,\n stateAttrMap: CaptionsButtonDataAttrs,\n selector: selectTextTrack,\n action: (core, state) => core.toggle(state),\n hotkeyAction: 'toggleSubtitles',\n});\n\nexport namespace CaptionsButton {\n export type Props = CaptionsButtonProps;\n export type State = CaptionsButtonCore.State;\n}\n"],"mappings":";;;;;;AAaA,MAAa,iBAAiB,kBAA2D;CACvF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC3C,cAAc;CACf,CAAC"}

package/dist/dev/ui/create-media-button.js CHANGED Viewed

@@ -2,13 +2,14 @@
 import { usePlayer } from "../player/context.js";
 import { renderElement } from "../utils/use-render.js";
 import { useButton } from "./hooks/use-button.js";
+import { useAriaKeyShortcuts } from "./hotkey/use-aria-key-shortcuts.js";
 import { useOptionalTooltipContext } from "./tooltip/context.js";
 import { logMissingFeature } from "@videojs/core/dom";
 import { forwardRef, useLayoutEffect, useState } from "react";
 //#region src/ui/create-media-button.tsx
 /** Creates a media button React component from a core class and config. */
 function createMediaButton(config) {
-	const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;
+	const { displayName, core: CoreClass, stateAttrMap, selector, action, hotkeyAction } = config;
 	const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));
 	const Component = forwardRef(function MediaButton(componentProps, forwardedRef) {
 		const { render, className, style, ...rest } = componentProps;
@@ -18,6 +19,7 @@ function createMediaButton(config) {
 		else elementProps[key] = rest[key];
 		const tooltipCtx = useOptionalTooltipContext();
 		const feature = usePlayer(selector);
+		const shortcuts = useAriaKeyShortcuts(hotkeyAction);
 		const [core] = useState(() => new CoreClass());
 		core.setProps(coreProps);
 		const { getButtonProps, buttonRef } = useButton({
@@ -37,7 +39,10 @@ function createMediaButton(config) {
 			logMissingFeature(displayName, selector.displayName ?? displayName);
 			return null;
 		}
-		const attrs = core.getAttrs(state);
+		const attrs = {
+			...core.getAttrs(state),
+			"aria-keyshortcuts": shortcuts
+		};
 		return renderElement("button", {
 			render,
 			className,

package/dist/dev/ui/create-media-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["'use client';\n\nimport type { InferComponentState, InferMediaState, MediaButtonComponent, StateAttrMap } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport type { Selector } from '@videojs/store';\nimport type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useLayoutEffect, useState } from 'react';\n\nimport { usePlayer } from '../player/context';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\nimport { useButton } from './hooks/use-button';\nimport { useOptionalTooltipContext } from './tooltip/context';\n\ninterface MediaButtonConfig<Core extends Required<MediaButtonComponent>> {\n displayName: string;\n core: { new (): Core; defaultProps: Record<string, unknown> };\n stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n selector: Selector<object, InferMediaState<Core> \| undefined>;\n action: (core: Core, state: InferMediaState<Core>) => void;\n}\n\n/** Creates a media button React component from a core class and config. */\nexport function createMediaButton<Core extends Required<MediaButtonComponent>, Props extends object>(\n config: MediaButtonConfig<Core>\n): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {\n const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;\n\n // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.\n const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));\n\n const Component = forwardRef(function MediaButton(\n componentProps: Record<string, unknown>,\n forwardedRef: ForwardedRef<HTMLButtonElement>\n ) {\n const { render, className, style, ...rest } = componentProps;\n\n const coreProps: Record<string, unknown> = {};\n const elementProps: Record<string, unknown> = {};\n\n for (const key of Object.keys(rest)) {\n if (corePropKeys.has(key)) {\n coreProps[key] = rest[key];\n } else {\n elementProps[key] = rest[key];\n }\n }\n\n const tooltipCtx = useOptionalTooltipContext();\n const feature = usePlayer(selector);\n\n const [core] = useState(() => new CoreClass());\n core.setProps(coreProps);\n\n const { getButtonProps, buttonRef } = useButton({\n displayName,\n onActivate: () => action(core, feature!),\n isDisabled: () => !!coreProps.disabled \|\| !feature,\n });\n\n // Derive state and label before the hooks boundary so the\n // useLayoutEffect below (called unconditionally) can reference them.\n type State = InferComponentState<Core>;\n if (feature) core.setMedia(feature);\n const state = feature ? (core.getState() as State) : null;\n const label = state ? core.getLabel(state) : undefined;\n\n // Forward label to tooltip popup content when inside a Tooltip.Root.\n useLayoutEffect(() => {\n if (!tooltipCtx) return;\n tooltipCtx.setContent(label);\n return () => tooltipCtx.setContent(undefined);\n }, [tooltipCtx, label]);\n\n if (!feature \|\| !state) {\n if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);\n return null;\n }\n\n const attrs = core.getAttrs(state);\n\n return renderElement(\n 'button',\n { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,\n {\n state,\n stateAttrMap,\n ref: [forwardedRef, buttonRef],\n props: [attrs, elementProps, getButtonProps()],\n }\n );\n });\n\n Component.displayName = displayName;\n\n return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":"~~;;;;;;;;;AAuBA~~,SAAgB,kBACd,QACqE;CACrE,MAAM,EAAE,aAAa,MAAM,WAAW,cAAc,UAAU,~~WAAW~~;~~CAGzE~~,MAAM,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,aAAa,CAAC;CAEjE,MAAM,YAAY,WAAW,SAAS,YACpC,gBACA,cACA;EACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,SAAS;EAE9C,MAAM,YAAqC,EAAE;EAC7C,MAAM,eAAwC,EAAE;AAEhD,OAAK,MAAM,OAAO,OAAO,KAAK,KAAK,CACjC,KAAI,aAAa,IAAI,IAAI,CACvB,WAAU,OAAO,KAAK;MAEtB,cAAa,OAAO,KAAK;EAI7B,MAAM,aAAa,2BAA2B;EAC9C,MAAM,UAAU,UAAU,SAAS;~~EAEnC~~,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;AAC9C,OAAK,SAAS,UAAU;EAExB,MAAM,EAAE,gBAAgB,cAAc,UAAU;GAC9C;GACA,kBAAkB,OAAO,MAAM,QAAS;GACxC,kBAAkB,CAAC,CAAC,UAAU,YAAY,CAAC;GAC5C,CAAC;AAKF,MAAI,QAAS,MAAK,SAAS,QAAQ;EACnC,MAAM,QAAQ,UAAW,KAAK,UAAU,GAAa;EACrD,MAAM,QAAQ,QAAQ,KAAK,SAAS,MAAM,GAAG,KAAA;AAG7C,wBAAsB;AACpB,OAAI,CAAC,WAAY;AACjB,cAAW,WAAW,MAAM;AAC5B,gBAAa,WAAW,WAAW,KAAA,EAAU;KAC5C,CAAC,YAAY,MAAM,CAAC;AAEvB,MAAI,CAAC,WAAW,CAAC,OAAO;AACT,qBAAkB,aAAa,SAAS,eAAe,YAAY;AAChF,UAAO;;EAGT,MAAM,QAAQ,KAAK,SAAS,MAAM;~~AAElC~~,SAAO,cACL,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO;IAAC;IAAO;IAAc,gBAAgB;IAAC;GAC/C,CACF;GACD;AAEF,WAAU,cAAc;AAExB,QAAO"}
1	+ {"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["'use client';\n\nimport type { InferComponentState, InferMediaState, MediaButtonComponent, StateAttrMap } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport type { Selector } from '@videojs/store';\nimport type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useLayoutEffect, useState } from 'react';\n\nimport { usePlayer } from '../player/context';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\nimport { useButton } from './hooks/use-button';\nimport { useAriaKeyShortcuts } from './hotkey/use-aria-key-shortcuts';\nimport { useOptionalTooltipContext } from './tooltip/context';\n\ninterface MediaButtonConfig<Core extends Required<MediaButtonComponent>> {\n displayName: string;\n core: { new (): Core; defaultProps: Record<string, unknown> };\n stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n selector: Selector<object, InferMediaState<Core> \| undefined>;\n action: (core: Core, state: InferMediaState<Core>) => void;\n hotkeyAction?: string;\n}\n\n/** Creates a media button React component from a core class and config. */\nexport function createMediaButton<Core extends Required<MediaButtonComponent>, Props extends object>(\n config: MediaButtonConfig<Core>\n): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {\n const { displayName, core: CoreClass, stateAttrMap, selector, action, hotkeyAction } = config;\n\n // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.\n const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));\n\n const Component = forwardRef(function MediaButton(\n componentProps: Record<string, unknown>,\n forwardedRef: ForwardedRef<HTMLButtonElement>\n ) {\n const { render, className, style, ...rest } = componentProps;\n\n const coreProps: Record<string, unknown> = {};\n const elementProps: Record<string, unknown> = {};\n\n for (const key of Object.keys(rest)) {\n if (corePropKeys.has(key)) {\n coreProps[key] = rest[key];\n } else {\n elementProps[key] = rest[key];\n }\n }\n\n const tooltipCtx = useOptionalTooltipContext();\n const feature = usePlayer(selector);\n const shortcuts = useAriaKeyShortcuts(hotkeyAction);\n\n const [core] = useState(() => new CoreClass());\n core.setProps(coreProps);\n\n const { getButtonProps, buttonRef } = useButton({\n displayName,\n onActivate: () => action(core, feature!),\n isDisabled: () => !!coreProps.disabled \|\| !feature,\n });\n\n // Derive state and label before the hooks boundary so the\n // useLayoutEffect below (called unconditionally) can reference them.\n type State = InferComponentState<Core>;\n if (feature) core.setMedia(feature);\n const state = feature ? (core.getState() as State) : null;\n const label = state ? core.getLabel(state) : undefined;\n\n // Forward label to tooltip popup content when inside a Tooltip.Root.\n useLayoutEffect(() => {\n if (!tooltipCtx) return;\n tooltipCtx.setContent(label);\n return () => tooltipCtx.setContent(undefined);\n }, [tooltipCtx, label]);\n\n if (!feature \|\| !state) {\n if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);\n return null;\n }\n\n const attrs = { ...core.getAttrs(state), 'aria-keyshortcuts': shortcuts };\n\n return renderElement(\n 'button',\n { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,\n {\n state,\n stateAttrMap,\n ref: [forwardedRef, buttonRef],\n props: [attrs, elementProps, getButtonProps()],\n }\n );\n });\n\n Component.displayName = displayName;\n\n return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":";;;;;;;;;;AAyBA,SAAgB,kBACd,QACqE;CACrE,MAAM,EAAE,aAAa,MAAM,WAAW,cAAc,UAAU,QAAQ,iBAAiB;CAGvF,MAAM,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,aAAa,CAAC;CAEjE,MAAM,YAAY,WAAW,SAAS,YACpC,gBACA,cACA;EACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,SAAS;EAE9C,MAAM,YAAqC,EAAE;EAC7C,MAAM,eAAwC,EAAE;AAEhD,OAAK,MAAM,OAAO,OAAO,KAAK,KAAK,CACjC,KAAI,aAAa,IAAI,IAAI,CACvB,WAAU,OAAO,KAAK;MAEtB,cAAa,OAAO,KAAK;EAI7B,MAAM,aAAa,2BAA2B;EAC9C,MAAM,UAAU,UAAU,SAAS;EACnC,MAAM,YAAY,oBAAoB,aAAa;EAEnD,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;AAC9C,OAAK,SAAS,UAAU;EAExB,MAAM,EAAE,gBAAgB,cAAc,UAAU;GAC9C;GACA,kBAAkB,OAAO,MAAM,QAAS;GACxC,kBAAkB,CAAC,CAAC,UAAU,YAAY,CAAC;GAC5C,CAAC;AAKF,MAAI,QAAS,MAAK,SAAS,QAAQ;EACnC,MAAM,QAAQ,UAAW,KAAK,UAAU,GAAa;EACrD,MAAM,QAAQ,QAAQ,KAAK,SAAS,MAAM,GAAG,KAAA;AAG7C,wBAAsB;AACpB,OAAI,CAAC,WAAY;AACjB,cAAW,WAAW,MAAM;AAC5B,gBAAa,WAAW,WAAW,KAAA,EAAU;KAC5C,CAAC,YAAY,MAAM,CAAC;AAEvB,MAAI,CAAC,WAAW,CAAC,OAAO;AACT,qBAAkB,aAAa,SAAS,eAAe,YAAY;AAChF,UAAO;;EAGT,MAAM,QAAQ;GAAE,GAAG,KAAK,SAAS,MAAM;GAAE,qBAAqB;GAAW;AAEzE,SAAO,cACL,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO;IAAC;IAAO;IAAc,gBAAgB;IAAC;GAC/C,CACF;GACD;AAEF,WAAU,cAAc;AAExB,QAAO"}

package/dist/dev/ui/fullscreen-button/fullscreen-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fullscreen-button.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"mappings":";;;;;UAQiB,qBAAA,SACP,gBAAA,WAA2B,oBAAA,CAAqB,KAAA,GACtD,oBAAA,CAAqB,KAAA;;cAGZ,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,~~kBAQZ~~,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,oBAAA,CAAqB,KAAA;AAAA"}
1	+ {"version":3,"file":"fullscreen-button.d.ts","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"mappings":";;;;;UAQiB,qBAAA,SACP,gBAAA,WAA2B,oBAAA,CAAqB,KAAA,GACtD,oBAAA,CAAqB,KAAA;;cAGZ,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,oBAAA,CAAqB,KAAA;AAAA"}

package/dist/dev/ui/fullscreen-button/fullscreen-button.js CHANGED Viewed

@@ -9,7 +9,8 @@ const FullscreenButton = createMediaButton({
 	core: FullscreenButtonCore,
 	stateAttrMap: FullscreenButtonDataAttrs,
 	selector: selectFullscreen,
-	action: (core, state) => core.toggle(state)
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "toggleFullscreen"
 });
 //#endregion
 export { FullscreenButton };

package/dist/dev/ui/fullscreen-button/fullscreen-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["'use client';\n\nimport { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface FullscreenButtonProps\n extends UIComponentProps<'button', FullscreenButtonCore.State>,\n FullscreenButtonCore.Props {}\n\n/** A button that toggles fullscreen. */\nexport const FullscreenButton = createMediaButton<FullscreenButtonCore, FullscreenButtonProps>({\n displayName: 'FullscreenButton',\n core: FullscreenButtonCore,\n stateAttrMap: FullscreenButtonDataAttrs,\n selector: selectFullscreen,\n action: (core, state) => core.toggle(state),\n});\n\nexport namespace FullscreenButton {\n export type Props = FullscreenButtonProps;\n export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;;AAaA,MAAa,mBAAmB,kBAA+D;CAC7F,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;~~CAC5C~~,CAAC"}
1	+ {"version":3,"file":"fullscreen-button.js","names":[],"sources":["../../../../src/ui/fullscreen-button/fullscreen-button.tsx"],"sourcesContent":["'use client';\n\nimport { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';\nimport { selectFullscreen } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface FullscreenButtonProps\n extends UIComponentProps<'button', FullscreenButtonCore.State>,\n FullscreenButtonCore.Props {}\n\n/** A button that toggles fullscreen. */\nexport const FullscreenButton = createMediaButton<FullscreenButtonCore, FullscreenButtonProps>({\n displayName: 'FullscreenButton',\n core: FullscreenButtonCore,\n stateAttrMap: FullscreenButtonDataAttrs,\n selector: selectFullscreen,\n action: (core, state) => core.toggle(state),\n hotkeyAction: 'toggleFullscreen',\n});\n\nexport namespace FullscreenButton {\n export type Props = FullscreenButtonProps;\n export type State = FullscreenButtonCore.State;\n}\n"],"mappings":";;;;;;AAaA,MAAa,mBAAmB,kBAA+D;CAC7F,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC3C,cAAc;CACf,CAAC"}

package/dist/dev/ui/gesture/media-gesture.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { GestureActionName, GesturePointerType, GestureRegion } from "@videojs/core/dom";
+import { ReactNode } from "react";
+//#region src/ui/gesture/media-gesture.d.ts
+interface MediaGestureProps {
+  type: 'tap' | 'doubletap' | (string & {});
+  action: GestureActionName | (string & {});
+  value?: number;
+  pointer?: GesturePointerType;
+  region?: GestureRegion;
+  disabled?: boolean;
+}
+declare function MediaGesture({
+  type,
+  action,
+  value,
+  pointer,
+  region,
+  disabled
+}: MediaGestureProps): ReactNode;
+//#endregion
+export { MediaGesture, MediaGestureProps };
+//# sourceMappingURL=media-gesture.d.ts.map

package/dist/dev/ui/gesture/media-gesture.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"media-gesture.d.ts","names":[],"sources":["../../../../src/ui/gesture/media-gesture.tsx"],"mappings":";;;;UAgBiB,iBAAA;EACf,IAAA;EACA,MAAA,EAAQ,iBAAA;EACR,KAAA;EACA,OAAA,GAAU,kBAAA;EACV,MAAA,GAAS,aAAA;EACT,QAAA;AAAA;AAAA,iBAGc,YAAA,CAAA;EAAe,IAAA;EAAM,MAAA;EAAQ,KAAA;EAAO,OAAA;EAAS,MAAA;EAAQ;AAAA,GAAY,iBAAA,GAAoB,SAAA"}

package/dist/dev/ui/gesture/media-gesture.js ADDED Viewed

@@ -0,0 +1,42 @@
+"use client";
+import { useContainer, usePlayer } from "../../player/context.js";
+import { createDoubleTapGesture, createTapGesture, resolveGestureAction } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/gesture/media-gesture.tsx
+function MediaGesture({ type, action, value, pointer, region, disabled }) {
+	const store = usePlayer();
+	const container = useContainer();
+	useEffect(() => {
+		if (!container || !type || !action || disabled) return;
+		const resolver = resolveGestureAction(action);
+		if (!resolver) return;
+		const onActivate = (event) => {
+			resolver({
+				store,
+				value,
+				event
+			});
+		};
+		const options = {
+			pointer,
+			region,
+			action
+		};
+		if (type === "doubletap") return createDoubleTapGesture(container, onActivate, options);
+		return createTapGesture(container, onActivate, options);
+	}, [
+		container,
+		store,
+		type,
+		action,
+		value,
+		pointer,
+		region,
+		disabled
+	]);
+	return null;
+}
+//#endregion
+export { MediaGesture };
+//# sourceMappingURL=media-gesture.js.map

package/dist/dev/ui/gesture/media-gesture.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"media-gesture.js","names":[],"sources":["../../../../src/ui/gesture/media-gesture.tsx"],"sourcesContent":["'use client';\n\nimport {\n type AnyPlayerStore,\n createDoubleTapGesture,\n createTapGesture,\n type GestureActionName,\n type GesturePointerType,\n type GestureRegion,\n resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\n\nexport interface MediaGestureProps {\n type: 'tap' | 'doubletap' | (string & {});\n action: GestureActionName | (string & {});\n value?: number;\n pointer?: GesturePointerType;\n region?: GestureRegion;\n disabled?: boolean;\n}\n\nexport function MediaGesture({ type, action, value, pointer, region, disabled }: MediaGestureProps): ReactNode {\n const store = usePlayer() as AnyPlayerStore;\n const container = useContainer();\n\n useEffect(() => {\n if (!container || !type || !action || disabled) return;\n\n const resolver = resolveGestureAction(action);\n if (!resolver) return;\n\n const onActivate = (event: PointerEvent) => {\n resolver({ store, value, event });\n };\n\n const options = { pointer, region, action };\n\n if (type === 'doubletap') {\n return createDoubleTapGesture(container, onActivate, options);\n }\n\n return createTapGesture(container, onActivate, options);\n }, [container, store, type, action, value, pointer, region, disabled]);\n\n return null;\n}\n"],"mappings":";;;;;AAyBA,SAAgB,aAAa,EAAE,MAAM,QAAQ,OAAO,SAAS,QAAQ,YAA0C;CAC7G,MAAM,QAAQ,WAAW;CACzB,MAAM,YAAY,cAAc;AAEhC,iBAAgB;AACd,MAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,SAAU;EAEhD,MAAM,WAAW,qBAAqB,OAAO;AAC7C,MAAI,CAAC,SAAU;EAEf,MAAM,cAAc,UAAwB;AAC1C,YAAS;IAAE;IAAO;IAAO;IAAO,CAAC;;EAGnC,MAAM,UAAU;GAAE;GAAS;GAAQ;GAAQ;AAE3C,MAAI,SAAS,YACX,QAAO,uBAAuB,WAAW,YAAY,QAAQ;AAG/D,SAAO,iBAAiB,WAAW,YAAY,QAAQ;IACtD;EAAC;EAAW;EAAO;EAAM;EAAQ;EAAO;EAAS;EAAQ;EAAS,CAAC;AAEtE,QAAO"}