improved media player, silky smooth switcherbars

fixes rio-labs#116
naveed1232 · Jul 30, 2024 · 0240004 · 0240004
1 parent aa9e158
commit 0240004
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 14 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,6 +1,8 @@
 # Changelog
 
 - `rio.Dropdown` will now open a fullscreen popup on mobile devices
+- `riol.MediaPlayer` now also triggers the `on_playback_end` event when the
+    video loops
 
 ## 0.9.2
 

diff --git a/frontend/code/components/mediaPlayer.ts b/frontend/code/components/mediaPlayer.ts
@@ -86,6 +86,11 @@ export class MediaPlayerComponent extends ComponentBase {
     private _hasAudio: boolean = true;
     private _notifyBackend: boolean = true;
 
+    // This is used to detect when the video loops. If this is true, and the
+    // video timestamp decreases, it will be reported to the backend
+    private _reportTimeDecrease: boolean = false;
+    private _lastPlaybackTime: number = 0;
+
     /// Update the overlay's opacity to be what it currently should be.
     _updateOverlay(): void {
         let visibilityBefore = this._overlayVisible;
@@ -268,6 +273,18 @@ export class MediaPlayerComponent extends ComponentBase {
                 ? this.mediaPlayer.buffered.end(0) / duration
                 : 0;
         this.timelineLoaded.style.width = `${loadedFraction * 100}%`;
+
+        // If the playback time has decreased, the video may have looped
+        if (currentTime < this._lastPlaybackTime) {
+            if (this._reportTimeDecrease && this.state.reportPlaybackEnd) {
+                this.sendMessageToBackend({
+                    type: 'playbackEnd',
+                });
+            }
+        }
+
+        this._reportTimeDecrease = true;
+        this._lastPlaybackTime = currentTime;
     }
 
     createElement(): HTMLElement {
@@ -414,7 +431,7 @@ export class MediaPlayerComponent extends ComponentBase {
         this.timelineOuter.addEventListener('click', (event: MouseEvent) => {
             markEventAsHandled(event);
             this.interact();
-            this._seekFromMousePosition(event);
+            this._onTimelineDrag(event);
         });
 
         this.timelineOuter.addEventListener(
@@ -727,6 +744,7 @@ export class MediaPlayerComponent extends ComponentBase {
     }
 
     private _onTimelineDrag(event: MouseEvent): void {
+        this._reportTimeDecrease = false;
         let progress = this._getProgressFractionFromMousePosition(event);
         this.timelinePlayed.style.width = `${progress * 100}%`;
         this.mediaPlayer.currentTime = this.mediaPlayer.duration * progress;
@@ -737,11 +755,6 @@ export class MediaPlayerComponent extends ComponentBase {
         this.mediaPlayer.play();
     }
 
-    private _seekFromMousePosition(event: MouseEvent): void {
-        let progress = this._getProgressFractionFromMousePosition(event);
-        this.mediaPlayer.currentTime = this.mediaPlayer.duration * progress;
-    }
-
     private _onKeyPress(event: KeyboardEvent): void {
         if (
             !this.state.controls ||

diff --git a/frontend/code/components/switcherBar.ts b/frontend/code/components/switcherBar.ts
@@ -115,19 +115,17 @@ export class SwitcherBarComponent extends ComponentBase {
         let markerCurHeight = this.markerCurrent[3] * fade;
         let markerCurLeft =
             this.markerCurrent[0] +
-            (this.markerAtAnimationEnd[2] - markerCurWidth) / 2;
+            (this.markerCurrent[2] - markerCurWidth) / 2;
         let markerCurTop =
             this.markerCurrent[1] +
-            (this.markerAtAnimationEnd[3] - markerCurHeight) / 2;
+            (this.markerCurrent[3] - markerCurHeight) / 2;
 
         // Move the marker
         this.markerElement.style.left = `${markerCurLeft}px`;
         this.markerElement.style.top = `${markerCurTop}px`;
         this.markerElement.style.width = `${markerCurWidth}px`;
         this.markerElement.style.height = `${markerCurHeight}px`;
 
-        let rect = this.markerElement.getBoundingClientRect();
-
         // The inner options are positioned relative to the marker. Move them in
         // the opposite direction so they stay put.
         this.markerOptionsElement.style.left = `-${markerCurLeft}px`;

diff --git a/rio/components/media_player.py b/rio/components/media_player.py
@@ -51,11 +51,11 @@ class MediaPlayer(KeyboardFocusableFundamentalComponent):
     `background`: The background fill. This is visible when playing audio or
         when the video doesn't use up all the available space.
 
-    `on_playback_end`: An event handler to call when the media finishes
-        playing.
+    `on_playback_end`: Triggers when the played file reaches the end. This will
+        be called even if the `loop` attribute is set to `True`.
 
-    `on_error`: An event handler to call when an error occurs, for example if
-        the file format isn't supported.
+    `on_error`: Triggered should any error with the playback occur, for example
+        because the file format isn't supported.
 
 
     ## Examples