MediaWiki:Common.js: Difference between revisions

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


/* YouTube Playlists Gallery Enhancement - Updated */
(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.sortable').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 $titleLink = $titleCell.find('a').first();
                var playlistUrl = $titleLink.attr('href');
                var title = $titleLink.text();
                var description = $descCell.text().trim();

                if (!playlistUrl) return;

                // Extract playlist ID from URL
                var match = playlistUrl.match(/list=([^&]+)/);
                if (!match) return;
                var playlistId = match[1];

                // Use playlist thumbnail - YouTube provides these
                var thumbUrl = 'https://i.ytimg.com/vi/' + playlistId + '/hqdefault.jpg';

                // Try maxresdefault first, fall back to hqdefault
                var $img = $('<img>').attr({
                    'src': 'https://i.ytimg.com/vi/' + playlistId + '/maxresdefault.jpg',
                    'alt': title,
                    'onerror': "this.onerror=null; this.src='https://i.ytimg.com/vi/" + playlistId + "/hqdefault.jpg'"
                });

                var $box = $('<div class="playlist-box"></div>');
                var $thumb = $('<div class="playlist-box-thumb"></div>');
                var $thumbLink = $('<a></a>').attr({
                    'href': playlistUrl,
                    'target': '_blank'
                });

                $thumbLink.append($img);
                $thumbLink.append('<div class="playlist-box-overlay">▶ Playlist</div>');
                $thumb.append($thumbLink);

                var $info = $('<div class="playlist-box-info"></div>');
                $info.append('<div class="playlist-box-title">' + title + '</div>');
                if (description) {
                    $info.append('<div style="margin: 8px 0; font-size: 13px; color: #666;">' + description + '</div>');
                }
                $info.append('<a href="' + playlistUrl + '" target="_blank" class="playlist-box-link">Watch Playlist →</a>');

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

            if ($gallery.children().length > 0) {
                $table.replaceWith($gallery);
            }
        });
    });
})();