MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */

/* YouTube Playlists Gallery Enhancement */
(function() {
    'use strict';

    // Only run on Level Up RN category page
    if (mw.config.get('wgPageName') !== 'Category:Level_Up_RN') return;

    mw.loader.using(['jquery'], function() {
        $(document).ready(function() {
            // Find the playlists table and transform it
            var $table = $('.wikitable').first();
            if (!$table.length) return;

            var $gallery = $('<div class="playlists-gallery"></div>');

            $table.find('tr').each(function(index) {
                if (index === 0) return; // Skip header

                var $row = $(this);
                var $cells = $row.find('td');

                if ($cells.length < 3) return;

                var $titleCell = $cells.eq(0);
                var $descCell = $cells.eq(1);
                var $linkCell = $cells.eq(2);

                var $titleLink = $titleCell.find('a').first();
                var playlistUrl = $titleLink.attr('href');
                var title = $titleLink.text();
                var description = $descCell.text();

                // Extract playlist ID from URL
                var playlistId = playlistUrl ? playlistUrl.match(/list=([^&]+)/)[1] : '';

                if (!playlistId) return;

                var thumbUrl = 'https://i.ytimg.com/vi/' + playlistId + '/hqdefault.jpg';

                var $box = $('<div class="playlist-box"></div>');
                var $thumb = $('<div class="playlist-box-thumb"><a href="' + playlistUrl + '" target="_blank"><img src="' + thumbUrl + '" alt="' + title + '"><div class="playlist-box-overlay">▶ Playlist</div></a></div>');
                var $info = $('<div class="playlist-box-info"><div class="playlist-box-title">' + title + '</div><div style="margin: 8px 0; font-size: 13px; color: #666;">' + description + '</div><a href="' + playlistUrl + '" target="_blank" class="playlist-box-link">Watch Playlist →</a></div>');

                $box.append($thumb).append($info);
                $gallery.append($box);
            });

            $table.replaceWith($gallery);
        });
    });
})();