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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.8",
+  "version": "1.0.9-b",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",

package/src/assets/css/sample.css

@@ -0,0 +1,12 @@
+.container-text-portrait-player {
+  display: flex;
+  max-width: 400px;
+  margin: auto;
+  justify-content: center;
+  padding: 3rem 0;
+}
+
+.container-text-landscape-player {
+  display: flex;
+  max-width: 1000px;
+}

package/src/assets/sass/app.scss

@@ -28,18 +28,6 @@ body {
   margin: 0;
 }
 
-.container-text-portrait-player {
-  display: flex;
-  max-width: 800px;
-  max-height: 800px;
-  margin-bottom: 3rem;
-}
-
-.container-text-landscape-player {
-  display: flex;
-  max-width: 1000px;
-}
-
 //---------------------------------------------
 // 3. General
 //---------------------------------------------

package/src/assets/sass/core/_player.scss

@@ -45,3 +45,9 @@
     }
   }
 }
+
+.lt-player-portrate--mobile {
+  .fullscreen-custom-control {
+    display: none !important;
+  }
+}

package/src/assets/sass/sections/_additional-info.scss

@@ -81,3 +81,10 @@
   width: 100%;
   height: 100%;
 }
+
+.is-fullscreen {
+  .lt-player__additional-info,
+  .lt-player__additional-info-mobile {
+    display: none;
+  }
+}

package/src/assets/sass/sections/controllers/_botom.scss

@@ -50,6 +50,31 @@
         margin-left: auto;
         justify-content: end;
         flex: 1;
+
+        .plyr__controls_speed-button {
+          width: 30px;
+          height: 30px;
+          background-color: $default-lt-player-blue;
+          font-size: $lt-player-font-size-xs;
+          font-weight: $lt-player-font-weight-md;
+
+          &:hover {
+            background-color: darken($default-lt-player-blue, 5%);
+          }
+
+          &:focus,
+          &:active {
+            background-color: $default-lt-player-blue;
+          }
+
+          span {
+            font-size: 10px;
+          }
+
+          [class="playback-speed--1.25X"] {
+            font-size: 8px;
+          }
+        }
       }
 
       .skip-backward-seconds,
@@ -313,6 +338,19 @@
             padding: 16px;
           }
         }
+
+        .plyr__controls_speed-button {
+          width: 40px;
+          height: 40px;
+
+          span {
+            font-size: 14px;
+          }
+
+          [class="playback-speed--1.25X"] {
+            font-size: 9px;
+          }
+        }
       }
     }
   }

package/src/components/config/LTPlayerConfig.ts

@@ -225,6 +225,8 @@ export class LTPlayerConfig {
     }
 
     getFullscreenMode() {
+        return {fullscreen: {enabled: true}};
+
         if (this.getDevice() === 'mobile') {
             return {fullscreen: {enabled: false}}
         } else {

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -246,7 +246,6 @@ export namespace LTPlayerControlsEvents  {
                     instance.plyr.fullscreen.toggle();
                 })
             }
-
         }
 
         fullscreenIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string){
@@ -612,18 +611,19 @@ export namespace LTPlayerControlsEvents  {
         }
 
         fullScreenButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
             let playerControlsSelector = instance.plyr.elements.controls;
 
             const fullScreenButtonContainer = playerControlsSelector.querySelector('.fullscreen-custom-control');
             let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(fullScreenButtonContainer);
 
             if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileFullScreen() {
+                mobileEvent.on('singletap', function LTPlayerMobileFullScreen(event) {
+                    event.preventDefault();
                     instance.plyr.fullscreen.toggle();
                 })
             }
         }
+
         playPauseIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
             let common = this.common;
             let instanceMobile = this;
@@ -750,49 +750,46 @@ export namespace LTPlayerControlsEvents  {
             }
         }
 
