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. */
 
/* ── Fix TimedMediaHandler: remove disabled, block popup ── */
$(function () {
    if ($('.training-video-wrap').length === 0) return;
 
    setTimeout(function () {
        /* Remove disabled attribute so video can play inline */
        $('.mw-file-element').each(function () {
            $(this).removeAttr('disabled');
            $(this).attr('controls', 'controls');
        });
 
        /* Block the popup link and play inline instead */
        $('a.mw-tmh-play').on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var video = $(this).closest('.mw-tmh-player').find('video')[0];
            if (video) {
                video.play();
            }
        });
 
        /* Now initialise the transcript sync */
        initTranscript();
 
    }, 600);
});
 
/* ── Transcript sync ── */
function initTranscript() {
 
    var $video    = $('.training-video-wrap video');
    var $entries  = $('.ts-entry');
    var $body     = $('.ts-scroll-body');
    var $markers  = $('.ts-progress-marker');
    var $fill     = $('.ts-progress-fill');
    var $timeDisp = $('.ts-time-display');
 
    if ($video.length === 0) return;
 
    var videoEl = $video[0];
 
    /* ── Format seconds → m:ss ── */
    function fmt(s) {
        s = Math.floor(s);
        return Math.floor(s / 60) + ':' + ('0' + (s % 60)).slice(-2);
    }
 
    /* ── Collect timestamp data from DOM ── */
    var timestamps = [];
    $entries.each(function () {
        timestamps.push(parseInt($(this).data('time'), 10));
    });
 
    /* ── Highlight the active transcript entry ── */
    function highlightActive() {
        var cur = videoEl.currentTime;
        var activeIdx = 0;
        for (var i = 0; i < timestamps.length; i++) {
            if (cur >= timestamps[i]) activeIdx = i;
        }
        $entries.each(function (i) {
            $(this).toggleClass('ts-active', i === activeIdx);
        });
        /* Auto-scroll transcript panel to keep active line visible */
        var $active = $entries.eq(activeIdx);
        if ($active.length && $body.length) {
            var entryTop      = $active.position().top;
            var bodyScrollTop = $body.scrollTop();
            var bodyHeight    = $body.height();
            if (entryTop < 0 || entryTop > bodyHeight - 60) {
                $body.animate({ scrollTop: bodyScrollTop + entryTop - 60 }, 200);
            }
        }
    }
 
    /* ── Update progress bar ── */
    function updateProgress() {
        if (!videoEl.duration) return;
        var pct = (videoEl.currentTime / videoEl.duration) * 100;
        $fill.css('width', pct + '%');
        $timeDisp.text(fmt(videoEl.currentTime) + ' / ' + fmt(videoEl.duration));
    }
 
    /* ── Bind native video events ── */
    $video.on('timeupdate', function () {
        highlightActive();
        updateProgress();
    });
 
    $video.on('loadedmetadata', function () {
        $timeDisp.text('0:00 / ' + fmt(videoEl.duration));
        $markers.each(function () {
            var t = parseInt($(this).data('time'), 10);
            $(this).css('left', ((t / videoEl.duration) * 100) + '%');
        });
    });
 
    /* If metadata already loaded */
    if (videoEl.readyState >= 1) {
        $timeDisp.text('0:00 / ' + fmt(videoEl.duration));
        $markers.each(function () {
            var t = parseInt($(this).data('time'), 10);
            $(this).css('left', ((t / videoEl.duration) * 100) + '%');
        });
    }
 
    /* ── Transcript entry click → seek video ── */
    $entries.on('click', function () {
        var t = parseInt($(this).data('time'), 10);
        videoEl.currentTime = t;
        if (videoEl.paused) videoEl.play();
        highlightActive();
    });
 
    /* ── Progress bar click → seek ── */
    $('.ts-progress-track').on('click', function (e) {
        var rect  = this.getBoundingClientRect();
        var ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
        videoEl.currentTime = ratio * videoEl.duration;
    });
 
    /* ── Marker click → seek ── */
    $markers.on('click', function (e) {
        e.stopPropagation();
        var t = parseInt($(this).data('time'), 10);
        videoEl.currentTime = t;
        if (videoEl.paused) videoEl.play();
    });
}