MediaWiki:Gadget-VideoGallerySystem.js

/* Video Gallery System – ResourceLoader gadget
 * Dependencies: mediawiki.util, jquery
 * Updated version without search functionality
 */
( 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 - now inside scrollable wrapper
				$('.video-tab-content').removeClass('active');
				$('[data-content="' + tabName + '"]').addClass('active');
				
				// Scroll to top when switching tabs
				var $wrapper = $('.video-content-wrapper');
				if ($wrapper.length) {
					$wrapper.scrollTop(0);
				}
			});
			
			// Video card clicks
			$(document).on('click', '.video-card', function(e) {
				e.preventDefault();
				self.loadVideo(this);
			});
		},
		
		// 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>');
		}
	};
	
	

	
	// Initialize when DOM is ready
	$(function() {
		console.log('[VideoGallery] DOM ready – calling init()');
		DuneVideoGallery.init();
	});

}( mediaWiki, jQuery ) );