@viewlift/player-backup 1.0.2-lighteningjs → 1.0.2

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;
-        }
-    }
-}       

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

@@ -1,84 +0,0 @@
-import checkIcon from '../../assets/checkIcon.png';
-
-export class SettingsOptionTwoWrapper {
-    constructor(props) {
-        if (!props || typeof props !== 'object') {
-            throw new Error('SettingsOptionTwoWrapper: props must be a valid object');
-        }
-
-        this.title = props.title || 'Option';
-        this.klassname = props.klassname || 'default-option-wrapper';
-        this.selected = props.selected || false;
-        this.focused = props.focused || false;
-        this.imgSrc = props.imgSrc || checkIcon;
-        this.id = props.id;
-
-        if (typeof this.title !== 'string') {
-            throw new Error('SettingsOptionTwoWrapper: title must be a string');
-        }
-    }
-
-    mount(mountPoint) {
-        if (!mountPoint || !(mountPoint instanceof HTMLElement)) {
-            throw new Error('SettingsOptionTwoWrapper: 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);
-
-        if (this.selected) {
-            optionWrapper.classList.add('selected');
-            const selectedElement = document.createElement('span');
-            const img = document.createElement('img');
-            img.src = this.imgSrc;
-            img.alt = this.imgAltText || 'Selected';
-            selectedElement.appendChild(img);
-            optionWrapper.appendChild(selectedElement);
-        }
-
-        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');
-        });
-
-        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;
-        }
-    }
-}       

package/src/player-components/player-sidebar/player-sidebar.js

@@ -1,188 +0,0 @@
-import { SettingsOptionOneWrapper } from '../player-setting-option-wrapper/player-setting-option-one-wrapper.js';
-import { SettingsOptionTwoWrapper } from '../player-setting-option-wrapper/player-setting-option-two-wrapper.js';
-
-export class Sidebar {
-    constructor(props) {
-        if (!props || typeof props !== 'object') {
-            throw new Error('Sidebar: props must be a valid object');
-        }
-
-        this.title = props.title || 'Settings';
-        this.items = props.items || [
-            {text: 'Video Quality', isSelected: true, callback: () => {}}, 
-            {text: 'Audio Language', isSelected: false, callback: () => {}}, 
-            {text: 'Subtitles', isSelected: false, callback: () => {}}
-        ];
-        this.klassname = props.klassname || 'default-sidebar';
-        this.currentFocusedOption = null;
-        this.lastFocusedElement = props.lastFocusedElement || null;
-        this.type = props.type || 'navigation';
-        this.focused = props.focused || false;
-        this.callback = props.callback || (() => {});
-        this.onselect = props.onselect || (() => {});
-
-        if (typeof this.callback !== 'function') {
-            throw new Error('Sidebar: callback must be a function');
-        }
-
-        if (!['navigation', 'selection'].includes(this.type)) {
-            throw new Error('Sidebar: type must be either "navigation" or "selection"');
-        }
-    }
-
-    mount(mountPoint) {
-        if (!mountPoint || !(mountPoint instanceof HTMLElement)) {
-            throw new Error('Sidebar: mountPoint must be a valid DOM element');
-        }
-
-        const sidebar = document.createElement('div');
-        sidebar.className = this.klassname;
-
-        const titleElement = document.createElement('h2');
-        titleElement.textContent = this.title;
-        titleElement.style.fontSize = '38px';
-        sidebar.appendChild(titleElement);
-
-        const list = document.createElement('div');
-        if (this.type === 'navigation') {
-            this.items.forEach((item, idx) => {
-                const listItem = new SettingsOptionOneWrapper({
-                    title: item.text,
-                    klassname: 'default-option-wrapper',
-                    focused: idx === 0,
-                    callback: item.callback
-                });
-                item.instance = listItem; // Store the listItem instance in the item
-                if (idx === 0) {
-                    this.currentFocusedOption = listItem;
-                }
-                listItem.mount(list);
-            });
-        } else if (this.type === 'selection') {
-            this.items.forEach((item, idx) => {
-                const listItem = new SettingsOptionTwoWrapper({
-                    title: item.text,
-                    klassname: 'default-option-wrapper',
-                    focused: idx === 0,
-                    selected: item.isSelected,
-                    id: item.id,
-                });
-                item.instance = listItem; // Store the listItem instance in the item
-                if (idx === 0) {
-                    this.currentFocusedOption = listItem;
-                }
-                listItem.mount(list);
-            });
-        }
-
-        sidebar.appendChild(list);
-        this.sidebarElement = sidebar;
-        mountPoint.appendChild(sidebar);
-
-        this.addEventListeners();
-        this.focus();
-    }
-
-    addEventListeners() {
-        if (!this.sidebarElement) {
-            throw new Error('Sidebar: sidebarElement is not initialized');
-        }
-
-        this.sidebarElement.addEventListener('keydown', (event) => {
-            if (event.key === 'ArrowDown') {
-                event.preventDefault();
-                event.stopPropagation();
-                this.focusNext();
-            } else if (event.key === 'ArrowUp') {
-                event.preventDefault();
-                event.stopPropagation();
-                this.focusPrevious();
-            } else if (event.key === 'Backspace' || event.key === 'Escape') {
-                event.preventDefault();
-                event.stopPropagation();
-                this.unfocus();
-                this.unmount();
-            } else if (event.key === 'Enter' || event.key === 'OK') {
-                event.preventDefault();
-                event.stopPropagation();
-                if (this.type === 'selection') {
-                    this.selectionTypeAction();
-                }
-            }
-        });
-    }
-
-    selectionTypeAction() {
-        if (this.currentFocusedOption) {
-            // Deselect all options
-            this.items.forEach(item => {
-                if (item.instance) {
-                    item.instance.optionWrapper.classList.remove('selected');
-                    item.instance.selected = false;
-                    // Remove image if present
-                    const img = item.instance.optionWrapper.querySelector('img');
-                    if (img) {
-                        img.parentElement.remove();
-                    }
-                }
-            });
-            // Select the current option
-            this.currentFocusedOption.optionWrapper.classList.add('selected');
-            this.currentFocusedOption.selected = true;
-            // Add image to the selected option
-            const selectedElement = document.createElement('span');
-            const img = document.createElement('img');
-            img.src = this.currentFocusedOption.imgSrc;
-            img.alt = 'Selected';
-            selectedElement.appendChild(img);
-            this.currentFocusedOption.optionWrapper.appendChild(selectedElement);
-            this.onselect(this.currentFocusedOption);
-        }
-    }
-
-    focusNext() {
-        if (this.sidebarElement && this.currentFocusedOption) {
-            const nextSibling = this.currentFocusedOption.optionWrapper.nextElementSibling;
-            if (nextSibling) {
-                this.currentFocusedOption.blur();
-                this.currentFocusedOption = nextSibling.instance;
-                this.currentFocusedOption.focus();
-            }
-        }
-    }
-
-    focusPrevious() {
-        if (this.sidebarElement && this.currentFocusedOption) {
-            const previousSibling = this.currentFocusedOption.optionWrapper.previousElementSibling;
-            if (previousSibling) {
-                this.currentFocusedOption.blur();
-                this.currentFocusedOption = previousSibling.instance;
-                this.currentFocusedOption.focus();
-            }
-        }
-    }
-
-    focus() {
-        if (this.sidebarElement && this.currentFocusedOption) {
-            this.currentFocusedOption.focus();
-        }
-    }
-
-    unfocus() {
-        if (this.sidebarElement && this.currentFocusedOption) {
-            this.currentFocusedOption.blur();
-        }
-    }
-
-    unmount() {
-        if (this.sidebarElement) {
-            this.sidebarElement.remove();
-            this.sidebarElement = undefined;
-            if (this.lastFocusedElement) {
-                this.callback();
-                this.lastFocusedElement.focus();
-            }
-            this.currentFocusedOption = null;
-        }
-    }
-}

