@latest-thinking/lt-player 1.0.3-c → 1.0.4-c

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.0.3-c",
+  "version": "1.0.4-c",
   "description": "LT player.",
-  "main": "dist/js/lt-player-app.js",
-  "module": "dist/js/lt-player-app.js",
-  "sass": "dist/css/lt-player-app.css",
-  "style": "dist/css/lt-player-app.css",
+  "main": "dist/js/lt-player-main.js",
+  "module": "dist/js/lt-player-main.js",
+  "sass": "src/assets/sass/app.scss",
+  "style": "dist/css/lt-player-main.css",
   "scripts": {
     "lint": "npm run lint:styles; npm run lint:scripts",
     "lint:styles": "stylelint src",

package/src/assets/sass/abstracts/_mixins.scss

@@ -1,3 +1,10 @@
+@mixin center-position($top: $top, $left: $top) {
+  position: absolute;
+  top: $top;
+  left: $top;
+  transform: translate(-#{$top}, -#{$top});
+}
+
 @mixin yellow-btn {
   color: $default-lt-button-color;
   background-color: $default_color_player;

package/src/assets/sass/core/_fonts.scss

@@ -22,31 +22,31 @@
 
 @font-face {
   font-family: "MuseoSans";
-  src: url('../fonts/museo/MuseoSans-100.otf') format('opentype');
+  src: url('/src/assets/fonts/museo/MuseoSans-100.otf') format('opentype');
   font-weight: 100;
 }
 
 @font-face {
   font-family: "MuseoSans";
-  src: url('../fonts/museo/MuseoSans-300.otf') format('opentype');
+  src: url('/src/assets/fonts/museo/MuseoSans-300.otf') format('opentype');
   font-weight: 300;
 }
 
 @font-face {
   font-family: "MuseoSans";
-  src: url('../fonts/museo/MuseoSans-500.otf') format('opentype');
+  src: url('/src/assets/fonts/museo/MuseoSans-500.otf') format('opentype');
   font-weight: 500;
 }
 
 @font-face {
   font-family: "MuseoSans";
-  src: url('../fonts/museo/MuseoSans-700.otf') format('opentype');
+  src: url('/src/assets/fonts/museo/MuseoSans-700.otf') format('opentype');
   font-weight: 700;
 }
 
 @font-face {
   font-family: "MuseoSans";
-  src: url('../fonts/museo/MuseoSans-900.otf') format('opentype');
+  src: url('/src/assets/fonts/museo/MuseoSans-900.otf') format('opentype');
   font-weight: 900;
 }
 

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

@@ -1,5 +1,4 @@
 .plyr {
-  &__controls {
     .share-controller {
 
       .share-inactive {
@@ -19,7 +18,7 @@
         position: absolute;
         right: 0;
         top: 0;
-        z-index: 60;
+        z-index: 99;
 
         .share-controller-content {
           background: #fff;
@@ -95,7 +94,7 @@
 
               .share-icon__icon {
                 border-radius: 50%;
-                box-shadow: 0px 4px 20px rgba(0,0,0,.1);
+                box-shadow: 0 4px 20px rgba(0,0,0,.1);
                 display: block;
                 margin-bottom: 5px;
                 max-height: 35px;
@@ -119,5 +118,5 @@
 
       }
     }
-  }
+
 }

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

@@ -4,4 +4,10 @@
   margin: auto!important;
   width: 75%;
   color: $default-lt-player-white !important;
+  background-color: $default-lt-player-black !important;
+  font-size: $lt-player-font-size-lg !important;
+  line-height: $lt-player-line-height !important;
+  padding: .5rem .75rem !important;
+  font-family: $lt-font-family-base !important;
+  white-space: unset !important;
 }

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

@@ -175,6 +175,10 @@
         &__right-buttons {
           direction: unset;
         }
+
+        &__play-button_body {
+          bottom: -3px;
+        }
       }
     }
   }
@@ -245,8 +249,14 @@
         width: 44px;
         height: 40px;
         white-space: nowrap;
-        font-size: .7rem;
+        font-size: 12px;
         transition: none;
+        background-color: $default-lt-player-blue;
+
+        &:focus,
+        &:active {
+          background-color: $default-lt-player-blue;
+        }
       }
 
       &__background {
@@ -258,14 +268,14 @@
         background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
       }
 
