MediaWiki:Common.js - Revision history

Prs at 02:27, 23 April 2026

2026-04-23T02:27:28Z

@@ Line 2: / Line 2: @@
 /* ============================================================
-    Training Video – Synced Transcript Sidebar
+    Training Video – Video source loader + Synced Transcript
     ============================================================ */
@@ Line 13: / Line 13: @@
      var videoEl = $video[0];
      /* ── Format seconds → m:ss ── */

Prs at 02:07, 23 April 2026

2026-04-23T02:07:27Z

@@ Line 2: / Line 2: @@
 /* ============================================================
-    Training Video – Video source loader + Synced Transcript
+    Training Video – Synced Transcript Sidebar
     ============================================================ */
@@ Line 13: / Line 13: @@
      var videoEl = $video[0];
      /* ── Format seconds → m:ss ── */

Prs at 01:51, 23 April 2026

2026-04-23T01:51:29Z

← Older revision		Revision as of 01:51, 23 April 2026
Line 5:		Line 5:
	============================================================ */		============================================================ */

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

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

Line 37:		Line 38:
	videoEl.load();		videoEl.load();
	} else {		} else {
	console.log('No imageinfo found ~~in response~~:', JSON.stringify(data));		console.log('No imageinfo found:', JSON.stringify(data));
	}		}
	},		},

Prs at 01:43, 23 April 2026

2026-04-23T01:43:37Z

