@latest-thinking/lt-player 1.0.5 → 1.0.6

package/src/components/events/LTPlayer.ts

@@ -27,10 +27,14 @@ export namespace LTPlayerEvents {
                         }
 
                         const miniPlayerEnable = playerContainer.querySelector('.lt-player-mini-enable');
+                        const miniPlayerEnableSize = playerContainer.querySelector(`.lt-player-mini-${player.playerConfig.getPlayerType()}`);
 
                         if (miniPlayerEnable) {
                             miniPlayerEnable.classList.remove('lt-player-mini-enable');
                         }
+                        if (miniPlayerEnableSize) {
+                            miniPlayerEnableSize.classList.remove(`.lt-player-mini-${player.playerConfig.getPlayerType()}`);
+                        }
 
                     })
 
@@ -134,7 +138,8 @@ export namespace LTPlayerEvents {
                 let miniPlayer = {
                     controls : playerContainer.querySelector('.lt-player-mini-player-controls'),
                     background: playerContainer.querySelector('.lt-player-mini-player-background'),
-                    enable: playerContainer.querySelector('.lt-player-mini-enable')
+                    enable: playerContainer.querySelector('.lt-player-mini-enable'),
+                    size: playerContainer.querySelector(`.lt-player-mini-${instance.playerConfig.getPlayerType()}`)
                 };
 
                 if (miniPlayer.controls) {
@@ -145,6 +150,10 @@ export namespace LTPlayerEvents {
                     miniPlayer.background.remove();
                 }
 
+                if (miniPlayer.size) {
+                    miniPlayer.size.classList.remove(`lt-player-mini-${instance.playerConfig.getPlayerType()}`)
+                }
+
                 if (miniPlayer.enable) {
                     miniPlayer.enable.classList.remove('lt-player-mini-enable')
                 }

package/src/components/events/LTPlayerCommon.ts

@@ -106,19 +106,16 @@ export class LTPlayerCommon {
             }
         });
     }
