@latest-thinking/lt-player 1.1.0 → 1.2.0-b

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

@@ -2,6 +2,7 @@ import {LTPlayerSettingsControlsManager} from "../LTPlayerSettingsControlsManage
 import {SettingsControlsInterfaces} from "../../../global/interfaces/SettingsControlsInterfaces";
 
 export class LTPlayerMobileSettingsControllers implements SettingsControlsInterfaces {
+
     settingsInstance: LTPlayerSettingsControlsManager
     constructor(settingsInstance: LTPlayerSettingsControlsManager) {
         this.settingsInstance = settingsInstance;
@@ -11,6 +12,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
     init() {
         this.addOpenSettingsEventButton();
         this.setButtonSpeed();
+        this.createModal();
     }
 
     addOpenSettingsEventButton() {
@@ -21,11 +23,10 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
             if (mobileEvent) {
                 mobileEvent.on('singletap', function LTPlayerMobileSettingsButton() {
                     instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
-                    instance.createModal();
-                    instance.setActiveModal();
                     instance.initCaptionsEvent();
                     instance.initSpeedVideoEvent();
                     instance.initSaveButton();
+                    instance.showModal()
                     setTimeout(() => {
                         instance.setInactiveTouchModal();
                     }, 100)
@@ -34,8 +35,24 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         }
     }
 
+    hideModal() {
+        const body = document.body
+        body.removeAttribute('modal-open-body')
+
+        const modal = this.getModal()
+        modal.close()
+    }
+
+    showModal() {
+        const body = document.body
+        body.setAttribute('modal-open-body', '')
+
+        const modal = this.getModal()
+        modal.showModal()
+    }
+
     setInactiveTouchModal() {
-        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const modal = this.getModal()
         const background = modal.querySelector('.settings-controllers-enable__background');
         const settingsContainerHeader = modal.querySelector('.settings-controllers-header')
         const instance = this;
@@ -46,10 +63,6 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
                 mobileEvent.on('singletap', function LTPlayerMobileSettingsBackground(event) {
                     instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
                     event.preventDefault();
-                    let target = event.target as HTMLElement;
-                    if (!target.classList.contains('settings-controllers')) {
-                        instance.setInactiveModal();
-                    }
                 })
             }
         }
@@ -61,64 +74,57 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
                     instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
                     event.preventDefault();
                     let target = event.target as HTMLElement;
-                    instance.setInactiveModal();
+                    instance.hideModal();
                 })
             }
         }
-
     }
 
-    createModal() {
-        let modalTemplate = this.settingsInstance.playerInstance.templateService.getSettings({id : this.settingsInstance.playerInstance.playerConfig.getPlayerId()});
-
-        const modal = document.createElement('div');
-        modal.classList.add('lt-player-mobile-settings-modal')
-        modal.innerHTML = modalTemplate;
-
-        const body = document.querySelector('body');
-
-        if (body) {
-            body.appendChild(modal);
-        }
+    getModal(): HTMLDialogElement {
+        const playerElementContainer = this.settingsInstance.playerInstance.playerConfig.getPlayerElementContainer()
+        return playerElementContainer.querySelector("dialog")
     }
 
-    setActiveModal() {
-        const modal = document.querySelector('.lt-player-mobile-settings-modal');
-        const background = modal.querySelector('.settings-controllers-enable__background');
-
-        if (background) {
-            if (background.classList.contains('d-none')) {
-                background.classList.remove('d-none')
+    createModal() {
+        let settingsDialog = this.settingsInstance.playerInstance.templateService.getMobileSettings(
+            {
+                id : this.settingsInstance.playerInstance.playerConfig.getPlayerId(),
+                captions_enabled: this.settingsInstance.playerInstance.playerConfig.hasCaptionsUrl() &&
+                    this.settingsInstance.playerInstance.playerConfig.getCaptionsEnabled(),
+                captions_missing: !this.settingsInstance.playerInstance.playerConfig.hasCaptionsUrl()
             }
-        }
-    }
+        );
+        const playerElementContainer = this.settingsInstance.playerInstance.playerConfig.getPlayerElementContainer()
+        playerElementContainer.insertAdjacentHTML('beforeend', settingsDialog)
+
+        const modal = this.getModal()
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                this.hideModal()
+            }
+        });
 
