MediaWiki:Common.js: Difference between revisions

From PRS
Jump to navigation Jump to search
← Older edit
No edit summary
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */


/* ── Intercept and block TMH attribute changes ── */
/* ============================================================
$(function () {
  Training Video – Video source loader + Synced Transcript
    if ($('.training-video-wrap').length === 0) return;
  ============================================================ */
 
    function lockControls() {
        var video = document.querySelector('.mw-file-element');
        if (!video) {
            setTimeout(lockControls, 100);
            return;
        }
 
        /* Block setAttribute from removing controls or adding disabled */
        var originalSetAttribute = video.setAttribute.bind(video);
        var originalRemoveAttribute = video.removeAttribute.bind(video);
 
        video.setAttribute = function (name, value) {
            if (name === 'disabled') return;
            if (name === 'controls') {
                return originalSetAttribute('controls', '');
            }
            return originalSetAttribute(name, value);
        };
 
        video.removeAttribute = function (name) {
            if (name === 'controls') return;
            return originalRemoveAttribute(name);
        };
 
        /* Block direct property assignment: video.disabled = true */
        Object.defineProperty(video, 'disabled', {
            get: function () { return false; },
            set: function () { /* block all attempts to set disabled */ },
            configurable: true
        });
 
        /* Set initial state */
        originalSetAttribute('controls', '');
        originalRemoveAttribute('disabled');
    }


    lockControls();
mw.hook('wikipage.content').add(function () {
});


/* ============================================================
  Training Video – Synced Transcript Sidebar
  ============================================================ */
$(function () {
     if ($('.training-video-wrap').length === 0) return;
     if ($('.training-video-wrap').length === 0) return;


     var $video     = $('.training-video-wrap video');
     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;
     if ($video.length === 0) return;


     var videoEl = $video[0];
     var videoEl = $video[0];
    var filename = $video.attr('data-file');


    if (!filename) return;
    /* ── Use MediaWiki API to get the real file URL ── */
    $.ajax({
        url: '/wiki/api.php',
        data: {
            action: 'query',
            titles: 'File:' + filename,
            prop: 'imageinfo',
            iiprop: 'url',
            format: 'json'
        },
        dataType: 'json',
        success: function (data) {
            var pages = data.query.pages;
            var page = pages[Object.keys(pages)[0]];
            if (page.imageinfo && page.imageinfo[0]) {
                var url = page.imageinfo[0].url;
                videoEl.src = url;
                videoEl.load();
            }
        }
    });
    /* ── Format seconds → m:ss ── */
     function fmt(s) {
     function fmt(s) {
         s = Math.floor(s);
         s = Math.floor(s);
Line 66: Line 45:
     }
     }


    var $entries  = $('.ts-entry');
    var $body    = $('.ts-scroll-body');
    var $markers  = $('.ts-progress-marker');
    var $fill    = $('.ts-progress-fill');
    var $timeDisp = $('.ts-time-display');
    /* ── Collect timestamp data from DOM ── */
     var timestamps = [];
     var timestamps = [];
     $entries.each(function () {
     $entries.each(function () {
Line 71: Line 57:
     });
     });


    /* ── Highlight the active transcript entry ── */
     function highlightActive() {
     function highlightActive() {
         var cur = videoEl.currentTime;
         var cur = videoEl.currentTime;
Line 91: Line 78:
     }
     }


    /* ── Update progress bar ── */
     function updateProgress() {
     function updateProgress() {
         if (!videoEl.duration) return;
         if (!videoEl.duration) return;
Line 98: Line 86:
     }
     }


    /* ── Bind native video events ── */
     $video.on('timeupdate', function () {
     $video.on('timeupdate', function () {
         highlightActive();
         highlightActive();
Line 111: Line 100:
     });
     });


    /* ── Transcript entry click → seek video ── */
     $entries.on('click', function () {
     $entries.on('click', function () {
         var t = parseInt($(this).data('time'), 10);
         var t = parseInt($(this).data('time'), 10);
Line 118: Line 108:
     });
     });


    /* ── Progress bar click → seek ── */
     $('.ts-progress-track').on('click', function (e) {
     $('.ts-progress-track').on('click', function (e) {
         var rect  = this.getBoundingClientRect();
         var rect  = this.getBoundingClientRect();
Line 124: Line 115:
     });
     });


    /* ── Marker click → seek ── */
     $markers.on('click', function (e) {
     $markers.on('click', function (e) {
         e.stopPropagation();
         e.stopPropagation();

Latest revision as of 02:27, 23 April 2026

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

/* ============================================================
   Training Video – Video source loader + Synced Transcript
   ============================================================ */

mw.hook('wikipage.content').add(function () {

    if ($('.training-video-wrap').length === 0) return;

    var $video = $('.training-video-wrap video');
    if ($video.length === 0) return;

    var videoEl = $video[0];
    var filename = $video.attr('data-file');

    if (!filename) return;

    /* ── Use MediaWiki API to get the real file URL ── */
    $.ajax({
        url: '/wiki/api.php',
        data: {
            action: 'query',
            titles: 'File:' + filename,
            prop: 'imageinfo',
            iiprop: 'url',
            format: 'json'
        },
        dataType: 'json',
        success: function (data) {
            var pages = data.query.pages;
            var page = pages[Object.keys(pages)[0]];
            if (page.imageinfo && page.imageinfo[0]) {
                var url = page.imageinfo[0].url;
                videoEl.src = url;
                videoEl.load();
            }
        }
    });

    /* ── Format seconds → m:ss ── */
    function fmt(s) {
        s = Math.floor(s);
        return Math.floor(s / 60) + ':' + ('0' + (s % 60)).slice(-2);
    }

    var $entries  = $('.ts-entry');
    var $body     = $('.ts-scroll-body');
    var $markers  = $('.ts-progress-marker');
    var $fill     = $('.ts-progress-fill');
    var $timeDisp = $('.ts-time-display');

    /* ── 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);
        });
        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) + '%');
        });
    });

    /* ── 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();
    });

});
/* ============================================================ */
Retrieved from "https://prsdigital.com.au/wiki/index.php?title=MediaWiki:Common.js&oldid=753"