@viewlift/player-backup 1.0.1-lighteningjs → 1.0.1

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/main-player/player-ui.ts

@@ -1,65 +0,0 @@
-import { Button } from '../player-components/player-buttons/playerButtons';
-import { PlayerSeekbar } from '../player-components/player-seekbar/playerSeekbar';
-
-interface VideoPlayerUIOptions {
-  player: { video: HTMLVideoElement; play: () => void; pause: () => void };
-  width?: string;
-  height?: string;
-}
-
-class VideoPlayerUI {
-  private player: { video: HTMLVideoElement; play: () => void; pause: () => void };
-  private container: HTMLDivElement;
-  private playPauseBtn?: Button;
-  private seekbar?: PlayerSeekbar;
-
-  constructor({ player, width = '1280px', height = '720px' }: VideoPlayerUIOptions) {
-    this.player = player;
-    this.container = document.createElement('div');
-    this.container.className = 'video-player-ui';
-    if (width) this.container.style.width = width;
-    if (height) this.container.style.height = height;
-    this.createControls(width, height);
-  }
-
-  private createControls(width?: string, height?: string) {
-    // Play/Pause button using Button class
-    this.playPauseBtn = new Button({
-      imgSrc: '', // Optionally provide an image
-      imgAltText: 'Play/Pause',
-      buttonText: 'Play',
-      width: 80,
-      height: 40,
-      klassname: 'play-pause-btn',
-      focused: false,
-      disabled: false,
-      handleClick: () => {
-        if (this.player.video.paused) {
-          this.player.play();
-          if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
-            this.playPauseBtn.buttonElement.textContent = 'Pause';
-          }
-        } else {
-          this.player.pause();
-          if (this.playPauseBtn && this.playPauseBtn.buttonElement) {
-            this.playPauseBtn.buttonElement.textContent = 'Play';
-          }
-        }
-      }
-    });
-    this.playPauseBtn.mount(this.container);
-    // Attach the video element
-    if (width) this.player.video.style.width = width;
-    if (height) this.player.video.style.height = height;
-    this.container.appendChild(this.player.video);
-    // Add the seekbar below the video
-    this.seekbar = new PlayerSeekbar(this.player.video);
-    this.seekbar.mount(this.container);
-  }
-
-  attachTo(parent: HTMLElement) {
-    parent.appendChild(this.container);
-  }
-}
-
-export default VideoPlayerUI; 

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

@@ -1,127 +0,0 @@
-import './playerButtons.css'; 
-
-type EventHandler = (event?: any) => void;
-
-type ButtonProps = {
-  imgSrc: string;
-  imgAltText: string;
-  width: number;
-  height: number;
-  klassname: string;  
-  buttonText: string; 
-  focused: boolean;
-  disabled: boolean;
-  handleClick: EventHandler
-};
-
-export class Button {
-
-    private imgSrc: string;
-    private imgAltText: string; 
-    private klassname: string;  
-    private width: number;
-    private height: number;
-    private focused: boolean;
-    private disabled: boolean;
-    private handleClick: EventHandler;
-    private buttonText: string;
-    public buttonElement?: HTMLButtonElement;
-
-
-
-    constructor(props: ButtonProps) {  
-        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 props.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);
-    }
-
-    /**
-     * Mounts the button to the specified mount point
-     * @param mountPoint The HTML element to which the button will be appended
-     */
-    mount(mountPoint: HTMLElement) {
-        // Create the button element
-        const button = document.createElement('button');
-        button.className = this.klassname;
-        button.style.width = `${this.width}px`;
-        button.style.height = `${this.height}px`;
-        button.disabled = this.disabled;
-        button.tabIndex = 0;
-
-        // Add image or text
-        if (this.imgSrc) {
-            const img = document.createElement('img');
-            img.src = this.imgSrc;
-            img.alt = this.imgAltText;
-            button.appendChild(img);
-        } else {
-            const span = document.createElement('span');
-            span.textContent = this.buttonText;
-            button.appendChild(span);
-        }
-
-        // Attach event listeners
-        button.addEventListener('click', this.handleClick);
-        button.addEventListener('focus', () => {
-            this.focused = true;
-            button.classList.add('focused');
-        });
-        button.addEventListener('blur', () => {
-            this.focused = false;
-            button.classList.remove('focused');
-        });
-
-        // Store reference and append
-        this.buttonElement = button;
-        mountPoint.appendChild(button);
-    }
-
-    /**
-     * Removes the click event listener from the button
-     */
-    unmount() {
-        if (this.buttonElement) {
-            this.buttonElement.removeEventListener('click', this.handleClick);
-            this.buttonElement.removeEventListener('focus', this.handleClick);
-            this.buttonElement.removeEventListener('blur', this.handleClick);
-            this.buttonElement = undefined;
-        }
-    }
-
-    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;
-        }
-    }
-
-}

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

