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 - Working Thumbnails and Embeds */
(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; web-share',
                            'allowfullscreen': '',
                            'referrerpolicy': 'strict-origin-when-cross-origin'
                        })
                        .css({
                            'position': 'absolute',
                            'top': '0',
                            'left': '0',
                            'width': '100%',
                            'height': '100%'
                        });

                    $container.empty().append(iframe);
                }
            });

            // Fix 2: Transform gallery with YouTube iframes for 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;

                    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;

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

                    // Use YouTube iframe to show thumbnail (it will load properly in browser)
                    var $thumbFrame = $('<iframe>')
                        .attr({
                            'src': 'https://www.youtube.com/embed/videoseries?list=' + playlistId + '&controls=0&showinfo=0&rel=0&modestbranding=1',
                            'frameborder': '0',
                            'loading': 'lazy',
                            'style': 'pointer-events: none;'
                        })
                        .css({
                            'position': 'absolute',
                            'top': '0',
                            'left': '0',
                            'width': '100%',
                            'height': '100%'
                        });

                    $thumbLink.append($thumbFrame);
                    $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);
                }
            }
        });
    });
})();