@viewlift/player-backup 1.0.2 → 1.0.3-lighteningjs

package/package.json

@@ -1,17 +1,37 @@
 {
-    "name": "@viewlift/player-backup",
-    "version": "1.0.2",
-    "main": "dist/bundle.cjs.js",
-    "amdName": "_playerCore",
-    "dependencies": {
-        "@silvermine/videojs-airplay": "^1.2.0",
-        "@silvermine/videojs-chromecast": "^1.4.1",
-        "axios": "^1.2.3",
-        "js-cookie": "^3.0.5",
-        "video.js": "^7.20.3",
-        "videojs-contrib-ads": "^6.9.0",
-        "videojs-contrib-dash": "^5.1.1",
-        "videojs-contrib-eme": "^3.11.0",
-        "videojs-ima": "^2.1.0"
-    }
+  "name": "@viewlift/player-backup",
+  "version": "1.0.3-lighteningjs",
+  "description": "A LightningJS video player component for Smart TV apps.",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "echo \"No tests specified\" && exit 0"
+  },
+  "author": "ViewLift",
+  "license": "ISC",
+  "keywords": [
+    "LightningJS",
+    "SmartTV",
+    "video-player"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@rollup/plugin-url": "^8.0.2",
+    "rollup": "^4.16.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5"
+  },
+  "dependencies": {
+    "@viewlift/player-backup": "^2.0.37-smarttv"
+  }
 }

package/rollup.config.mjs

@@ -0,0 +1,45 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+import babel from '@rollup/plugin-babel';
+import postcss from 'rollup-plugin-postcss';
+import url from '@rollup/plugin-url';
+
+const devMode = 'development';
+export default {
+  input: 'src/playerInitializer.js',
+  output: [
+    {
+      file: 'dist/index.cjs.js',
+      format: 'cjs',
+      exports: 'auto',
+      sourcemap: devMode ? 'inline' : false
+    },
+    {
+      file: 'dist/index.esm.js',
+      format: 'esm',
+      sourcemap: devMode ? 'inline' : false
+    },
+  ],
+  plugins: [
+    resolve(),
+    commonjs(),
+    typescript({ tsconfig: './tsconfig.json' }),
+    babel({
+      babelHelpers: 'bundled',
+      extensions: ['.js', '.ts'],
+      exclude: 'node_modules/**',
+    }),
+    postcss({
+      extract: true, // creates a separate CSS file
+      minimize: true,
+      sourceMap: true,
+    }),
+    url({
+      include: ['**/*.png', '**/*.jpg', '**/*.gif'],
+      limit: 0, // Always copy the files
+    }),
+    terser(),
+  ],
+};

package/src/ads-manager/ads-manager.js