@@ -1,75 +0,0 @@
-.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;
-}
-
-.seekbar-buffer {
-  position: absolute;
-  height: 100%;
-  background: #888;
-  width: 0;
-  border-radius: 6px;
-  z-index: 1;
-}
-
-.seekbar-progress {
-  position: absolute;
-  height: 100%;
-  background: #4169E1;
-  width: 0;
-  border-radius: 6px;
-  z-index: 2;
-  transition: width 0.1s linear;
-}
-
-.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;
-}
-.seekbar-thumb:hover {
-  background: #ffeaea;
-}
-
-.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;
-}
-
-.seekbar-time-label, .seekbar-duration-label {
-  position: relative;
-  top: 18px;
-  font-size: 13px;
-  color: #eee;
-  margin-right: 4px;
-  z-index: 5;
-}

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

@@ -1,158 +0,0 @@
-import './playerSeekbar.css';
-
-export class PlayerSeekbar {
-  private container: HTMLDivElement;
-  private progress: HTMLDivElement;
-  private buffer: HTMLDivElement;
-  private thumb: HTMLDivElement;
-  private tooltip: HTMLDivElement;
-  private video: HTMLVideoElement;
-  private timeLabel: HTMLSpanElement;
-  private durationLabel: HTMLSpanElement;
-  private isDragging: boolean = false;
-  private focused: boolean = false;
-
-  constructor(video: HTMLVideoElement) {
-    this.video = video;
-    this.container = document.createElement('div');
-    this.container.className = 'seekbar-container';
-    this.container.tabIndex = 0; // Make focusable
-
-    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.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.container.addEventListener('focus', () => {
-      this.focused = true;
-      this.container.classList.add('focused');
-    });
-    this.container.addEventListener('blur', () => {
-      this.focused = false;
-      this.container.classList.remove('focused');
-    });
-  }
-
-  public focus() {
-    this.container.focus();
-    this.container.classList.add('focused');
-    this.focused = true;
-  }
-
-  public blur() {
-    this.container.blur();
-    this.container.classList.remove('focused');
-    this.focused = false;
-  }
-
-  private formatTime(seconds: number): string {
-    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')}`;
-  }
-
-  private update() {
-    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);
-  }
-
-  private updateBuffer() {
-    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 + '%';
-    }
-  }
-
-  private seek(e: MouseEvent) {
-    if (this.isDragging) return;
-    const rect = this.container.getBoundingClientRect();
-    const percent = (e.clientX - rect.left) / rect.width;
-    this.video.currentTime = percent * this.video.duration;
-  }
-
-  private startDrag(e: MouseEvent) {
-    e.preventDefault();
-    this.isDragging = true;
-    const onMove = (moveEvent: MouseEvent) => {
-      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: MouseEvent) => {
-      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);
-  }
-
-  private showTooltip(e: MouseEvent) {
-    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}%`;
-  }
-
-  private hideTooltip() {
-    this.tooltip.style.display = 'none';
-  }
-
-  public mount(parent: HTMLElement) {
-    parent.appendChild(this.container);
-    this.update();
-    this.updateBuffer();
-  }
-
-  public getElement() {
-    return this.container;
-  }
-}

package/src/player-ui/player-ui.css

@@ -1,8 +0,0 @@
-/* Center play/pause button absolutely in the middle of the player */
-.play-pause-btn {
-  position: absolute !important;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 30;
-}