Upload via Git Manager GUI - archive-video.php
This commit is contained in:
@@ -1,290 +1,461 @@
|
|||||||
<?php get_header(); ?>
|
<?php get_header(); ?>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#yt-player-container {
|
/* Basis-Styles für Player */
|
||||||
position: relative;
|
#yt-player-container {
|
||||||
width: 100%;
|
position: relative;
|
||||||
padding-bottom: 56.25%; /* 16:9 */
|
width: 100%;
|
||||||
height: 0;
|
padding-bottom: 56.25%; /* 16:9 */
|
||||||
overflow: hidden;
|
height: 0;
|
||||||
}
|
overflow: hidden;
|
||||||
#yt-player-container iframe,
|
}
|
||||||
#yt-player-container #yt-player {
|
#yt-player-container iframe,
|
||||||
position: absolute;
|
#yt-player-container #yt-player {
|
||||||
top: 0;
|
position: absolute;
|
||||||
left: 0;
|
top: 0;
|
||||||
width: 100% !important;
|
left: 0;
|
||||||
height: 100% !important;
|
width: 100% !important;
|
||||||
}
|
height: 100% !important;
|
||||||
#other-player-container {
|
}
|
||||||
position: relative;
|
#other-player-container {
|
||||||
width: 100%;
|
position: relative;
|
||||||
padding-bottom: 56.25%;
|
width: 100%;
|
||||||
height: 0;
|
padding-bottom: 56.25%;
|
||||||
overflow: hidden;
|
height: 0;
|
||||||
}
|
overflow: hidden;
|
||||||
#other-player-container iframe,
|
}
|
||||||
#other-player-container video {
|
#other-player-container iframe,
|
||||||
position: absolute;
|
#other-player-container video {
|
||||||
top: 0;
|
position: absolute;
|
||||||
left: 0;
|
top: 0;
|
||||||
width: 100%;
|
left: 0;
|
||||||
height: 100%;
|
width: 100%;
|
||||||
}
|
height: 100%;
|
||||||
</style>
|
}
|
||||||
|
|
||||||
<div class="container site-main">
|
/* === NEU: Styles für das Livestream Popup (Lightbox) === */
|
||||||
<div class="content-area">
|
.livestream-lightbox {
|
||||||
|
position: fixed;
|
||||||
<div class="video-archive-container">
|
top: 0;
|
||||||
|
left: 0;
|
||||||
<header class="page-header">
|
width: 100%;
|
||||||
<h1 class="page-title">
|
height: 100%;
|
||||||
<i class="fas fa-play-circle"></i> <?php _e( 'Videos', 'minecraft-modern-theme' ); ?>
|
z-index: 10000;
|
||||||
</h1>
|
display: none; /* Wird via JS auf flex gesetzt */
|
||||||
<p class="page-description">
|
align-items: center;
|
||||||
<?php _e( 'Alle Videos auf einem Blick. Klicke auf ein Video um es direkt hier anzusehen.', 'minecraft-modern-theme' ); ?>
|
justify-content: center;
|
||||||
</p>
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
<?php
|
}
|
||||||
$categories = array();
|
.livestream-lightbox.is-open {
|
||||||
$all_vids = get_posts( array( 'post_type' => 'mm_video', 'posts_per_page' => -1, 'fields' => 'ids' ) );
|
display: flex;
|
||||||
foreach ( $all_vids as $vid_id ) {
|
opacity: 1;
|
||||||
$cat = get_post_meta( $vid_id, '_mm_video_category', true );
|
}
|
||||||
if ( $cat ) $categories[ $cat ] = $cat;
|
.livestream-lightbox-backdrop {
|
||||||
}
|
position: absolute;
|
||||||
if ( count( $categories ) > 1 ) : ?>
|
top: 0;
|
||||||
<div class="video-filter-bar">
|
left: 0;
|
||||||
<button class="video-filter-btn active" data-filter="all">
|
width: 100%;
|
||||||
<?php _e( 'Alle', 'minecraft-modern-theme' ); ?>
|
height: 100%;
|
||||||
</button>
|
background: rgba(0, 0, 0, 0.85);
|
||||||
<?php foreach ( $categories as $cat ) : ?>
|
backdrop-filter: blur(8px);
|
||||||
<button class="video-filter-btn" data-filter="<?php echo esc_attr( $cat ); ?>">
|
}
|
||||||
<?php echo esc_html( $cat ); ?>
|
.livestream-lightbox-box {
|
||||||
</button>
|
position: relative;
|
||||||
<?php endforeach; ?>
|
width: 90%;
|
||||||
</div>
|
max-width: 1100px;
|
||||||
<?php endif; ?>
|
background: #1a1a1a;
|
||||||
</header>
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
<?php
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||||
$query = new WP_Query( array(
|
transform: translateY(20px);
|
||||||
'post_type' => 'mm_video',
|
transition: transform 0.3s ease;
|
||||||
'posts_per_page' => -1,
|
}
|
||||||
'orderby' => 'menu_order date',
|
.livestream-lightbox.is-open .livestream-lightbox-box {
|
||||||
'order' => 'ASC',
|
transform: translateY(0);
|
||||||
) );
|
}
|
||||||
|
.livestream-lightbox-head {
|
||||||
if ( $query->have_posts() ) : ?>
|
padding: 15px 25px;
|
||||||
|
display: flex;
|
||||||
<div class="video-grid" id="video-grid">
|
justify-content: space-between;
|
||||||
<?php while ( $query->have_posts() ) : $query->the_post();
|
align-items: center;
|
||||||
$url = get_post_meta( get_the_ID(), '_mm_video_url', true );
|
background: #222;
|
||||||
$category = get_post_meta( get_the_ID(), '_mm_video_category', true );
|
border-bottom: 1px solid #333;
|
||||||
$thumb = get_the_post_thumbnail_url( get_the_ID(), 'medium_large' );
|
}
|
||||||
$type = $url ? mm_video_get_type( $url ) : 'unknown';
|
.livestream-lightbox-title {
|
||||||
|
margin: 0;
|
||||||
if ( ! $thumb && $url && $type === 'youtube' ) {
|
font-size: 1.2rem;
|
||||||
if ( preg_match( '/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $url, $m ) ) {
|
color: #fff;
|
||||||
$thumb = 'https://img.youtube.com/vi/' . $m[1] . '/maxresdefault.jpg';
|
}
|
||||||
}
|
.livestream-lightbox-close {
|
||||||
}
|
background: none;
|
||||||
|
border: none;
|
||||||
$platform_icons = array(
|
color: #aaa;
|
||||||
'youtube' => array( 'icon' => 'fab fa-youtube', 'color' => '#ff0000' ),
|
font-size: 24px;
|
||||||
'vimeo' => array( 'icon' => 'fab fa-vimeo-v', 'color' => '#1ab7ea' ),
|
cursor: pointer;
|
||||||
'twitch' => array( 'icon' => 'fab fa-twitch', 'color' => '#9146ff' ),
|
transition: color 0.2s;
|
||||||
'mp4' => array( 'icon' => 'fas fa-film', 'color' => '#aaa' ),
|
}
|
||||||
);
|
.livestream-lightbox-close:hover {
|
||||||
$platform = isset( $platform_icons[$type] ) ? $platform_icons[$type] : array( 'icon' => 'fas fa-play', 'color' => '#aaa' );
|
color: #fff;
|
||||||
?>
|
}
|
||||||
<div class="video-card" data-category="<?php echo esc_attr( $category ); ?>">
|
.livestream-lightbox-player {
|
||||||
<div class="video-card-thumb"
|
position: relative;
|
||||||
data-url="<?php echo esc_attr( $url ); ?>"
|
padding-bottom: 56.25%;
|
||||||
data-type="<?php echo esc_attr( $type ); ?>"
|
height: 0;
|
||||||
data-title="<?php echo esc_attr( get_the_title() ); ?>">
|
background: #000;
|
||||||
<?php if ( $thumb ) : ?>
|
}
|
||||||
<img src="<?php echo esc_url( $thumb ); ?>" alt="<?php echo esc_attr( get_the_title() ); ?>" loading="lazy">
|
.livestream-lightbox-player iframe {
|
||||||
<?php else : ?>
|
position: absolute;
|
||||||
<div class="video-card-no-thumb"><i class="fas fa-play-circle"></i></div>
|
top: 0;
|
||||||
<?php endif; ?>
|
left: 0;
|
||||||
<div class="video-card-hover">
|
width: 100%;
|
||||||
<i class="fas fa-play"></i>
|
height: 100%;
|
||||||
</div>
|
border: none;
|
||||||
<span class="video-platform-badge" style="color:<?php echo esc_attr($platform['color']); ?>">
|
}
|
||||||
<i class="<?php echo esc_attr($platform['icon']); ?>"></i>
|
.livestream-lightbox-meta {
|
||||||
</span>
|
padding: 15px 25px;
|
||||||
</div>
|
background: #222;
|
||||||
<div class="video-card-body">
|
text-align: right;
|
||||||
<h3 class="video-card-title"><?php the_title(); ?></h3>
|
}
|
||||||
<?php if ( has_excerpt() ) : ?>
|
.livestream-lightbox-meta a {
|
||||||
<p class="video-card-excerpt"><?php echo wp_trim_words( get_the_excerpt(), 12 ); ?></p>
|
color: #00dcff;
|
||||||
<?php endif; ?>
|
text-decoration: none;
|
||||||
<?php if ( $category ) : ?>
|
font-weight: bold;
|
||||||
<span class="video-card-tag"><?php echo esc_html( $category ); ?></span>
|
}
|
||||||
<?php endif; ?>
|
/* Klick-Indikator für die Karten */
|
||||||
</div>
|
.video-livestream-list > div {
|
||||||
</div>
|
cursor: pointer;
|
||||||
<?php endwhile; wp_reset_postdata(); ?>
|
transition: transform 0.2s ease;
|
||||||
</div>
|
}
|
||||||
|
.video-livestream-list > div:hover {
|
||||||
<!-- Lightbox -->
|
transform: scale(1.02);
|
||||||
<div id="video-lightbox" class="video-lightbox" style="display:none;" aria-hidden="true">
|
}
|
||||||
<div class="video-lightbox-backdrop"></div>
|
</style>
|
||||||
<div class="video-lightbox-box">
|
|
||||||
<div class="video-lightbox-head">
|
<div class="container site-main">
|
||||||
<h3 class="video-lightbox-title"></h3>
|
<div class="content-area">
|
||||||
<button class="video-lightbox-close" aria-label="<?php esc_attr_e('Schließen','minecraft-modern-theme'); ?>">
|
<div class="video-archive-container">
|
||||||
<i class="fas fa-times"></i>
|
|
||||||
</button>
|
<header class="page-header">
|
||||||
</div>
|
<h1 class="page-title">
|
||||||
<div class="video-lightbox-player">
|
<i class="fas fa-play-circle"></i> <?php _e( 'Videos', 'minecraft-modern-theme' ); ?>
|
||||||
<div id="yt-player-container" style="display:none;">
|
</h1>
|
||||||
<div id="yt-player"></div>
|
<p class="page-description">
|
||||||
</div>
|
<?php _e( 'Alle Videos auf einem Blick. Klicke auf ein Video um es direkt hier anzusehen.', 'minecraft-modern-theme' ); ?>
|
||||||
<div id="other-player-container" style="display:none;"></div>
|
</p>
|
||||||
</div>
|
|
||||||
</div>
|
<?php
|
||||||
</div>
|
$categories = array();
|
||||||
|
$all_vids = get_posts( array( 'post_type' => 'mm_video', 'posts_per_page' => -1, 'fields' => 'ids' ) );
|
||||||
<?php else : ?>
|
foreach ( $all_vids as $vid_id ) {
|
||||||
<div class="video-empty">
|
$cat = get_post_meta( $vid_id, '_mm_video_category', true );
|
||||||
<i class="fas fa-video-slash"></i>
|
if ( $cat ) $categories[ $cat ] = $cat;
|
||||||
<p><?php _e( 'Noch keine Videos vorhanden.', 'minecraft-modern-theme' ); ?></p>
|
}
|
||||||
<?php if ( current_user_can('publish_posts') ) : ?>
|
if ( count( $categories ) > 1 ) : ?>
|
||||||
<a href="<?php echo esc_url( admin_url('post-new.php?post_type=mm_video') ); ?>" class="btn-primary">
|
<div class="video-filter-bar">
|
||||||
<i class="fas fa-plus"></i> <?php _e('Erstes Video hinzufügen','minecraft-modern-theme'); ?>
|
<button class="video-filter-btn active" data-filter="all">
|
||||||
</a>
|
<?php _e( 'Alle', 'minecraft-modern-theme' ); ?>
|
||||||
<?php endif; ?>
|
</button>
|
||||||
</div>
|
<?php foreach ( $categories as $cat ) : ?>
|
||||||
<?php endif; ?>
|
<button class="video-filter-btn" data-filter="<?php echo esc_attr( $cat ); ?>">
|
||||||
|
<?php echo esc_html( $cat ); ?>
|
||||||
</div><!-- .video-archive-container -->
|
</button>
|
||||||
</div>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
<!-- YouTube IFrame API -->
|
</header>
|
||||||
<script src="https://www.youtube.com/iframe_api"></script>
|
|
||||||
<script>
|
<?php
|
||||||
var ytPlayer = null;
|
$livestream_groups = mm_video_get_livestream_groups();
|
||||||
var ytPlayerReady = false;
|
?>
|
||||||
var pendingVideoId = null;
|
<?php if ( ! empty( $livestream_groups ) ) : ?>
|
||||||
|
<div class="video-livestream-section">
|
||||||
function onYouTubeIframeAPIReady() {
|
<h2 class="section-livestream-title">
|
||||||
ytPlayer = new YT.Player('yt-player', {
|
<span class="live-indicator"></span>
|
||||||
height: '100%',
|
<span><?php _e( 'JETZT LIVE', 'minecraft-modern-theme' ); ?></span>
|
||||||
width: '100%',
|
</h2>
|
||||||
playerVars: {
|
<div class="video-livestream-list">
|
||||||
autoplay: 1,
|
<?php foreach ( $livestream_groups as $group_index => $livestream_group ) : ?>
|
||||||
rel: 0,
|
<?php echo mm_video_render_livestream_group( $livestream_group, $group_index ); ?>
|
||||||
modestbranding: 1,
|
<?php endforeach; ?>
|
||||||
},
|
</div>
|
||||||
events: {
|
</div>
|
||||||
onReady: function(e) {
|
<?php endif; ?>
|
||||||
ytPlayerReady = true;
|
|
||||||
if (pendingVideoId) {
|
<?php
|
||||||
e.target.loadVideoById(pendingVideoId);
|
$query = new WP_Query( array(
|
||||||
pendingVideoId = null;
|
'post_type' => 'mm_video',
|
||||||
}
|
'posts_per_page' => -1,
|
||||||
}
|
'orderby' => 'menu_order date',
|
||||||
}
|
'order' => 'ASC',
|
||||||
});
|
) );
|
||||||
}
|
|
||||||
|
if ( $query->have_posts() ) : ?>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
var lb = document.getElementById('video-lightbox');
|
<div class="video-grid" id="video-grid">
|
||||||
var lbTitle = lb ? lb.querySelector('.video-lightbox-title') : null;
|
<?php while ( $query->have_posts() ) : $query->the_post();
|
||||||
var ytContainer = document.getElementById('yt-player-container');
|
$url = get_post_meta( get_the_ID(), '_mm_video_url', true );
|
||||||
var otContainer = document.getElementById('other-player-container');
|
$category = get_post_meta( get_the_ID(), '_mm_video_category', true );
|
||||||
|
$thumb = get_the_post_thumbnail_url( get_the_ID(), 'medium_large' );
|
||||||
function extractYouTubeId(url) {
|
$type = $url ? mm_video_get_type( $url ) : 'unknown';
|
||||||
var m = url.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
|
|
||||||
return m ? m[1] : null;
|
if ( ! $thumb && $url && $type === 'youtube' ) {
|
||||||
}
|
if ( preg_match( '/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $url, $m ) ) {
|
||||||
|
$thumb = 'https://img.youtube.com/vi/' . $m[1] . '/maxresdefault.jpg';
|
||||||
function buildOtherEmbed(url, title) {
|
}
|
||||||
var t = (title||'Video').replace(/"/g,'"');
|
}
|
||||||
|
|
||||||
var viM = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
|
$platform_icons = array(
|
||||||
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>';
|
'youtube' => array( 'icon' => 'fab fa-youtube', 'color' => '#ff0000' ),
|
||||||
|
'vimeo' => array( 'icon' => 'fab fa-vimeo-v', 'color' => '#1ab7ea' ),
|
||||||
var tvM = url.match(/twitch\.tv\/videos\/(\d+)/);
|
'twitch' => array( 'icon' => 'fab fa-twitch', 'color' => '#9146ff' ),
|
||||||
if (tvM) return '<iframe src="https://player.twitch.tv/?video=v'+tvM[1]+'&parent='+location.hostname+'&autoplay=true" title="'+t+'" frameborder="0" allowfullscreen></iframe>';
|
'mp4' => array( 'icon' => 'fas fa-film', 'color' => '#aaa' ),
|
||||||
|
);
|
||||||
var tcM = url.match(/twitch\.tv\/([a-zA-Z0-9_]+)$/);
|
$platform = isset( $platform_icons[$type] ) ? $platform_icons[$type] : array( 'icon' => 'fas fa-play', 'color' => '#aaa' );
|
||||||
if (tcM) return '<iframe src="https://player.twitch.tv/?channel='+tcM[1]+'&parent='+location.hostname+'&autoplay=true" title="'+t+'" frameborder="0" allowfullscreen></iframe>';
|
?>
|
||||||
|
<div class="video-card" data-category="<?php echo esc_attr( $category ); ?>">
|
||||||
if (/\.(mp4|webm|ogv)(\?.*)?$/i.test(url)) return '<video controls autoplay playsinline><source src="'+url+'" type="video/mp4"></video>';
|
<div class="video-card-thumb"
|
||||||
|
data-url="<?php echo esc_attr( $url ); ?>"
|
||||||
return '<p style="color:var(--text-muted);text-align:center;padding:30px;">Ungültige URL</p>';
|
data-type="<?php echo esc_attr( $type ); ?>"
|
||||||
}
|
data-title="<?php echo esc_attr( get_the_title() ); ?>">
|
||||||
|
<?php if ( $thumb ) : ?>
|
||||||
function openLb(url, title, type) {
|
<img src="<?php echo esc_url( $thumb ); ?>" alt="<?php echo esc_attr( get_the_title() ); ?>" loading="lazy">
|
||||||
if (!lb) return;
|
<?php else : ?>
|
||||||
if (lbTitle) lbTitle.textContent = title || '';
|
<div class="video-card-no-thumb"><i class="fas fa-play-circle"></i></div>
|
||||||
lb.style.display = 'flex';
|
<?php endif; ?>
|
||||||
lb.setAttribute('aria-hidden','false');
|
<div class="video-card-hover">
|
||||||
document.body.style.overflow = 'hidden';
|
<i class="fas fa-play"></i>
|
||||||
setTimeout(function(){ lb.classList.add('is-open'); }, 10);
|
</div>
|
||||||
|
<span class="video-platform-badge" style="color:<?php echo esc_attr($platform['color']); ?>">
|
||||||
var ytId = extractYouTubeId(url);
|
<i class="<?php echo esc_attr($platform['icon']); ?>"></i>
|
||||||
|
</span>
|
||||||
if (ytId) {
|
</div>
|
||||||
otContainer.style.display = 'none';
|
<div class="video-card-body">
|
||||||
otContainer.innerHTML = '';
|
<h3 class="video-card-title"><?php the_title(); ?></h3>
|
||||||
ytContainer.style.display = 'block';
|
<?php if ( has_excerpt() ) : ?>
|
||||||
|
<p class="video-card-excerpt"><?php echo wp_trim_words( get_the_excerpt(), 12 ); ?></p>
|
||||||
if (ytPlayerReady && ytPlayer) {
|
<?php endif; ?>
|
||||||
ytPlayer.loadVideoById(ytId);
|
<?php if ( $category ) : ?>
|
||||||
} else {
|
<span class="video-card-tag"><?php echo esc_html( $category ); ?></span>
|
||||||
pendingVideoId = ytId;
|
<?php endif; ?>
|
||||||
}
|
</div>
|
||||||
} else {
|
</div>
|
||||||
ytContainer.style.display = 'none';
|
<?php endwhile; wp_reset_postdata(); ?>
|
||||||
if (ytPlayerReady && ytPlayer) ytPlayer.stopVideo();
|
</div>
|
||||||
otContainer.style.display = 'block';
|
|
||||||
otContainer.innerHTML = buildOtherEmbed(url, title);
|
<div id="video-lightbox" class="video-lightbox" style="display:none;" aria-hidden="true">
|
||||||
}
|
<div class="video-lightbox-backdrop"></div>
|
||||||
}
|
<div class="video-lightbox-box">
|
||||||
|
<div class="video-lightbox-head">
|
||||||
function closeLb() {
|
<h3 class="video-lightbox-title"></h3>
|
||||||
if (!lb) return;
|
<button class="video-lightbox-close" aria-label="<?php esc_attr_e('Schließen','minecraft-modern-theme'); ?>">
|
||||||
lb.classList.remove('is-open');
|
<i class="fas fa-times"></i>
|
||||||
setTimeout(function(){
|
</button>
|
||||||
lb.style.display = 'none';
|
</div>
|
||||||
lb.setAttribute('aria-hidden','true');
|
<div class="video-lightbox-player">
|
||||||
document.body.style.overflow = '';
|
<div id="yt-player-container" style="display:none;">
|
||||||
if (ytPlayerReady && ytPlayer) ytPlayer.stopVideo();
|
<div id="yt-player"></div>
|
||||||
ytContainer.style.display = 'none';
|
</div>
|
||||||
otContainer.innerHTML = '';
|
<div id="other-player-container" style="display:none;"></div>
|
||||||
otContainer.style.display = 'none';
|
</div>
|
||||||
}, 300);
|
</div>
|
||||||
}
|
</div>
|
||||||
|
|
||||||
document.querySelectorAll('.video-card-thumb').forEach(function(el) {
|
<?php else : ?>
|
||||||
el.addEventListener('click', function() {
|
<div class="video-empty">
|
||||||
openLb(this.dataset.url, this.dataset.title, this.dataset.type);
|
<i class="fas fa-video-slash"></i>
|
||||||
});
|
<p><?php _e( 'Noch keine Videos vorhanden.', 'minecraft-modern-theme' ); ?></p>
|
||||||
});
|
<?php if ( current_user_can('publish_posts') ) : ?>
|
||||||
|
<a href="<?php echo esc_url( admin_url('post-new.php?post_type=mm_video') ); ?>" class="btn-primary">
|
||||||
var closeBtn = lb ? lb.querySelector('.video-lightbox-close') : null;
|
<i class="fas fa-plus"></i> <?php _e('Erstes Video hinzufügen','minecraft-modern-theme'); ?>
|
||||||
var backdrop = lb ? lb.querySelector('.video-lightbox-backdrop') : null;
|
</a>
|
||||||
if (closeBtn) closeBtn.addEventListener('click', closeLb);
|
<?php endif; ?>
|
||||||
if (backdrop) backdrop.addEventListener('click', closeLb);
|
</div>
|
||||||
document.addEventListener('keydown', function(e){ if (e.key==='Escape') closeLb(); });
|
<?php endif; ?>
|
||||||
|
|
||||||
// Kategorie-Filter
|
</div>
|
||||||
document.querySelectorAll('.video-filter-btn').forEach(function(btn) {
|
</div>
|
||||||
btn.addEventListener('click', function() {
|
</div>
|
||||||
document.querySelectorAll('.video-filter-btn').forEach(function(b){ b.classList.remove('active'); });
|
|
||||||
this.classList.add('active');
|
<script src="https://www.youtube.com/iframe_api"></script>
|
||||||
var f = this.dataset.filter;
|
<script>
|
||||||
document.querySelectorAll('.video-card').forEach(function(c) {
|
var ytPlayer = null;
|
||||||
c.style.display = (f === 'all' || c.dataset.category === f) ? '' : 'none';
|
var ytPlayerReady = false;
|
||||||
});
|
var pendingVideoId = null;
|
||||||
});
|
var livestreamPlayers = new Map();
|
||||||
});
|
var livestreamPlayerCallbacks = [];
|
||||||
});
|
|
||||||
</script>
|
function onYouTubeIframeAPIReady() {
|
||||||
|
ytPlayer = new YT.Player('yt-player', {
|
||||||
|
height: '100%',
|
||||||
|
width: '100%',
|
||||||
|
playerVars: { autoplay: 1, rel: 0, modestbranding: 1 },
|
||||||
|
events: {
|
||||||
|
onReady: function(e) {
|
||||||
|
ytPlayerReady = true;
|
||||||
|
if (pendingVideoId) {
|
||||||
|
e.target.loadVideoById(pendingVideoId);
|
||||||
|
pendingVideoId = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
livestreamPlayerCallbacks.forEach(function(callback) { callback(); });
|
||||||
|
livestreamPlayerCallbacks = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
var lb = document.getElementById('video-lightbox');
|
||||||
|
var lbTitle = lb ? lb.querySelector('.video-lightbox-title') : null;
|
||||||
|
var ytContainer = document.getElementById('yt-player-container');
|
||||||
|
var otContainer = document.getElementById('other-player-container');
|
||||||
|
|
||||||
|
function extractYouTubeId(url) {
|
||||||
|
var m = url.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
|
||||||
|
return m ? m[1] : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildOtherEmbed(url, title) {
|
||||||
|
var t = (title||'Video').replace(/"/g,'"');
|
||||||
|
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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
function openLb(url, title, type) {
|
||||||
|
if (!lb) return;
|
||||||
|
if (lbTitle) lbTitle.textContent = title || '';
|
||||||
|
lb.style.display = 'flex';
|
||||||
|
lb.setAttribute('aria-hidden','false');
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
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;
|
||||||
|
} else {
|
||||||
|
ytContainer.style.display = 'none';
|
||||||
|
if (ytPlayerReady && ytPlayer) ytPlayer.stopVideo();
|
||||||
|
otContainer.style.display = 'block';
|
||||||
|
otContainer.innerHTML = buildOtherEmbed(url, title);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeLb() {
|
||||||
|
if (!lb) return;
|
||||||
|
lb.classList.remove('is-open');
|
||||||
|
setTimeout(function(){
|
||||||
|
lb.style.display = 'none';
|
||||||
|
lb.setAttribute('aria-hidden','true');
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
if (ytPlayerReady && ytPlayer) ytPlayer.stopVideo();
|
||||||
|
ytContainer.style.display = 'none';
|
||||||
|
otContainer.innerHTML = '';
|
||||||
|
otContainer.style.display = 'none';
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll('.video-card-thumb').forEach(function(el) {
|
||||||
|
el.addEventListener('click', function() { openLb(this.dataset.url, this.dataset.title, this.dataset.type); });
|
||||||
|
});
|
||||||
|
|
||||||
|
if (lb) {
|
||||||
|
lb.querySelector('.video-lightbox-close').addEventListener('click', closeLb);
|
||||||
|
lb.querySelector('.video-lightbox-backdrop').addEventListener('click', closeLb);
|
||||||
|
}
|
||||||
|
document.addEventListener('keydown', function(e){ if (e.key==='Escape') closeLb(); });
|
||||||
|
|
||||||
|
// 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'); });
|
||||||
|
this.classList.add('active');
|
||||||
|
var f = this.dataset.filter;
|
||||||
|
document.querySelectorAll('.video-card').forEach(function(c) {
|
||||||
|
c.style.display = (f === 'all' || c.dataset.category === f) ? '' : 'none';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// === 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>
|
||||||
|
|
||||||
<?php get_footer(); ?>
|
<?php get_footer(); ?>
|
||||||
Reference in New Issue
Block a user