vidply 1.0.5 → 1.0.7

package/src/utils/DOMUtils.js

@@ -1,154 +1,154 @@
-/**
- * DOM manipulation utilities
- */
-
-export const DOMUtils = {
-  createElement(tag, options = {}) {
-    const element = document.createElement(tag);
-    
-    if (options.className) {
-      element.className = options.className;
-    }
-    
-    if (options.attributes) {
-      Object.entries(options.attributes).forEach(([key, value]) => {
-        element.setAttribute(key, value);
-      });
-    }
-    
-    if (options.innerHTML) {
-      element.innerHTML = options.innerHTML;
-    }
-    
-    if (options.textContent) {
-      element.textContent = options.textContent;
-    }
-    
-    if (options.style) {
-      Object.assign(element.style, options.style);
-    }
-    
-    if (options.children) {
-      options.children.forEach(child => {
-        if (child) element.appendChild(child);
-      });
-    }
-    
-    return element;
-  },
-
-  addClass(element, className) {
-    if (element && className) {
-      element.classList.add(className);
-    }
-  },
-
-  removeClass(element, className) {
-    if (element && className) {
-      element.classList.remove(className);
-    }
-  },
-
-  toggleClass(element, className) {
-    if (element && className) {
-      element.classList.toggle(className);
-    }
-  },
-
-  hasClass(element, className) {
-    return element && element.classList.contains(className);
-  },
-
-  show(element) {
-    if (element) {
-      element.style.display = '';
-    }
-  },
-
-  hide(element) {
-    if (element) {
-      element.style.display = 'none';
-    }
-  },
-
-  fadeIn(element, duration = 300) {
-    if (!element) return;
-    
-    element.style.opacity = '0';
-    element.style.display = '';
-    
-    let start = null;
-    const animate = (timestamp) => {
-      if (!start) start = timestamp;
-      const progress = timestamp - start;
-      const opacity = Math.min(progress / duration, 1);
-      
-      element.style.opacity = opacity;
-      
-      if (progress < duration) {
-        requestAnimationFrame(animate);
-      }
-    };
-    
-    requestAnimationFrame(animate);
-  },
-
-  fadeOut(element, duration = 300) {
-    if (!element) return;
-    
-    const startOpacity = parseFloat(getComputedStyle(element).opacity) || 1;
-    let start = null;
-    
-    const animate = (timestamp) => {
-      if (!start) start = timestamp;
-      const progress = timestamp - start;
-      const opacity = Math.max(startOpacity - (progress / duration), 0);
-      
-      element.style.opacity = opacity;
-      
-      if (progress < duration) {
-        requestAnimationFrame(animate);
-      } else {
-        element.style.display = 'none';
-      }
-    };
-    
-    requestAnimationFrame(animate);
-  },
-
-  offset(element) {
-    if (!element) return { top: 0, left: 0 };
-    
-    const rect = element.getBoundingClientRect();
-    return {
-      top: rect.top + window.pageYOffset,
-      left: rect.left + window.pageXOffset,
-      width: rect.width,
-      height: rect.height
-    };
-  },
-
-  escapeHTML(str) {
-    const div = document.createElement('div');
-    div.textContent = str;
-    return div.innerHTML;
-  },
-
-  sanitizeHTML(html) {
-    // Basic HTML sanitization - allow safe tags for VTT captions
-    // Since we control the HTML (from VTT parsing), we can safely allow these tags
-    const temp = document.createElement('div');
-    
-    // Strip out any potentially dangerous tags/attributes
-    // Allow: strong, em, u, span, b, i with class and data-voice attributes
-    const safeHtml = html
-      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
-      .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
-      .replace(/on\w+\s*=/gi, '') // Remove event handlers
-      .replace(/javascript:/gi, ''); // Remove javascript: protocol
-    
-    temp.innerHTML = safeHtml;
-    return temp.innerHTML;
-  }
-};
-
+/**
+ * DOM manipulation utilities
+ */
+
+export const DOMUtils = {
+  createElement(tag, options = {}) {
+    const element = document.createElement(tag);
+    
+    if (options.className) {
+      element.className = options.className;
+    }
+    
+    if (options.attributes) {
+      Object.entries(options.attributes).forEach(([key, value]) => {
+        element.setAttribute(key, value);
+      });
+    }
+    
+    if (options.innerHTML) {
+      element.innerHTML = options.innerHTML;
+    }
+    
+    if (options.textContent) {
+      element.textContent = options.textContent;
+    }
+    
+    if (options.style) {
+      Object.assign(element.style, options.style);
+    }
+    
+    if (options.children) {
+      options.children.forEach(child => {
+        if (child) element.appendChild(child);
+      });
+    }
+    
+    return element;
+  },
+
+  addClass(element, className) {
+    if (element && className) {
+      element.classList.add(className);
+    }
+  },
+
+  removeClass(element, className) {
+    if (element && className) {
+      element.classList.remove(className);
+    }
+  },
+
+  toggleClass(element, className) {
+    if (element && className) {
+      element.classList.toggle(className);
+    }
+  },
+
+  hasClass(element, className) {
+    return element && element.classList.contains(className);
+  },
+
+  show(element) {
+    if (element) {
+      element.style.display = '';
+    }
+  },
+
+  hide(element) {
+    if (element) {
+      element.style.display = 'none';
+    }
+  },
+
+  fadeIn(element, duration = 300) {
+    if (!element) return;
+    
+    element.style.opacity = '0';
+    element.style.display = '';
+    
+    let start = null;
+    const animate = (timestamp) => {
+      if (!start) start = timestamp;
+      const progress = timestamp - start;
+      const opacity = Math.min(progress / duration, 1);
+      
+      element.style.opacity = opacity;
+      
+      if (progress < duration) {
+        requestAnimationFrame(animate);
+      }
+    };
+    
+    requestAnimationFrame(animate);
+  },
+
+  fadeOut(element, duration = 300) {
+    if (!element) return;
+    
+    const startOpacity = parseFloat(getComputedStyle(element).opacity) || 1;
+    let start = null;
+    
+    const animate = (timestamp) => {
+      if (!start) start = timestamp;
+      const progress = timestamp - start;
+      const opacity = Math.max(startOpacity - (progress / duration), 0);
+      
+      element.style.opacity = opacity;
+      
+      if (progress < duration) {
+        requestAnimationFrame(animate);
+      } else {
+        element.style.display = 'none';
+      }
+    };
+    
+    requestAnimationFrame(animate);
+  },
+
+  offset(element) {
+    if (!element) return { top: 0, left: 0 };
+    
+    const rect = element.getBoundingClientRect();
+    return {
+      top: rect.top + window.pageYOffset,
+      left: rect.left + window.pageXOffset,
+      width: rect.width,
+      height: rect.height
+    };
+  },
+
+  escapeHTML(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  },
+
+  sanitizeHTML(html) {
+    // Basic HTML sanitization - allow safe tags for VTT captions
+    // Since we control the HTML (from VTT parsing), we can safely allow these tags
+    const temp = document.createElement('div');
+    
+    // Strip out any potentially dangerous tags/attributes
+    // Allow: strong, em, u, span, b, i with class and data-voice attributes
+    const safeHtml = html
+      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+      .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
+      .replace(/on\w+\s*=/gi, '') // Remove event handlers
+      .replace(/javascript:/gi, ''); // Remove javascript: protocol
+    
+    temp.innerHTML = safeHtml;
+    return temp.innerHTML;
+  }
+};
+

