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

package/package.json

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

package/src/assets/sass/abstracts/_mixins.scss

@@ -5,6 +5,12 @@
   transform: translate(-#{$top}, -#{$top});
 }
 
+@mixin flex-position($flex, $content, $align) {
+  display: $flex;
+  justify-content: $content;
+  align-items: $align;
+}
+
 @mixin yellow-btn {
   color: $default-lt-button-color;
   background-color: $default_color_player;

package/src/assets/sass/app.scss

@@ -14,7 +14,11 @@
 // 1. Basics
 //---------------------------------------------
 
-
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 //---------------------------------------------
 // 2. Resetting properties
@@ -24,6 +28,18 @@ body {
   margin: 0;
 }
 
+.container-text-portrait-player {
+  display: flex;
+  max-width: 800px;
+  max-height: 800px;
+  margin-bottom: 3rem;
+}
+
+.container-text-landscape-player {
+  display: flex;
+  max-width: 1000px;
+}
+
 //---------------------------------------------
 // 3. General
 //---------------------------------------------

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

@@ -120,6 +120,7 @@
       color: $default-lt-button-color;
       text-align: left;
       overflow: auto;
+      padding: 20px;
       font-family: $lt-font-family-base;
 
       button,
@@ -169,10 +170,10 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    opacity: 0;
-    visibility: hidden;
-    transform: scale(1.1);
-    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
+    //opacity: 0;
+    //visibility: hidden;
+    //transform: scale(1.1);
+    //transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
 
     &__mobile {
       position: absolute;
@@ -217,7 +218,12 @@
 
     @media screen and (max-width: 620px) {
       max-height: unset;
+      width: auto;
       height: 100%;
+      position: unset;
+      transform: unset;
+      border: 1px solid $default-lt-span-color;
+      border-radius: 0 0 0 30px;
     }
 
     .modal-flex {
@@ -339,9 +345,9 @@
   }
 
   &__show-modal {
-    opacity: 1;
-    visibility: visible;
-    transform: scale(1.0);
-    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
+    //opacity: 1;
+    //visibility: visible;
+    //transform: scale(1.0);
+    //transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
   }
 }

package/src/services/ResizeService.ts

@@ -212,34 +212,37 @@ export class ResizeService {
             }
         }
 
-            if (containerWidth >= 380) {
+            // if (containerWidth >= 380) {
+            //
+            //     if (this.addInfoInSide && (containerWidth + 70 <= 380)) {
+            //         return;
+            //     }
+            //
+            //     if (this.addInfoOutSide) {
+            //         return;
+            //     }
+            //
+            //     this.addInfoOutSide = true;
+            //     this.addInfoInSide = false;
+            //
+            //     createAddInfoButtonsOutSide();
+            // } else {
+            //
+            //     if (this.addInfoOutSide && (containerWidth + 70 >= 380)) {
+            //         return;
+            //     }
+            //
+            //     if (this.addInfoInSide) {
+            //         return;
+            //     }
+            //
+            //     this.addInfoInSide = true;
+            //     this.addInfoOutSide = false;
+            //     createAddInfoButtonsInSide();
+            // }
+
+        createAddInfoButtonsInSide();
 
-                if (this.addInfoInSide && (containerWidth + 70 <= 380)) {
-                    return;
-                }
-
-                if (this.addInfoOutSide) {
-                    return;
-                }
-
-                this.addInfoOutSide = true;
-                this.addInfoInSide = false;
-
-                createAddInfoButtonsOutSide();
-            } else {
-
-                if (this.addInfoOutSide && (containerWidth + 70 >= 380)) {
-                    return;
-                }
-
-                if (this.addInfoInSide) {
-                    return;
-                }
-
-                this.addInfoInSide = true;
-                this.addInfoOutSide = false;
-                createAddInfoButtonsInSide();
-            }
     }
 
     protected setDimensions(containerWidth: number, containerHeight: number, defaultData: defaultType) {