@latest-thinking/lt-player 1.1.0-c → 1.1.0-d

package/package.json

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

package/src/components/LTPlayerDevMethode.ts

@@ -2,132 +2,148 @@ import Plyr from "plyr";
 import {LTPlayerPosterPreload} from "./poster/LTPlayerPosterPreload";
 import {LTPlayerPosterPreloadEvents} from "./poster/LTPlayerPosterPreloadEvents";
 import {LTPlayer} from "./LTPlayerType";
+import {LTPlayerStorage} from "./LTPlayerStorage";
+import {LTPlayerSettingsManager} from "./LTPlayerSettingsManager";
 
 export namespace LTPlayerDevMethode {
 
-    export class Player  {
+    export class Player {
 
         player: Plyr
-        instance : LTPlayer.PortraitType | LTPlayer.LandscapeType
+        instance: LTPlayer.PortraitType | LTPlayer.LandscapeType
+        settingsManager: LTPlayerSettingsManager
 
         constructor(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
             this.player = instance.plyr;
-            this.instance = instance
+            this.instance = instance;
+            this.settingsManager = new LTPlayerSettingsManager(instance);
         }
 
-       play() {
-           let playerContainer = this.player.elements.container;
-           const disablePoster = () => {
-               let poster = playerContainer.querySelector(`.lt-player__poster`);
+        play() {
+            const playerContainer = this.player.elements.container;
 
-               if (poster) {
-                   poster.classList.add('d-none');
-               }
+            playerContainer.addEventListener('ratechange', () => {
+                this.settingsManager.setGlobalSettings();
+            });
 
-               let controls = playerContainer.querySelector('.player__controls');
+            playerContainer.addEventListener('volumechange', () => {
+                this.settingsManager.setGlobalSettings();
+            });
 
-               if (controls) {
-                   controls.classList.remove('d-none');
-               }
-           }
+            this.settingsManager.applyGlobalSettings();
 
-           if (!this.player.playing) {
-               this.player.play();
-           }
+            const disablePoster = () => {
+                let poster = playerContainer.querySelector(`.lt-player__poster`);
 
-           disablePoster();
-       }
+                if (poster) {
+                    poster.classList.add('d-none');
+                }
 
-       pause() {
-           this.player.pause();
-       }
+                let controls = playerContainer.querySelector('.player__controls');
 
-       stop() {
-            let playerContainer = this.player.elements.container;
+                if (controls) {
+                    controls.classList.remove('d-none');
+                }
+            }
 
-           const enablePoster = () => {
+            if (!this.player.playing) {
+                this.player.play();
+            }
 
-               const customPoster = playerContainer.querySelector('.lt-player__poster');
-               const controls = playerContainer.querySelector('.plyr__controls');
+            disablePoster();
+        }
 
-               playerContainer.classList.add('plyr--stopped')
-               customPoster.classList.remove('d-none');
-               controls.classList.add('d-none');
-           }
+        pause() {
+            this.player.pause();
+        }
 
-           const disableSettings = () => {
+        stop() {
+            const playerContainer = this.player.elements.container;
 
-               const settingsBody = playerContainer.querySelector('.settings-controllers');
+            this.settingsManager.setGlobalSettings();
 
-               if (settingsBody.classList.contains('settings-controllers-enable')) {
+            const enablePoster = () => {
 
-                   const settingsBody = playerContainer.querySelector('.settings-controllers');
-                   this.player.elements.controls.classList.remove('plyr__controls-enable-settings')
+                const customPoster = playerContainer.querySelector('.lt-player__poster');
+                const controls = playerContainer.querySelector('.plyr__controls');
 
-                   settingsBody.classList.remove('settings-controllers-enable');
+                playerContainer.classList.add('plyr--stopped')
+                customPoster.classList.remove('d-none');
+                controls.classList.add('d-none');
+            }
 
-                   const background = document.querySelector('.settings-controllers-enable__background');
+            const disableSettings = () => {
 
-                   if (!background.classList.contains('d-none')) {
-                       background.classList.add('d-none');
-                   }
+                const settingsBody = playerContainer.querySelector('.settings-controllers');
 
-               }
-           }
+                if (settingsBody && settingsBody.classList.contains('settings-controllers-enable')) {
 
-           const exitMiniPLayer = () => {
-               let miniPlayer = {
-                   controls : playerContainer.querySelector('.lt-player-mini-player-controls'),
-                   background: playerContainer.querySelector('.lt-player-mini-player-background'),
-                   enable: playerContainer.querySelector('.lt-player-mini-enable'),
-                   size_land: playerContainer.querySelector(`.lt-player-mini-1`),
-                   size_port: playerContainer.querySelector(`.lt-player-mini-2`)
-               };
+                    const settingsBody = playerContainer.querySelector('.settings-controllers');
+                    this.player.elements.controls.classList.remove('plyr__controls-enable-settings')
 
-               if (miniPlayer.controls) {
-                   miniPlayer.controls.remove();
-               }
+                    settingsBody.classList.remove('settings-controllers-enable');
 
-               if (miniPlayer.background) {
-                   miniPlayer.background.remove();
-               }
+                    const background = document.querySelector('.settings-controllers-enable__background');
 
-               if (miniPlayer.size_land) {
-                   miniPlayer.size_land.classList.remove(`lt-player-mini-1`)
-               }
+                    if (!background.classList.contains('d-none')) {
+                        background.classList.add('d-none');
+                    }
 
-               if (miniPlayer.size_port) {
-                   miniPlayer.size_port.classList.remove(`lt-player-mini-2`)
-               }
+                }
+            }
 
-               if (miniPlayer.enable) {
-                   miniPlayer.enable.classList.remove('lt-player-mini-enable')
-               }
-           }
+            const exitMiniPLayer = () => {
+                const miniPlayer = {
+                    controls: playerContainer.querySelector('.lt-player-mini-player-controls'),
+                    background: playerContainer.querySelector('.lt-player-mini-player-background'),
+                    enable: playerContainer.querySelector('.lt-player-mini-enable'),
+                    size_land: playerContainer.querySelector(`.lt-player-mini-1`),
+                    size_port: playerContainer.querySelector(`.lt-player-mini-2`)
+                };
+
+                if (miniPlayer.controls) {
+                    miniPlayer.controls.remove();
+                }
+
+                if (miniPlayer.background) {
+                    miniPlayer.background.remove();
+                }
+
+                if (miniPlayer.size_land) {
+                    miniPlayer.size_land.classList.remove(`lt-player-mini-1`)
+                }
+
+                if (miniPlayer.size_port) {
+                    miniPlayer.size_port.classList.remove(`lt-player-mini-2`)
+                }
+
+                if (miniPlayer.enable) {
+                    miniPlayer.enable.classList.remove('lt-player-mini-enable')
+                }
+            }
 
-           const exitFullScreen = () => {
-               if (this.player.fullscreen.active) {
-                   this.player.fullscreen.exit();
-               }
-           }
+            const exitFullScreen = () => {
+                if (this.player.fullscreen.active) {
+                    this.player.fullscreen.exit();
+                }
+            }
 
-           this.player.stop()
-           enablePoster();
-           disableSettings();
-           exitMiniPLayer();
-           exitFullScreen();
+            this.player.stop()
+            enablePoster();
+            disableSettings();
+            exitMiniPLayer();
+            exitFullScreen();
 
-       }
+        }
 
         enterMiniPlayer() {
             this.instance.miniPlayer.enterMiniPlayer();
-       }
+        }
 
-       exitMiniPlayer() {
-           this.instance.miniPlayer.exitMiniPlayer(this.player);
-       }
+        exitMiniPlayer() {
+            this.instance.miniPlayer.exitMiniPlayer(this.player);
+        }
     }
-
     export class Preload {
 
         instance: LTPlayer.PortraitType | LTPlayer.LandscapeType;

package/src/components/LTPlayerSettingsManager.ts

@@ -0,0 +1,112 @@
+import {LTPlayer} from "./LTPlayerType";
+import Plyr from "plyr";
+import {LTPlayerStorage} from "./LTPlayerStorage";
+import {settings} from "json-schema-library";
+
+export class LTPlayerSettingsManager {
+    instance: LTPlayer.PortraitType | LTPlayer.LandscapeType
+    player: Plyr
+    storage: LTPlayerStorage
+    constructor(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+        this.player = instance.plyr;
+        this.instance = instance;
+        this.storage = new LTPlayerStorage();
+    }
+
+    applyGlobalSettings() {
+        const settings = this.storage.getSettings();
+        this.player.speed = settings.speed;
+        this.player.volume = settings.volume;
+        this.player.muted = settings.muted;
+        this.volumeIconsChange();
+        this.speedButtonChange(this.player.elements.container);
+    }
+
+    setGlobalSettings() {
+        const settings = {
+            speed: this.player.speed,
+            volume: this.player.volume,
+            muted: this.player.muted
+        }
+        this.storage.setSettings(settings);
+    }
+
+    speedButtonChange(container: HTMLElement) {
+        const storage = new LTPlayerStorage();
+        const speed = storage.getSpeed();
+        const displaySpeed = Math.floor(speed * 10) / 10;
+        const speedSpan = container.querySelector('.plyr__control.plyr__controls_speed-button > span');
+        speedSpan.innerHTML = displaySpeed + "X";
+        speedSpan.className = '';
+        speedSpan.classList.add('playback-speed--' + speed + 'X');
+    }
+
+    volumeIconsChange() {
+        if (this.instance.playerConfig.getDevice() === 'desktop') {
+            this.volumeItemsDesktop();
+        } else {
+            this.volumeIconsMobile();
+        }
+    }
+
+    volumeIconsMobile() {
+        if (this.storage.getMutedState() === false) {
+            this.player.volume = 1;
+            this.storage.setVolume(1);
+        }
+        const playerControlsContainer = this.player.elements.controls;
+        const volume: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
+
+        if (volume) {
+            const volumeUnmute = volume.querySelector('.volume-max');
+            const volumeMute = volume.querySelector('.volume-mute');
+
+            if (this.player.muted) {
+                volumeUnmute.classList.remove('d-none');
+                volumeMute.classList.remove('d-none');
+                volumeUnmute.classList.add('d-none');
+            } else {
+                volumeUnmute.classList.remove('d-none');
+                volumeMute.classList.remove('d-none');
+                volumeMute.classList.add('d-none');
+            }
+        }
+    }
+
+    volumeItemsDesktop() {
+        const range = this.storage.getVolume().toString()
+        const playerControlsContainer = this.player.elements.controls;
+        const volumeMax: HTMLElement = playerControlsContainer.querySelector('.volume-max');
+        const volume75: HTMLElement = playerControlsContainer.querySelector('.volume-75');
+        const volume50: HTMLElement = playerControlsContainer.querySelector('.volume-50');
+        const volumeMute: HTMLElement = playerControlsContainer.querySelector('.volume-mute');
+        const volumeBody: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
+        const volumeIconsManager = (item: HTMLElement) => {
+
+            const rangeVolumesItems: NodeListOf<HTMLElement> = volumeBody.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
+
+            rangeVolumesItems.forEach(function (value) {
+                if (item.dataset.rangeValue === value.dataset.rangeValue) {
+                    value.classList.remove('d-none');
+                } else {
+                    value.classList.add('d-none')
+                }
+            })
+        }
+
+
+        const volumeThresholds = [
+            { threshold: 1, element: volumeMax },
+            { threshold: 0.65, element: volume75 },
+            { threshold: 0.35, element: volume50 },
+            { threshold: 0, element: volumeMute }
+        ];
+
+        for (let i = 0; i < volumeThresholds.length; i++) {
+            if (range >= volumeThresholds[i].threshold) {
+                volumeIconsManager(volumeThresholds[i].element);
+                break;
+            }
+        }
+    }
+}

package/src/components/LTPlayerStorage.ts

@@ -0,0 +1,58 @@
+export class LTPlayerStorage {
+
+    constructor() {
+        if (!localStorage.getItem('lt-player')) {
+            this.createStorage();
+        }
+    }
+
+    createStorage() {
+        const defaultSettings = {
+            speed: 1,
+            volume: 1,
+            muted: false
+        };
+        localStorage.setItem('lt-player', JSON.stringify(defaultSettings));
+    }
+
+    setSettings(settings: object) {
+        localStorage.setItem('lt-player', JSON.stringify(settings));
+    }
+
+    getSettings() {
+        return JSON.parse(localStorage.getItem('lt-player'));
+    }
+
+    getSpeed() {
+        const settings = JSON.parse(localStorage.getItem('lt-player'));
+        return settings ? settings.speed : 1;
+    }
+
+    setSpeed(speed: number) {
+        const settings = JSON.parse(localStorage.getItem('lt-player')) || {};
+        settings.speed = speed;
+        localStorage.setItem('lt-player', JSON.stringify(settings));
+    }
+
+    getVolume() {
+        const settings = JSON.parse(localStorage.getItem('lt-player'));
+        return settings ? settings.volume : 1;
+    }
+
+    setVolume(volume: number) {
+        const settings = JSON.parse(localStorage.getItem('lt-player')) || {};
+        settings.volume = volume;
+        localStorage.setItem('lt-player', JSON.stringify(settings));
+    }
+
+    getMutedState() {
+        const settings = JSON.parse(localStorage.getItem('lt-player'));
+        return settings ? settings.muted : false;
+    }
+
+    setMutedState(state: boolean) {
+        const settings = JSON.parse(localStorage.getItem('lt-player')) || {};
+        settings.muted = state;
+        localStorage.setItem('lt-player', JSON.stringify(settings));
+    }
+}

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -80,6 +80,7 @@ export namespace LTPlayerControlsEvents  {
             const controlsSelector = instance.plyr.elements.controls;
             const videoTitle = controlsSelector.querySelector('.poster-paragraph__content');
             const readButton = controlsSelector.querySelector('.poster-paragraph__button');
+            return;
 
             if (!videoTitle) {
                 return;
@@ -601,7 +602,7 @@ export namespace LTPlayerControlsEvents  {
                     this.controlsTimeOut = setTimeout(() => {
                         playerControlsContainer.classList.remove('plyr__controls-enable');
                         playerContainer.classList.add('plyr--hide-controls');
-                        if (!playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
+                        if (playerControlsBackground && !playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
                             playerControlsBackground.classList.remove('d-none');
                         }
                     }, 4000);

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

@@ -1,6 +1,7 @@
 import {LTPlayerSettingsControlsManager} from "../LTPlayerSettingsControlsManager";
 import {SettingsControlsInterfaces} from "../../../global/interfaces/SettingsControlsInterfaces";
 import {defaultType} from "../../../global/types/ModuleTypes";
+import {LTPlayerStorage} from "../../LTPlayerStorage";
 
 export class LTPlayerDesktopSettingsControllers implements SettingsControlsInterfaces  {
     settingsInstance: LTPlayerSettingsControlsManager
@@ -87,20 +88,23 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
     }
 
     setButtonSpeed() {
-        let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
-        let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
-        let plyr = this.settingsInstance.playerInstance.plyr;
-        let instance = this.settingsInstance.playerInstance;
+        const playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
+        const playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
+        const plyr = this.settingsInstance.playerInstance.plyr;
+        const instance = this.settingsInstance.playerInstance;
+        const storage = new LTPlayerStorage();
 
         if (playerSpeedButton) {
-            let speedSpan = document.createElement('span');
+            const speedSpan = document.createElement('span');
             playerSpeedButton.appendChild(speedSpan);
-            speedSpan.innerHTML = `1X`;
+
+            const displaySpeed = Math.floor(plyr.speed * 10) / 10;
+            speedSpan.innerHTML = displaySpeed + "X";
             speedSpan.className = '';
-            speedSpan.classList.add('playback-speed--1X');
+            speedSpan.classList.add('playback-speed--' + plyr.speed + 'X');
 
             playerSpeedButton.addEventListener('click', function(event) {
-                let playSpeed = plyr.speed + 0.25;
+                const playSpeed = plyr.speed + 0.25;
 
                 if (playSpeed > 2) {
                     speedSpan.innerHTML = `1X`;
@@ -111,7 +115,7 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
                 }
 
                 if (playSpeed === 1.75) {
-                    plyr.speed = playSpeed + 0.25
+                    plyr.speed = playSpeed + 0.25;
                     speedSpan.innerHTML = `2X`;
                     speedSpan.className = '';
                     speedSpan.classList.add('playback-speed--2X');

package/src/views/controls.handlebars

@@ -244,7 +244,7 @@
             </div>
           </div>
         </div>
-      <button class="poster-paragraph__button">Read more</button>
+<!--      <button class="poster-paragraph__button">Read more</button>-->
         <div class="lt-player-rewind-area">
         </div>
         <div class="lt-player-rewind lt-player-notify">