MediaWiki:Gadget-VideoGallerySystem.js

/* Video Gallery System – ResourceLoader gadget
 * Dependencies: mediawiki.util, jquery
 * Replicates functionality from local_test_version.html
 */
( function ( mw, $ ) {
	'use strict';

	// ── Abort if the page has no video gallery markup ────────────────────────────────
	if ( !$( '.video-gallery-main-container' ).length ) {
		return;
	}

	console.log('%c[VideoGallery] gadget loaded','color:teal;font-weight:bold');

	window.DuneVideoGallery = {
		// Store current video
		currentVideo: null,
		
		// Initialize the system
		init: function() {
			var self = this;
			
			console.log('[VideoGallery] init() called');
			
			// Set up event listeners
			self.setupEventListeners();
		},
		
		// Set up all event listeners
		setupEventListeners: function() {
			var self = this;
			
			// Tab navigation
			$(document).on('click', '.video-tab', function(e) {
				e.preventDefault();
				var tabName = $(this).data('tab');
				
				// Update active tab
				$('.video-tab').removeClass('active');
				$(this).addClass('active');
				
				// Update content
				$('.video-tab-content').removeClass('active');
				$('[data-content="' + tabName + '"]').addClass('active');
			});
			
			// Video card clicks
			$(document).on('click', '.video-card', function(e) {
				e.preventDefault();
				self.loadVideo(this);
			});
			
			// Search functionality
			$(document).on('input', '.video-search-input', function() {
				var query = $(this).val();
				self.searchVideos(query);
			});
			
			$(document).on('click', '.video-search-button', function(e) {
				e.preventDefault();
				var query = $('.video-search-input').val();
				self.searchVideos(query);
			});
			
			// Enter key in search
			$(document).on('keypress', '.video-search-input', function(e) {
				if (e.which === 13) {
					e.preventDefault();
					self.searchVideos($(this).val());
				}
			});
		},
		
		// Load video into player
		loadVideo: function(videoCard) {
			var self = this;
			var $card = $(videoCard);
			
			// Update active card styling
			$('.video-card').removeClass('active');
			$card.addClass('active');
			
			// Get video data from data attributes
			var video = {
				id: $card.data('video-id'),
				youtube_id: $card.data('youtube-id'),
				title: $card.data('title'),
				channel: $card.data('channel'),
				author: $card.data('author'),
				published_at: $card.data('published'),
				duration: $card.data('duration'),
				notes: $card.data('notes'),
				internal_link: $card.data('internal-link')
			};
			
			console.log('[VideoGallery] Loading video:', video.title);
			
			// Store current video
			self.currentVideo = video;
			
			// Build player HTML
			var playerHTML = self.buildPlayerHTML(video);
			
			// Update player panel
			$('#videoPlayerPanel').html(playerHTML);
		},
		
		// Build player HTML
		buildPlayerHTML: function(video) {
		// Check if this is a music video
		var isMusicVideo = document.querySelector('.music-video-gallery') !== null;
		
		var html = '<div class="video-embed-container">' +
		'<iframe src="https://www.youtube.com/embed/' + video.youtube_id + '?rel=0&modestbranding=1" ' +
		'frameborder="0" ' +
		'allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ' +
		'allowfullscreen>' +
		'</iframe>' +
		'</div>' +
		'<div class="video-details-header">' +
		'<h2 class="video-main-title">' + video.title + '</h2>' +
		'<div class="video-meta">' +
		'<span class="video-author">' + (isMusicVideo ? '🎵' : '👤') + ' ' + (video.author || video.channel) + '</span>' +
		'<span class="video-date">📅 ' + this.formatDate(video.published_at) + '</span>' +
		'</div>';
		
		// Add license badge for music videos
		if (isMusicVideo) {
		html += '<div class="music-license-badge">' +
		        '<span class="badge-icon">🆓</span>' +
		        '<span>Suno AI Generated - Free to Use</span>' +
		            '</div>';
                    }
                    
                    html += '</div>' +
                        '<div class="video-notes-section">' +
                        '<div class="notes-header">' + (isMusicVideo ? 'Music Notes' : 'Video Notes') + '</div>' +
                        '<div class="notes-content">' +
                        this.formatNotes(video.notes);
                    
                    // Add download link for music videos
                    if (isMusicVideo && video.internal_link) {
                        html += '<a href="/wiki/File:' + video.internal_link + '" class="music-download-button">' +
                            '<span>⬇</span> Download MP3' +
                            '</a>';
                    }
                    
                    html += '</div>' +
                        '</div>';
                    
                    return html;
                },
		
		// Format date
		formatDate: function(dateStr) {
			if (!dateStr) return '';
			var date = new Date(dateStr);
			return date.toLocaleDateString('en-US', { 
				year: 'numeric', 
				month: 'short', 
				day: 'numeric' 
			});
		},
		
		// Format notes from markdown-style to HTML
		formatNotes: function(notes) {
			if (!notes) return '<p>No notes available for this video.</p>';
			
			// Convert headers
			notes = notes.replace(/### (.+)/g, '<h3>$1</h3>');
			
			// Convert lists
			var lines = notes.split('\n');
			var inList = false;
			var formatted = [];
			
			lines.forEach(function(line) {
				if (line.startsWith('- ')) {
					if (!inList) {
						formatted.push('<ul>');
						inList = true;
					}
					formatted.push('<li>' + line.substring(2) + '</li>');
				} else {
					if (inList && line.trim() === '') {
						formatted.push('</ul>');
						inList = false;
					}
					formatted.push(line);
				}
			});
			
			if (inList) formatted.push('</ul>');
			
			return formatted.join('\n').replace(/\n\n/g, '</p><p>').replace(/^/, '<p>').replace(/$/, '</p>');
		},
		
		// Search functionality
		searchVideos: function(query) {
			query = query.toLowerCase();
			
			$('.video-card').each(function() {
				var $card = $(this);
				var title = $card.data('title').toLowerCase();
				var channel = $card.data('channel').toLowerCase();
				
				if (title.includes(query) || channel.includes(query)) {
					$card.show();
				} else {
					$card.hide();
				}
			});
			
			// Hide empty sections
			$('.video-section').each(function() {
				var $section = $(this);
				var visibleCards = $section.find('.video-card:visible').length;
				$section.toggle(visibleCards > 0);
			});
		}
	};
	
	// Initialize when DOM is ready
	$(function() {
		console.log('[VideoGallery] DOM ready – calling init()');
		DuneVideoGallery.init();
	});

}( mediaWiki, jQuery ) );