MediaWiki:Common.js: Difference between revisions

Revision as of 12:56, 7 August 2025

/* Any JavaScript here will be loaded for all users on every page load. */
// Audio Player System
// Audio Player System
/* Any JavaScript here will be loaded for all users on every page load. */
// Audio Player System
// Mobile audio unlocker
/* Any JavaScript here will be loaded for all users on every page load. */
// Audio Player System

// Mobile audio unlocker (optional but harmless)
document.addEventListener('DOMContentLoaded', function () {
    var isMobile = /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);
    if (isMobile) {
        var unlockAudio = document.createElement('audio');
        unlockAudio.src = "data:audio/ogg;base64,T2dnUwACAAAAAAAAAABVDxXAAAAAAACf5tYBHgF2b3JiaXMAAAAAAkSsAAAAAAD+/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==";
        unlockAudio.muted = true;
        unlockAudio.playsInline = true;
        unlockAudio.autoplay = true;
        unlockAudio.preload = "auto";
        document.body.appendChild(unlockAudio);
        unlockAudio.play().catch(() => {});
    }
});

mw.hook('wikipage.content').add(function($content) {
    $content.find('.audioplayer').each(function() {
        var $container = $(this);
        var filename = $container.attr('data-filename');
        var caption = $container.attr('data-caption') || 'Audio File';
        
        if (!filename) return;

        var baseName = filename.replace(/\.\w+$/, ''); // remove extension if present

        // Generate unique ID
        var playerId = 'audio_' + Math.random().toString(36).substr(2, 9);

        // Create player HTML
        var $player = $('<div>').css({
            'display': 'inline-flex',
            'align-items': 'center',
            'gap': '12px'
        });

        var $playerBox = $('<div>').css({
            'border': '1px solid #8B7355',
            'padding': '8px',
            'border-radius': '4px',
            'background-color': '#F5F0E8',
            'width': '200px'
        });

        var $button = $('<button>').attr('id', playerId + '_btn').text('▶️').css({
            'padding': '4px 8px',
            'margin-right': '8px',
            'font-size': '12px',
            'border': '1px solid #8B7355',
            'background': '#D4C4A8',
            'color': '#5D4E37'
        });

        var $progressContainer = $('<div>').css({
            'display': 'inline-block',
            'width': '120px',
            'height': '6px',
            'background-color': '#D4C4A8',
            'border-radius': '3px',
            'vertical-align': 'middle'
        });

        var $progress = $('<div>').attr('id', playerId + '_progress').css({
            'height': '100%',
            'background-color': '#8B7355',
            'border-radius': '3px',
            'width': '0%',
            'transition': 'width 0.1s'
        });

        var $caption = $('<span>').text(caption).css({
            'color': '#8B7355',
            'font-style': 'italic'
        });

        // Build structure
        $progressContainer.append($progress);
        $playerBox.append($button).append($progressContainer);
        $player.append($playerBox).append($caption);

        // Replace container content
        $container.empty().append($player);

        // Create real DOM <audio> element with both sources
        var $realAudio = $('<audio preload="metadata" playsinline style="display:none;">')
            .append($('<source>').attr('src', 'https://tuyin.online/images/' + baseName + '.ogg').attr('type', 'audio/ogg'))
            .append($('<source>').attr('src', 'https://tuyin.online/images/' + baseName + '.mp3').attr('type', 'audio/mpeg'));
        $container.append($realAudio);

        var audio = $realAudio[0];
        var isPlaying = false;

        $button.click(function() {
            if (isPlaying) {
                audio.pause();
                $button.text('▶️');
                isPlaying = false;
            } else {
                audio.play().then(function() {
                    $button.text('⏸️');
                    isPlaying = true;
                }).catch(function(error) {
                    alert('Could not play audio: ' + error.message);
                });
            }
        });

        audio.addEventListener('timeupdate', function() {
            if (audio.duration) {
                var percentage = (audio.currentTime / audio.duration) * 100;
                $progress.css('width', percentage + '%');
            }
        });

        audio.addEventListener('ended', function() {
            $button.text('▶️');
            $progress.css('width', '0%');
            isPlaying = false;
        });
    });
});

//Translator Tool
mw.hook('wikipage.content').add(function ($content) {
    // Only run on Translator page
    if (mw.config.get('wgPageName') !== 'Translator') return;

    const languages = ['dwarven', 'orcian', 'ratik', 'elvic', 'snekian', 'trogian'];
    const dictionaries = {};
    let loaded = 0;

    const container = $('<div>').css({ padding: '1em', background: '#f5f0e8', border: '1px solid #ccc' });
    const input = $('<textarea>').attr('placeholder', 'Enter English text...').css({ width: '100%', height: '80px', marginBottom: '1em' });
    const output = $('<div>').attr('id', 'translator-output');

    container.append(input).append(output);
    $content.prepend(container);

    // Load dictionaries
    languages.forEach(lang => {
        $.get(`/wiki/index.php?title=${lang.charAt(0).toUpperCase() + lang.slice(1)}&action=render`, html => {
            const dict = {};
            $(html).find('table.wikitable tr').each(function () {
                const cells = $(this).find('td');
                if (cells.length >= 2) {
                    const english = $(cells[0]).text().trim().toLowerCase();
                    const foreign = $(cells[1]).text().trim();
                    if (english && foreign) {
                        dict[english] = foreign;
                    }
                }
            });
            dictionaries[lang] = dict;
            loaded++;
            if (loaded === languages.length) setupTranslation();
        });
    });

    function setupTranslation() {
        input.on('input', function () {
            const text = input.val().trim();
            if (!text) {
                output.empty();
                return;
            }

            const words = text.split(/\s+/).map(w => w.toLowerCase());
            const resultHtml = $('<div>');

            languages.forEach(lang => {
                const dict = dictionaries[lang];
                const translated = words.map(w => dict[w] || `[${w}]`);
                const normal = translated.join(' ');
                const script = translated.map(w => w.toUpperCase()).join(' ');

                const block = $('<div>').css({ marginBottom: '1em' });
                block.append($('<div>').text(lang.charAt(0).toUpperCase() + lang.slice(1) + ':').css({ fontWeight: 'bold' }));
                block.append($('<div>').text(normal));
                block.append($('<div>').html(`<span class="${lang}">${script}</span>`));
                resultHtml.append(block);
            });

            output.html(resultHtml);
        });
    }
});