package/src/utils/EventEmitter.js

@@ -1,53 +1,53 @@
-/**
- * Simple EventEmitter implementation
- */
-
-export class EventEmitter {
-  constructor() {
-    this.events = {};
-  }
-
-  on(event, listener) {
-    if (!this.events[event]) {
-      this.events[event] = [];
-    }
-    this.events[event].push(listener);
-    return this;
-  }
-
-  once(event, listener) {
-    const onceListener = (...args) => {
-      listener(...args);
-      this.off(event, onceListener);
-    };
-    return this.on(event, onceListener);
-  }
-
-  off(event, listener) {
-    if (!this.events[event]) return this;
-    
-    if (!listener) {
-      delete this.events[event];
-    } else {
-      this.events[event] = this.events[event].filter(l => l !== listener);
-    }
-    
-    return this;
-  }
-
-  emit(event, ...args) {
-    if (!this.events[event]) return this;
-    
-    this.events[event].forEach(listener => {
-      listener(...args);
-    });
-    
-    return this;
-  }
-
-  removeAllListeners() {
-    this.events = {};
-    return this;
-  }
-}
-
+/**
+ * Simple EventEmitter implementation
+ */
+
+export class EventEmitter {
+  constructor() {
+    this.events = {};
+  }
+
+  on(event, listener) {
+    if (!this.events[event]) {
+      this.events[event] = [];
+    }
+    this.events[event].push(listener);
+    return this;
+  }
+
+  once(event, listener) {
+    const onceListener = (...args) => {
+      listener(...args);
+      this.off(event, onceListener);
+    };
+    return this.on(event, onceListener);
+  }
+
+  off(event, listener) {
+    if (!this.events[event]) return this;
+    
+    if (!listener) {
+      delete this.events[event];
+    } else {
+      this.events[event] = this.events[event].filter(l => l !== listener);
+    }
+    
+    return this;
+  }
+
+  emit(event, ...args) {
+    if (!this.events[event]) return this;
+    
+    this.events[event].forEach(listener => {
+      listener(...args);
+    });
+    
+    return this;
+  }
+
+  removeAllListeners() {
+    this.events = {};
+    return this;
+  }
+}
+

