#213 high cpu optimization

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">

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) =>
@@ -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) {

hugo/src/js/controllers/podcast_progress_controller.js

@@ -1,3 +1,4 @@
+import { throttle } from 'lodash';
 import Controller from '../base_controller';
 import { composeTime, getLocalStorage } from '../utils';
 
@@ -6,9 +7,10 @@ export default class extends Controller {
 
   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() {
@@ -24,11 +26,16 @@ export default class extends Controller {
     }
 
     this.data.set('init', '1');
+    this.lastPercentage = 0;
   }
 
   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.currentTime);
+    const percentage = (podcast.currentTime / podcast.duration) * 100;
+    if (Math.abs(percentage - this.lastPercentage) > 0.2) {
+      this.barTarget.style.width = `${percentage}%`;
+      this.lastPercentage = percentage;
+    }
   }
 }

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 {

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;