@latest-thinking/lt-player 1.0.7-e → 1.0.7-g

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.7-e",
+  "version": "1.0.7-g",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",

package/src/assets/sass/app.scss

@@ -47,6 +47,10 @@ body {
   visibility: hidden;
 }
 
+.overflow-hidden-body-important {
+  overflow: hidden !important;
+}
+
 .d-none {
   display: none !important;
 }

package/src/assets/sass/components/_modal.scss

@@ -119,7 +119,6 @@
     &__modal-content {
       color: $default-lt-button-color;
       text-align: left;
-      padding: 16px;
       overflow: auto;
       font-family: $lt-font-family-base;
 
@@ -212,13 +211,13 @@
     border-radius: 0;
     font-family: $lt-font-family-base;
     width: 100%;
-    max-height: 540px;
+    max-height: calc(100% - 50px);
     overflow: auto;
     max-width: 620px;
-    padding: 40px 0;
 
-    span {
-      margin-right: 40px;
+    @media screen and (max-width: 620px) {
+      max-height: unset;
+      height: 100%;
     }
 
     .modal-flex {
@@ -305,12 +304,15 @@
   }
 
   &__modal-body {
-    padding: 0 40px;
+    padding: 40px;
+
+    @media screen and (max-width: 620px) {
+      padding: 20px;
+    }
   }
 
   &__close-button {
     z-index: 20;
-    float: right;
     width: 24px;
     font-size: $lt-player-font-size-xxxl2 !important;
     line-height: 1;
@@ -321,13 +323,14 @@
     background-color: transparent;
     color: $default-lt-button-color;
     transition: color 0.12s ease-in-out;
-    margin-bottom: 16px;
-    position: sticky;
-    top: 0;
+    position: absolute;
+    top: 40px;
+    right: 40px;
     margin-top: 0 !important;
 
-    span {
-      margin-top: 0;
+    @media screen and (max-width: 620px) {
+      top: 20px;
+      right: 20px;
     }
   }
 

package/src/assets/sass/core/_player.scss

@@ -11,9 +11,19 @@
       border-radius: 0 0 0 32px !important;
       background: $default-lt-player-black !important;
     }
+
+    video {
+      background: transparent !important;
+    }
   }
 }
 
+// THIS MUST STAY - DO NOT DELETE
+.poster-lt-player-share,
+.mini-player-control {
+  visibility: hidden;
+}
+
 .plyr--video {
   background: transparent !important;
 }

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

@@ -174,6 +174,7 @@
                 margin-top: 12px;
                 margin-bottom: 20px;
                 width: 100%;
+                text-decoration: underline;
               }
             }
 

package/src/components/addInfo/LTPlayerAddInfoDesktop.ts

@@ -76,6 +76,7 @@ export class LTPlayerAddInfoDesktop {
 
                 if (modal) {
                     modal.classList.add('player-lt__show-modal');
+                    document.body.classList.add('overflow-hidden-body-important');
                 }
 
                 window.Player.players.forEach(item => {
@@ -97,6 +98,7 @@ export class LTPlayerAddInfoDesktop {
                     let target = event.target as HTMLElement;
                     if (target.classList.contains('player-lt__show-modal') || target.classList.contains('player-lt__close-button')) {
                         modal.classList.remove('player-lt__show-modal');
+                        document.body.classList.remove('overflow-hidden-body-important');
                         document.querySelectorAll(".player-lt__modal").forEach(el => el.remove());
 
                         window.Player.players.forEach(item => {

package/src/components/addInfo/LTPlayerAddInfoMobile.ts

@@ -20,9 +20,8 @@ export class LTPlayerAddInfoMobile {
 
             if (typeof info === 'object') {
                 modalTemplate = controller.templateService.getAdditionalInfo({
-                    mobile : true,
                     modal : true,
-                    [controller.device] : true,
+                    mobile : true,
                     object_data : true,
                     [key] : info
                 })
@@ -31,12 +30,10 @@ export class LTPlayerAddInfoMobile {
                     mobile : true,
                     modal : true,
                     data : info,
-                    [controller.device] : true
                 })
             }
-
             const modal = document.createElement('div');
-            modal.classList.add('lt-player-mobile-add-info-modal')
+            modal.classList.add('lt-player-mobile-add-info-modal');
             modal.innerHTML = modalTemplate;
 
             const body = document.querySelector('body');
@@ -57,7 +54,6 @@ export class LTPlayerAddInfoMobile {
                     let targetModal = button.dataset.ltTarget;
                     let data = instance.additionalData;
 
-
                     if (data[targetModal] !== undefined) {
                         createInformationModal(data[targetModal], targetModal)
                     }

package/src/views/additionalInfo.handlebars

@@ -1,5 +1,16 @@
 {{#modal}}
     {{#mobile}}
+      {{#data}}
+        <div class="player-lt__modal__mobile__background"></div>
+          <div class="player-lt__modal__mobile">
+            <div class="player-lt__mobile__modal-header">
+              <span class="line-button"></span>
+            </div>
+            <div class="player-lt__mobile__modal-content">
+              {{{data}}}
+            </div>
+          </div>
+      {{/data}}
         {{#object_data}}
             <div class="player-lt__modal__mobile__background"></div>
             <div class="player-lt__modal__mobile">
@@ -28,7 +39,6 @@
             </div>
             </div>
         {{/object_data}}
-
     {{/mobile}}
     {{#desktop}}
         {{#object_data}}