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

package/package.json

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

package/src/assets/sass/sections/_share.scss

@@ -19,6 +19,151 @@
 //  }
 //}
 
+.lt-player-mobile-share-modal {
+  .share-controller {
+
+
+    .share-inactive {
+      align-items: end;
+      background: rgba(0, 0, 0, .3);
+      -webkit-backdrop-filter: blur(14px);
+      backdrop-filter: blur(14px);
+      bottom: 0;
+      color: $default-lt-player-white;
+      display: flex;
+      justify-content: center;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 9999999;
+
+      .share-controller-content {
+        background: $default-lt-player-white;
+        padding: 0 28px 20px;
+        text-align: center;
+        width: 100%;
+
+        .share-controller-mobile-modal-header {
+          position: sticky;
+          top: 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background-color: #F9F9F9;
+          min-height: 50px;
+          padding: 0 16px;
+          border-radius: 15px 15px 0 0;
+
+          .line-button {
+            display: flex;
+            width: 56px;
+            height: 6px;
+            background-color: #E6E6E6;
+            margin: 0.5rem auto;
+            cursor: pointer;
+          }
+        }
+
+
+        .line-button {
+          display: flex;
+          width: 56px;
+          height: 6px;
+          background-color: $default-lt-line-button;
+          margin: 8px auto;
+          cursor: pointer;
+          visibility: hidden;
+        }
+
+        .share-controller-frame {
+          position: relative;
+
+          .player-share-close-button {
+            color: $default-lt-player-black;
+            position: absolute;
+            right: -20px;
+            top: -20px;
+          }
+        }
+
+        .share-controller-title,
+        .share-controller-via {
+          h3 {
+            color: $default-lt-button-color;
+            font-size: $lt-player-font-size-base;
+            font-weight: $lt-player-font-weight-lg;
+            margin-top: 0;
+          }
+        }
+
+        .share-controller-via {
+          margin-bottom: 25px;
+        }
+
+        .share-controller-link-wrapper {
+          @extend %center-elements;
+          flex-flow: column wrap;
+          gap: 20px;
+          word-break: break-word;
+
+          .share-controller-url {
+            font-size: $lt-player-font-size-base;
+            color: $default-lt-player-modal-color;
+            font-weight: $lt-player-font-weight-sm;
+            text-decoration: underline;
+            cursor: pointer;
+            max-width: 90%;
+          }
+
+          .share-controller-link {
+            @extend %lt-player-btn;
+            @include yellow-btn;
+            color: $default-lt-button-color !important;
+            max-width: 142px;
+            width: 100%;
+          }
+        }
+
+        .share-controller-hr {
+          opacity: 0.3;
+          margin: 20px 0;
+        }
+
+        .share-controller-icons {
+          @extend %center-elements;
+          gap: 15px;
+          flex-wrap: wrap;
+
+          div {
+            display: none;
+          }
+
+          a {
+            padding: 0;
+
+            &:first-child {
+              .share-icon__icon {
+                background: $default_color_player;
+              }
+            }
+
+            .share-icon__icon {
+              @extend %center-elements;
+              width: 32px;
+              height: 32px;
+              max-width: 32px;
+              max-height: 32px;
+              background: $default-lt-button-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
 .plyr {
   .share-controller {
     .share-inactive {

package/src/components/LTPlayerSetup.ts

@@ -194,7 +194,6 @@ export class LTPlayerSetup {
         }
 
         switch (videoData.type) {
-
             case 'embedded':
                 return processEmbed()
             case 'video':

package/src/components/LTPlayerType.ts

@@ -106,14 +106,12 @@ export namespace LTPlayer {
 
             this.playerConfig.getPlayerElementContainer().classList.add(`lt-player-portrate--${this.playerConfig.getDevice()}`);
 
-
             let playerSettings = {};
 
             const controls = this.getPlayerControllers();
 
             Object.assign(playerSettings, {controls});
 
-
             if (this.playerConfig.getVideoType() === 'embedded') {
                 Object.assign(playerSettings, this.playerConfig.getEmbedOrigin())
             }
@@ -128,14 +126,14 @@ export namespace LTPlayer {
 
             const element = this.playerConfig.getPlayerElementContainer().querySelector('.embed_player');
 
-            const player = new Plyr(element, playerSettings);
+            this.plyr = new Plyr(element, playerSettings);
 
-            this.playerConfig.setObjectFit(player, 'portrait');
+            this.playerConfig.setObjectFit(this.plyr, 'portrait').then(() => {
+                this.videoService.init(this);
+            });
 
             this.windowService.init(this);
 
-            this.plyr = player;
-
             this.posterManager.init(this);
 
             const chapters = this.playerConfig.getChapters();
@@ -151,7 +149,7 @@ export namespace LTPlayer {
             }
 
             if (this.playerConfig.getDevice() !== 'mobile') {
-                this.miniPlayer.init(player, this.templateService, this.iconService, this.playerConfig.getPlayerType(), this);
+                this.miniPlayer.init(this.plyr, this.templateService, this.iconService, this.playerConfig.getPlayerType(), this);
             }
         }
 
@@ -264,14 +262,14 @@ export namespace LTPlayer {
 
             const element = this.playerConfig.getPlayerElementContainer().querySelector('.embed_player');
 
-            const player = new Plyr(element, playerSettings);
+            this.plyr = new Plyr(element, playerSettings);
 
-            this.playerConfig.setObjectFit(player, 'landscape');
+            this.playerConfig.setObjectFit(this.plyr, 'landscape').then(() => {
+                this.videoService.init(this);
+            });
 
             this.windowService.init(this);
 
-            this.plyr = player;
-
             this.posterManager.init(this);
 
             const chapters = this.playerConfig.getChapters();
@@ -287,7 +285,7 @@ export namespace LTPlayer {
             }
 
             if (this.playerConfig.getDevice() !== 'mobile') {
-                this.miniPlayer.init(player, this.templateService, this.iconService, this.playerConfig.getPlayerType(), this);
+                this.miniPlayer.init(this.plyr, this.templateService, this.iconService, this.playerConfig.getPlayerType(), this);
             }
         }
 

package/src/components/config/LTPlayerConfig.ts

@@ -29,7 +29,8 @@ export class LTPlayerConfig {
         chapters : null,
         playerType: null,
         device : 'desktop',
-        observe : false
+        observe : false,
+        videoObjectFit : false
     }
     processor : LTPlayerConfigProcessor.Map
 
@@ -64,22 +65,35 @@ export class LTPlayerConfig {
     }
 
     setObjectFit(plyr : Plyr, instanceType : string) {
-        if (plyr.isHTML5) {
 
-            const videoTag = plyr.elements.wrapper.querySelector('video');
+        return new Promise(resolve => {
+            if (plyr.isHTML5) {
 
-            if (videoTag) {
+                const videoTag = plyr.elements.wrapper.querySelector('video');
 
-                videoTag.addEventListener('loadedmetadata', (event)=> {
+                if (videoTag) {
 
-                    const type = Helper.getVideoOrientation(videoTag.videoWidth, videoTag.videoHeight);
+                    videoTag.addEventListener('loadedmetadata', (event)=> {
 
-                    if (type === instanceType) {
-                        videoTag.style.objectFit = 'cover';
-                    }
-                })
+                        const type = Helper.getVideoOrientation(videoTag.videoWidth, videoTag.videoHeight);
+
+                        if (type === instanceType) {
+                            this.configData.videoObjectFit = 'cover';
+                        } else {
+                            this.configData.videoObjectFit = 'clip';
+                        }
+
+                        resolve(true);
+                    })
+                }
             }
-        }
+        })
+
+
+    }
+
+    getObjectFit() {
+        return this.configData.videoObjectFit
     }
 
     setVersion(version : string | number) {

package/src/components/events/LTPlayerCommon.ts

@@ -107,10 +107,13 @@ export class LTPlayerCommon {
         });
     }
     onReadyPlayer() {
-
         //set share button
         if (this.player.playerConfig.getShareData()) {
-            this.player.share.events.desktop.init(this.player);
+            if (this.player.playerConfig.getDevice() === 'mobile') {
+                this.player.share.events.mobile.init();
+            } else {
+                this.player.share.events.desktop.init();
+            }
         }
 
         //set poster

package/src/components/events/LTPlayerDesktop.ts

@@ -147,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() {
@@ -155,6 +157,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
 
             //fullscreen icon
             instance.playerControl.desktopEvents.fullscreenIcon(instance, 'exitfullscreen');
+
+            instance.videoService.appendObjectFit();
         })
     }
 

package/src/components/events/LTPlayerMobile.ts

@@ -132,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();
         })
     }
 

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,162 +1,60 @@
-import {LTPlayer} from "../LTPlayerType";
-import {defaultType} from "../../global/types/ModuleTypes";
+import {LTPlayerShareManager} from "./LTPlayerShareManager";
 
 export namespace LTPlayerShareEvents {
 
-    export class common {
-
-        isPlaying : boolean
-        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();
-            } else {
-                this.isPlaying = false;
-            }
-        }
-
-
-        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');
-            if (this.isPlaying) {
-                instance.plyr.play();
-            }
-        }
-
-        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'),
-                ],
-                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')
-            };
-        }
-
-        setCopyButtonsEvents(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
+    export class mobile {
 
-            if (selectors.copyButtons.length > 0) {
-                selectors.copyButtons.forEach((button: HTMLElement) => {
-                    button.addEventListener('click', function LTPlayerShareCopy() {
-                        navigator.clipboard.writeText(selectors.urlInput.dataset.copy);
-                    })
+        manager : LTPlayerShareManager
 
-                })
-            }
+        constructor(manager: LTPlayerShareManager) {
+            this.manager = manager;
         }
 
-    }
-    export class mobile {
-        common : LTPlayerShareEvents.common
-        constructor() {
-            this.common = new common();
-        }
+        init() {
+            const buttons = [
+                this.manager.instance.plyr.elements.container.querySelector('.poster-lt-player-share'),
+                this.manager.instance.plyr.elements.controls.querySelector('.lt-player-share'),
+            ];
 
-        init(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
+            const instance = this;
 
-            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();
                         }
                     }
                 })