diff --git a/src/code/media/YoutubeMediaHandler.ts b/src/code/media/YoutubeMediaHandler.ts index 41684d33..12d98d83 100644 --- a/src/code/media/YoutubeMediaHandler.ts +++ b/src/code/media/YoutubeMediaHandler.ts @@ -85,6 +85,7 @@ export default class YouTubeMediaHandler implements IMediaHandler { updateCurrentTime(): void { const currentTime = this.currentTime; + this.debugLog(`updateCurrentTime:${currentTime}`); this.onCurrentTimeChanged.emit(currentTime); if (this._player.getPlayerState() == PlayerState.PLAYING) { window.requestAnimationFrame(() => this.updateCurrentTime()); @@ -198,13 +199,13 @@ export default class YouTubeMediaHandler implements IMediaHandler { /** Flag, whether the player is currently playing * @remarks When the player was playing, any buffering event still is - * considered as playing + * considered as playing. + * @devdoc The current time is only updated, when a meaningful position + * is available. */ private _isPlaying = false; handleStateChange(state: PlayerState): void { - this.updateCurrentTime(); - console.debug( `YouTubeMediaHandler::onStateChange:${PlayerState[state]}`, ); @@ -216,10 +217,12 @@ export default class YouTubeMediaHandler implements IMediaHandler { break; case PlayerState.ENDED: /* occurs when the video has ended */ + this.updateCurrentTime(); this._isPlaying = false; this.onEnded.emit(); break; case PlayerState.PLAYING: + this.updateCurrentTime(); if (!this._isPlaying) { this._isPlaying = true; //Upon reception of this event, playback has already started. Fade-in is required if not yet ongoing. @@ -232,6 +235,7 @@ export default class YouTubeMediaHandler implements IMediaHandler { } break; case PlayerState.PAUSED: + this.updateCurrentTime(); this._isPlaying = false; this.onPausedChanged.emit(true); //Upon reception of this event, playback has already paused. @@ -242,6 +246,7 @@ export default class YouTubeMediaHandler implements IMediaHandler { // NOTE: Buffering does not affect the reported playback state break; case PlayerState.VIDEO_CUED: + this.updateCurrentTime(); this._isPlaying = false; this.onPausedChanged.emit(true); this.onCanPlay.emit(); diff --git a/src/components/track/MediaTrack.vue b/src/components/track/MediaTrack.vue index 93d481d0..c8c8b623 100644 --- a/src/components/track/MediaTrack.vue +++ b/src/components/track/MediaTrack.vue @@ -396,6 +396,7 @@ :key="track.Id" :title="track.Name" :mediaUrl="mediaUrl" + :start="track.PlayheadPosition" :trackId="track.Id" :cues="track.Cues" :trackPreRoll="track.PreRoll" @@ -412,6 +413,7 @@ :key="track.Id" :title="track.Name" :url="mediaUrl" + :start="track.PlayheadPosition" :trackId="track.Id" :cues="track.Cues" :trackPreRoll="track.PreRoll" @@ -999,25 +1001,13 @@ onUnmounted(() => { isMounted.value = false; }); -/** The initial playback position, to be applied once after the media is playable - * @remarks The value is retrieved once per component lifetime from - * the persistent storage - */ -let initialPlayheadPosition: number | null = null; - -onBeforeMount(() => { - // provide the initial position once - if (props.track?.PlayheadPosition) { - initialPlayheadPosition = props.track.PlayheadPosition; - } -}); - // --- Transport --- /** The playback progress in the current track, in [seconds] * @remarks This is used for cue event handling within the set of cues, like creating a new cue at the current position + * @devdoc Start with the initial playhead position, which might be non-zero already */ -const currentPosition = ref(0); +const currentPosition = ref(props.track.PlayheadPosition ?? 0); provide(currentPositionInjectionKey, readonly(currentPosition)); /** The playback progress in the current track, as a readonly, formatted, displayable text diff --git a/src/components/track/TrackMediaElement.vue b/src/components/track/TrackMediaElement.vue index c36e49a5..f9191b3e 100644 --- a/src/components/track/TrackMediaElement.vue +++ b/src/components/track/TrackMediaElement.vue @@ -45,7 +45,7 @@