package/src/utils/StorageManager.js

@@ -0,0 +1,156 @@
+/**
+ * StorageManager - Handles persistent storage of user preferences
+ */
+
+export class StorageManager {
+  constructor(namespace = 'vidply') {
+    this.namespace = namespace;
+    this.storage = this.isStorageAvailable() ? localStorage : null;
+  }
+
+  /**
+   * Check if localStorage is available
+   */
+  isStorageAvailable() {
+    try {
+      const test = '__storage_test__';
+      localStorage.setItem(test, test);
+      localStorage.removeItem(test);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  /**
+   * Get a namespaced key
+   */
+  getKey(key) {
+    return `${this.namespace}_${key}`;
+  }
+
+  /**
+   * Save a value to storage
+   */
+  set(key, value) {
+    if (!this.storage) return false;
+    
+    try {
+      const namespacedKey = this.getKey(key);
+      this.storage.setItem(namespacedKey, JSON.stringify(value));
+      return true;
+    } catch (e) {
+      console.warn('Failed to save to localStorage:', e);
+      return false;
+    }
+  }
+
+  /**
+   * Get a value from storage
+   */
+  get(key, defaultValue = null) {
+    if (!this.storage) return defaultValue;
+    
+    try {
+      const namespacedKey = this.getKey(key);
+      const value = this.storage.getItem(namespacedKey);
+      return value ? JSON.parse(value) : defaultValue;
+    } catch (e) {
+      console.warn('Failed to read from localStorage:', e);
+      return defaultValue;
+    }
+  }
+
+  /**
+   * Remove a value from storage
+   */
+  remove(key) {
+    if (!this.storage) return false;
+    
+    try {
+      const namespacedKey = this.getKey(key);
+      this.storage.removeItem(namespacedKey);
+      return true;
+    } catch (e) {
+      console.warn('Failed to remove from localStorage:', e);
+      return false;
+    }
+  }
+
+  /**
+   * Clear all namespaced values
+   */
+  clear() {
+    if (!this.storage) return false;
+    
+    try {
+      const keys = Object.keys(this.storage);
+      keys.forEach(key => {
+        if (key.startsWith(this.namespace)) {
+          this.storage.removeItem(key);
+        }
+      });
+      return true;
+    } catch (e) {
+      console.warn('Failed to clear localStorage:', e);
+      return false;
+    }
+  }
+
+  /**
+   * Save transcript preferences
+   */
+  saveTranscriptPreferences(preferences) {
+    return this.set('transcript_preferences', preferences);
+  }
+
+  /**
+   * Get transcript preferences
+   */
+  getTranscriptPreferences() {
+    return this.get('transcript_preferences', null);
+  }
+
+  /**
+   * Save caption preferences
+   */
+  saveCaptionPreferences(preferences) {
+    return this.set('caption_preferences', preferences);
+  }
+
+  /**
+   * Get caption preferences
+   */
+  getCaptionPreferences() {
+    return this.get('caption_preferences', null);
+  }
+
+  /**
+   * Save player preferences (volume, speed, etc.)
+   */
+  savePlayerPreferences(preferences) {
+    return this.set('player_preferences', preferences);
+  }
+
+  /**
+   * Get player preferences
+   */
+  getPlayerPreferences() {
+    return this.get('player_preferences', null);
+  }
+
+  /**
+   * Save sign language preferences (position and size)
+   */
+  saveSignLanguagePreferences(preferences) {
+    return this.set('sign_language_preferences', preferences);
+  }
+
+  /**
+   * Get sign language preferences
+   */
+  getSignLanguagePreferences() {
+    return this.get('sign_language_preferences', null);
+  }
+}
+