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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.7",
+  "version": "1.0.8-g",
   "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

@@ -68,10 +68,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

@@ -30,6 +30,7 @@ body {
 
 .lt-player {
   display: flex;
+  width: 100%;
 }
 
 .lt-player-orientation {

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

@@ -4,6 +4,34 @@
   }
 }
 
+.lt-player-orientation--portrait {
+  .plyr {
+    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%;
+}

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

@@ -1,242 +1,316 @@
 @import "../abstracts/variables";
-.lt-player__poster__image-body {
-  position:absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  opacity: 1;
-  transition: all 0.2s ease-in-out;
-}
-
-.lt-player__poster__image-body--preload {
-  opacity: 0;
-  transition: all 0.2s ease-in-out;
-}
-.lt-player__poster__img__set-default {
-  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-}
-.lt-player__poster__background__grey {
-  background-color: grey
-}
-
-.lt-player__poster__img--set-custom {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-
-.lt-player-landscape--desktop {
-  .plyr {
-    .lt-player {
-      &__poster {
-        &__body {
-          .content {
-            &__header {
-              padding: 32px;
-            }
-
-            &__body {
-              padding: 0 32px;
-            }
-
-            &__footer {
-              padding: 32px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.lt-player-landscape--mobile,
-.lt-player-landscape--desktop {
-  &.lt-player--landscape {
-    &__xxs {
-      .plyr {
-        .lt-player {
-          &__poster {
-            &__body {
-              .content {
-                &__header {
-                  padding: 10px;
-                }
-
-                &__body {
-                  padding: 0 10px;
-
-                  .poster-paragraph {
-                    font-size: 16px;
-                  }
-                }
-
-                &__footer {
-                  padding: 15px 10px;
-
-                  .poster-buttons {
-                    button {
-                      @include buttons-sm;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.lt-player-portrate--mobile {
-  &.lt-player--portrait {
-    &__xs {
-      .lt-player {
-        &__poster {
-          &__body {
-            .content {
-              &__body {
-                .poster-paragraph {
-                  font-size: 16px;
-                }
-              }
-
-              &__footer {
-                .poster-buttons {
-                  .poster-button-play {
-                    @include buttons-xs;
-                  }
-
-                  .poster-button-watch-now {
-                    font-size: $lt-player-font-size-xs;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
 
 .plyr {
-  &__poster {
-    background-size: cover !important;
-  }
-
-  .no-poster-image {
-    background: black !important;
-  }
-
   .lt-player {
-
     &__preload-hide {
-      opacity: 0!important;
+      opacity: 0 !important;
     }
 
     &__poster {
-      background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
       position: absolute;
-      color: $default-lt-player-white!important;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
+      inset: 0;
+      color: $default-lt-player-white !important;
       z-index: $z_index_first;
 
-      &__body {
+      &__image-body {
+        position:absolute;
         width: 100%;
         height: 100%;
-        display: grid;
-        position: absolute;
-        z-index: 3;
+        z-index: 2;
+        opacity: 1;
+        transition: all 0.2s ease-in-out;
 
-        .content {
-          display: flex;
+        &--preload {
+          opacity: 0;
+          transition: all 0.2s ease-in-out;
+        }
+      }
+
+      &__img {
+        &--set-custom {
+          object-fit: cover;
           width: 100%;
-          flex-direction: column;
-          justify-content: space-between;
+          height: 100%;
+        }
+
+        &__set-default {
           position: absolute;
-          bottom: 0;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 10;
+        }
+      }
 
-          &__header {
-            padding: 24px;
+      &--background {
+        position: absolute;
+        inset: 0;
+        background-color: $default-lt-span-color;
+        z-index: -1;
+      }
 
-            .poster-logo-header {
-              display: flex;
-              align-items: center;
+      &__body {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 3;
 
-              .poster-footer-text {
-                font-size: $lt-player-font-size-base;
-                margin: auto 0;
-                font-weight: $lt-player-font-weight-sm;
-              }
+        &:hover {
+          .poster-paragraph {
+            text-decoration: underline;
+          }
 
-              .logo {
-                display: flex;
+          .content__footer {
+            .poster-buttons {
+              .poster-button-play,
+              .poster-button-watch-now {
+                color: $default-lt-button-color;
+                background-color: darken($default_color_player, 10%);
               }
             }
           }
+        }
 
-          &__body {
-            margin-top: auto;
-            padding: 0 24px;
+        .content {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          z-index: 2;
+          cursor: pointer;
+
+          &__header {
+            padding: 25px 25px 0;
 
             .poster-title {
               @extend %line-clamp-3;
               @include line-clamp-3;
-              color: $default-lt-player-white !important;
+              color: $default-lt-player-white;
               font-size: $lt-player-font-size-base;
               font-weight: $lt-player-font-weight-xs;
-              margin: 0 0 8px;
+              margin: 0;
             }
+          }
+
+          &__body {
+            padding: 0 25px;
 
             .poster-paragraph {
               @extend %line-clamp-3;
               @include line-clamp-4;
               font-weight: $lt-player-font-weight-lg;
-              font-size: $lt-player-font-size-xxl;
-              margin: 0;
-              color: $default-lt-player-white !important;
-              display: block;
+              font-size: $lt-player-font-size-base;
+              line-height: $lt-player-line-height-default;
+              margin: 8px 0;
+              color: $default-lt-player-white;
+              width: 70%;
             }
           }
 
           &__footer {
-            padding: 24px;
+            margin-top: auto;
+            padding: 0 25px 25px;
 
             .poster-buttons {
               display: flex;
-              gap: 8px;
+              gap: 5px;
 
               .poster-button-play {
                 @extend %lt-player-btn;
                 @include yellow-btn;
-                padding: 12px 12px;
+                @include buttons-xxs;
+                font-size: $lt-player-font-size-xs;
               }
 
               .poster-button-watch-now {
                 @extend %lt-player-btn;
                 @include yellow-btn;
-                padding: 8px 16px;
+                @include buttons-xs;
+                padding: 0 16px;
+                font-size: $lt-player-font-size-xs;
+                font-weight: $lt-player-font-weight-xl;
               }
 
               .poster-lt-player-share {
                 @extend %lt-player-btn;
-                background-color: $default-lt-button-other;
+                @include gray-btn;
+                @include buttons-xxs;
                 margin-left: auto;
-                padding: 12px 12px;
               }
             }
           }
         }
+      }
+    }
+  }
+}
+
+.lt-player-orientation--portrait {
+  .plyr {
+    .lt-player {
+      &__poster {
+        &__img {
+          &--set-custom {
+            // Delete this after review
+            object-position: 90% 50%;
+          }
+        }
+
+        &__body {
+          .content {
+            &__header {
+              .poster-title {
+                font-size: $lt-player-font-size-base;
+                font-weight: $lt-player-font-weight-md;
+              }
+            }
+
+            &__body {
+              margin-top: auto;
+
+              .poster-paragraph {
+                font-size: $lt-player-font-size-xxl;
+                line-height: $lt-player-line-height-default;
+                margin-top: 12px;
+                margin-bottom: 20px;
+                width: 100%;
+                text-decoration: underline;
+              }
+            }
+
+            &__footer {
+              margin-top: unset;
+
+              .poster-buttons {
+                .poster-button-play,
+                .poster-button-watch-now,
+                .poster-lt-player-share {
+                  @include buttons-normal;
+                  font-size: $lt-player-font-size-lg;
+                  font-weight: $lt-player-font-weight-lg;
+                }
+
+                .poster-button-watch-now {
+                  padding: 6px 16px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 375px) {
+  .lt-player-orientation--landscape {
+    .lt-player {
+      &__poster {
+        &__body {
+          .content {
+            &__body {
+              .poster-paragraph {
+                width: 50%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 479px) {
+  .lt-player-orientation--landscape {
+    .lt-player {
+      &__poster {
+        &__body {
+          .content {
+            &__header {
+              padding: 25px 50px 0;
+
+              .poster-title {
+                font-weight: $lt-player-font-weight-xl;
+              }
+            }
+
+            &__body {
+              padding: 0 50px;
+
+              .poster-paragraph {
+                font-size: $lt-player-font-size-xl;
+                margin: 25px 0 8px;
+                width: 60%;
+              }
+            }
 
-        .custom-poster-text {
-          left: 5.62%;
-          right: 5.62%;
-          top: 73.5%;
-          bottom: 22.71%;
+            &__footer {
+              padding: 0 50px 25px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 639px) {
+  .lt-player-orientation--landscape {
+    .lt-player {
+      &__poster {
+        &__body {
+          .content {
+            &__header {
+              padding: 50px 50px 0;
+            }
+
+            &__body {
+              .poster-paragraph {
+                font-size: $lg-player-font-size-xxl3;
+                margin: 25px 0 8px;
+                width: 60%;
+              }
+            }
+
+            &__footer {
+              padding: 50px;
+
+              .poster-buttons {
+                .poster-button-play {
+                  @include buttons-normal;
+                }
+
+                .poster-button-watch-now {
+                  @include buttons-normal;
+                  padding: 0 16px;
+                  font-size: $lt-player-font-size-base;
+                }
+
+                .poster-lt-player-share {
+                  @include buttons-normal;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 759px) {
+  .lt-player-orientation--landscape {
+    .lt-player {
+      &__poster {
+        &__body {
+          .content {
+            &__body {
+              .poster-paragraph {
+                font-size: $lt-player-font-size-xxxl3;
+                width: 60%;
+              }
+            }
+          }
         }
       }
     }

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

@@ -24,7 +24,6 @@
   }
 
   .settings-controllers-enable {
-    transition:.3s;
     position: absolute;
     width: 100%;
     z-index: 30;
@@ -257,8 +256,9 @@
       background: $default-lt-player-white;
       border-radius: 0 0 0 30px;
       padding: 0 0 32px 0;
-      bottom: -200%;
-      transition:.3s;
+      bottom: 0;
+      opacity: 0;
+
 
       .line-button {
         @extend %line-button;
@@ -273,7 +273,6 @@
     }
 
     .settings-controllers-enable {
-      transition:.3s;
       position: absolute;
       width: 100%;
       z-index: 30;
@@ -281,9 +280,11 @@
       background: $default-lt-player-white;
       border-radius: 0 0 0 30px;
       bottom: 0;
+      opacity: 1;
       display: flex;
       flex-direction: column;
       padding: 0 0 24px 0;
+      border: 1px solid $default-lt-span-color;
 
       &__speed-range {
         padding: 24px 24px 0 24px;
@@ -513,6 +514,7 @@
         transition: none;
         width: 100%;
         border-radius: 0;
+        border: none;
 
         &__subtitles {
           padding: 16px 24px 24px;

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

@@ -108,9 +108,9 @@
           a {
             padding: 0;
 
-            &:first-child {
+            &:hover {
               .share-icon__icon {
-                background: $default_color_player;
+                background-color: $default_color_player;
               }
             }
 
@@ -234,12 +234,6 @@
           a {
             padding: 0;
 
-            &:first-child {
-              .share-icon__icon {
-                background: $default_color_player;
-              }
-            }
-
             .share-icon__icon {
               @extend %center-elements;
               width: 32px;

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

@@ -96,6 +96,7 @@
         bottom: 0;
         height: 40%;
         background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
+        border-radius: 0 0 0 30px;
       }
 
       &__volume_control {