myetv-player 1.0.0

package/plugins/youtube/myetv-player-youtube-plugin.js

@@ -0,0 +1,418 @@
+/**
+ * MYETV Player - YouTube Plugin (Enhanced)
+ * File: myetv-player-youtube-plugin.js
+ */
+
+(function () {
+    'use strict';
+
+    class YouTubePlugin {
+        constructor(player, options = {}) {
+            this.player = player;
+            this.options = {
+                videoId: options.videoId || null,  // Direct video ID
+                apiKey: options.apiKey || null,
+                autoplay: options.autoplay !== undefined ? options.autoplay : false,
+                showYouTubeUI: options.showYouTubeUI !== undefined ? options.showYouTubeUI : false,
+                autoLoadFromData: options.autoLoadFromData !== undefined ? options.autoLoadFromData : true,
+                quality: options.quality || 'default', // 'default', 'hd720', 'hd1080'
+                ...options
+            };
+
+            this.ytPlayer = null;
+            this.isYouTubeReady = false;
+            this.videoId = this.options.videoId;
+
+            // Get plugin API
+            this.api = player.getPluginAPI();
+        }
+
+        /**
+         * Setup plugin (called automatically after instantiation)
+         */
+        setup() {
+            this.api.debug('YouTube plugin setup started');
+
+            // Load YouTube IFrame API
+            this.loadYouTubeAPI();
+
+            // Add custom methods to player
+            this.addPlayerMethods();
+
+            // Register hooks
+            this.registerHooks();
+
+            // Auto-load video ID from various sources
+            if (this.options.autoLoadFromData) {
+                this.autoDetectVideoId();
+            }
+
+            // If video ID is provided in options, load it immediately
+            if (this.videoId) {
+                this.waitForAPIThenLoad();
+            }
+
+            this.api.debug('YouTube plugin setup completed');
+        }
+
+        /**
+         * Add custom methods to player instance
+         */
+        addPlayerMethods() {
+            // Load YouTube video by ID
+            this.player.loadYouTubeVideo = (videoId, options = {}) => {
+                return this.loadVideo(videoId, options);
+            };
+
+            // Get current YouTube video ID
+            this.player.getYouTubeVideoId = () => {
+                return this.videoId;
+            };
+
+            // Check if YouTube is active
+            this.player.isYouTubeActive = () => {
+                return this.ytPlayer !== null;
+            };
+        }
+
+        /**
+         * Register plugin hooks
+         */
+        registerHooks() {
+            // Check for YouTube URL before play
+            this.api.registerHook('beforePlay', (data) => {
+                this.checkForYouTubeUrl();
+            });
+        }
+
+        /**
+         * Auto-detect video ID from various sources
+         */
+        autoDetectVideoId() {
+            // Priority 1: Check data-video-id attribute
+            const dataVideoId = this.api.video.getAttribute('data-video-id');
+            const dataVideoType = this.api.video.getAttribute('data-video-type');
+
+            if (dataVideoId && dataVideoType === 'youtube') {
+                this.videoId = dataVideoId;
+                this.api.debug('YouTube video ID detected from data-video-id: ' + this.videoId);
+                return;
+            }
+
+            // Priority 2: Check video source URL
+            const src = this.api.video.src || this.api.video.currentSrc;
+            if (src) {
+                const extractedId = this.extractYouTubeVideoId(src);
+                if (extractedId) {
+                    this.videoId = extractedId;
+                    this.api.debug('YouTube video ID detected from src: ' + this.videoId);
+                    return;
+                }
+            }
+
+            // Priority 3: Check source elements
+            const sources = this.api.video.querySelectorAll('source');
+            for (const source of sources) {
+                const sourceSrc = source.getAttribute('src');
+                const sourceType = source.getAttribute('type');
+
+                if (sourceType === 'video/youtube' || sourceType === 'video/x-youtube') {
+                    const extractedId = this.extractYouTubeVideoId(sourceSrc);
+                    if (extractedId) {
+                        this.videoId = extractedId;
+                        this.api.debug('YouTube video ID detected from source element: ' + this.videoId);
+                        return;
+                    }
+                }
+            }
+        }
+
+        /**
+         * Wait for API to be ready then load video
+         */
+        waitForAPIThenLoad() {
+            if (this.isYouTubeReady) {
+                this.loadVideo(this.videoId);
+            } else {
+                // Wait for API to be ready
+                const checkInterval = setInterval(() => {
+                    if (this.isYouTubeReady) {
+                        clearInterval(checkInterval);
+                        this.loadVideo(this.videoId);
+                    }
+                }, 100);
+            }
+        }
+
+        /**
+         * Load YouTube IFrame API
+         */
+        loadYouTubeAPI() {
+            if (window.YT && window.YT.Player) {
+                this.isYouTubeReady = true;
+                this.api.debug('YouTube API already loaded');
+                return;
+            }
+
+            // Load YouTube IFrame API script
+            const tag = document.createElement('script');
+            tag.src = 'https://www.youtube.com/iframe_api';
+            const firstScriptTag = document.getElementsByTagName('script')[0];
+            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+            // Set callback for when API is ready
+            window.onYouTubeIframeAPIReady = () => {
+                this.isYouTubeReady = true;
+                this.api.debug('YouTube API loaded and ready');
+
+                // Trigger custom event
+                this.api.triggerEvent('youtubeplugin:ready', {});
+            };
+        }
+
+        /**
+         * Check if current video source is a YouTube URL
+         */
+        checkForYouTubeUrl() {
+            const src = this.api.video.src || this.api.video.currentSrc;
+            const videoId = this.extractYouTubeVideoId(src);
+
+            if (videoId && videoId !== this.videoId) {
+                this.loadVideo(videoId);
+                return true;
+            }
+
+            return false;
+        }
+
+        /**
+         * Extract YouTube video ID from URL
+         * Supports various YouTube URL formats
+         * @param {String} url - YouTube URL or video ID
+         * @returns {String|null} Video ID or null
+         */
+        extractYouTubeVideoId(url) {
+            if (!url) return null;
+
+            // Remove whitespace
+            url = url.trim();
+
+            const patterns = [
+                // Standard watch URL
+                /(?:youtube\.com\/watch\?v=)([^&\n?#]+)/,
+                // Shortened youtu.be URL
+                /(?:youtu\.be\/)([^&\n?#]+)/,
+                // Embed URL
+                /(?:youtube\.com\/embed\/)([^&\n?#]+)/,
+                // Direct video ID (11 characters)
+                /^([a-zA-Z0-9_-]{11})$/
+            ];
+
+            for (const pattern of patterns) {
+                const match = url.match(pattern);
+                if (match && match[1]) {
+                    return match[1];
+                }
+            }
+
+            return null;
+        }
+
+        /**
+         * Load YouTube video by ID
+         * @param {String} videoId - YouTube video ID
+         * @param {Object} options - Load options
+         */
+        loadVideo(videoId, options = {}) {
+            if (!videoId) {
+                this.api.debug('No video ID provided to loadVideo()');
+                return;
+            }
+
+            if (!this.isYouTubeReady) {
+                this.api.debug('YouTube API not ready yet, waiting...');
+                setTimeout(() => this.loadVideo(videoId, options), 100);
+                return;
+            }
+
+            this.videoId = videoId;
+
+            // Hide native video element
+            this.api.video.style.display = 'none';
+
+            // Create YouTube player container if not exists
+            if (!this.ytPlayerContainer) {
+                this.ytPlayerContainer = document.createElement('div');
+                this.ytPlayerContainer.id = 'yt-player-' + Date.now();
+                this.ytPlayerContainer.className = 'yt-player-container';
+
+                // Style to match video element
+                this.ytPlayerContainer.style.position = 'absolute';
+                this.ytPlayerContainer.style.top = '0';
+                this.ytPlayerContainer.style.left = '0';
+                this.ytPlayerContainer.style.width = '100%';
+                this.ytPlayerContainer.style.height = '100%';
+
+                this.api.container.insertBefore(this.ytPlayerContainer, this.api.controls);
+            }
+
+            // Destroy existing player if present
+            if (this.ytPlayer) {
+                this.ytPlayer.destroy();
+            }
+
+            // Merge options
+            const playerVars = {
+                autoplay: this.options.autoplay ? 1 : 0,
+                controls: this.options.showYouTubeUI ? 1 : 0,
+                modestbranding: 1,
+                rel: 0,
+                ...options.playerVars
+            };
+
+            // Initialize YouTube player
+            this.ytPlayer = new YT.Player(this.ytPlayerContainer.id, {
+                videoId: videoId,
+                playerVars: playerVars,
+                events: {
+                    'onReady': (event) => this.onPlayerReady(event),
+                    'onStateChange': (event) => this.onPlayerStateChange(event),
+                    'onError': (event) => this.onPlayerError(event)
+                }
+            });
+
+            this.api.debug('YouTube video loaded: ' + videoId);
+            this.api.triggerEvent('youtubeplugin:videoloaded', { videoId });
+        }
+
+        /**
+         * YouTube player ready callback
+         */
+        onPlayerReady(event) {
+            this.api.debug('YouTube player ready');
+
+            // Sync controls with YouTube player
+            this.syncControls();
+
+            // Set quality if specified
+            if (this.options.quality && this.options.quality !== 'default') {
+                this.ytPlayer.setPlaybackQuality(this.options.quality);
+            }
+
+            this.api.triggerEvent('youtubeplugin:playerready', {});
+        }
+
+        /**
+         * YouTube player state change callback
+         */
+        onPlayerStateChange(event) {
+            switch (event.data) {
+                case YT.PlayerState.PLAYING:
+                    this.api.triggerEvent('played', {});
+                    break;
+                case YT.PlayerState.PAUSED:
+                    this.api.triggerEvent('paused', {});
+                    break;
+                case YT.PlayerState.ENDED:
+                    this.api.triggerEvent('ended', {});
+                    break;
+                case YT.PlayerState.BUFFERING:
+                    this.api.debug('YouTube player buffering');
+                    break;
+            }
+        }
+
+        /**
+         * YouTube player error callback
+         */
+        onPlayerError(event) {
+            const errorMessages = {
+                2: 'Invalid video ID',
+                5: 'HTML5 player error',
+                100: 'Video not found or private',
+                101: 'Video not allowed to be played in embedded players',
+                150: 'Video not allowed to be played in embedded players'
+            };
+
+            const errorMsg = errorMessages[event.data] || 'Unknown error';
+            this.api.debug('YouTube player error: ' + errorMsg);
+
+            this.api.triggerEvent('youtubeplugin:error', {
+                errorCode: event.data,
+                errorMessage: errorMsg
+            });
+        }
+
+        /**
+         * Sync player controls with YouTube player
+         */
+        syncControls() {
+            // Override play/pause methods
+            const originalPlay = this.player.play;
+            const originalPause = this.player.pause;
+
+            this.player.play = () => {
+                if (this.ytPlayer && this.ytPlayer.playVideo) {
+                    this.ytPlayer.playVideo();
+                } else {
+                    originalPlay.call(this.player);
+                }
+            };
+
+            this.player.pause = () => {
+                if (this.ytPlayer && this.ytPlayer.pauseVideo) {
+                    this.ytPlayer.pauseVideo();
+                } else {
+                    originalPause.call(this.player);
+                }
+            };
+
+            // Sync time updates
+            if (this.ytPlayer) {
+                setInterval(() => {
+                    if (this.ytPlayer && this.ytPlayer.getCurrentTime) {
+                        const currentTime = this.ytPlayer.getCurrentTime();
+                        const duration = this.ytPlayer.getDuration();
+
+                        // Update progress bar if available
+                        if (this.api.player.progressFilled && duration) {
+                            const progress = (currentTime / duration) * 100;
+                            this.api.player.progressFilled.style.width = progress + '%';
+                            if (this.api.player.progressHandle) {
+                                this.api.player.progressHandle.style.left = progress + '%';
+                            }
+                        }
+                    }
+                }, 250);
+            }
+        }
+
+        /**
+         * Dispose plugin
+         */
+        dispose() {
+            this.api.debug('YouTube plugin disposed');
+
+            // Destroy YouTube player
+            if (this.ytPlayer && this.ytPlayer.destroy) {
+                this.ytPlayer.destroy();
+                this.ytPlayer = null;
+            }
+
+            // Remove container
+            if (this.ytPlayerContainer) {
+                this.ytPlayerContainer.remove();
+                this.ytPlayerContainer = null;
+            }
+
+            // Show native video element again
+            if (this.api.video) {
+                this.api.video.style.display = '';
+            }
+        }
+    }
+
+    // Register plugin globally
+    window.registerMYETVPlugin('youtube', YouTubePlugin);
+
+})();

package/scss/README.md

@@ -0,0 +1 @@
+

package/scss/_audio-player.scss

@@ -0,0 +1,21 @@
+.audio-player {
+    width: 320px;
+    height: 80px;
+
+    video {
+        display: none !important;
+    }
+
+    .controls-wrapper {
+        height: 60px;
+    }
+
+    .audio-wave-canvas {
+        display: block;
+        width: 100%;
+        height: 60px;
+        background-color: #222;
+        border-radius: 4px;
+        margin-top: 5px;
+    }
+}

package/scss/_base.scss

@@ -0,0 +1,131 @@
+// ===================================
+// BASE STYLES
+// ===================================
+
+:root {
+    /* Main theme colors */
+    --player-primary-color: goldenrod;
+    --player-primary-hover: #daa520;
+    --player-primary-dark: #b8860b;
+    /* Control colors */
+    --player-button-color: white;
+    --player-button-hover: rgba(255, 255, 255, 0.1);
+    --player-button-active: rgba(255, 255, 255, 0.2);
+    /* Text colors */
+    --player-text-color: white;
+    --player-text-secondary: rgba(255, 255, 255, 0.8);
+    /* Background and overlay */
+    --player-bg-primary: #000;
+    --player-bg-controls: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
+    --player-bg-title-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
+    --player-bg-menu: rgba(20, 20, 20, 0.95);
+    --player-bg-loading: rgba(0, 0, 0, 0.7);
+    /* Dimensions */
+    --player-border-radius: 12px;
+    --player-controls-padding: 20px 15px 15px;
+    --player-title-overlay-padding: 15px 20px 25px;
+    --player-button-padding: 8px;
+    --player-icon-size: 20px;
+    /* Progress and Volume bars */
+    --player-progress-height: 6px;
+    --player-progress-bg: rgba(255, 255, 255, 0.2);
+    --player-progress-buffer: rgba(255, 255, 255, 0.3);
+    --player-progress-handle-size: 16px;
+    --player-volume-height: 4px;
+    --player-volume-bg: rgba(255, 255, 255, 0.2);
+    --player-volume-handle-size: 14px;
+    --player-volume-fill: 100%;
+    /* Transitions */
+    --player-transition-fast: 0.2s ease;
+    --player-transition-normal: 0.3s ease;
+    /* Shadows */
+    --player-shadow-main: 0 8px 32px rgba(0, 0, 0, 0.3);
+    --player-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.2);
+    --player-shadow-tooltip: 0 3px 12px rgba(0, 0, 0, 0.4);
+}
+
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 20px;
+    background: #1a1a1a;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.video-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    background: var(--player-bg-primary);
+    border-radius: var(--player-border-radius);
+    box-shadow: var(--player-shadow-main);
+    position: relative;
+}
+
+.video-container:fullscreen,
+.video-container:-webkit-full-screen,
+.video-container:-moz-full-screen {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+}
+
+.video-wrapper {
+    position: relative;
+    width: 100%;
+    background: var(--player-bg-primary);
+    overflow: visible !important;
+}
+
+.video-wrapper.player-initialized .video-player {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+    pointer-events: auto;
+}
+
+.video-wrapper.player-initialized .initial-loading {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+    transition-delay: 0.2s;
+    display: none;
+    transition-delay: 0.5s;
+}
+
+.video-wrapper:not(.has-controls) .video-watermark.hide-on-autohide {
+    visibility: hidden;
+    opacity: 0;
+}
+
+.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomleft:not(.hide-on-autohide),
+.video-wrapper:not(.has-controls) .video-watermark.watermark-bottomright:not(.hide-on-autohide) {
+    bottom: 15px;
+}
+
+.video-wrapper.has-controls .video-watermark {
+    visibility: visible;
+    opacity: 0.7;
+}
+
+.video-wrapper.has-controls .video-watermark.watermark-bottomleft,
+.video-wrapper.has-controls .video-watermark.watermark-bottomright {
+    bottom: 90px;
+}
+
+.hidden {
+    display: none !important;
+}
+
+
+/* DARK MODE THEME */
+
+.player-theme-dark {
+    --player-bg-primary: #1a1a1a;
+    --player-bg-controls: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.9) 100%);
+    --player-bg-title-overlay: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, transparent 100%);
+    --player-bg-menu: rgba(30, 30, 30, 0.95);
+}

package/scss/_controls.scss

@@ -0,0 +1,30 @@
+// ===================================
+// CONTROLS
+// ===================================
+
+@use 'mixins' as *;
+@use 'variables' as *;
+
+/* CONTROLS - IMPROVED RESPONSIVE DESIGN */
+.controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--player-bg-controls);
+    padding: var(--player-controls-padding);
+    opacity: 0;
+    transform: translateY(100%);
+    transition: all var(--player-transition-normal);
+    z-index: 10;
+    min-height: 70px !important;
+    box-sizing: border-box;
+}
+
+.controls.show {
+    opacity: 1;
+    transform: translateY(0);
+    position: absolute !important;
+    bottom: 0 !important;
+    z-index: 20 !important;
+}