@latest-thinking/lt-player 1.0.4-q → 1.0.5-a

package/package.json

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

package/src/assets/sass/sections/controllers/_mini-player.scss

@@ -3,11 +3,35 @@
     width: 100%;
     height: 100%;
   }
+
+  @media (min-width: 266px) {
+    .lt-player-mini-player-observe {
+      height: 150px;
+    }
+  }
+  @media (min-width: 533px) {
+    .lt-player-mini-player-observe {
+      height: 200px;
+    }
+  }
+  @media (min-width: 800px) {
+    .lt-player-mini-player-observe {
+      height: 400px;
+    }
+  }
+  @media (min-width: 1067px) {
+    .lt-player-mini-player-observe {
+      height: 600px;
+    }
+  }
+
+
+
+
+
   .lt-player-mini-enable {
     position: fixed;
     z-index: 10000;
-    max-width: 160px;
-    max-height: 290px;
     bottom: 20px;
     right: 20px;
     opacity: 1;
@@ -19,6 +43,16 @@
     }
   }
 
+  .lt-player-mini-2 {
+    max-width: 344px;
+    max-height: 194px;
+  }
+
+  .lt-player-mini-1 {
+    max-width: 160px;
+    max-height: 290px;
+  }
+
   .lt-player-mini-player-background {
     z-index: 100;
 

package/src/components/LTPlayerDevMethode.ts

@@ -8,9 +8,11 @@ export namespace LTPlayerDevMethode {
     export class Player  {
 
         player: Plyr
+        instance : LTPlayer.PortraitType | LTPlayer.LandscapeType
 
-        constructor(player: Plyr) {
-            this.player = player;
+        constructor(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+            this.player = instance.plyr;
+            this.instance = instance
         }
 
        play() {
@@ -77,7 +79,9 @@ export namespace LTPlayerDevMethode {
                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')
+                   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) {
@@ -88,6 +92,14 @@ export namespace LTPlayerDevMethode {
                    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')
                }
@@ -106,6 +118,14 @@ export namespace LTPlayerDevMethode {
            exitFullScreen();
 
        }
+
+        enterMiniPlayer() {
+            this.instance.miniPlayer.enterMiniPlayer();
+       }
+
+       exitMiniPlayer() {
+           this.instance.miniPlayer.exitMiniPlayer(this.player);
+       }
     }
 
     export class Preload {

package/src/components/LTPlayerType.ts

@@ -138,7 +138,7 @@ export namespace LTPlayer {
 
             this.plyr = player;
 
-            this.devMethodePlayer = new LTPlayerDevMethode.Player(player);
+            this.devMethodePlayer = new LTPlayerDevMethode.Player(this);
 
             this.posterManager.init(this);
 
@@ -147,7 +147,7 @@ export namespace LTPlayer {
             }
 
             if (this.playerConfig.getDevice() !== 'mobile') {
-                this.miniPlayer.init(player, this.templateService, this.iconService);
+                this.miniPlayer.init(player, this.templateService, this.iconService, this.playerConfig.getPlayerType(), this);
             }
         }
 
@@ -167,6 +167,13 @@ export namespace LTPlayer {
             return this.devMethodePreload;
         }
 
+        enterMiniPlayer() {
+            return this.devMethodePlayer.enterMiniPlayer()
+        }
+        exitMiniPlayer() {
+            return this.devMethodePlayer.exitMiniPlayer()
+        }
+
         destruct() {
             let _this = this;
 
@@ -257,7 +264,7 @@ export namespace LTPlayer {
 
             this.plyr = player;
 
-            this.devMethodePlayer = new LTPlayerDevMethode.Player(player);
+            this.devMethodePlayer = new LTPlayerDevMethode.Player(this);
 
             this.posterManager.init(this);
 
@@ -266,7 +273,7 @@ export namespace LTPlayer {
             }
 
             if (this.playerConfig.getDevice() !== 'mobile') {
-                this.miniPlayer.init(player, this.templateService, this.iconService);
+                this.miniPlayer.init(player, this.templateService, this.iconService, this.playerConfig.getPlayerType(), this);
             }
         }
 
@@ -295,7 +302,43 @@ export namespace LTPlayer {
             return this.plyr;
         }
 
+        play() {
+            this.devMethodePlayer.play();
+        }
+
+        pause() {
+            this.devMethodePlayer.pause();
+        }
+
+        stop() {
+            this.devMethodePlayer.stop();
+        }
+
+        preload() {
+            return this.devMethodePreload;
+        }
+
+        enterMiniPlayer() {
+            return this.devMethodePlayer.enterMiniPlayer()
+        }
+
+        exitMiniPlayer() {
+            return this.devMethodePlayer.exitMiniPlayer()
+        }
+
         destruct() {
+            let _this = this;
+
+            return new Promise((resolve) => {
+                _this.additionalInfoService.remove(this);
+
+                _this.additionalInfoService = null;
+
+                this.plyr.destroy(() => {
+                    _this = undefined;
+                    resolve(true);
+                })
+            })
         }
         setDesktopEvents() {
             this.desktopEvents = new LTPlayerEvents.Desktop();

package/src/components/config/LTPlayerConfig.ts

@@ -78,6 +78,14 @@ export class LTPlayerConfig {
         return this.configData.observe
     }
 
+    isObserveHeight() {
+        return this.configData.observe.height;
+    }
+
+    isObserveWidth() {
+        return this.configData.observe.width;
+    }
+
     getDimensions() {
         return this.configData.dimensions
     }

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -134,14 +134,27 @@ export namespace LTPlayerControlsEvents  {
             const playIcon = playerContainer.querySelector('.bottom-controller__play-icon');
             const pauseIcon = playerContainer.querySelector('.bottom-controller__pause-icon');
 
-
-            if (player.playing) {
-                playIcon.classList.add('d-none');
-                pauseIcon.classList.remove('d-none');
+            if (player.isEmbed) {
+                player.embed.getPaused().then((paused: any) => {
+                    if (paused) {
+                        pauseIcon.classList.add('d-none');
+                        playIcon.classList.remove('d-none');
+                    } else {
+                        playIcon.classList.add('d-none');
+                        pauseIcon.classList.remove('d-none');
+                    }
+                })
             } else {
-                pauseIcon.classList.add('d-none');
-                playIcon.classList.remove('d-none');
+                if (player.playing) {
+                    playIcon.classList.add('d-none');
+                    pauseIcon.classList.remove('d-none');
+                } else {
+                    pauseIcon.classList.add('d-none');
+                    playIcon.classList.remove('d-none');
+                }
             }
+
+
         }
     }
 

package/src/components/controls/LTPlayerMini.ts

@@ -17,6 +17,10 @@ export class LTPlayerMini {
     templateService: TemplateService
     private iconService: IconsService;
 
+    playerType : string
+
+    instance : LTPlayer.PortraitType | LTPlayer.LandscapeType
+
     constructor() {
     }
 
@@ -25,14 +29,30 @@ export class LTPlayerMini {
      * @param player
      * @param templateService
      * @param iconService
+     * @param playerType
+     * @param instance
      */
-    init(player: Plyr, templateService: TemplateService, iconService: IconsService) {
+    init(player: Plyr, templateService: TemplateService, iconService: IconsService, playerType : string, instance : LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+        this.instance = instance;
         this.templateService = templateService;
         this.iconService = iconService;
         this.player = player;
+        this.playerType = playerType;
         this.setup();
     }
 
+    enterMiniPlayer() {
+        this.playerContainer.width = this.player.elements.wrapper.getBoundingClientRect().width;
+        this.playerContainer.height = this.player.elements.wrapper.getBoundingClientRect().height;
+        this.player.elements.wrapper.classList.add('lt-player-mini-enable');
+        this.player.elements.wrapper.classList.add(`lt-player-mini-${this.playerType}`)
+        this.setBackground(this.player.elements.wrapper);
+        this.addMouseHoverControllers();
+        this.addPlayPauseEvents();
+        this.setSeekBar();
+
+    }
+
     /**
      * Setup mini player
      * @private
@@ -52,6 +72,7 @@ export class LTPlayerMini {
                 button.addEventListener('click', function (event) {
                     event.preventDefault();
                     playerWrapper.classList.add('lt-player-mini-enable');
+                    playerWrapper.classList.add(`lt-player-mini-${_this.playerType}`)
                     _this.setBackground(playerWrapper);
                     _this.addMouseHoverControllers();
                     _this.addPlayPauseEvents();
@@ -96,7 +117,19 @@ export class LTPlayerMini {
      * @param playerWrapper
      */
     private setBackground(playerWrapper: HTMLElement) {
-        const background = this.templateService.getBackGroundTemplate({logo : this.iconService.getLogo()});
+
+        let classObserve = false;
+
+        if (this.instance.playerConfig.getObserve()) {
+            if (this.instance.playerConfig.isObserveHeight() !== undefined && !this.instance.playerConfig.isObserveHeight()) {
+                classObserve = true;
+            }
+        } else {
+            classObserve = true
+        }
+
+        const background = this.templateService.getBackGroundTemplate({logo : this.iconService.getLogo(), classObserve : (classObserve) ? 'lt-player-mini-player-observe' : ""});
+
         const controls = this.templateService.getControlsMiniPlayer({
             mini_player: 'true',
             icons:  this.iconService.getIconsByComponent('controls'),
@@ -106,6 +139,12 @@ export class LTPlayerMini {
         playerWrapper.children[0].insertAdjacentHTML("afterend", controls);
     }
 
+
+
+    test() {
+
+    }
+
     /**
      * Add mini player mouse event
      * @private
@@ -178,6 +217,7 @@ export class LTPlayerMini {
     exitMiniPlayer(player: Plyr) {
         const playerContainer = player.elements.container;
         const exit = playerContainer.querySelector('.lt-player-mini-player-controls__exit');
+        let _this = this;
 
         if (!exit) {
             return
@@ -187,7 +227,9 @@ export class LTPlayerMini {
             event.preventDefault();
             playerContainer.querySelector('.lt-player-mini-player-controls').remove();
             playerContainer.querySelector('.lt-player-mini-player-background').remove();
-            playerContainer.querySelector('.lt-player-mini-enable').classList.remove('lt-player-mini-enable')
+            playerContainer.querySelector('.lt-player-mini-enable').classList.remove(`lt-player-mini-${_this.playerType}`)
+            playerContainer.querySelector('.lt-player-mini-enable').classList.remove('lt-player-mini-enable');
+
         })
     }
 

package/src/components/events/LTPlayer.ts

@@ -27,10 +27,14 @@ export namespace LTPlayerEvents {
                         }
 
                         const miniPlayerEnable = playerContainer.querySelector('.lt-player-mini-enable');
+                        const miniPlayerEnableSize = playerContainer.querySelector(`.lt-player-mini-${player.playerConfig.getPlayerType()}`);
 
                         if (miniPlayerEnable) {
                             miniPlayerEnable.classList.remove('lt-player-mini-enable');
                         }
+                        if (miniPlayerEnableSize) {
+                            miniPlayerEnableSize.classList.remove(`.lt-player-mini-${player.playerConfig.getPlayerType()}`);
+                        }
 
                     })
 
@@ -134,7 +138,8 @@ export namespace LTPlayerEvents {
                 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')
+                    enable: playerContainer.querySelector('.lt-player-mini-enable'),
+                    size: playerContainer.querySelector(`.lt-player-mini-${instance.playerConfig.getPlayerType()}`)
                 };
 
                 if (miniPlayer.controls) {
@@ -145,6 +150,10 @@ export namespace LTPlayerEvents {
                     miniPlayer.background.remove();
                 }
 
+                if (miniPlayer.size) {
+                    miniPlayer.size.classList.remove(`lt-player-mini-${instance.playerConfig.getPlayerType()}`)
+                }
+
                 if (miniPlayer.enable) {
                     miniPlayer.enable.classList.remove('lt-player-mini-enable')
                 }

package/src/components/events/LTPlayerDesktop.ts

@@ -147,8 +147,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
             common.timeUpdate(event);
             if (instance.playerConfig.getPreload().isActive) {
                 common.preloadPoster.timeUpdate(instance, 'event');
-                instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
             }
+            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
     }
 

package/src/components/poster/LTPlayerPosterEvents.ts

@@ -88,6 +88,7 @@ export namespace LTPlayerPosterEvents {
                 button.addEventListener('click', function LTPlayerPosterButtons(event) {
                     event.preventDefault();
                     instance.playerControl.desktopEvents.titleLineBreak(instance);
+                    instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
                     common.poster.reset(instance);
                 })
             });
@@ -109,8 +110,10 @@ export namespace LTPlayerPosterEvents {
 
                 if (mobileEvent) {
                     mobileEvent.on('singletap', function LTPlayerMobilePosterButtons() {
+
                         instance.playerControl.desktopEvents.titleLineBreak(instance);
 
+                        instance.playerControl.mobileEvents.playPauseIcon(instance, 'timeupdate');
                         common.poster.reset(instance);
 
                         playerContainer.classList.remove('plyr__poster-enabled');

package/src/views/background.handlebars

@@ -1,4 +1,4 @@
-<div class="lt-player-mini-player-background">
+<div class="lt-player-mini-player-background {{classObserve}}">
     <div class="logo">
         <img src="{{logo}}" alt="">
     </div>