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

package/src/assets/sass/sections/controllers/_notification-rewind-forward.scss

@@ -1,36 +1,4 @@
-.lt-player-portrate--mobile {
-  &.lt-player--portrait {
-    &__xs {
-      .lt-player-notification {
-        .lt-player-video-content {
-          padding: 0 16px;
-
-          .poster-title {
-            @extend %line-clamp-3;
-            @include line-clamp-3;
-            font-size: $lt-player-font-size-xs;
-          }
-
-          .poster-paragraph {
-            &__content {
-              font-size: 14px;
-            }
-          }
-        }
-      }
-    }
-
-    &__sm {
-      .lt-player-notification {
-        .lt-player-video-content {
-          .poster-title {
-            font-size: $lt-player-font-size-base;
-          }
-        }
-      }
-    }
-  }
-}
+@import "../../abstracts/variables";
 
 .lt-player-notification {
   width: 100%;
@@ -65,10 +33,10 @@
 
   .lt-player-video-content {
     position: absolute;
-    bottom: 176px;
+    bottom: 110px;
     text-align: left;
     display: flex;
-    padding: 0 24px;
+    padding: 0 16px;
     width: 100%;
     user-select: none;
     align-items: end;
@@ -82,7 +50,7 @@
       @extend %line-clamp-3;
       @include line-clamp-4;
       color: $default-lt-player-white !important;
-      font-size: $lt-player-font-size-xxl;
+      font-size: $lt-player-font-size-sm;
       font-weight: $lt-player-font-weight-lg;
       line-height: $lt-player-line-height;
       margin: 0;
@@ -96,7 +64,7 @@
         word-wrap: break-word;
         text-overflow: ellipsis;
         overflow: hidden;
-        font-size: $lt-player-font-size-base;
+        font-size: $lt-player-font-size-sm;
         font-weight: $lt-player-font-weight-sm;
         color: $default-lt-player-white !important;
         margin-bottom: 0;
@@ -129,7 +97,7 @@
 
   .lt-player-rewind-area,
   .lt-player-forward-area {
-    touch-action: inherit!important;
+    touch-action: inherit !important;
     width: 100%;
     height: 100%;
     z-index: 4;
@@ -142,13 +110,11 @@
     display: flex;
     position: absolute;
     text-align: center;
-    border-radius: 100% 0 0 100%;
     height: unset;
     bottom: 10%;
 
     &__icon-wrapper {
       display: flex;
-      padding: 0 8px;
       user-select: none;
 
       &.rotate {
@@ -169,8 +135,10 @@
     }
 
     span {
-      font-size: $lt-player-font-size-xs;
+      font-size: $lt-player-font-size-base;
+      font-weight: $lt-player-font-weight-sm;
       user-select: none;
+      padding: 0 8px;
     }
   }
 
@@ -181,11 +149,11 @@
       flex-direction: row-reverse;
 
       &__portrait {
-        margin: auto auto auto 48px;
+        margin: auto auto auto 45px;
       }
 
       &__landscape {
-        margin: auto auto auto 64px;
+        margin: auto 60px auto auto;
       }
     }
   }
@@ -195,11 +163,11 @@
 
     &__icon {
       &__portrait {
-        margin: auto 48px auto auto;
+        margin: auto 45px auto auto;
       }
 
       &__landscape {
-        margin: auto 64px auto auto;
+        margin: auto auto auto 60px;
       }
     }
   }
@@ -211,25 +179,10 @@
     //opacity: 1;
   }
 
-
-  .animate-in{
+  .animate-in {
     opacity: 1;
-    display:flex;
+    display: flex;
     animation: ripple 1s forwards;
-
-    i{
-      display:block;
-    }
-
-    .lt-player-forward__icon i {
-      padding-bottom:2px;
-      margin-left: 30px;
-      animation: fadeInLeft 2s;
-    }
-
-    .lt-player-rewind__icon i{
-      animation: fadeInRight 2s;
-    }
   }
 }
 
@@ -268,8 +221,25 @@
   }
 }
 
