@viewlift/player-backup 1.0.0 → 1.0.1-lighteningjs

package/src/main-player/player-ui.ts

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

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

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

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

@@ -0,0 +1,8 @@
+/* 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;
+} 

package/src/player-ui/player-ui.ts

@@ -0,0 +1,79 @@
+import { Button } from '../player-components/player-buttons/playerButtons';
+import { PlayerSeekbar } from '../player-components/player-seekbar/playerSeekbar';
+import './player-ui.css';
+
+
+class VideoPlayerUI {
+  private player: { video: HTMLVideoElement; play: () => void; pause: () => void };
+  private container: HTMLDivElement;
+  private playPauseBtn?: Button;
+  private seekbar?: PlayerSeekbar;
+
+  constructor({ player }: { player: { video: HTMLVideoElement; play: () => void; pause: () => void } }) {
+    this.player = player;
+    this.container = document.createElement('div');
+    this.container.className = 'video-player-ui';
+    this.createControls();
+  }
+
+  private createControls() {
+
+    this.playPauseBtn = new Button({
+      imgSrc: '',
+      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
+    this.container.appendChild(this.player.video);
+    // Add the seekbar below the video
+    this.seekbar = new PlayerSeekbar(this.player.video);
+    this.seekbar.mount(this.container);
+
+    if (this.playPauseBtn?.buttonElement && this.seekbar) {
+      // Down arrow from play button focuses seekbar
+      this.playPauseBtn.buttonElement.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          this.seekbar?.focus();
+        }
+      });
+
+      // Up arrow from seekbar focuses play button
+      this.seekbar?.getElement()?.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          this.playPauseBtn?.focus();
+        }
+      });
+    }
+  }
+
+  attachTo(parent: HTMLElement) {
+    parent.appendChild(this.container);
+  }
+
+  public getElement() {
+    return this.container;
+  }
+}
+
+export default VideoPlayerUI;

package/src/playerInitializer.ts

@@ -0,0 +1,54 @@
+import VideoPlayerUI from './player-ui/player-ui';
+
+// Declare Hls type for CDN usage
+declare global {
+  interface Window {
+    Hls: any;
+  }
+}
+
+export interface PlayerInstance {
+  video: HTMLVideoElement;
+  play: () => void;
+  pause: () => void;
+  ui: VideoPlayerUI;
+}
+
+export function createHlsPlayer(
+  mountPoint: HTMLElement,
+  streamUrl: string
+): PlayerInstance {
+  const video = document.createElement('video');
+  video.controls = false;
+  video.style.width = '100%';
+  video.style.height = '100%';
+
+  let hls: any = null;
+
+  if (window.Hls && window.Hls.isSupported()) {
+    hls = new window.Hls();
+    hls.loadSource(streamUrl);
+    hls.attachMedia(video);
+    hls.on(window.Hls.Events.MANIFEST_PARSED, function () {
+      video.play();
+    });
+  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = streamUrl;
+    video.addEventListener('loadedmetadata', function () {
+      video.play();
+    });
+  } else {
+    throw new Error('HLS is not supported in this browser.');
+  }
+
+  const player = {
+    video,
+    play: () => video.play(),
+    pause: () => video.pause(),
+  };
+
+  const ui = new VideoPlayerUI({ player });
+  ui.attachTo(mountPoint);
+
+  return { ...player, ui };
+}

package/tsconfig.json

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

package/cjs/autoNextVideo-823821e8.js

@@ -1 +0,0 @@
-"use strict";var e,t=require("./generic-8b99b151.js"),i=require("./util-fa21734a.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;