@viewlift/player-backup 1.0.2 → 1.0.3-lighteningjs

package/src/playerInitializer.js

@@ -0,0 +1,335 @@
+import VideoPlayerUI from './player-ui/player-ui.js';
+import { vtt_or_srt_parser } from './utilities/utilities.js';
+import "./styles/index.css";
+
+class SmartTVVideoPlayer {
+  constructor(parentContainerId, playerId, config) {
+    this.mountPoint = document.createElement('div');
+    this.mountPoint.id = playerId;
+    this.mountPoint.className = "vl-player-container";
+    this.mountPoint.style.width = '100%';
+    this.mountPoint.style.height = '100%';
+    this.mountPoint.style.position = 'absolute';
+    this.mountPoint.style.top = '0';
+    this.mountPoint.style.left = '0';
+
+    if(this.parentContainerId){
+      this.parentContainer = document.getElementById(parentContainerId);
+      this.parentContainer.appendChild(this.mountPoint);
+    } else {
+      document.body.appendChild(this.mountPoint);
+    }
+
+
+    this.config = config;
+    this.hls = null;
+    this.dashjs = null;
+    this.closedCaptions = config.closedCaptions || [];
+    this.enableTrack = config.enableTrack || false;
+
+    this.captionsOptionsList = [];
+    this.videoResolutionsList = [];
+    this.audioList = [];
+
+    this.video = document.createElement('video');
+    this.video.style.position = "absolute"; 
+    this.track = document.createElement('ttml-rendering-div');
+    this.video.appendChild(this.track);
+
+    this.initializePlayer();
+  }
+
+  getCaptionsOptions() {
+    return this.captionsOptionsList;
+  }
+
+  getVideoResolutions() {
+    return this.videoResolutionsList;
+  }
+
+  getAudioTracks() {
+    return this.audioList;
+  }
+
+  initializePlayer() {
+    const streamUrl = this.config.streamUrl || '';
+    if (!streamUrl) {
+      throw new Error('Stream URL is required to create HLS player');
+    }
+
+    this.video.controls = false;
+    this.video.style.width = '100%';
+    this.video.style.height = '100%';
+
+    this.addPlayerEventListeners();
+
+    if(this.config.drmEnabled){
+      this.dashjs  = window.dashjs.MediaPlayer().create();
+
+      const widevine = this.config.drmMetadata.widevine;
+      const playReady= this.config.drmMetadata.playReady;
+
+      let protectionData = {
+          "com.widevine.alpha": {
+            serverURL: widevine.licenseUrl,
+            httpRequestHeaders: {
+              "X-AxDRM-Message": widevine.licenseToken
+            }
+          },
+          "com.microsoft.playready": {
+            serverURL: playReady.licenseUrl,
+            httpRequestHeaders: {
+              "X-AxDRM-Message": playReady.licenseToken,
+            }
+          }
+      }
+
+      this.dashjs.initialize(this.video, widevine.url, true);
+      this.dashjs.attachTTMLRenderingDiv(this.track);
+      this.dashjs.attachView(this.video);
+      this.dashjs.setProtectionData(protectionData);
+      this.dashjs.preload();
+
+    } else if (window.Hls && window.Hls.isSupported()) {
+      const hlsConfig = {
+        "enableWorker": true,
+        "lowLatencyMode": true,
+        "backBufferLength": 90,
+        "maxBufferLength": 12,
+        "maxMaxBufferLength": 15,
+        "maxFragLookUpTolerance": 0.25,
+        "maxLoadingDelay": 4
+      };
+
+      this.hls = new window.Hls(hlsConfig);
+      this.hls.loadSource(streamUrl);
+      this.hls.attachMedia(this.video);
+
+      
+    } else if (this.video.canPlayType('application/vnd.apple.mpegurl')) {
+      this.video.src = streamUrl;
+      this.video.addEventListener('loadedmetadata', () => {
+        this.video.play();
+      });
+    } else {
+      throw new Error('HLS is not supported in this browser.');
+    }
+
+    if (this.config.drmEnabled) {
+      this.dashjs.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, () => {
+        this.videoResolutionsList = this.dashjs.getBitrateInfoListFor('video');
+        this.audioList = this.dashjs.getTracksFor('audio');
+        this.captionsoptionsList = this.dashjs.getTracksFor('text');
+
+
+         this.player = {
+            video: this.video,
+            play: () => this.video.play(),
+            pause: () => this.video.pause(),
+            captionsOptions: () => this.getCaptionsOptions(),
+            videoResolutions: () => this.getVideoResolutions(),
+            audioTracks: () => this.getAudioTracks(),
+            playerInstance: this.dashjs
+          };
+
+          this.ui = new VideoPlayerUI({ 
+            player: this.player, 
+            config: this.config
+          });
+          this.ui.attachTo(this.mountPoint);
+      });
+    } else {
+      this.hls.on(window.Hls.Events.AUDIO_TRACKS_UPDATED, () => {
+        this.audioList = this.hls.audioTracks;
+      });
+
+      this.hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
+          this.videoResolutionsList = this.hls.levels;
+
+          this.player = {
+            video: this.video,
+            play: () => this.video.play(),
+            pause: () => this.video.pause(),
+            captionsOptions: () => this.getCaptionsOptions(),
+            videoResolutions: () => this.getVideoResolutions(),
+            audioTracks: () => this.getAudioTracks(),
+            playerInstance: this.hls
+          };
+
+          this.ui = new VideoPlayerUI({ 
+            player: this.player, 
+            config: this.config
+          });
+          this.ui.attachTo(this.mountPoint);
+      });
+    }
+  }
+  addPlayerEventListeners() {
+    if (!this.video) return;
+    this.video.addEventListener("loadedmetadata", this.onVideoLoad);
+    this.video.addEventListener("canplaythrough", this.canplaythrough.bind(this));
+    this.video.addEventListener("ended", this.onPlayebackEnded);
+    this.video.addEventListener("timeupdate", this.playbackprogress);
+    this.video.addEventListener("playing", this.onPlaying);
+    this.video.addEventListener("error", this.onError);
+    this.video.addEventListener("waiting", this.onBuffering);
+    this.video.addEventListener("play", this.onPlay);
+    this.video.addEventListener("seeked", this.onSeeked);
+    this.video.addEventListener("stalled", this.onStalled);
+  }
+
+  removePlayerEventListeners() {
+    if (!this.video) return;
+    this.video.removeEventListener("loadedmetadata", this.onVideoLoad);
+    this.video.removeEventListener("ended", this.onPlayebackEnded);
+    this.video.removeEventListener("timeupdate", this.playbackprogress);
+    this.video.removeEventListener("playing", this.onPlaying);
+    this.video.removeEventListener("error", this.onError);
+    this.video.removeEventListener("waiting", this.onBuffering);
+    this.video.removeEventListener("play", this.onPlay);
+    this.video.removeEventListener("canplaythrough", this.canplaythrough.bind(this));
+    this.video.removeEventListener("seeked", this.onSeeked);
+    this.video.removeEventListener("stalled", this.onStalled);
+  }
+
+  canplaythrough() {
+    if(this.captionsOptionsList.length <= 0) {
+      this.addAllCaptionsToPlayer(0);
+
+      let allCCTracks = this.video.textTracks;
+
+      if (allCCTracks != undefined && allCCTracks.length > 0) {
+        for (let i = 0; i < allCCTracks.length; i++) {
+          if (allCCTracks[i].kind.toLowerCase() == "captions" || allCCTracks[i].kind.toLowerCase() == "subtitles" || allCCTracks[i].kind.toLowerCase() == "caption" || allCCTracks[i].kind.toLowerCase() == "subtitle") {
+            this.captionsOptionsList.push(allCCTracks[i]);
+          }
+        }
+      }
+    }
+
+    console.log("TEXT TRACKS:", this.captionsOptionsList);
+    console.log("VIDEO RESOLUTION:", this.videoResolutionsList);
+    console.log("AUDIO TRACKS:", this.audioList);
+  }
+
+  addAllCaptionsToPlayer(counterVariable) {
+    if (counterVariable >= this.closedCaptions.length) return;
+
+    const currentLabel = this.closedCaptions[counterVariable].language;
+
+    fetch(this.closedCaptions[counterVariable].url)
+      .then(response => response.json())
+      .then(data => {
+        if (data.hasOwnProperty("type")) {
+          if (data["type"] === "failure") {
+            this.addAllCaptionsToPlayer(counterVariable + 1);
+          }
+        } else {
+          const vttObj = {
+            data: data,
+            label: currentLabel,
+            lang: currentLabel,
+          };
+          this.addCaptionToPlayer(vttObj);
+          this.addAllCaptionsToPlayer(counterVariable + 1);
+        }
+      })
+      .catch(error => {
+        this.addAllCaptionsToPlayer(counterVariable + 1);
+      });
+  }
+
+  addCaptionToPlayer(vttObj) {
+    const track = this.player?.video?.addTextTrack('captions', vttObj.label, vttObj.lang);
+    if (track) track.mode = "hidden";
+    vtt_or_srt_parser(vttObj.data).map(cue => {
+      if (track) track.addCue(cue);
+    });
+  }
+
+  toggleCaptions() {
+    try {
+      if (!this.video) return;
+
+      const allCCTracks = this.video.textTracks;
+
+      if (allCCTracks && allCCTracks.length > 0) {
+        for (let i = 0; i < allCCTracks.length; i++) {
+          const track = allCCTracks[i];
+          const kind = track.kind?.toLowerCase();
+
+          if (['captions', 'subtitles', 'caption', 'subtitle'].includes(kind)) {
+            if (this.enableTrack) {
+              track.mode = "hidden";
+            } else {
+              if (track.cues?.length > 0) {
+                track.mode = "showing";
+                break; // Show first valid track only
+              } else {
+                track.mode = "disabled";
+              }
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error managing captions:", error);
+    }
+
+    if (this.track) {
+      this.track.style.display = this.enableTrack ? "none" : "flex";
+    }
+  }
+
+
+  onVideoLoad() {
+    console.log('Video metadata loaded');
+  }
+
+  onPlayebackEnded() {
+    console.log('Playback ended');
+  }
+
+  playbackprogress() {
+    console.log('Playback progress updated');
+  }
+
+  onPlaying() {
+    console.log('Video is playing');
+  }
+
+  onError(event) {
+    console.error('Video error:', event);
+  }
+
+  onBuffering() {
+    console.log('Video is buffering');
+  }
+
+  onPlay() {
+    console.log('Video started playing');
+  }
+
+  onSeeked() {
+    console.log('Video seeked');
+  }
+
+  onStalled() {
+    console.log('Video stalled');
+  }
+
+  unmount(){
+    this.mountPoint.remove();
+    this.mountPoint = undefined;
+  }
+}
+
+export function createHlsPlayer(parentContainerId, playerId, config) {
+  if (!playerId) {
+    throw new Error('playerId must be a valid id');
+  }
+  if (!config || typeof config !== 'object') {
+    throw new Error('Config must be a valid object');
+  }
+  return new SmartTVVideoPlayer(parentContainerId, playerId, config);
+}

package/src/styles/index.css

@@ -0,0 +1,204 @@
+/*************** playerSeekbar.css ***************/
+  body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: #000;
+  }
+.vl-player-container .seekbar-container {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 50px;
+    height: 12px;
+    background: #444;
+    width: 90%;
+    cursor: pointer;
+    border-radius: 6px;
+    margin: 0;
+    user-select: none;
+    z-index: 20;
+  }
+  
+.vl-player-container .seekbar-buffer {
+    position: absolute;
+    height: 100%;
+    background: #888;
+    width: 0;
+    border-radius: 6px;
+    z-index: 1;
+  }
+  
+.vl-player-container  .seekbar-progress {
+    position: absolute;
+    height: 100%;
+    background: rgba(254, 253, 255, 0.7);
+    width: 0;
+    border-radius: 6px;
+    z-index: 2;
+    transition: width 0.1s linear;
+  }
+  
+.vl-player-container .seekbar-thumb {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border-radius: 50%;
+    /* border: 2px solid #4169E1; */
+    z-index: 3;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+ .vl-player-container .seekbar-thumb:hover {
+    background: #ffeaea;
+  }
+  
+ .vl-player-container .seekbar-tooltip {
+    position: absolute;
+    bottom: 24px;
+    left: 0;
+    transform: translateX(-50%);
+    background: #222;
+    color: #fff;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 10;
+  }
+  
+.vl-player-container  .seekbar-time-label, .vl-player-container .seekbar-duration-label {
+    position: relative;
+    top: 18px;
+    font-size: 13px;
+    color: #eee;
+    margin-right: 4px;
+    z-index: 5;
+  }
+  
+
+
+
+/*************** playerButtons.css ***************/
+
+.vl-player-container .play-pause-btn {
+  position: absolute !important;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 20;
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background: rgba(255,255,255, .5);
+  cursor: pointer;
+} 
+
+.vl-player-container .play-pause-btn img {
+  position: absolute !important;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  height: 50px;
+}
+
+
+.vl-player-container .left-side-container {
+  position: absolute !important;
+  display: flex;
+  left: 5%;
+  bottom: 77px;
+}
+
+.vl-player-container .right-side-container {
+  position: absolute !important;
+  display: flex;
+  right: 5%;
+  bottom: 77px;
+}
+
+.vl-player-container .settings-btn {
+  border-radius: 5px;
+  padding: 5px;
+  bottom: 100px;
+  width: 50px;
+  height: 40px;
+  margin: 0 5px;
+  background: rgba(255,255,255, 0.5);
+  cursor: pointer;
+  z-index: 20;
+}
+
+.vl-player-container .settings-btn img{
+  height: 100%;
+}
+
+.vl-player-container .restart-btn {
+  right: 2%;
+  border-radius: 8px;
+  padding: 5px;
+  bottom: 100px;
+  border: 2px solid #fff;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 5px;
+  cursor: pointer;
+  z-index: 20;
+}
+
+
+/*************** player-setting-option-wrapper ***************/
+.vl-player-container .default-option-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 95%;
+  height: 50px;
+  background: #525760;
+  color: #fff;
+  padding: 5px 10px;
+  font-weight: 700;
+  font-size: 18px;
+  border-radius: 2px;
+  box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
+  margin: 20px 0px;
+  text-transform: capitalize;
+  cursor: pointer;
+}
+.vl-player-container .default-option-wrapper span {
+  height: 40px;
+}
+
+.vl-player-container .default-option-wrapper span > img{
+  height: 100%;
+}
+
+
+.vl-player-container .default-sidebar {
+  position: absolute;
+  top: 0;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(30, 30, 30, .75);
+  height: 100%;
+  min-height: 720px;
+  width: 400px;
+  padding: 50px 20px 0 20px;
+  right: 0px;
+  z-index: 30;
+  /* right: -450px; */
+}
+
+.vl-player-container .focused{
+    outline: 2px solid #ffffff;
+}

package/src/utilities/utilities.js

@@ -0,0 +1,79 @@
+export const vtt_or_srt_parser = (vtt) => {
+
+    try {
+        var lines = vtt.trim().split(/[\r\n\r\n]/).map(function (line) {
+            return line.trim();
+        });
+    } catch (e) {
+        try {
+            var lines = vtt.message.split(/[\r\n\r\n]/).map(function (line) {
+                return line.trim();
+            });
+        } catch (e) {
+            return [];
+        }
+
+    }
+    var cues = [];
+    var start = null;
+    var end = null;
+    var payload = null;
+    for (var i = 0; i < lines.length; i++) {
+
+        if (lines[i].indexOf('-->') >= 0) {
+            var splitted = lines[i].split(/[ \t]+-->[ \t]+/);
+            if (splitted.length != 2) {
+                throw 'Error when splitting "-->": ' + lines[i];
+            }
+            if (start != null && end != null && payload != null) {
+                var cue = new VTTCue(start, end, payload);
+                cue.line = 13;
+                cues.push(cue);
+            }
+
+            payload = null;
+            start = null;
+            end = null;
+
+            // Already ignoring anything past the "end" timestamp (i.e. cue settings).
+            if (splitted[0] && splitted[1] && splitted[0].indexOf("undefined") == -1 && splitted[1].indexOf("undefined") == -1) {
+                start = parse_timestamp(splitted[0]);
+                end = parse_timestamp(splitted[1]);
+            }
+        } else if (lines[i] != undefined && lines[i].trim() != '') {
+            try {
+                if (Number(lines[i]) > 0) {
+
+                } else {
+                    payload = (payload == null) ? "" : payload;
+                    payload = ((payload.trim() == "") ? lines[i] : (payload + '\n' + lines[i]));
+                }
+
+            } catch (e) {
+                payload = (payload == null) ? "" : payload;
+                payload = ((payload.trim() == "") ? lines[i] : (payload + '\n' + lines[i]));
+            }
+
+        }
+
+
+    }
+    if (start && end && payload) {
+        var cue = new VTTCue(start, end, payload);
+        cue.line = 13;
+        cues.push(cue);
+    }
+
+    return cues;
+}
+
+export const parse_timestamp = (s) => {
+    let match = s.match(/^(?:([0-9]+):)?([0-5][0-9]):([0-5][0-9](?:[.,][0-9]{0,3})?)/);
+    if (match == null) {
+        throw 'Invalid timestamp format: ' + s;
+    }
+    let hours = parseInt(match[1] || "0", 10);
+    let minutes = parseInt(match[2], 10);
+    let seconds = parseFloat(match[3].replace(',', '.'));
+    return seconds + 60 * minutes + 60 * 60 * hours;
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "ESNext",
+    "declaration": true,
+    "noImplicitAny": false,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "lib": ["dom", "es2017"]
+  },
+  "include": ["src/**/*"]
+}

package/cjs/autoNextVideo-815419cb.js

@@ -1 +0,0 @@
-"use strict";var e,t=require("./generic-81b1be69.js"),i=require("./util-ce8a4138.js"),o=require("./skin-84083352.js"),n=0,d=0,u=function e(i,n,u,s,c){d=i,i>u.length-1||t.load(n,u[i].id,s).then((function(e){o.highlightVideo(d),d++,t.setVideoIdx(d),r(e)})).catch((function(i){r(i),setTimeout((function(){o.highlightVideo(d),d++,t.setVideoIdx(d),e(d,n,u,s)}),5e3)}))},r=function(t){e&&e(t)};exports.autoPlayNext=function(s){clearTimeout(n);var c=null==s?void 0:s.content;e=null==s?void 0:s.cb;var h=s.playerId,l=sessionStorage.getItem("token");i.onVideoEnded(h,(function(){var e=t.getPlayer(h);0!==(null==e?void 0:e.currentTime())&&((d=t.getVideoIdx())>c.length-1||t.load(h,c[d].id,l).then((function(e){o.highlightVideo(d),t.setCurrentVideo(e.response),d++,t.setVideoIdx(d),r(e)})).catch((function(e){r(e),o.highlightVideo(d),d++,t.setVideoIdx(d),n=setTimeout((function(){t.isPaused(h)&&u(d,h,c,l)}),5e3)})))}))},exports.switchToNext=u;