@latest-thinking/lt-player 1.0.4 → 1.0.5-b

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.4",
+  "version": "1.0.5-b",
   "description": "LT player.",
-  "main": "dist/js/lt-player-app.js",
-  "module": "dist/js/lt-player-app.js",
+  "main": "dist/js/lt-player-main.js",
+  "module": "dist/js/lt-player-main.js",
   "sass": "src/assets/sass/app.scss",
-  "style": "dist/css/lt-player-app.css",
+  "style": "dist/css/lt-player-main.css",
   "scripts": {
     "lint": "npm run lint:styles; npm run lint:scripts",
     "lint:styles": "stylelint src",
@@ -29,7 +29,6 @@
     "css-loader": "^6.7.2",
     "eslint": "^8.7.0",
     "eslint-webpack-plugin": "^3.1.1",
-    "file-loader": "^6.2.0",
     "fixed": "^0.3.1",
     "hammerjs": "^2.0.8",
     "handlebars": "^4.7.7",
@@ -42,13 +41,12 @@
     "postcss-preset-env": "^7.2.3",
     "rangetouch": "^2.0.1",
     "raw-loader": "^4.0.2",
-    "sass-loader": "^12.4.0",
+    "resolve-url-loader": "^5.0.0",
     "stylelint": "^14.2.0",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-webpack-plugin": "^3.1.1",
     "ts-loader": "^9.4.1",
     "typescript": "^4.9.3",
-    "webpack": "^5.66.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.7.3",
     "webpack-merge": "^5.8.0"
@@ -59,6 +57,10 @@
     "@typescript-eslint/parser": "^5.48.0",
     "dotenv-webpack": "^8.0.1",
     "eslint": "^8.31.0",
-    "eslint-webpack-plugin": "^3.1.1"
+    "eslint-webpack-plugin": "^3.1.1",
+    "sass": "^1.60.0",
+    "sass-loader": "^13.2.2",
+    "webpack": "^5.76.3",
+    "plyr": "^3.7.3"
   }
 }

package/src/assets/sass/app.scss

@@ -52,8 +52,8 @@
 // 5. Additional imports
 //---------------------------------------------
 
-@import "~plyr/dist/plyr.css";
+@import "~plyr";
 
 :root {
   --plyr-color-main: $default_color_player;
-}
+}

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

@@ -22,31 +22,31 @@
 
 @font-face {
   font-family: "MuseoSans";
-  src: url('../fonts/museo/MuseoSans-100.otf') format('opentype');
+  src: url('../../fonts/museo/MuseoSans-100.otf') format('opentype');
   font-weight: 100;
 }
 
 @font-face {
   font-family: "MuseoSans";
-  src: url('../fonts/museo/MuseoSans-300.otf') format('opentype');
+  src: url('../../fonts/museo/MuseoSans-300.otf') format('opentype');
   font-weight: 300;
 }
 
 @font-face {
   font-family: "MuseoSans";
-  src: url('../fonts/museo/MuseoSans-500.otf') format('opentype');
+  src: url('../../fonts/museo/MuseoSans-500.otf') format('opentype');
   font-weight: 500;
 }
 
 @font-face {
   font-family: "MuseoSans";
-  src: url('../fonts/museo/MuseoSans-700.otf') format('opentype');
+  src: url('../../fonts/museo/MuseoSans-700.otf') format('opentype');
   font-weight: 700;
 }
 
 @font-face {
   font-family: "MuseoSans";
-  src: url('../fonts/museo/MuseoSans-900.otf') format('opentype');
+  src: url('../../fonts/museo/MuseoSans-900.otf') format('opentype');
   font-weight: 900;
 }
 

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

