feat(player): new seekStep default layout prop

vidstack · Jan 25, 2024 · 1d32867 · 1d32867
1 parent 4cf4457
commit 1d32867
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 36 deletions.
diff --git a/packages/react/src/components/layouts/default/audio-layout.tsx b/packages/react/src/components/layouts/default/audio-layout.tsx
@@ -114,17 +114,9 @@ function AudioLayout() {
       <Captions className="vds-captions" />
       <Controls.Root className="vds-controls">
         <Controls.Group className="vds-controls-group">
-          {slot(
-            slots,
-            'seekBackwardButton',
-            <DefaultSeekButton seconds={-10} tooltip="top start" />,
-          )}
+          {slot(slots, 'seekBackwardButton', <DefaultSeekButton backward tooltip="top start" />)}
           {slot(slots, 'playButton', <DefaultPlayButton tooltip="top center" />)}
-          {slot(
-            slots,
-            'seekForwardButton',
-            <DefaultSeekButton seconds={10} tooltip="top center" />,
-          )}
+          {slot(slots, 'seekForwardButton', <DefaultSeekButton tooltip="top center" />)}
           <DefaultAudioTitle />
           {slot(slots, 'timeSlider', <DefaultTimeSlider />)}
           <DefaultTimeInvert />

diff --git a/packages/react/src/components/layouts/default/media-layout.tsx b/packages/react/src/components/layouts/default/media-layout.tsx
@@ -76,22 +76,23 @@ export function createDefaultMediaLayout({
   const Layout = React.forwardRef<HTMLDivElement, DefaultLayoutProps>(
     (
       {
+        children,
         className,
+        disableTimeSlider = false,
+        hideQualityBitrate = false,
         icons,
-        thumbnails = null,
-        translations,
-        showMenuDelay,
-        showTooltipDelay = 700,
-        smallLayoutWhen = smLayoutWhen,
-        noModal = false,
         menuGroup = 'bottom',
-        hideQualityBitrate = false,
-        sliderChaptersMinWidth = 325,
-        disableTimeSlider = false,
         noGestures = false,
         noKeyboardActionDisplay = false,
+        noModal = false,
+        seekStep = 10,
+        showMenuDelay,
+        showTooltipDelay = 700,
+        sliderChaptersMinWidth = 325,
         slots,
-        children,
+        smallLayoutWhen = smLayoutWhen,
+        thumbnails = null,
+        translations,
         ...props
       },
       forwardRef,
@@ -135,6 +136,7 @@ export function createDefaultMediaLayout({
                 showTooltipDelay,
                 sliderChaptersMinWidth,
                 slots,
+                seekStep,
                 thumbnails,
                 translations,
               }}

diff --git a/packages/react/src/components/layouts/default/shared-layout.tsx b/packages/react/src/components/layouts/default/shared-layout.tsx
@@ -277,10 +277,14 @@ export { DefaultFullscreenButton };
  * DefaultSeekButton
  * -----------------------------------------------------------------------------------------------*/
 
-function DefaultSeekButton({ seconds, tooltip }: DefaultMediaButtonProps & { seconds: number }) {
-  const { icons: Icons } = useDefaultLayoutContext(),
+function DefaultSeekButton({
+  backward,
+  tooltip,
+}: DefaultMediaButtonProps & { backward?: boolean }) {
+  const { icons: Icons, seekStep } = useDefaultLayoutContext(),
     seekForwardText = useDefaultLayoutWord('Seek Forward'),
     seekBackwardText = useDefaultLayoutWord('Seek Backward'),
+    seconds = (backward ? -1 : 1) * seekStep!,
     label = seconds >= 0 ? seekForwardText : seekBackwardText;
   return (
     <DefaultTooltip content={label} placement={tooltip}>
@@ -327,7 +331,7 @@ function DefaultTimeSlider() {
   const [instance, setInstance] = React.useState<TimeSliderInstance | null>(null),
     [width, setWidth] = React.useState(0),
     $src = useMediaState('currentSrc'),
-    { thumbnails, sliderChaptersMinWidth, disableTimeSlider } = useDefaultLayoutContext(),
+    { thumbnails, sliderChaptersMinWidth, disableTimeSlider, seekStep } = useDefaultLayoutContext(),
     label = useDefaultLayoutWord('Seek'),
     $RemotionSliderThumbnail = useSignal(RemotionSliderThumbnail);
 
@@ -343,6 +347,7 @@ function DefaultTimeSlider() {
       className="vds-time-slider vds-slider"
       aria-label={label}
       disabled={disableTimeSlider}
+      keyStep={seekStep}
       ref={setInstance}
     >
       <TimeSlider.Chapters

diff --git a/packages/vidstack/mangle.json b/packages/vidstack/mangle.json
@@ -766,5 +766,6 @@
   "_scrubbing": "jn",
   "_setValue": "hl",
   "_watchScrubbing": "kn",
-  "_cancelShowing": "nn"
+  "_cancelShowing": "nn",
+  "_watchDuration": "pn"
 }
diff --git a/packages/vidstack/player/styles/default/layouts/audio.css b/packages/vidstack/player/styles/default/layouts/audio.css
@@ -25,7 +25,7 @@
   box-sizing: border-box;
 }
 
-:where([data-media-player][data-focus]:not([data-playing]) .vds-audio-layout .vds-controls) {
+:where([data-media-player][data-focus]:not([data-playing]) .vds-audio-layout) {
   box-shadow: var(--media-focus-ring);
 }
 

diff --git a/packages/vidstack/src/components/layouts/default/props.ts b/packages/vidstack/src/components/layouts/default/props.ts
@@ -14,6 +14,7 @@ export const defaultLayoutProps: DefaultLayoutProps = {
   disableTimeSlider: false,
   noGestures: false,
   noKeyboardActionDisplay: false,
+  seekStep: 10,
 };
 
 export interface DefaultLayoutProps {
@@ -67,4 +68,9 @@ export interface DefaultLayoutProps {
    * Whether keyboard actions should not be displayed.
    */
   noKeyboardActionDisplay: boolean;
+  /**
+   * The number of seconds to seek forward or backward when pressing the seek button or using
+   * keyboard shortcuts.
+   */
+  seekStep: number;
 }
diff --git a/packages/vidstack/src/components/ui/time.ts b/packages/vidstack/src/components/ui/time.ts
@@ -97,7 +97,9 @@ export class Time extends Component<TimeProps, TimeState> {
     return this.$props.remainder() && this._invert() !== false;
   }
 
-  private _onToggle() {
+  private _onToggle(event: Event) {
+    event.preventDefault();
+
     if (this._invert() === null) {
       this._invert.set(!this.$props.remainder());
       return;

diff --git a/packages/vidstack/src/elements/define/layouts/default/audio-layout.ts b/packages/vidstack/src/elements/define/layouts/default/audio-layout.ts
@@ -36,9 +36,9 @@ export function DefaultAudioLayout() {
       <media-controls class="vds-controls">
         <media-controls-group class="vds-controls-group">
           ${[
-            DefaultSeekButton({ seconds: -10, tooltip: 'top start' }),
+            DefaultSeekButton({ backward: true, tooltip: 'top start' }),
             DefaultPlayButton({ tooltip: 'top' }),
-            DefaultSeekButton({ seconds: 10, tooltip: 'top' }),
+            DefaultSeekButton({ tooltip: 'top' }),
             DefaultAudioTitle(),
             DefaultTimeSlider(),
             DefaultTimeInvert(),

diff --git a/packages/vidstack/src/elements/define/layouts/default/shared-layout.ts b/packages/vidstack/src/elements/define/layouts/default/shared-layout.ts
@@ -190,24 +190,25 @@ export function DefaultFullscreenButton({ tooltip }: { tooltip: TooltipPlacement
 }
 
 export function DefaultSeekButton({
-  seconds,
+  backward,
   tooltip,
 }: {
-  seconds: number;
+  backward?: boolean;
   tooltip: TooltipPlacement;
 }) {
-  const { translations } = useDefaultLayoutContext(),
-    seekText = seconds >= 0 ? 'Seek Forward' : 'Seek Backward',
-    $label = $i18n(translations, seekText);
+  const { translations, seekStep } = useDefaultLayoutContext(),
+    seekText = !backward ? 'Seek Forward' : 'Seek Backward',
+    $label = $i18n(translations, seekText),
+    $seconds = () => (backward ? -1 : 1) * seekStep();
   return html`
     <media-tooltip class="vds-seek-tooltip vds-tooltip">
       <media-tooltip-trigger>
         <media-seek-button
           class="vds-seek-button vds-button"
-          seconds=${seconds}
+          seconds=${$signal($seconds)}
           aria-label=${$label}
         >
-          ${seconds >= 0
+          ${!backward
             ? html`<slot name="seek-forward-icon"></slot>`
             : html`<slot name="seek-backward-icon"></slot>`}
         </media-seek-button>
@@ -241,7 +242,7 @@ export function DefaultVolumeSlider({ orientation }: { orientation?: SliderOrien
 export function DefaultTimeSlider() {
   const $ref = signal<Element | undefined>(undefined),
     $width = signal(0),
-    { thumbnails, translations, sliderChaptersMinWidth, disableTimeSlider } =
+    { thumbnails, translations, sliderChaptersMinWidth, disableTimeSlider, seekStep } =
       useDefaultLayoutContext(),
     $label = $i18n(translations, 'Seek'),
     $isDisabled = $signal(disableTimeSlider),
@@ -257,6 +258,7 @@ export function DefaultTimeSlider() {
     <media-time-slider
       class="vds-time-slider vds-slider"
       aria-label=${$label}
+      key-step=${$signal(seekStep)}
       ?disabled=${$isDisabled}
       ${ref($ref.set)}
     >