@viewlift/player-backup 1.0.3-lighteningjs → 1.0.3

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,74 +0,0 @@
-// 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

@@ -1,106 +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;
-        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

@@ -1,223 +0,0 @@
-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();
-    }
-  }
-}

package/src/player-components/player-setting-option-wrapper/player-setting-option-one-wrapper.js

@@ -1,82 +0,0 @@
-export class SettingsOptionOneWrapper {
-    constructor(props) {
-        if (!props || typeof props !== 'object') {
-            throw new Error('SettingsOptionOneWrapper: props must be a valid object');
-        }
-
-        this.title = props.title || 'Option';
-        this.klassname = props.klassname || 'default-option-wrapper';
-        this.handleClick = props.callback || (() => {});
-        this.focused = props.focused || false;
-
-        if (typeof this.handleClick !== 'function') {
-            throw new Error('SettingsOptionOneWrapper: callback must be a function');
-        }
-
-        this.handleClick = this.handleClick.bind(this);
-    }
-
-    mount(mountPoint) {
-        if (!mountPoint || !(mountPoint instanceof HTMLElement)) {
-            throw new Error('SettingsOptionOneWrapper: mountPoint must be a valid DOM element');
-        }
-
-        const optionWrapper = document.createElement('div');
-        optionWrapper.className = this.klassname;
-        optionWrapper.tabIndex = 0;
-
-        const titleElement = document.createElement('p');
-        titleElement.textContent = this.title;
-        optionWrapper.appendChild(titleElement);
-
-        const arrowElement = document.createElement('p');
-        arrowElement.textContent = "›";
-        optionWrapper.appendChild(arrowElement);
-
-        if (this.focused) {
-            optionWrapper.classList.add('focused');
-        }
-
-        optionWrapper.addEventListener('focus', () => {
-            this.focused = true;
-            optionWrapper.classList.add('focused');
-        });
-        optionWrapper.addEventListener('blur', () => {
-            this.focused = false;
-            optionWrapper.classList.remove('focused');
-        });
-
-        optionWrapper.addEventListener('keydown', (event) => {
-            if (event.key === 'Enter' || event.key === 'OK') {
-                this.handleClick();
-            }
-        });
-
-        this.optionWrapper = optionWrapper;
-        optionWrapper.instance = this; // Set the instance property
-        mountPoint.appendChild(optionWrapper);
-    }
-
-    unmount() {
-        if (this.optionWrapper) {
-            this.optionWrapper.remove();
-            this.optionWrapper = undefined;
-        }
-    }
-
-    focus() {
-        if (this.optionWrapper) {
-            this.optionWrapper.focus();
-            this.optionWrapper.classList.add('focused');
-            this.focused = true;
-        }
-    }
-
-    blur() {
-        if (this.optionWrapper) {
-            this.optionWrapper.blur();
-            this.optionWrapper.classList.remove('focused');
-            this.focused = false;
-        }
-    }
-}