feat(player): new changeClipStart and changeClipEnd on remote con…

…trol ref #1330
vidstack · Jul 9, 2024 · 52ae3db · 52ae3db
1 parent 71d4594
commit 52ae3db
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 23 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,8 @@ import type { ScreenOrientationLockType } from '../../foundation/orientation/typ
 export interface MediaRequestEvents {
   'media-airplay-request': MediaAirPlayRequestEvent;
   'media-audio-track-change-request': MediaAudioTrackChangeRequestEvent;
+  'media-clip-start-change-request': MediaClipStartChangeRequestEvent;
+  'media-clip-end-change-request': MediaClipEndChangeRequestEvent;
   'media-duration-change-request': MediaDurationChangeRequestEvent;
   'media-enter-fullscreen-request': MediaEnterFullscreenRequestEvent;
   'media-exit-fullscreen-request': MediaExitFullscreenRequestEvent;
@@ -94,6 +96,24 @@ export type MediaFullscreenRequestTarget = 'prefer-media' | 'media' | 'provider'
  */
 export interface MediaAudioTrackChangeRequestEvent extends DOMEvent<number> {}
 
+/**
+ * Fired when requesting to change the clip start time. The event `detail` specifies the new start
+ * time in seconds.
+ *
+ * @bubbles
+ * @composed
+ */
+export interface MediaClipStartChangeRequestEvent extends DOMEvent<number> {}
+
+/**
+ * Fired when requesting to change the clip end time. The event `detail` specifies the new end
+ * time in seconds.
+ *
+ * @bubbles
+ * @composed
+ */
+export interface MediaClipEndChangeRequestEvent extends DOMEvent<number> {}
+
 /**
  * Fired when requesting to change the length of the media. The event `detail` specifies the
  * new length in seconds.

diff --git a/packages/vidstack/src/core/state/media-request-manager.ts b/packages/vidstack/src/core/state/media-request-manager.ts
@@ -469,15 +469,31 @@ export class MediaRequestManager extends MediaPlayerController implements MediaR
     }
   }
 
-  ['media-duration-change-request'](event: RE.MediaDurationChangeRequestEvent) {
-    const { providedDuration } = this.$state;
-    providedDuration.set(event.detail);
+  ['media-clip-start-change-request'](event: RE.MediaClipStartChangeRequestEvent) {
+    const { clipStartTime } = this.$state;
+    clipStartTime.set(event.detail);
+  }
+
+  ['media-clip-end-change-request'](event: RE.MediaClipEndChangeRequestEvent) {
+    const { clipEndTime } = this.$state;
+    clipEndTime.set(event.detail);
     this.dispatch('duration-change', {
       detail: event.detail,
       trigger: event,
     });
   }
 
+  ['media-duration-change-request'](event: RE.MediaDurationChangeRequestEvent) {
+    const { providedDuration, clipEndTime } = this.$state;
+    providedDuration.set(event.detail);
+    if (clipEndTime() <= 0) {
+      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,7 +554,7 @@ export class MediaStateManager extends MediaPlayerController {
   }
 
   ['duration-change'](event: ME.MediaDurationChangeEvent) {
-    const { live, intrinsicDuration, providedDuration, ended } = this.$state,
+    const { live, intrinsicDuration, providedDuration, clipEndTime, ended } = this.$state,
       time = event.detail;
 
     if (!live()) {
@@ -563,7 +563,7 @@ export class MediaStateManager extends MediaPlayerController {
       if (ended()) this._onEndPrecisionChange(event);
     }
 
-    if (providedDuration()) {
+    if (providedDuration() > 0 || clipEndTime() > 0) {
       event.stopImmediatePropagation();
     }
   }

diff --git a/packages/vidstack/src/core/state/media-state-sync.ts b/packages/vidstack/src/core/state/media-state-sync.ts
@@ -13,20 +13,28 @@ export class MediaStateSync extends MediaPlayerController {
     if (__SERVER__) return;
 
     if (__DEV__) effect(this._watchLogLevel.bind(this));
-    effect(this._watchMetadata.bind(this));
-    effect(this._watchAutoplay.bind(this));
-    effect(this._watchClipTimes.bind(this));
-    effect(this._watchControls.bind(this));
-    effect(this._watchCrossOrigin.bind(this));
-    effect(this._watchDuration.bind(this));
-    effect(this._watchLive.bind(this));
-    effect(this._watchLiveEdge.bind(this));
-    effect(this._watchLiveTolerance.bind(this));
-    effect(this._watchLoop.bind(this));
-    effect(this._watchPlaysInline.bind(this));
-    effect(this._watchPoster.bind(this));
-    effect(this._watchProvidedTypes.bind(this));
-    effect(this._watchTitle.bind(this));
+
+    const effects = [
+      this._watchMetadata,
+      this._watchAutoplay,
+      this._watchClipStartTime,
+      this._watchClipEndTime,
+      this._watchControls,
+      this._watchCrossOrigin,
+      this._watchDuration,
+      this._watchLive,
+      this._watchLiveEdge,
+      this._watchLiveTolerance,
+      this._watchLoop,
+      this._watchPlaysInline,
+      this._watchPoster,
+      this._watchProvidedTypes,
+      this._watchTitle,
+    ];
+
+    for (const callback of effects) {
+      effect(callback.bind(this));
+    }
   }
 
   private _init() {
@@ -125,10 +133,18 @@ export class MediaStateSync extends MediaPlayerController {
     this.dispatch('plays-inline-change', { detail: inline });
   }
 
-  private _watchClipTimes() {
-    const { clipStartTime, clipEndTime } = this.$props;
-    this.$state.clipStartTime.set(clipStartTime());
-    this.$state.clipEndTime.set(clipEndTime());
+  private _watchClipStartTime() {
+    const { clipStartTime } = this.$props;
+    this.dispatch('media-clip-start-change-request', {
+      detail: clipStartTime(),
+    });
+  }
+
+  private _watchClipEndTime() {
+    const { clipEndTime } = this.$props;
+    this.dispatch('media-clip-end-change-request', {
+      detail: clipEndTime(),
+    });
   }
 
   private _watchLive() {

diff --git a/packages/vidstack/src/core/state/remote-control.ts b/packages/vidstack/src/core/state/remote-control.ts
@@ -217,6 +217,32 @@ export class MediaRemoteControl {
     this._dispatchRequest('media-duration-change-request', trigger, duration);
   }
 
+  /**
+   * Dispatch a request to update the clip start time. This is the time at which media playback
+   * should start at.
+   *
+   * @example
+   * ```ts
+   * remote.changeClipStart(100); // start at 100 seconds
+   * ```
+   */
+  changeClipStart(startTime: number, trigger?: Event) {
+    this._dispatchRequest('media-clip-start-change-request', trigger, startTime);
+  }
+
+  /**
+   * Dispatch a request to update the clip end time. This is the time at which media playback
+   * should end at.
+   *
+   * @example
+   * ```ts
+   * remote.changeClipEnd(100); // end at 100 seconds
+   * ```
+   */
+  changeClipEnd(endTime: number, trigger?: Event) {
+    this._dispatchRequest('media-clip-end-change-request', trigger, endTime);
+  }
+
   /**
    * Dispatch a request to update the media volume to the given `volume` level which is a value
    * between 0 and 1.