@@ -0,0 +1,120 @@
+import { Button } from "../player-components/player-buttons/playerButtons";
+
+export class AdsManager {
+    constructor(props) {
+        this.adsMediaPlaybackList = props.adsMediaPlaybackList;
+        this.isSkipAble = props.isSkipAble;
+        this.playerResumeCallback = props.playerResumeCallback;
+        this.adsPlayerId = props.adsPlayerId;
+
+        this.initializeAdsPlayer();
+        this.addAdsEventListener();
+    }
+
+    initializeAdsPlayer() {
+        this.adsContainer = document.createElement("div");
+        this.adsContainer.className = "adsContainer";
+        this.video = document.createElement('video');
+        this.adsContainer.appendChild(this.video);
+    }
+
+    addAdsEventListener() {
+        this.video.addEventListener("ended", onEnded);
+        this.video.addEventListener("error", onError);
+        this.video.addEventListener("waiting", onBuffering);
+        this.video.addEventListener("play", onPlay);
+        this.video.addEventListener("playing", onPlaying);
+        this.video.addEventListener("timeupdate", playbackprogress);
+    }
+
+    removeAdsEventListener() {
+        this.video.removeEventListener("ended", onEnded);
+        this.video.removeEventListener("error", onError);
+        this.video.removeEventListener("waiting", onBuffering);
+        this.video.removeEventListener("play", onPlay);
+        this.video.removeEventListener("playing", onPlaying);
+        this.video.removeEventListener("timeupdate", playbackprogress);
+    }
+
+    onEnded() {
+        console.log("AdsManager: ended");
+    }
+
+    onError() {
+        console.log("AdsManager: error");
+    }
+
+    onBuffering() {
+        console.log("AdsManager: buffering");
+    }
+
+    onPlay() {
+        console.log("AdsManager: play");
+    }
+
+    onPlaying() {
+        console.log("AdsManager: playing");
+    }
+
+    playbackprogress() {
+        console.log("AdsManager: playback progress");
+    }
+
+
+    createPlayPauseBtn() {
+        this.playPauseBtn = new Button({
+            imgSrc: playIconFocus,
+            imgAltText: 'Play/Pause',
+            buttonText: 'Play',
+            width: 70,
+            height: 70,
+            klassname: 'play-pause-btn',
+            focused: false,
+            disabled: false,
+            handleClick: () => {
+                if (this.video.paused) {
+                    this.video.play();
+                    if (this.playPauseBtn && this.playPauseBtn.buttonElement && this.playPauseBtn.buttonElement.querySelector('img')) {
+                        this.playPauseBtn.buttonElement.querySelector('img').setAttribute('src', pauseIconFocus);
+                    } else if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+                        this.playPauseBtn.buttonElement.textContent = 'Pause';
+                    }
+                } else {
+                    this.video.pause();
+                    if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+                        this.playPauseBtn.buttonElement.querySelector('img').setAttribute('src', playIconFocus);
+                    } else if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
+                        this.playPauseBtn.buttonElement.textContent = 'Play';
+                    }
+                }
+            }
+        });
+        this.playPauseBtn.mount(this.adsContainer);
+
+        requestAnimationFrame(() => {
+            if (this.playPauseBtn) this.playPauseBtn.focus();
+        });
+
+        this.playPauseBtnEventListeners();
+    }
+
+    playPauseBtnEventListeners() {
+        if (!this.playPauseBtn || !this.playPauseBtn.buttonElement) return;
+
+        this.playPauseBtn.buttonElement.addEventListener('focus', () => {
+            if (this.playPauseBtn && this.playPauseBtn.buttonElement && this.playPauseBtn.buttonElement.querySelector('img')) {
+            const iconSrc = this.video.paused ? playIconFocus : pauseIconFocus;
+            this.playPauseBtn.buttonElement.querySelector('img').setAttribute('src', iconSrc);
+            this.playPauseBtn.buttonElement.style.backgroundColor = 'rgba(255, 255, 255)';
+            }
+        });
+
+        this.playPauseBtn.buttonElement.addEventListener('blur', () => {
+            if (this.playPauseBtn && this.playPauseBtn.buttonElement && this.playPauseBtn.buttonElement.querySelector('img')) {
+            const iconSrc = this.video.paused ? playIcon : pauseIcon;
+            this.playPauseBtn.buttonElement.querySelector('img').setAttribute('src', iconSrc);
+            this.playPauseBtn.buttonElement.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
+            }
+        });
+    }
+}

package/src/index.ts

