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

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

@@ -22,7 +22,7 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
     setButtonSpeed() {
         let playerControlsContainer = this.settingsInstance.playerInstance.plyr.elements.controls;
         let playerSpeedButton = playerControlsContainer.querySelector('.plyr__controls_speed-button');
-        playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}`;
+        playerSpeedButton.innerHTML = `${this.settingsInstance.playerInstance.plyr.speed}X`;
         let plyr = this.settingsInstance.playerInstance.plyr;
         let instance = this.settingsInstance.playerInstance;
 
@@ -34,19 +34,19 @@ export class LTPlayerMobileSettingsControllers implements SettingsControlsInterf
                     let playSpeed = plyr.speed + 0.25;
 
                     if (playSpeed > 2) {
-                        playerSpeedButton.innerHTML = '1';
+                        playerSpeedButton.innerHTML = `1x`;
                         plyr.speed = 1;
                         return;
                     }
 
                     if (playSpeed === 1.75) {
                         plyr.speed = playSpeed + 0.25
-                        playerSpeedButton.innerHTML = `${playSpeed + 0.25}`;
+                        playerSpeedButton.innerHTML = `${playSpeed + 0.25}X`;
                         return;
                     }
 
                     plyr.speed = playSpeed;
-                    playerSpeedButton.innerHTML = `${playSpeed}`;
+                    playerSpeedButton.innerHTML = `${playSpeed}X`;
 
                     instance.playerControl.mobileEvents.showControls(instance);
                 })

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,20 +106,19 @@ export class LTPlayerCommon {
             }
         });
     }
-
     onReadyPlayer() {
-
         //set share button
-        this.player.share.events.desktop.init(this.player);
+        if (this.player.playerConfig.getShareData()) {
+            if (this.player.playerConfig.getDevice() === 'mobile') {
+                this.player.share.events.mobile.init();
+            } else {
+                this.player.share.events.desktop.init();
+            }
+        }
 
-        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);
@@ -126,6 +147,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'enterfullscreen');
 
+            instance.videoService.removeObjectFit();
+
         });
 
         plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen() {
@@ -134,6 +157,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
 
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'exitfullscreen');
+
+            instance.videoService.appendObjectFit();
         })
     }
 
@@ -147,16 +172,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 +192,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);
 
@@ -110,11 +132,13 @@ export class LTPlayerMobile extends LTPlayerCommon implements EventsInterfaces {
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'enterfullscreen');
 
+            instance.videoService.removeObjectFit();
         });
 
         plyr.on('exitfullscreen', function LTPlayerDesktopExitFullScreen() {
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'exitfullscreen');
+            instance.videoService.appendObjectFit();
         })
     }
 
@@ -128,6 +152,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 +165,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 +175,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/LTPlayerShareDesktop.ts

@@ -0,0 +1,120 @@
+import {LTPlayerShareManager} from "./LTPlayerShareManager";
+
+export class LTPlayerShareDesktop {
+    manager : LTPlayerShareManager
+    isPlaying : boolean
+    constructor(instance : LTPlayerShareManager) {
+        this.manager = instance;
+        this.setTemplate();
+    }
+    setTemplate() {
+      const playerContainer = this.manager.instance.plyr.elements.wrapper;
+      playerContainer.insertAdjacentHTML("afterend", this.manager.templateService.getShare(this.manager.playerConfig.getShareData()));
+    }
+
+    activeModal() {
+        const selectors = this.getSelector();
+        const instance = this.manager.instance;
+
+        selectors.shareContainer.classList.remove('share-inactive');
+        selectors.shareContainer.classList.add('share-active');
+        (window as any).a2a.init_all();
+        if (!instance.playerConfig.getShareData().canonicalUrl) {
+            if (!instance.playerConfig.getShareData().embedUrl) {
+                selectors.shareContainer.querySelector('.share-controller-top').classList.add('d-none')
+            } else {
+                this.setCopyContent(true);
+            }
+        } else {
+            this.setCopyContent(false);
+        }
+
+        this.setCopyButtonsEvents()
+        this.setSwitchButton()
+        if (instance.plyr.playing) {
+            this.isPlaying = true;
+            instance.plyr.pause();
+        } else {
+            this.isPlaying = false;
+        }
+    }
+
+
+    setSwitchButton() {
+        const selectors = this.getSelector();
+        const instance = this.manager.instance;
+
+        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(true);
+            } else {
+                selectors.urlInput.classList.add('canonicalUrl');
+                selectors.urlInput.classList.remove('embedUrl');
+                this.setCopyContent(false);
+            }
+        })
+    }
+
+    setCopyContent(embed : boolean) {
+        const selectors = this.getSelector();
+        const instance = this.manager.instance;
+
+        if (!embed) {
+            selectors.urlInput.classList.add('canonicalUrl');
+            selectors.urlInput.innerHTML = `${instance.playerConfig.getShareData().canonicalUrl}`;
+            (selectors.urlInput as HTMLElement).dataset.copy = instance.playerConfig.getShareData().canonicalUrl;
+            selectors.urlInput.addEventListener('click', () => {
+                window.open(instance.playerConfig.getShareData().canonicalUrl)
+            })
+            return
+        }
+        selectors.urlInput.classList.add('embedUrl');
+        const iframe = `<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 as HTMLElement).innerText = iframe;
+        (selectors.urlInput as HTMLElement).dataset.copy = iframe;
+    }
+
+    inactiveModal() {
+        const selectors = this.getSelector();
+        const instance = this.manager.instance;
+
+        selectors.shareContainer.classList.add('share-inactive');
+        selectors.shareContainer.classList.remove('share-active');
+        if (this.isPlaying) {
+            instance.plyr.play();
+        }
+    }
+
+    getSelector() {
+        return {
+            buttons : [
+                this.manager.instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
+                this.manager.instance.plyr.elements.controls.querySelector('.lt-player-share'),
+            ],
+            urlInput : this.manager.instance.plyr.elements.container.querySelector('.share-controller-wrapper').querySelector('.share-controller-url'),
+            shareContainer : this.manager.instance.plyr.elements.container.querySelector('.share-controller-wrapper'),
+            copyButtons : this.manager.instance.plyr.elements.container.querySelectorAll('.share-controller-link'),
+            switchButton : this.manager.instance.plyr.elements.container.querySelector('.share-controller-wrapper').querySelector('.button_embed')
+        };
+    }
+
+    setCopyButtonsEvents() {
+        const selectors = this.getSelector();
+
+        if (selectors.copyButtons.length > 0) {
+            selectors.copyButtons.forEach((button: HTMLElement) => {
+                button.addEventListener('click', function LTPlayerShareCopy() {
+                    navigator.clipboard.writeText((selectors.urlInput as HTMLElement).dataset.copy);
+                })
+
+            })
+        }
+    }
+}

