@viewlift/player-backup 1.0.2 → 1.0.3-lighteningjs

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,56 @@
+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.style.fontWeight = this.fontWeight;
+        text.innerText = this.text;
+        mountPoint.appendChild(text);
+        this.container = text;
+    }
+
+    unmount() {
+        if (this.container) {
+            this.container.remove();
+            this.container = undefined;
+        }
+    }
+}