@@ -0,0 +1,74 @@
+// LightningJS-compatible Video Player Component (ES5 compatible)
+import VLPlayerCore from '@viewlift/player-backup/esm';
+import '@viewlift/player-backup/esm/bundle.css';
+import PlayerControls from './playerControls/playerControls.js';
+import "./styles/index.css";
+export interface VideoPlayerOptions {
+  // Optional playback callbacks
+  onPlaybackSuccess?: (result: object) => void;
+  onPlaybackEnded?: () => void;
+  onPlaybackError?: (error?: object) => void;
+  playerId: string;
+  autoplay?: boolean;
+  controls?: boolean;
+  width?: number;
+  height?: number;
+// Event callbacks
+}
+
+export class VideoPlayer {
+  /**
+   * Reinitialize the current videoElement with a new set of options and handle autoplay.
+   */
+  reinitialize(options: VideoPlayerOptions,container: HTMLElement) {
+    this.options = options;
+    //this.videoElement.src = options.src;
+    this.videoElement.autoplay = !!options.autoplay;
+    this.videoElement.controls = !!options.controls;
+    if (options.width) {
+      this.videoElement.width = options.width;
+    } else {
+      this.videoElement.removeAttribute('width');
+    }
+    if (options.height) {
+      this.videoElement.height = options.height;
+    } else {
+      this.videoElement.removeAttribute('height');
+    }   
+  }
+  private videoElement: HTMLVideoElement;
+  private options: VideoPlayerOptions;
+private playerContainer: HTMLElement;
+
+  constructor(options: VideoPlayerOptions, container: HTMLElement) {
+    this.options = options;
+    this.playerContainer = container;
+    this.videoElement = document.createElement('video');
+    this.videoElement.id = options.playerId;
+    this.videoElement.autoplay = !!options.autoplay;
+    this.videoElement.controls = !!options.controls;
+    if (options.width) this.videoElement.width = options.width;
+    if (options.height) this.videoElement.height = options.height;
+    this.videoElement.style.display = 'block';
+    this.videoElement.style.background = 'black';
+    this.playerContainer.appendChild(this.videoElement);    
+    return this;
+  }
+
+  initialize() {
+     return VLPlayerCore().init(this.options).then((result:object)=>{
+      this.configureWebSDKPlayer(result);
+      return result;   
+    }).catch((error:object) => {
+      return error
+    });
+  }
+  configureWebSDKPlayer(result: object){
+    VLPlayerCore().onVideoEnded(this.options.playerId,this.options.onPlaybackEnded);
+    let playerUi = new PlayerControls(result);
+          playerUi.attachTo(this.playerContainer);
+  }
+
+}
+
+

package/src/player-components/player-buttons/playerButtons.js

@@ -0,0 +1,106 @@
+export class Button {
+    constructor(props) {
+        if (!props) {
+            throw new Error('Button Class: props are required');
+        }
+
+        this.imgSrc = props.imgSrc || '';
+        this.imgAltText = props.imgAltText || '';
+        this.buttonText = props.buttonText || '';
+        this.klassname = props.klassname || 'default-button';
+        this.width = props.width;
+        this.height = props.height;
+        this.fontWeight = props.fontWeight;
+        this.focused = props.focused || false;
+        this.disabled = props.disabled || false;
+        this.handleClick = props.handleClick || (() => {});
+
+        if (typeof this.handleClick !== 'function') {
+            throw new Error('Button Class: handleClick must be a function');
+        }
+
+        if (this.disabled) {
+            this.klassname += ' disabled';
+        }
+
+        if (this.focused) {
+            this.klassname += ' focused';
+        }
+
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    focus() {
+        if (this.buttonElement) {
+            this.buttonElement.focus();
+            this.buttonElement.classList.add('focused');
+            this.focused = true;
+        }
+    }
+
+    blur() {
+        if (this.buttonElement) {
+            this.buttonElement.blur();
+            this.buttonElement.classList.remove('focused');
+            this.focused = false;
+        }
+    }
+
+    mount(mountPoint) {
+        if (!mountPoint || !(mountPoint instanceof HTMLElement)) {
+            throw new Error('Button Class: mountPoint must be a valid DOM element');
+        }
+
+        const button = document.createElement('div');
+        button.className = this.klassname;
+        button.style.width = `${this.width}px`;
+        button.style.height = `${this.height}px`;
+        button.style.fontWeight = this.fontWeight;
+        button.tabIndex = 0;
+
+        if (this.imgSrc) {
+            const img = document.createElement('img');
+            img.src = this.imgSrc;
+            img.alt = this.imgAltText;
+            img.onerror = () => {
+                console.warn('Button Class: Failed to load image at', this.imgSrc);
+            };
+            button.appendChild(img);
+        } else {
+            const span = document.createElement('span');
+            span.textContent = this.buttonText;
+            button.appendChild(span);
+        }
+
+        if (!this.disabled) {
+            button.addEventListener('click', this.handleClick);
+        }
+        button.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' || event.key === 'OK') {
+                this.handleClick();
+            }
+        });
+        button.addEventListener('focus', () => {
+            this.focused = true;
+            button.classList.add('focused');
+        });
+        button.addEventListener('blur', () => {
+            this.focused = false;
+            button.classList.remove('focused');
+        });
+
+        this.buttonElement = button;
+        mountPoint.appendChild(button);
+    }
+
+    unmount() {
+        if (this.buttonElement) {
+            this.buttonElement.removeEventListener('click', this.handleClick);
+            this.buttonElement.removeEventListener('keydown', this.handleClick);
+            this.buttonElement.removeEventListener('focus', this.handleClick);
+            this.buttonElement.removeEventListener('blur', this.handleClick);
+            this.buttonElement.remove();
+            this.buttonElement = undefined;
+        }
+    }
+}

