@latest-thinking/lt-player 1.2.0-a → 1.2.0-c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.2.0-a",
+  "version": "1.2.0-c",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",

package/src/assets/sass/app.scss

@@ -60,6 +60,7 @@ body {
 
 .lt-player:has(.plyr--fullscreen-fallback) {
   container-type: normal;
+  z-index: 10;
 
   .plyr--video {
     background: black;

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -510,6 +510,11 @@ export namespace LTPlayerControlsEvents {
             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');
@@ -544,28 +549,39 @@ export namespace LTPlayerControlsEvents {
                 volumeIcons(1)
             })
 
-            const volumeIcons = (range: any) => {
+            const getClosest = (curr: any, prev: any, range: any) => {
+                return (Math.abs(curr - range) < Math.abs(prev - range) ? curr : prev);
+            }
 
-                if (typeof range == 'number') {
-                    range = range.toString()
-                }
+            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 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 rangeVolumesItems: NodeListOf<HTMLElement> = volumeBody.querySelectorAll('.volume-max, .volume-75, .volume-50, .volume-mute');
+            const volumeIcons = (level: any) => {
+                if (itemsDataSet.length === 0) {
+                    return;
+                }
 
-                    rangeVolumesItems.forEach(function (value) {
-                        if (item.dataset.rangeValue === value.dataset.rangeValue) {
-                            value.classList.remove('d-none');
-                        } else {
-                            value.classList.add('d-none')
-                        }
-                    })
+                let range = itemsDataSet.reduce(function (prev, curr) {
+                    return getClosest(curr, prev, level);
+                });
+
+                if (typeof range == 'number') {
+                    range = range.toString()
                 }
 
                 switch (range) {
@@ -585,26 +601,7 @@ export namespace LTPlayerControlsEvents {
             }
 
             volumeRangeControl.addEventListener('input', function () {
-
-                let itemsDataSet: string[] = [];
-
-                rangeVolumesItems.forEach(item => {
-                    itemsDataSet.push(item.dataset.rangeValue)
-                })
-
-                if (itemsDataSet.length === 0) {
-                    return;
-                }
-
-                const getClosest = (curr: any, prev: any, range: any) => {
-                    return (Math.abs(curr - range) < Math.abs(prev - range) ? curr : prev);
-                }
-
-
-                let closest = itemsDataSet.reduce(function (prev, curr) {
-                    return getClosest(curr, prev, (volumeRangeControl as HTMLInputElement).value);
-                });
-                volumeIcons(closest);
+                volumeIcons((volumeRangeControl as HTMLInputElement).value);
             })
 
             instance.plyr.volume = 1;