@@ -13,6 +13,8 @@
 
 .plyr {
   .plyr--video, &__controls {
+    touch-action: none!important;
+    pointer-events: auto!important;
     opacity: 0;
     height: 100%;
     width: 100%;
@@ -25,6 +27,39 @@
   }
 
   &__controls {
+
+    touch-action: inherit!important;
+
+    &__mobile-background {
+      touch-action: inherit!important;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 9999;
+
+      .lt-player-notification {
+        .lt-player-rewind {
+          height: 100%;
+          top: 0;
+        }
+
+        .lt-player-rewind__icon__portrait {
+          margin: auto auto auto 2rem;
+        }
+
+        .lt-player-forward {
+          height: 100%;
+          top: 0;
+        }
+
+        .lt-player-forward__icon__portrait {
+          margin: auto 2rem auto auto;
+        }
+      }
+
+
+    }
+
     &__shortcut-area {
 
     }

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

@@ -117,6 +117,8 @@
           display: flex;
           flex-direction: column;
           justify-content: space-between;
+          position: absolute;
+          bottom: 0;
 
           &__header {
             padding: 1.5rem;
@@ -157,6 +159,7 @@
               font-size: $lt-player-font-size-xxl;
               margin: 0;
               color: $default-lt-player-white !important;
+              display: block;
             }
           }
 

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

@@ -345,7 +345,7 @@
         top: 0;
         background: #27282A;
         opacity: 0.75;
-        z-index: 5;
+        z-index: 10;
       }
     }
   }

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

@@ -11,3 +11,7 @@
   font-family: $lt-font-family-base !important;
   white-space: unset !important;
 }
+
+.plyr__captions span:empty {
+  display: none!important;
+}

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

