@latest-thinking/lt-player 1.0.4 → 1.0.5

package/src/components/poster/LTPlayerPosterPreloadEvents.ts

@@ -16,6 +16,7 @@ export class LTPlayerPosterPreloadEvents {
             playerContainer.querySelector(`.lt-player__poster`).insertAdjacentHTML('afterend', LoaderService.getSpinner());
             const preloadData = instance.playerConfig.getPreload();
             const playAutoPreload = () => {
+                console.log('preload play')
                 if (preloadData.start !== 0) {
                     instance.plyr.embed.setCurrentTime(preloadData.start).then(() => {
                         instance.plyr.embed.setMuted(true).then(function () {
@@ -30,13 +31,20 @@ export class LTPlayerPosterPreloadEvents {
                     LoaderService.removeSpinner(playerContainer)
                 } else {
                     instance.plyr.volume = 0;
-                    instance.plyr.embed.play().then(function () {
+                    if (instance.plyr.embed) {
+                        instance.plyr.embed.play().then(function () {
+                            LoaderService.removeSpinner(playerContainer)
+                        });
+                    } else {
+                        instance.plyr.play()
                         LoaderService.removeSpinner(playerContainer)
-                    });
+                    }
+
                 }
             }
 
             const pausePreload = () => {
+                console.log('preload play')
                 if (preloadData.start !== 0) {
                     instance.plyr.embed.setCurrentTime(preloadData.start).then( () => {
                         instance.plyr.embed.pause().then(function() {
@@ -45,12 +53,15 @@ export class LTPlayerPosterPreloadEvents {
                         });
                     });
                 } else {
-                    instance.plyr.volume = 0;
-                    instance.plyr.embed.pause().then(function() {
+                    if (instance.plyr.embed) {
+                        instance.plyr.embed.pause().then(function () {
+                            LoaderService.removeSpinner(playerContainer)
+                        });
+                    } else {
+                        instance.plyr.pause()
                         LoaderService.removeSpinner(playerContainer)
-                    });
+                    }
                 }
-
                 LoaderService.removeSpinner(playerContainer)
             }
 

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/components/share/LTPlayerShareEvents.ts

@@ -56,17 +56,17 @@ export namespace LTPlayerShareEvents {
                 }
             })
 
-            common.getSelector(instance).shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
-                event.preventDefault();
-                if ( common.getSelector(instance).shareContainer.classList.contains('share-active')) {
-                    let target = event.target as HTMLElement;
-                    if (target.classList.contains('share-active') || target.classList.contains('player-lt__close-button')) {
-                        common.inactiveModal(instance, common.getSelector(instance));
+            if (common.getSelector(instance).shareContainer) {
+                common.getSelector(instance).shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
+                    event.preventDefault();
+                    if ( common.getSelector(instance).shareContainer.classList.contains('share-active')) {
+                        let target = event.target as HTMLElement;
+                        if (target.classList.contains('share-active') || target.classList.contains('player-lt__close-button')) {
+                            common.inactiveModal(instance, common.getSelector(instance));
+                        }
                     }
-                }
-            })
-
-
+                })
+            }
         }
     }
 
@@ -87,17 +87,17 @@ export namespace LTPlayerShareEvents {
                 }
             })
 
-            common.getSelector(instance).shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
-                event.preventDefault();
-                if ( common.getSelector(instance).shareContainer.classList.contains('share-active')) {
-                    let target = event.target as HTMLElement;
-                    if (target.classList.contains('share-active') || target.classList.contains('player-lt__close-button')) {
-                        common.inactiveModal(instance, common.getSelector(instance));
+            if (common.getSelector(instance).shareContainer) {
+                common.getSelector(instance).shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
+                    event.preventDefault();
+                    if ( common.getSelector(instance).shareContainer.classList.contains('share-active')) {
+                        let target = event.target as HTMLElement;
+                        if (target.classList.contains('share-active') || target.classList.contains('player-lt__close-button')) {
+                            common.inactiveModal(instance, common.getSelector(instance));
+                        }
                     }
-                }
-            })
-
-
+                })
+            }
         }
     }
 }

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/IconsService.ts

@@ -33,6 +33,11 @@ export class IconsService {
         'university',
     ]
 
