@viewlift/player-backup 1.0.2-lighteningjs → 1.0.2

package/src/playerInitializer.js

@@ -1,335 +0,0 @@
-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

@@ -1,200 +0,0 @@
-/*************** 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: #4169E1;
-    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: 16px;
-  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; */
-}

package/src/utilities/utilities.js

@@ -1,79 +0,0 @@
-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

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