@latest-thinking/lt-player 1.0.8-g → 1.0.9

package/src/components/controls/settings/LTPlayerMobileSettingsControllers.ts

@@ -10,6 +10,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
 
     init() {
         this.addOpenSettingsEventButton();
+        this.setButtonSpeed();
     }
 
     addOpenSettingsEventButton() {
@@ -155,39 +156,39 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
             instance.setInactiveModal();
         })
     }
-    // setButtonSpeed() {
-    //     let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
-    //     let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
-    //     playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}X`;
-    //     let plyr = this.settingsInstance.playerInstance.plyr;
-    //     let instance = this.settingsInstance.playerInstance;
-    //
-    //     if (playerSpeedButton) {
-    //         let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(playerSpeedButton);
-    //         if (mobileEvent) {
-    //             mobileEvent.on('singletap', function LTPlayerMobileSpeedButton() {
-    //
-    //                 let playSpeed = plyr.speed + 0.25;
-    //
-    //                 if (playSpeed > 2) {
-    //                     playerSpeedButton.innerHTML = `1x`;
-    //                     plyr.speed = 1;
-    //                     return;
-    //                 }
-    //
-    //                 if (playSpeed === 1.75) {
-    //                     plyr.speed = playSpeed + 0.25
-    //                     playerSpeedButton.innerHTML = `${playSpeed + 0.25}X`;
-    //                     return;
-    //                 }
-    //
-    //                 plyr.speed = playSpeed;
-    //                 playerSpeedButton.innerHTML = `${playSpeed}X`;
-    //
-    //                 instance.playerControl.mobileEvents.showControls(instance);
-    //             })
-    //         }
-    //     }
-    // }
+    setButtonSpeed() {
+        let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
+        let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
+        let plyr = this.settingsInstance.playerInstance.plyr;
+        let instance = this.settingsInstance.playerInstance;
+
+        if (playerSpeedButton) {
+            playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}`;
+            let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(playerSpeedButton);
+            if (mobileEvent) {
+                mobileEvent.on('singletap', function LTPlayerMobileSpeedButton() {
+
+                    let playSpeed = plyr.speed + 0.25;
+
+                    if (playSpeed > 2) {
+                        playerSpeedButton.innerHTML = `1`;
+                        plyr.speed = 1;
+                        return;
+                    }
+
+                    if (playSpeed === 1.75) {
+                        plyr.speed = playSpeed + 0.25
+                        playerSpeedButton.innerHTML = `${playSpeed + 0.25}`;
+                        return;
+                    }
+
+                    plyr.speed = playSpeed;
+                    playerSpeedButton.innerHTML = `${playSpeed}`;
+
+                    instance.playerControl.mobileEvents.showControls(instance);
+                })
+            }
+        }
+    }
 
 }

package/src/components/events/LTPlayerDesktop.ts

@@ -140,8 +140,12 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
         let plyr: Plyr = this.plyr;
 
-        plyr.on('enterfullscreen', function LTPlayerDesktopEnterFullScreen() {
+        plyr.on('enterfullscreen', function LTPlayerDesktopEnterFullScreen(event) {
             //remove mini player on fullscreen
+            const target = event.target as HTMLElement;
+            const parent = target.closest('.lt-player');
+
+            parent.classList.add('is-fullscreen');
             instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'enterfullscreen');
 
             //fullscreen icon
@@ -151,8 +155,12 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
 
         });
 
-        plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen() {
+        plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen(event) {
             //add mini player on exit fullscreen
+            const target = event.target as HTMLElement;
+            const parent = target.closest('.lt-player');
+
+            parent.classList.remove('is-fullscreen');
             instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'exitfullscreen');
 
             //fullscreen icon

package/src/components/events/LTPlayerMobile.ts

@@ -54,6 +54,8 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
                 instance.playerId = instance.playerConfig.getPlayerId();
             }
 
+            eventManager.setDefaultSettingsConfig();
+
             if (instance.plyr.isHTML5) {
 
                 if (instance.hls) {
@@ -70,12 +72,12 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
                 }
             }
 
-            eventManager.setDefaultSettingsConfig();
-
             instance.posterManager.mobileEvents.showControls(instance);
 
             instance.playerControl.mobileEvents.controlsTimeShow(instance);
 
+            instance.playerControl.mobileEvents.fullScreenButtons(instance);
+
             //set play/pause icon
             instance.playerControl.mobileEvents.playPauseIcon(instance, 'ready');
 
@@ -84,7 +86,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             instance.playerControl.mobileEvents.backwardForwardSeconds(instance);
 
             //remove volume controller
-            // instance.playerControl.mobileEvents.volume(instance);
+            instance.playerControl.mobileEvents.volume(instance);
 
             //set settings controller
             instance.playerControl.settingsControlsManager.init(instance);
@@ -128,14 +130,24 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
         let plyr: Plyr = this.plyr;
 
-        plyr.on('enterfullscreen', function LTPlayerDesktopEnterFullScreen() {
+        plyr.on('enterfullscreen', function LTPlayerDesktopEnterFullScreen(event) {
+            const target = event.target as HTMLElement;
+            const parent = target.closest('.lt-player');
+
+            parent.classList.add('is-fullscreen');
+            instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'enterfullscreen');
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'enterfullscreen');
 
             instance.videoService.removeObjectFit();
         });
 
-        plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen() {
+        plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen(event) {
+            const target = event.target as HTMLElement;
+            const parent = target.closest('.lt-player');
+
+            parent.classList.remove('is-fullscreen');
+            instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'exitfullscreen');
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'exitfullscreen');
             instance.videoService.appendObjectFit();
@@ -185,15 +197,13 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
 
         //check if getDevice is mobile or desktop
         if (instance.player.playerConfig.getDevice() === 'mobile') {
-
             const manager = new Hammer.Manager(selector);
-
             manager.add(new Hammer.Pan({
                 direction : 30
             }))
 
             manager.add(new Hammer.Tap({
-                event : 'triepletap',
+                event : 'tripletap',
                 taps : 3
             }));
 
@@ -208,9 +218,9 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
 
             manager.get('doubletap').recognizeWith('singletap');
             manager.get('singletap').requireFailure('doubletap');
-            manager.get('triepletap').recognizeWith('doubletap');
-            manager.get('doubletap').requireFailure('triepletap');
-            manager.get('pan').set({direction: Hammer.DIRECTION_DOWN})
+            manager.get('tripletap').recognizeWith('doubletap');
+            manager.get('doubletap').requireFailure('tripletap');
+            manager.get('pan').set({direction: Hammer.DIRECTION_DOWN});
 
             return manager;
         }

package/src/services/ResizeService.ts

@@ -212,34 +212,37 @@ export class ResizeService {
             }
         }
 
-            if (containerWidth >= 380) {
+            // if (containerWidth >= 380) {
+            //
+            //     if (this.addInfoInSide && (containerWidth + 70 <= 380)) {
+            //         return;
+            //     }
+            //
+            //     if (this.addInfoOutSide) {
+            //         return;
+            //     }
+            //
+            //     this.addInfoOutSide = true;
+            //     this.addInfoInSide = false;
+            //
+            //     createAddInfoButtonsOutSide();
+            // } else {
+            //
+            //     if (this.addInfoOutSide && (containerWidth + 70 >= 380)) {
+            //         return;
+            //     }
+            //
+            //     if (this.addInfoInSide) {
+            //         return;
+            //     }
+            //
+            //     this.addInfoInSide = true;
+            //     this.addInfoOutSide = false;
+            //     createAddInfoButtonsInSide();
+            // }
+
+        createAddInfoButtonsInSide();
 
-                if (this.addInfoInSide && (containerWidth + 70 <= 380)) {
-                    return;
-                }
-
-                if (this.addInfoOutSide) {
-                    return;
-                }
-
-                this.addInfoOutSide = true;
-                this.addInfoInSide = false;
-
-                createAddInfoButtonsOutSide();
-            } else {
-
-                if (this.addInfoOutSide && (containerWidth + 70 >= 380)) {
-                    return;
-                }
-
-                if (this.addInfoInSide) {
-                    return;
-                }
-
-                this.addInfoInSide = true;
-                this.addInfoOutSide = false;
-                createAddInfoButtonsInSide();
-            }
     }
 
     protected setDimensions(containerWidth: number, containerHeight: number, defaultData: defaultType) {

package/src/views/additionalInfo.handlebars

@@ -1,5 +1,16 @@
 {{#modal}}
     {{#mobile}}
+      {{#data}}
+        <div class="player-lt__modal__mobile__background"></div>
+          <div class="player-lt__modal__mobile">
+            <div class="player-lt__mobile__modal-header">
+              <span class="line-button"></span>
+            </div>
+            <div class="player-lt__mobile__modal-content">
+              {{{data}}}
+            </div>
+          </div>
+      {{/data}}
         {{#object_data}}
             <div class="player-lt__modal__mobile__background"></div>
             <div class="player-lt__modal__mobile">
@@ -28,7 +39,6 @@
             </div>
             </div>
         {{/object_data}}
-
     {{/mobile}}
     {{#desktop}}
         {{#object_data}}

package/src/views/controls.handlebars

@@ -208,17 +208,26 @@
           <div class="top-controllers__body__center">
             <p class="chapter"></p>
           </div>
-          <div class="top-controllers__body__right">
-            {{#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="">
-            </button>
-              <button type="button" class="plyr__control mini-player-control">
-                <img class="filter" src="{{icons.mini-player}}" alt="">
-              </button>
-            {{/desktop}}
-          </div>
+            <div class="top-controllers__body__right">
+                {{#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="">
+                    </button>
+                    <button type="button" class="plyr__control mini-player-control">
+                        <img class="filter" src="{{icons.mini-player}}" alt="">
+                    </button>
+                {{/desktop}}
+                {{#mobile}}
+                    <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="">
+                    </button>
+                    <button type="button" class="plyr__control mini-player-control">
+                        <img class="filter" src="{{icons.mini-player}}" alt="">
+                    </button>
+                {{/mobile}}
+            </div>
         </div>
       </div>
       <div class="lt-player-notification portrait">
@@ -275,9 +284,12 @@
       <div class="bottom-controller">
         {{#mobile}}
           <div class="bottom-controller__left-buttons">
-            <button type="button" class="plyr__control plyr__controls_settings-button settings">
-                <img class="filter settings" src="{{icons.settings}}" alt="">
-            </button>
+              <div class="bottom-controller__volume_control">
+                  <button type="button" class="plyr__control volume_control__volume-button button-open">
+                      <img class="volume-max filter button-open" data-range-value="1" src="{{icons.volume-3}}" alt="">
+                      <img class="volume-mute d-none filter button-open" data-range-value="0" src="{{icons.mute}}" alt="">
+                  </button>
+              </div>
           </div>
         {{/mobile}}
         {{#desktop}}
@@ -321,6 +333,9 @@
         </div>
         {{#mobile}}
         <div class="bottom-controller__right-buttons">
+            <button type="button" class="plyr__control plyr__controls_speed-button">
+                <span class="playback-speed"></span>
+            </button>
         </div>
         {{/mobile}}
         {{#mobile}}
@@ -329,8 +344,8 @@
 
         {{#desktop}}
         <div class="bottom-controller__right-buttons">
-          <button type="button" class="plyr__control plyr__controls_settings-button settings">
-            <img class="filter settings" src="{{icons.settings}}" alt="">
+          <button type="button" class="plyr__control plyr__controls_speed-button">
+              <span class="playback-speed></span>
           </button>
         </div>
         {{/desktop}}

package/src/views/template.handlebars

@@ -3,7 +3,7 @@
 </div>
 {{/embedded}}
 {{#video}}
-<video class="embed_player lt-player-wrapper" playsinline controls>
+<video class="embed_player lt-player-wrapper" playsinline controls crossorigin preload="none">
     <source src="{{videoUrl.videoUrl}}"/>
     {{#defaultConfig.captions}}
     <track kind="captions" label="{{label}} captions" src="{{url}}" srclang="{{srclang}}" {{default}} />