@viewlift/player-backup 1.0.2-lighteningjs → 1.0.2

package/index.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>HLS Player Test</title>
-  <link rel="stylesheet" href="./src/styles/index.css">
-</head>
-<body>
-  <div id="player-container"></div>
-  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-  <script type="module">
-    import { createHlsPlayer } from './src/playerInitializer.js';
-    const mountPoint = document.getElementById('player-container');
-    const config = {
-      // streamUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-      streamUrl: "https://cdn-vl-gcp-spinco-e-token-no-ssai-01.vos360.video/Content/HLS_HLS_CLEAR/Live/channel(886a397d-ff30-4021-eb16-bb73c658c033)/index.m3u8?hdnts=st=1753800508~exp=1753843708~acl=/Content/HLS_HLS_CLEAR/Live/channel(886a397d-ff30-4021-eb16-bb73c658c033)/*~hmac=461d4f615e40b0057f82b07d54f40bc029c4562ae65ef9d7caf85dd86f2e3270",
-      // streamUrl: 'https://cdn.bitmovin.com/content/assets/sintel/hls/playlist.m3u8',
-      videoTitleConfig: {
-        text: 'Big Buck Bunny',
-        fontSize: '40px',
-        fontWeight: 'bold',
-        textAlign: 'left',
-        textDecoration: 'none',
-        textTransform: 'none',
-        lineHeight: 'normal',
-        letterSpacing: 'normal',
-        color: '#ffffff',
-        backgroundColor: 'transparent'
-      },
-      startFromBeginningBtnConfig: {
-        text: 'Start From Beginning',
-        enabled: true,
-        width: '150px',
-        height: '35px',
-        fontSize: '16px',
-        fontWeight: 'normal',
-        textAlign: 'center',
-        textDecoration: 'none',
-        textTransform: 'none',
-        lineHeight: 'normal',
-        letterSpacing: 'normal',
-        color: '#ffffff',
-        backgroundColor: '#000000',
-        focused: false,
-      },
-    };
-    createHlsPlayer(mountPoint, config);
-  </script>
-</body>
-</html>

package/rollup.config.mjs

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

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

