vers. 2.4.0

data/changelog.xml

@@ -2,6 +2,14 @@
 
 <changelog>
 
+    <version>
+        <number>2.4.0</number>
+        <logs>
+            <log>Implementato il player video dedicato per la riproduzione dei canali visivi.</log>
+            <log>Correzione e bugfix di problematiche varie.</log>
+        </logs>
+    </version>
+
     <version>
         <number>2.3.0</number>
         <logs>

data/tv.xml

@@ -14,8 +14,8 @@
         <id>1</id>
         <name>Rc105 TV</name>
         <logo>https://www.radiocitta105.it/wp-content/uploads/2020/06/26168468_1590103344416186_7025872599153073152_n-1.png</logo>
-        <stream>https://webtv.rpigroup.it/e1e55a4b-abec-4043-8f08-e2105b48b59b.m3u8</stream>
+        <stream>https://tv.rpigroup.net/memfs/a9699134-efb3-4932-b8db-5a49ae214031.m3u8</stream>
-        <poster>https://webtv.rpigroup.it/memfs/e1e55a4b-abec-4043-8f08-e2105b48b59b.jpg</poster>
+        <poster>https://tv.rpigroup.net/memfs/a9699134-efb3-4932-b8db-5a49ae214031.jpg</poster>
     </station>
 
 </tv>

js/app.js

