@latest-thinking/lt-player 1.0.9 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "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/core/_player.scss

@@ -45,3 +45,9 @@
     }
   }
 }
+
+.lt-player-portrate--mobile {
+  .fullscreen-custom-control {
+    display: none !important;
+  }
+}

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/LTPlayerManager.ts

@@ -24,9 +24,9 @@ export class LTPlayerManager {
 
         let domElements: NodeListOf<HTMLElement>;
 
-        domElements = document.querySelectorAll(`.${process.env.DEFAULT_DOM_HTML_ELEMENTS}`);
+        domElements = document.querySelectorAll(`.${process.env.DEFAULT_DOM_HTML_ELEMENTS}, #${process.env.DEFAULT_DOM_HTML_ELEMENTS}`);
 
-        if (domElements.length === 0) {
+        if (domElements.length !== 0) {
             domElements = document.querySelectorAll('[data-lt-player-config]');
         }
 
@@ -51,8 +51,9 @@ export class LTPlayerManager {
     /**
      * Init player by identifier
      * @param identifier
+     * @param playerConfig
      */
-    initByClassOrID(identifier: string) {
+    initByClassOrID(identifier: string, playerConfig?: playerConfigType) {
 
         if (typeof identifier !== 'string') {
             console.error('Identifier has another type of');
@@ -69,7 +70,7 @@ export class LTPlayerManager {
             return;
         }
         return new Promise(resolve => {
-            this.initBySelector(defaultSelector).then( result => {
+            this.initBySelector(defaultSelector, playerConfig).then(result => {
                 resolve(result);
             })
         })
@@ -79,13 +80,24 @@ export class LTPlayerManager {
     /**
      * Init player by HTMLElement selector
      * @param selector
+     * @param playerConfig
      */
-    initBySelector(selector: HTMLElement) {
-        let playerConfig = selector.dataset.ltPlayerConfig;
+    initBySelector(selector: HTMLElement, playerConfig?: playerConfigType) {
 
-        if (playerConfig !== undefined) {
+        let config: playerConfigType | string = selector.dataset.ltPlayerConfig;
 
-            const configData = JSON.parse(playerConfig);
+        if (!config) {
+            config = playerConfig;
+        }
+
+        if (config !== undefined) {
+            let configData: playerConfigType;
+
+            if (typeof config === "string") {
+                configData = JSON.parse(config);
+            } else {
+                configData = config;
+            }
 
             Object.assign(configData.body, {playerContainer: selector})
 
@@ -96,13 +108,17 @@ export class LTPlayerManager {
             })
         }
 
-        console.error(`Lt Player: No "data-lt-player-config" attribute is set on element!`);
-        console.log(selector)
-        console.error('Use one of below examples')
-        console.table({
-            Example_1: '<div class="lt-player" data-lt-player-config="{config}"> </div>',
+        return new Promise((resolve, reject) => {
+            console.error(`Lt Player: No "data-lt-player-config" attribute is set on element!`);
+            console.log(selector)
+            console.error('Use one of below examples')
+            console.table({
+                Example_1: '<div class="lt-player" data-lt-player-config="{config}"> </div>',
+            })
+            reject()
         })
-        return;
+
+
     }
 
     /**
@@ -110,25 +126,27 @@ export class LTPlayerManager {
      * @param playerConfig
      * @protected
      */
-    public initPlayer(playerConfig?: playerConfigType) {
+    public initPlayer(playerConfig?: playerConfigType): Promise<any> | null {
 
         const setup = new LTPlayerSetup();
 
-        return new Promise((resolve, reject) => {
-            let setupPLayer = setup.init(playerConfig);
-
-            if (setupPLayer) {
-                setupPLayer.then( result => {
-                    this.players.push(result);
-                    resolve(result);
-                })
-            } else {
-               reject('Player is not setup')
-            }
-
-        })
-
+            return new Promise((resolve, reject) => {
+                if (!setup.checkIfPlayerExists(playerConfig)) {
+                    reject('Duplicate player');
+                    return;
+                }
+                let setupPLayer = setup.init(playerConfig);
+
+                if (setupPLayer) {
+                    setupPLayer.then( result => {
+                        this.players.push(result);
+                        resolve(result);
+                    })
+                } else {
+                    reject('Player is not setup')
+                }
 
+            })
     }
 
     /**

package/src/components/LTPlayerSetup.ts

@@ -5,10 +5,30 @@ import {ValidatorService} from "../services/ValidatorService";
 import * as playerSchema from "../json-schema/player-config.json";
 import {LTPLayerAddInfo} from "./addInfo/LTPlayerAddInfoManager";
 import Plyr from "plyr";
+import {LTPlayerDevMethode} from "./LTPlayerDevMethode";
+import Player = LTPlayerDevMethode.Player;
 
 export class LTPlayerSetup {
+
     additionalInfoService: LTPLayerAddInfo.Controller;
 
+    checkIfPlayerExists(playerConfig?: playerConfigType): boolean
+    {
+        let response: boolean = false;
+
+        if (playerConfig.body.playerContainer instanceof HTMLElement) {
+            response = true;
+            if (window.Player !== undefined) {
+                window.Player.players.forEach(player => {
+                    if (player.playerConfig.getPlayerElementContainer() === playerConfig.body.playerContainer) {
+                        response = false;
+                    }
+                })
+            }
+        }
+        return response;
+    }
+
     init(playerConfig?: playerConfigType): Promise<any> {
 
         Helper.setDebugEvent('Start init player', 'info');

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>