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

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

@@ -1,260 +0,0 @@
-@import "../../abstracts/variables";
-
-.lt-player-notification {
-  width: 100%;
-
-  &__notification-button-state {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    .player-state {
-      opacity: 0;
-      transition: all 0.8s ease-in-out;
-      pointer-events: none;
-      @extend %lt-player-btn;
-      @include dark-btn;
-      background: rgba(39, 40, 42, 0.5);
-      padding: 16px;
-    }
-
-    .active {
-      opacity: 1;
-      transition: all 0.2s ease-in-out;
-    }
-  }
-
-  .lt-player-video-content {
-    text-align: left;
-    display: none;
-    padding: 0;
-    width: 100%;
-    user-select: none;
-    align-items: end;
-
-    .content__body {
-      z-index: 2;
-      width: 100%;
-    }
-
-    .poster-title {
-      @extend %line-clamp-3;
-      @include line-clamp-4;
-      color: $default-lt-player-white !important;
-      font-size: $lt-player-font-size-sm;
-      font-weight: $lt-player-font-weight-lg;
-      line-height: $lt-player-line-height;
-      margin: 0;
-    }
-
-    .poster-paragraph {
-      &__content {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        word-wrap: break-word;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        font-size: $lt-player-font-size-sm;
-        font-weight: $lt-player-font-weight-sm;
-        color: $default-lt-player-white !important;
-        margin-bottom: 0;
-        max-height: 50px;
-        transition: max-height 0.3s ease-in-out;
-      }
-
-      .open-content {
-        display: block;
-        transition: max-height 0.3s ease-in-out;
-      }
-    }
-  }
-
-  .lt-player-video-content-enable {
-    display: flex;
-  }
-
-  .poster-paragraph__button {
-    background: none;
-    box-shadow: none;
-    padding: 0;
-    border: none;
-    margin: 0;
-    text-decoration: none;
-    font-size: $lt-player-font-size-xs;
-    color: white;
-    cursor: pointer;
-    position: absolute;
-    bottom: 144px;
-    right: 96px;
-    z-index: 8;
-  }
-
-  .lt-player-rewind-area,
-  .lt-player-forward-area {
-    touch-action: inherit !important;
-    width: 50%;
-    height: 100%;
-    z-index: 4;
-    position: absolute;
-    top: 0;
-  }
-
-  .lt-player-forward-area {
-    right: 0;
-  }
-
-  .lt-player-rewind-area {
-    left: 0;
-  }
-
-  .lt-player-rewind,
-  .lt-player-forward {
-    width: 50%;
-    top: 10%;
-    display: flex;
-    position: absolute;
-    text-align: center;
-    height: unset;
-    bottom: 10%;
-
-    &__icon-wrapper {
-      display: flex;
-      user-select: none;
-
-      &.rotate {
-        rotate: 180deg;
-      }
-
-      img {
-        max-width: 20px;
-      }
-    }
-
-    &__icon {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      color: rgba(255,255,255, 1);
-      user-select: none;
-    }
-
-    span {
-      font-size: $lt-player-font-size-base;
-      font-weight: $lt-player-font-weight-sm;
-      user-select: none;
-      padding: 0 8px;
-    }
-  }
-
-  .lt-player-rewind {
-    left: 0;
-
-    &__icon {
-      flex-direction: row-reverse;
-
-      &__portrait {
-        margin: auto auto auto 45px;
-      }
-
-      &__landscape {
-        margin: auto 60px auto auto;
-      }
-    }
-  }
-
-  .lt-player-forward {
-    right: 0;
-
-    &__icon {
-      &__portrait {
-        margin: auto 45px auto auto;
-      }
-
-      &__landscape {
-        margin: auto auto auto 60px;
-      }
-    }
-  }
-
-  .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%;
-    opacity: 0;
-    //opacity: 1;
-  }
-
-  .animate-in {
-    opacity: 1;
-    display: flex;
-    animation: ripple 1s forwards;
-  }
-}
-
-@keyframes ripple{
-  0%   {
-    //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%;
-    display: flex;
-    opacity:0;
-  }
-}
-@keyframes fadeInLeft {
-  0% {
-    opacity: 1;
-    transform: translateX(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes fadeInRight {
-  0% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(-20px);
-  }
-}
-
-.lt-player-orientation--portrait {
-  .lt-player-notification {
-    padding: 20px 20px 28px 20px;
-  }
-}
-
-.lt-player-orientation--landscape {
-  .lt-player-notification {
-    padding: 0;
-  }
-}
-
-@container portrait (width > 319px) {
-  .lt-player-orientation--portrait {
-    .lt-player-notification {
-      .lt-player-video-content {
-        .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,169 +0,0 @@
-@import "../../abstracts/variables";
-
-.plyr {
-  .plyr__controls-enable-settings {
-    opacity: 1;
-  }
-  .plyr__controls-enable-share {
-    opacity: 1;
-  }
-
-  &__controls,
-  &__controls-enable,
-  &__controls-enable-settings {
-    .top-controllers {
-      width: 100%;
-      padding: 10px 10px 0;
-      margin-bottom: auto;
-
-      button {
-        @extend %lt-player-btn;
-        @include dark-btn;
-        @include buttons-xs;
-      }
-
-      &__background {
-        position: absolute;
-        width: 100%;
-        left: 0;
-        top: 0;
-        height: 20%;
-        background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
-        rotate: 180deg;
-        display: none;
-      }
-
-      &__body {
-        display: flex;
-        justify-content: space-between;
-
-        &__left,
-        &__right {
-          display: flex;
-          flex-direction: column;
-          flex: 0 0 12%;
-          z-index: 5;
-        }
-
-        &__left {
-          align-items: flex-start;
-        }
-
-        &__right {
-          align-items: end;
-        }
-
-        &__center {
-          flex: 1;
-          width: 100%;
-          word-break: break-word;
-
-          .chapter {
-            font-size: $lt-player-font-size-base;
-            font-weight: $lt-player-font-weight-base;
-            position: relative;
-            z-index: 90;
-            margin: 0;
-            color: $default-lt-player-white !important;
-          }
-        }
-
-        &__right {
-          .mini-player-control {
-            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;
-          }
-
-          &__body {
-            &__center {
-              .chapter {
-                font-size: $lt-player-font-size-xxl2;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/LTPlayerDevMethode.ts

@@ -1,192 +0,0 @@
-import Plyr from "plyr";
-import {LTPlayerPosterPreload} from "./poster/LTPlayerPosterPreload";
-import {LTPlayerPosterPreloadEvents} from "./poster/LTPlayerPosterPreloadEvents";
-import {LTPlayer} from "./LTPlayerType";
-import {LTPlayerSettingsManager} from "./LTPlayerSettingsManager";
-
-export namespace LTPlayerDevMethode {
-
-    export class Player {
-
-        player: Plyr
-        instance: LTPlayer.PortraitType | LTPlayer.LandscapeType
-        settingsManager: LTPlayerSettingsManager
-
-        constructor(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            this.player = instance.plyr;
-            this.instance = instance;
-            this.settingsManager = new LTPlayerSettingsManager(instance);
-        }
-
-        play(isFirst?: boolean) {
-            console.log('is it the first video? ' + isFirst);
-            const playerContainer = this.player.elements.container;
-
-            if(isFirst) {
-                this.player.muted = true;
-                this.player.volume = 0;
-                this.settingsManager.setGlobalSettings();
-            }
-
-            playerContainer.addEventListener('ratechange', () => {
-                this.settingsManager.setGlobalSettings();
-            });
-
-            playerContainer.addEventListener('volumechange', () => {
-                this.settingsManager.setGlobalSettings();
-            });
-
-            this.settingsManager.applyGlobalSettings();
-
-            const disablePoster = () => {
-                let poster = playerContainer.querySelector(`.lt-player__poster`);
-
-                if (poster) {
-                    poster.classList.add('d-none');
-                }
-
-                let controls = playerContainer.querySelector('.player__controls');
-
-                if (controls) {
-                    controls.classList.remove('d-none');
-                }
-            }
-
-            if (!this.player.playing) {
-                this.player.play();
-            }
-
-            disablePoster();
-        }
-
-        pause() {
-            this.player.pause();
-        }
-
-        stop() {
-            const playerContainer = this.player.elements.container;
-
-            this.settingsManager.setGlobalSettings();
-
-            const enablePoster = () => {
-
-                const customPoster = playerContainer.querySelector('.lt-player__poster');
-                const controls = playerContainer.querySelector('.plyr__controls');
-
-                playerContainer.classList.add('plyr--stopped')
-                customPoster.classList.remove('d-none');
-                controls.classList.add('d-none');
-            }
-
-            const disableSettings = () => {
-
-                const settingsBody = playerContainer.querySelector('.settings-controllers');
-
-                if (settingsBody && settingsBody.classList.contains('settings-controllers-enable')) {
-
-                    const settingsBody = playerContainer.querySelector('.settings-controllers');
-                    this.player.elements.controls.classList.remove('plyr__controls-enable-settings')
-
-                    settingsBody.classList.remove('settings-controllers-enable');
-
-                    const background = document.querySelector('.settings-controllers-enable__background');
-
-                    if (!background.classList.contains('d-none')) {
-                        background.classList.add('d-none');
-                    }
-
-                }
-            }
-
-            const exitMiniPLayer = () => {
-                const miniPlayer = {
-                    controls: playerContainer.querySelector('.lt-player-mini-player-controls'),
-                    background: playerContainer.querySelector('.lt-player-mini-player-background'),
-                    enable: playerContainer.querySelector('.lt-player-mini-enable'),
-                    size_land: playerContainer.querySelector(`.lt-player-mini-1`),
-                    size_port: playerContainer.querySelector(`.lt-player-mini-2`)
-                };
-
-                if (miniPlayer.controls) {
-                    miniPlayer.controls.remove();
-                }
-
-                if (miniPlayer.background) {
-                    miniPlayer.background.remove();
-                }
-
-                if (miniPlayer.size_land) {
-                    miniPlayer.size_land.classList.remove(`lt-player-mini-1`)
-                }
-
-                if (miniPlayer.size_port) {
-                    miniPlayer.size_port.classList.remove(`lt-player-mini-2`)
-                }
-
-                if (miniPlayer.enable) {
-                    miniPlayer.enable.classList.remove('lt-player-mini-enable')
-                }
-            }
-
-            const exitFullScreen = () => {
-                if (this.player.fullscreen.active) {
-                    this.player.fullscreen.exit();
-                }
-            }
-
-            this.player.stop()
-            enablePoster();
-            disableSettings();
-            exitMiniPLayer();
-            exitFullScreen();
-
-        }
-
-        enterMiniPlayer() {
-            this.instance.miniPlayer.enterMiniPlayer();
-        }
-
-        exitMiniPlayer() {
-            this.instance.miniPlayer.exitMiniPlayer(this.player);
-        }
-    }
-    export class Preload {
-
-        instance: LTPlayer.PortraitType | LTPlayer.LandscapeType;
-        preloadPoster: LTPlayerPosterPreload
-
-        constructor(player: LTPlayer.PortraitType | LTPlayer.LandscapeType, preloadPoster: LTPlayerPosterPreload) {
-            this.instance = player;
-            this.preloadPoster = preloadPoster;
-        }
-
-        play() {
-            if (this.instance.plyr.isEmbed) {
-                let instance = this.instance;
-                let plyr = this.instance.plyr;
-                plyr.on('ready', function LTPLayerMobileReadyEmbed() {
-                    plyr.embed.ready().then(function LTPlayerEmbedReady() {
-                        LTPlayerPosterPreloadEvents.preloadEvents.embedPlay(instance, 'action')
-                    })
-                });
-
-                LTPlayerPosterPreloadEvents.preloadEvents.embedPlay(instance, 'action')
-
-            }
-
-            if (this.instance.plyr.isHTML5) {
-                let instance = this.instance;
-                LTPlayerPosterPreloadEvents.preloadEvents.html5Play(instance, 'action')
-            }
-        }
-
-        pause() {
-            LTPlayerPosterPreloadEvents.preloadEvents.stop(this.instance, 'action')
-        }
-
-        stop() {
-          return console.error("Sorry, this method is not implemented, don't worry, be happy");
-        }
-
-    }
-}

package/src/components/LTPlayerEventsManager.ts

@@ -1,31 +0,0 @@
-import Plyr from "plyr";
-import {LTPlayer} from "./LTPlayerType";
-import 'hammerjs'
-import {LTPlayerDesktop} from "./events/LTPlayerDesktop";
-import {LTPlayerMobile} from "./events/LTPlayerMobile";
-
-/**
- * LTPlayer events namespace
- */
-export class LTPlayerEventsManager {
-    player: LTPlayer.PortraitType | LTPlayer.LandscapeType
-    plyr: Plyr
-    desktopEvents: LTPlayerDesktop
-    mobileEvents: LTPlayerMobile
-
-    constructor(player: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-        this.player = player;
-        this.plyr = player.plyr;
-        this.setup();
-    }
-
-    setup() {
-        if (this.player.playerConfig.getDevice() === 'mobile') {
-            this.mobileEvents = new LTPlayerMobile();
-            this.mobileEvents.setup(this);
-        } else {
-            this.desktopEvents = new LTPlayerDesktop();
-            this.desktopEvents.setup(this);
-        }
-    }
-}

package/src/components/LTPlayerHls.ts

@@ -1,38 +0,0 @@
-import {LTPlayer} from "./LTPlayerType";
-import {LTPlayerConfig} from "./config/LTPlayerConfig";
-import Hls from "hls.js";
-import {defaultType} from "../global/types/ModuleTypes";
-
-export class LTPlayerHls {
-    instance : LTPlayer.LandscapeType | LTPlayer.PortraitType
-    config : LTPlayerConfig
-    playerSettings : defaultType
-
-    hlsInstance : Hls
-
-    constructor(instance : LTPlayer.LandscapeType | LTPlayer.PortraitType, playerSettings : defaultType) {
-        this.instance = instance;
-        this.config = instance.playerConfig;
-        this.playerSettings = playerSettings;
-        this.hlsInstance = new Hls({
-            "enableWorker": true,
-            "lowLatencyMode": true,
-            "backBufferLength": 20,
-            "abrEwmaFastVoD": 1,
-            "autoStartLoad": true,
-            "abrBandWidthUpFactor": 0.95,
-            "maxMaxBufferLength": 15,
-            "abrEwmaDefaultEstimate": 50
-        });
-    }
-
-    init() {
-        if (Hls.isSupported()) {
-            this.hlsInstance.loadSource(this.config.getVideoUrl().videoUrl);
-            this.hlsInstance.attachMedia(this.config.getPlayerElementContainer().querySelector('video'));
-            this.hlsInstance.on(Hls.Events.MANIFEST_PARSED,function() {
-                console.log('MANIFEST_PARSED');
-            });
-        }
-    }
-}