@viewlift/player-backup 1.0.1 → 1.0.2-lighteningjs

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

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

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

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

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

@@ -0,0 +1,55 @@
+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;
+        }
+    }
+}