myetv-player 1.7.1 → 1.7.2

package/plugins/radio/php/data/readme.md

@@ -0,0 +1 @@
+This folder must be writable to save stats json files

package/plugins/radio/php/radio_stats.php

@@ -0,0 +1,203 @@
+<?php
+/**
+ * MYETV Radio Stats Backend
+ * Handles live viewers polling and historical stats tracking via JSON files.
+ */
+
+declare(strict_types=1);
+
+// Enable CORS if the API is on a different subdomain/domain
+header("Access-Control-Allow-Origin: *");
+header("Content-Type: application/json; charset=UTF-8");
+
+class RadioStatsManager {
+    
+    private string $dataDir;
+    private int $liveTimeout;
+
+    public function __construct(string $dataDir = __DIR__ . '/data', int $liveTimeout = 30) {
+        $this->dataDir = $dataDir;
+        $this->liveTimeout = $liveTimeout; // Seconds before a client is considered offline
+        
+        if (!is_dir($this->dataDir)) {
+            @mkdir($this->dataDir, 0755, true);
+        }
+    }
+
+    /**
+     * Sanitizes strings to prevent path traversal and XSS
+     */
+    private function sanitizeInput(?string $input): string {
+        if ($input === null) return '';
+        // Allow only alphanumeric characters, dashes, and underscores
+        return preg_replace('/[^a-zA-Z0-9\-_]/', '', $input);
+    }
+
+    /**
+     * Safely reads and decodes a JSON file using a shared lock
+     */
+    private function readJson(string $filePath): array {
+        if (!file_exists($filePath)) {
+            return [];
+        }
+        
+        $fp = fopen($filePath, 'r');
+        if (!$fp) return [];
+        
+        flock($fp, LOCK_SH); // Shared lock for reading
+        $size = filesize($filePath);
+        $json = $size > 0 ? fread($fp, $size) : '';
+        flock($fp, LOCK_UN);
+        fclose($fp);
+        
+        $data = json_decode($json ?: '', true);
+        return is_array($data) ? $data : [];
+    }
+
+    /**
+     * Safely encodes and writes to a JSON file using an exclusive lock
+     */
+    private function writeJson(string $filePath, array $data): bool {
+        $fp = fopen($filePath, 'c'); // Open for write, create if not exists
+        if (!$fp) return false;
+        
+        if (flock($fp, LOCK_EX)) { // Exclusive lock for writing
+            ftruncate($fp, 0); // Clear file content
+            fwrite($fp, json_encode($data, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT));
+            fflush($fp);
+            flock($fp, LOCK_UN);
+            fclose($fp);
+            return true;
+        }
+        
+        fclose($fp);
+        return false;
+    }
+
+    /**
+     * Generates time periods for history tracking
+     */
+    private function getTimePeriods(): array {
+        $now = time();
+        return [
+            'daily'   => date('Y-m-d', $now),
+            'weekly'  => date('Y-W', $now), // Year and ISO-8601 week number
+            'monthly' => date('Y-m', $now),
+            'yearly'  => date('Y', $now)
+        ];
+    }
+
+    /**
+     * Main processor
+     */
+    public function processRequest(): void {
+        $stationId = $this->sanitizeInput($_GET['station_id'] ?? null);
+        $clientId = $this->sanitizeInput($_GET['client_id'] ?? null);
+        $status = $_GET['status'] ?? null;
+        $isPlaying = ($status === 'playing');
+
+        if (empty($stationId) || empty($clientId)) {
+            $this->sendResponse(false, ['error' => 'Missing parameters']);
+            return;
+        }
+
+        $now = time();
+        
+        // Define file paths
+        $liveFile = $this->dataDir . '/live_' . $stationId . '.json';
+        $historyFile = $this->dataDir . '/history_' . $stationId . '.json';
+        $clientsFile = $this->dataDir . '/clients_' . $stationId . '.json';
+
+        // 1. Handle Live Viewers
+        $liveData = $this->readJson($liveFile);
+        
+        if ($isPlaying) {
+            $liveData[$clientId] = $now;
+        }
+        
+        // Garbage collection: remove expired clients
+        $activeLiveCount = 0;
+        foreach ($liveData as $cId => $lastPing) {
+            if ($now - $lastPing > $this->liveTimeout) {
+                unset($liveData[$cId]);
+            } else {
+                $activeLiveCount++;
+            }
+        }
+        
+        $this->writeJson($liveFile, $liveData);
+
+        // 2. Handle History Stats
+        $historyData = $this->readJson($historyFile);
+        $clientHistory = $this->readJson($clientsFile);
+        
+        // Initialize default structure if empty
+        if (empty($historyData)) {
+            $historyData = [
+                'total' => 0,
+                'periods' => $this->getTimePeriods(),
+                'stats' => ['daily' => 0, 'weekly' => 0, 'monthly' => 0, 'yearly' => 0]
+            ];
+        }
+        
+        $currentPeriods = $this->getTimePeriods();
+        $historyUpdated = false;
+        
+        // Reset counters if period changed (e.g., new day, new month)
+        foreach (['daily', 'weekly', 'monthly', 'yearly'] as $periodKey) {
+            if ($historyData['periods'][$periodKey] !== $currentPeriods[$periodKey]) {
+                $historyData['stats'][$periodKey] = 0;
+                $historyData['periods'][$periodKey] = $currentPeriods[$periodKey];
+                $historyUpdated = true;
+                
+                // Clear the daily clients list to allow counting them again tomorrow
+                if ($periodKey === 'daily') {
+                    $clientHistory = []; 
+                }
+            }
+        }
+
+        // If the user is playing, check if we need to count them as a new view for today
+        if ($isPlaying && !isset($clientHistory[$clientId])) {
+            $clientHistory[$clientId] = $now;
+            $this->writeJson($clientsFile, $clientHistory);
+            
+            $historyData['total']++;
+            $historyData['stats']['daily']++;
+            $historyData['stats']['weekly']++;
+            $historyData['stats']['monthly']++;
+            $historyData['stats']['yearly']++;
+            $historyUpdated = true;
+        }
+
+        if ($historyUpdated) {
+            $this->writeJson($historyFile, $historyData);
+        }
+
+        // 3. Output Response
+        $this->sendResponse(true, [
+            'live' => $activeLiveCount,
+            'total' => $historyData['total'],
+            'daily' => $historyData['stats']['daily'],
+            'weekly' => $historyData['stats']['weekly'],
+            'monthly' => $historyData['stats']['monthly'],
+            'yearly' => $historyData['stats']['yearly']
+        ]);
+    }
+
+    /**
+     * Outputs the JSON payload and exits
+     */
+    private function sendResponse(bool $success, array $payload): void {
+        echo json_encode([
+            'success' => $success,
+            'stats' => $success ? $payload : null,
+            'error' => !$success ? ($payload['error'] ?? 'Unknown error') : null
+        ]);
+        exit;
+    }
+}
+
+// Execute the request
+$api = new RadioStatsManager();
+$api->processRequest();

