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 - Final Version */
(function() {
    'use strict';

    // Only run on Level Up RN Videos category pages
    var pageName = mw.config.get('wgPageName');
    if (pageName !== 'Category:Level_Up_RN_Videos' && pageName !== '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 $linkCell = $cells.eq(2);

                // Get playlist ID from data attribute
                var playlistId = $titleCell.attr('data-playlist-id');

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

                var $watchLink = $linkCell.find('a').first();

                if (!playlistId || !wikiPageUrl) return;

                // Create box
                var $box = $('<div class="playlist-box"></div>');
                var $thumb = $('<div class="playlist-box-thumb"></div>');
                var $thumbLink = $('<a></a>').attr('href', wikiPageUrl);

                // Create image with fallback chain
                var $img = $('<img>')
                    .attr('alt', title)
                    .css({'width': '100%', 'height': '100%', 'object-fit': 'cover'})
                    .on('error', function() {
                        // If first attempt fails, try a different thumbnail
                        var currentSrc = $(this).attr('src');
                        if (currentSrc.indexOf('maxresdefault') !== -1) {
                            $(this).attr('src', 'https://i.ytimg.com/vi/' + playlistId + '/hqdefault.jpg');
                        } else if (currentSrc.indexOf('hqdefault') !== -1) {
                            $(this).attr('src', 'https://i.ytimg.com/vi/' + playlistId + '/mqdefault.jpg');
                        } else {
                            // Last resort: show a placeholder
                            $(this).replaceWith('<div style="width:100%;height:100%;background:#ccc;display:flex;align-items:center;justify-content:center;color:#666;font-size:48px;">▶</div>');
                        }
                    });

                // Try to fetch thumbnail using YouTube's img service
                // We'll try the playlist thumbnail first
                fetchPlaylistThumbnail(playlistId, $img);

                $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="' + wikiPageUrl + '" class="playlist-box-link">Watch Playlist →</a>');

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

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

            function fetchPlaylistThumbnail(playlistId, $img) {
                // Try to get thumbnail from YouTube's oembed service
                var oembedUrl = 'https://www.youtube.com/oembed?url=https://www.youtube.com/playlist?list=' + playlistId + '&format=json';

                $.ajax({
                    url: oembedUrl,
                    dataType: 'jsonp',
                    success: function(data) {
                        if (data && data.thumbnail_url) {
                            $img.attr('src', data.thumbnail_url);
                        } else {
                            // Fallback to standard format
                            $img.attr('src', 'https://i.ytimg.com/vi/' + playlistId + '/maxresdefault.jpg');
                        }
                    },
                    error: function() {
                        // Fallback: use playlist ID as video ID (may or may not work)
                        $img.attr('src', 'https://i.ytimg.com/vi/' + playlistId + '/maxresdefault.jpg');
                    }
                });
            }
        });
    });
})();