@@ -1,242 +0,0 @@
-// LightningJS-compatible Video Player Component (ES5 compatible)
-
-export interface VideoPlayerOptions {
-  // Optional playback callbacks
-  onPlaybackSuccess?: () => void;
-  onPlaybackEnded?: () => void;
-  onPlaybackError?: (error?: any) => void;
-  src: string;
-  autoplay?: boolean;
-  controls?: boolean;
-  width?: number;
-  height?: number;
-// Event callbacks
-}
-
-type EventHandler = (...args: any[]) => void;
-
-type VideoPlayerEvent =
-  | 'play'
-  | 'pause'
-  | 'ended'
-  | 'timeupdate'
-  | 'error'
-  | 'loadedmetadata'
-  | 'seeking'
-  | 'seeked'
-  | 'volumechange';
-
-export class LightningVideoPlayer {
-  /**
-   * Reinitialize the current videoElement with a new set of options and handle autoplay.
-   */
-  reinitialize(options: VideoPlayerOptions) {
-    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');
-    }
-    // Reset playback state
-    this.videoElement.currentTime = 0;
-    this.videoElement.pause();
-    // If autoplay is set, start playback
-    if (options.autoplay) {
-      // Wait for metadata to be loaded before playing (for some browsers)
-      const playOnLoaded = () => {
-        this.videoElement.play();
-        this.videoElement.removeEventListener('loadedmetadata', playOnLoaded);
-      };
-      this.videoElement.addEventListener('loadedmetadata', playOnLoaded);
-      // If already loaded, play immediately
-      if (this.videoElement.readyState >= 1) {
-        this.videoElement.play();
-        this.videoElement.removeEventListener('loadedmetadata', playOnLoaded);
-      }
-    }
-  }
-  private videoElement: HTMLVideoElement;
-  private options: VideoPlayerOptions;
-  private listeners: { [event: string]: EventHandler[] } = {};
-  private boundEmitters: { [event: string]: EventListener } = {};
-  private boundHandlerMap: { [K in VideoPlayerEvent]?: (e: Event) => void } = {};
-
-  constructor(options: VideoPlayerOptions) {
-    this.options = options;
-    this.videoElement = document.createElement('video');
-    this.videoElement.src = options.src;
-    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';
-
-    // Attach class event handlers for all player events
-    const handlerMap: { [K in VideoPlayerEvent]: (e: Event) => void } = {
-      play: this.onPlay,
-      pause: this.onPause,
-      ended: this.onEnded,
-      timeupdate: this.onTimeupdate,
-      error: this.onError,
-      loadedmetadata: this.onLoadedmetadata,
-      seeking: this.onSeeking,
-      seeked: this.onSeeked,
-      volumechange: this.onVolumechange,
-    };
-    (Object.keys(handlerMap) as VideoPlayerEvent[]).forEach(event => {
-      const boundHandler = handlerMap[event].bind(this);
-      this.boundHandlerMap[event] = boundHandler;
-      this.videoElement.addEventListener(event, boundHandler);
-    });
-  }
-
-  attachTo(container: HTMLElement) {
-    container.appendChild(this.videoElement);
-  }
-
-  play() {
-    this.videoElement.play();
-  }
-
-  pause() {
-    this.videoElement.pause();
-  }
-
-  stop() {
-    this.videoElement.pause();
-    this.videoElement.currentTime = 0;
-  }
-
-  destroy() {
-    if (this.videoElement.parentNode) {
-      this.videoElement.parentNode.removeChild(this.videoElement);
-    }
-    this.removeAllListeners();
-    // Remove class event handlers
-    (Object.keys(this.boundHandlerMap) as VideoPlayerEvent[]).forEach(event => {
-      if (this.boundHandlerMap[event]) {
-        this.videoElement.removeEventListener(event, this.boundHandlerMap[event]!);
-        delete this.boundHandlerMap[event];
-      }
-    });
-  }
-
-  get element(): HTMLVideoElement {
-    return this.videoElement;
-  }
-
-  // Event callback function definitions
-  onPlay(e: Event) {
-    // Called when playback starts
-    if (typeof this.options.onPlaybackSuccess === 'function') {
-      this.options.onPlaybackSuccess();
-    }
-  }
-
-  onPause(e: Event) {
-    // Called when playback is paused
-    // Override or pass as option
-  }
-
-  onEnded(e: Event) {
-    // Called when playback ends
-    if (typeof this.options.onPlaybackEnded === 'function') {
-      this.options.onPlaybackEnded();
-    }
-  }
-
-  onTimeupdate(e: Event) {
-    // Called when playback position changes
-    // Override or pass as option
-  }
-
-  onError(e: Event) {
-    // Called on playback error
-    if (typeof this.options.onPlaybackError === 'function') {
-      this.options.onPlaybackError(e);
-    }
-  }
-
-  onLoadedmetadata(e: Event) {
-    // Called when metadata is loaded
-    // Override or pass as option
-  }
-
-  onSeeking(e: Event) {
-    // Called when seeking starts
-    // Override or pass as option
-  }
-
-  onSeeked(e: Event) {
-    // Called when seeking ends
-    // Override or pass as option
-  }
-
-  onVolumechange(e: Event) {
-    // Called when volume changes
-    // Override or pass as option
-  }
-
-  // Event system
-  on(event: VideoPlayerEvent, handler: EventHandler) {
-    if (!this.listeners[event]) {
-      this.listeners[event] = [];
-      if (!this.boundEmitters[event]) {
-        this.boundEmitters[event] = this.emitEvent(event);
-        this.videoElement.addEventListener(event, this.boundEmitters[event]);
-      }
-    }
-    this.listeners[event].push(handler);
-  }
-
-  off(event: VideoPlayerEvent, handler: EventHandler) {
-    if (!this.listeners[event]) return;
-    this.listeners[event] = this.listeners[event].filter(h => h !== handler);
-    if (this.listeners[event].length === 0) {
-      if (this.boundEmitters[event]) {
-        this.videoElement.removeEventListener(event, this.boundEmitters[event]);
-        delete this.boundEmitters[event];
-      }
-      delete this.listeners[event];
-    }
-  }
-
-  once(event: VideoPlayerEvent, handler: EventHandler) {
-    const onceHandler: EventHandler = (...args) => {
-      handler(...args);
-      this.off(event, onceHandler);
-    };
-    this.on(event, onceHandler);
-  }
-
-  private emitEvent(event: VideoPlayerEvent) {
-    return (e: Event) => {
-      if (this.listeners[event]) {
-        this.listeners[event].forEach(handler => handler(e));
-      }
-    };
-  }
-
-  private removeAllListeners() {
-    (Object.keys(this.listeners) as VideoPlayerEvent[]).forEach(event => {
-      if (this.boundEmitters[event]) {
-        this.videoElement.removeEventListener(event, this.boundEmitters[event]);
-        delete this.boundEmitters[event];
-      }
-    });
-    this.listeners = {};
-  }
-}
-
-function getHandlerMethodName(event: string): string {
-  return 'on' + event.charAt(0).toUpperCase() + event.slice(1);
-}

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

@@ -1,104 +0,0 @@
-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 || 100;
-        this.height = props.height || 50;
-        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.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;
-        }
-    }
-}