File: /var/www/html/WPKedushasShabbos/wp-content/themes/kedushas/single-video_series.php
<?php
get_header();
$selected_post = get_the_ID();
?>
<section class="inner-banner-sec">
<video class="banner-media" autoplay loop>
<source src="<?php echo get_template_directory_uri(); ?>/video/publication.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="overlay"></div>
<div class="container custom-container">
<div class="title-block">
<h2>Your Journey into the Beauty of Shabbos</h2>
<p>Join us on a transformative journey into the beauty and depth of Shabbos with our special video
series. Each week, delve into the richness of Shabbos and explore the customs, traditions, and
significance of the various facets of the holy day. Be guided towards a deeper connection with
Shabbos Kodesh, igniting your soul and enriching your life.</p>
</div>
</div>
<div class="banner-logo vid-sec">
<lottie-player src="/wp-content/themes/kedushas/lottie/animation.json" background="transparent" speed="1" loop
autoplay id="lottie-player">
</lottie-player>
<audio id="radio-stream" autoplay>
<source src="https://shabbos2023.radioca.st/stream" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</section>
<section class="inner-tab-sec">
<!-- <div class="container custom-container-1500"> -->
<div class="container custom-container-1200">
<div class="inner-tab-cover">
<div class="video-tab-cover">
<div class="video-tab-wrapper">
<div class="left-btn-block">
<!-- <div class="nav tab-btn-block nav-pills tabSlider" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<?php
$selected_post = get_the_ID();
$args = array(
'post_type' => 'video_series', // Or the custom post type slug you're using
'posts_per_page' => -1, // To display all posts, adjust as needed
);
$query = new WP_Query($args);
// Check if there are any posts
if ($query->have_posts()):
if ($selected_post) {
$is_active = ($selected_post) ? 'active' : '';
} else {
$is_active = ($query->current_post == 0) ? 'active' : '';
}
// Loop through the posts
while ($query->have_posts()):
$query->the_post();
//echo get_the_ID();
$pdf_url = get_field('video_document');
$avatar = get_field('avatar');
$is_active = ($selected_post == get_the_ID()) ? 'active' : '';
?>
<button class="nav-link tab-btn <?php echo $is_active; ?>"
id="v-pills-<?php echo get_the_ID(); ?>-tab"
data-bs-toggle="pill"
data-bs-target="#v-pills-<?php echo get_the_ID(); ?>"
type="button"
role="tab"
aria-controls="v-pills-<?php echo get_the_ID(); ?>"
aria-selected="true" data-pdf-url="<?php echo esc_url($pdf_url['url']); ?>">
<div class="icon">
<img src="<?php echo esc_url($avatar['url']); ?>" alt="">
</div>
<div class="data-label">
<?php the_title(); ?>
</div>
</button>
<?php
endwhile;
wp_reset_postdata();
else:
echo '<p>No publications found.</p>';
endif;
?>
</div> -->
<div class="nav tab-btn-block nav-pills tabSlider" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
<?php
$selected_post = get_the_ID();
$args = array(
'post_type' => 'video_series', // Change to your custom post type
'posts_per_page' => -1, // Display all posts
);
$query = new WP_Query($args);
$posts = [];
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$posts[] = [
'id' => get_the_ID(),
'title' => get_the_title(),
'pdf_url' => get_field('video_document')['url'] ?? '',
'avatar' => get_field('avatar')['url'] ?? '',
];
}
}
wp_reset_postdata();
// Move selected post to the top of the list
usort($posts, function ($a, $b) use ($selected_post) {
return ($a['id'] == $selected_post) ? -1 : 1;
});
foreach ($posts as $index => $post) {
$is_active = ($post['id'] == $selected_post) ? 'active' : '';
?>
<button class="nav-link tab-btn <?php echo $is_active; ?>" id="v-pills-<?php echo $post['id']; ?>-tab"
data-bs-toggle="pill" data-bs-target="#v-pills-<?php echo $post['id']; ?>" type="button" role="tab"
aria-controls="v-pills-<?php echo $post['id']; ?>"
aria-selected="<?php echo ($is_active) ? 'true' : 'false'; ?>"
data-pdf-url="<?php echo esc_url($post['pdf_url']); ?>">
<div class="icon">
<img src="<?php echo esc_url($post['avatar']); ?>" alt="">
</div>
<div class="data-label">
<?php echo esc_html($post['title']); ?>
</div>
</button>
<?php
}
?>
</div>
</div>
<div class="right-content-block">
<div id="ajax-video-tab-content" class="tab-content">
<div class="tab-pane fade active show" id="v-pills-<?php echo $selected_post; ?>" role="tabpanel"
aria-labelledby="v-pills-<?php echo $selected_post; ?>-tab">
<div class="tab-data-content">
<div class="tab-content" id="v-pills-tabContent">
<?php
$post = get_post($selected_post);
if ($post && $post->post_type === 'video_series') {
setup_postdata($post);
$post_id = $selected_post;
$video_series = get_post_meta($post_id, '_video_series', true);
$subtitle = get_field('subtitle', $post_id);
$additional_description = get_field('additional_description', $post_id);
$is_active = 'active show';
?>
<!-- <div class="tab-pane fade active show" id="v-pills-<?php echo $post_id; ?>" role="tabpanel"
aria-labelledby="v-pills-<?php echo $post_id; ?>-tab"> -->
<div class="tab-data-content">
<div class="data-title">
<h2><?php the_title(); ?></h2>
<h6><?php echo esc_html($subtitle); ?></h6>
<p><?php echo esc_html($additional_description); ?></p>
</div>
<div class="video-slider-cover">
<div class="video-series-slider-lg">
<?php
if (!empty($video_series)) {
$video_series = array_reverse($video_series);
$featured_video = null;
$other_videos = [];
foreach ($video_series as $video) {
if (!empty($video['url'])) {
if (!empty($video['featured']) && $video['featured'] == 1 && $featured_video === null) {
$featured_video = $video;
} else {
$other_videos[] = $video;
}
}
}
if ($featured_video) {
$thumbnail = !empty($featured_video['thumbnail']) ? $featured_video['thumbnail'] : get_vimeo_thumbnail($featured_video['url']);
?>
<div class="item-lg">
<div class="item-lg-cover">
<button class="lg-play-btn video-btn" data-bs-toggle="modal"
data-bs-target="#customModalVideo"
data-title="<?php echo esc_attr($featured_video['title']); ?>"
data-subtitle="<?php echo esc_attr($featured_video['subtitle']); ?>"
data-url="<?php echo esc_url($featured_video['url']); ?>"
data-pdf="<?php echo esc_url($featured_video['pdf']); ?>"
data-count="<?php echo count($video_series); ?>" data-post-id="<?php echo $post_id; ?>"
data-description="<?php echo esc_html($featured_video['description']); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/play-btn.svg" alt="">
</button>
<img class="media-lg" src="<?php echo esc_url($thumbnail); ?>" alt="">
</div>
</div>
<?php
}
foreach ($other_videos as $video) {
$thumbnail = !empty($video['thumbnail']) ? $video['thumbnail'] : get_vimeo_thumbnail($video['url']);
?>
<div class="item-lg">
<div class="item-lg-cover">
<button class="lg-play-btn video-btn" data-bs-toggle="modal"
data-bs-target="#customModalVideo" data-title="<?php echo esc_attr($video['title']); ?>"
data-subtitle="<?php echo esc_attr($video['subtitle']); ?>"
data-url="<?php echo esc_url($video['url']); ?>"
data-pdf="<?php echo esc_url($video['pdf']); ?>"
data-count="<?php echo count($video_series); ?>" data-post-id="<?php echo $post_id; ?>"
data-description="<?php echo esc_html($video['description']); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/img/play-btn.svg" alt="">
</button>
<img class="media-lg" src="<?php echo esc_url($thumbnail); ?>" alt="">
</div>
</div>
<?php
}
}
?>
</div>
<div class="video-series-slider-thumb">
<?php
if (!empty($video_series)) {
if ($featured_video) {
$thumbnail = !empty($featured_video['thumbnail']) ? $featured_video['thumbnail'] : get_vimeo_thumbnail($featured_video['url']);
?>
<div class="thumb-item featured-thumb">
<div class="thumb-cover">
<button class="play-btn" tabindex="0">
<img src="<?php echo get_template_directory_uri(); ?>/img/play-btn.svg" alt="">
</button>
<img class="thumb-media-item" src="<?php echo esc_url($thumbnail); ?>" alt="">
</div>
<div class="thumb-det">
<h5><?php echo esc_html($featured_video['title']); ?></h5>
<p><?php echo esc_html($featured_video['subtitle']); ?></p>
</div>
</div>
<?php
}
foreach ($other_videos as $video) {
$thumbnail = !empty($video['thumbnail']) ? $video['thumbnail'] : get_vimeo_thumbnail($video['url']);
?>
<div class="thumb-item">
<div class="thumb-cover">
<button class="play-btn" tabindex="0">
<img src="<?php echo get_template_directory_uri(); ?>/img/play-btn.svg" alt="">
</button>
<img class="thumb-media-item" src="<?php echo esc_url($thumbnail); ?>" alt="">
</div>
<div class="thumb-det">
<h5><?php echo esc_html($video['title']); ?></h5>
<p><?php echo esc_html($video['subtitle']); ?></p>
</div>
</div>
<?php
}
}
?>
</div>
</div>
</div>
<!-- </div> -->
<?php
} else {
echo '<p>No video found for the selected post.</p>';
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="enjoy-shabbos">
<div class="custom-container container">
<div class="inner-sec">
<div class="title">Enjoy Shabbos on Shabbos</div>
<div class="inner-content">Print out Ki Heim Chayeinu and enjoy it on Shabbos, share it with family and
elevate<br> Shabbos in your home</div>
<div class="two-btn">
<button class="btn whatsap" onclick="location.href='https://chat.whatsapp.com/ABCDE12345FGHIJ67890';">
<span class="ico">
<img src="<?php echo get_template_directory_uri(); ?>/img/whatsap.svg" alt="whatsap">
</span>
<span>Join WhatsApp Group</span>
</button>
<div class="email-input">
<div class="btn receive-email">
<span class="ico"><img src="<?php echo get_template_directory_uri(); ?>/img/mail-ico.svg"
alt="Email"></span>
Receive Email
</div>
<?php
$pdf_url = get_field('video_document');
if ($pdf_url && isset($pdf_url['url'])) {
// Safe to output the URL
$pdfurl = esc_url($pdf_url['url']);
} else {
$pdfurl = '';
}
?>
<input type="email" placeholder="Enter your email" id="email-input" class="form-control email">
<input type="hidden" value="<?php echo $pdfurl; ?>" id="email-pdf" class="form-control">
<button class="send-btn" data-pdf-url="<?php echo esc_url($pdf_url['url']); ?>" onclick="validateEmail()">
<img src="<?php echo get_template_directory_uri(); ?>/img/send.svg" alt="Send">
</button>
</div>
</div>
<div id="successAlert" class="alert alert-success" role="alert" style="text-align: center; display: none;"></div>
</div>
</div>
</section>
<?php
// Initialize a flag to check if any recommended publications are found
$has_recommended = false;
// WP_Query to fetch publications
$query = new WP_Query(array(
'post_type' => 'video_series',
'posts_per_page' => -1,
));
if ($query->have_posts()):
while ($query->have_posts()):
$query->the_post();
$video_series = get_post_meta(get_the_ID(), '_video_series', true);
foreach ($video_series as $video) {
$recommended_videos = $video['recommended'];
//if (!empty($video['thumbnail'])) {
if ($recommended_videos == 1) {
$has_recommended = true;
break; // Exit loop early if we find a recommended publication
}
//}
}
endwhile;
endif;
wp_reset_postdata();
?>
<?php if ($has_recommended): // Only show the section if recommended publications exist ?>
<section class="publications-slider-sec">
<div class="container custom-container">
<div class="title-block">
<h2>Recommended Videos</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries</p>
</div>
<div class="publications-slider-cover">
<div class="publications-slider">
<?php
$selected_post = (array) $selected_post;
$query = new WP_Query(array(
'post_type' => 'video_series',
'posts_per_page' => -1,
// 'post__not_in' => $selected_post
));
if ($query->have_posts()):
while ($query->have_posts()):
$query->the_post();
$videos = get_post_meta(get_the_ID(), '_video_series', true);
$recommended_videos = get_field('recommended_videos');
// if (!empty($recommended_videos) && in_array('Yes', $recommended_videos)) {
if (!empty($videos)):
$video_series = get_post_meta(get_the_ID(), '_video_series', true);
$video_series = array_reverse($video_series);
$featured_found = false; // Track if a featured video exists
$last_video = end($videos);
foreach ($video_series as $video) {
if ($video['recommended'] == 1) {
$featured_found = true;
// $first_volume = reset($videos); // Get the first volume
if (empty($video['thumbnail'])) {
$vimeo_url = $video['url'];
$thumbnail = get_vimeo_thumbnail($vimeo_url);
} else {
$thumbnail = $video['thumbnail'];
}
?>
<a class="item" href="<?php the_permalink(); ?>" data-pdf-url="<?php echo esc_url($pdf_url['url']); ?>">
<div class="publications-card">
<div class="media-block">
<img class="media-item" src="<?php echo esc_url($thumbnail); ?>" alt="">
</div>
<div class="data-content">
<p><?php echo $video['subtitle']; ?></p>
<h4><?php echo $video['title']; ?></h4>
</div>
</div>
</a>
<?php
}
} //if (!$featured_found && !empty($last_video)) { ?>
<!-- <a class="item" href="<?php the_permalink(); ?>"
data-pdf-url="<?php echo esc_url($pdf_url['url']); ?>">
<div class="publications-card">
<div class="media-block">
<img class="media-item" src="<?php echo esc_url($last_video['thumbnail']); ?>" alt="">
</div>
<div class="data-content">
<p><?php echo $last_video['subtitle']; ?></p>
<h4><?php echo $last_video['title']; ?></h4>
</div>
</div>
</a> -->
<?php
// }
endif;
// }
endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>
</div>
</section>
<?php endif; // End check for recommended videos ?>
<section class="newsletter-section">
<div class="container custom-container">
<div class="subtitle">Subscribe to our Newsletter </div>
<div class="sub-content"> Sign up for our weekly updates to be the first to receive inspiring content, news, events,
and downloads.</div>
<div class="form-sec">
<form id="newsletter-form">
<div class="row form-inner">
<div class="col-md-2">
<input type="text" id="sub_fname" class="form-control" placeholder="First Name*" required>
</div>
<div class="col-md-2">
<input type="text" id="sub_lname" class="form-control" placeholder="Last Name*" required>
</div>
<div class="col-md-4">
<input type="email" id="sub_email" class="form-control" placeholder="Email*" required>
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-submit btn-subscribe w-100">Subscribe</button>
</div>
</div>
</form>
<div id="subAlert" class="alert alert-success" role="alert" style="text-align: center; display: none;top: 10px;">
</div>
</div>
</div>
</section>
<!-- Modal -->
<!-- <div class="modal inner-popup fade" id="customModalVideo" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div>
<div class="modal-title"></div>
<div class="subtitle"></div>
</div>
<!-- Slick Slider --
<div class="video-sec" id="videoContainer">
<!-- Video will be dynamically loaded here --
<div id="playButton" class="play-btn" >
<img src="<?php echo get_template_directory_uri(); ?>/img/play-btn.png" alt="Play" >
</div>
</div>
<div class="input-sec form-sec1">
<div class="form-inner">
<label class="form-label">Receive via email</label>
<div class="two-btn">
<input type="hidden" name="email_pdf " id="email_pdf" class="form-control">
<div class="input-container">
<span class="mail-icon"><img src="<?php echo get_template_directory_uri(); ?>/img/mail-ico1.svg" alt="mail-ico1"></span>
<input type="email" placeholder="Enter your email" id="input-email" class="form-control email">
<button type="button" class="send-button emailbtn" ><img src="<?php echo get_template_directory_uri(); ?>/img/msg1.svg" alt="msg1"></button>
</div>
<button class="btn whatsap" onclick="location.href='https://chat.whatsapp.com/ABCDE12345FGHIJ67890';">
<span class="ico">
<img src="<?php echo get_template_directory_uri(); ?>/img/whatsap.svg" alt="whatsap">
</span>
<span>Join WhatsApp Group</span>
</button>
<div class="single-btn">
<button class="next-btn prev-btn">
<span class="ico1"><img src="<?php echo get_template_directory_uri(); ?>/img/back-arw.svg" alt="whatsap"></span> <span>Back</span>
</button>
<button class="next-btn">
<span>Next</span> <span class="ico1"><img src="<?php echo get_template_directory_uri(); ?>/img/arrow.png" alt="whatsap"></span>
</button>
</div>
</div>
<div id="alert" class="alert alert-success" role="alert" style="text-align: center; display: none;"></div>
</div>
<p class="content">
</p>
</div>
</div>
<!-- Description --
</div>
</div>
</div> -->
<!-- Modal -->
<div class="modal inner-popup fade" id="customModalVideo" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div>
<div class="modal-title">How Can We Tell What Our Olam Haba Will Look Like?</div>
<div class="subtitle">HaRav Pinches Friedman</div>
</div>
<!-- Slick Slider -->
<div class="video-sec" id="videoContainer">
<video poster="<?php echo get_template_directory_uri(); ?>/img/poster-img.png" id="customVideo">
<source src="<?php echo get_template_directory_uri(); ?>/video/Homepage.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
<div id="playButton" class="play-btn">
<img src="<?php echo get_template_directory_uri(); ?>/img/play-btn.png" alt="Play">
</div>
</div>
<!-- Email Input and Button -->
<div class="input-sec form-sec1">
<div class="form-inner video-mail-inp-cover">
<div class="video-mail-inp-wrapper">
<div class="two-btn">
<div class="receive-mail-inp-block">
<label class="form-label">Receive via email</label>
<div class="input-container">
<span class="mail-icon"><img src="<?php echo get_template_directory_uri(); ?>/img/mail-ico1.svg"
alt="mail-ico1"></span>
<input type="hidden" name="email_pdf " id="email_pdf" class="form-control">
<input type="text" placeholder="Enter your email" id="input-email" class="form-control">
<button type="button" class="send-button emailbtn"><img
src="<?php echo get_template_directory_uri(); ?>/img/msg1.svg" alt="msg1"></button>
</div>
</div>
<button class="btn whatsap">
<span class="ico"><img src="<?php echo get_template_directory_uri(); ?>/img/whatsap.svg"
alt="whatsap"></span> <span>Join WhatsApp Group</span>
</button>
</div>
<div class="single-btn">
<button class="next-btn prev-btn" id="prev-btn">
<span class="ico1"><img src="<?php echo get_template_directory_uri(); ?>/img/back-arw.svg"
alt="whatsap"></span> <span>Back</span>
</button>
<button class="next-btn" id="next-btn">
<span>Next</span> <span class="ico1"><img
src="<?php echo get_template_directory_uri(); ?>/img/arrow.png" alt="whatsap"></span>
</button>
</div>
</div>
</div>
<div id="alert" class="alert alert-success" role="alert" style="text-align: center; display: none;"></div>
</div>
<!-- Description -->
<p class="content">
</p>
</div>
</div>
</div>
</div>
<?php
// function get_vimeo_thumbnail($video_url) {
// $api_url = "https://vimeo.com/api/oembed.json?url=" . urlencode($video_url);
// // Fetch the video details from the Vimeo API
// $response = wp_remote_get($api_url);
// if (is_wp_error($response)) {
// return false;
// }
// $body = wp_remote_retrieve_body($response);
// $data = json_decode($body, true);
// if (!empty($data['thumbnail_url'])) {
// $thumbnail_url = $data['thumbnail_url'];
// // Ensure the last part of the URL (e.g., _295x166) is replaced with _1280x720
// $thumbnail_url = preg_replace('/_\d+x\d+$/', '_1280x720', $thumbnail_url);
// return $thumbnail_url;
// }
// return false;
// }
//
$selected_post = get_the_ID(); ?>
<?php if (is_singular('video_series')): ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
const tabContent = document.getElementById('ajax-video-tab-content');
const tabCache = {}; // ⬅️ Store already-loaded tab contents
function loadTabContent(postID) {
// If cached, use it
if (tabCache[postID]) {
tabContent.innerHTML = tabCache[postID];
initSlickSliders(); // Re-init sliders from cached content
return;
}
// Otherwise, fetch via AJAX
tabContent.innerHTML = '<div class="loader">Loading...</div>';
fetch('<?php echo admin_url('admin-ajax.php'); ?>?action=load_video_tabs&post_id=' + postID)
.then(res => res.text())
.then(html => {
tabCache[postID] = html; // ⬅️ Cache the result
tabContent.innerHTML = html;
initSlickSliders();
})
.catch(() => {
tabContent.innerHTML = '<div class="tab-data-content"><p>Failed to load content. Please try again.</p></div>';
});
}
// Slick initialization function (to reuse)
function initSlickSliders() {
jQuery(function ($) {
$('.video-series-slider-lg').not('.slick-initialized').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.video-series-slider-thumb'
});
$('.video-series-slider-thumb').not('.slick-initialized').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.video-series-slider-lg',
dots: false,
arrows: true,
focusOnSelect: true,
autoplay: false,
responsive: [
{ breakpoint: 1199, settings: { slidesToShow: 3 } },
{ breakpoint: 991, settings: { slidesToShow: 3, autoplay: true } },
{ breakpoint: 767, settings: { slidesToShow: 2, autoplay: true } }
]
});
$('.img-slider').not('.slick-initialized').slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
autoplay: true,
autoplaySpeed: 2000,
arrows: true,
prevArrow: '<button class="slick-prev slick-arrow"><img src="<?php echo get_template_directory_uri(); ?>/img/rt-arrow.svg"></button>',
nextArrow: '<button class="slick-next slick-arrow"><img src="<?php echo get_template_directory_uri(); ?>/img/rt-arrow.svg">Next</button>'
});
$('.tab-btn').on('shown.bs.tab', function () {
$('.video-series-slider-lg').slick('setPosition');
$('.video-series-slider-thumb').slick('setPosition');
});
});
}
// Load initial tab
const currentPostID = <?php echo intval($selected_post); ?>;
loadTabContent(currentPostID);
// Handle tab switch
document.querySelectorAll('.tab-btn').forEach(button => {
button.addEventListener('click', function () {
const postID = this.id.replace('v-pills-', '').replace('-tab', '');
loadTabContent(postID);
});
});
});
</script>
<?php endif; ?>
<style>
.loader {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.loader:after {
content: "";
width: 40px;
height: 40px;
border: 4px solid #ccc;
border-top-color: #000;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
<?php
get_footer(); ?>