-        //remove volume
-        // volume(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-        //     let playerControlsContainer = instance.plyr.elements.controls;
-        //     const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-        //     const volumeButton = volume.querySelector('button');
-        //     const volumeUp = volume.querySelector('.volume-max');
-        //     const volumeMute = volume.querySelector('.volume-mute');
-        //
-        //     const setVolumeIcon = (volumeState: string) => {
-        //         if (volumeState === 'up') {
-        //             volumeUp.classList.remove('d-none');
-        //             volumeMute.classList.remove('d-none');
-        //             volumeMute.classList.add('d-none');
-        //         } else {
-        //             volumeUp.classList.remove('d-none');
-        //             volumeMute.classList.remove('d-none');
-        //             volumeUp.classList.add('d-none');
-        //         }
-        //     }
-        //
-        //     const setVolume = (): string => {
-        //         if (instance.plyr.muted) {
-        //             instance.plyr.muted = false;
-        //             return 'up';
-        //         } else {
-        //             instance.plyr.muted = true;
-        //             return 'mute';
-        //         }
-        //     }
-        //
-        //     setVolumeIcon('up');
-        //
-        //     let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(volumeButton);
-        //
-        //     mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
-        //         let volumeState = setVolume();
-        //         setVolumeIcon(volumeState);
-        //         instance.playerControl.mobileEvents.showControls(instance);
-        //     })
-        //
-        // }
-    }
+        volume(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+            let playerControlsContainer = instance.plyr.elements.controls;
+            const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
+            const setVolume = (): string => {
+                if (instance.plyr.muted) {
+                    instance.plyr.muted = false;
+                    return 'up';
+                } else {
+                    instance.plyr.muted = true;
+                    return 'mute';
+                }
+            }
 
+            if (volume) {
+                const volumeButton = volume.querySelector('button');
+                const volumeUp = volume.querySelector('.volume-max');
+                const volumeMute = volume.querySelector('.volume-mute');
 
+                const setVolumeIcon = (volumeState: string) => {
+                    if (volumeState === 'up') {
+                        volumeUp.classList.remove('d-none');
+                        volumeMute.classList.remove('d-none');
+                        volumeMute.classList.add('d-none');
+                    } else {
+                        volumeUp.classList.remove('d-none');
+                        volumeMute.classList.remove('d-none');
+                        volumeUp.classList.add('d-none');
+                    }
+                }
 
+                setVolumeIcon('up');
+
+                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(volumeButton);
+
+                mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
+                    let volumeState = setVolume();
+                    setVolumeIcon(volumeState);
+                    instance.playerControl.mobileEvents.showControls(instance);
+                })
+            }
+        }
+    }
 }

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

@@ -10,6 +10,7 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
     }
 
     init() {
+        this.setButtonSpeed();
         this.settingsInstance.common.addSettingsTemplate(this.settingsInstance.playerInstance.playerConfig.getDevice());
         this.addOpenSettingsEventButton();
         this.initCaptionsEvent();
@@ -19,11 +20,12 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
 
     addOpenSettingsEventButton() {
         const selectors: defaultType = this.settingsInstance.common.getSelectors();
-
-        selectors.button.addEventListener('click', (event: MouseEvent) => {
-            event.preventDefault();
-            this.settingsInstance.common.openSettings();
-        })
+        if (selectors.button) {
+            selectors.button.addEventListener('click', (event: MouseEvent) => {
+                event.preventDefault();
+                this.settingsInstance.common.openSettings();
+            })
+        }
     }
 
     initCaptionsEvent() {
@@ -84,4 +86,45 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
         })
     }
 
+    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) {
+            let speedSpan = document.createElement('span');
+            playerSpeedButton.appendChild(speedSpan);
+            speedSpan.innerHTML = `1X`;
+            speedSpan.className = '';
+            speedSpan.classList.add('playback-speed--1X');
+
+            playerSpeedButton.addEventListener('click', function(event) {
+                let playSpeed = plyr.speed + 0.25;
+
+                if (playSpeed > 2) {
+                    speedSpan.innerHTML = `1X`;
+                    plyr.speed = 1;
+                    speedSpan.className = '';
+                    speedSpan.classList.add('playback-speed--1X');
+                    return;
+                }
+
+                if (playSpeed === 1.75) {
+                    plyr.speed = playSpeed + 0.25
+                    speedSpan.innerHTML = `2X`;
+                    speedSpan.className = '';
+                    speedSpan.classList.add('playback-speed--2X');
+                    return;
+                }
+
+                plyr.speed = playSpeed;
+                speedSpan.innerHTML = playSpeed + "X";
+                speedSpan.className = '';
+                speedSpan.classList.add('playback-speed--' + playSpeed + 'X');
+
+                instance.playerControl.mobileEvents.showControls(instance);
+            })
+        }
+    }
 }

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,49 @@ 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) {
+            let speedSpan = document.createElement('span');
+            playerSpeedButton.appendChild(speedSpan);
+            speedSpan.innerHTML = `1X`;
+            speedSpan.className = '';
+            speedSpan.classList.add('playback-speed--1X');
+
+            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) {
+                        speedSpan.innerHTML = `1X`;
+                        plyr.speed = 1;
+                        speedSpan.className = '';
+                        speedSpan.classList.add('playback-speed--1X');
+                        return;
+                    }
+
+                    if (playSpeed === 1.75) {
+                        plyr.speed = playSpeed + 0.25
+                        speedSpan.innerHTML = `2X`;
+                        speedSpan.className = '';
+                        speedSpan.classList.add('playback-speed--2X');
+                        return;
+                    }
+
+                    plyr.speed = playSpeed;
+                    speedSpan.innerHTML = playSpeed + "X";
+                    speedSpan.className = '';
+                    speedSpan.classList.add('playback-speed--' + playSpeed + 'X');
+
+                    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();

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,7 @@
         </div>
         {{#mobile}}
         <div class="bottom-controller__right-buttons">
+            <button type="button" class="plyr__control plyr__controls_speed-button"></button>
         </div>
         {{/mobile}}
         {{#mobile}}
@@ -329,9 +342,7 @@
 
         {{#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>
+          <button type="button" class="plyr__control plyr__controls_speed-button"></button>
         </div>
         {{/desktop}}
       </div>