@latest-thinking/lt-player 1.2.0-d → 2.0.0-a

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -1,943 +0,0 @@
-import {LTPlayer} from "../LTPlayerType";
-import {plyr} from "../../global/types/ModuleTypes";
-import * as events from "events";
-
-export namespace LTPlayerControlsEvents {
-
-    export class Common {
-
-        backwardRewind = {
-
-            getSelectors(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-
-                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'),
-                    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) {
-                if (Math.sign(time)) {
-                    instance.plyr.currentTime += time;
-                } else {
-                    instance.plyr.currentTime -= time;
-                }
-            },
-
-            playPause(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-
-                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');
-                    }, 200)
-                }
-
-                if (instance.plyr.playing) {
-                    iconSelector.src = icons.pause;
-                    playerStateInfo.classList.add('active');
-                    instance.plyr.togglePlay(false);
-                    removeStateButtons();
-                } else {
-                    iconSelector.src = icons.play;
-                    playerStateInfo.classList.add('active');
-                    instance.plyr.togglePlay(true);
-                    removeStateButtons();
-                }
-            },
-
-            animateNotificationIn(selector: Element) {
-                selector.classList.add('animate-in');
-            },
-
-            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) {
-
-            const player = instance.plyr;
-
-            let playerContainer = player.elements.container;
-
-            const playIcon = playerContainer.querySelector('.bottom-controller__play-icon');
-            const pauseIcon = playerContainer.querySelector('.bottom-controller__pause-icon');
-
-            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 {
-                if (player.playing) {
-                    playIcon.classList.add('d-none');
-                    pauseIcon.classList.remove('d-none');
-                } else {
-                    pauseIcon.classList.add('d-none');
-                    playIcon.classList.remove('d-none');
-                }
-            }
-
-        }
-
-        subtitlesShow(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            const playerContainer = instance.plyr.elements.container;
-            const playerControls = instance.plyr.elements.controls;
-
-            const captions = playerContainer.querySelector('.plyr__captions');
-
-            let checkCaptions = (instance.plyr as plyr).captions.active;
-
-            if (!checkCaptions) {
-                return;
-            }
-
-            if (!captions) {
-                return;
-            }
-
-            if (!playerControls.classList.contains('plyr__controls-enable')) {
-                if (captions.classList.contains('d-none')) {
-                    captions.classList.remove('d-none');
-                }
-            }
-        }
-
-        subtitlesHide(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            const playerContainer = instance.plyr.elements.container;
-            const playerControls = instance.plyr.elements.controls;
-            const captions = playerContainer.querySelector('.plyr__captions');
-
-            let checkCaptions = (instance.plyr as plyr).captions.active;
-
-            if (!checkCaptions) {
-                return;
-            }
-
-            if (!captions) {
-                return;
-            }
-
-            if (playerControls.classList.contains('plyr__controls-enable')) {
-                if (!captions.classList.contains('d-none')) {
-                    captions.classList.add('d-none');
-                }
-            }
-        }
-
-        showHideText(visible: boolean, controls: HTMLElement) {
-            const textControlsElement = controls.querySelector('.lt-player-video-content');
-
-            if (textControlsElement) {
-                if (visible) {
-                    if (!textControlsElement.classList.contains('lt-player-video-content-enable')) {
-                        textControlsElement.classList.add('lt-player-video-content-enable')
-                    }
-                } else {
-                    textControlsElement.classList.remove('lt-player-video-content-enable')
-                }
-            }
-        }
-
-        showHideSeekBar(visible: boolean, controls: HTMLElement) {
-            const seekBarControlsElement = controls.querySelector('.plyr__progress--wrapper');
-
-            if (seekBarControlsElement) {
-                if (visible) {
-                    if (!seekBarControlsElement.classList.contains('plyr__progress--wrapper-enable')) {
-                        seekBarControlsElement.classList.add('plyr__progress--wrapper-enable')
-                    }
-                } else {
-                    seekBarControlsElement.classList.remove('plyr__progress--wrapper-enable')
-                }
-            }
-        }
-
-        showHideBottomControls(visible: boolean, controls: HTMLElement) {
-            const bottomControlsElement = controls.querySelector('.bottom-controller');
-
-            if (bottomControlsElement) {
-                if (visible) {
-                    if (!bottomControlsElement.classList.contains('bottom-controller-enable')) {
-                        bottomControlsElement.classList.add('bottom-controller-enable')
-                    }
-                } else {
-                    bottomControlsElement.classList.remove('bottom-controller-enable')
-                }
-            }
-        }
-
-        showHideAllControls(visible: boolean, controls: HTMLElement) {
-            this.showHideText(visible, controls);
-            this.showHideSeekBar(visible, controls);
-            this.showHideBottomControls(visible, controls);
-        }
-
-    }
-
-    export class Desktop {
-
-        common: Common
-
-        constructor() {
-            this.common = new Common();
-        }
-
-        titleLineBreak(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            return;
-            /*Remove title break*/
-            // this.common.checkTitleBreakWord(instance);
-            /**/
-        }
-
-
-        showHide(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            const controls = instance.plyr.elements.controls;
-            const commonInstance = this.common;
-            controls.classList.add('plyr__controls-enable');
-            instance.statusFeedbackService.setControlsVisible()
-
-            commonInstance.showHideText(true, controls);
-            commonInstance.showHideSeekBar(true, controls);
-            commonInstance.showHideBottomControls(true, controls);
-
-            let timerText: NodeJS.Timeout = null;
-            let timerSeekBar: NodeJS.Timeout = null;
-            let timerBottomControls: NodeJS.Timeout = null;
-
-            controls.addEventListener('mouseover', function () {
-
-                if (timerText) {
-                    clearTimeout(timerText);
-                }
-
-                if (timerSeekBar) {
-                    clearTimeout(timerSeekBar);
-                }
-
-                if (timerBottomControls) {
-                    clearTimeout(timerBottomControls);
-                }
-
-                if (instance.plyr.paused) {
-                    commonInstance.showHideAllControls(true, controls);
-                    return;
-                }
-
-                if (!instance.playerConfig.isPinTextControls()) {
-                    commonInstance.showHideText(true, controls);
-                }
-
-                if (!instance.playerConfig.isPinSeekBarControls()) {
-                    commonInstance.showHideSeekBar(true, controls);
-                }
-
-                if (!instance.playerConfig.isPinBottomControls()) {
-                    commonInstance.showHideBottomControls(true, controls);
-                }
-
-            })
-
-
-            controls.addEventListener('mouseleave', function () {
-                if (instance.plyr.paused) {
-                    commonInstance.showHideAllControls(true, controls);
-                    return;
-                }
-
-                if (!instance.playerConfig.isPinTextControls()) {
-                    timerText = setTimeout(() => {
-                        commonInstance.showHideText(false, controls);
-                    }, 5000)
-                }
-
-                if (!instance.playerConfig.isPinSeekBarControls()) {
-                    timerSeekBar = setTimeout(() => {
-                        commonInstance.showHideSeekBar(false, controls);
-
-                    }, 5000)
-                }
-                if (!instance.playerConfig.isPinBottomControls()) {
-                    timerBottomControls = setTimeout(() => {
-                        instance.statusFeedbackService.clearControlsVisible()
-                        commonInstance.showHideBottomControls(false, controls);
-                    }, 5000)
-                }
-            })
-        }
-
-        fullScreenButtons(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            let playerControlsSelector = instance.plyr.elements.controls;
-
-            const fullScreenButtonContainer = playerControlsSelector.querySelector('.fullscreen-custom-control');
-
-            if (fullScreenButtonContainer) {
-                fullScreenButtonContainer.addEventListener('click', function LTPlayerFullScreenDesk(event) {
-                    event.preventDefault();
-                    instance.plyr.fullscreen.toggle();
-                })
-            }
-        }
-
-        fullscreenIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
-
-            let playerControls = instance.plyr.elements.controls;
-            const fullScreenButtonContainer = playerControls.querySelector('.fullscreen-custom-control');
-
-            switch (type) {
-                case 'enterfullscreen':
-                    fullScreenButtonContainer.querySelector('.maximize').classList.add('d-none');
-                    fullScreenButtonContainer.querySelector('.minimize').classList.remove('d-none');
-                    playerControls.classList.add('progress-width-mobile');
-                    break
-                case 'exitfullscreen':
-                    fullScreenButtonContainer.querySelector('.maximize').classList.remove('d-none');
-                    fullScreenButtonContainer.querySelector('.minimize').classList.add('d-none');
-                    playerControls.classList.remove('progress-width-mobile');
-                    break
-            }
-        }
-
-        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);
-                        })
-                    }
-            }
-        }
-
-        backwardForward(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-
-            let common = this.common;
-            const selectors = common.backwardRewind.getSelectors(instance);
-
-            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);
-                        playerState.classList.remove('d-none');
-                    }, 500)
-                })
-
-                selectors.forwardArea.addEventListener('click', function LTPlayerForwardClick(event) {
-                    event.preventDefault();
-
-                    setTimeout(() => {
-                        const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
-
-                        if (volumeControlArea) {
-                            if (!volumeControlArea.classList.contains('volume-control-enable')) {
-                                common.backwardRewind.playPause(instance);
-                            }
-                        }
-                    }, 100)
-
-
-                })
-            }
-
-            if (selectors.rewindArea) {
-
-                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);
-                        playerState.classList.remove('d-none');
-                    }, 500)
-                })
-
-                selectors.rewindArea.addEventListener('click', function LTPlayerRewindClick(event) {
-                    event.preventDefault();
-
-                    setTimeout(() => {
-                        const volumeControlArea = selectors.playerControlsContainer.querySelector('.bottom-controller__volume_control');
-
-                        if (volumeControlArea) {
-                            if (!volumeControlArea.classList.contains('volume-control-enable')) {
-                                common.backwardRewind.playPause(instance);
-                            }
-                        }
-                    }, 100)
-
-                })
-
-            }
-        }
-
-        backwardForwardSeconds(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            let playerControlsContainer = instance.plyr.elements.controls;
-            let forward = playerControlsContainer.querySelector('.skip-forward-seconds');
-            let backward = playerControlsContainer.querySelector('.skip-backward-seconds');
-
-
-            if (forward) {
-                forward.addEventListener('click', function LTPlayerForwardSeconds(event) {
-                    event.preventDefault();
-                    instance.plyr.currentTime += 10;
-                })
-            }
-
-            if (backward) {
-                backward.addEventListener('click', function LTPlayerBackwardSeconds(event) {
-                    event.preventDefault();
-                    instance.plyr.currentTime -= 10;
-                })
-            }
-
-
-        }
-
-
-        volume(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-
-            let playerControlsContainer = instance.plyr.elements.controls;
-
-
-            const volume: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-            const openVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button');
-            const muteUnmuteVolumeButton: HTMLElement = playerControlsContainer.querySelector('.volume_control__volume-button-close');
-            const volumeControl: HTMLElement = playerControlsContainer.querySelector('.volume_control__background__area');
-            const volumeBackground: HTMLElement = playerControlsContainer.querySelector('.volume_control__background');
-            const volumeRangeControl: HTMLElement = playerControlsContainer.querySelector('.volume_control__background__area__range');
-            const rangeVolumesItems: NodeListOf<HTMLElement> = volume.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
-
-            const itemsDataSet: string[] = [];
-            rangeVolumesItems.forEach(item => {
-                itemsDataSet.push(item.dataset.rangeValue)
-            })
-
-            openVolumeButton.addEventListener('mouseover', (event) => {
-                volumeControl.classList.remove('d-none');
-                volumeBackground.classList.remove('d-none');
-                openVolumeButton.classList.add('d-none');
-                volume.classList.add('volume-control-enable');
-                volume.classList.add('volume-area-open')
-            })
-
-            volume.addEventListener('mouseleave', () => {
-                volumeControl.classList.add('d-none');
-                volumeBackground.classList.add('d-none');
-                openVolumeButton.classList.remove('d-none');
-                volume.classList.remove('volume-control-enable');
-            })
-
-            muteUnmuteVolumeButton.addEventListener('click', (event) => {
-                event.preventDefault();
-                if (instance.plyr.volume > 0) {
-                    instance.playerControl.playerVolumeBefore = instance.plyr.volume;
-                    instance.plyr.volume = 0;
-                    volumeIcons(0);
-                    return;
-                }
-
-                if (instance.playerControl.playerVolumeBefore) {
-                    instance.plyr.volume = instance.playerControl.playerVolumeBefore;
-                    volumeIcons(instance.playerControl.playerVolumeBefore);
-                    return;
-                }
-
-                instance.plyr.volume = 1;
-                volumeIcons(1)
-            })
-
-            const getClosest = (curr: any, prev: any, range: any) => {
-                return (Math.abs(curr - range) < Math.abs(prev - range) ? curr : prev);
-            }
-
-            const volumeMax: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-max');
-            const volume75: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-75');
-            const volume50: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-50');
-            const volumeMute: HTMLElement = muteUnmuteVolumeButton.querySelector('.volume-mute');
-            const volumeBody: HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-            const volumeIconsManger = (item: HTMLElement) => {
-
-                const rangeVolumesItems: NodeListOf<HTMLElement> = volumeBody.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
-
-                rangeVolumesItems.forEach(function (value) {
-                    if (item.dataset.rangeValue === value.dataset.rangeValue) {
-                        value.classList.remove('d-none');
-                    } else {
-                        value.classList.add('d-none')
-                    }
-                })
-            }
-
-            const volumeIcons = (level: any) => {
-                if (itemsDataSet.length === 0) {
-                    return;
-                }
-
-                let range = itemsDataSet.reduce(function (prev, curr) {
-                    return getClosest(curr, prev, level);
-                });
-
-                if (typeof range == 'number') {
-                    range = range.toString()
-                }
-
-                switch (range) {
-                    case volumeMax.dataset.rangeValue :
-                        volumeIconsManger(volumeMax);
-                        break;
-                    case volume75.dataset.rangeValue :
-                        volumeIconsManger(volume75);
-                        break;
-                    case volume50.dataset.rangeValue :
-                        volumeIconsManger(volume50);
-                        break;
-                    case volumeMute.dataset.rangeValue :
-                        volumeIconsManger(volumeMute);
-                        break;
-                }
-            }
-
-            volumeRangeControl.addEventListener('input', function () {
-                volumeIcons((volumeRangeControl as HTMLInputElement).value);
-            })
-
-            instance.plyr.volume = 1;
-
-            volumeIcons(instance.plyr.volume)
-        }
-    }
-
-    export class Mobile {
-
-        common: Common
-
-        controlsTimeOut: NodeJS.Timeout
-
-        constructor() {
-            this.common = new Common();
-        }
-        seekBar(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            const playerControlsContainer = instance.plyr.elements.controls;
-            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 playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
-            const __this = this;
-            if (playerControlsBackground) {
-                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playerControlsBackground);
-
-                if (mobileEvent) {
-                    mobileEvent.on('singletap', function LTPlayerMobileBack() {
-                        __this.showControls(instance);
-                    })
-                }
-            }
-        }
-
-        removePlyrControlsClass(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            const playerContainer = instance.plyr.elements.container;
-            const playerControlsContainer = instance.plyr.elements.controls;
-
-            if (playerControlsContainer.classList.contains('plyr__controls-enable')) {
-                playerContainer.classList.remove('plyr--hide-controls');
-            }
-
-        }
-
-
-        showControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            const playerContainer = instance.plyr.elements.container;
-            const playerControlsContainer = instance.plyr.elements.controls;
-            const eventsInstance = this;
-            const commonInstance = this.common;
-
-            let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
-
-            instance.statusFeedbackService.setControlsVisible()
-
-            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');
-            }
-
-            eventsInstance.common.subtitlesHide(instance);
-
-            if (this.controlsTimeOut) {
-                clearTimeout(this.controlsTimeOut);
-            }
-
-            commonInstance.showHideText(true, playerControlsContainer);
-            commonInstance.showHideSeekBar(true, playerControlsContainer);
-            commonInstance.showHideBottomControls(true, playerControlsContainer);
-
-
-            if (instance.plyr.paused) {
-                commonInstance.showHideAllControls(true, playerControlsContainer);
-                return;
-            }
-
-            this.hideControls(instance, false);
-        }
-
-        hideControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, now: boolean) {
-            const playerContainer = instance.plyr.elements.container;
-            const playerControlsContainer = instance.plyr.elements.controls;
-            const eventsInstance = this;
-            const commonInstance = this.common;
-            let playerControlsBackground = playerContainer.querySelector('.plyr__controls__mobile-background');
-
-            const showHideControls = () => {
-                instance.statusFeedbackService.clearControlsVisible()
-
-                if (!instance.playerConfig.isPinTextControls()) {
-                    commonInstance.showHideText(false, playerControlsContainer);
-                }
-
-                if (!instance.playerConfig.isPinSeekBarControls()) {
-                    commonInstance.showHideSeekBar(false, playerControlsContainer);
-                }
-                if (!instance.playerConfig.isPinBottomControls()) {
-                    commonInstance.showHideBottomControls(false, playerControlsContainer);
-                }
-            }
-
-
-            if (!playerControlsContainer.classList.contains('plyr__controls-enable-addInfo')) {
-
-                if (now) {
-
-                    if (instance.plyr.paused) {
-                        commonInstance.showHideAllControls(true, playerControlsContainer);
-                        return;
-                    }
-
-                    showHideControls();
-                    // 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 (instance.plyr.paused) {
-                            commonInstance.showHideAllControls(true, playerControlsContainer);
-                            return;
-                        }
-
-                        showHideControls();
-                        if (playerControlsBackground && !playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
-                            playerControlsBackground.classList.remove('d-none');
-                        }
-                    }, 5000);
-                }
-                eventsInstance.common.subtitlesShow(instance);
-            }
-        }
-
-        fullScreenButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            let playerControlsSelector = instance.plyr.elements.controls;
-
-            const fullScreenButtonContainer = playerControlsSelector.querySelector('.fullscreen-custom-control');
-            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(fullScreenButtonContainer);
-
-            if (mobileEvent) {
-                mobileEvent.on('singletap', function LTPlayerMobileFullScreen(event) {
-                    event.preventDefault();
-                    instance.plyr.fullscreen.toggle();
-                })
-            }
-        }
-
-        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.controls.querySelector('.play-button');
-                    let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(playButton);
-                    if (mobileEvent) {
-                        mobileEvent.on('singletap', function LTPlayerMobilePLayPauseIcon() {
-                            if (instance.plyr.playing) {
-                                instance.plyr.togglePlay(false);
-                            } else {
-                                instance.plyr.togglePlay(true);
-                            }
-                            common.playPauseIconTimeUpdate(instance);
-                            instanceMobile.showControls(instance);
-                        });
-                    }
-            }
-        }
-
-        backwardForward(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-
-            let common = this.common;
-            const selectors = common.backwardRewind.getSelectors(instance);
-
-            const singleTapAction = () => {
-                instance.playerControl.mobileEvents.hideControls(instance, true);
-            }
-
-            if (selectors.forwardArea) {
-
-                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.forwardArea);
-
-                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(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)
-                })
-            }
-
-            if (selectors.rewindArea) {
-
-                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.rewindArea);
-
-                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(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)
-                })
-
-            }
-        }
-
-
-        backwardForwardSeconds(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            let playerControlsContainer = instance.plyr.elements.controls;
-            let forward = playerControlsContainer.querySelector('.skip-forward-seconds');
-            let backward = playerControlsContainer.querySelector('.skip-backward-seconds');
-
-            if (forward) {
-                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(forward);
-
-                mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
-                    instance.plyr.currentTime += 10;
-                })
-            }
-
-            if (backward) {
-                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(backward);
-                mobileEvent.on('singletap', function LTPlayerBackwardSeconds() {
-                    instance.plyr.currentTime -= 10;
-                })
-            }
-        }
-
-
-        settings(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            let playerControlsContainer = instance.plyr.elements.controls;
-            const settingsButton = playerControlsContainer.querySelector('.plyr__controls_settings-button');
-
-            if (settingsButton) {
-
-            }
-        }
-
-        volume(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-            let playerControlsContainer = instance.plyr.elements.controls;
-            const volume:HTMLElement = playerControlsContainer.querySelector('.bottom-controller__volume_control');
-            const setVolume = (): string => {
-                if (instance.plyr.muted) {
-                    instance.plyr.muted = false;
-                    return 'up';
-                } else {
-                    instance.plyr.muted = true;
-                    return 'mute';
-                }
-            }
-
-            if (volume) {
-                const volumeButton = volume.querySelector('button');
-                const volumeUp = volume.querySelector('.volume-max');
-                const volumeMute = volume.querySelector('.volume-mute');
-
-                const setVolumeIcon = (volumeState: string) => {
-                    if (volumeState === 'up') {
-                        volumeUp.classList.remove('d-none');
-                        volumeMute.classList.remove('d-none');
-                        volumeMute.classList.add('d-none');
-                    } else {
-                        volumeUp.classList.remove('d-none');
-                        volumeMute.classList.remove('d-none');
-                        volumeUp.classList.add('d-none');
-                    }
-                }
-
-                setVolumeIcon('up');
-
-                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(volumeButton);
-
-                mobileEvent.on('singletap', function LTPlayerMobileRewindClick() {
-                    let volumeState = setVolume();
-                    setVolumeIcon(volumeState);
-                    instance.playerControl.mobileEvents.showControls(instance);
-                })
-            }
-        }
-    }
-}