feat(player): new changeDuration on remote control

ref #1330
vidstack · Jul 9, 2024 · 71d4594 · 71d4594
1 parent 6b3457d
commit 71d4594
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 3 deletions.
diff --git a/packages/vidstack/src/core/api/media-request-events.ts b/packages/vidstack/src/core/api/media-request-events.ts
@@ -5,6 +5,7 @@ import type { ScreenOrientationLockType } from '../../foundation/orientation/typ
 export interface MediaRequestEvents {
   'media-airplay-request': MediaAirPlayRequestEvent;
   'media-audio-track-change-request': MediaAudioTrackChangeRequestEvent;
+  'media-duration-change-request': MediaDurationChangeRequestEvent;
   'media-enter-fullscreen-request': MediaEnterFullscreenRequestEvent;
   'media-exit-fullscreen-request': MediaExitFullscreenRequestEvent;
   'media-enter-pip-request': MediaEnterPIPRequestEvent;
@@ -93,6 +94,15 @@ export type MediaFullscreenRequestTarget = 'prefer-media' | 'media' | 'provider'
  */
 export interface MediaAudioTrackChangeRequestEvent extends DOMEvent<number> {}
 
+/**
+ * Fired when requesting to change the length of the media. The event `detail` specifies the
+ * new length in seconds.
+ *
+ * @bubbles
+ * @composed
+ */
+export interface MediaDurationChangeRequestEvent extends DOMEvent<number> {}
+
 /**
  * Fired when requesting media to enter fullscreen. The event `detail` can specify the
  * fullscreen target, which can be the media or provider (defaults to `prefer-media`).

diff --git a/packages/vidstack/src/core/state/media-request-manager.ts b/packages/vidstack/src/core/state/media-request-manager.ts
@@ -469,6 +469,15 @@ export class MediaRequestManager extends MediaPlayerController implements MediaR
     }
   }
 
+  ['media-duration-change-request'](event: RE.MediaDurationChangeRequestEvent) {
+    const { providedDuration } = this.$state;
+    providedDuration.set(event.detail);
+    this.dispatch('duration-change', {
+      detail: event.detail,
+      trigger: event,
+    });
+  }
+
   ['media-audio-track-change-request'](event: RE.MediaAudioTrackChangeRequestEvent) {
     const { logger, audioTracks } = this._media;
 

diff --git a/packages/vidstack/src/core/state/media-state-manager.ts b/packages/vidstack/src/core/state/media-state-manager.ts
@@ -554,13 +554,18 @@ export class MediaStateManager extends MediaPlayerController {
   }
 
   ['duration-change'](event: ME.MediaDurationChangeEvent) {
-    const { live, intrinsicDuration, ended } = this.$state,
+    const { live, intrinsicDuration, providedDuration, ended } = this.$state,
       time = event.detail;
+
     if (!live()) {
       const duration = !Number.isNaN(time) ? time : 0;
       intrinsicDuration.set(duration);
       if (ended()) this._onEndPrecisionChange(event);
     }
+
+    if (providedDuration()) {
+      event.stopImmediatePropagation();
+    }
   }
 
   ['progress'](event: ME.MediaProgressEvent) {

diff --git a/packages/vidstack/src/core/state/media-state-sync.ts b/packages/vidstack/src/core/state/media-state-sync.ts
@@ -112,8 +112,10 @@ export class MediaStateSync extends MediaPlayerController {
   }
 
   private _watchDuration() {
-    const { providedDuration } = this.$state;
-    providedDuration.set(this.$props.duration());
+    const { duration } = this.$props;
+    this.dispatch('media-duration-change-request', {
+      detail: duration(),
+    });
   }
 
   private _watchPlaysInline() {

diff --git a/packages/vidstack/src/core/state/remote-control.ts b/packages/vidstack/src/core/state/remote-control.ts
@@ -205,6 +205,18 @@ export class MediaRemoteControl {
     this._dispatchRequest('media-live-edge-request', trigger);
   }
 
+  /**
+   * Dispatch a request to update the length of the media in seconds.
+   *
+   * @example
+   * ```ts
+   * remote.changeDuration(100); // 100 seconds
+   * ```
+   */
+  changeDuration(duration: number, trigger?: Event) {
+    this._dispatchRequest('media-duration-change-request', trigger, duration);
+  }
+
   /**
    * Dispatch a request to update the media volume to the given `volume` level which is a value
    * between 0 and 1.