-    setInactiveModal() {
-        const modal = document.querySelector('.lt-player-mobile-settings-modal');
-        if (modal) {
-            modal.remove();
-        }
     }
+
     initCaptionsEvent() {
-        const modal = document.querySelector('.lt-player-mobile-settings-modal');
-        const checkBox = modal.querySelector(`#captions-lt-player-${this.settingsInstance.playerInstance.playerConfig.getPlayerId()}`) as HTMLInputElement;
+        const modal = this.getModal()
+        const checkBox = modal.querySelector(`.subtitles-body__input-switch`) as HTMLInputElement;
         const instance = this;
         if (checkBox) {
             checkBox.addEventListener('change', () => {
                 instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
 
                 if (!checkBox.checked) {
-                    this.settingsInstance.player.toggleCaptions(false);
-                    return
+                    this.settingsInstance.playerInstance.captionsService.disableCaptions();
+                } else {
+                    this.settingsInstance.playerInstance.captionsService.enableCaptions();
                 }
 
-                this.settingsInstance.player.toggleCaptions(true);
-
             })
         }
     }
     initSpeedVideoEvent() {
-        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const modal = this.getModal()
         const playerInstance = this.settingsInstance.playerInstance;
         const player = this.settingsInstance.player;
         const rangeInput: HTMLInputElement = modal.querySelector('.speed-range-input');
@@ -145,7 +151,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         myValue.innerHTML = `${values[0]}X`;
     }
     initSaveButton() {
-        const modal = document.querySelector('.lt-player-mobile-settings-modal');
+        const modal = this.getModal()
         const instance = this;
 
         const saveButton = modal.querySelector('.button-save');
@@ -153,7 +159,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
         saveButton.addEventListener('click', function (event) {
             instance.settingsInstance.playerInstance.playerControl.mobileEvents.showControls(instance.settingsInstance.playerInstance);
             event.preventDefault();
-            instance.setInactiveModal();
+            instance.hideModal();
         })
     }
     setButtonSpeed() {

package/src/components/events/LTPlayer.ts

@@ -56,34 +56,35 @@ export namespace LTPlayerEvents {
                 }
 
                 const volumeControl = controls.querySelector('.bottom-controller__volume_control');
-                const volumeButton = volumeControl.querySelector('.button-open');
-                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 (volumeControl) {
+                    const volumeButton = volumeControl.querySelector('.button-open');
+                    const volumeBackground = volumeControl.querySelector('.volume_control__background');
+                    const volumeBackgroundArea = volumeControl.querySelector('.volume_control__background__area');
+                    const volumeArea = volumeControl.querySelector('.volume_control__background__area__range');
 
 
-                if (volumeButton) {
-                    volumeButton.classList.remove('d-none');
-                }
+                    if (volumeButton) {
+                        volumeButton.classList.remove('d-none');
+                    }
 
-                if (volumeBackground) {
-                    volumeBackground.classList.add('d-none')
-                }
+                    if (volumeBackground) {
+                        volumeBackground.classList.add('d-none')
+                    }
 
-                if (volumeBackgroundArea) {
-                    volumeBackgroundArea.classList.add('d-none')
-                }
+                    if (volumeBackgroundArea) {
+                        volumeBackgroundArea.classList.add('d-none')
+                    }
 
-                if (volumeArea) {
-                    volumeArea.classList.remove('volume-area-open')
-                }
+                    if (volumeArea) {
+                        volumeArea.classList.remove('volume-area-open')
+                    }
 
-                if (volumeControl) {
-                    volumeControl.classList.remove('volume-area-open');
-                    volumeControl.classList.remove('volume-control-enable');
+                    if (volumeControl) {
+                        volumeControl.classList.remove('volume-area-open');
+                        volumeControl.classList.remove('volume-control-enable');
+                    }
                 }
-
+                const controlsBackground = player.elements.container.querySelector('.plyr__controls__mobile-background');
                 if (controlsBackground) {
                     if (!controlsBackground.classList.contains('d-none')) {
                         controlsBackground.classList.add('d-none');
@@ -182,6 +183,8 @@ export namespace LTPlayerEvents {
             if (!instance.plyr.elements.container.classList.contains('plyr__poster-enabled')) {
                 instance.plyr.elements.container.classList.add('plyr__poster-enabled');
             }
+
+            instance.statusFeedbackService.clearLoading()
         }
 
     }

package/src/components/events/LTPlayerCommon.ts

@@ -9,11 +9,23 @@ export class LTPlayerCommon {
     player: LTPlayer.PortraitType | LTPlayer.LandscapeType;
     plyr: Plyr;
 
+    setupCommon() {
+        this.playerPlay()
+        this.plyrOnPlaying()
+        this.plyrOnSeeking()
+        this.plyrOnControlsShown()
+        this.plyrOnCanplay()
+    }
+
     playerPlay() {
         const instance = this.player;
 
         this.plyr.on('play', function LTPlayerPlay(event) {
 
+            if (!instance.plyr.elements.controls.classList.contains('plyr__controls-enable')) {
+                instance.plyr.elements.controls.classList.add('plyr__controls-enable');
+            }
+
             instance.desktopEvents.playPause(event);
 
             if (instance.additionalInfoService) {
@@ -27,26 +39,25 @@ export class LTPlayerCommon {
 
         instance.plyr.speed = 1;
 
-        instance.plyr.toggleCaptions(false);
-        return;
-
-        //
-        // if (instance.plyr.isEmbed) {
-        //     instance.plyr.embed.getTextTracks().then( (response: string | any[]) => {
-        //         if (response.length !== 0) {
-        //             instance.plyr.toggleCaptions(true);
-        //         } else {
-        //             instance.plyr.toggleCaptions(false);
-        //         }
-        //     })
-        // } else {
-        //
-        //     let checkCaptions = (instance.plyr as plyr).captions;
-        //
-        //     if (checkCaptions.currentTrack >= 0) {
-        //         instance.plyr.toggleCaptions(true);
-        //     }
-        // }
+        if (!instance.plyr.isEmbed) {
+            let checkCaptions = (instance.plyr as plyr).captions;
+
+            if (checkCaptions.currentTrack >= 0) {
+                instance.plyr.toggleCaptions(true);
+                return;
+            }
+            instance.plyr.toggleCaptions(false);
+            return;
+        }
+
+        instance.plyr.embed.getTextTracks().then( (response: string | any[]) => {
+            if (response.length !== 0) {
+                instance.plyr.toggleCaptions(true);
+                return;
+            }
+            instance.plyr.toggleCaptions(false);
+
+        })
     }
     removeDesktopPlyrEvents() {
         let plyrInstance = this.plyr as Plyr as Plyr & { eventListeners: Array<any> }
@@ -175,4 +186,67 @@ export class LTPlayerCommon {
         }
     }
 
+    setCustomSubtitles(controls: HTMLElement, event: Plyr.PlyrEvent )
+    {
+        const eventPlayer: any = event.detail.plyr;
+
+        const customSubtitlesElement = controls.querySelector('.lt-player-custom-captions');
+        const spanElement = customSubtitlesElement.querySelector('span');
+
+        if (!spanElement) {
+            return;
+        }
+        if (!eventPlayer.captions.currentTrackNode.activeCues) {
+            return;
+        }
+        if (eventPlayer.captions.currentTrackNode.activeCues.length > 0) {
+            spanElement.innerHTML = eventPlayer.captions.currentTrackNode.activeCues[0].text;
+        } else {
+            spanElement.innerHTML = ''; // Clear previous captions
+        }
+    }
+
+    clearCustomSubtitles(controls: HTMLElement)
+    {
+        const customSubtitlesElement = controls.querySelector('.lt-player-custom-captions');
+        const spanElement = customSubtitlesElement.querySelector('span');
+
+        if (!spanElement) {
+            return;
+        }
+        spanElement.innerHTML = ''; // Clear previous captions
+    }
+
+    plyrOnSeeking() {
+        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        const plyr: Plyr = this.plyr;
+        plyr.on('seeking', () => {
+            instance.statusFeedbackService.setLoadingSeek()
+        })
+    }
+
+    plyrOnPlaying() {
+        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        const plyr: Plyr = this.plyr;
+        plyr.on('playing', () => {
+            instance.statusFeedbackService.clearLoading()
+        })
+    }
+
+    plyrOnCanplay() {
+        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        const plyr: Plyr = this.plyr;
+        plyr.on('canplay', () => {
+            instance.statusFeedbackService.clearLoading()
+        })
+    }
+
+    plyrOnControlsShown() {
+        const instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        const plyr: Plyr = this.plyr;
+        plyr.on('controlsshown', () => {
+            instance.statusFeedbackService.setControlsVisible()
+        })
+    }
+
 }

package/src/components/events/LTPlayerDesktop.ts

@@ -13,7 +13,6 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         this.plyr = eventManager.plyr;
 
         //init common events
-        this.playerPlay();
         this.removeDesktopPlyrEvents();
 
         //init desktop events
@@ -25,6 +24,9 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         this.plyrOnPlay();
         this.plyrOnPause();
         this.plyrOnSeek();
+        this.plyrOnCueChange();
+
+        this.setupCommon()
     }
 
     plyrOnSeek():void {
@@ -33,6 +35,10 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         let plyr: Plyr = this.plyr;
 
         plyr.on('seeked', function LTPlayerSeek(){
+            if (plyr.stopped === true) {
+                eventManager.endVideo()
+            }
+
             if (plyr.isEmbed) {
                 if (plyr.paused) {
                     return;
@@ -142,10 +148,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
 
         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.statusFeedbackService.setFullscreen()
             instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'enterfullscreen');
 
             //fullscreen icon
@@ -157,10 +161,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
 
         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.statusFeedbackService.clearFullscreen()
             instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'exitfullscreen');
 
             //fullscreen icon
@@ -190,6 +192,7 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
         let plyr: Plyr = this.plyr;
         plyr.on('play', function LTPlayerDesktopTimeUpdate(event) {
+            instance.statusFeedbackService.setLoading()
             LoaderService.removeSpinner(plyr.elements.container)
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
@@ -205,4 +208,15 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         })
     }
 
+    plyrOnCueChange() {
+        let common = this;
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('cuechange', function LTPlayerDesktopTimeUpdate(event) {
+            if (instance.playerConfig.getCaptionsEnabled() && plyr.currentTrack >= 0) {
+                common.setCustomSubtitles(plyr.elements.controls, event)
+            }
+        })
+    }
 }

package/src/components/events/LTPlayerMobile.ts

@@ -13,7 +13,6 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         this.plyr = eventManager.plyr;
 
         //init common events
-        this.playerPlay();
         this.removeMobilePlyrEvents();
 
         //init mobile events
@@ -25,6 +24,9 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         this.plyrOnPlay();
         this.plyrOnPause();
         this.plyrOnSeek();
+        this.plyrOnCueChange()
+
+        this.setupCommon()
     }
 
     plyrOnSeek():void {
@@ -33,6 +35,10 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let plyr: Plyr = this.plyr;
 
         plyr.on('seeked', function LTPlayerSeek(){
+            if (plyr.stopped === true) {
+                eventManager.endVideo()
+            }
+
             if (plyr.isEmbed) {
                 if (plyr.paused) {
                     return;
@@ -131,10 +137,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let plyr: Plyr = this.plyr;
 
         plyr.on('enterfullscreen', function LTPlayerDesktopEnterFullScreen(event) {
-            const target = event.target as HTMLElement;
-            const parent = target.closest('.lt-player');
-
-            parent.classList.add('is-fullscreen');
+            instance.statusFeedbackService.setFullscreen()
             instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'enterfullscreen');
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'enterfullscreen');
@@ -143,10 +146,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         });
 
         plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen(event) {
-            const target = event.target as HTMLElement;
-            const parent = target.closest('.lt-player');
-
-            parent.classList.remove('is-fullscreen');
+            instance.statusFeedbackService.clearFullscreen()
             instance.miniPlayer.event.removeMiniPLOnFullScreen(instance, 'exitfullscreen');
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'exitfullscreen');
@@ -177,7 +177,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let plyr: Plyr = this.plyr;
 
         plyr.on('play', function LTPlayerDesktopTimeUpdate(event) {
-            LoaderService.removeSpinner(plyr.elements.container)
+            instance.statusFeedbackService.setLoading()
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
     }
@@ -228,4 +228,16 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         return undefined;
     }
 
+    plyrOnCueChange() {
+        let common = this;
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('cuechange', function LTPlayerDesktopTimeUpdate(event) {
+            if (instance.playerConfig.getCaptionsEnabled() && plyr.currentTrack >= 0) {
+                common.setCustomSubtitles(plyr.elements.controls, event)
+            }
+        })
+    }
+
 }

package/src/global/controllers/LTPlayerController.ts

@@ -13,6 +13,8 @@ import {LTPlayerPosterManager} from "../../components/poster/LTPlayerPosterManag
 import {LTPlayerShareManager} from "../../components/share/LTPlayerShareManager";
 import {LTPlayerHls} from "../../components/LTPlayerHls";
 import {LTPlayerVideo} from "../../components/video/LTPlayerVideo";
+import {LTPlayerCaptionsManager} from "../../components/captions/LTPlayerCaptions";
+import {LTPlayerStatusFeedback} from "../../components/LTPlayerStatusFeedback";
 
 /**
  * Default Player type Service
@@ -36,6 +38,9 @@ export class LTPlayerController {
     share : LTPlayerShareManager
     hls : LTPlayerHls
     videoService : LTPlayerVideo
+    captionsService : LTPlayerCaptionsManager
+    statusFeedbackService: LTPlayerStatusFeedback
+
     /**
      * Base player type service
      */
@@ -47,5 +52,7 @@ export class LTPlayerController {
         this.posterManager = new LTPlayerPosterManager();
         this.share = new LTPlayerShareManager();
         this.videoService = new LTPlayerVideo();
+        this.captionsService = new LTPlayerCaptionsManager(this);
+        this.statusFeedbackService = new LTPlayerStatusFeedback(this);
     }
 }

package/src/services/Helper.ts

@@ -1,6 +1,7 @@
 import {defaultType} from "../global/types/ModuleTypes";
 
 export class Helper {
+
     static getDevice() {
         let device = 'desktop'; //initiate as false
         if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
@@ -10,7 +11,11 @@ export class Helper {
         return device;
     }
 
-    static setDebugEvent(data: string | object, type: string) {
+    static setDebugEvent(data: string | object, type?: string) {
+        if (type === undefined) {
+            type = 'info'
+        }
+
         if (process.env.DEBUG === "true") {
             switch (type) {
                 case 'info':

package/src/services/ResizeService.ts

@@ -20,8 +20,8 @@ export class ResizeService {
     playerType: string
     addInfo: LTPLayerAddInfoResizeManager
 
-    addInfoOutSide: boolean
-    addInfoInSide: Boolean
+    addInfoOutSide: false
+    addInfoInSide: true
 
     playerParam: defaultType  = {
         width : null,
@@ -212,37 +212,42 @@ export class ResizeService {
             }
         }
 
-            // 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();
-            // }
+        if (this.playerInstance.playerConfig.getEmbed()) {
+            createAddInfoButtonsInSide();
+            return;
+        }
 
         createAddInfoButtonsInSide();
 
+
+        // 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();
+        // }
     }
 
     protected setDimensions(containerWidth: number, containerHeight: number, defaultData: defaultType) {