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. */





/* Level Up RN - Comprehensive Fix for Playlists */
(function() {
    'use strict';

    mw.loader.using(['jquery'], function() {
        $(document).ready(function() {

            // Fix 1: Create working iframe embeds for playlist pages
            $('.youtube-playlist-embed[data-playlist-id]').each(function() {
                var $container = $(this);
                var playlistId = $container.attr('data-playlist-id');

                if (playlistId) {
                    var iframe = $('<iframe>')
                        .attr({
                            'src': 'https://www.youtube.com/embed/videoseries?list=' + playlistId,
                            'frameborder': '0',
                            'allow': 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
                            'allowfullscreen': ''
                        })
                        .css({
                            'position': 'absolute',
                            'top': '0',
                            'left': '0',
                            'width': '100%',
                            'height': '100%'
                        });

                    $container.empty().append(iframe);
                    console.log('Created iframe for playlist:', playlistId);
                }
            });

            // Fix 2: Transform gallery table with real thumbnails
            var pageName = mw.config.get('wgPageName');
            if (pageName === 'Category:Level_Up_RN_Videos' || pageName === 'Category:Level_Up_RN') {
                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 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();

                    if (!playlistId || !wikiPageUrl) return;

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

                    // Create image - try to get thumbnail via YouTube API
                    var $img = $('<img>')
                        .attr('alt', title)
                        .css({
                            'width': '100%',
                            'height': '100%',
                            'object-fit': 'cover',
                            'position': 'absolute',
                            'top': '0',
                            'left': '0'
                        });

                    // Fetch thumbnail using JSONP
                    $.ajax({
                        url: 'https://www.youtube.com/oembed?url=https://www.youtube.com/playlist?list=' + playlistId + '&format=json',
                        dataType: 'jsonp',
                        success: function(data) {
                            if (data && data.thumbnail_url) {
                                $img.attr('src', data.thumbnail_url);
                            }
                        },
                        error: function() {
                            // Fallback: use generic YouTube playlist icon
                            $img.attr('src', 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'120\' height=\'90\'%3E%3Crect fill=\'%23E52D27\' width=\'120\' height=\'90\'/%3E%3Cpath fill=\'%23fff\' d=\'M60 20L30 70h20v10h20V70h20z\'/%3E%3C/svg%3E');
                        }
                    });

                    $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);
                }
            }
        });
    });
})();