MediaWiki:Common.js: Difference between revisions

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






/* Level Up RN - Fixed 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);
                    console.log('Created iframe for playlist:', playlistId);
                }
            });

            // Fix 2: Transform gallery table with DIRECT YouTube 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);

                    // Use YouTube Data API to get first video thumbnail
                    // Format: https://img.youtube.com/vi/{VIDEO_ID}/hqdefault.jpg
                    // For playlists, we need to fetch the first video

                    // Try using noembed.com as a proxy
                    var $img = $('<img>')
                        .attr('alt', title)
                        .attr('src', 'https://via.placeholder.com/480x360/E52D27/FFFFFF?text=Loading...')
                        .css({
                            'width': '100%',
                            'height': '100%',
                            'object-fit': 'cover',
                            'position': 'absolute',
                            'top': '0',
                            'left': '0'
                        });

                    // Fetch playlist info using CORS proxy
                    $.ajax({
                        url: 'https://noembed.com/embed?url=https://www.youtube.com/playlist?list=' + playlistId,
                        dataType: 'json',
                        success: function(data) {
                            if (data && data.thumbnail_url) {
                                $img.attr('src', data.thumbnail_url.replace('hqdefault', 'maxresdefault'));
                            }
                        },
                        error: function() {
                            // Fallback: Use YouTube thumbnail
                            $img.attr('src', 'https://i.ytimg.com/vi/' + playlistId + '/hqdefault.jpg');
                        }
                    });

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