← Older revision		Revision as of 01:43, 23 April 2026
Line 13:		Line 13:
	var videoEl = $video[0];		var videoEl = $video[0];
	var filename = $video.attr('data-file');		var filename = $video.attr('data-file');

			console.log('Training video init. Filename:', filename);

	if (filename) {		if (filename) {
	~~/* Remove TEST line if present */~~
	~~/* Use MediaWiki API to get the real file URL */~~
	$.ajax({		$.ajax({
	url: ~~mw.util.wikiScript(~~'api'),		url: '/wiki/api.php',
	data: {		data: {
	action: 'query',		action: 'query',
Line 28:		Line 28:
	dataType: 'json',		dataType: 'json',
	success: function (data) {		success: function (data) {
			console.log('API response received');
	var pages = data.query.pages;		var pages = data.query.pages;
	var page = pages[Object.keys(pages)[0]];		var page = pages[Object.keys(pages)[0]];
	if (page.imageinfo && page.imageinfo[0]) {		if (page.imageinfo && page.imageinfo[0]) {
	var url = page.imageinfo[0].url;		var url = page.imageinfo[0].url;
	videoEl.src = url;		console.log('Setting video src to:', url);
			videoEl.setAttribute('src', url);
	videoEl.load();		videoEl.load();
			} else {
			console.log('No imageinfo found in response:', JSON.stringify(data));
	}		}
			},
			error: function (err) {
			console.log('API error:', err);
	}		}
	});		});
			} else {
			console.log('No filename found in data-file attribute');
	}		}

Prs at 01:39, 23 April 2026

2026-04-23T01:39:20Z

← Older revision		Revision as of 01:39, 23 April 2026
Line 2:		Line 2:

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

	$(function () {		$(function () {

	~~/* Only run on pages that contain a training video wrapper */~~
	if ($('.training-video-wrap').length === 0) return;		if ($('.training-video-wrap').length === 0) return;

	~~/* ── Find elements ── */~~		var $video = $('.training-video-wrap video');
	var $video = $('.training-video-wrap video');		if ($video.length === 0) return;
	~~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~~; ~~// no video on this page~~		var videoEl = $video[0];
			var filename = $video.attr('data-file');

	var ~~videoEl~~ = ~~$video~~[0];		if (filename) {
			/* Remove TEST line if present */
			/* Use MediaWiki API to get the real file URL */
			$.ajax({
			url: mw.util.wikiScript('api'),
			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 ── */		/* ── Format seconds → m:ss ── */
Line 27:		Line 44:
	return Math.floor(s / 60) + ':' + ('0' + (s % 60)).slice(-2);		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 ── */		/* ── Collect timestamp data from DOM ── */
Line 44:		Line 67:
	$(this).toggleClass('ts-active', i === activeIdx);		$(this).toggleClass('ts-active', i === activeIdx);
	});		});
	~~/* Auto-scroll transcript panel to keep active line visible */~~
	var $active = $entries.eq(activeIdx);		var $active = $entries.eq(activeIdx);
	if ($active.length && $body.length) {		if ($active.length && $body.length) {
	var entryTop = $active.position().top;		var entryTop = $active.position().top;
	var bodyScrollTop = $body.scrollTop();		var bodyScrollTop = $body.scrollTop();
	var bodyHeight = $body.height();		var bodyHeight = $body.height();
	if (entryTop < 0 \|\| entryTop > bodyHeight - 60) {		if (entryTop < 0 \|\| entryTop > bodyHeight - 60) {
	$body.animate({ scrollTop: bodyScrollTop + entryTop - 60 }, 200);		$body.animate({ scrollTop: bodyScrollTop + entryTop - 60 }, 200);
Line 72:		Line 94:
	$video.on('loadedmetadata', function () {		$video.on('loadedmetadata', function () {
	$timeDisp.text('0:00 / ' + fmt(videoEl.duration));		$timeDisp.text('0:00 / ' + fmt(videoEl.duration));
	~~/* Position progress bar markers once duration is known */~~
	$markers.each(function () {		$markers.each(function () {
	var t = parseInt($(this).data('time'), 10);		var t = parseInt($(this).data('time'), 10);

Prs at 08:37, 22 April 2026

2026-04-22T08:37:05Z

← Older revision		Revision as of 08:37, 22 April 2026
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 disabled at prototype level before TMH loads ── */~~
	~~(function () {~~
	~~var originalSetAttribute = Element.prototype.setAttribute;~~
	~~var originalRemoveAttribute = Element.prototype.removeAttribute;~~

	~~Element.prototype.setAttribute = function (name, value) {~~
	~~if (this.classList && this.classList.contains('mw-file-element')) {~~
	~~if (name === 'disabled') return;~~
	~~if (name === 'controls') return originalSetAttribute.call(this, 'controls', '');~~
	}
	~~return originalSetAttribute.call(this, name, value);~~
	};

	~~Element.prototype.removeAttribute = function (name) {~~
	~~if (this.classList && this.classList.contains('mw-file-element')) {~~
	~~if (name === 'controls') return;~~
	}
	~~return originalRemoveAttribute.call(this, name);~~
	};
	~~})();~~

	~~/* ── Apply initial state once DOM is ready ── */~~
	~~$(function () {~~
	~~if ($('.training-video-wrap').length === 0) return;~~

	~~function lockControls() {~~
	~~var video = document.querySelector('.mw-file-element');~~
	~~if (!video) {~~
	~~setTimeout(lockControls, 100);~~
	~~return;~~
	}
	~~Element.prototype.removeAttribute.call(video, 'disabled');~~
	~~Element.prototype.setAttribute.call(video, 'controls', '');~~
	}

	~~lockControls();~~
	~~});~~

	/* ============================================================		/* ============================================================
	Training Video – Synced Transcript Sidebar		Training Video – Synced Transcript Sidebar
	============================================================ */		============================================================ */

	$(function () {		$(function () {

			/* Only run on pages that contain a training video wrapper */
	if ($('.training-video-wrap').length === 0) return;		if ($('.training-video-wrap').length === 0) return;

			/* ── Find elements ── */
	var $video = $('.training-video-wrap video');		var $video = $('.training-video-wrap video');
	var $entries = $('.ts-entry');		var $entries = $('.ts-entry');
Line 52:		Line 18:
	var $timeDisp = $('.ts-time-display');		var $timeDisp = $('.ts-time-display');

	if ($video.length === 0) return;		if ($video.length === 0) return; // no video on this page

	var videoEl = $video[0];		var videoEl = $video[0];

			/* ── Format seconds → m:ss ── */
	function fmt(s) {		function fmt(s) {
	s = Math.floor(s);		s = Math.floor(s);
Line 61:		Line 28:
	}		}

			/* ── Collect timestamp data from DOM ── */
	var timestamps = [];		var timestamps = [];
	$entries.each(function () {		$entries.each(function () {
Line 66:		Line 34:
	});		});

			/* ── Highlight the active transcript entry ── */
	function highlightActive() {		function highlightActive() {
	var cur = videoEl.currentTime;		var cur = videoEl.currentTime;
Line 75:		Line 44:
	$(this).toggleClass('ts-active', i === activeIdx);		$(this).toggleClass('ts-active', i === activeIdx);
	});		});
			/* Auto-scroll transcript panel to keep active line visible */
	var $active = $entries.eq(activeIdx);		var $active = $entries.eq(activeIdx);
	if ($active.length && $body.length) {		if ($active.length && $body.length) {
	var entryTop = $active.position().top;		var entryTop = $active.position().top;
	var bodyScrollTop = $body.scrollTop();		var bodyScrollTop = $body.scrollTop();
	var bodyHeight = $body.height();		var bodyHeight = $body.height();
	if (entryTop < 0 \|\| entryTop > bodyHeight - 60) {		if (entryTop < 0 \|\| entryTop > bodyHeight - 60) {
	$body.animate({ scrollTop: bodyScrollTop + entryTop - 60 }, 200);		$body.animate({ scrollTop: bodyScrollTop + entryTop - 60 }, 200);
Line 86:		Line 56:
	}		}

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

			/* ── Bind native video events ── */
	$video.on('timeupdate', function () {		$video.on('timeupdate', function () {
	highlightActive();		highlightActive();
Line 100:		Line 72:
	$video.on('loadedmetadata', function () {		$video.on('loadedmetadata', function () {
	$timeDisp.text('0:00 / ' + fmt(videoEl.duration));		$timeDisp.text('0:00 / ' + fmt(videoEl.duration));
			/* Position progress bar markers once duration is known */
	$markers.each(function () {		$markers.each(function () {
	var t = parseInt($(this).data('time'), 10);		var t = parseInt($(this).data('time'), 10);
Line 106:		Line 79:
	});		});

			/* ── 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 113:		Line 87:
	});		});

			/* ── 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 119:		Line 94:
	});		});

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

Prs at 08:33, 22 April 2026

2026-04-22T08:33:52Z

@@ Line 1: / Line 1: @@
 /* Any JavaScript here will be loaded for all users on every page load. */
-/* ── Intercept and block TMH attribute changes ── */
+/* ── Intercept disabled at prototype level before TMH loads ── */
 $(function () {
      if ($('.training-video-wrap').length === 0) return;
@@ Line 11: / Line 32: @@
              return;
+         }
+         Element.prototype.removeAttribute.call(video, 'disabled');
-        /* Block setAttribute */
+         Element.prototype.setAttribute.call(video, 'controls', '');
+     }

Prs at 08:31, 22 April 2026

2026-04-22T08:31:02Z

← Older revision		Revision as of 08:31, 22 April 2026
Line 12:		Line 12:
	}		}

	/* Block setAttribute ~~from removing controls or adding disabled~~ */		/* Block setAttribute */
	var originalSetAttribute = video.setAttribute.bind(video);		var originalSetAttribute = video.setAttribute.bind(video);
	var originalRemoveAttribute = video.removeAttribute.bind(video);		var originalRemoveAttribute = video.removeAttribute.bind(video);
Line 18:		Line 18:
	video.setAttribute = function (name, value) {		video.setAttribute = function (name, value) {
	if (name === 'disabled') return;		if (name === 'disabled') return;
	if (name === 'controls') {		if (name === 'controls') return originalSetAttribute('controls', '');
	return originalSetAttribute('controls', '');
	}
	return originalSetAttribute(name, value);		return originalSetAttribute(name, value);
	};		};
Line 29:		Line 27:
	};		};

	/* Block direct property assignment~~: video.disabled = true~~ */		/* Block direct property assignment */
	Object.defineProperty(video, 'disabled', {		Object.defineProperty(video, 'disabled', {
	get: function () { return false; },		get: function () { return false; },
	set: function () { /* ~~block all attempts to set disabled~~ */ },		set: function () { /* blocked */ },
	configurable: true		configurable: true
			});

			/* MutationObserver as a second layer —
			if disabled attribute sneaks in via another path, remove it immediately */
			var observer = new MutationObserver(function (mutations) {
			mutations.forEach(function (mutation) {
			if (mutation.attributeName === 'disabled') {
			originalRemoveAttribute('disabled');
			}
			if (mutation.attributeName === 'controls') {
			if (!video.hasAttribute('controls')) {
			originalSetAttribute('controls', '');
			}
			}
			});
			});

			observer.observe(video, {
			attributes: true,
			attributeFilter: ['controls', 'disabled']
	});		});

Prs at 08:28, 22 April 2026

2026-04-22T08:28:40Z

← Older revision		Revision as of 08:28, 22 April 2026
Line 17:		Line 17:

	video.setAttribute = function (name, value) {		video.setAttribute = function (name, value) {
	if (name === 'disabled') return; ~~// block disabled~~		if (name === 'disabled') return;
	if (name === 'controls') {		if (name === 'controls') {
	return originalSetAttribute('controls', ''); ~~// always keep controls~~		return originalSetAttribute('controls', '');
	}		}
	return originalSetAttribute(name, value);		return originalSetAttribute(name, value);
Line 25:		Line 25:

	video.removeAttribute = function (name) {		video.removeAttribute = function (name) {
	if (name === 'controls') return~~; // block removal of controls~~		if (name === 'controls') return;
	~~if (name === 'disabled') return originalRemoveAttribute('disabled')~~;
	return originalRemoveAttribute(name);		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 */		/* Set initial state */

Prs at 08:26, 22 April 2026

2026-04-22T08:26:48Z

← Older revision		Revision as of 08:26, 22 April 2026
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. */

	/* ── ~~Prevent~~ TMH ~~from removing native video controls~~ ── */		/* ── Intercept and block TMH attribute changes ── */
	$(function () {		$(function () {
	if ($('.training-video-wrap').length === 0) return;		if ($('.training-video-wrap').length === 0) return;

	function ~~startGuarding~~() {		function lockControls() {
	var video = document.querySelector('.mw-file-element');		var video = document.querySelector('.mw-file-element');
	if (!video) {		if (!video) {
	setTimeout(~~startGuarding~~, 100);		setTimeout(lockControls, 100);
	return;		return;
	}		}

	/* ~~Watch for TMH~~ removing controls ~~and~~ adding disabled */		/* Block setAttribute from removing controls or adding disabled */
	var ~~observer~~ = ~~new MutationObserver(function (mutations) {~~		var originalSetAttribute = video.setAttribute.bind(video);
	~~mutations~~.~~forEach(function (mutation) {~~		var originalRemoveAttribute = video.removeAttribute.bind(video);
	~~if (mutation.attributeName === 'controls') {~~
	~~if (video~~.~~getAttribute~~(~~'controls') === null) {~~
	video~~.setAttribute('controls', ''~~);
	}
	}
	~~if (mutation.attributeName ==~~= ~~'disabled') {~~
	~~if (~~video.~~hasAttribute~~(~~'disabled')) {~~
	video~~.removeAttribute('disabled');~~
	}
	}
	~~});~~
	});

	~~observer~~.~~observe~~(~~video~~, {		video.setAttribute = function (name, value) {
	~~attributes: true~~,		if (name === 'disabled') return; // block disabled
	~~attributeFilter: [~~'controls', 'disabled']		if (name === 'controls') {
	});		return originalSetAttribute('controls', ''); // always keep controls
			}
			return originalSetAttribute(name, value);
			};

			video.removeAttribute = function (name) {
			if (name === 'controls') return; // block removal of controls
			if (name === 'disabled') return originalRemoveAttribute('disabled');
			return originalRemoveAttribute(name);
			};

	/* Set initial state */		/* Set initial state */
	~~video.setAttribute~~('controls', '');		originalSetAttribute('controls', '');
	~~video.removeAttribute~~('disabled');		originalRemoveAttribute('disabled');
	}		}

	~~startGuarding~~();		lockControls();
	});		});