@viewlift/player-backup 1.0.4-lighteningjs → 1.0.4

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