package/src/player-components/player-title/playerTitle.js

@@ -1,55 +0,0 @@
-export class TextContent {
-    constructor(props) {
-        if (!props || typeof props !== 'object') {
-            throw new Error('TextContent: props must be a valid object');
-        }
-
-        this.text = props.text || '';
-        this.fontSize = props.fontSize || '16px';
-        this.fontFamily = props.fontFamily || 'Arial, sans-serif';
-        this.fontWeight = props.fontWeight || 'normal';
-        this.textAlign = props.textAlign || 'left';
-        this.textDecoration = props.textDecoration || 'none';
-        this.textTransform = props.textTransform || 'none';
-        this.lineHeight = props.lineHeight || 'normal';
-        this.letterSpacing = props.letterSpacing || 'normal';
-        this.color = props.color || '#000';
-        this.backgroundColor = props.backgroundColor || 'transparent';
-        this.klassname = props.klassname || 'default-text-content';
-        this.width = props.width || 100;
-        this.height = props.height || 50;
-        this.focused = props.focused || false;
-    }
-
-    setText(text) {
-        if (typeof text !== 'string') {
-            throw new Error('TextContent: text must be a string');
-        }
-        this.text = text;
-        if (this.container) {
-            this.container.textContent = text;
-        }
-    }
-
-    mount(mountPoint) {
-        if (!mountPoint || !(mountPoint instanceof HTMLElement)) {
-            throw new Error('TextContent: mountPoint must be a valid DOM element');
-        }
-
-        const text = document.createElement('div');
-        text.className = this.klassname;
-        text.style.fontSize = this.fontSize;
-        text.style.color = this.color;
-        text.style.backgroundColor = this.backgroundColor;
-        text.innerText = this.text;
-        mountPoint.appendChild(text);
-        this.container = text;
-    }
-
-    unmount() {
-        if (this.container) {
-            this.container.remove();
-            this.container = undefined;
-        }
-    }
-}