@latest-thinking/lt-player 1.0.3-c → 1.0.4-c

package/src/components/events/LTPlayerMobile.ts

@@ -21,6 +21,8 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         this.plyrEndVideo();
         this.plyrFullScreen();
         this.plyrTimeUpdate();
+        this.plyrOnPlay();
+        this.plyrOnPause();
     }
 
     plyrOnReady(): void {
@@ -46,20 +48,15 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
                 }
             }
 
-            eventManager.setDefaultSettingsConfig(true);
+            eventManager.setDefaultSettingsConfig();
 
             instance.posterManager.mobileEvents.showControls(instance);
 
-
             instance.playerControl.mobileEvents.controlsTimeShow(instance);
 
-            // //set fullscreen button
-            // instance.playerControl.mobileEvents.fullScreenButtons(instance);
-
             //set play/pause icon
             instance.playerControl.mobileEvents.playPauseIcon(instance, 'ready');
 
-
             //set rewind/forward
             instance.playerControl.mobileEvents.backwardForward(instance);
             instance.playerControl.mobileEvents.backwardForwardSeconds(instance);
@@ -67,10 +64,6 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             //set volume controller
             instance.playerControl.mobileEvents.volume(instance);
 
-
-            //set volume controller
-            instance.playerControl.mobileEvents.share(instance);
-
             //set settings controller
             instance.playerControl.settingsControlsManager.init(instance);
 
@@ -137,12 +130,29 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             }
 
             eventManager.timeUpdate(event);
-            instance.playerControl.mobileEvents.playPauseIcon(instance, 'timeupdate');
 
             instance.playerControl.mobileEvents.removePlyrControlsClass(instance);
         })
     }
 