@@ -80,7 +80,7 @@
           .bottom-controller {
             .play-button {
               padding: .75rem;
-              bottom: 0;
+              bottom: -2px;
             }
 
             &__center-buttons {
@@ -97,7 +97,7 @@
           .bottom-controller {
             .play-button {
               padding: .75rem;
-              bottom: 0;
+              bottom: -2px;
             }
 
             &__center-buttons {
@@ -129,7 +129,7 @@
 
             .play-button {
               padding: .75rem;
-              bottom: 0;
+              bottom: -2px;
             }
 
             .plyr__controls_speed-button {
@@ -251,10 +251,14 @@
         white-space: nowrap;
         font-size: 12px;
         transition: none;
+        outline: none;
         background-color: $default-lt-player-blue;
 
         &:focus,
-        &:active {
+        &:active,
+        &:hover,
+        &:focus-visible {
+          outline: $default-lt-player-blue;
           background-color: $default-lt-player-blue;
         }
       }
@@ -269,9 +273,12 @@
       }
 
       &__play-button_body {
-        bottom: -8px;
         position: relative;
 
+        &__portrait {
+          bottom: -8px;
+        }
+
         .play-button {
           @extend %lt-player-btn;
           @include yellow-btn;
@@ -309,6 +316,9 @@
               position: absolute;
               rotate: 270deg!important;
               bottom: 5rem;
+              max-width: 110px;
+              min-width: 80px;
+              width: 20%;
 
                 .volume_control__background__area__range {
                   color: $default-lt-button-color !important;

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

@@ -3,11 +3,16 @@
     width: 100%;
     height: 100%;
   }
+
+  .lt-player-mini-player-observe {
+    min-height: 200px;
+    max-height: 600px;
+    height: auto;
+  }
+
   .lt-player-mini-enable {
     position: fixed;
     z-index: 10000;
-    max-width: 160px;
-    max-height: 290px;
     bottom: 20px;
     right: 20px;
     opacity: 1;
@@ -19,6 +24,16 @@
     }
   }
 
+  .lt-player-mini-2 {
+    max-width: 344px;
+    max-height: 194px;
+  }
+
+  .lt-player-mini-1 {
+    max-width: 160px;
+    max-height: 290px;
+  }
+
   .lt-player-mini-player-background {
     z-index: 100;
 

package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss

@@ -12,7 +12,10 @@
           }
 
           .poster-paragraph {
-            font-size: .9rem;
+            &__content {
+              font-size: .9rem;
+            }
+
           }
         }
       }
@@ -44,7 +47,7 @@
 
     .player-state {
       opacity: 0;
-      transition: all 0.3s ease-in-out;
+      transition: all 0.8s ease-in-out;
       pointer-events: none;
       @extend %lt-player-btn;
       @include dark-btn;
@@ -54,7 +57,7 @@
 
     .active {
       opacity: 1;
-      transition: all 0.3s ease-in-out;
+      transition: all 0.2s ease-in-out;
     }
   }
 
@@ -70,6 +73,7 @@
     .content__body {
       z-index: 2;
       margin-top: auto;
+      width: 100%;
     }
 
     .poster-title {
@@ -83,14 +87,50 @@
     }
 
     .poster-paragraph {
-      font-weight: $lt-player-font-weight-sm;
-      color: $default-lt-player-white !important;
+
+      margin-bottom: 3rem;
+
+      &__content {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        word-wrap: break-word;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        font-weight: $lt-player-font-weight-sm;
+        color: $default-lt-player-white !important;
+        margin-bottom: 0;
+        max-height: 3.1rem;
+        transition: max-height 0.3s ease-in-out;
+      }
+
+      .open-content {
+        display: block;
+        transition: max-height 0.3s ease-in-out;
+      }
     }
+  }
 
+  .poster-paragraph__button {
+    background: none;
+    box-shadow: none;
+    padding: 0;
+    border: none;
+    margin: 0;
+    text-decoration: none;
+    font-size: 0.8rem;
+    color: white;
+    cursor: pointer;
+    position: absolute;
+    bottom: 6rem;
+    right: 6rem;
+    z-index: 8;
   }
 
 
   .lt-player-rewind-area {
+    touch-action: inherit!important;
     width: 100%;
     height: 100%;
     z-index: 3;
@@ -98,14 +138,15 @@
 
   .lt-player-rewind {
     width: 50%;
-    height: 100%;
+    height: 130%;
+    top: -10rem;
     display:flex;
     flex-direction: row;
     position: absolute;
     text-align: center;
     border-radius:0 100% 100% 0;
     left: 0;
-    top: 0;
+
 
     &__icon-wrapper {
       display: flex;
@@ -125,9 +166,17 @@
       display: flex;
       justify-content:flex-start;
       align-items:center;
-      margin: auto;
+
       color: rgba(255,255,255, 1);
       user-select: none;
+
+      &__portrait {
+        margin: auto auto 18rem 3rem;
+      }
+
+      &__landscape {
+        margin: auto auto 13rem 4rem;
+      }
     }
 
     span {
@@ -138,6 +187,7 @@
   }
 
   .lt-player-forward-area {
+    touch-action: inherit!important;
     width: 100%;
     height: 100%;
     z-index: 4;
@@ -145,14 +195,14 @@
 
   .lt-player-forward {
     width: 50%;
-    height: 100%;
+    height: 130%;
+    top: -10rem;
     display:flex;
     flex-direction: row;
     position: absolute;
     text-align: center;
     border-radius:100% 0 0 100%;
     right: 0;
-    top: 0;
 
     &__icon-wrapper {
       display: flex;
@@ -171,8 +221,17 @@
       display: flex;
       justify-content:flex-start;
       align-items:center;
-      margin: auto;
+
       color: rgba(255,255,255, 1);
+
+      &__portrait {
+        margin: auto 3rem 18rem auto;
+      }
+
+      &__landscape {
+        margin: auto 4rem 13rem auto;
+      }
+
     }
 
     span{

package/src/components/LTPlayerDevMethode.ts

@@ -8,9 +8,11 @@ export namespace LTPlayerDevMethode {
     export class Player  {
 
         player: Plyr
+        instance : LTPlayer.PortraitType | LTPlayer.LandscapeType
 
-        constructor(player: Plyr) {
-            this.player = player;
+        constructor(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+            this.player = instance.plyr;
+            this.instance = instance
         }
 
        play() {
@@ -77,7 +79,9 @@ export namespace LTPlayerDevMethode {
                let miniPlayer = {
                    controls : playerContainer.querySelector('.lt-player-mini-player-controls'),
                    background: playerContainer.querySelector('.lt-player-mini-player-background'),
-                   enable: playerContainer.querySelector('.lt-player-mini-enable')
+                   enable: playerContainer.querySelector('.lt-player-mini-enable'),
+                   size_land: playerContainer.querySelector(`.lt-player-mini-1`),
+                   size_port: playerContainer.querySelector(`.lt-player-mini-2`)
                };
 
                if (miniPlayer.controls) {
@@ -88,6 +92,14 @@ export namespace LTPlayerDevMethode {
                    miniPlayer.background.remove();
                }
 
+               if (miniPlayer.size_land) {
+                   miniPlayer.size_land.classList.remove(`lt-player-mini-1`)
+               }
+
+               if (miniPlayer.size_port) {
+                   miniPlayer.size_port.classList.remove(`lt-player-mini-2`)
+               }
+
                if (miniPlayer.enable) {
                    miniPlayer.enable.classList.remove('lt-player-mini-enable')
                }
@@ -106,6 +118,14 @@ export namespace LTPlayerDevMethode {
            exitFullScreen();
 
        }
+
+        enterMiniPlayer() {
+            this.instance.miniPlayer.enterMiniPlayer();
+       }
+
+       exitMiniPlayer() {
+           this.instance.miniPlayer.exitMiniPlayer(this.player);
+       }
     }
 
     export class Preload {

package/src/components/LTPlayerManager.ts

@@ -114,11 +114,18 @@ export class LTPlayerManager {
 
         const setup = new LTPlayerSetup();
 
-        return new Promise(resolve => {
-            setup.init(playerConfig).then( result => {
-                this.players.push(result);
-                resolve(result);
-            })
+        return new Promise((resolve, reject) => {
+            let setupPLayer = setup.init(playerConfig);
+
+            if (setupPLayer) {
+                setupPLayer.then( result => {
+                    this.players.push(result);
+                    resolve(result);
+                })
+            } else {
+               reject('Player is not setup')
+            }
+
         })
 
 

package/src/components/LTPlayerSetup.ts

@@ -64,17 +64,42 @@ export class LTPlayerSetup {
             console.info(`Set Additional Info`);
         }
 
-        if (!playerConfig.body.playerType) {
-            return new Promise(resolve => {
+        if (playerConfig.body.playerType === undefined) {
+            const checkVersion = (version : string | number) : boolean => {
+                if (typeof version === 'string') {
+                    if (parseInt(version) === 1) {
+                        return true;
+                    }
+                }
+
+                if (typeof version === "number") {
+                    if (version === 1) {
+                        return true;
+                    }
+                }
+
+                return false;
+
+            }
+
+            if (checkVersion(playerConfig.version)) {
+                return new Promise((resolve, reject) => {
+                    playerConfig.body.playerType = 2;
+                    resolve(this.setType(playerConfig, playerContainer));
+                    reject(null);
+                });
+            }
+
+            return new Promise((resolve, reject) => {
                 playerConfig.body.playerType = this.getVideoTypeByUrl(playerConfig.body.videoUrl).then(response => {
                     playerConfig.body.playerType = response;
-                    resolve(this.setType(playerConfig, playerContainer))
+                    resolve(this.setType(playerConfig, playerContainer));
                 });
             })
         } else {
-
-            return new Promise(resolve => {
-                resolve(this.setType(playerConfig, playerContainer))
+            return new Promise((resolve, reject) => {
+                resolve(this.setType(playerConfig, playerContainer));
+                reject(null);
             });
         }
     }
@@ -115,7 +140,6 @@ export class LTPlayerSetup {
 
         let videoData = Helper.processConfigData(url) as urlVideoType;
 
-
         const processEmbed = () => {
 
             const embedRequest = (url: string) =>{