+    playPause = [
+        'play',
+        'pause'
+    ]
+
     constructor() {
         this.path = require.context('../assets/icons', false);
     }
@@ -86,6 +91,16 @@ export class IconsService {
                         }
                     })
                 })
+            break
+            case 'playPause':
+                this.path.keys().forEach(item => {
+                    this.playPause.forEach(mapElement => {
+                        let name = item.replace(/(\.(?:jpg|png|svg))$/i, "").replace('./', '');
+                        if (name === mapElement) {
+                            Object.assign(response, {[name] : this.path(item)})
+                        }
+                    })
+                })
         }
 
 

package/src/services/LTPlayerRotateDeviceService.ts

@@ -3,6 +3,13 @@ export class LTPlayerRotateDeviceService {
     }
 
     getDeviceOrientation() {
-        return screen.orientation.type.replace('-primary', '');
+        if (window.matchMedia("(orientation: portrait)").matches) {
+            return 'portrait';
+        }
+
+        if (window.matchMedia("(orientation: landscape)").matches) {
+            return 'landscape';
+        }
+        return 'portrait';
     }
 }

package/src/services/ResizeService.ts

@@ -136,19 +136,20 @@ export class ResizeService {
     protected setAddInfoByDimensions(containerWidth: number, buttonsTemplate:string, deskEvent: LTPlayerAdditionalInfo.Desktop, controller: LTPLayerAddInfo.Controller) {
 
         const createAddInfoButtonsOutSide = () => {
-            let addInfoContainer = document.querySelector('.lt-player__additional-info');
+
+            let addInfoContainer = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             if (addInfoContainer) {
                 addInfoContainer.remove();
             }
 
             this.playerInstance.plyr.elements.container.insertAdjacentHTML("afterend", buttonsTemplate);
-            let inserted = document.querySelector('.lt-player__additional-info');
+            let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             inserted.classList.add('lt-player__additional-info__is_set_out-side');
             deskEvent.set(controller);
         }
 
         const createAddInfoButtonsInSide = () => {
-            let addInfoContainer = document.querySelector('.lt-player__additional-info');
+            let addInfoContainer = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             if (addInfoContainer) {
                 addInfoContainer.remove();
             }
@@ -156,7 +157,7 @@ export class ResizeService {
             let  controlsInfoBody = this.playerInstance.plyr.elements.controls.querySelector('.content__body');
 
             controlsInfoBody.insertAdjacentHTML("afterend", buttonsTemplate);
-            let inserted = document.querySelector('.lt-player__additional-info');
+            let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             inserted.classList.add('lt-player__additional-info__is_set_in-side');
             deskEvent.set(controller);
         }
@@ -269,8 +270,25 @@ export class ResizeService {
             }
         }
 
-        setWidth();
-        setHeight();
+        const version = this.playerInstance.playerConfig.getVersion();
+        const observeConfig = this.playerInstance.playerConfig.getObserve();
+
+        if (observeConfig) {
+            if (observeConfig.hasOwnProperty('width') && observeConfig.width) {
+                setWidth();
+            }
+
+            if (observeConfig.hasOwnProperty('height') && observeConfig.height) {
+                setHeight();
+            }
+        } else {
+            setWidth();
+
+            if (version !== 1) {
+                setHeight();
+            }
+        }
+
         setClass();
     }
 }

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

@@ -38,16 +38,15 @@
         <!--                        <p class="poster-paragraph">{{videoTitle}}</p>-->
         <!--                    </div>-->
         <!--                </div>-->
-        <div class="lt-player-notification__notification-button-state d-none">
+        <div class="lt-player-notification__notification-button-state">
           <div class="player-state">
-            <img class="player-state__play-icon filter d-none" src="{{icons.play}}" alt="">
-            <img class="player-state__pause-icon filter" src="{{icons.pause}}" alt="">
+            <img class="player-state__icon filter" src="" alt="">
           </div>
         </div>
         <div class="lt-player-rewind-area">
         </div>
         <div class="lt-player-rewind lt-player-notify">
-          <div class="lt-player-rewind__icon">
+          <div class="lt-player-rewind__icon lt-player-rewind__icon__landscape">
             <div class="lt-player-rewind__icon-wrapper rotate">
               <img class="filter" src="{{icons.play}}" alt="">
               <img class="filter" src="{{icons.play}}" alt="">
