@latest-thinking/lt-player 1.0.5-a → 1.0.5-c

package/package.json

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

package/src/assets/sass/sections/_additional-info.scss

@@ -30,7 +30,7 @@
     align-items: end;
     display: flex;
     flex-direction: column;
-    justify-content: end;
+    justify-content: flex-end;
     gap: 2rem;
     background: transparent;
     padding-bottom: 1.6rem;
@@ -47,7 +47,7 @@
     align-items: end;
     display: flex;
     flex-direction: column;
-    justify-content: end;
+    justify-content: flex-end;
     gap: 1rem;
     background: transparent;
     padding-bottom: 1rem;

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

@@ -46,11 +46,11 @@
         }
 
         &__previous-chapter-view {
-          justify-content: end;
+          justify-content: flex-end;
         }
 
         &__next-chapter-view {
-          justify-content: start;
+          justify-content: flex-start;
         }
 
         &__next-chapter-view,

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

@@ -4,30 +4,11 @@
     height: 100%;
   }
 
-  @media (min-width: 266px) {
-    .lt-player-mini-player-observe {
-      height: 150px;
-    }
-  }
-  @media (min-width: 533px) {
-    .lt-player-mini-player-observe {
-      height: 200px;
-    }
+  .lt-player-mini-player-observe {
+    min-height: 200px;
+    max-height: 600px;
+    height: auto;
   }
-  @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;

package/src/components/controls/LTPlayerMini.ts

@@ -21,6 +21,8 @@ export class LTPlayerMini {
 
     instance : LTPlayer.PortraitType | LTPlayer.LandscapeType
 
+    observe : ResizeObserver
+
     constructor() {
     }
 
@@ -63,14 +65,13 @@ export class LTPlayerMini {
         player.on('ready', function () {
             const playerContainer = player.elements.container;
             const playerWrapper = player.elements.wrapper;
-            _this.playerContainer.width = playerWrapper.getBoundingClientRect().width;
-            _this.playerContainer.height = playerWrapper.getBoundingClientRect().height;
-
             const button = playerContainer.querySelector('.mini-player-control');
 
             if (button) {
                 button.addEventListener('click', function (event) {
                     event.preventDefault();
+                    _this.playerContainer.width = playerContainer.getBoundingClientRect().width;
+                    _this.playerContainer.height = playerContainer.getBoundingClientRect().height;
                     playerWrapper.classList.add('lt-player-mini-enable');
                     playerWrapper.classList.add(`lt-player-mini-${_this.playerType}`)
                     _this.setBackground(playerWrapper);
@@ -118,17 +119,7 @@ export class LTPlayerMini {
      */
     private setBackground(playerWrapper: HTMLElement) {
 
-        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 background = this.templateService.getBackGroundTemplate({logo : this.iconService.getLogo()});
 
         const controls = this.templateService.getControlsMiniPlayer({
             mini_player: 'true',
@@ -137,12 +128,48 @@ export class LTPlayerMini {
 
         playerWrapper.insertAdjacentHTML("afterend", background);
         playerWrapper.children[0].insertAdjacentHTML("afterend", controls);
-    }
 
+        if (this.instance.playerConfig.getObserve()) {
+            if (this.instance.playerConfig.isObserveHeight() !== undefined && !this.instance.playerConfig.isObserveHeight()) {
+                this.setObserveBackground();
+            }
+        } else {
+            this.setObserveBackground();
+        }
+
+    }
 
+    setObserveBackground() {
+
+        const miniPlayerBackground : HTMLElement = this.player.elements.container.querySelector('.lt-player-mini-player-background');
+
+        this.observe = new ResizeObserver(response => {
+            let documentWidth = response[0].contentRect.width;
+            let miniPlayerBackgroundWidth = miniPlayerBackground.getBoundingClientRect().width;
+            if (documentWidth >= miniPlayerBackgroundWidth) {
+                if (documentWidth > this.playerContainer.width) {
+                    if (this.player.elements.controls.getBoundingClientRect().height === 103) {
+                        miniPlayerBackground.style.width  = `${this.playerContainer.width}px`;
+                        miniPlayerBackground.style.height = `${this.playerContainer.height}px`;
+                    } else {
+                        miniPlayerBackground.style.width = `${this.player.elements.controls.getBoundingClientRect().width}px`;
+                        miniPlayerBackground.style.height = `${this.player.elements.controls.getBoundingClientRect().height}px`;
+                    }
+                } else {
+                    miniPlayerBackground.style.width = `${this.playerContainer.width}px`;
+                    let calc = this.playerContainer.height + (response[0].contentRect.width - this.playerContainer.width);
+                    miniPlayerBackground.style.height = (calc > 100) ? `${calc}px` : this.playerContainer.height;
+                }
+            }
+            if (documentWidth < miniPlayerBackgroundWidth) {
+                miniPlayerBackground.style.width = `${documentWidth}px`;
+                let calc = this.playerContainer.height - (this.playerContainer.width - response[0].contentRect.width);
+                miniPlayerBackground.style.height = (calc > 100) ? `${calc}px` : this.playerContainer.height;
+            }
 
-    test() {
+        });
 
+        this.observe.observe(document.body);
     }
 
     /**
@@ -229,6 +256,7 @@ export class LTPlayerMini {
             playerContainer.querySelector('.lt-player-mini-player-background').remove();
             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');
+            _this.observe.disconnect();
 
         })
     }