@latest-thinking/lt-player 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",
@@ -25,6 +25,7 @@
     "@types/mustache": "^4.2.2",
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
+    "container-query-polyfill": "^1.0.2",
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.2",

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;
@@ -68,10 +74,42 @@
   }
 }
 
+@mixin gray-btn {
+  color: $default-lt-button-color;
+  background-color: $default-lt-button-other;
+
+  &:hover {
+    color: $default-lt-button-color;
+    background-color: darken($default-lt-button-other, 10%);
+  }
+
+  &:active,
+  &:focus {
+    color: $default-lt-button-color;
+    background-color: $default-lt-button-other;
+  }
+
+  &:focus-visible,
+  &:focus {
+    outline: transparent;
+  }
+}
+
 @mixin buttons-sm {
   padding: 8px 10px;
 }
 
+@mixin buttons-xxs {
+  padding: 6px;
+
+  img {
+    width: 14px;
+    height: 14px;
+    min-width: 14px;
+    min-height: 14px;
+  }
+}
+
 @mixin buttons-xs {
   padding: 7px 7px;
 

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

@@ -24,15 +24,20 @@ $lt-player-font-size-lg2: 19px;
 $lt-player-font-size-xl: 20px;
 $lt-player-font-size-xxl: 21px;
 $lt-player-font-size-xxl2: 24px;
+$lg-player-font-size-xxl3: 28px;
 $lt-player-font-size-xxxl2: 30px;
+$lt-player-font-size-xxxl3: 32px;
 
 $lt-player-font-weight-xs: 100;
 $lt-player-font-weight-sm: 300;
+$lt-player-font-weight-md: 400;
 $lt-player-font-weight-base: 500;
 $lt-player-font-weight-lg: 600;
 $lt-player-font-weight-xl: 700;
+$lt-player-font-weight-xxl: 800;
 
 $lt-player-line-height: 1.5;
+$lt-player-line-height-default: 1.2;
 
 //---------------------------------------------
 // 2. Globals

package/src/assets/sass/app.scss

@@ -14,7 +14,11 @@
 // 1. Basics
 //---------------------------------------------
 
-
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 //---------------------------------------------
 // 2. Resetting properties
@@ -24,12 +28,25 @@ 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
 //---------------------------------------------
 
 .lt-player {
   display: flex;
+  width: 100%;
 }
 
 .lt-player-orientation {
@@ -46,6 +63,10 @@ body {
   visibility: hidden;
 }
 
+.overflow-hidden-body-important {
+  overflow: hidden !important;
+}
+
 .d-none {
   display: none !important;
 }

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

@@ -1,5 +1,19 @@
 @import "../abstracts/variables";
 
+$modal-max-width: 620px;
+
+@mixin modal-max-width {
+  @media (max-width: #{$modal-max-width}) {
+    @content;
+  }
+}
+
+@mixin modal-min-width {
+  @media (min-width: #{$modal-max-width}) {
+    @content;
+  }
+}
+
 @mixin modal-h2 {
   font-size: $lt-player-font-size-xxxl2;
   font-weight: $lt-player-font-weight-lg;
@@ -119,8 +133,8 @@
     &__modal-content {
       color: $default-lt-button-color;
       text-align: left;
-      padding: 16px;
       overflow: auto;
+      padding: 20px;
       font-family: $lt-font-family-base;
 
       button,
@@ -169,11 +183,10 @@
     top: 0;
     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;
+
+    @include modal-min-width {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
 
     &__mobile {
       position: absolute;
@@ -212,13 +225,18 @@
     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;
+    @include modal-max-width {
+      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 {
@@ -305,12 +323,15 @@
   }
 
   &__modal-body {
-    padding: 0 40px;
+    padding: 40px;
+
+    @include modal-max-width {
+      padding: 20px;
+    }
   }
 
   &__close-button {
     z-index: 20;
-    float: right;
     width: 24px;
     font-size: $lt-player-font-size-xxxl2 !important;
     line-height: 1;
@@ -321,24 +342,18 @@
     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;
+    @include modal-max-width {
+      top: 20px;
+      right: 20px;
     }
   }
 
   &__close-button:hover {
     color: #d75b4c;
   }
-
-  &__show-modal {
-    opacity: 1;
-    visibility: visible;
-    transform: scale(1.0);
-    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
-  }
 }

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

@@ -1,9 +1,31 @@
-.lt-player-portrate--mobile {
+.lt-player-orientation--portrait {
   .plyr {
-    border-radius: 0;
+    iframe,
+    video {
+      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;
+}
+
+.plyr__video-wrapper {
+  background: transparent !important;
+}
+
 .plyr {
   border-radius: 0 0 0 30px;
   z-index: unset!important;

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

@@ -74,3 +74,10 @@
 .lt-player-additional-info {
   display: none!important;
 }
+
+.lt-player-mobile-add-info-modal {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}