@latest-thinking/lt-player 1.0.4-n → 1.0.4-p

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.4-n",
+  "version": "1.0.4-p",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",

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

@@ -36,6 +36,28 @@
       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/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 {

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

@@ -12,7 +12,10 @@
           }
 
           .poster-paragraph {
-            font-size: .9rem;
+            &__content {
+              font-size: .9rem;
+            }
+
           }
         }
       }
@@ -70,6 +73,7 @@
     .content__body {
       z-index: 2;
       margin-top: auto;
+      width: 100%;
     }
 
     .poster-title {
@@ -83,10 +87,45 @@
     }
 
     .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;
   }
 
 

package/src/components/LTPlayerSetup.ts

@@ -64,7 +64,32 @@ export class LTPlayerSetup {
             console.info(`Set Additional Info`);
         }
 
-        if (!playerConfig.body.playerType) {
+        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;
@@ -115,7 +140,6 @@ export class LTPlayerSetup {
 
         let videoData = Helper.processConfigData(url) as urlVideoType;
 
-
         const processEmbed = () => {
 
             const embedRequest = (url: string) =>{

package/src/components/LTPlayerType.ts

@@ -2,13 +2,14 @@ import {LTPlayerController} from "../global/controllers/LTPlayerController";
 import {TypeInterface} from "../global/interfaces/TypeInterface";
 import {defaultType, playerConfigType} from "../global/types/ModuleTypes";
 import {LTPlayerMini} from "./controls/LTPlayerMini";
-import {LTPlayerConfig} from "./LTPlayerConfig";
+import {LTPlayerConfig} from "./config/LTPlayerConfig";
 import Plyr from "plyr";
 import {LTPlayerDevMethode} from "./LTPlayerDevMethode";
 import {LTPlayerEventsManager} from "./LTPlayerEventsManager";
 import {LTPLayerAddInfo} from "./addInfo/LTPlayerAddInfoManager";
 import {LTPlayerEvents} from "./events/LTPlayer";
 import {LTPlayerPosterManager} from "./poster/LTPlayerPosterManager";
+import {config} from "json-schema-library";
 
 export namespace LTPlayer {
 
@@ -37,7 +38,7 @@ export namespace LTPlayer {
 
             this.additionalInfoService = additionalInfoService;
             this.miniPlayer = new LTPlayerMini();
-            this.setPlayerConfig(configData.body);
+            this.setPlayerConfig(configData.body, configData.version);
             this.initSetupPlayerPoster(configData.body);
             this.initPlayer();
             this.setEvents();
@@ -68,10 +69,12 @@ export namespace LTPlayer {
         /**
          * Set Player config Instance
          * @param configData
+         * @param version
          * @private
          */
-        private setPlayerConfig(configData: playerConfigType) {
-            this.playerConfig = new LTPlayerConfig(configData);
+        private setPlayerConfig(configData: playerConfigType, version : string | number) {
+            this.playerConfig = new LTPlayerConfig(version);
+            this.playerConfig.mapConfigData(configData);
         }
 
         /**
@@ -206,7 +209,7 @@ export namespace LTPlayer {
             }
 
             this.miniPlayer = new LTPlayerMini();
-            this.setPlayerConfig(configData.body);
+            this.setPlayerConfig(configData.body, configData.version);
             this.initPoster(configData.body);
             this.initPlayer();
             this.setEvents();
@@ -283,8 +286,9 @@ export namespace LTPlayer {
             playerContainer.insertAdjacentHTML("afterend", this.templateService.getOnloadPoster({logo: logo})) ;
         }
 
-        private setPlayerConfig(configData: playerConfigType) {
-            this.playerConfig = new LTPlayerConfig(configData);
+        private setPlayerConfig(configData: playerConfigType, version: string | number) {
+            this.playerConfig = new LTPlayerConfig(version);
+            this.playerConfig.mapConfigData(configData);
         }
 
         public getPlayer() {

package/src/components/config/LTPlayerConfig.ts

@@ -0,0 +1,184 @@
+import {playerConfigType} from "../../global/types/ModuleTypes";
+import {LTPlayerConfigProcessor} from "./LTPlayerConfigProcessor";
+export class LTPlayerConfig {
+
+    private configData: playerConfigType = {
+        version : null,
+        preload: false,
+        autoPlay : false,
+        videoTitle: '',
+        posterImage: '',
+        videoParagraph: '',
+        videoUrl : false,
+        playerId: '',
+        playerContainer: '',
+        vimeo: false,
+        youtube: {
+            'controls': 0,
+            'noCookie': false,
+            'rel': 0,
+            'showinfo': 0,
+            'iv_load_policy': 3,
+            'modestbranding': 1,
+            'playsinline': true,
+        },
+        defaultConfig : false,
+        share: null,
+        chapters : null,
+        playerType: null,
+        device : 'desktop'
+    }
+    processor : LTPlayerConfigProcessor.Map
+
+
+    /**
+     * @param version
+     */
+    constructor(version: string | number) {
+        this.processor = new LTPlayerConfigProcessor.Map();
+        this.setVersion(version);
+        this.processor.setVersion(this.configData.version);
+        // this.processConfigData();
+    }
+
+    mapConfigData(config : playerConfigType) {
+
+        Object.keys(this.configData).forEach(instanceItem => {
+
+            if (this.processor.version === 1) {
+                let process = this.processor.processItem(instanceItem, config);
+
+                if (process) {
+                    this.configData[instanceItem] = process;
+                }
+            } else {
+                let process = this.processor.processItem(instanceItem, (config[instanceItem]) ?? null);
+
+                if (process) {
+                    this.configData[instanceItem] = process;
+                }
+            }
+        })
+    }
+
+    setVersion(version : string | number) {
+
+        if (typeof version === 'string') {
+            return this.configData.version = parseInt(version);
+        }
+
+        this.configData.version = version;
+    }
+
+    getDimensions() {
+        return this.configData.dimensions
+    }
+
+    getAdditionalInfo() {
+        return this.configData.additionalInfo;
+    }
+
+    getVideoTitle() {
+        return this.configData.videoTitle;
+    }
+
+    getPosterImage() {
+        return this.configData.posterImage;
+    }
+
+    getParagraph() {
+        return this.configData.videoParagraph;
+    }
+
+    getVideoType() {
+        return this.configData.videoUrl.videoType;
+    }
+
+    getVideoUrl() {
+        return this.configData.videoUrl;
+    }
+
+    getPlayerId() {
+        return this.configData.playerId;
+    }
+
+    getConfigData() {
+        return this.configData;
+    }
+
+    getPlayerElementContainer() {
+        return this.configData.playerContainer;
+    }
+
+    getVideoOrigin() {
+        return this.configData.videoUrl.origin;
+    }
+
+    /**
+     *
+     * @param origin
+     */
+    getConfigByOrigin(origin: string) {
+        return (this.configData[origin] !== undefined) ? this.configData[origin] : null;
+    }
+
+    getDefaultConfigItems() {
+        return this.configData.defaultConfig;
+    }
+
+    getChapters() {
+        return this.configData.chapters
+    }
+
+    isShareData() {
+        if (this.configData.share) {
+            return Object.keys(this.configData.share).length > 0;
+        }
+
+        return false;
+    }
+
+    getShareData() {
+        return this.configData.share
+    }
+
+    getCaptions () {
+        return this.configData.defaultConfig.captions
+    }
+
+    getPlayerType() {
+        return this.configData.playerType
+    }
+
+    setPlayerId(id: number) {
+        this.configData.playerId = id;
+    }
+
+    isAutoPlay() {
+        return this.configData.autoPlay;
+    }
+
+    getPreload() {
+        return this.configData.preload;
+    }
+    isAutoPreload() {
+        return this.configData.preload.autoType;
+    }
+
+    getDevice() {
+        return this.configData.device;
+    }
+
+    getEmbedOrigin() {
+       return {[this.getVideoOrigin()] : this.getConfigByOrigin(this.getVideoOrigin())};
+    }
+
+    getFullscreenMode() {
+        if (this.getDevice() === 'mobile') {
+            return {fullscreen: {enabled: false}}
+        } else {
+            return false
+        }
+    }
+}
+