Upload via Git Manager GUI - archive-video.php

Minecraft-Modern-Theme/archive-video.php

@@ -1,6 +1,7 @@
 <?php get_header(); ?>
 
 <style>
+/* Basis-Styles für Player */
 #yt-player-container {
     position: relative;
     width: 100%;
@@ -31,11 +32,108 @@
     width: 100%;
     height: 100%;
 }
+
+/* === NEU: Styles für das Livestream Popup (Lightbox) === */
+.livestream-lightbox {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10000;
+    display: none; /* Wird via JS auf flex gesetzt */
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.livestream-lightbox.is-open {
+    display: flex;
+    opacity: 1;
+}
+.livestream-lightbox-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(8px);
+}
+.livestream-lightbox-box {
+    position: relative;
+    width: 90%;
+    max-width: 1100px;
+    background: #1a1a1a;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    transform: translateY(20px);
+    transition: transform 0.3s ease;
+}
+.livestream-lightbox.is-open .livestream-lightbox-box {
+    transform: translateY(0);
+}
+.livestream-lightbox-head {
+    padding: 15px 25px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #222;
+    border-bottom: 1px solid #333;
+}
+.livestream-lightbox-title {
+    margin: 0;
+    font-size: 1.2rem;
+    color: #fff;
+}
+.livestream-lightbox-close {
+    background: none;
+    border: none;
+    color: #aaa;
+    font-size: 24px;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+.livestream-lightbox-close:hover {
+    color: #fff;
+}
+.livestream-lightbox-player {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    background: #000;
+}
+.livestream-lightbox-player iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+.livestream-lightbox-meta {
+    padding: 15px 25px;
+    background: #222;
+    text-align: right;
+}
+.livestream-lightbox-meta a {
+    color: #00dcff;
+    text-decoration: none;
+    font-weight: bold;
+}
+/* Klick-Indikator für die Karten */
+.video-livestream-list > div {
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+.video-livestream-list > div:hover {
+    transform: scale(1.02);
+}
 </style>
 
 <div class="container site-main">
     <div class="content-area">
-
         <div class="video-archive-container">
 
             <header class="page-header">
@@ -67,6 +165,23 @@
                 <?php endif; ?>
             </header>
 
+            <?php
+            $livestream_groups = mm_video_get_livestream_groups();
+            ?>
+            <?php if ( ! empty( $livestream_groups ) ) : ?>
+            <div class="video-livestream-section">
+                <h2 class="section-livestream-title">
+                    <span class="live-indicator"></span>
+                    <span><?php _e( 'JETZT LIVE', 'minecraft-modern-theme' ); ?></span>
+                </h2>
+                <div class="video-livestream-list">
+                    <?php foreach ( $livestream_groups as $group_index => $livestream_group ) : ?>
+                        <?php echo mm_video_render_livestream_group( $livestream_group, $group_index ); ?>
+                    <?php endforeach; ?>
+                </div>
+            </div>
+            <?php endif; ?>
+
             <?php
             $query = new WP_Query( array(
                 'post_type'      => 'mm_video',
@@ -128,7 +243,6 @@
                 <?php endwhile; wp_reset_postdata(); ?>
             </div>
 
-            <!-- Lightbox -->
             <div id="video-lightbox" class="video-lightbox" style="display:none;" aria-hidden="true">
                 <div class="video-lightbox-backdrop"></div>
                 <div class="video-lightbox-box">
@@ -159,26 +273,23 @@
             </div>
             <?php endif; ?>
 
-        </div><!-- .video-archive-container -->
+        </div>
     </div>
 </div>
 
-<!-- YouTube IFrame API -->
 <script src="https://www.youtube.com/iframe_api"></script>
 <script>
 var ytPlayer = null;
 var ytPlayerReady = false;
 var pendingVideoId = null;
+var livestreamPlayers = new Map();
+var livestreamPlayerCallbacks = [];
 
 function onYouTubeIframeAPIReady() {
     ytPlayer = new YT.Player('yt-player', {
         height: '100%',
         width: '100%',
-        playerVars: {
+        playerVars: { autoplay: 1, rel: 0, modestbranding: 1 },
-            autoplay: 1,
-            rel: 0,
-            modestbranding: 1,
-        },
         events: {
             onReady: function(e) {
                 ytPlayerReady = true;
@@ -189,6 +300,9 @@ function onYouTubeIframeAPIReady() {
             }
         }
     });
+
+    livestreamPlayerCallbacks.forEach(function(callback) { callback(); });
+    livestreamPlayerCallbacks = [];
 }
 
 document.addEventListener('DOMContentLoaded', function() {
@@ -204,19 +318,14 @@ document.addEventListener('DOMContentLoaded', function() {
 
     function buildOtherEmbed(url, title) {
         var t = (title||'Video').replace(/"/g,'&quot;');
-
         var viM = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
         if (viM) return '<iframe src="https://player.vimeo.com/video/'+viM[1]+'?autoplay=1&dnt=1" title="'+t+'" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>';
-
         var tvM = url.match(/twitch\.tv\/videos\/(\d+)/);
         if (tvM) return '<iframe src="https://player.twitch.tv/?video=v'+tvM[1]+'&parent='+location.hostname+'&autoplay=true" title="'+t+'" frameborder="0" allowfullscreen></iframe>';
-
         var tcM = url.match(/twitch\.tv\/([a-zA-Z0-9_]+)$/);
         if (tcM) return '<iframe src="https://player.twitch.tv/?channel='+tcM[1]+'&parent='+location.hostname+'&autoplay=true" title="'+t+'" frameborder="0" allowfullscreen></iframe>';
-
         if (/\.(mp4|webm|ogv)(\?.*)?$/i.test(url)) return '<video controls autoplay playsinline><source src="'+url+'" type="video/mp4"></video>';
-
+        return '<p style="color:#aaa;text-align:center;padding:30px;">Ungültige URL</p>';
-        return '<p style="color:var(--text-muted);text-align:center;padding:30px;">Ungültige URL</p>';
     }
 
     function openLb(url, title, type) {
@@ -228,17 +337,11 @@ document.addEventListener('DOMContentLoaded', function() {
         setTimeout(function(){ lb.classList.add('is-open'); }, 10);
 
         var ytId = extractYouTubeId(url);
-
         if (ytId) {
             otContainer.style.display = 'none';
             otContainer.innerHTML = '';
             ytContainer.style.display = 'block';
-
+            if (ytPlayerReady && ytPlayer) ytPlayer.loadVideoById(ytId); else pendingVideoId = ytId;
-            if (ytPlayerReady && ytPlayer) {
-                ytPlayer.loadVideoById(ytId);
-            } else {
-                pendingVideoId = ytId;
-            }
         } else {
             ytContainer.style.display = 'none';
             if (ytPlayerReady && ytPlayer) ytPlayer.stopVideo();
@@ -262,18 +365,16 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     document.querySelectorAll('.video-card-thumb').forEach(function(el) {
-        el.addEventListener('click', function() {
+        el.addEventListener('click', function() { openLb(this.dataset.url, this.dataset.title, this.dataset.type); });
-            openLb(this.dataset.url, this.dataset.title, this.dataset.type);
-        });
     });
 
-    var closeBtn = lb ? lb.querySelector('.video-lightbox-close') : null;
+    if (lb) {
-    var backdrop = lb ? lb.querySelector('.video-lightbox-backdrop') : null;
+        lb.querySelector('.video-lightbox-close').addEventListener('click', closeLb);
-    if (closeBtn) closeBtn.addEventListener('click', closeLb);
+        lb.querySelector('.video-lightbox-backdrop').addEventListener('click', closeLb);
-    if (backdrop)  backdrop.addEventListener('click', closeLb);
+    }
     document.addEventListener('keydown', function(e){ if (e.key==='Escape') closeLb(); });
 
-    // Kategorie-Filter
+    // Filter
     document.querySelectorAll('.video-filter-btn').forEach(function(btn) {
         btn.addEventListener('click', function() {
             document.querySelectorAll('.video-filter-btn').forEach(function(b){ b.classList.remove('active'); });
@@ -284,6 +385,76 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         });
     });
+
+    // === Livestream Lightbox System ===
+    var livestreamLightbox = document.createElement('div');
+    livestreamLightbox.id = 'livestream-lightbox';
+    livestreamLightbox.className = 'livestream-lightbox';
+    livestreamLightbox.setAttribute('aria-hidden', 'true');
+    livestreamLightbox.innerHTML = `
+        <div class="livestream-lightbox-backdrop"></div>
+        <div class="livestream-lightbox-box">
+            <div class="livestream-lightbox-head">
+                <h3 class="livestream-lightbox-title"></h3>
+                <button class="livestream-lightbox-close" aria-label="Schließen"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="livestream-lightbox-player"></div>
+            <div class="livestream-lightbox-meta"></div>
+        </div>
+    `;
+    document.body.appendChild(livestreamLightbox);
+
+    var lsLightbox = document.getElementById('livestream-lightbox');
+    var lsTitle = lsLightbox.querySelector('.livestream-lightbox-title');
+    var lsPlayer = lsLightbox.querySelector('.livestream-lightbox-player');
+    var lsMeta = lsLightbox.querySelector('.livestream-lightbox-meta');
+
+    function openLivestreamLightbox(embedUrl, title, profileUrl, platform) {
+        lsTitle.textContent = title || 'Livestream';
+        // Wir nutzen ein sauberes Iframe für das Popup
+        lsPlayer.innerHTML = '<iframe src="' + embedUrl + '" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
+        
+        var icon = platform === 'youtube' ? 'fab fa-youtube' : (platform === 'twitch' ? 'fab fa-twitch' : 'fas fa-play');
+        lsMeta.innerHTML = profileUrl ? '<a href="' + profileUrl + '" target="_blank" rel="noopener"><i class="' + icon + '"></i> Zum Kanal</a>' : '';
+        
+        lsLightbox.style.display = 'flex';
+        lsLightbox.setAttribute('aria-hidden', 'false');
+        document.body.style.overflow = 'hidden';
+        setTimeout(function() { lsLightbox.classList.add('is-open'); }, 10);
+    }
+
+    function closeLivestreamLightbox() {
+        lsLightbox.classList.remove('is-open');
+        setTimeout(function() {
+            lsLightbox.style.display = 'none';
+            lsLightbox.setAttribute('aria-hidden', 'true');
+            document.body.style.overflow = '';
+            lsPlayer.innerHTML = '';
+        }, 300);
+    }
+
+    lsLightbox.querySelector('.livestream-lightbox-close').addEventListener('click', closeLivestreamLightbox);
+    lsLightbox.querySelector('.livestream-lightbox-backdrop').addEventListener('click', closeLivestreamLightbox);
+
+    // Klick-Event für die "Jetzt Live" Karten
+    document.querySelectorAll('.video-livestream-list > div').forEach(function(card) {
+        card.addEventListener('click', function(e) {
+            // Falls auf den echten Button im Card geklickt wird, Standardverhalten lassen
+            if (e.target.closest('.btn-primary')) return;
+
+            e.preventDefault();
+            var iframe = card.querySelector('iframe');
+            var embedUrl = iframe ? iframe.src : '';
+            var title = card.querySelector('h3') ? card.querySelector('h3').textContent : 'Livestream';
+            var link = card.querySelector('.btn-primary') ? card.querySelector('.btn-primary').href : '';
+            
+            var platform = embedUrl.includes('twitch') ? 'twitch' : 'youtube';
+
+            if (embedUrl && !embedUrl.includes('about:blank')) {
+                openLivestreamLightbox(embedUrl, title, link, platform);
+            }
+        });
+    });
 });
 </script>