நினைவேந்தலுக்கு தயாராகும் கிளிநொச்சி கனகபுரம் துயிலுமில்லம் (நேரலை)

function loadHlsJs() {
if (typeof Hls === ‘undefined’) {
const script = document.createElement(‘script’);
script.src = ‘https://cdn.jsdelivr.net/hls.js/latest/hls.js’;
script.onload = () => {
console.log(‘HLS.js loaded dynamically.’);
};
script.onerror = () => {
console.error(‘Error loading HLS.js.’);
};
document.head.appendChild(script);
} else {
console.log(‘HLS.js already loaded.’);
}
}

$(document).ready(function() {

loadHlsJs();

function initCurrentVideo(instance) {
const item = instance.currItem;
if (!item || item.type !== ‘inline’) return;

const $content = instance.content;
if (!$content || !$content.length) return;

const videoEl = $content.find(‘video.mfp-video-el’)[0];
if (!videoEl) return;

if (item.videoType === ‘mp4’ && item.videoSrc) {
videoEl.src = item.videoSrc;
return;
}

if (item.videoType === ‘hls’ && item.hlsSrc) {
if (window.Hls && Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(item.hlsSrc);
hls.attachMedia(videoEl);
} else if (videoEl.canPlayType(‘application/vnd.apple.mpegurl’)) {
videoEl.src = item.hlsSrc;
} else {
console.error(‘HLS not supported in this environment’);
}
}
}

function buildTitleBar(instance) {
var $wrap = instance.wrap;

if ($wrap.find(‘.mfp-video-title-bar’).length) {
return;
}

var $title = $(‘

‘);
$wrap.append($title);
}

function updatePopupTitle(instance) {
var item = instance.currItem;
if (!item) return;

var title = item.videoTitle || ”;

if (!title && item.el) {
title = $(item.el).data(‘title’) || ”;
item.videoTitle = title;
}

var $title = instance.wrap.find(‘.mfp-video-title-bar’);
if (!$title.length) return;

$title.text(title);
}

function buildThumbnailStrip(instance) {
var $wrap = instance.wrap;

var $strip = $wrap.find(‘.mfp-video-thumbs-bar’);
if ($strip.length) {
// Already built – just refresh active state
updateThumbnailActive(instance);
return;
}

var $currentItemEl = $(instance.currItem && instance.currItem.el);
var $galleryRoot = $currentItemEl.closest(‘.video-gallery’);
if (!$galleryRoot.length) return;

var delegateSel = instance.st.delegate || ‘.popup-video’;
var $links = $galleryRoot.find(delegateSel);

$strip = $(‘

‘);

$links.each(function (index) {
var $origin = $(this);
var thumb = $origin.find(‘img’).attr(‘src’) || ”;
var title = $origin.data(‘thumb’) || ”;

var $tile = $(`

`);

$strip.append($tile);
});

$wrap.append($strip);

// Prevent closing; only switch video
$strip.on(‘click’, ‘.mfp-video-thumb’, function (e) {
e.preventDefault();
e.stopPropagation();

var idx = parseInt($(this).data(‘index’), 10);
$.magnificPopup.instance.goTo(idx);
});

updateThumbnailActive(instance);
}

function updateThumbnailActive(instance) {
var activeIndex = instance.index;

instance.wrap
.find(‘.mfp-video-thumbs-bar .mfp-video-thumb’)
.removeClass(‘is-active’)
.filter(‘[data-index=”‘ + activeIndex + ‘”]’)
.addClass(‘is-active’);
}

$(‘.video-gallery’).magnificPopup({
delegate: ‘.popup-video’,
gallery: { enabled: true },
type: ‘inline’,
closeOnContentClick: false,
closeOnBgClick: true,

callbacks: {
elementParse: function (item) {
const $el = item.el;
const type = $el.data(‘type’);
item.videoTitle = $el.data(‘title’) || ”;

switch (type) {
case ‘youtube’:
case ‘iframe’:
item.type = ‘iframe’;
item.src = $el.attr(‘href’);
break;

case ‘mp4’:
item.type = ‘inline’;
item.videoType = ‘mp4’;
item.videoSrc = $el.data(‘src’);
item.src = `

`;
break;

case ‘hls’:
item.type = ‘inline’;
item.videoType = ‘hls’;
item.hlsSrc = $el.data(‘src’);
item.src = `

`;
break;

case ’embed’: {
const embedLink = $el.data(‘src’);
item.type = ‘iframe’;
item.src = embedLink;
break;
}

default:
item.type = ‘iframe’;
item.src = $el.attr(‘href’);
}
},

open: function () {
buildTitleBar(this);
buildThumbnailStrip(this);
updateThumbnailActive(this);
updatePopupTitle(this);
initCurrentVideo(this);
},

change: function () {
updateThumbnailActive(this);
updatePopupTitle(this);
initCurrentVideo(this);
}
}
});

$(‘.video-gallery-trigger’).on(‘click’, function (e) {
e.preventDefault();
$(‘.video-gallery’).magnificPopup(‘open’, 0);
});

});