@@ -58,7 +57,7 @@
         <div class="lt-player-forward-area">
         </div>
         <div class="lt-player-forward lt-player-notify">
-          <div class="lt-player-forward__icon">
+          <div class="lt-player-forward__icon lt-player-forward__icon__landscape">
             <div class="lt-player-rewind__icon-wrapper">
               <img class="filter" src="{{icons.play}}" alt="">
               <img class="filter" src="{{icons.play}}" alt="">
@@ -129,8 +128,8 @@
           <button type="button" class="plyr__control skip-backward-seconds" data-lt-player-chapterTimeStamp="">
             <img class="filter" src="{{icons.fast-backward}}" alt="">
           </button>
-          <div class="bottom-controller__play-button_body">
-            <button type="button" class="plyr__control play-button" aria-label="Play, {title}" data-plyr="play">
+          <div class="bottom-controller__play-button_body bottom-controller__play-button_body__landscape">
+            <button type="button" class="plyr__control play-button">
               <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
               <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
             </button>
@@ -166,6 +165,34 @@
       <div class="player-lt__modal__mobile__background d-none"></div>
       <div class="player-lt__modal__mobile d-none"></div>
     </div>
+    {{#mobile}}
+        <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}}
     <div class="plyr__controls">
@@ -198,20 +225,22 @@
       <div class="lt-player-notification">
         <div class="lt-player-notification__notification-button-state">
           <div class="player-state">
-            <img class="player-state__play-icon filter d-none" src="{{icons.play}}" alt="">
-            <img class="player-state__pause-icon filter d-none" src="{{icons.pause}}" alt="">
+            <img class="player-state__icon filter" src="" alt="">
           </div>
         </div>
         <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">
-          <div class="lt-player-rewind__icon">
+          <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="">
@@ -222,7 +251,7 @@
         <div class="lt-player-forward-area">
         </div>
         <div class="lt-player-forward lt-player-notify">
-          <div class="lt-player-forward__icon">
+          <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="">
@@ -279,8 +308,8 @@
         <button type="button" class="plyr__control skip-backward" data-lt-player-chapterTimeStamp="">
           <img class="filter" src="{{icons.skip-backward}}" alt="">
         </button>
-        <div class="bottom-controller__play-button_body">
-          <button type="button" class="plyr__control play-button" aria-label="Play, {title}" data-plyr="play">
+        <div class="bottom-controller__play-button_body bottom-controller__play-button_body__portrait">
+          <button type="button" class="plyr__control play-button">
             <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
             <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
           </button>
@@ -303,5 +332,33 @@
       <div class="player-lt__modal__mobile__background d-none"></div>
       <div class="player-lt__modal__mobile d-none"></div>
     </div>
+    {{#mobile}}
+        <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/settings.handlebars

@@ -3,14 +3,14 @@
     <span class="line-button"></span>
     {{#desktop}}
         <div class="settings-controllers-enable__subtitles settings">
-            <p class="settings-text">Subtitles</p>
+            <p class="settings-text settings">Subtitles</p>
             <label class="subtitles-body__switch settings">
                 <input id="captions-lt-player-{{id}}"  class="subtitles-body__input-switch settings" value="" type="checkbox">
                 <label for="captions-lt-player-{{id}}" class="subtitles-body__slider settings"></label>
             </label>
         </div>
         <div class="settings-controllers-enable__speed-range settings">
-            <p class="settings-text">Speed</p>
+            <p class="settings-text settings">Speed</p>
             <div class="speed-range-input-body settings">
                 <output class="settings speed-range-value" style="display: flex; justify-content: center" id="speed-range-value-{{id}}"></output>
                 <input id="speed-range-{{id}}" type="range"  min="0" max="3" step="1" class="speed-range-input settings">
@@ -19,7 +19,7 @@
     {{/desktop}}
     {{#mobile}}
         <div class="settings-controllers-enable__speed-range settings">
-            <p class="settings-text">Speed</p>
+            <p class="settings-text settings">Speed</p>
             <div class="speed-range-input-body mobile settings">
                 <button class="button-speed settings button_active" data-speed="1">1</button>
                 <button class="button-speed settings" data-speed="1.25">1.25</button>

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}}