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

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

@@ -24,6 +24,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
         playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}`;
         let plyr = this.settingsInstance.playerInstance.plyr;
+        let instance = this.settingsInstance.playerInstance;
 
         if (playerSpeedButton) {
             let mobileEvent: HammerManager = this.settingsInstance.playerInstance.eventInstance.mobileEvents.setMobileEvent(playerSpeedButton);
@@ -47,6 +48,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
                     plyr.speed = playSpeed;
                     playerSpeedButton.innerHTML = `${playSpeed}`;
 
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
             }
         }

package/src/components/events/LTPlayer.ts

@@ -56,6 +56,7 @@ export namespace LTPlayerEvents {
                 const volumeBackground = volumeControl.querySelector('.volume_control__background');
                 const volumeBackgroundArea = volumeControl.querySelector('.volume_control__background__area');
                 const volumeArea = volumeControl.querySelector('.volume_control__background__area__range');
+                const controlsBackground = player.elements.container.querySelector('.plyr__controls__mobile-background');
 
 
                 if (volumeButton) {
@@ -79,6 +80,12 @@ export namespace LTPlayerEvents {
                     volumeControl.classList.remove('volume-control-enable');
                 }
 
+                if (controlsBackground) {
+                    if (!controlsBackground.classList.contains('d-none')) {
+                        controlsBackground.classList.add('d-none');
+                    }
+                }
+
             }
             const enablePoster = () => {
 

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/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/views/controls.handlebars

@@ -40,14 +40,13 @@
         <!--                </div>-->
         <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,9 @@
       <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>
+    {{/mobile}}
   {{/landscape}}
   {{#portrait}}
     <div class="plyr__controls">
@@ -198,8 +200,7 @@
       <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">
@@ -211,7 +212,7 @@
         <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 +223,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 +280,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 +304,8 @@
       <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>
+    {{/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>