-
     onReadyPlayer() {
 
         //set share button
         this.player.share.events.desktop.init(this.player);
 
-        this.player.windowService.init(this.player);
+        // this.player.windowService.init(this.player);
         //set poster
         this.player.posterManager.mobileEvents.onload(this.player);
 
-        if (this.player.additionalInfoService) {
-            this.player.additionalInfoService.init(this.player, this.player.playerId, this.player.iconService, this.player.templateService);
-        }
+
 
         if (this.player.playerConfig.isAutoPlay()) {
             let playerContainer = this.player.plyr.elements.container;

package/src/components/events/LTPlayerDesktop.ts

@@ -5,6 +5,7 @@ import {plyr} from "../../global/types/ModuleTypes";
 import {LTPlayerEventsManager} from "../LTPlayerEventsManager";
 import {LTPlayerCommon} from "./LTPlayerCommon";
 import {EventsInterfaces} from "../../global/interfaces/EventsInterfaces";
+import {LoaderService} from "../../services/LoaderService";
 
 export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces {
     setup(eventManager: LTPlayerEventsManager) {
@@ -23,8 +24,24 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         this.plyrTimeUpdate();
         this.plyrOnPlay();
         this.plyrOnPause();
+        this.plyrOnSeek();
     }
 
+    plyrOnSeek():void {
+        let eventManager = this;
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('seeked', function LTPlayerSeek(){
+            if (plyr.isEmbed) {
+                if (plyr.paused) {
+                    return;
+                }
+                let playerContainer = instance.plyr.elements.container;
+                playerContainer.querySelector(`.lt-player__poster`).insertAdjacentHTML('afterend', LoaderService.getSpinner());
+            }
+        })
+    }
 
     plyrOnReady(): void {
         let eventManager = this;
@@ -42,6 +59,10 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
             eventManager.setDefaultSettingsConfig();
 
             if (instance.plyr.isHTML5) {
+
+                if (instance.hls) {
+                    instance.hls.init();
+                }
                 eventManager.onReadyPlayer();
                 eventManager.modal(instance);
                 instance.posterManager.desktopEvents.buttons(instance);
@@ -147,16 +168,17 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
             common.timeUpdate(event);
             if (instance.playerConfig.getPreload().isActive) {
                 common.preloadPoster.timeUpdate(instance, 'event');
-                instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
             }
+            LoaderService.removeSpinner(plyr.elements.container)
+            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
     }
 
     plyrOnPlay() {
         let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
         let plyr: Plyr = this.plyr;
-
         plyr.on('play', function LTPlayerDesktopTimeUpdate(event) {
+            LoaderService.removeSpinner(plyr.elements.container)
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
     }
@@ -166,6 +188,7 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         let plyr: Plyr = this.plyr;
 
         plyr.on('pause', function LTPlayerDesktopTimeUpdate(event) {
+            LoaderService.removeSpinner(plyr.elements.container)
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
     }

package/src/components/events/LTPlayerMobile.ts

@@ -4,6 +4,7 @@ import {EventsInterfaces} from "../../global/interfaces/EventsInterfaces";
 import {LTPlayer} from "../LTPlayerType";
 import Plyr from "plyr";
 import {plyr} from "../../global/types/ModuleTypes";
+import {LoaderService} from "../../services/LoaderService";
 
 export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
 
@@ -23,8 +24,24 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         this.plyrTimeUpdate();
         this.plyrOnPlay();
         this.plyrOnPause();
+        this.plyrOnSeek();
     }
 
+    plyrOnSeek():void {
+        let eventManager = this;
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('seeked', function LTPlayerSeek(){
+            if (plyr.isEmbed) {
+                if (plyr.paused) {
+                    return;
+                }
+                let playerContainer = instance.plyr.elements.container;
+                playerContainer.querySelector(`.lt-player__poster`).insertAdjacentHTML('afterend', LoaderService.getSpinner());
+            }
+        })
+    }
     plyrOnReady(): void {
         let eventManager = this;
         let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
@@ -38,6 +55,11 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             }
 
             if (instance.plyr.isHTML5) {
+
+                if (instance.hls) {
+                    instance.hls.init();
+                }
+
                 eventManager.onReadyPlayer();
                 instance.posterManager.mobileEvents.buttons(instance);
 
@@ -128,6 +150,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             if (instance.playerConfig.getPreload().isActive) {
                 eventManager.preloadPoster.timeUpdate(instance, 'event');
             }
+            LoaderService.removeSpinner(plyr.elements.container)
 
             eventManager.timeUpdate(event);
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
@@ -140,6 +163,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.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
     }
@@ -149,6 +173,7 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
         let plyr: Plyr = this.plyr;
 
         plyr.on('pause', function LTPlayerDesktopTimeUpdate(event) {
+            LoaderService.removeSpinner(plyr.elements.container)
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
     }

package/src/components/poster/LTPlayerPoster.ts

@@ -31,29 +31,43 @@ export class LTPlayerPoster {
 
 
     setImage() {
-        return new Promise((resolve, reject) => {
-            const posterImageBody: HTMLElement = this.plyr.elements.container.querySelector('.lt-player__poster__image-body');
-
-            if (posterImageBody) {
-                const imageTag = document.createElement('img');
-                imageTag.classList.add('lt-player__poster__img--set-custom');
-                imageTag.src = this.config.getPosterImage();
-
-                imageTag.onload = function LTPlayerLoadPosterImage() {
-                    posterImageBody.append(imageTag);
-                    resolve(true);
-                }
-
-                imageTag.onerror = function LTPlayerLoadPosterImageError() {
-                    reject(true);
-                }
+        const customImageSelector = this.plyr.elements.container.querySelector('.lt-player__poster__img--set-custom');
+        const defaultImageSelector = this.plyr.elements.container.querySelector('.lt-player__poster__img__set-default');
+
+        const checkImage = (imageUrl: string, callback: (arg0: boolean) => void) => {
+            let img = new Image();
+
+            img.onerror = function() {
+                callback(false);
+            };
+
+            img.onload = function() {
+                callback(true);
+            };
+
+            img.src = imageUrl;
+        }
+
+
+        const setDefault = () => {
+            if (defaultImageSelector) {
+                defaultImageSelector.classList.remove('d-none');
             }
-        })
-    }
+        }
 
-    removeDefaultImage() {
-        const posterImage: HTMLElement = this.plyr.elements.container.querySelector('.lt-player__poster__img');
-        posterImage.classList.add('d-none');
-    }
 
+        if (this.config.getPosterImage()) {
+            if (customImageSelector) {
+                checkImage(this.config.getPosterImage(), function (exist) {
+                    if (!exist) {
+                        setDefault();
+                    } else {
+                        customImageSelector.classList.remove('d-none');
+                    }
+                })
+            }
+        } else {
+           setDefault()
+        }
+    }
 }

package/src/components/poster/LTPlayerPosterEvents.ts

@@ -88,6 +88,7 @@ export namespace LTPlayerPosterEvents {
                 button.addEventListener('click', function LTPlayerPosterButtons(event) {
                     event.preventDefault();
                     instance.playerControl.desktopEvents.titleLineBreak(instance);
+                    instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
                     common.poster.reset(instance);
                 })
             });
@@ -109,8 +110,10 @@ export namespace LTPlayerPosterEvents {
 
                 if (mobileEvent) {
                     mobileEvent.on('singletap', function LTPlayerMobilePosterButtons() {
+
                         instance.playerControl.desktopEvents.titleLineBreak(instance);
 
+                        instance.playerControl.mobileEvents.playPauseIcon(instance, 'timeupdate');
                         common.poster.reset(instance);
 
                         playerContainer.classList.remove('plyr__poster-enabled');
@@ -125,13 +128,13 @@ export namespace LTPlayerPosterEvents {
          * Remove Onload Poster from player
          */
         onload(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            const playerElementContainer = instance.playerConfig.getPlayerElementContainer();
-            const playerOnloadPosterSelector = playerElementContainer.parentElement.querySelector('.lt-player-onload-poster');
-
-            if (playerOnloadPosterSelector) {
-                playerElementContainer.classList.remove('d-none');
-                playerElementContainer.parentElement.querySelector('.lt-player-onload-poster').remove();
-            }
+            // const playerElementContainer = instance.playerConfig.getPlayerElementContainer();
+            // const playerOnloadPosterSelector = playerElementContainer.parentElement.querySelector('.lt-player-onload-poster');
+            //
+            // if (playerOnloadPosterSelector) {
+            //     // playerElementContainer.classList.remove('d-none');
+            //     playerElementContainer.parentElement.querySelector('.lt-player-onload-poster').remove();
+            // }
         }
 
         showControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {

package/src/components/poster/LTPlayerPosterManager.ts

@@ -23,23 +23,16 @@ export class LTPlayerPosterManager {
     }
 
     init(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+
         this.instance = instance;
         this.playerConfig = instance.playerConfig;
         this.templateService = instance.templateService;
         this.iconService = instance.iconService;
 
         this.poster = new LTPlayerPoster(this.instance.plyr, this.templateService, this.playerConfig, this.iconService);
-        this.poster.setTemplate();
 
-        if (this.playerConfig.getPosterImage()) {
-            this.poster.setImage().then(
-            result => {
-                this.poster.removeDefaultImage();
-                if (this.playerConfig.getPreload()) {
-                    this.initPreload();
-                }
-            });
-        }
+        this.poster.setTemplate();
+        this.poster.setImage();
         if (this.playerConfig.getPreload()) {
             this.initPreload();
         }

package/src/components/share/LTPlayerShareEvents.ts

@@ -9,6 +9,19 @@ export namespace LTPlayerShareEvents {
         activeModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
             selectors.shareContainer.classList.remove('share-inactive');
             selectors.shareContainer.classList.add('share-active');
+
+            if (!instance.playerConfig.getShareData().canonicalUrl) {
+                if (!instance.playerConfig.getShareData().embedUrl) {
+                    selectors.shareContainer.querySelector('.share-controller-top').classList.add('d-none')
+                } else {
+                    this.setCopyContent(instance, selectors, true);
+                }
+            } else {
+                this.setCopyContent(instance, selectors, false);
+            }
+
+            this.setCopyButtonsEvents(instance, selectors)
+            this.setSwitchButton(instance, selectors)
             if (instance.plyr.playing) {
                 this.isPlaying = true;
                 instance.plyr.pause();
@@ -17,6 +30,44 @@ export namespace LTPlayerShareEvents {
             }
         }
 
+
+        setSwitchButton(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
+            if (!instance.playerConfig.getShareData().embedUrl || !instance.playerConfig.getShareData().canonicalUrl) {
+                selectors.switchButton.classList.add('d-none');
+                return;
+            }
+
+            selectors.switchButton.addEventListener('click', () => {
+                if (selectors.urlInput.classList.contains('canonicalUrl')) {
+                    selectors.urlInput.classList.remove('canonicalUrl');
+                    selectors.urlInput.classList.add('embedUrl');
+                    this.setCopyContent(instance, selectors, true);
+                } else {
+                    selectors.urlInput.classList.add('canonicalUrl');
+                    selectors.urlInput.classList.remove('embedUrl');
+                    this.setCopyContent(instance, selectors, false);
+                }
+            })
+
+
+        }
+
+
+        setCopyContent(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType, embed : boolean) {
+
+            if (!embed) {
+                selectors.urlInput.classList.add('canonicalUrl');
+                selectors.urlInput.innerHTML = `${instance.playerConfig.getShareData().canonicalUrl}`;
+                selectors.urlInput.dataset.copy = instance.playerConfig.getShareData().canonicalUrl;
+                return
+            }
+            selectors.urlInput.classList.add('embedUrl');
+            selectors.urlInput.innerText = `<iframe width="560" height="315" src="${instance.playerConfig.getShareData().embedUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
+            selectors.urlInput.dataset.copy = `<iframe width="560" height="315" src="${instance.playerConfig.getShareData().embedUrl}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
+
+        }
+
+
         inactiveModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
             selectors.shareContainer.classList.add('share-inactive');
             selectors.shareContainer.classList.remove('share-active');
@@ -31,13 +82,25 @@ export namespace LTPlayerShareEvents {
                     instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
                     instance.plyr.elements.controls.querySelector('.lt-player-share'),
                 ],
-                shareContainer : instance.plyr.elements.container.querySelector('.share-controller-wrapper')
+                urlInput : instance.plyr.elements.container.querySelector('.share-controller-wrapper').querySelector('.share-controller-url'),
+                shareContainer : instance.plyr.elements.container.querySelector('.share-controller-wrapper'),
+                copyButtons : instance.plyr.elements.container.querySelectorAll('.share-controller-link'),
+                switchButton : instance.plyr.elements.container.querySelector('.share-controller-wrapper').querySelector('.a2a_button_embed')
             };
         }
 
-        copyButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            return instance.plyr.elements.container.querySelectorAll('.share-controller-link');
+        setCopyButtonsEvents(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
+
+            if (selectors.copyButtons.length > 0) {
+                selectors.copyButtons.forEach((button: HTMLElement) => {
+                    button.addEventListener('click', function LTPlayerShareCopy() {
+                        navigator.clipboard.writeText(selectors.urlInput.dataset.copy);
+                    })
+
+                })
+            }
         }
+
     }
     export class mobile {
         common : LTPlayerShareEvents.common

package/src/global/controllers/LTPlayerController.ts

@@ -11,6 +11,7 @@ import {LTPlayerDevMethode} from "../../components/LTPlayerDevMethode";
 import {LTPlayerEventsManager} from "../../components/LTPlayerEventsManager";
 import {LTPlayerPosterManager} from "../../components/poster/LTPlayerPosterManager";
 import {LTPlayerShare} from "../../components/share/LTPlayerShare";
+import {LTPlayerHls} from "../../components/LTPlayerHls";
 
 /**
  * Default Player type Service
@@ -32,6 +33,7 @@ export class LTPlayerController {
     eventInstance: LTPlayerEventsManager
     posterManager : LTPlayerPosterManager
     share : LTPlayerShare
+    hls : LTPlayerHls
     /**
      * Base player type service
      */

package/src/services/Helper.ts

@@ -88,4 +88,28 @@ export class Helper {
         }
         return url.protocol === "http:" || url.protocol === "https:";
     }
+
+    static checkIsHls(url : string): boolean {
+        const extensions = [
+            'm3u8'
+        ]
+
+        let response = false;
+
+        extensions.forEach(item => {
+            if (url.includes(item)) {
+                response = true;
+            }
+        })
+
+        return response;
+    }
+
+    static getVideoOrientation(width: number, height: number) {
+        if (width > height) {
+            return 'landscape';
+        } else {
+            return 'portrait'
+        }
+    }
 }

package/src/services/ResizeService.ts

@@ -55,10 +55,13 @@ export class ResizeService {
             height: 150
         },
         size : {
-            1067 : "lg",
-            800 : "md",
-            533 : "sm",
-            266 : "xs"
+            1067 : "xxl",
+            913 : "xl",
+            820 : "lg",
+            760 : "md",
+            640 : "sm",
+            480 : "xs",
+            266 : "xxs"
         }
     }
 
@@ -145,7 +148,9 @@ export class ResizeService {
             this.playerInstance.plyr.elements.container.insertAdjacentHTML("afterend", buttonsTemplate);
             let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
             inserted.classList.add('lt-player__additional-info__is_set_out-side');
-            deskEvent.set(controller);
+            this.playerInstance.plyr.on('ready', () => {
+                deskEvent.set(controller);
+            })
         }
 
         const createAddInfoButtonsInSide = () => {
@@ -154,12 +159,29 @@ export class ResizeService {
                 addInfoContainer.remove();
             }
 
-            let  controlsInfoBody = this.playerInstance.plyr.elements.controls.querySelector('.content__body');
+            if (this.playerInstance.plyr.elements.controls !== undefined) {
+                let  controlsInfoBody = this.playerInstance.plyr.elements.controls.querySelector('.content__body');
+
+                controlsInfoBody.insertAdjacentHTML("afterend", buttonsTemplate);
+                let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
+                inserted.classList.add('lt-player__additional-info__is_set_in-side');
+
+                deskEvent.set(controller);
+            } else {
+                this.playerInstance.plyr.on('ready', () => {
+
+                    let  controlsInfoBody = this.playerInstance.plyr.elements.controls.querySelector('.content__body');
+
+                    controlsInfoBody.insertAdjacentHTML("afterend", buttonsTemplate);
+                    let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
+                    inserted.classList.add('lt-player__additional-info__is_set_in-side');
+
+                    deskEvent.set(controller);
+                })
+            }
+
+
 
-            controlsInfoBody.insertAdjacentHTML("afterend", buttonsTemplate);
-            let inserted = this.playerInstance.playerConfig.getPlayerElementContainer().querySelector('.lt-player__additional-info');
-            inserted.classList.add('lt-player__additional-info__is_set_in-side');
-            deskEvent.set(controller);
         }
 
         if (containerWidth >= 380) {
@@ -282,6 +304,7 @@ export class ResizeService {
                 setHeight();
             }
         } else {
+
             setWidth();
 
             if (version !== 1) {

package/src/views/additionalInfo.handlebars

@@ -1,5 +1,30 @@
 {{#modal}}
     {{#mobile}}
+        {{#object_data}}
+            <div class="player-lt__mobile__modal-header">
+                <span class="line-button"></span>
+            </div>
+            <div class="player-lt__mobile__modal-content">
+                {{#abstract}}
+                    <h2>{{abstract.title}}</h2>
+                    <p>{{abstract.description}}</p>
+                    <p>{{abstract.videoDOI}}</p>
+                    <p>{{abstract.videoCitation}}</p>
+                {{/abstract}}
+
+                {{#institution}}
+                    <h2>{{institution.title}}</h2>
+                    <img src="{{institution.image}}" alt="image">
+                    <p>{{institution.institutionName}}</p>
+                    <p>{{institution.description}}</p>
+                {{/institution}}
+
+                {{#bio}}
+                    <h2>{{bio.title}}</h2>
+                    <p>{{bio.description}}</p>
+                {{/bio}}
+            </div>
+        {{/object_data}}
         {{#data}}
                 <div class="player-lt__mobile__modal-header">
                     <span class="line-button"></span>
@@ -10,6 +35,39 @@
         {{/data}}
     {{/mobile}}
     {{#desktop}}
+        {{#object_data}}
+            <div class="player-lt__modal lt-modal-{{id}}">
+                <div class="player-lt__modal-content">
+                    <span class="player-lt__close-button">&times;</span>
+                        <div class="player-lt__modal-body">
+                          {{#abstract}}
+                            <h2>{{abstract.title}}</h2>
+                            <p>{{abstract.description}}</p>
+                            <hr>
+                            <h3>Video DOI</h3>
+                            <p>{{abstract.videoDOI}}</p>
+                            <h3>Video Citation</h3>
+                            <p>{{abstract.videoCitation}}</p>
+                          {{/abstract}}
+
+                          {{#institution}}
+                            <h2>{{institution.title}}</h2>
+                            <div class="modal-flex">
+                              <img src="{{institution.image}}" alt="image">
+                              <h3>{{institution.institutionName}}</h3>
+                            </div>
+                            <hr>
+                            <p>{{institution.description}}</p>
+                          {{/institution}}
+
+                          {{#bio}}
+                            <h2>{{bio.title}}</h2>
+                            <p>{{bio.description}}</p>
+                          {{/bio}}
+                        </div>
+                </div>
+            </div>
+        {{/object_data}}
         {{#data}}
             <div class="player-lt__modal lt-modal-{{id}}">
                 <div class="player-lt__modal-content">

package/src/views/background.handlebars

@@ -1,4 +1,4 @@
-<div class="lt-player-mini-player-background">
+<div class="lt-player-mini-player-background {{classObserve}}">
     <div class="logo">
         <img src="{{logo}}" alt="">
     </div>

package/src/views/controls.handlebars

@@ -31,14 +31,14 @@
           </div>
         </div>
       </div>
-      <div class="lt-player-notification">
+      <div class="lt-player-notification landscape">
         <!--                <div class="lt-player-video-content">-->
         <!--                    <div class="content__body">-->
         <!--                        <h4 class="poster-title">{{videoParagraph}}</h4>-->
         <!--                        <p class="poster-paragraph">{{videoTitle}}</p>-->
         <!--                    </div>-->
         <!--                </div>-->
-        <div class="lt-player-notification__notification-button-state">
+        <div class="lt-player-notification__notification-button-state landscape">
           <div class="player-state">
             <img class="player-state__icon filter" src="" alt="">
           </div>
@@ -167,7 +167,7 @@
     </div>
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
-            <div class="lt-player-notification">
+            <div class="lt-player-notification portrait">
                 <div class="lt-player-rewind-area">
                 </div>
                 <div class="lt-player-rewind lt-player-notify">
@@ -222,8 +222,8 @@
           </div>
         </div>
       </div>
-      <div class="lt-player-notification">
-        <div class="lt-player-notification__notification-button-state">
+      <div class="lt-player-notification portrait">
+        <div class="lt-player-notification__notification-button-state portrait">
           <div class="player-state">
             <img class="player-state__icon filter" src="" alt="">
           </div>
@@ -334,7 +334,7 @@
     </div>
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
-            <div class="lt-player-notification">
+            <div class="lt-player-notification portrait">
                 <div class="lt-player-rewind-area">
                 </div>
                 <div class="lt-player-rewind lt-player-notify">