package/plugins/radio/proxy.php

@@ -0,0 +1,26 @@
+<?php
+// proxy.php?url=http://...
+$url = $_GET['url'] ?? '';
+
+// security: only allow valid URLs starting with http
+if (!filter_var($url, FILTER_VALIDATE_URL) || !str_starts_with($url, 'http')) {
+    http_response_code(400);
+    exit;
+}
+
+// header audio
+$headers = get_headers($url, 1);
+$contentType = $headers['Content-Type'] ?? 'audio/mpeg';
+header('Content-Type: ' . $contentType);
+header('Cache-Control: no-cache');
+header('X-Accel-Buffering: no');
+
+// direct stream
+$stream = fopen($url, 'rb');
+if (!$stream) { http_response_code(502); exit; }
+
+while (!feof($stream)) {
+    echo fread($stream, 8192);
+    flush();
+}
+fclose($stream);

package/plugins/radio/readme.md

@@ -0,0 +1,176 @@
+# 📻 MYETV Radio Plugin
+
+![License](https://img.shields.io/badge/license-MIT-green.svg)
+
+A powerful and fully responsive Radio Tuner extension for the **MYETV Video Player Open Source**. 
+This plugin transforms your standard video player into a fully-fledged internet radio receiver, complete with interactive UI, real-time filtering, native player integration, and live analytics.
+
+---
+
+## ✨ Features
+
+- **🎨 Dual Themes**: Choose between two stunning interfaces:
+  - **Vintage**: A classic, draggable analog dial with a glowing needle.
+  - **Digital**: A modern, car-stereo style LCD display.
+
+- **📊 Live Analytics**: Real-time tracking of live viewers and historical statistics (daily, weekly, monthly, yearly) using a robust backend polling system and an interactive UI modal.
+
+- **⚡ Real-time Zapping & Filtering**: Instantly search stations by name, or filter them via the built-in country dropdown without reloading the page.
+
+- **💾 Channel Memory**: Automatically remembers the user's last played channel using `localStorage`.
+
+- **⌨️ Keyboard Override**: Seamlessly hijacks the native left/right arrow keys to zap through radio channels instead of seeking the timeline.
+
+- **⚙️ Native Settings Integration**: Safely injects a custom "Radio Options" panel directly into the player's native settings menu.
+
+- **📱 100% Responsive**: Pixel-perfect UI that adapts to mobile screens and protects the player's control bars with calculated safe-margins.
+
+- **🧹 Clean UI**: Automatically hides irrelevant video controls (like Picture-in-Picture, playback speed, and the progress bar) for a pure audio experience.
+
+---
+
+## 📸 Screenshots
+
+<p align="center">
+  <img src="https://github.com/user-attachments/assets/1f5ffcc3-b5b2-4c90-8207-c4a8293d9b7e" alt="Vintage Theme" width="48%">
+  &nbsp; &nbsp;
+  <img src="https://github.com/user-attachments/assets/95574ef2-b285-444f-af9a-1c05101d4182" alt="Digital Theme" width="48%">
+</p>
+
+<p align="center">
+  <em>Left: Vintage Theme | Right: Digital Theme</em>
+</p>
+
+---
+
+## 🚀 Installation & Usage
+
+1. Include the MYETV Video Player files in your HTML.
+2. Include the `myetv-radio-plugin.js` script **after** the main player script.
+3. Initialize the plugin via the player's configuration object.
+
+### Basic Example
+
+```html
+<link rel="stylesheet" href="path/to/myetv-player.css">
+<script src="path/to/myetv-player.js"></script>
+
+<script src="path/to/myetv-radio-plugin.js"></script>
+
+<script>
+  var myPlayer = new MYETVvideoplayer('videoElementId', {
+      autoplay: true,
+      plugins: {
+          radio: {
+              apiUrl: 'api.php',         // required: the url of the JSON with all the radio station to load
+              theme: 'digital',          // 'vintage' or 'digital'
+              startChannel: 1,           // Default starting channel
+              statsApiUrl: 'https://mywebsite.com/radio/php/radio_stats.php', // Backend for live & history stats
+              statsPollInterval: 15000,  // Polling interval in ms (15s)
+              filter: {
+                  country: 'IT'          // Filter the country selectbox (optional)
+              }
+          }
+      }
+  });
+</script>
+
+```
+
+---
+
+## ⚙️ Configuration Options
+
+When defining the `radio` object inside the player's plugins configuration, you can pass the following options:
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `apiUrl` | `String` | `'api.php'` | The endpoint to fetch the JSON list of radio stations. |
+| `theme` | `String` | `'vintage'` | Sets the UI style. Accepted values: `'vintage'`, `'digital'`. |
+| `startChannel` | `Number` | `1` | The channel to tune into on first load (overridden if the user has a saved channel in memory). |
+| `showAllCountryOption` | `Boolean` | `true` | Show or hide the ALL option in the contry selectbox. |
+| `startCountry` | `String` | `''` | The initial selction in the country selectbox (e.g., `'US'` or `'IT'`) |
+| `filter.country` | `String` | `''` | 2-letter ISO code to filter the API stations (e.g., `'US'` or `'IT'`). |
+| `filter.language` | `String` | `''` | String to filter the API stations by language (e.g, `'English'` or `'Italian'`. |
+| `defaultIcon` | `String` | `''` | The default icon to show for the station and in the stations list. |
+| `tagIcons` | `Array` | `'[]'` | An array of icons related to the station tag; see below for examples |
+| `proxyUrl` | `String` | `''` | Optional proxy URL to bypass CORS issues for HTTP streams. |
+| `statsApiUrl` | `String` | `''` | Absolute path to the backend script handling the analytics JSON operations. |
+| `statsPollInterval` | `Number` | `15000` | Refresh rate in milliseconds for the live viewers counter. |
+
+The API url is the `api.php` file, linked to the JSON file with all the stream url of the radio stations in the repository this is the file `station_example.json` that you can use for your tests.
+
+The proxy option, for example proxy.php (already inside the repository), can be like this: `https://mywebsite.com/proxy.html?url=` and it can be used to stream an http file inside an https network.
+
+Icons option example:
+
+```javascript
+defaultIcon: '[https://www.mywebsite.com/plugins/radio/icons/radio-solid.png](https://www.mywebsite.com/plugins/radio/icons/radio-solid.png)',
+tagIcons: {
+    'news': '[https://www.mywebsite.com/plugins/radio/icons/newspaper-solid.png](https://www.mywebsite.com/plugins/radio/icons/newspaper-solid.png)',
+    'pop': '[https://www.mywebsite.com/plugins/radio/icons/headphones-solid.png](https://www.mywebsite.com/plugins/radio/icons/headphones-solid.png)',
+    'rock': '[https://www.mywebsite.com/plugins/radio/icons/bolt-lightning-solid.png](https://www.mywebsite.com/plugins/radio/icons/bolt-lightning-solid.png)',
+    'classical': '[https://www.mywebsite.com/plugins/radio/icons/music-solid.png](https://www.mywebsite.com/plugins/radio/icons/music-solid.png)',
+    'dance': '[https://www.mywebsite.com/plugins/radio/icons/compact-disc-solid.png](https://www.mywebsite.com/plugins/radio/icons/compact-disc-solid.png)',
+    'jazz': '[https://www.mywebsite.com/plugins/radio/icons/guitar-solid.png](https://www.mywebsite.com/plugins/radio/icons/guitar-solid.png)',
+    'sports': '[https://www.mywebsite.com/plugins/radio/icons/medal-solid.png](https://www.mywebsite.com/plugins/radio/icons/medal-solid.png)',
+    'religious': '[https://www.mywebsite.com/plugins/radio/icons/radio-solid.png](https://www.mywebsite.com/plugins/radio/icons/radio-solid.png)',
+    'various': '[https://www.mywebsite.com/plugins/radio/icons/radio-solid.png](https://www.mywebsite.com/plugins/radio/icons/radio-solid.png)'
+}
+
+```
+
+---
+
+## 🔌 Public API Methods
+
+Once initialized, you can control the Radio plugin programmatically by accessing its instance.
+
+| Method | Description |
+| --- | --- |
+| `tune(channelNumber)` | Jumps directly to the specified channel number. |
+| `play()` | Starts playback of the currently tuned station. |
+| `stop()` | Stops playback and clears the video source. |
+| `setTheme('themeName')` | Changes the visual theme on the fly (e.g., `setTheme('digital')`). |
+| `dispose()` | Safely removes the radio UI, unbinds all events, stops polling, and destroys the plugin instance. |
+
+**Example:**
+
+```javascript
+// Access the plugin instance (assuming the player exposes active plugins)
+var radioPlugin = myPlayer.getPlugin('radio'); // Use your player's specific method to get the plugin
+
+// Change channel to 5
+radioPlugin.tune(5);
+
+// Switch to vintage theme
+radioPlugin.setTheme('vintage');
+
+```
+
+---
+
+## 🎮 Controls
+
+* **Mouse / Touch**:
+* Drag the analog dial to tune (Vintage theme).
+* Click the `< TUNE >` buttons (Digital theme).
+* Click the Live Viewers / Total Views counter to open the Analytics history modal.
+
+
+* **Keyboard**: Use the `Left Arrow` and `Right Arrow` keys to zap between channels seamlessly.
+* **Control Bar**: Click the `RADIO LIST` button injected in the player's bottom bar to open the full station directory modal.
+* **Settings Gear**: Click the native player settings icon to toggle the "Remember Channel" feature.
+
+---
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome!
+Feel free to check [issues page](https://github.com/OskarCosimo/myetv-video-player-opensource).
+
+## 📝 License
+
+This project is open-source and available under the MIT License.
+
+Created by [MYETV.tv](https://www.myetv.tv) | [Oskar Cosimo](https://oskarcosimo.com)

package/plugins/radio/station_example.json

@@ -0,0 +1,47 @@
+[
+  {
+    "channel_id": 1,
+    "name": "Radio Example Pop (IT)",
+    "url": "https://stream.example.com/radio_it.mp3",
+    "url_resolved": "https://stream.example.com/radio_it.mp3",
+    "countrycode": "IT",
+    "language": "italian",
+    "tags": "pop, top40, news"
+  },
+  {
+    "channel_id": 2,
+    "name": "Classic Rock FM (US)",
+    "url": "https://stream.example.com/rock_us.aac",
+    "url_resolved": "https://stream.example.com/rock_us.aac",
+    "countrycode": "US",
+    "language": "english",
+    "tags": "rock, classic, 80s"
+  },
+  {
+    "channel_id": 3,
+    "name": "Smooth Jazz Lounge (UK)",
+    "url": "https://stream.example.com/jazz_uk.mp3",
+    "url_resolved": "https://stream.example.com/jazz_uk.mp3",
+    "countrycode": "GB",
+    "language": "english",
+    "tags": "jazz, chillout, lounge"
+  },
+  {
+    "channel_id": 4,
+    "name": "Chanson Française (FR)",
+    "url": "https://stream.example.com/chanson_fr.mp3",
+    "url_resolved": "https://stream.example.com/chanson_fr.mp3",
+    "countrycode": "FR",
+    "language": "french",
+    "tags": "chanson, acoustic, local"
+  },
+  {
+    "channel_id": 5,
+    "name": "Tokyo Synthwave (JP)",
+    "url": "https://stream.example.com/synth_jp.mp3",
+    "url_resolved": "https://stream.example.com/synth_jp.mp3",
+    "countrycode": "JP",
+    "language": "japanese",
+    "tags": "synthwave, retrowave, electronic"
+  }
+]

package/plugins/video-loading/myetv-video-loading-plugin.js

@@ -0,0 +1,157 @@
+/**
+ * MYETV Player - Video Loader Plugin
+ * File: myetv-video-loading-plugin.js
+ */
+(function () {
+    'use strict';
+
+    class VideoLoaderPlugin {
+        constructor(player, options = {}) {
+            this.player = player;
+            this.options = {
+                videoUrl: options.videoUrl || null,
+                timeout: options.timeout !== undefined ? options.timeout : 3000,
+                backgroundColor: options.backgroundColor || '#000',
+                muted: options.muted !== undefined ? options.muted : true,
+                // Customizable text for TOS compliance, with a safe default
+                loadingText: options.loadingText || 'Loading engine...'
+            };
+
+            this.loaderContainer = null;
+            this.loaderVideo = null;
+            // ADDED: Reference for the image element
+            this.loaderImage = null;
+        }
+
+        /**
+         * Blocks the main player queue until resolved
+         * @returns {Promise}
+         */
+        waitForCompletion() {
+            return new Promise((resolve) => {
+                if (!this.options.videoUrl) {
+                    resolve();
+                    return;
+                }
+                this.initUI(resolve);
+            });
+        }
+
+        /**
+         * Initialize the loader UI and start the countdown
+         */
+        initUI(resolvePromise) {
+            if (!this.player.container) {
+                resolvePromise();
+                return;
+            }
+
+            // Regex check to determine if the URL is an animated image or a video
+            const isImage = /\.(gif|webp|png|jpg|jpeg)(\?.*)?$/i.test(this.options.videoUrl);
+
+            this.loaderContainer = document.createElement('div');
+            this.loaderContainer.className = 'myetv-video-loader-overlay';
+
+            // Added display flex to ensure images are centered properly
+            this.loaderContainer.style.cssText = `
+                position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+                z-index: 999999; background-color: ${this.options.backgroundColor};
+                display: flex; align-items: center; justify-content: center;
+                transition: opacity 0.5s ease;
+            `;
+
+            if (isImage) {
+                // --- IMAGE BEHAVIOR ---
+                this.loaderImage = document.createElement('img');
+                this.loaderImage.src = this.options.videoUrl;
+                this.loaderImage.style.cssText = 'width: 100%; height: 100%; object-fit: cover; pointer-events: none; border: none;';
+                this.loaderContainer.appendChild(this.loaderImage);
+            } else {
+                // --- ORIGINAL VIDEO BEHAVIOR ---
+                this.loaderVideo = document.createElement('video');
+
+                this.loaderVideo.poster = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+                this.loaderVideo.autoplay = true;
+                this.loaderVideo.loop = true;
+                this.loaderVideo.muted = this.options.muted;
+                this.loaderVideo.playsInline = true;
+                this.loaderVideo.disablePictureInPicture = true;
+
+                if (this.options.muted) this.loaderVideo.setAttribute('muted', '');
+                this.loaderVideo.setAttribute('autoplay', '');
+                this.loaderVideo.setAttribute('playsinline', '');
+
+                this.loaderVideo.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border: none; pointer-events: none; background: transparent; transform: translateZ(0); -webkit-transform: translateZ(0);';
+
+                this.loaderContainer.appendChild(this.loaderVideo);
+
+                setTimeout(() => {
+                    if (this.loaderVideo) {
+                        this.loaderVideo.src = this.options.videoUrl;
+                        this.loaderVideo.load();
+
+                        const playPromise = this.loaderVideo.play();
+                        if (playPromise !== undefined) {
+                            playPromise.catch(() => {
+                                if (!this.options.muted) {
+                                    this.loaderVideo.muted = true;
+                                    this.loaderVideo.setAttribute('muted', '');
+                                    this.loaderVideo.play().catch(e => console.log('Loader play failed on TV:', e));
+                                }
+                            });
+                        }
+                    }
+                }, 50);
+            }
+
+            const loadingLabel = document.createElement('div');
+            loadingLabel.innerText = this.options.loadingText;
+            loadingLabel.style.cssText = `
+                position: absolute; bottom: 20px; right: 20px; 
+                background: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.8);
+                font-family: sans-serif; font-size: 11px; padding: 4px 8px; 
+                border-radius: 4px; z-index: 2; pointer-events: none;
+            `;
+
+            this.loaderContainer.appendChild(loadingLabel);
+            this.player.container.appendChild(this.loaderContainer);
+
+            setTimeout(() => {
+                this.finishAndUnlock(resolvePromise);
+            }, this.options.timeout);
+        }
+
+        /**
+         * Fades out and resolves the queue
+         */
+        finishAndUnlock(resolvePromise) {
+            // SIGNAL: Unlock the pipeline FIRST.
+            // This allows YouTube to silently instantiate underneath while the black screen fades.
+            resolvePromise();
+
+            if (this.loaderContainer) {
+                this.loaderContainer.style.opacity = '0';
+            }
+
+            setTimeout(() => {
+                if (this.loaderContainer && this.loaderContainer.parentNode) {
+                    this.loaderContainer.parentNode.removeChild(this.loaderContainer);
+                }
+                if (this.loaderVideo) {
+                    this.loaderVideo.pause();
+                    this.loaderVideo.removeAttribute('src');
+                    this.loaderVideo.load();
+                }
+                if (this.loaderImage) {
+                    // Clear RAM
+                    this.loaderImage.removeAttribute('src');
+                }
+            }, 500);
+        }
+    }
+
+    if (typeof window.registerMYETVPlugin === 'function') {
+        window.registerMYETVPlugin('videoloader', VideoLoaderPlugin);
+    }
+})();