package/src/player-components/player-seekbar/playerSeekbar.js

@@ -0,0 +1,223 @@
+export class PlayerSeekbar {
+  constructor(video) {
+    if (!video || !(video instanceof HTMLVideoElement)) {
+      throw new Error('PlayerSeekbar: A valid HTMLVideoElement is required');
+    }
+
+    this.video = video;
+    this.container = null;
+    this.progress = null;
+    this.buffer = null;
+    this.thumb = null;
+    this.tooltip = null;
+    this.timeLabel = null;
+    this.durationLabel = null;
+    this.isDragging = false;
+    this.focused = false;
+
+    this.init();
+  }
+
+  init() {
+    this.container = document.createElement('div');
+    this.container.className = 'seekbar-container';
+
+    this.buffer = document.createElement('div');
+    this.buffer.className = 'seekbar-buffer';
+
+    this.progress = document.createElement('div');
+    this.progress.className = 'seekbar-progress';
+
+    this.thumb = document.createElement('div');
+    this.thumb.className = 'seekbar-thumb';
+    this.thumb.tabIndex = 0; // Make thumb focusable
+
+    this.tooltip = document.createElement('div');
+    this.tooltip.className = 'seekbar-tooltip';
+    this.tooltip.style.display = 'none';
+
+    this.timeLabel = document.createElement('span');
+    this.timeLabel.className = 'seekbar-time-label';
+    this.durationLabel = document.createElement('span');
+    this.durationLabel.className = 'seekbar-duration-label';
+
+    this.container.appendChild(this.buffer);
+    this.container.appendChild(this.progress);
+    this.container.appendChild(this.thumb);
+    this.container.appendChild(this.tooltip);
+    this.container.appendChild(this.timeLabel);
+    this.container.appendChild(this.durationLabel);
+
+    // Update UI as video plays
+    this.video.addEventListener('timeupdate', () => this.update());
+    this.video.addEventListener('progress', () => this.updateBuffer());
+    this.video.addEventListener('durationchange', () => this.update());
+
+    // Seek on click
+    this.container.addEventListener('click', (e) => this.seek(e));
+    // Dragging
+    this.thumb.addEventListener('mousedown', (e) => this.startDrag(e));
+    // Tooltip on hover
+    this.container.addEventListener('mousemove', (e) => this.showTooltip(e));
+    this.container.addEventListener('mouseleave', () => this.hideTooltip());
+
+    // Focus/blur events for accessibility and visual feedback
+    this.thumb.addEventListener('focus', () => {
+      this.focused = true;
+      this.thumb.classList.add('focused');
+    });
+    this.thumb.addEventListener('blur', () => {
+      this.focused = false;
+      this.thumb.classList.remove('focused');
+    });
+
+    // Add keydown event listeners for arrow keys to simulate dragging
+    this.thumb.addEventListener('keydown', (e) => {
+      const increment = 1; 
+      if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.video.currentTime = Math.min(this.video.duration, this.video.currentTime + increment);
+        this.update();
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.video.currentTime = Math.max(0, this.video.currentTime - increment);
+        this.update();
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        if(this.video.paused) {
+          this.video.play(); // Resume playing the video
+        }
+      }
+    });
+  }
+
+  focus() {
+    if (this.thumb) {
+      this.thumb.focus();
+      this.thumb.classList.add('focused');
+      this.focused = true;
+    }
+  }
+
+  blur() {
+    if (this.thumb) {
+      this.thumb.blur();
+      this.thumb.classList.remove('focused');
+      this.focused = false;
+    }
+  }
+
+  formatTime(seconds) {
+    if (isNaN(seconds)) return '0:00';
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${String(s).padStart(2, '0')}`;
+  }
+
+  update() {
+    if (!this.video || !this.progress || !this.thumb || !this.timeLabel || !this.durationLabel) return;
+
+    const percent = (this.video.currentTime / this.video.duration) * 100;
+    this.progress.style.width = percent + '%';
+    this.thumb.style.left = percent + '%';
+    this.timeLabel.textContent = this.formatTime(this.video.currentTime);
+    this.durationLabel.textContent = ' / ' + this.formatTime(this.video.duration);
+  }
+
+  updateBuffer() {
+    if (!this.video || !this.buffer) return;
+
+    if (this.video.buffered.length) {
+      const end = this.video.buffered.end(this.video.buffered.length - 1);
+      const percent = (end / this.video.duration) * 100;
+      this.buffer.style.width = percent + '%';
+    }
+  }
+
+  seek(e) {
+    if (this.isDragging || !this.container || !this.video) return;
+
+    const rect = this.container.getBoundingClientRect();
+    const percent = (e.clientX - rect.left) / rect.width;
+    this.video.currentTime = percent * this.video.duration;
+  }
+
+  startDrag(e) {
+    if (!this.container || !this.video) return;
+
+    e.preventDefault();
+    this.isDragging = true;
+    const onMove = (moveEvent) => {
+      const rect = this.container.getBoundingClientRect();
+      let percent = (moveEvent.clientX - rect.left) / rect.width;
+      percent = Math.max(0, Math.min(1, percent));
+      this.progress.style.width = percent * 100 + '%';
+      this.thumb.style.left = percent * 100 + '%';
+      this.timeLabel.textContent = this.formatTime(percent * this.video.duration);
+    };
+    const onUp = (upEvent) => {
+      const rect = this.container.getBoundingClientRect();
+      let percent = (upEvent.clientX - rect.left) / rect.width;
+      percent = Math.max(0, Math.min(1, percent));
+      this.video.currentTime = percent * this.video.duration;
+      this.isDragging = false;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }
+
+  showTooltip(e) {
+    if (!this.container || !this.tooltip || !this.video) return;
+
+    const rect = this.container.getBoundingClientRect();
+    const percent = (e.clientX - rect.left) / rect.width;
+    const time = percent * this.video.duration;
+    this.tooltip.textContent = this.formatTime(time);
+    this.tooltip.style.display = 'block';
+    this.tooltip.style.left = `${percent * 100}%`;
+  }
+
+  hideTooltip() {
+    if (this.tooltip) {
+      this.tooltip.style.display = 'none';
+    }
+  }
+
+  getElement() {
+    return this.thumb;
+  }
+
+  mount(parent) {
+    if (!parent || !(parent instanceof HTMLElement)) {
+      throw new Error('PlayerSeekbar: parent must be a valid DOM element');
+    }
+
+    parent.appendChild(this.container);
+    this.update();
+    this.updateBuffer();
+  }
+
+  unmount() {
+    if (!this.video || !this.container || !this.thumb) return;
+
+    this.video.removeEventListener('timeupdate', this.update);
+    this.video.removeEventListener('progress', this.updateBuffer);
+    this.video.removeEventListener('durationchange', this.update);
+    this.container.removeEventListener('click', this.seek);
+    this.thumb.removeEventListener('mousedown', this.startDrag);
+    this.container.removeEventListener('mousemove', this.showTooltip);
+    this.container.removeEventListener('mouseleave', this.hideTooltip);
+    this.thumb.removeEventListener('focus', this.focus);
+    this.thumb.removeEventListener('blur', this.blur);
+    this.thumb.removeEventListener('keydown', this.keydownHandler);
+
+    if (this.container) {
+      this.container.remove();
+    }
+  }
+}