a.video-gallery-trigger {
display: block;
padding: 1px 0;
}

a.video-gallery-trigger img {
border-radius: 5px;
}

/* Dark fullscreen backdrop */
.mfp-bg {
background: rgba(0, 0, 0, 0.95) !important;
opacity: 0.95 !important;
}

.mfp-wrap {
z-index: 10450;
}

.mfp-arrow-left:before {
border-right: 27px solid #181818;
}

.mfp-arrow-right:before {
border-left: 27px solid #181818;
}

/* Fixed full-viewport container, responsible for centering content */
.mfp-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

margin: 0;
padding: 52px 16px 80px; /* top = title bar height, bottom = thumb bar height */
box-sizing: border-box;

display: flex;
align-items: center;
justify-content: center;
}

/* Content: centered column inside the viewport, bounded width */
.mfp-inline-holder .mfp-content,
.mfp-iframe-holder .mfp-content {
width: 100%;
max-width: 900px; /* adjust as you prefer */
height: auto;
max-height: 100%;

margin: 0 auto;
padding: 0;
box-sizing: border-box;

background: transparent;
}

.mfp-video-title-bar {
position: fixed;
top: 0;
left: 0;
right: 0;

display: flex;
align-items: center;
justify-content: center;

z-index: 10510;

color: #ffffff;
font-size: 16px;
font-weight: 600;
line-height: 22px;
text-align: center;
min-height: 56px;

padding: 10px 16px;
margin: 0;

background: rgba(0, 0, 0, 0.95);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-sizing: border-box;
}
.mfp-video-thumbs-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;

z-index: 10510;

display: flex;
flex-wrap: nowrap;
gap: 10px;
align-items: center;
justify-content: center;

padding: 8px 10px;
margin: 0;

background: rgba(0, 0, 0, 0.95);
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-sizing: border-box;

overflow-x: auto;

scrollbar-width: thin;
scrollbar-color: #666 #222;
}

/* Optional scrollbar styling */
.mfp-video-thumbs-bar::-webkit-scrollbar {
height: 6px;
}
.mfp-video-thumbs-bar::-webkit-scrollbar-track {
background: #222;
}
.mfp-video-thumbs-bar::-webkit-scrollbar-thumb {
background: #666;
border-radius: 3px;
}

/* Thumbnail tiles */
.mfp-video-thumb {
flex: 0 0 120px;
cursor: pointer;
text-align: center;

opacity: 0.7;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease;
}

.mfp-video-thumb:hover {
opacity: 0.9;
transform: translateY(-1px);
}

.mfp-video-thumb.is-active {
opacity: 1;
transform: translateY(-2px);
}

.mfp-video-thumb-img-wrap {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 4px;
background: #111;
margin-bottom: 4px;
}

.mfp-video-thumb-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.mfp-video-thumb-title {
font-size: 12px;
line-height: 1.3;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* The actual middle area between title + thumbs */
.mfp-inline-holder .mfp-content > .mfp-video-wrapper,
.mfp-inline-holder .mfp-content > iframe,
.mfp-iframe-holder .mfp-content > iframe {
width: 100%;
height: 100%;
min-height: 0;

display: flex;
align-items: center;
justify-content: center;

box-sizing: border-box;
}

/* Inline video wrapper */
.mfp-video-wrapper {
width: 100%;
height: 100%;

display: flex;
align-items: center;
justify-content: center;
}

/* HTML5 video */
.mfp-video-wrapper .mfp-video-el {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
background: #000;
border-radius: 6px;
}

/* Iframes (YouTube / embed) */
.mfp-inline-holder .mfp-content > iframe,
.mfp-iframe-holder .mfp-content > iframe {
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 6px;
border: none;
}

/*************************************************
* CLOSE / NAV
*************************************************/

.mfp-close {
color: #ffffff !important;
opacity: 0.85;

top: 8px;
right: 16px;
}
.mfp-close:hover {
opacity: 1;
}

.mfp-arrow {
opacity: 0.85;
}
.mfp-arrow:hover {
opacity: 1;
}

@media (max-width: 991px) {
.mfp-video-title-bar {
font-size: 14px;
padding: 8px 10px;
}

.mfp-container {
padding: 48px 10px 76px;
}

.mfp-inline-holder .mfp-content,
.mfp-iframe-holder .mfp-content {
max-width: 100%;
}
}

@media (max-width: 575px) {
.mfp-video-title-bar {
font-size: 13px;
padding: 6px 8px;
}

.mfp-container {
padding: 44px 8px 72px;
}

.mfp-video-thumb {
flex: 0 0 90px;
}

.mfp-video-thumb-title {
font-size: 11px;
}
}