@latest-thinking/lt-player 1.1.0 → 1.2.0-b

package/src/components/LTPlayerDevMethode.ts

@@ -2,132 +2,154 @@ import Plyr from "plyr";
 import {LTPlayerPosterPreload} from "./poster/LTPlayerPosterPreload";
 import {LTPlayerPosterPreloadEvents} from "./poster/LTPlayerPosterPreloadEvents";
 import {LTPlayer} from "./LTPlayerType";
+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(isFirst?: boolean) {
+            console.log('is it the first video? ' + isFirst);
+            const playerContainer = this.player.elements.container;
 
-               if (poster) {
-                   poster.classList.add('d-none');
-               }
+            if(isFirst) {
+                this.player.muted = true;
+                this.player.volume = 0;
+                this.settingsManager.setGlobalSettings();
+            }
+
+            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/LTPlayerManager.ts

@@ -202,6 +202,22 @@ export class LTPlayerManager {
         }
     }
 
+    getPlayerByExternalId(id: string | number): null | LTPlayer.LandscapeType | LTPlayer.PortraitType {
+        if (this.players.length === 0) {
+            return null;
+        }
+
+        let response = null;
+
+        this.players.forEach(instance => {
+            if (instance.playerConfig.getConfigData().externalId == id) {
+                response = instance;
+            }
+        })
+
+        return response;
+    }
+
     /**
      * Pause all players
      */

package/src/components/LTPlayerSettingsManager.ts

@@ -0,0 +1,117 @@
+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
+        }
+        console.log(settings.volume);
+        console.log(settings.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');
+        if(speedSpan) {
+            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/LTPlayerSetup.ts

@@ -14,17 +14,9 @@ export class LTPlayerSetup {
 
     checkIfPlayerExists(playerConfig?: playerConfigType): boolean
     {
-        let response: boolean = false;
-
+        let response = 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;
-                    }
-                })
-            }
+            response = !playerConfig.body.playerContainer.classList.contains('is-loaded');
         }
         return response;
     }
