@latest-thinking/lt-player 1.0.4 → 1.0.5-b

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -1,7 +1,6 @@
 import {LTPlayer} from "../LTPlayerType";
 import {plyr} from "../../global/types/ModuleTypes";
 
-
 export namespace LTPlayerControlsEvents  {
 
     export class Common {
@@ -9,14 +8,29 @@ export namespace LTPlayerControlsEvents  {
         backwardRewind = {
 
             getSelectors(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-               return {
+
+               let selectors = {
                    playerContainer: instance.plyr.elements.container,
                    playerControlsContainer: instance.plyr.elements.controls,
                    forwardArea: instance.plyr.elements.controls.querySelector('.lt-player-forward-area'),
                    rewindArea: instance.plyr.elements.controls.querySelector('.lt-player-rewind-area'),
                    forwardAnimation: instance.plyr.elements.controls.querySelector('.lt-player-forward'),
-                   rewindAnimation: instance.plyr.elements.controls.querySelector('.lt-player-rewind')
-               };
+                   rewindAnimation: instance.plyr.elements.controls.querySelector('.lt-player-rewind'),
+                   forwardAreaBackground: null as Element,
+                   rewindAreaBackground:  null as Element,
+                   forwardAnimationBackground:  null as Element,
+                   rewindAnimationBackground:  null as Element,
+
+               }
+
+               if (instance.playerConfig.getDevice() === 'mobile') {
+                   selectors.forwardAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward-area')
+                   selectors.rewindAreaBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind-area')
+                   selectors.forwardAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-forward')
+                   selectors.rewindAnimationBackground = instance.plyr.elements.container.querySelector('.plyr__controls__mobile-background').querySelector('.lt-player-rewind')
+               }
+
+               return selectors
             },
 
             updateCurrentTime(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType ,time: number) {
@@ -29,29 +43,23 @@ export namespace LTPlayerControlsEvents  {
 
             playPause(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
-                const playInfoIcon = instance.plyr.elements.controls.querySelector('.player-state__play-icon');
-                const pauseInfoIcon = instance.plyr.elements.controls.querySelector('.player-state__pause-icon');
+                const icons = instance.iconService.getIconsByComponent('playPause') as {play : string, pause: string};
                 const playerStateInfo = instance.plyr.elements.controls.querySelector('.player-state');
+                const iconSelector: HTMLImageElement = playerStateInfo.querySelector('.player-state__icon');
 
                 const removeStateButtons = () => {
                     setTimeout(() => {
                         playerStateInfo.classList.remove('active');
-                        setTimeout(() => {
-                            playInfoIcon.classList.add('d-none');
-                            pauseInfoIcon.classList.add('d-none');
-                        }, 300)
-                    }, 300)
-
+                    }, 200)
                 }
 
-
                 if (instance.plyr.playing) {
-                    pauseInfoIcon.classList.remove('d-none');
+                    iconSelector.src = icons.pause;
                     playerStateInfo.classList.add('active');
                     instance.plyr.togglePlay(false);
                     removeStateButtons();
                 } else {
-                    playInfoIcon.classList.remove('d-none');
+                    iconSelector.src = icons.play;
                     playerStateInfo.classList.add('active');
                     instance.plyr.togglePlay(true);
                     removeStateButtons();
@@ -64,9 +72,58 @@ export namespace LTPlayerControlsEvents  {
 
             animateNotificationOut(selector: Element) {
                 selector.classList.remove('animate-in');
-            }
+            },
         }
 
+        checkTitleBreakWord(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+            const controlsSelector = instance.plyr.elements.controls;
+            const videoTitle = controlsSelector.querySelector('.poster-paragraph__content');
+            const readButton = controlsSelector.querySelector('.poster-paragraph__button');
+
+            if (!videoTitle) {
+                return;
+            }
+
+            if (videoTitle.scrollHeight <= videoTitle.clientHeight) {
+                readButton.classList.add('d-none');
+                return;
+            }
+
+            const heightContent = videoTitle.scrollHeight;
+
+            const openHide = () => {
+
+                let inlineStyleElement = videoTitle as unknown as ElementCSSInlineStyle
+
+                if (videoTitle.classList.contains('open-content')) {
+                    inlineStyleElement.style.maxHeight = null;
+                    setTimeout(() => {
+                        videoTitle.classList.remove('open-content');
+                    }, 300)
+                    readButton.innerHTML = 'Read more'
+                } else {
+                    readButton.innerHTML = 'Hide'
+                    inlineStyleElement.style.maxHeight = `${heightContent}px`;
+                    videoTitle.classList.add('open-content');
+                }
+            }
+
+            if (readButton) {
+
+                if (instance.playerConfig.getDevice() === 'mobile') {
+                    let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(readButton);
+                    mobileEvent.on('singletap', function LTPlayerMobileShowHideTitle() {
+                        openHide();
+                        instance.playerControl.mobileEvents.showControls(instance)
+                    })
+                } else {
+                    readButton.addEventListener('click', function LTPlayerTitleButton() {
+                        openHide();
+                    })
+                }
+            }
+
+        }
 
         playPauseIconTimeUpdate(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
@@ -77,14 +134,27 @@ export namespace LTPlayerControlsEvents  {
             const playIcon = playerContainer.querySelector('.bottom-controller__play-icon');
             const pauseIcon = playerContainer.querySelector('.bottom-controller__pause-icon');
 
-
-            if (player.playing) {
-                playIcon.classList.add('d-none');
-                pauseIcon.classList.remove('d-none');
+            if (player.isEmbed) {
+                player.embed.getPaused().then((paused: any) => {
+                    if (paused) {
+                        pauseIcon.classList.add('d-none');
+                        playIcon.classList.remove('d-none');
+                    } else {
+                        playIcon.classList.add('d-none');
+                        pauseIcon.classList.remove('d-none');
+                    }
+                })
             } else {
-                pauseIcon.classList.add('d-none');
-                playIcon.classList.remove('d-none');
+                if (player.playing) {
+                    playIcon.classList.add('d-none');
+                    pauseIcon.classList.remove('d-none');
+                } else {
+                    pauseIcon.classList.add('d-none');
+                    playIcon.classList.remove('d-none');
+                }
             }
+
+
         }
     }
 
@@ -94,7 +164,9 @@ export namespace LTPlayerControlsEvents  {
         constructor() {
             this.common = new Common();
         }
-
+        titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+            this.common.checkTitleBreakWord(instance)
+        }
         subtitles(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
 
             const playerContainer = instance.plyr.elements.container;
@@ -128,7 +200,7 @@ export namespace LTPlayerControlsEvents  {
 
 
             controls.addEventListener('mouseleave', function () {
-                controls.classList.remove('plyr__controls-enable')
+                // controls.classList.remove('plyr__controls-enable')
             })
         }
 
@@ -166,9 +238,23 @@ export namespace LTPlayerControlsEvents  {
         }
 
         playPauseIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
+            let common = this.common;
             switch (type) {
                 case 'timeupdate':
                    this.common.playPauseIconTimeUpdate(instance);
+               break
+                case 'ready':
+                    const playButton = instance.plyr.elements.controls.querySelector('.play-button');
+                    if (playButton) {
+                        playButton.addEventListener('click', function LTPlayerPlayButton() {
+                            if (instance.plyr.playing) {
+                                instance.plyr.togglePlay(false);
+                            } else {
+                                instance.plyr.togglePlay(true);
+                            }
+                            common.playPauseIconTimeUpdate(instance);
+                        })
+                    }
             }
         }
 
@@ -180,22 +266,34 @@ export namespace LTPlayerControlsEvents  {
             if (selectors.forwardArea) {
                 selectors.forwardArea.addEventListener('dblclick', function LTPlayerForwardDbClick(event) {
                     event.preventDefault();
+
+                    const playerState = selectors.playerControlsContainer.querySelector('.lt-player-notification__notification-button-state');
+
+                    if (playerState && !playerState.classList.contains('d-none')) {
+                        playerState.classList.add('d-none');
+                    }
+
                     common.backwardRewind.animateNotificationIn(selectors.forwardAnimation);
                     common.backwardRewind.updateCurrentTime(instance, 10);
                     setTimeout(() => {
-                        common.backwardRewind.animateNotificationOut(selectors.forwardAnimation)
+                        common.backwardRewind.animateNotificationOut(selectors.forwardAnimation);
+                        playerState.classList.remove('d-none');
                     }, 500)
                 })
 
                 selectors.forwardArea.addEventListener('click', function LTPlayerForwardClick(event) {
                     event.preventDefault();
-                    const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
 
-                    if (volumeControlArea) {
-                        if (!volumeControlArea.classList.contains('volume-control-enable')) {
-                            common.backwardRewind.playPause(instance);
+                    setTimeout(() => {
+                        const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
+
+                        if (volumeControlArea) {
+                            if (!volumeControlArea.classList.contains('volume-control-enable')) {
+                                common.backwardRewind.playPause(instance);
+                            }
                         }
-                    }
+                    }, 100)
+
 
                 })
             }
@@ -204,22 +302,35 @@ export namespace LTPlayerControlsEvents  {
 
                 selectors.rewindArea.addEventListener('dblclick', function LTPlayerRewindDbClick(event) {
                     event.preventDefault();
+
+                    const playerState = selectors.playerControlsContainer.querySelector('.lt-player-notification__notification-button-state');
+
+                    if (playerState && !playerState.classList.contains('d-none')) {
+                        playerState.classList.add('d-none');
+                    }
+
+
                     common.backwardRewind.animateNotificationIn(selectors.rewindAnimation);
                     common.backwardRewind.updateCurrentTime(instance, -10);
                     setTimeout(() => {
-                        common.backwardRewind.animateNotificationOut(selectors.rewindAnimation)
+                        common.backwardRewind.animateNotificationOut(selectors.rewindAnimation);
+                        playerState.classList.remove('d-none');
                     }, 500)
                 })
 
                 selectors.rewindArea.addEventListener('click', function LTPlayerRewindClick(event) {
                     event.preventDefault();
-                    const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
 
-                    if (volumeControlArea) {
-                        if (!volumeControlArea.classList.contains('volume-control-enable')) {
-                            common.backwardRewind.playPause(instance);
+                    setTimeout(() => {
+                        const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
+
+                        if (volumeControlArea) {
+                            if (!volumeControlArea.classList.contains('volume-control-enable')) {
+                                common.backwardRewind.playPause(instance);
+                            }
                         }
-                    }
+                    }, 100)
+
                 })
 
             }
@@ -375,27 +486,29 @@ export namespace LTPlayerControlsEvents  {
         }
         seekBar(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
             const playerControlsContainer = instance.plyr.elements.controls;
-            const seekBar = playerControlsContainer.querySelector('.plyr__progress__seek');
+            const seekBar: HTMLInputElement = playerControlsContainer.querySelector('.plyr__progress__seek');
             const rangeTouch = require('rangetouch');
             rangeTouch.setup(seekBar);
+            const __this = this;
+            seekBar.addEventListener('change', () => {
+                __this.showControls(instance);
+            })
+
         }
 
         controlsTimeShow(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
             const playerContainer = instance.plyr.elements.container;
-            const playerControlsContainer = instance.plyr.elements.controls;
+            const playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
             const __this = this;
+            if (playerControlsBackground) {
+                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerControlsBackground);
 
-            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerControlsContainer);
-
-            if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileFullScreen() {
-
-                    if (!playerContainer.classList.contains('plyr__controls-enable')) {
+                if (mobileEvent) {
+                    mobileEvent.on('singletap', function LTPlayerMobileBack() {
                         __this.showControls(instance);
-                    }
-                })
+                    })
+                }
             }
-
         }
 
         removePlyrControlsClass(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
@@ -410,11 +523,19 @@ export namespace LTPlayerControlsEvents  {
 
 
         showControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
+            let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
-            playerContainer.classList.remove('plyr--hide-controls');
+            if (playerContainer.classList.contains('plyr--hide-controls')) {
+                playerContainer.classList.remove('plyr--hide-controls');
+            }
+
+            if (playerControlsBackground) {
+                if (!playerControlsBackground.classList.contains('d-none')) {
+                    playerControlsBackground.classList.add('d-none');
+                }
+            }
 
             if (!playerControlsContainer.classList.contains('plyr__controls-enable')) {
                 playerControlsContainer.classList.add('plyr__controls-enable');
@@ -424,17 +545,32 @@ export namespace LTPlayerControlsEvents  {
                 clearTimeout(this.controlsTimeOut);
             }
 
-            this.hideControls(instance);
+            this.hideControls(instance, false);
         }
 
-        hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+        hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, now: boolean) {
             const playerContainer = instance.plyr.elements.container;
             const playerControlsContainer = instance.plyr.elements.controls;
-            this.controlsTimeOut = setTimeout(() => {
-                playerControlsContainer.classList.remove('plyr__controls-enable');
-                playerContainer.classList.add('plyr--hide-controls');
-            }, 4000);
+            let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
 
+            if (!playerControlsContainer.classList.contains('plyr__controls-enable-addInfo')) {
+
+                if (now) {
+                    playerControlsContainer.classList.remove('plyr__controls-enable');
+                    playerContainer.classList.add('plyr--hide-controls');
+                    if (!playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
+                        playerControlsBackground.classList.remove('d-none');
+                    }
+                } else {
+                    this.controlsTimeOut = setTimeout(() => {
+                        playerControlsContainer.classList.remove('plyr__controls-enable');
+                        playerContainer.classList.add('plyr--hide-controls');
+                        if (!playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
+                            playerControlsBackground.classList.remove('d-none');
+                        }
+                    }, 4000);
+                }
+            }
         }
 
         fullScreenButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
@@ -451,17 +587,17 @@ export namespace LTPlayerControlsEvents  {
             }
         }
         playPauseIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
-
             let common = this.common;
+            let instanceMobile = this;
 
             switch (type) {
                 case 'timeupdate':
                     common.playPauseIconTimeUpdate(instance);
                     break
                 case 'ready':
-                    const playButton = instance.plyr.elements.container.querySelector('.play-button');
+                    const playButton = instance.plyr.elements.controls.querySelector('.play-button');
                     let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playButton);
-                    if (mobileEvent && instance.plyr.isHTML5) {
+                    if (mobileEvent) {
                         mobileEvent.on('singletap', function LTPlayerMobilePLayPauseIcon() {
                             if (instance.plyr.playing) {
                                 instance.plyr.togglePlay(false);
@@ -469,6 +605,7 @@ export namespace LTPlayerControlsEvents  {
                                 instance.plyr.togglePlay(true);
                             }
                             common.playPauseIconTimeUpdate(instance);
+                            instanceMobile.showControls(instance);
                         });
                     }
             }
@@ -478,33 +615,37 @@ export namespace LTPlayerControlsEvents  {
 
             let common = this.common;
             const selectors = common.backwardRewind.getSelectors(instance);
-            const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
 
             const singleTapAction = () => {
-                if (instance.plyr.elements.controls.classList.contains('plyr__controls-enable')) {
-                    if (volumeControlArea) {
-                        if (!volumeControlArea.classList.contains('volume-control-enable')) {
-                            common.backwardRewind.playPause(instance);
-                            instance.playerControl.mobileEvents.showControls(instance);
-                        }
-                    }
-                }
+                instance.playerControl.mobileEvents.hideControls(instance, true);
             }
 
             if (selectors.forwardArea) {
 
                 let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.forwardArea);
 
-                mobileEvent.on('doubletap', function LTPlayerMobileForwardDbClick() {
+                mobileEvent.on('doubletap', function LTPlayerMobileForwardDbClick(event) {
+
                     common.backwardRewind.animateNotificationIn(selectors.forwardAnimation);
                     common.backwardRewind.updateCurrentTime(instance, 10);
                     setTimeout(() => {
                         common.backwardRewind.animateNotificationOut(selectors.forwardAnimation)
                     }, 500)
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
 
-                mobileEvent.on('singletap', function LTPlayerMobileForwardDbClick() {
+                mobileEvent.on('singletap', function LTPlayerMobileForwardDbClick(event) {
                     singleTapAction();
+                });
+
+                let mobileEventBackground: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.forwardAreaBackground);
+
+                mobileEventBackground.on('doubletap', function LTPlayerMobileForwardDbClickBackground(event) {
+                    common.backwardRewind.animateNotificationIn(selectors.forwardAnimationBackground);
+                    common.backwardRewind.updateCurrentTime(instance, 10);
+                    setTimeout(() => {
+                        common.backwardRewind.animateNotificationOut(selectors.forwardAnimationBackground)
+                    }, 500)
                 })
             }
 
@@ -512,18 +653,30 @@ export namespace LTPlayerControlsEvents  {
 
                 let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.rewindArea);
 
-                mobileEvent.on('doubletap', function LTPlayerMobileRewindDbClick() {
+                mobileEvent.on('doubletap', function LTPlayerMobileRewindDbClick(event) {
+
                     common.backwardRewind.animateNotificationIn(selectors.rewindAnimation);
                     common.backwardRewind.updateCurrentTime(instance, -10);
                     setTimeout(() => {
                         common.backwardRewind.animateNotificationOut(selectors.rewindAnimation)
                     }, 500)
+                    instance.playerControl.mobileEvents.showControls(instance);
                 })
 
-                mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
+                mobileEvent.on('singletap', function LTPlayerMobileRewindClick(event) {
                     singleTapAction();
                 })
 
+                let mobileEventBackground: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.rewindAreaBackground);
+
+                mobileEventBackground.on('doubletap', function LTPlayerMobileRewindDbClickBackground(event) {
+                    common.backwardRewind.animateNotificationIn(selectors.rewindAnimationBackground);
+                    common.backwardRewind.updateCurrentTime(instance, 10);
+                    setTimeout(() => {
+                        common.backwardRewind.animateNotificationOut(selectors.rewindAnimationBackground)
+                    }, 500)
+                })
+
             }
         }
 
@@ -586,6 +739,7 @@ export namespace LTPlayerControlsEvents  {
             mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
                 let volumeState = setVolume();
                 setVolumeIcon(volumeState);
+                instance.playerControl.mobileEvents.showControls(instance);
             })
 
         }

package/src/components/controls/LTPlayerMini.ts

@@ -17,6 +17,12 @@ export class LTPlayerMini {
     templateService: TemplateService
     private iconService: IconsService;
 
+    playerType : string
+
+    instance : LTPlayer.PortraitType | LTPlayer.LandscapeType
+
+    observe : ResizeObserver
+
     constructor() {
     }
 
@@ -25,14 +31,30 @@ export class LTPlayerMini {
      * @param player
      * @param templateService
      * @param iconService
+     * @param playerType
+     * @param instance
      */
-    init(player: Plyr, templateService: TemplateService, iconService: IconsService) {
+    init(player: Plyr, templateService: TemplateService, iconService: IconsService, playerType : string, instance : LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+        this.instance = instance;
         this.templateService = templateService;
         this.iconService = iconService;
         this.player = player;
+        this.playerType = playerType;
         this.setup();
     }
 
+    enterMiniPlayer() {
+        this.playerContainer.width = this.player.elements.wrapper.getBoundingClientRect().width;
+        this.playerContainer.height = this.player.elements.wrapper.getBoundingClientRect().height;
+        this.player.elements.wrapper.classList.add('lt-player-mini-enable');
+        this.player.elements.wrapper.classList.add(`lt-player-mini-${this.playerType}`)
+        this.setBackground(this.player.elements.wrapper);
+        this.addMouseHoverControllers();
+        this.addPlayPauseEvents();
+        this.setSeekBar();
+
+    }
+
     /**
      * Setup mini player
      * @private
@@ -43,15 +65,15 @@ export class LTPlayerMini {
         player.on('ready', function () {
             const playerContainer = player.elements.container;
             const playerWrapper = player.elements.wrapper;
-            _this.playerContainer.width = playerWrapper.getBoundingClientRect().width;
-            _this.playerContainer.height = playerWrapper.getBoundingClientRect().height;
-
             const button = playerContainer.querySelector('.mini-player-control');
 
             if (button) {
                 button.addEventListener('click', function (event) {
                     event.preventDefault();
+                    _this.playerContainer.width = playerContainer.getBoundingClientRect().width;
+                    _this.playerContainer.height = playerContainer.getBoundingClientRect().height;
                     playerWrapper.classList.add('lt-player-mini-enable');
+                    playerWrapper.classList.add(`lt-player-mini-${_this.playerType}`)
                     _this.setBackground(playerWrapper);
                     _this.addMouseHoverControllers();
                     _this.addPlayPauseEvents();
@@ -96,7 +118,9 @@ export class LTPlayerMini {
      * @param playerWrapper
      */
     private setBackground(playerWrapper: HTMLElement) {
+
         const background = this.templateService.getBackGroundTemplate({logo : this.iconService.getLogo()});
+
         const controls = this.templateService.getControlsMiniPlayer({
             mini_player: 'true',
             icons:  this.iconService.getIconsByComponent('controls'),
@@ -104,6 +128,48 @@ export class LTPlayerMini {
 
         playerWrapper.insertAdjacentHTML("afterend", background);
         playerWrapper.children[0].insertAdjacentHTML("afterend", controls);
+
+        if (this.instance.playerConfig.getObserve()) {
+            if (this.instance.playerConfig.isObserveHeight() !== undefined && !this.instance.playerConfig.isObserveHeight()) {
+                this.setObserveBackground();
+            }
+        } else {
+            this.setObserveBackground();
+        }
+
+    }
+
+    setObserveBackground() {
+
+        const miniPlayerBackground : HTMLElement = this.player.elements.container.querySelector('.lt-player-mini-player-background');
+
+        this.observe = new ResizeObserver(response => {
+            let documentWidth = response[0].contentRect.width;
+            let miniPlayerBackgroundWidth = miniPlayerBackground.getBoundingClientRect().width;
+            if (documentWidth >= miniPlayerBackgroundWidth) {
+                if (documentWidth > this.playerContainer.width) {
+                    if (this.player.elements.controls.getBoundingClientRect().height === 103) {
+                        miniPlayerBackground.style.width  = `${this.playerContainer.width}px`;
+                        miniPlayerBackground.style.height = `${this.playerContainer.height}px`;
+                    } else {
+                        miniPlayerBackground.style.width = `${this.player.elements.controls.getBoundingClientRect().width}px`;
+                        miniPlayerBackground.style.height = `${this.player.elements.controls.getBoundingClientRect().height}px`;
+                    }
+                } else {
+                    miniPlayerBackground.style.width = `${this.playerContainer.width}px`;
+                    let calc = this.playerContainer.height + (response[0].contentRect.width - this.playerContainer.width);
+                    miniPlayerBackground.style.height = (calc > 100) ? `${calc}px` : this.playerContainer.height;
+                }
+            }
+            if (documentWidth < miniPlayerBackgroundWidth) {
+                miniPlayerBackground.style.width = `${documentWidth}px`;
+                let calc = this.playerContainer.height - (this.playerContainer.width - response[0].contentRect.width);
+                miniPlayerBackground.style.height = (calc > 100) ? `${calc}px` : this.playerContainer.height;
+            }
+
+        });
+
+        this.observe.observe(document.body);
     }
 
     /**
@@ -178,6 +244,7 @@ export class LTPlayerMini {
     exitMiniPlayer(player: Plyr) {
         const playerContainer = player.elements.container;
         const exit = playerContainer.querySelector('.lt-player-mini-player-controls__exit');
+        let _this = this;
 
         if (!exit) {
             return
@@ -187,7 +254,10 @@ export class LTPlayerMini {
             event.preventDefault();
             playerContainer.querySelector('.lt-player-mini-player-controls').remove();
             playerContainer.querySelector('.lt-player-mini-player-background').remove();
-            playerContainer.querySelector('.lt-player-mini-enable').classList.remove('lt-player-mini-enable')
+            playerContainer.querySelector('.lt-player-mini-enable').classList.remove(`lt-player-mini-${_this.playerType}`)
+            playerContainer.querySelector('.lt-player-mini-enable').classList.remove('lt-player-mini-enable');
+            _this.observe.disconnect();
+
         })
     }
 

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

@@ -65,13 +65,11 @@ export class LTPlayerDesktopSettingsControllers implements SettingsControlsInter
         let values:any = [1,1.25,1.50,2];
 
         myRange.oninput = function() {
-
-            player.speed = parseInt(values[rangeInput.value]);
-
+            player.speed = parseFloat(values[rangeInput.value]);
             myValue.innerHTML = values[rangeInput.value] + 'x';
         };
 
-        player.speed = parseInt(String(values[0]));
+        player.speed = parseFloat(String(values[0]));
         myValue.innerHTML = values[0] + 'x';
     }
     initSaveButton() {