Merge branch '213'

radio-t · Apr 27, 2024 · e8692a5 · e8692a5
2 parents 254092b + 71bbc74
commit e8692a5
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 45 deletions.
diff --git a/hugo/layouts/partials/player.html b/hugo/layouts/partials/player.html
@@ -6,7 +6,7 @@
   data-turbolinks-permanent
 >
   <div class="player-placeholder"></div>
-  <div class="podcast-player-container">
+  <div class="podcast-player-container" data-target="player.container">
     <div class="podcast-player container-fluid d-md-flex align-items-center flex-nowrap">
       <div class="podcast-player-cover podcast-cover flex-shrink-0">
         <a class="cover-image cover-image-online" data-target="player.cover player.link">

diff --git a/hugo/src/js/controllers/player_controller.js b/hugo/src/js/controllers/player_controller.js
@@ -1,5 +1,4 @@
-import debounce from 'lodash/debounce';
-import capitalize from 'lodash/capitalize';
+import { debounce, capitalize, throttle } from 'lodash';
 
 import { Events } from '../events';
 import Controller from '../base_controller';
@@ -28,6 +27,7 @@ export default class extends Controller {
     'mute',
     'unmute',
     'rate',
+    'container',
   ];
 
   static getState() {
@@ -74,15 +74,18 @@ export default class extends Controller {
 
   // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
   addEventListeners() {
-    ['timeupdate', 'durationchange', 'play', 'pause', 'ended'].forEach((event) => {
+    ['durationchange', 'play', 'pause', 'ended'].forEach((event) => {
       const handlerName = `on${capitalize(event)}`;
       if (this[handlerName]) this.audioTarget.addEventListener(event, this[handlerName].bind(this));
     });
 
-    const updateLoadingState = debounce(
-      (isLoading) => this.element.classList.toggle('player-loading', isLoading),
-      500
-    );
+    this.audioTarget.addEventListener('timeupdate', throttle(this.onTimeupdate.bind(this), 500));
+
+    const updateLoadingState = debounce((isLoading) => {
+      this.element.classList.toggle('player-loading', isLoading);
+      this.element.classList.remove('player-loading-completed');
+    }, 500);
+
     const eventsLoadingOn = ['seeking', 'waiting', 'loadstart'];
     const eventsLoadingOff = ['playing', 'seeked', 'canplay', 'loadeddata', 'error'];
     eventsLoadingOn.forEach((event) =>
@@ -92,37 +95,37 @@ export default class extends Controller {
       this.audioTarget.addEventListener(event, updateLoadingState.bind(this, false))
     );
 
-    const debugEvents = [
-      'abort',
-      'canplay',
-      'canplaythrough',
-      'durationchange',
-      'emptied',
-      'encrypted',
-      'ended',
-      'error',
-      'interruptbegin',
-      'interruptend',
-      'loadeddata',
-      'loadedmetadata',
-      'loadstart',
-      'mozaudioavailable',
-      'pause',
-      'play',
-      'playing',
-      'progress',
-      'ratechange',
-      'seeked',
-      'seeking',
-      'stalled',
-      'suspend',
-      'timeupdate',
-      'volumechange',
-      'waiting',
-    ];
-    debugEvents.forEach((event) =>
-      this.audioTarget.addEventListener(event, (e) => this.debug('audio event', event, e))
-    );
+    // const debugEvents = [
+    //   'abort',
+    //   'canplay',
+    //   'canplaythrough',
+    //   'durationchange',
+    //   'emptied',
+    //   'encrypted',
+    //   'ended',
+    //   'error',
+    //   'interruptbegin',
+    //   'interruptend',
+    //   'loadeddata',
+    //   'loadedmetadata',
+    //   'loadstart',
+    //   'mozaudioavailable',
+    //   'pause',
+    //   'play',
+    //   'playing',
+    //   'progress',
+    //   'ratechange',
+    //   'seeked',
+    //   'seeking',
+    //   'stalled',
+    //   'suspend',
+    //   'timeupdate',
+    //   'volumechange',
+    //   'waiting',
+    // ];
+    // debugEvents.forEach((event) =>
+    //   this.audioTarget.addEventListener(event, (e) => this.debug('audio event', event, e))
+    // );
 
     window.addEventListener('beforeunload', () => {
       const isPlaying = this.constructor.state.src && !this.constructor.state.paused;
@@ -136,6 +139,16 @@ export default class extends Controller {
         })
       );
     });
+
+    this.containerTarget.addEventListener('transitionend', (e) => {
+      if (e.pseudoElement !== '::after' || e.propertyName !== 'opacity') {
+        return;
+      }
+      const style = window.getComputedStyle(e.target, ':after');
+      if (style.opacity === '0') {
+        this.element.classList.add('player-loading-completed');
+      }
+    });
   }
 
   playPodcast(detail) {

diff --git a/hugo/src/js/controllers/podcast_progress_controller.js b/hugo/src/js/controllers/podcast_progress_controller.js
@@ -1,14 +1,18 @@
+import { throttle } from 'lodash';
 import Controller from '../base_controller';
-import { composeTime, getLocalStorage } from '../utils';
+import { getLocalStorage } from '../utils';
 
 export default class extends Controller {
   static targets = ['bar', 'number', 'duration', 'progress'];
 
+  lastPercentage = 0;
+
   initialize() {
     super.initialize();
-    this.subscribe(`playing-progress-${this.numberTarget.innerText}`, (podcast) => {
-      this.renderProgress(podcast);
-    });
+    this.subscribe(
+      `playing-progress-${this.numberTarget.innerText}`,
+      throttle(this.renderProgress.bind(this), 1000)
+    );
   }
 
   connect() {
@@ -28,7 +32,11 @@ export default class extends Controller {
 
   renderProgress(podcast) {
     this.progressTarget.style.display = 'block';
-    this.durationTarget.innerText = composeTime(podcast.duration);
-    this.barTarget.style.width = `${(podcast.currentTime / podcast.duration) * 100}%`;
+    // this.durationTarget.innerText = composeTime(podcast.duration);
+    const percentage = (podcast.currentTime / podcast.duration) * 100;
+    if (Math.abs(percentage - this.lastPercentage) > 0.2) {
+      this.barTarget.style.width = `${percentage}%`;
+      this.lastPercentage = percentage;
+    }
   }
 }
diff --git a/hugo/src/scss/_player.scss b/hugo/src/scss/_player.scss
@@ -36,6 +36,10 @@ $podcast-player-cover-margin: 0.5rem;
       opacity: 1;
       transition-delay: 200ms;
     }
+
+    .player-loading-completed & {
+      animation: none;
+    }
   }
 }
 .podcast-player {

diff --git a/hugo/src/scss/main.scss b/hugo/src/scss/main.scss
@@ -840,6 +840,7 @@ $ripple-scale-out: 3.4;
 [data-target='online.time'] {
   cursor: default;
   user-select: none;
+  transform: translateZ(0);
 }
 .podcast-progress {
   position: absolute;
@@ -850,6 +851,7 @@ $ripple-scale-out: 3.4;
   background-color: $gray-300;
   z-index: 3;
   pointer-events: none;
+  transform: translateZ(0);
 }
 .podcast-progress-bar {
   position: absolute;