+    plyrOnPlay() {
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('play', function LTPlayerDesktopTimeUpdate(event) {
+            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
+        })
+    }
+
+    plyrOnPause() {
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('pause', function LTPlayerDesktopTimeUpdate(event) {
+            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
+        })
+    }
+
     setMobileEvent = (selector: Element): undefined | HammerManager => {
         let instance = this;
 

package/src/components/poster/LTPlayerPoster.ts

@@ -1,21 +1,14 @@
 import {TemplateService} from "../../services/TemplateService";
 import {LTPlayerConfig} from "../LTPlayerConfig";
 import {IconsService} from "../../services/IconsService";
-import {LoaderService} from "../../services/LoaderService";
 import Plyr from "plyr";
-import {LTPlayer} from "../LTPlayerType";
-import {LTPlayerPosterEvents} from "./LTPlayerPosterEvents";
-
 
 export class LTPlayerPoster {
-
     custom_selector: string = 'lt-player__poster';
     config: LTPlayerConfig;
     iconService: IconsService;
     templateService: TemplateService;
     plyr: Plyr
-
-
     constructor(player: Plyr, templateService: TemplateService, config: LTPlayerConfig, iconService: IconsService) {
         this.plyr = player;
         this.iconService = iconService;
@@ -24,11 +17,12 @@ export class LTPlayerPoster {
     }
 
     setTemplate() {
+
         Object.assign(this.config, this.iconService.getIconsByComponent('poster'));
 
         const logo: string = this.iconService.getLogo();
 
-        const posterTemplate = this.templateService.getPoster({config:this.config, logoBig: logo});
+        const posterTemplate = this.templateService.getPoster({config:this.config, logoBig: logo, isShare : !!(this.config.getShareData())});
 
         const container = this.plyr.elements.wrapper;
 
@@ -38,8 +32,7 @@ export class LTPlayerPoster {
 
     setImage() {
         return new Promise((resolve, reject) => {
-            const playerContainer = this.plyr.elements.container;
-            const posterImageBody: HTMLElement = playerContainer.querySelector('.lt-player__poster__image-body');
+            const posterImageBody: HTMLElement = this.plyr.elements.container.querySelector('.lt-player__poster__image-body');
 
             if (posterImageBody) {
                 const imageTag = document.createElement('img');
@@ -59,9 +52,7 @@ export class LTPlayerPoster {
     }
 
     removeDefaultImage() {
-        const playerContainer = this.plyr.elements.container;
-        const posterImage: HTMLElement = playerContainer.querySelector('.lt-player__poster__img');
-
+        const posterImage: HTMLElement = this.plyr.elements.container.querySelector('.lt-player__poster__img');
         posterImage.classList.add('d-none');
     }
 

package/src/components/share/LTPlayerShare.ts

@@ -0,0 +1,40 @@
+import {LTPlayer} from "../LTPlayerType";
+import {LTPlayerConfig} from "../LTPlayerConfig";
+import {IconsService} from "../../services/IconsService";
+import {TemplateService} from "../../services/TemplateService";
+import {LTPlayerShareEvents} from "./LTPlayerShareEvents";
+import {shareType} from "../../global/types/ModuleTypes";
+
+export class LTPlayerShare {
+    instance: LTPlayer.LandscapeType | LTPlayer.PortraitType
+    playerConfig: LTPlayerConfig
+    iconService: IconsService
+    templateService: TemplateService
+    events: shareType = { desktop: new LTPlayerShareEvents.desktop(), mobile: new LTPlayerShareEvents.mobile() }
+
+    constructor() {
+    }
+
+    init(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+        this.instance = instance;
+        this.playerConfig = instance.playerConfig;
+        this.templateService = instance.templateService;
+        this.iconService = instance.iconService;
+        this.setTemplate();
+        this.appendScriptTag();
+    }
+
+    setTemplate() {
+      const playerContainer = this.instance.plyr.elements.wrapper;
+      playerContainer.insertAdjacentHTML("afterend", this.templateService.getShare(this.playerConfig.getShareData()));
+    }
+
+    appendScriptTag() {
+        const script = document.createElement("script");
+        script.type = "text/javascript";
+        script.src = "https://static.addtoany.com/menu/page.js";
+        script.async;
+        document.body.appendChild(script);
+    }
+
+}

package/src/components/share/LTPlayerShareEvents.ts

@@ -0,0 +1,103 @@
+import {LTPlayer} from "../LTPlayerType";
+import {defaultType} from "../../global/types/ModuleTypes";
+
+export namespace LTPlayerShareEvents {
+
+    export class common {
+
+        isPlaying : boolean
+        activeModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
+            selectors.shareContainer.classList.remove('share-inactive');
+            selectors.shareContainer.classList.add('share-active');
+            if (instance.plyr.playing) {
+                this.isPlaying = true;
+                instance.plyr.pause();
+            } else {
+                this.isPlaying = false;
+            }
+        }
+
+        inactiveModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
+            selectors.shareContainer.classList.add('share-inactive');
+            selectors.shareContainer.classList.remove('share-active');
+            if (this.isPlaying) {
+                instance.plyr.play();
+            }
+        }
+
+        getSelector(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+            return {
+                buttons : [
+                    instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
+                    instance.plyr.elements.controls.querySelector('.lt-player-share'),
+                ],
+                shareContainer : instance.plyr.elements.container.querySelector('.share-controller-wrapper')
+            };
+        }
+
+        copyButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+            return instance.plyr.elements.container.querySelectorAll('.share-controller-link');
+        }
+    }
+    export class mobile {
+        common : LTPlayerShareEvents.common
+        constructor() {
+            this.common = new common();
+        }
+
+        init(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+
+            const common = this.common;
+            common.getSelector(instance).buttons.forEach(button => {
+                if (button) {
+                    button.addEventListener('click', () => {
+                        common.activeModal(instance, this.common.getSelector(instance));
+                    })
+                }
+            })
+
+            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));
+                    }
+                }
+            })
+
+
+        }
+    }
+
+    export class desktop {
+        common : LTPlayerShareEvents.common
+        constructor() {
+            this.common = new common();
+        }
+
+        init(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+
+            const common = this.common;
+            common.getSelector(instance).buttons.forEach(button => {
+                if (button) {
+                    button.addEventListener('click', () => {
+                        common.activeModal(instance, this.common.getSelector(instance));
+                    })
+                }
+            })
+
+            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,6 +1,5 @@
 import {LTPlayerConfig} from "../../components/LTPlayerConfig";
 import {LTPlayerControls} from "../../components/controls/LTPlayerControls";
-import {LTPlayerPoster} from "../../components/poster/LTPlayerPoster";
 import Plyr from "plyr";
 import {TemplateService} from "../../services/TemplateService";
 import {IconsService} from "../../services/IconsService";
@@ -11,6 +10,7 @@ import {LTPlayerMini} from "../../components/controls/LTPlayerMini";
 import {LTPlayerDevMethode} from "../../components/LTPlayerDevMethode";
 import {LTPlayerEventsManager} from "../../components/LTPlayerEventsManager";
 import {LTPlayerPosterManager} from "../../components/poster/LTPlayerPosterManager";
+import {LTPlayerShare} from "../../components/share/LTPlayerShare";
 
 /**
  * Default Player type Service
@@ -31,6 +31,7 @@ export class LTPlayerController {
     devMethodePreload: LTPlayerDevMethode.Preload
     eventInstance: LTPlayerEventsManager
     posterManager : LTPlayerPosterManager
+    share : LTPlayerShare
     /**
      * Base player type service
      */
@@ -40,5 +41,6 @@ export class LTPlayerController {
         this.templateService = new TemplateService();
         this.playerControl = new LTPlayerControls(this.templateService);
         this.posterManager = new LTPlayerPosterManager();
+        this.share = new LTPlayerShare();
     }
 }

package/src/global/types/ModuleTypes.d.ts

@@ -1,5 +1,6 @@
 import {LTPlayer} from "../../components/LTPlayerType";
 import Plyr from "plyr";
+import {LTPlayerShareEvents} from "../../components/share/LTPlayerShareEvents";
 
 type playerConfigType = {[index: string]: any}
 
@@ -27,3 +28,8 @@ type urlVideoType = {
     embedId : string
     embedHash : string
 }
+
+type shareType = {
+    mobile : LTPlayerShareEvents.mobile,
+    desktop  : LTPlayerShareEvents.desktop
+}

package/src/index.ts

@@ -1,11 +1,9 @@
-import '~/assets/sass/app.scss';
 import {LTPlayerManager} from "./components/LTPlayerManager";
 
 
-// todo remove from window, it's for developer
+//todo remove from window, it's for developer
 window.addEventListener('load', function () {
     if (window.Player === undefined) {
         window.Player = new LTPlayerManager();
     }
-    window.Player.initPageDomElements()
 })

package/src/services/IconsService.ts

@@ -4,7 +4,8 @@ export class IconsService {
 
     posterMapIconsName = [
         'play',
-        'logo'
+        'logo',
+        'share'
     ];
 
     controlsMapIconsName = [

package/src/views/controls.handlebars

@@ -38,20 +38,32 @@
         <!--                        <p class="poster-paragraph">{{videoTitle}}</p>-->
         <!--                    </div>-->
         <!--                </div>-->
+        <div class="lt-player-notification__notification-button-state d-none">
+          <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="">
+          </div>
+        </div>
         <div class="lt-player-rewind-area">
         </div>
         <div class="lt-player-rewind lt-player-notify">
           <div class="lt-player-rewind__icon">
-            <i class="left-triangle triangle">◀◀◀</i>
-            <span class="rewind">10 seconds</span>
+            <div class="lt-player-rewind__icon-wrapper rotate">
+              <img class="filter" src="{{icons.play}}" alt="">
+              <img class="filter" src="{{icons.play}}" alt="">
+            </div>
+            <span class="rewind">10 sec</span>
           </div>
         </div>
         <div class="lt-player-forward-area">
         </div>
         <div class="lt-player-forward lt-player-notify">
           <div class="lt-player-forward__icon">
-            <i class="right-triangle triangle">▶▶▶</i>
-            <span class="forward">10 seconds</span>
+            <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>
@@ -166,15 +178,12 @@
                 <img class="filter" src="{{icons.share}}" alt="">
               </button>
             {{/isShare}}
-            <button type="button" class="plyr__control lt-player-share invisible">
-              <img class="filter" src="{{icons.share}}" alt="">
-            </button>
           </div>
           <div class="top-controllers__body__center">
             <p class="chapter"></p>
           </div>
           <div class="top-controllers__body__right">
-              {{#desktop}}
+            {{#desktop}}
             <button type="button" class="plyr__control fullscreen-custom-control">
               <img class="filter minimize d-none" src="{{icons.minimize}}" alt="">
               <img class="filter maximize" src="{{icons.maximize}}" alt="">
@@ -187,6 +196,12 @@
         </div>
       </div>
       <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="">
+          </div>
+        </div>
         <div class="lt-player-video-content">
           <div class="content__body">
             <h4 class="poster-title">{{videoParagraph}}</h4>
@@ -197,16 +212,22 @@
         </div>
         <div class="lt-player-rewind lt-player-notify">
           <div class="lt-player-rewind__icon">
-            <i class="left-triangle triangle">◀◀◀</i>
-            <span class="rewind">10 seconds</span>
+            <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">
-            <i class="right-triangle triangle">▶▶▶</i>
-            <span class="forward">10 seconds</span>
+            <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>

package/src/views/poster.handlebars

@@ -23,13 +23,11 @@
               <button class="poster-button-watch-now">
                 Watch now
               </button>
-              <!--              Lt player share-->
-
-<!--              <button class="poster-lt-player-share" type="button">-->
-<!--                <img class="filter" src="{{config.icons.share}}" alt="" role="presentation" >-->
-<!--              </button>-->
-
-              <!--              Lt player share-->
+            {{#isShare}}
+              <button class="poster-lt-player-share" type="button">
+                <img class="filter" src="{{config.share}}" alt="" role="presentation" >
+              </button>
+            {{/isShare}}
             </div>
           </div>
         </div>