@latest-thinking/lt-player 1.1.0-o → 1.1.0-p

package/examples/portrait-with-subtitles.html

@@ -15,7 +15,9 @@
        data-lt-player-config='{
           "version": 2,
           "body": {
-            "alwaysDisplayControls" : true,
+            "pinText" : true,
+            "pinSeekBar" : false,
+            "pinControls" : false,
             "embed": false,
             "playerType": "portrait",
             "chapters": [
@@ -42,11 +44,11 @@
                 "srclang": "en"
                }
             },
-            "removeFromInterfaceToggle": ["text", "progressBar", "controls"],
             "videoTitle": "Maja Adena",
             "posterImage": "https://web.lt.dev.welink.sh/sites/default/files/2023-09/Video%201.00_00_00_00.Standbild001.jpg",
             "videoParagraph": "What Are Some Unintended Consequences of Pension Reform?",
             "videoUrl": "https://player.vimeo.com/external/837554695.m3u8?s=0c690ee7961cdfabf925774a536d2376e155d7fe",
+            "tracks": "https://web.lt.dev.welink.sh/sites/default/files/video-short/subtitles/Pahl-Kerstin-Maria-MAIN-20230320.vtt",
             "fullscreenDisabled": true,
             "share": [],
             "additionalInfo": {

package/package.json

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

package/src/assets/sass/sections/_poster.scss

@@ -317,70 +317,3 @@
   }
 }
 
-.plyr__controls {
-  opacity: 1 !important;
-}
-
-
-.plyr__controls {
-  .top-controllers {
-    //position: unset !important;
-    //margin-bottom: auto;
-  }
-
-  .bottom-controller {
-    //height: unset !important;
-    //position: unset !important;
-  }
-}
-
-.plyr__controls .settings-controllers {
-  //padding: 0 !important;
-  //position: unset !important;
-}
-
-.lt-player-orientation--portrait .plyr__progress--wrapper {
-  //position: unset !important;
-}
-
-.lt-player-notification {
-  //position: unset !important;
-  //width: 100% !important;
-  //height: unset !important;
-  //display: unset !important;
-  //padding: 20px 20px 28px 20px;
-}
-
-.lt-player-orientation--portrait .lt-player-notification .lt-player-video-content {
-  //padding: 0 !important;
-}
-
-.lt-player-orientation--portrait .plyr__controls .bottom-controller {
-  //padding: 0 20px 28px 20px !important;
-}
-
-.plyr__controls .bottom-controller .volume-control-enable {
-  //position: absolute !important;
-}
-
-.lt-player-rewind-area {
-  //position: absolute;
-  //left: 0;
-  //width: 50% !important;
-  //top: 0;
-}
-
-.lt-player-forward-area {
-  //position: absolute;
-  //right: 0;
-  //width: 50% !important;
-  //top: 0;
-}
-
-.lt-player-notification .lt-player-video-content {
-  //position: unset !important;
-}
-
-.plyr.plyr--full-ui .plyr--video, .plyr__controls {
-  //justify-content: unset !important;
-}

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

@@ -7,12 +7,17 @@
     &--wrapper {
       width: 100%;
       padding: 0 10px;
+      display: none;
+    }
+
+    &--wrapper-enable {
+      display: block;
     }
   }
 
   &__controls {
     .bottom-controller {
-      display: flex;
+      display: none;
       justify-content: space-between;
       align-items: flex-end;
       padding: 15px 10px;
@@ -226,6 +231,10 @@
         }
       }
     }
+
+    .bottom-controller-enable {
+      display: flex;
+    }
   }
 
   .fade-animation-controllers {

package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss

@@ -28,7 +28,7 @@
 
   .lt-player-video-content {
     text-align: left;
-    display: flex;
+    display: none;
     padding: 0;
     width: 100%;
     user-select: none;
@@ -72,6 +72,10 @@
     }
   }
 
