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

package/src/components/share/LTPlayerShare.ts

@@ -1,5 +1,5 @@
 import {LTPlayer} from "../LTPlayerType";
-import {LTPlayerConfig} from "../LTPlayerConfig";
+import {LTPlayerConfig} from "../config/LTPlayerConfig";
 import {IconsService} from "../../services/IconsService";
 import {TemplateService} from "../../services/TemplateService";
 import {LTPlayerShareEvents} from "./LTPlayerShareEvents";

package/src/global/controllers/LTPlayerController.ts

@@ -1,4 +1,4 @@
-import {LTPlayerConfig} from "../../components/LTPlayerConfig";
+import {LTPlayerConfig} from "../../components/config/LTPlayerConfig";
 import {LTPlayerControls} from "../../components/controls/LTPlayerControls";
 import Plyr from "plyr";
 import {TemplateService} from "../../services/TemplateService";

package/src/services/Helper.ts

@@ -1,4 +1,4 @@
-import {urlDataType, urlVideoType} from "../global/types/ModuleTypes";
+import {defaultType} from "../global/types/ModuleTypes";
 
 export class Helper {
     static getDevice() {
@@ -28,7 +28,7 @@ export class Helper {
         }
     }
 
-    static processConfigData(videoUrl: string) {
+    static processConfigData(videoUrl: string | defaultType) {
 
         const regex = /^(http:\/\/|https:\/\/)(player\.vimeo\.com|vimeo\.com|youtu\.be|www\.youtube\.com)\/([\w\/]+)(\?.*)?$/;
 
@@ -36,7 +36,7 @@ export class Helper {
         let type = 'video';
         let origin = 'video';
 
-        if ((groupMatch = regex.exec(videoUrl)) !== null) {
+        if ((groupMatch = regex.exec(<string>videoUrl)) !== null) {
             groupMatch.forEach((match: string) => {
                 if (match !== undefined) {
                     if (match.includes('vimeo')) {
@@ -57,7 +57,7 @@ export class Helper {
         };
     }
 
-    static getEmbeddedID = (url: string) => {
+    static getEmbeddedID = (url: string | defaultType) => {
         const urlGroups = url.split('?')[0].split('/');
         if (urlGroups.length > 4) {
             return url.split('?')[0].split('/').slice(-2)[0];
@@ -66,11 +66,26 @@ export class Helper {
 
     }
 
-    static getEmbeddedHash = (url: string) => {
+    static getEmbeddedHash = (url: string | defaultType) => {
         const urlGroups = url.split('?')[0].split('/');
         if (urlGroups.length > 4) {
             return url.split('?')[0].split('/').slice(-1)[0];
         }
         return null;
     }
+
+    static isValidHttpUrl(string: string | defaultType) {
+        let url;
+
+        if (typeof string === 'object') {
+            return false;
+        }
+
+        try {
+            url = new URL(string);
+        } catch (_) {
+            return false;
+        }
+        return url.protocol === "http:" || url.protocol === "https:";
+    }
 }

package/src/services/TemplateService.ts

@@ -8,7 +8,7 @@ import share from '../views/share.handlebars';
 import background from '../views/background.handlebars';
 import miniPlayerControls from '../views/controls.handlebars';
 import onloadPoster from '../views/onloadPoster.handlebars';
-import {LTPlayerConfig} from "../components/LTPlayerConfig";
+import {LTPlayerConfig} from "../components/config/LTPlayerConfig";
 import {IconsService} from "./IconsService";
 import {defaultType} from "../global/types/ModuleTypes";
 

package/src/views/controls.handlebars

@@ -166,7 +166,32 @@
       <div class="player-lt__modal__mobile d-none"></div>
     </div>
     {{#mobile}}
-        <div class="plyr__controls__mobile-background d-none"></div>
+        <div class="plyr__controls__mobile-background d-none">
+            <div class="lt-player-notification">
+                <div class="lt-player-rewind-area">
+                </div>
+                <div class="lt-player-rewind lt-player-notify">
+                    <div class="lt-player-rewind__icon lt-player-rewind__icon__portrait">
+                        <span class="rewind">10 sec</span>
+                        <div class="lt-player-rewind__icon-wrapper rotate">
+                            <img class="filter" src="{{icons.play}}" alt="">
+                            <img class="filter" src="{{icons.play}}" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="lt-player-forward-area">
+                </div>
+                <div class="lt-player-forward lt-player-notify">
+                    <div class="lt-player-forward__icon lt-player-forward__icon__portrait">
+                        <div class="lt-player-rewind__icon-wrapper">
+                            <img class="filter" src="{{icons.play}}" alt="">
+                            <img class="filter" src="{{icons.play}}" alt="">
+                        </div>
+                        <span class="forward">10 sec</span>
+                    </div>
+                </div>
+            </div>
+        </div>
     {{/mobile}}
   {{/landscape}}
   {{#portrait}}
@@ -206,9 +231,12 @@
         <div class="lt-player-video-content">
           <div class="content__body">
             <h4 class="poster-title">{{videoParagraph}}</h4>
-            <p class="poster-paragraph">{{videoTitle}}</p>
+            <div class="poster-paragraph">
+                <p class="poster-paragraph__content">{{videoTitle}}</p>
+            </div>
           </div>
         </div>
+      <button class="poster-paragraph__button">Read more</button>
         <div class="lt-player-rewind-area">
         </div>
         <div class="lt-player-rewind lt-player-notify">
@@ -305,7 +333,32 @@
       <div class="player-lt__modal__mobile d-none"></div>
     </div>
     {{#mobile}}
-        <div class="plyr__controls__mobile-background d-none"></div>
+        <div class="plyr__controls__mobile-background d-none">
+            <div class="lt-player-notification">
+                <div class="lt-player-rewind-area">
+                </div>
+                <div class="lt-player-rewind lt-player-notify">
+                    <div class="lt-player-rewind__icon lt-player-rewind__icon__portrait">
+                        <span class="rewind">10 sec</span>
+                        <div class="lt-player-rewind__icon-wrapper rotate">
+                            <img class="filter" src="{{icons.play}}" alt="">
+                            <img class="filter" src="{{icons.play}}" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="lt-player-forward-area">
+                </div>
+                <div class="lt-player-forward lt-player-notify">
+                    <div class="lt-player-forward__icon lt-player-forward__icon__portrait">
+                        <div class="lt-player-rewind__icon-wrapper">
+                            <img class="filter" src="{{icons.play}}" alt="">
+                            <img class="filter" src="{{icons.play}}" alt="">
+                        </div>
+                        <span class="forward">10 sec</span>
+                    </div>
+                </div>
+            </div>
+        </div>
     {{/mobile}}
   {{/portrait}}
 {{/player}}

package/src/views/template.handlebars

@@ -1,10 +1,10 @@
 {{#embedded }}
-<div class="plyr__video-embed embed_player" data-plyr-provider="{{origin}}" data-plyr-embed-id="{{embedId}}" data-plyr-embed-hash="{{embedHash}}">
+<div class="plyr__video-embed embed_player" data-plyr-provider="{{videoUrl.origin}}" data-plyr-embed-id="{{videoUrl.embedId}}" data-plyr-embed-hash="{{videoUrl.embedHash}}">
 </div>
 {{/embedded}}
 {{#video}}
 <video class="embed_player lt-player-wrapper" playsinline controls>
-    <source src="{{videoUrl}}"/>
+    <source src="{{videoUrl.videoUrl}}"/>
     {{#defaultConfig.captions}}
     <track kind="captions" label="{{label}} captions" src="{{url}}" srclang="{{srclang}}" {{default}} />
     {{/defaultConfig.captions}}

package/src/components/LTPlayerConfig.ts

@@ -1,398 +0,0 @@
-import {defaultType, playerConfigType, urlDataType} from "../global/types/ModuleTypes";
-import {Helper} from "../services/Helper";
-
-export class LTPlayerConfig {
-
-    private configData: playerConfigType = {
-        preload: false,
-        selector : '',
-        autoPlay : false,
-        videoTitle: '',
-        posterImage: '',
-        videoParagraph: '',
-        videoUrl: '',
-        videoType: '',
-        embedId: '',
-        embedHash: '',
-        origin: '',
-        playerId: '',
-        playerContainer: '',
-        vimeo: {
-            'controls': false,
-            "active": false,
-            'gesture': 'media',
-            'transparent': false,
-            'speed': true,
-            'portrait': true,
-            'keyboard': false,
-            'title': false,
-            'byline': false,
-            'playsinline': true,
-            'background' : true
-        },
-        youtube: {
-            'controls': 0,
-            'noCookie': false,
-            'rel': 0,
-            'showinfo': 0,
-            'iv_load_policy': 3,
-            'modestbranding': 1,
-            'playsinline': true,
-        },
-        defaultConfig : {
-            speed : {
-                selected : 1,
-                captions : false,
-                update: true
-            },
-            captions : {
-                active : false
-            },
-            clickToPlay : false,
-            playsinline : true,
-            pip : false
-        },
-        share: null,
-        chapters : null,
-        dimensions: null,
-        playerType: null,
-        device : 'desktop'
-    }
-
-
-    private defaultDimensions: defaultType = {
-        max_width: '450px',
-        min_width: '350px',
-        max_height: '780px',
-        min_height: '600px'
-    }
-
-    /**
-     * @param config
-     */
-    constructor(config: playerConfigType) {
-        this.setConfig(config);
-        this.processConfigData();
-    }
-
-    setConfig(config: playerConfigType) {
-        Object.keys(this.configData).forEach(item => {
-
-            const setCustomConfig = (item: object, configItem: object) => {
-
-                if (configItem && Object.keys(configItem).length > 0) {
-
-                    Object.keys(configItem).forEach( element => {
-                        if (item[element as keyof typeof item] === configItem[element as keyof typeof configItem]) {
-                            item[element as keyof typeof item] = configItem[element as keyof typeof configItem]
-                        } else {
-                            Object.assign(item, {[element]:configItem[element as keyof typeof configItem]})
-                        }
-                    })
-                }
-
-                return item;
-
-            }
-
-            const setDimensions = (data: defaultType) : any => {
-
-                let response: defaultType = {
-                    width: '100%',
-                    min_width: this.defaultDimensions.min_width,
-                    max_width: this.defaultDimensions.max_width,
-                    height: '100%',
-                    min_height: this.defaultDimensions.min_height,
-                    max_height: this.defaultDimensions.max_height,
-                }
-
-
-                if (data) {
-                    if (data.width <= parseInt(this.defaultDimensions.max_width.replace('px', '')) && data.width >= parseInt(this.defaultDimensions.min_width.replace('px', ''))) {
-                        response.width = (Number.isInteger(data.width)) ? `${data.width}px` : '100%';
-                    }
-
-                    if (data.height <= parseInt(this.defaultDimensions.max_height.replace('px', '')) && data.height >= parseInt(this.defaultDimensions.min_height.replace('px', ''))) {
-                        response.height = (Number.isInteger(data.height)) ? `${data.height}px` : '100%';
-                    }
-                }
-
-                return response;
-
-            }
-
-            switch (item) {
-                case 'vimeo':
-                    this.configData[item] = setCustomConfig(this.configData[item], config[item]);
-                break;
-                case 'youtube':
-                    this.configData[item] = setCustomConfig(this.configData[item], config[item]);
-                break;
-                case 'defaultConfig':
-                    this.configData[item] = setCustomConfig(this.configData[item], config[item]);
-                break
-                case 'dimensions':
-                    this.configData[item] = setDimensions(config[item]);
-                break
-                case 'additionalInfo':
-                    this.configData[item] = config[item];
-                break
-                case 'playerId' :
-                    if (typeof item === 'string') {
-                        this.configData[item] = parseInt(config[item]);
-                    } else {
-                        this.configData[item] = config[item];
-                    }
-                break
-                case 'preload':
-                    const setDefaultTimeRange = () => {
-                        this.configData[item] = {
-                            start : 0,
-                            stop : 10
-                        }
-                    }
-
-                    const setTimeRange = (config: defaultType) => {
-
-                        setDefaultTimeRange();
-
-                        if (config.start) {
-
-                            let start = config.start;
-
-                            if (typeof start === 'string') {
-                                start = parseFloat(start);
-                            }
-
-                            this.configData[item].start = start;
-
-
-                            if (!start) {
-                                this.configData[item].start = 0;
-                            }
-                        }
-                        if (config.stop) {
-
-                            let stop = config.stop;
-
-                            if (typeof stop === 'string') {
-                                stop = parseFloat(stop);
-                            }
-
-                            this.configData[item].stop = stop;
-
-                            if (!stop) {
-                                this.configData[item].stop = 10;
-                            }
-
-                        }
-
-                        if (!config.start || !config.stop) {
-                            setDefaultTimeRange();
-                        }
-                    }
-
-
-                    const setPreloadType = (type: defaultType) => {
-
-                        this.configData[item].autoType = true;
-
-                        if (type.onload !== undefined) {
-                            if (typeof type.onload === 'string' && type.onload === 'false') {
-                                this.configData[item].autoType = false;
-                            }
-
-                            if (typeof type.onload === 'boolean') {
-                                if (!type.onload) {
-                                    this.configData[item].autoType = false;
-                                }
-                            }
-                        }
-
-                    }
-
-                    const setActive = () => {
-                        this.configData[item].isActive = true;
-                    }
-
-                    if (typeof config[item] === 'object') {
-                        if (Object.keys(config[item]).length !== 0) {
-                            setTimeRange(config[item]);
-                            setPreloadType(config[item]);
-                            setActive();
-                        }
-
-                        if (Object.keys(config[item]).length === 0) {
-                            setDefaultTimeRange();
-                            setPreloadType(config[item]);
-                            setActive();
-                        }
-                    }
-
-
-                    if (typeof config[item] === 'string' && config[item] !== 'false') {
-                        switch (config[item]) {
-                            case 'true':
-                                setDefaultTimeRange();
-                                setPreloadType(config[item]);
-                                setActive();
-                            break
-                        }
-                    }
-
-                    if (typeof config[item] === 'boolean') {
-                        if (config[item]) {
-                            setDefaultTimeRange();
-                            setPreloadType(config[item]);
-                            setActive();
-                        }
-                    }
-
-                break
-                default:
-                    if (config[item]) {
-                        this.configData[item] = config[item];
-                    }
-            }
-        })
-    }
-
-    processConfigData() {
-
-        let videoUrl: string = this.configData.videoUrl;
-
-        const urlVideoData: urlDataType = Helper.processConfigData(videoUrl);
-
-        this.configData.origin = urlVideoData.origin;
-
-        if (!this.configData.videoType.toLowerCase() || (urlVideoData.type !== this.configData.videoType.toLowerCase())) {
-            Object.assign(this.configData, {videoType: urlVideoData.type})
-        }
-
-        if (this.configData.videoType === 'embedded') {
-
-            this.configData.embedId = Helper.getEmbeddedID(this.configData.videoUrl);
-
-            if (Helper.getEmbeddedHash(this.configData.videoUrl)) {
-                this.configData.embedHash = Helper.getEmbeddedHash(this.configData.videoUrl);
-            }
-
-        }
-    }
-
-    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.videoType;
-    }
-
-    getVideoUrl() {
-        return this.configData.videoUrl;
-    }
-
-    getPlayerId() {
-        return this.configData.playerId;
-    }
-
-    getConfigData() {
-        return this.configData;
-    }
-
-    getPlayerElementContainer() {
-        return this.configData.playerContainer;
-    }
-
-    getVideoOrigin() {
-        return this.configData.origin;
-    }
-
-    /**
-     *
-     * @param origin
-     */
-    getConfigByOrigin(origin: string) {
-        return (this.configData[origin] !== undefined) ? this.configData[origin] : null;
-    }
-
-    getDefaultConfigItems() {
-        return this.configData.defaultConfig;
-    }
-
-    getDomSelector() {
-        return this.configData.selector;
-    }
-
-    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
-        }
-    }
-}
-