+@container portrait (width > 319px) {
+  .lt-player-orientation--portrait {
+    .lt-player-notification {
+      .lt-player-video-content {
+        padding: 0 20px;
+        bottom: 136px;
+
+        .poster-title {
+          @extend %line-clamp-3;
+          @include line-clamp-3;
+          font-size: $lt-player-font-size-xxl;
+        }
 
-
-
-
-
+        .poster-paragraph {
+          &__content {
+            font-size: $lt-player-font-size-base;
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/sass/sections/controllers/_top.scss

@@ -1,59 +1,5 @@
 @import "../../abstracts/variables";
 
-.lt-player-landscape--desktop {
-  .plyr {
-    &__controls,
-    &__controls-enable,
-    &__controls-enable-settings {
-      .top-controllers {
-        padding: 40px 40px 0;
-
-        &__background {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-.lt-player-landscape--mobile,
-.lt-player-landscape--desktop {
-  &.lt-player--landscape {
-    &__xxs {
-      .plyr {
-        &__controls {
-          .top-controllers {
-            padding: 10px;
-
-            button {
-              @include buttons-xs;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.lt-player-portrate--mobile,
-.lt-player-portrate--desktop {
-  &.lt-player--portrait {
-    &__xs {
-      .plyr {
-        &__controls {
-          .top-controllers {
-            padding: 16px;
-
-            button {
-              @include buttons-xs;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
 .plyr {
   .plyr__controls-enable-settings {
     opacity: 1;
@@ -67,12 +13,13 @@
   &__controls-enable-settings {
     .top-controllers {
       width: 100%;
-      padding: 24px 24px 0 24px;
+      padding: 10px 10px 0;
       position: absolute;
 
       button {
         @extend %lt-player-btn;
         @include dark-btn;
+        @include buttons-xs;
       }
 
       &__background {
@@ -102,21 +49,18 @@
           align-items: flex-start;
         }
 
-        &__center {
-          flex: 1;
-        }
-
         &__right {
           align-items: end;
         }
 
         &__center {
+          flex: 1;
           width: 100%;
           word-break: break-word;
 
           .chapter {
-            font-size: $lt-player-font-size-xxl;
-            font-weight: $lt-player-font-weight-sm;
+            font-size: $lt-player-font-size-base;
+            font-weight: $lt-player-font-weight-base;
             position: relative;
             z-index: 90;
             margin: 0;
@@ -125,64 +69,101 @@
         }
 
         &__right {
-
           .mini-player-control {
-            margin-top: 16px;
+            margin-top: 20px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.lt-player-orientation--portrait {
+  .plyr {
+    &__controls {
+      .top-controllers {
+        padding: 16px;
+      }
+    }
+  }
+}
+
+// @Container Query
+
+@container portrait (width > 319px) {
+  .lt-player-orientation--portrait {
+    .plyr {
+      &__controls {
+        .top-controllers {
+          padding: 20px 20px 0;
+
+          &__body {
+            &__center {
+              .chapter {
+                margin-top: 6px;
+              }
+            }
+          }
+
+          button {
+            @include buttons-normal;
+          }
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 479px) {
+  .lt-player-orientation--landscape {
+    .plyr {
+      &__controls {
+        .top-controllers {
+          padding: 20px 20px 0;
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 639px) {
+  .lt-player-orientation--landscape {
+    .plyr {
+      &__controls {
+        .top-controllers {
+          padding: 20px 40px 0;
+
+          &__body {
+            &__center {
+              .chapter {
+                font-size: $lt-player-font-size-lg;
+              }
+            }
           }
         }
       }
     }
   }
+}
 
+@container landscape (width > 912px) {
+  .lt-player-orientation--landscape {
+    .plyr {
+      &__controls {
+        .top-controllers {
+          button {
+            @include buttons-normal;
+          }
 
-  //&__controls {
-  //  .top-controllers {
-  //    opacity: 0;
-  //    transition-property: opacity, left, top, height;
-  //    transition-duration: 1s, 3s;
-  //
-  //    &__body {
-  //      &__center {
-  //        position: absolute;
-  //        margin-left: auto;
-  //        margin-right: auto;
-  //        top: 1rem;
-  //        left: 0;
-  //        right: 0;
-  //        text-align: center;
-  //      }
-  //    }
-  //  }
-  //
-  //
-  //  &__body {
-  //    &__right{
-  //      .fullscreen-custom-control {
-  //        position: absolute;
-  //        top: 1rem;
-  //        right: 1rem;
-  //        bottom: auto;
-  //      }
-  //
-  //      .mini-player-control {
-  //        position: absolute;
-  //        top: 4rem;
-  //        right: 1rem;
-  //        bottom: auto;
-  //      }
-  //    }
-  //  }
-  //}
-
-  //.fade-animation-controllers {
-  //  //display: flex!important;
-  //  .top-controllers {
-  //    background: linear-gradient(transparent,rgba(0,0,0,.75))!important;
-  //    background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)))!important;
-  //    opacity: 1 !important;
-  //    transition-property: opacity, left, top, height;
-  //    transition-duration: 1s, 3s;
-  //  }
-  //
-  //}
+          &__body {
+            &__center {
+              .chapter {
+                font-size: $lt-player-font-size-xxl2;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }

package/src/components/LTPlayerType.ts

@@ -105,6 +105,7 @@ export namespace LTPlayer {
             this.innerPlayerTemplate(this.playerConfig);
 
             this.playerConfig.getPlayerElementContainer().classList.add(`lt-player-portrate--${this.playerConfig.getDevice()}`);
+            this.playerConfig.getPlayerElementContainer().classList.add('lt-player-orientation--portrait');
 
             let playerSettings = {};
 
@@ -241,6 +242,7 @@ export namespace LTPlayer {
             this.innerPlayerTemplate(this.playerConfig);
 
             this.playerConfig.getPlayerElementContainer().classList.add(`lt-player-landscape--${this.playerConfig.getDevice()}`);
+            this.playerConfig.getPlayerElementContainer().classList.add('lt-player-orientation--landscape');
 
             let playerSettings = {};
 

package/src/components/addInfo/LTPlayerAddInfoDesktop.ts

@@ -0,0 +1,99 @@
+import {LTPLayerAddInfo} from "./LTPlayerAddInfoManager";
+import {additionalInformation} from "../../global/types/ModuleTypes";
+
+export class LTPlayerAddInfoDesktop {
+    set(controller: LTPLayerAddInfo.Controller) {
+
+        const playerContainer = controller.plyr.elements.container;
+        const playerControlsContainer = controller.plyr.elements.controls;
+        let additionalInfoBodyOut: Element = playerContainer.nextElementSibling;
+        let additionalInfoBodyIn: Element = playerControlsContainer.querySelector('.lt-player__additional-info');
+        let instance = controller;
+
+
+        const getInfoButtons = (selector: Element): NodeList => {
+
+            if (!selector) {
+                return null
+            }
+            return selector.querySelectorAll('button');
+        }
+
+        let buttons: NodeList = null;
+
+        const infoButtonsOut: NodeList = getInfoButtons(additionalInfoBodyOut);
+        const infoButtonsIn: NodeList = getInfoButtons(additionalInfoBodyIn);
+
+        if (!infoButtonsOut) {
+            buttons = infoButtonsIn;
+        } else {
+            buttons = infoButtonsOut;
+        }
+
+        if (buttons.length === 0) {
+            return
+        }
+
+        const  createInformationModal = (info: additionalInformation, key: string) => {
+
+            let modalTemplate = null;
+
+            if (typeof info === 'object') {
+                modalTemplate = controller.templateService.getAdditionalInfo({
+                    desktop : true,
+                    modal : true,
+                    id : `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
+                    object_data : true,
+                    [key] : info
+                })
+            } else {
+                modalTemplate = controller.templateService.getAdditionalInfo({
+                    desktop : true,
+                    modal : true,
+                    id : `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
+                    data : info
+                })
+            }
+
+            document.querySelector('body').insertAdjacentHTML("afterend", modalTemplate);
+        }
+
+        buttons.forEach((button: HTMLElement) => {
+
+            button.addEventListener('click', function (event) {
+
+                event.preventDefault();
+
+                let targetModal = button.dataset.ltTarget;
+                let data = instance.additionalData;
+
+                if (data[targetModal] !== undefined) {
+                    createInformationModal(data[targetModal], targetModal)
+                }
+
+                let modal = document.querySelector(`.lt-modal-${targetModal}-${instance.playerInstance.playerConfig.getPlayerId()}`);
+
+                if (modal) {
+                    modal.classList.add('player-lt__show-modal');
+                }
+
+                window.Player.players.forEach( item => {item.plyr.pause()})
+            })
+        })
+    }
+
+    windowDesktopEvents(event: MouseEvent) {
+        const modals = document.querySelectorAll('.player-lt__modal');
+        if (modals.length !== 0) {
+            modals.forEach(modal => {
+                if (modal.classList.contains('player-lt__show-modal')) {
+                    let target = event.target as HTMLElement;
+                    if (target.classList.contains('player-lt__show-modal') || target.classList.contains('player-lt__close-button')) {
+                        modal.classList.remove('player-lt__show-modal');
+                        document.querySelectorAll(".player-lt__modal").forEach(el => el.remove());
+                    }
+                }
+            })
+        }
+    }
+}

package/src/components/addInfo/LTPlayerAddInfoManager.ts

@@ -3,7 +3,8 @@ import {TemplateService} from "../../services/TemplateService";
 import {IconsService} from "../../services/IconsService";
 import Plyr, {PlyrEvent} from "plyr";
 import {LTPlayer} from "../LTPlayerType";
-import {LTPlayerAdditionalInfo} from "./LTPlayerAdditionalInfoEvents";
+import {LTPlayerAddInfoDesktop} from "./LTPlayerAddInfoDesktop";
+import {LTPlayerAddInfoMobile} from "./LTPlayerAddInfoMobile";
 
 export class LTPlayerAddInfoManager {
     container: HTMLElement
@@ -16,9 +17,8 @@ export class LTPlayerAddInfoManager {
     players: Array<any>;
     device: string
     addInfoType: LTPLayerAddInfo.Landscape | LTPLayerAddInfo.Portrate
-    desktopEvents: LTPlayerAdditionalInfo.Desktop;
-    mobileEvents: LTPlayerAdditionalInfo.Mobile;
-
+    desktopEvents: LTPlayerAddInfoDesktop;
+    mobileEvents: LTPlayerAddInfoMobile
 
 
     constructor() {
@@ -28,11 +28,11 @@ export class LTPlayerAddInfoManager {
 
 
     setDesktopEvents() {
-        this.desktopEvents = new LTPlayerAdditionalInfo.Desktop();
+        this.desktopEvents = new LTPlayerAddInfoDesktop();
     }
 
     setMobileEvents() {
-        this.mobileEvents = new LTPlayerAdditionalInfo.Mobile();
+        this.mobileEvents = new LTPlayerAddInfoMobile();
     }
 }
 

package/src/components/addInfo/LTPlayerAddInfoMobile.ts

@@ -0,0 +1,110 @@
+import {LTPLayerAddInfo} from "./LTPlayerAddInfoManager";
+import {additionalInformation} from "../../global/types/ModuleTypes";
+
+export class LTPlayerAddInfoMobile {
+    set(controller: LTPLayerAddInfo.Controller) {
+        const playerContainer = controller.plyr.elements.container;
+        const playerControlsContainer = controller.plyr.elements.controls;
+        let additionalInfoBody: Element = playerContainer.querySelector('.lt-player__additional-info-mobile');
+        let instance = controller;
+        let __this = this;
+
+        let buttons: NodeList = additionalInfoBody.querySelectorAll('button');
+
+        if (buttons.length === 0) {
+            return
+        }
+
+        const  createInformationModal = (info: additionalInformation, key: string) => {
+            let modalTemplate = null;
+
+            if (typeof info === 'object') {
+                modalTemplate = controller.templateService.getAdditionalInfo({
+                    mobile : true,
+                    modal : true,
+                    [controller.device] : true,
+                    object_data : true,
+                    [key] : info
+                })
+            } else {
+                modalTemplate = controller.templateService.getAdditionalInfo({
+                    mobile : true,
+                    modal : true,
+                    data : info,
+                    [controller.device] : true
+                })
+            }
+
+            const modal = document.createElement('div');
+            modal.classList.add('lt-player-mobile-add-info-modal')
+            modal.innerHTML = modalTemplate;
+
+            const body = document.querySelector('body');
+
+            if (body) {
+                body.appendChild(modal);
+            }
+        }
+
+        buttons.forEach((button: HTMLElement) => {
+            let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(button);
+            if (mobileEvent) {
+                mobileEvent.on('singletap', function LTPlayerMobileAdditionalInfoButtons(event) {
+                    event.preventDefault();
+
+                    controller.playerInstance.plyr.elements.controls.classList.add('plyr__controls-enable-addInfo');
+
+                    let targetModal = button.dataset.ltTarget;
+                    let data = instance.additionalData;
+
+
+                    if (data[targetModal] !== undefined) {
+                        createInformationModal(data[targetModal], targetModal)
+                    }
+
+                    playerControlsContainer.classList.add('player-lt__modal__mobile-show-modal');
+
+                    window.Player.players.forEach( item => {item.plyr.pause()});
+
+                    __this.dragCloseModal(controller);
+
+                    controller.playerInstance.playerControl.mobileEvents.showControls(controller.playerInstance)
+                })
+            }
+        })
+
+
+    }
+
+    dragCloseModal(controller: LTPLayerAddInfo.Controller) {
+        const modalBody = document.querySelector('.lt-player-mobile-add-info-modal');
+        const modalHeader = modalBody.querySelector('.player-lt__mobile__modal-header');
+        const  background = modalBody.querySelector('.player-lt__modal__mobile__background');
+
+        const closeModal = () => {
+            modalBody.remove();
+        }
+        if (modalHeader) {
+            let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(modalHeader);
+            if (mobileEvent) {
+                mobileEvent.on('pan', function LTPlayerMobileDragDownModal() {
+                    closeModal();
+                    if (controller.plyr.paused) {
+                        controller.plyr.play();
+                    }
+                })
+            }
+        }
+        if (background) {
+            let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(background);
+            if (mobileEvent) {
+                mobileEvent.on('singletap', function LTPlayerMobileCloseModal() {
+                    closeModal();
+                    if (controller.plyr.paused) {
+                        controller.plyr.play();
+                    }
+                })
+            }
+        }
+    }
+}