+  .lt-player-video-content-enable {
+    display: flex;
+  }
+
   .poster-paragraph__button {
     background: none;
     box-shadow: none;

package/src/components/LTPlayerUpdate.ts

@@ -12,9 +12,16 @@ export class LTPlayerUpdate {
     }
 
     updatePlayer(config: defaultType) {
+        console.log(config)
         this.updateVideo(config.body.videoUrl, config.body.posterImage);
         this.updateTitle(config.body.videoParagraph);
         this.updateAuthor(config.body.videoTitle);
+        if (config.body.defaultConfig) {
+            //you should check for subtitles, if there arent any, set the src of the track element to "" else take it from this config. I dont know what works and what doesnt.
+            //Have fun, good luck.
+            //Otherwise, im not really sure what happens
+            this.updateSubtitles(config.body.defaultConfig.captions.url);
+        }
         this.updateChapters(config);
         this.player.additionalInfoService.setConfig(config.body.additionalInfo);
         return;
@@ -52,4 +59,9 @@ export class LTPlayerUpdate {
         authorParagraph.textContent = '';
         authorParagraph.textContent = author;
     }
+
+    updateSubtitles(src: string) {
+        const track = document.querySelector('track');
+        console.log(track);
+    }
 }

package/src/components/config/LTPlayerConfig.ts

@@ -6,7 +6,9 @@ export class LTPlayerConfig {
 
     private configData: playerConfigType = {
         version : null,
-        alwaysDisplayControls: false,
+        pinText: false,
+        pinSeekBar: false,
+        pinControls: false,
         embed: false,
         preload: false,
         autoPlay : false,
@@ -95,8 +97,16 @@ export class LTPlayerConfig {
 
     }
 
-    isAlwaysDisplayControls() {
-        return this.configData.alwaysDisplayControls
+    isPinTextControls() {
+        return this.configData.pinText
+    }
+
+    isPinSeekBarControls() {
+        return this.configData.pinSeekBar
+    }
+
+    isPinBottomControls() {
+        return this.configData.pinControls
     }
 
     getObjectFit() {

package/src/components/config/LTPlayerConfigProcessor.ts

@@ -15,8 +15,6 @@ export namespace LTPlayerConfigProcessor {
 
         mapByVersion(name: string, value : any) {
             switch (name) {
-                case 'alwaysDisplayControls':
-                    return value;
                 case 'embed':
                     return Processor.processEmbed(value, this.version);
                 case 'preload':
@@ -57,6 +55,7 @@ export namespace LTPlayerConfigProcessor {
                     }
                 case 'observe':
                     return Processor.processObserve(value, this.version);
+                default: return value;
             }
         }
     }

package/src/components/controls/LTPlayerControls.ts

@@ -14,6 +14,7 @@ export class LTPlayerControls {
     chaptersService : LTPlayerChapters
     desktopEvents: LTPlayerControlsEvents.Desktop;
     mobileEvents: LTPlayerControlsEvents.Mobile;
+    commonEvents: LTPlayerControlsEvents.Common;
 
     /**
      * Generate Player LTPlayerControls to pass in Plyr
@@ -22,6 +23,7 @@ export class LTPlayerControls {
     constructor(templateService: TemplateService) {
         this.settingsControlsManager = new LTPlayerSettingsControlsManager();
         this.templateService = templateService;
+        this.commonEvents = new LTPlayerControlsEvents.Common();
         this.setDesktopEvents();
         this.setMobileEvents();
 

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -2,7 +2,7 @@ import {LTPlayer} from "../LTPlayerType";
 import {plyr} from "../../global/types/ModuleTypes";
 import * as events from "events";
 
-export namespace LTPlayerControlsEvents  {
+export namespace LTPlayerControlsEvents {
 
     export class Common {
 
@@ -10,31 +10,31 @@ export namespace LTPlayerControlsEvents  {
 
             getSelectors(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
-               let selectors = {
-                   playerContainer: instance.plyr.elements.container,
-                   playerControlsContainer: instance.plyr.elements.controls,
-                   forwardArea: instance.plyr.elements.controls.querySelector('.lt-player-forward-area'),
-                   rewindArea: instance.plyr.elements.controls.querySelector('.lt-player-rewind-area'),
-                   forwardAnimation: instance.plyr.elements.controls.querySelector('.lt-player-forward'),
-                   rewindAnimation: instance.plyr.elements.controls.querySelector('.lt-player-rewind'),
-                   forwardAreaBackground: null as Element,
-                   rewindAreaBackground:  null as Element,
-                   forwardAnimationBackground:  null as Element,
-                   rewindAnimationBackground:  null as Element,
-
-               }
-
-               if (instance.playerConfig.getDevice() === 'mobile') {
-                   selectors.forwardAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward-area')
-                   selectors.rewindAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind-area')
-                   selectors.forwardAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward')
-                   selectors.rewindAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind')
-               }
-
-               return selectors
+                let selectors = {
+                    playerContainer: instance.plyr.elements.container,
+                    playerControlsContainer: instance.plyr.elements.controls,
+                    forwardArea: instance.plyr.elements.controls.querySelector('.lt-player-forward-area'),
+                    rewindArea: instance.plyr.elements.controls.querySelector('.lt-player-rewind-area'),
+                    forwardAnimation: instance.plyr.elements.controls.querySelector('.lt-player-forward'),
+                    rewindAnimation: instance.plyr.elements.controls.querySelector('.lt-player-rewind'),
+                    forwardAreaBackground: null as Element,
+                    rewindAreaBackground: null as Element,
+                    forwardAnimationBackground: null as Element,
+                    rewindAnimationBackground: null as Element,
+
+                }
+
+                if (instance.playerConfig.getDevice() === 'mobile') {
+                    selectors.forwardAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward-area')
+                    selectors.rewindAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind-area')
+                    selectors.forwardAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward')
+                    selectors.rewindAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind')
+                }
+
+                return selectors
             },
 
-            updateCurrentTime(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType ,time: number) {
+            updateCurrentTime(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, time: number) {
                 if (Math.sign(time)) {
                     instance.plyr.currentTime += time;
                 } else {
@@ -44,7 +44,7 @@ export namespace LTPlayerControlsEvents  {
 
             playPause(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
-                const icons = instance.iconService.getIconsByComponent('playPause') as {play : string, pause: string};
+                const icons = instance.iconService.getIconsByComponent('playPause') as { play: string, pause: string };
                 const playerStateInfo = instance.plyr.elements.controls.querySelector('.player-state');
                 const iconSelector: HTMLImageElement = playerStateInfo.querySelector('.player-state__icon');
 
@@ -80,7 +80,6 @@ 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;
@@ -200,42 +199,129 @@ export namespace LTPlayerControlsEvents  {
                     captions.classList.add('d-none');
                 }
             }
+        }
+
+        showHideControls = {
+            showHideText(visible: boolean, controls: HTMLElement) {
+                const textControlsElement = controls.querySelector('.lt-player-video-content');
+
+                if (textControlsElement) {
+                    if (visible) {
+                        if (!textControlsElement.classList.contains('lt-player-video-content-enable')) {
+                            textControlsElement.classList.add('lt-player-video-content-enable')
+                        }
+                    } else {
+                        textControlsElement.classList.remove('lt-player-video-content-enable')
+                    }
+                }
+            },
+
+            showHideSeekBar(visible: boolean, controls: HTMLElement) {
+                const seekBarControlsElement = controls.querySelector('.plyr__progress--wrapper');
+
+                if (seekBarControlsElement) {
+                    if (visible) {
+                        if (!seekBarControlsElement.classList.contains('plyr__progress--wrapper-enable')) {
+                            seekBarControlsElement.classList.add('plyr__progress--wrapper-enable')
+                        }
+                    } else {
+                        seekBarControlsElement.classList.remove('plyr__progress--wrapper-enable')
+                    }
+                }
+            },
 
+            showHideBottomControls(visible: boolean, controls: HTMLElement) {
+                const bottomControlsElement = controls.querySelector('.bottom-controller');
+
+                if (bottomControlsElement) {
+                    if (visible) {
+                        if (!bottomControlsElement.classList.contains('bottom-controller-enable')) {
+                            bottomControlsElement.classList.add('bottom-controller-enable')
+                        }
+                    } else {
+                        bottomControlsElement.classList.remove('bottom-controller-enable')
+                    }
+                }
+            },
 
+            showHideOnPause(visible: boolean, controls: HTMLElement) {
+                this.showHideBottomControls(visible, controls);
+                this.showHideSeekBar(visible, controls);
+                this.showHideBottomControls(visible, controls);
+            }
         }
     }
 
     export class Desktop {
 
         common: Common
+
         constructor() {
             this.common = new Common();
         }
+
         titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            this.common.checkTitleBreakWord(instance)
+            return;
+            /*Remove title break*/
+            // this.common.checkTitleBreakWord(instance);
+            /**/
         }
 
 
         showHide(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
             const controls = instance.plyr.elements.controls;
-            const eventsInstance = this;
+            const commonInstance = this.common;
+            controls.classList.add('plyr__controls-enable');
 
-            if (instance.playerConfig.isAlwaysDisplayControls()) {
-                controls.classList.add('plyr__controls-enable');
-                return;
-            }
+
+            commonInstance.showHideControls.showHideText(true, controls);
+            commonInstance.showHideControls.showHideSeekBar(true, controls);
+            commonInstance.showHideControls.showHideBottomControls(true, controls);
 
             controls.addEventListener('mouseover', function () {
-                controls.classList.add('plyr__controls-enable');
-                eventsInstance.common.subtitlesHide(instance);
+
+                if (instance.plyr.paused) {
+                    commonInstance.showHideControls.showHideOnPause(true, controls);
+                    return;
+                }
+
+                if (!instance.playerConfig.isPinTextControls()) {
+                    commonInstance.showHideControls.showHideText(true, controls);
+                }
+
+                if (!instance.playerConfig.isPinSeekBarControls()) {
+                    commonInstance.showHideControls.showHideSeekBar(true, controls);
+                }
+
+                if (!instance.playerConfig.isPinBottomControls()) {
+                    commonInstance.showHideControls.showHideBottomControls(true, controls);
+                }
+
             })
 
 
             controls.addEventListener('mouseleave', function () {
-                if (!controls.classList.contains('plyr__controls-enable-settings')) {
-                    controls.classList.remove('plyr__controls-enable');
-                    setTimeout(()=>{
-                        eventsInstance.common.subtitlesShow(instance);
+
+                if (instance.plyr.paused) {
+                    commonInstance.showHideControls.showHideOnPause(true, controls);
+                    return;
+                }
+
+                if (!instance.playerConfig.isPinTextControls()) {
+                    setTimeout(() => {
+                        commonInstance.showHideControls.showHideText(false, controls);
+                    }, 100)
+                }
+
+                if (!instance.playerConfig.isPinSeekBarControls()) {
+                    setTimeout(() => {
+                        commonInstance.showHideControls.showHideSeekBar(false, controls);
+
+                    }, 100)
+                }
+                if (!instance.playerConfig.isPinBottomControls()) {
+                    setTimeout(() => {
+                        commonInstance.showHideControls.showHideBottomControls(false, controls);
                     }, 100)
                 }
             })
@@ -254,7 +340,7 @@ export namespace LTPlayerControlsEvents  {
             }
         }
 
-        fullscreenIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string){
+        fullscreenIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
 
             let playerControls = instance.plyr.elements.controls;
             const fullScreenButtonContainer = playerControls.querySelector('.fullscreen-custom-control');
@@ -277,8 +363,8 @@ export namespace LTPlayerControlsEvents  {
             let common = this.common;
             switch (type) {
                 case 'timeupdate':
-                   this.common.playPauseIconTimeUpdate(instance);
-               break
+                    this.common.playPauseIconTimeUpdate(instance);
+                    break
                 case 'ready':
                     const playButton = instance.plyr.elements.controls.querySelector('.play-button');
                     if (playButton) {
@@ -401,13 +487,13 @@ export namespace LTPlayerControlsEvents  {
             let playerControlsContainer = instance.plyr.elements.controls;
 
 
-            const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
+            const volume: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
             const openVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button');
             const muteUnmuteVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button-close');
             const volumeControl: HTMLElement = playerControlsContainer.querySelector('.volume_control__background__area');
             const volumeBackground: HTMLElement = playerControlsContainer.querySelector('.volume_control__background');
             const volumeRangeControl: HTMLElement = playerControlsContainer.querySelector('.volume_control__background__area__range');
-            const rangeVolumesItems: NodeListOf<HTMLElement>= volume.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
+            const rangeVolumesItems: NodeListOf<HTMLElement> = volume.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
 
             openVolumeButton.addEventListener('mouseover', (event) => {
                 volumeControl.classList.remove('d-none');
@@ -456,10 +542,10 @@ export namespace LTPlayerControlsEvents  {
                 const volumeBody: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
                 const volumeIconsManger = (item: HTMLElement) => {
 
-                    const rangeVolumesItems: NodeListOf<HTMLElement>= volumeBody.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
+                    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){
+                        if (item.dataset.rangeValue === value.dataset.rangeValue) {
                             value.classList.remove('d-none');
                         } else {
                             value.classList.add('d-none')
@@ -495,12 +581,12 @@ export namespace LTPlayerControlsEvents  {
                     return;
                 }
 
-                const getClosest = (curr: any, prev: any,  range: any) => {
+                const getClosest = (curr: any, prev: any, range: any) => {
                     return (Math.abs(curr - range) < Math.abs(prev - range) ? curr : prev);
                 }
 
 
-                let closest = itemsDataSet.reduce(function(prev, curr) {
+                let closest = itemsDataSet.reduce(function (prev, curr) {
                     return getClosest(curr, prev, (volumeRangeControl as HTMLInputElement).value);
                 });
                 volumeIcons(closest);
@@ -563,6 +649,7 @@ export namespace LTPlayerControlsEvents  {
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
             const eventsInstance = this;
+            const commonInstance = this.common;
 
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
@@ -586,33 +673,65 @@ export namespace LTPlayerControlsEvents  {
                 clearTimeout(this.controlsTimeOut);
             }
 
+            commonInstance.showHideControls.showHideText(true, playerControlsContainer);
+            commonInstance.showHideControls.showHideSeekBar(true, playerControlsContainer);
+            commonInstance.showHideControls.showHideBottomControls(true, playerControlsContainer);
+
 
-            if (!instance.playerConfig.isAlwaysDisplayControls()) {
-                this.hideControls(instance, false);
+            if (instance.plyr.paused) {
+                commonInstance.showHideControls.showHideOnPause(true, playerControlsContainer);
                 return;
             }
 
-
+            this.hideControls(instance, false);
         }
 
         hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, now: boolean) {
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
             const eventsInstance = this;
+            const commonInstance = this.common;
             let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
+            const showHideControls = () => {
+                if (!instance.playerConfig.isPinTextControls()) {
+                    commonInstance.showHideControls.showHideText(false, playerControlsContainer);
+                }
+
+                if (!instance.playerConfig.isPinSeekBarControls()) {
+                    commonInstance.showHideControls.showHideSeekBar(false, playerControlsContainer);
+                }
+                if (!instance.playerConfig.isPinBottomControls()) {
+                    commonInstance.showHideControls.showHideBottomControls(false, playerControlsContainer);
+                }
+            }
+
             if (!playerControlsContainer.classList.contains('plyr__controls-enable-addInfo')) {
 
                 if (now) {
-                    playerControlsContainer.classList.remove('plyr__controls-enable');
-                    playerContainer.classList.add('plyr--hide-controls');
+
+                    if (instance.plyr.paused) {
+                        commonInstance.showHideControls.showHideOnPause(true, playerControlsContainer);
+                        return;
+                    }
+
+                    showHideControls();
+                    // playerControlsContainer.classList.remove('plyr__controls-enable');
+                    // playerContainer.classList.add('plyr--hide-controls');
                     if (!playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
                         playerControlsBackground.classList.remove('d-none');
                     }
                 } else {
                     this.controlsTimeOut = setTimeout(() => {
-                        playerControlsContainer.classList.remove('plyr__controls-enable');
-                        playerContainer.classList.add('plyr--hide-controls');
+                        // playerControlsContainer.classList.remove('plyr__controls-enable');
+                        // playerContainer.classList.add('plyr--hide-controls');
+
+                        if (instance.plyr.paused) {
+                            commonInstance.showHideControls.showHideOnPause(true, playerControlsContainer);
+                            return;
+                        }
+
+                        showHideControls();
                         if (playerControlsBackground && !playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
                             playerControlsBackground.classList.remove('d-none');
                         }
@@ -667,9 +786,7 @@ export namespace LTPlayerControlsEvents  {
             const selectors = common.backwardRewind.getSelectors(instance);
 
             const singleTapAction = () => {
-                if (!instance.playerConfig.isAlwaysDisplayControls()) {
-                    instance.playerControl.mobileEvents.hideControls(instance, true);
-                }
+                instance.playerControl.mobileEvents.hideControls(instance, true);
             }
 
             if (selectors.forwardArea) {