@@ -77,6 +69,7 @@ export class LTPlayerSetup {
         const playerContainer = playerConfig.body.playerContainer;
 
         playerContainer.classList.add(`lt-player`);
+        playerContainer.classList.add(`is-loaded`);
 
         this.setAdditionalInfo(playerConfig);
 

package/src/components/LTPlayerStatusFeedback.ts

@@ -0,0 +1,76 @@
+import {LTPlayerController} from "../global/controllers/LTPlayerController";
+
+export class LTPlayerStatusFeedback {
+
+    player: LTPlayerController
+    element: HTMLElement
+
+    constructor(player: LTPlayerController) {
+        this.player = player;
+    }
+
+    private getElement(): HTMLElement {
+        if (!this.element) {
+            if (this.player.playerConfig) {
+                this.element = this.player.playerConfig.getPlayerElementContainer()
+            } else {
+                console.error("Failed to get element from playerConfig")
+            }
+        }
+        return this.element
+    }
+
+    private addClass(name: string) {
+        const element = this.getElement()
+        if (element && !element.classList.contains(name)) {
+            element.classList.add(name)
+        }
+    }
+
+    private removeClass(name: string) {
+        const element = this.getElement()
+        if (element && element.classList.contains(name)) {
+            element.classList.remove(name)
+        }
+    }
+
+    setLoading() {
+        this.addClass("lt-state-loader-active")
+    }
+
+    setLoadingSeek() {
+        this.addClass("lt-state-seeking")
+        this.setLoading()
+    }
+
+    clearLoading() {
+        this.removeClass("lt-state-loader-active")
+        this.removeClass("lt-state-seeking")
+    }
+
+    setFullscreen() {
+        this.addClass("lt-state-fullscreen")
+    }
+
+    clearFullscreen() {
+        this.removeClass("lt-state-fullscreen")
+    }
+
+    setControlsVisible() {
+        this.addClass("lt-state-controls-visible")
+    }
+
+    clearControlsVisible() {
+        this.removeClass("lt-state-controls-visible")
+    }
+
+    setCaptionsEnabled() {
+        this.addClass("lt-state-captions-enabled")
+    }
+
+    clearCaptionsEnabled() {
+        this.removeClass("lt-state-captions-enabled")
+    }
+
+}
+

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

@@ -10,6 +10,7 @@ import {LTPLayerAddInfo} from "./addInfo/LTPlayerAddInfoManager";
 import {LTPlayerEvents} from "./events/LTPlayer";
 import {Helper} from "../services/Helper";
 import {LTPlayerHls} from "./LTPlayerHls";
+import {LTPlayerUpdate} from "./LTPlayerUpdate";
 
 export namespace LTPlayer {
 
@@ -19,6 +20,7 @@ export namespace LTPlayer {
     export class PortraitType extends LTPlayerController implements TypeInterface {
 
         pausedPlayer: Plyr;
+        updateManager: LTPlayerUpdate;
 
         /**
          * Create a new Player instance root element
@@ -52,6 +54,7 @@ export namespace LTPlayer {
             }
 
             this.setEvents();
+            this.updateManager = new LTPlayerUpdate(this);
 
             return true;
         }
@@ -125,6 +128,7 @@ export namespace LTPlayer {
 
             if (this.playerConfig.getFullscreenMode()) {
                 Object.assign(playerSettings, this.playerConfig.getFullscreenMode());
+                this.playerConfig.getPlayerElementContainer().classList.add('fullscreen-disabled');
             }
 
             const element = this.playerConfig.getPlayerElementContainer().querySelector('.embed_player');
@@ -156,8 +160,8 @@ export namespace LTPlayer {
             }
         }
 
-        play() {
-            this.devMethodePlayer.play();
+        play(isFirst?: boolean) {
+            this.devMethodePlayer.play(isFirst);
         }
 
         pause() {
@@ -235,6 +239,10 @@ export namespace LTPlayer {
 
             this.setEvents();
 
+            if (this.playerConfig.getCaptionsEnabled() === true) {
+                this.statusFeedbackService.setCaptionsEnabled()
+            }
+
             return true;
         }
 

package/src/components/LTPlayerUpdate.ts

@@ -0,0 +1,61 @@
+import {LTPlayer} from "./LTPlayerType";
+import {defaultType} from "../global/types/ModuleTypes";
+import {LTPLayerAddInfo} from "./addInfo/LTPlayerAddInfoManager";
+import Hls from "hls.js";
+
+export class LTPlayerUpdate {
+
+    player: LTPlayer.PortraitType;
+
+    constructor(player: LTPlayer.PortraitType) {
+        this.player = player;
+    }
+
+    updatePlayer(config: defaultType) {
+        console.log(config)
+        this.updateVideo(config.body.videoUrl, config.body.posterImage);
+        this.updateTitle(config.body.videoParagraph);
+        this.updateAuthor(config.body.videoTitle);
+        this.updateSubtitles(config.body.defaultConfig?.captions.url ?? null);
+        this.updateChapters(config);
+        this.player.additionalInfoService.setConfig(config.body.additionalInfo);
+        return;
+    }
+
+    updateChapters(config: defaultType) {
+        this.player.playerControl.initChapters(config.body.chapters);
+    }
+
+    updateVideo(videoUrl: string, poster: string) {
+        const video = document.querySelector('video');
+        video.poster = poster;
+        this.player.playerConfig.setPosterImage(poster);
+        this.player.posterManager.poster.setImage();
+        const coverImage = document.querySelector('.lt-player__poster__img--set-custom') as HTMLImageElement;
+        coverImage.src = poster;
+
+        if (Hls.isSupported()) {
+            this.player.hls.hlsInstance.detachMedia();
+            this.player.hls.hlsInstance.loadSource(videoUrl);
+            this.player.hls.hlsInstance.attachMedia(video);
+        } else {
+            document.querySelector('video').src = videoUrl;
+        }
+    }
+
+    updateTitle(title: string) {
+        const titleHeader = document.querySelector('.poster-title');
+        titleHeader.textContent = '';
+        titleHeader.textContent = title;
+    }
+
+    updateAuthor(author: string) {
+        const authorParagraph = document.querySelector('.poster-paragraph__content');
+        authorParagraph.textContent = '';
+        authorParagraph.textContent = author;
+    }
+
+    updateSubtitles(src: string|null) {
+        this.player.captionsService.setCaptions(src)
+    }
+}