-      &__play-button_body{
-        bottom: -3px;
+      &__play-button_body {
+        bottom: -8px;
         position: relative;
 
         .play-button {
           @extend %lt-player-btn;
           @include yellow-btn;
-          padding: .75rem;
+          padding: 1rem;
         }
       }
 

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

@@ -36,6 +36,27 @@
   display: flex;
   position: relative;
 
+  &__notification-button-state {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    .player-state {
+      opacity: 0;
+      transition: all 0.3s ease-in-out;
+      pointer-events: none;
+      @extend %lt-player-btn;
+      @include dark-btn;
+      background: rgba(39, 40, 42, 0.5);
+      padding: 1rem;
+    }
+
+    .active {
+      opacity: 1;
+      transition: all 0.3s ease-in-out;
+    }
+  }
 
   .lt-player-video-content {
     position: absolute;
@@ -86,19 +107,32 @@
     left: 0;
     top: 0;
 
+    &__icon-wrapper {
+      display: flex;
+      padding: 0 .5rem;
+      user-select: none;
+
+      &.rotate {
+        rotate: 180deg;
+      }
+
+      img {
+        max-width: 20px;
+      }
+    }
+
     &__icon {
+      display: flex;
       justify-content:flex-start;
       align-items:center;
       margin: auto;
       color: rgba(255,255,255, 1);
-      i {
-        color: white;
-      }
-
+      user-select: none;
     }
 
-    span{
-      font-size:12px;
+    span {
+      font-size: 12px;
+      user-select: none;
     }
 
   }
@@ -120,15 +154,25 @@
     right: 0;
     top: 0;
 
+    &__icon-wrapper {
+      display: flex;
+      padding: 0 .5rem;
+
+      &.rotate {
+        rotate: 180deg;
+      }
+
+      img {
+        max-width: 20px;
+      }
+    }
+
     &__icon {
+      display: flex;
       justify-content:flex-start;
       align-items:center;
       margin: auto;
       color: rgba(255,255,255, 1);
-
-      i {
-        color: white;
-      }
     }
 
     span{
@@ -140,8 +184,9 @@
 
   .lt-player-notify {
     transition: background 0.8s;
-    background: rgba(200,200,200,.4) radial-gradient(circle, transparent 1%, rgba(200,200,200,.4) 1%) center/15000%;
+    //background: rgba(200,200,200,.4) radial-gradient(circle, transparent 1%, rgba(200,200,200,.4) 1%) center/15000%;
     opacity: 0;
+    //opacity: 1;
   }
 
 
@@ -168,14 +213,14 @@
 
 @keyframes ripple{
   0%   {
-    background-color: rgba(200,200,200,.4);
-    background-size: 100%;
+    //background-color: rgba(200,200,200,.4);
+    //background-size: 100%;
     transition: background 0s;
     opacity:1;
   }
   100% {
-    transition: background 6s;
-    background: rgba(200,200,200,.4) radial-gradient(circle, transparent 1%, rgba(200,200,200,.4) 1%) center/15000%;
+    //transition: background 6s;
+    //background: rgba(200,200,200,.4) radial-gradient(circle, transparent 1%, rgba(200,200,200,.4) 1%) center/15000%;
     display: flex;
     opacity:0;
   }

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

@@ -66,6 +66,24 @@
         display: flex;
         justify-content: space-between;
 
+        &__left {
+          display: flex;
+          flex-direction: column;
+          align-items: start;
+          flex: 0 0 20%
+        }
+
+        &__center {
+          flex: 1;
+        }
+
+        &__right {
+          display: flex;
+          flex-direction: column;
+          align-items: end;
+          flex: 0 0 20%
+        }
+
         &__center {
           width: 100%;
           word-break: break-word;
@@ -81,7 +99,6 @@
         }
 
         &__right {
-          //display: grid;
 
           .mini-player-control {
             margin-top: 1rem;

package/src/components/LTPlayerManager.ts

@@ -1,11 +1,6 @@
-import * as playerSchema from '../json-schema/player-config.json';
-import {ValidatorService} from "../services/ValidatorService";
-import {defaultType, playerConfigType, playerManger, PlayerType} from "../global/types/ModuleTypes";
+import {playerConfigType, playerManger} from "../global/types/ModuleTypes";
 import {LTPlayer} from "./LTPlayerType"
-import {LTPLayerAddInfo} from "./addInfo/LTPlayerAddInfoManager";
-import {Helper} from "../services/Helper";
 import {LTPlayerSetup} from "./LTPlayerSetup";
-
 export class LTPlayerManager {
 
     /**
@@ -19,6 +14,7 @@ export class LTPlayerManager {
      *
      */
     constructor() {
+        this.initPageDomElements();
     }
 
     /**

package/src/components/LTPlayerType.ts

@@ -139,6 +139,10 @@ export namespace LTPlayer {
 
             this.posterManager.init(this);
 
+            if (this.playerConfig.getShareData()) {
+                this.share.init(this);
+            }
+
             if (this.playerConfig.getDevice() !== 'mobile') {
                 this.miniPlayer.init(player, this.templateService, this.iconService);
             }
@@ -163,7 +167,7 @@ export namespace LTPlayer {
         destruct() {
             let _this = this;
 
-            return new Promise((resolve, reject) => {
+            return new Promise((resolve) => {
                 _this.additionalInfoService.remove(this);
 
                 _this.additionalInfoService = null;
@@ -252,10 +256,12 @@ export namespace LTPlayer {
 
             this.devMethodePlayer = new LTPlayerDevMethode.Player(player);
 
-            this.posterManager = new LTPlayerPosterManager();
-
             this.posterManager.init(this);
 
+            if (this.playerConfig.getShareData()) {
+                this.share.init(this);
+            }
+
             if (this.playerConfig.getDevice() !== 'mobile') {
                 this.miniPlayer.init(player, this.templateService, this.iconService);
             }

package/src/components/controls/LTPlayerControlsEvents.ts

@@ -1,56 +1,11 @@
 import {LTPlayer} from "../LTPlayerType";
-import {defaultType, plyr} from "../../global/types/ModuleTypes";
+import {plyr} from "../../global/types/ModuleTypes";
 
 
 export namespace LTPlayerControlsEvents  {
 
     export class Common {
 
-        share = {
-            getShareData(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType): defaultType | null {
-               return (instance.playerConfig.getShareData()) ? instance.playerConfig.getShareData() : null;
-            },
-
-            appendShareTemplate(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, shareData: defaultType) {
-                const settingsControls = instance.plyr.elements.controls.children[instance.plyr.elements.controls.children.length - 1];
-                settingsControls.insertAdjacentHTML("afterend", instance.templateService.getShare(shareData));
-            },
-
-            appendScriptTag() {
-                const script = document.createElement("script");
-                script.type = "text/javascript";
-                script.src = "https://static.addtoany.com/menu/page.js";
-                script.async;
-                document.body.appendChild(script);
-            },
-
-            getSelectors(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-                return {
-                    playerContainerControls : instance.plyr.elements.controls,
-                    shareButton : instance.plyr.elements.controls.querySelector('.lt-player-share'),
-                    shareContainer : instance.plyr.elements.controls.querySelector('.share-controller-wrapper')
-                }
-            },
-
-            activeShareModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
-                selectors.playerContainerControls.classList.add('plyr__controls-enable-share')
-                selectors.shareContainer.classList.remove('share-inactive');
-                selectors.shareContainer.classList.add('share-active');
-                instance.plyr.pause();
-            },
-
-            inactiveShareModal(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType, selectors: defaultType) {
-                selectors.playerContainerControls.classList.remove('plyr__controls-enable-share')
-                selectors.shareContainer.classList.add('share-inactive');
-                selectors.shareContainer.classList.remove('share-active');
-                instance.plyr.play();
-            },
-
-            copyButtons(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-                return instance.plyr.elements.container.querySelectorAll('.share-controller-link');
-            }
-        }
-
         backwardRewind = {
 
             getSelectors(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
@@ -73,10 +28,33 @@ export namespace LTPlayerControlsEvents  {
             },
 
             playPause(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+
+                const playInfoIcon = instance.plyr.elements.controls.querySelector('.player-state__play-icon');
+                const pauseInfoIcon = instance.plyr.elements.controls.querySelector('.player-state__pause-icon');
+                const playerStateInfo = instance.plyr.elements.controls.querySelector('.player-state');
+
+                const removeStateButtons = () => {
+                    setTimeout(() => {
+                        playerStateInfo.classList.remove('active');
+                        setTimeout(() => {
+                            playInfoIcon.classList.add('d-none');
+                            pauseInfoIcon.classList.add('d-none');
+                        }, 300)
+                    }, 300)
+
+                }
+
+
                 if (instance.plyr.playing) {
-                    instance.plyr.togglePlay(false)
+                    pauseInfoIcon.classList.remove('d-none');
+                    playerStateInfo.classList.add('active');
+                    instance.plyr.togglePlay(false);
+                    removeStateButtons();
                 } else {
+                    playInfoIcon.classList.remove('d-none');
+                    playerStateInfo.classList.add('active');
                     instance.plyr.togglePlay(true);
+                    removeStateButtons();
                 }
             },
 
@@ -188,7 +166,6 @@ export namespace LTPlayerControlsEvents  {
         }
 
         playPauseIcon(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType, type: string) {
-
             switch (type) {
                 case 'timeupdate':
                    this.common.playPauseIconTimeUpdate(instance);
@@ -385,65 +362,6 @@ export namespace LTPlayerControlsEvents  {
 
             volumeIcons(instance.plyr.volume)
         }
-
-
-        share(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-
-            let shareData: defaultType | null = this.common.share.getShareData(instance);
-
-            if (!shareData) {
-                return;
-            }
-
-            const common = this.common;
-
-
-            common.share.appendShareTemplate(instance, shareData);
-            common.share.appendScriptTag();
-
-            const selectors = common.share.getSelectors(instance);
-
-
-            if (selectors.shareButton) {
-                selectors.shareButton.addEventListener('click', function (event) {
-                    event.preventDefault();
-                    common.share.activeShareModal(instance, selectors);
-                })
-            }
-
-            selectors.shareContainer.addEventListener('click', function LTPlayerShareArea(event) {
-                event.preventDefault();
-                if (selectors.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.share.inactiveShareModal(instance, selectors);
-                    }
-                }
-            })
-
-            const copyButtons: NodeListOf<Element> = common.share.copyButtons(instance);
-
-            copyButtons.forEach(button => {
-                button.addEventListener('click', function (event) {
-                    event.preventDefault();
-                    let value = (button as HTMLElement).dataset.copy;
-
-                    if (value) {
-                        navigator.clipboard.writeText(value);
-                    }
-                })
-            })
-
-            const modalCloseButton = selectors.playerContainerControls.querySelector('.player-lt__close-button');
-
-            if (modalCloseButton) {
-                modalCloseButton.addEventListener('click', function (event) {
-                    event.preventDefault();
-                    common.share.activeShareModal(instance, selectors);
-                })
-            }
-        }
-
     }
 
     export class Mobile {
@@ -671,63 +589,6 @@ export namespace LTPlayerControlsEvents  {
             })
 
         }
-
-        share(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
-
-            let shareData: defaultType | null = this.common.share.getShareData(instance);
-
-            if (!shareData) {
-                return;
-            }
-
-            const common = this.common;
-
-            common.share.appendShareTemplate(instance, shareData);
-            common.share.appendScriptTag();
-
-            const selectors = common.share.getSelectors(instance);
-
-
-            if (selectors.shareButton) {
-                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.shareButton);
-                mobileEvent.on('singletap', function LTPlayerMobileShareOpenModal() {
-                    common.share.activeShareModal(instance, selectors);
-                })
-            }
-
-            let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(selectors.shareContainer);
-            mobileEvent.on('singletap', function LTPlayerMobileShareCloseModal(event) {
-                if (selectors.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.share.inactiveShareModal(instance, selectors);
-                    }
-                }
-            })
-
-            const copyButtons: NodeListOf<Element> = common.share.copyButtons(instance);
-
-            copyButtons.forEach(button => {
-
-                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(button);
-                mobileEvent.on('singletap', function LTPlayerMobileShareCopyLink() {
-                    let value = (button as HTMLElement).dataset.copy;
-
-                    if (value) {
-                        navigator.clipboard.writeText(value);
-                    }
-                })
-            })
-
-            const modalCloseButton = selectors.playerContainerControls.querySelector('.player-lt__close-button');
-
-            if (modalCloseButton) {
-                let mobileEvent: HammerManager = instance.eventInstance.mobileEvents.setMobileEvent(modalCloseButton);
-                mobileEvent.on('singletap', function LTPlayerMobileShareCloseModal() {
-                    common.share.inactiveShareModal(instance, selectors);
-                })
-            }
-        }
     }
 
 

package/src/components/events/LTPlayerCommon.ts

@@ -22,7 +22,7 @@ export class LTPlayerCommon {
 
         })
     }
-    setDefaultSettingsConfig(caption: boolean) {
+    setDefaultSettingsConfig() {
         const instance = this.player;
 
         instance.plyr.speed = 1;
@@ -109,6 +109,9 @@ export class LTPlayerCommon {
 
     onReadyPlayer() {
 
+        //set share button
+        this.player.share.events.desktop.init(this.player);
+
         this.player.windowService.init(this.player);
         //set poster
         this.player.posterManager.mobileEvents.onload(this.player);

package/src/components/events/LTPlayerDesktop.ts

@@ -21,6 +21,8 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
         this.plyrEndVideo();
         this.plyrFullScreen();
         this.plyrTimeUpdate();
+        this.plyrOnPlay();
+        this.plyrOnPause();
     }
 
 
@@ -37,7 +39,7 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
             }
 
 
-            eventManager.setDefaultSettingsConfig(false);
+            eventManager.setDefaultSettingsConfig();
 
             if (instance.plyr.isHTML5) {
                 eventManager.onReadyPlayer();
@@ -66,9 +68,6 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
             //set volume controller
             instance.playerControl.desktopEvents.volume(instance);
 
-            //set share button
-            instance.playerControl.desktopEvents.share(instance);
-
             //set settings controller
             instance.playerControl.settingsControlsManager.init(instance);
 
@@ -109,7 +108,6 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
 
     plyrEndVideo() {
         let eventManager = this;
-        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
         let plyr: Plyr = this.plyr;
 
         plyr.on('ended', function LTPlayerDesktopEndVideo() {
@@ -150,8 +148,25 @@ export class LTPlayerDesktop extends LTPlayerCommon implements EventsInterfaces
             if (instance.playerConfig.getPreload().isActive) {
                 common.preloadPoster.timeUpdate(instance, 'event');
             }
+        })
+    }
 
+    plyrOnPlay() {
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('play', function LTPlayerDesktopTimeUpdate(event) {
             instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
         })
     }
+
+    plyrOnPause() {
+        let instance: LTPlayer.PortraitType | LTPlayer.LandscapeType = this.player;
+        let plyr: Plyr = this.plyr;
+
+        plyr.on('pause', function LTPlayerDesktopTimeUpdate(event) {
+            instance.playerControl.desktopEvents.playPauseIcon(instance, 'timeupdate');
+        })
+    }
+
 }