@@ -596,7 +596,127 @@ document.addEventListener('DOMContentLoaded', function () {
      */
     function initializeTVPlayer() {
         console.log('TV Player inizializzato');
-        // Implementare logica specifica per TV se necessario
+
+        const video = document.getElementById('tvVideoPlayer');
+        if (!video) {
+            console.log('Elemento video TV non trovato');
+            return;
+        }
+
+        // Cleanup istanza precedente se esiste
+        if (video.hlsInstance) {
+            video.hlsInstance.destroy();
+            delete video.hlsInstance;
+        }
+
+        const videoSrc = video.getAttribute('data-src');
+        console.log('Video Source:', videoSrc);
+
+        if (!videoSrc) {
+            console.error('Nessuna sorgente video specificata in data-src');
+            return;
+        }
+
+        // Creazione elemento per errori se non esiste già
+        let errorDisplay = video.parentNode.querySelector('.tv-error-display');
+        if (!errorDisplay) {
+            errorDisplay = document.createElement('div');
+            errorDisplay.className = 'tv-error-display';
+            errorDisplay.style.display = 'none';
+            errorDisplay.style.position = 'absolute';
+            errorDisplay.style.top = '50%';
+            errorDisplay.style.left = '50%';
+            errorDisplay.style.transform = 'translate(-50%, -50%)';
+            errorDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+            errorDisplay.style.color = '#fff';
+            errorDisplay.style.padding = '20px';
+            errorDisplay.style.borderRadius = '8px';
+            errorDisplay.style.textAlign = 'center';
+            errorDisplay.style.zIndex = '2000';
+            errorDisplay.style.maxWidth = '90%';
+            if (video.parentNode) {
+                video.parentNode.appendChild(errorDisplay);
+                // Assicurati che il parent sia relative per il posizionamento absolute
+                if (getComputedStyle(video.parentNode).position === 'static') {
+                    video.parentNode.style.position = 'relative';
+                }
+            }
+        }
+
+        function showError(msg, details) {
+            console.error(msg, details);
+            errorDisplay.innerHTML = '<strong>Errore:</strong><br>' + msg + (details ? '<br><small>' + details + '</small>' : '');
+            errorDisplay.style.display = 'block';
+        }
+
+        // Controllo libreria HLS
+        if (typeof Hls === 'undefined') {
+            // Riprova tra poco se magari sta ancora caricando
+            setTimeout(() => {
+                if (typeof Hls === 'undefined') {
+                    showError('Libreria HLS non caricata correttamente.');
+                } else {
+                    initializeTVPlayer(); // Riprova inizializzazione
+                }
+            }, 500);
+            return;
+        }
+
+        if (Hls.isSupported()) {
+            console.log('HLS Supported - Loading stream');
+            var hls = new Hls({
+                debug: false,
+                enableWorker: true
+            });
+
+            hls.loadSource(videoSrc);
+            hls.attachMedia(video);
+
+            hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                console.log('TV Manifest Parsed - Ready to play');
+                var playPromise = video.play();
+                if (playPromise !== undefined) {
+                    playPromise.catch(error => {
+                        console.log('Autoplay blocked or failed:', error);
+                    });
+                }
+            });
+
+            // Gestione errori estesa
+            hls.on(Hls.Events.ERROR, function (event, data) {
+                console.warn('HLS Error:', data);
+                if (data.fatal) {
+                    switch (data.type) {
+                        case Hls.ErrorTypes.NETWORK_ERROR:
+                            console.log('Network error, recovering...');
+                            hls.startLoad();
+                            break;
+                        case Hls.ErrorTypes.MEDIA_ERROR:
+                            console.log('Media error, recovering...');
+                            hls.recoverMediaError();
+                            break;
+                        default:
+                            showError('Errore fatale riproduzione.', data.type);
+                            hls.destroy();
+                            break;
+                    }
+                }
+            });
+
+            video.hlsInstance = hls;
+
+        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+            console.log('Native HLS Supported (Safari/iOS)');
+            video.src = videoSrc;
+            video.addEventListener('loadedmetadata', function () {
+                video.play().catch(e => console.log("Autoplay iOS prevented"));
+            });
+            video.addEventListener('error', function (e) {
+                showError('Errore riproduzione nativa.', e.message);
+            });
+        } else {
+            showError('Il tuo browser non supporta HLS.');
+        }
     }
 
     /**

pages/page/player_tv.php

@@ -0,0 +1,50 @@
+<?php
+// Assicurati che $station sia definito (dovrebbe essere passato da mobile.php)
+if (!isset($station) || empty($station)) {
+    echo '<div class="alert alert-danger">Errore: Stazione TV non trovata.</div>';
+    return;
+}
+
+$station_id = (string)$station->id;
+$station_name = (string)$station->name;
+$station_logo = (string)$station->logo;
+$station_stream = (string)$station->stream;
+$station_poster = isset($station->poster) ? (string)$station->poster : '';
+?>
+
+<!-- Container player con sfondo bianco -->
+<div class="tv-player-container" style="background-color: #ffffff;height: calc(100% - 217px);position: absolute;left: calc(50%);display: flex;flex-direction: column;max-width: 750px;transform: translateX(-50%);width: 100%;">
+    
+    <!-- Header semplice con pulsante indietro e nome -->
+    <div class="tv-header" style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
+        <div class="left-controls" style="display: flex; align-items: center;">
+            <a href="<?php echo $base_path; ?>/tv" data-page="tv" class="linkBox nav-link" style="color: #333; display: flex; align-items: center; text-decoration: none;">
+                <span class="material-icons" style="font-size: 28px;">arrow_back</span>
+            </a>
+            <span style="font-size: 18px; font-weight: 600; color: #333; margin-left: 15px;"><?php echo $station_name; ?></span>
+        </div>
+        
+        <?php if(!empty($station_logo)): ?>
+        <div class="right-controls">
+            <img src="<?php echo $station_logo; ?>" alt="Logo" style="height: 30px; width: auto;">
+        </div>
+        <?php endif; ?>
+    </div>
+
+    <!-- Area Video -->
+    <div class="video-wrapper" style="flex: 1; display: flex; align-items: center; justify-content: center; background-color: #000;">
+        <video id="tvVideoPlayer" 
+               class="video-js" 
+               controls 
+               playsinline 
+               data-src="<?php echo $station_stream; ?>"
+               poster="<?php echo $station_poster; ?>"
+               style="width: 100%; max-width: 100%; max-height: 100vh; aspect-ratio: 16/9;">
+            <p class="vjs-no-js">
+                To view this video please enable JavaScript, and consider upgrading to a web browser that
+                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
+            </p>
+        </video>
+    </div>
+
+</div>

pages/page/tv.php

@@ -1,12 +1,27 @@
 <?php header('Content-Type: text/html; charset=UTF-8'); ?>
 
+<?php
+// views/home.php - Vista della pagina principale
+$stations = loadTvStations();
+?>
+
 <h1 class="titlePage">TV</h1>
-<p class="subtitlePage">Guarda in streaming <b>RC105 TV</b></p>
+<p class="subtitlePage">Seleziona la webtv che vuoi guardare</p>
 
 <hr>
 
-<div class="tec">
+<div class="stationList">
-    <iframe src="https://tv.rpigroup.net/a9699134-efb3-4932-b8db-5a49ae214031.html" style="width:100%; height: 225px;" frameborder="no" scrolling="no" allowfullscreen="true"></iframe>
+    <div class="row g-2">
+        <?php foreach ($stations as $station): ?>
+        <div class="col-6">
+            <div class="stationCard <?php if((string)$station->thematic === 'true'){echo "isthematic";} ?>" data-id="<?php echo $station->id; ?>">
+                <a href="<?php echo $base_path; ?>/playtv/<?php echo $station->id; ?>" data-page="playtv/<?php echo $station->id; ?>" class="nav-link stationLink">
+                    <img src="<?php echo $station->logo; ?>" alt="<?php echo $station->name; ?>" class="stationLogo">
+                </a>
+            </div>
+        </div>
+        <?php endforeach; ?>
+    </div>
 </div>
 
 <a href="<?php echo $base_path; ?>/home" data-page="home" class="linkBox mt-3">

static/head.php

@@ -39,8 +39,9 @@ header('Referrer-Policy: strict-origin-when-cross-origin');
     <link rel="stylesheet" href="<?=$base_path?>/css/style.css?v=<?=$version_app?>">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="<?=$base_path?>/css/animation.css?v=<?=$version_app?>">
-    <!-- <script src="https://code.jquery.com/jquery-2.2.4.js"></script> -->
+    <script src="https://code.jquery.com/jquery-2.2.4.js?v=<?=$version_app?>"></script>
-    <script src="<?=$base_path?>/js/bootstrap.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+    <script src="<?=$base_path?>/js/bootstrap.js?v=<?=$version_app?>"></script>
     <script>
         // Passa il percorso base a JavaScript
         var BASE_PATH = "<?=$base_path?>";