MediaWiki:Common.js: Difference between revisions

No edit summary
No edit summary
Line 58: Line 58:
});
});


/* --- SMART VIDEO MODAL SCRIPT --- */
/* --- SMART VIDEO MODAL (Auto-Inject) --- */
$(document).ready(function() {
$(function() {
      
      
     // 1. Auto-Fetch Thumbnails & Handle Clicks
     // 1. Check if Modal HTML exists. If not, create it.
    if ($('#bc-video-modal').length === 0) {
        $('body').append(`
            <div id="bc-video-modal" class="bc-modal-overlay">
                <div class="bc-modal-content">
                    <div class="bc-modal-close">&times;</div>
                    <iframe id="bc-modal-iframe" width="100%" height="100%" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
            </div>
        `);
    }
 
    // 2. Setup Triggers (Thumbnail & Click)
     $('.bc-video-trigger').each(function() {
     $('.bc-video-trigger').each(function() {
         var $trigger = $(this);
         var $trigger = $(this);
         var videoID = $trigger.data('video-id');
         var videoID = $trigger.data('video-id');
          
          
         // If no manual background is set, grab it from YouTube automatically
         // Inject Image Tag if missing
         if (videoID && !$trigger.css('background-image') || $trigger.css('background-image') === 'none') {
         if ($trigger.find('img').length === 0) {
            // Try 'maxresdefault' (HD) first.
            // Note: If a video is very old, it might only have 'hqdefault.jpg'.
             var thumbUrl = "https://img.youtube.com/vi/" + videoID + "/maxresdefault.jpg";
             var thumbUrl = "https://img.youtube.com/vi/" + videoID + "/maxresdefault.jpg";
             $trigger.css('background-image', 'url("' + thumbUrl + '")');
             $trigger.prepend('<img src="' + thumbUrl + '" alt="Video Thumbnail">');
         }
         }
    });
    // 3. Handle Click (Using 'body' delegation to ensure it always catches the click)
    $('body').on('click', '.bc-video-trigger', function() {
        var videoID = $(this).data('video-id');
        var embedUrl = "https://www.youtube.com/embed/" + videoID + "?autoplay=1&rel=0&modestbranding=1";
          
          
         // Handle Click
         $('#bc-modal-iframe').attr('src', embedUrl);
        $trigger.on('click', function() {
        $('#bc-video-modal').addClass('active');
            var embedUrl = "https://www.youtube.com/embed/" + videoID + "?autoplay=1&rel=0&modestbranding=1";
        $('body').css('overflow', 'hidden'); // Stop background scrolling
            $('#bc-modal-iframe').attr('src', embedUrl);
            $('#bc-video-modal').addClass('active');
            $('body').css('overflow', 'hidden'); // Lock scroll
        });
     });
     });


     // 2. Close Modal Logic
     // 4. Close Logic
     function closeModal() {
     function closeModal() {
         $('#bc-video-modal').removeClass('active');
         $('#bc-video-modal').removeClass('active');
Line 90: Line 102:
     }
     }


     $('.bc-modal-close').click(closeModal);
     $('body').on('click', '.bc-modal-close', closeModal);
     $('#bc-video-modal').click(function(e) {
   
    // Close on background click
     $('body').on('click', '#bc-video-modal', function(e) {
         if (e.target === this) closeModal();
         if (e.target === this) closeModal();
     });
     });
   
    // Close on Escape Key
     $(document).keydown(function(e) {
     $(document).keydown(function(e) {
         if (e.key === "Escape") closeModal();
         if (e.key === "Escape") closeModal();
     });
     });
});
});