package/src/components/share/LTPlayerShareEvents.ts

@@ -1,99 +1,60 @@
-import {LTPlayer} from "../LTPlayerType";
-import {defaultType} from "../../global/types/ModuleTypes";
+import {LTPlayerShareManager} from "./LTPlayerShareManager";
 
 export namespace LTPlayerShareEvents {
 
-    export class common {
+    export class mobile {
 
-        isPlaying : boolean
-        activeModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
-            selectors.shareContainer.classList.remove('share-inactive');
-            selectors.shareContainer.classList.add('share-active');
-            if (instance.plyr.playing) {
-                this.isPlaying = true;
-                instance.plyr.pause();
-            } else {
-                this.isPlaying = false;
-            }
-        }
+        manager : LTPlayerShareManager
 
-        inactiveModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
-            selectors.shareContainer.classList.add('share-inactive');
-            selectors.shareContainer.classList.remove('share-active');
-            if (this.isPlaying) {
-                instance.plyr.play();
-            }
+        constructor(manager: LTPlayerShareManager) {
+            this.manager = manager;
         }
 
-        getSelector(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            return {
-                buttons : [
-                    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')
-            };
-        }
+        init() {
+            const buttons = [
+                this.manager.instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
+                this.manager.instance.plyr.elements.controls.querySelector('.lt-player-share'),
+            ];
 
-        copyButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            return instance.plyr.elements.container.querySelectorAll('.share-controller-link');
-        }
-    }
-    export class mobile {
-        common : LTPlayerShareEvents.common
-        constructor() {
-            this.common = new common();
-        }
+            const instance = this;
 
-        init(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
-            const common = this.common;
-            common.getSelector(instance).buttons.forEach(button => {
+            buttons.forEach(button => {
                 if (button) {
-                    button.addEventListener('click', () => {
-                        common.activeModal(instance, this.common.getSelector(instance));
-                    })
+                    let mobileEvent: HammerManager = this.manager.instance.eventInstance.mobileEvents.setMobileEvent(button);
+                    if (mobileEvent) {
+                        mobileEvent.on('singletap', function LTPlayerMobileShareButtons(event) {
+                            event.preventDefault();
+                            instance.manager.mobile.activeModal();
+                        })
+                    }
                 }
             })
-
-            if (common.getSelector(instance).shareContainer) {
-                common.getSelector(instance).shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
-                    event.preventDefault();
-                    if ( common.getSelector(instance).shareContainer.classList.contains('share-active')) {
-                        let target = event.target as HTMLElement;
-                        if (target.classList.contains('share-active') || target.classList.contains('player-lt__close-button')) {
-                            common.inactiveModal(instance, common.getSelector(instance));
-                        }
-                    }
-                })
-            }
         }
     }
 
     export class desktop {
-        common : LTPlayerShareEvents.common
-        constructor() {
-            this.common = new common();
+        manager : LTPlayerShareManager
+        constructor(manager: LTPlayerShareManager) {
+            this.manager = manager;
         }
 
-        init(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
-            const common = this.common;
-            common.getSelector(instance).buttons.forEach(button => {
+        init() {
+            const manager = this.manager;
+            manager.desktop.getSelector().buttons.forEach(button => {
                 if (button) {
                     button.addEventListener('click', () => {
-                        common.activeModal(instance, this.common.getSelector(instance));
+                        manager.desktop.activeModal();
                     })
                 }
             })
 
-            if (common.getSelector(instance).shareContainer) {
-                common.getSelector(instance).shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
+            if (manager.desktop.getSelector().shareContainer) {
+                manager.desktop.getSelector().shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
                     event.preventDefault();
-                    if ( common.getSelector(instance).shareContainer.classList.contains('share-active')) {
+                    if ( manager.desktop.getSelector().shareContainer.classList.contains('share-active')) {
                         let target = event.target as HTMLElement;
                         if (target.classList.contains('share-active') || target.classList.contains('player-lt__close-button')) {
-                            common.inactiveModal(instance, common.getSelector(instance));
+                            manager.desktop.inactiveModal();
                         }
                     }
                 })