@latest-thinking/lt-player 1.0.9-a → 1.0.9-c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.9-a",
+  "version": "1.0.9-c",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",

package/src/assets/sass/abstracts/_variables.scss

@@ -16,6 +16,7 @@
 
 $lt-font-family-base: "MuseoSans", sans-serif !important;
 
+$lt-player-font-size-xxs: 10px;
 $lt-player-font-size-xs: 12px;
 $lt-player-font-size-sm: 14px;
 $lt-player-font-size-base: 16px;

package/src/assets/sass/sections/controllers/_botom.scss

@@ -66,6 +66,10 @@
           &:active {
             background-color: $default-lt-player-blue;
           }
+
+          span {
+            font-size: $lt-player-font-size-xxs;
+          }
         }
       }
 
@@ -334,6 +338,10 @@
         .plyr__controls_speed-button {
           width: 40px;
           height: 40px;
+
+          span {
+            font-size: $lt-player-font-size-sm;
+          }
         }
       }
     }

package/src/components/controls/settings/LTPlayerDesktopSettingsControllers.ts

@@ -89,34 +89,44 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
     setButtonSpeed() {
         let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
         let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
-        if (playerSpeedButton) {
-            playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}`;
-        }
         let plyr = this.settingsInstance.playerInstance.plyr;
         let instance = this.settingsInstance.playerInstance;
 
         if (playerSpeedButton) {
+            let speedSpan = document.createElement('span');
+            playerSpeedButton.appendChild(speedSpan);
+            speedSpan.innerHTML = `1X`;
+            speedSpan.className = '';
+            speedSpan.classList.add('playback-speed--1X');
+
             playerSpeedButton.addEventListener('click', function(event) {
                 let playSpeed = plyr.speed + 0.25;
 
                 if (playSpeed > 2) {
-                    playerSpeedButton.innerHTML = `1`;
+                    speedSpan.innerHTML = `1X`;
                     plyr.speed = 1;
+                    speedSpan.className = '';
+                    speedSpan.classList.add('playback-speed--1X');
                     return;
                 }
 
                 if (playSpeed === 1.75) {
                     plyr.speed = playSpeed + 0.25
-                    playerSpeedButton.innerHTML = `${playSpeed + 0.25}`;
+                    speedSpan.innerHTML = `2X`;
+                    speedSpan.className = '';
+                    speedSpan.classList.add('playback-speed--2X');
                     return;
                 }
 
                 plyr.speed = playSpeed;
-                playerSpeedButton.innerHTML = `${playSpeed}`;
+                const displaySpeed = Math.floor(playSpeed * 10) / 10;
+                speedSpan.innerHTML = displaySpeed + "X";
+                speedSpan.className = '';
+                console.log(playSpeed.toPrecision(2));
+                speedSpan.classList.add('playback-speed--' + playSpeed + 'X');
 
                 instance.playerControl.mobileEvents.showControls(instance);
             })
         }
     }
-
 }

package/src/components/controls/settings/LTPlayerMobileSettingsControllers.ts

@@ -163,27 +163,38 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         let instance = this.settingsInstance.playerInstance;
 
         if (playerSpeedButton) {
-            playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}`;
+            let speedSpan = document.createElement('span');
+            playerSpeedButton.appendChild(speedSpan);
+            speedSpan.innerHTML = `1X`;
+            speedSpan.className = '';
+            speedSpan.classList.add('playback-speed--1X');
+
             let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(playerSpeedButton);
             if (mobileEvent) {
                 mobileEvent.on('singletap', function LTPlayerMobileSpeedButton() {
-
                     let playSpeed = plyr.speed + 0.25;
 
                     if (playSpeed > 2) {
-                        playerSpeedButton.innerHTML = `1`;
+                        speedSpan.innerHTML = `1X`;
                         plyr.speed = 1;
+                        speedSpan.className = '';
+                        speedSpan.classList.add('playback-speed--1X');
                         return;
                     }
 
                     if (playSpeed === 1.75) {
                         plyr.speed = playSpeed + 0.25
-                        playerSpeedButton.innerHTML = `${playSpeed + 0.25}`;
+                        speedSpan.innerHTML = `2X`;
+                        speedSpan.className = '';
+                        speedSpan.classList.add('playback-speed--2X');
                         return;
                     }
 
                     plyr.speed = playSpeed;
-                    playerSpeedButton.innerHTML = `${playSpeed}`;
+                    const displaySpeed = Math.floor(playSpeed * 10) / 10;
+                    speedSpan.innerHTML = displaySpeed + "X";
+                    speedSpan.className = '';
+                    speedSpan.classList.add('playback-speed--' + playSpeed + 'X');
 
                     instance.playerControl.mobileEvents.showControls(instance);
                 })

package/src/views/controls.handlebars

@@ -333,9 +333,7 @@
         </div>
         {{#mobile}}
         <div class="bottom-controller__right-buttons">
-            <button type="button" class="plyr__control plyr__controls_speed-button">
-                <span class="playback-speed"></span>
-            </button>
+            <button type="button" class="plyr__control plyr__controls_speed-button"></button>
         </div>
         {{/mobile}}
         {{#mobile}}
@@ -344,9 +342,7 @@
 
         {{#desktop}}
         <div class="bottom-controller__right-buttons">
-          <button type="button" class="plyr__control plyr__controls_speed-button">
-              <span class="playback-speed></span>
-          </button>
+          <button type="button" class="plyr__control plyr__controls_speed-button"></button>
         </div>
         {{/desktop}}
       </div>