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)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

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


function TimeSegment(trackIndex, startTime, endTime, element) {
	this.trackIndex = trackIndex;
	this.startTime = startTime;
	this.endTime = endTime;
	this.element = element;
}


TimeSegment.prototype.isDisabled = function() {
	return !this.element.hasClass('active');
};


TimeSegment.prototype.disable = function() {
	this.element.removeClass('active');
};


TimeSegment.prototype.update = function(trackIndex, currentTime) {
	var percent = 100.0 * Math.max(currentTime - this.startTime, 0) / (this.endTime - this.startTime)
	if (trackIndex === this.trackIndex && percent > 0.0 && percent < 100.0) {
		this.element.get(0).style.setProperty('--gauge-fill',  percent + "%");
		this.element.addClass('active');
	} else {
		this.disable();
	}
};


function PlaybackData() {
	this.autostopTime = null;
	this.segments = [];
	this.htmlAudios = [];
	this.closestPlayableSegIndex = 0;
	this.playingAudioIndex = null;
};


var playbackData = new PlaybackData();


$(document).ready(function() {


    // Create one audio player per declared track

    $('*[data-track]').each(function(trackNumber) {
        var audio = $('<audio></audio>')
			.prop('controls', true)
			.attr('preload', 'auto')
			.attr('src', $(this).attr('data-track'));
        
		$('<figure></figure>')
			.append($('<figcaption></figcaption>')
				.text($(this).attr('data-track-title')))
			.appendTo($(this))
			.append(audio);

		function onPlay(event) {
			if (playbackData.playingAudioIndex !== null
				&& playbackData.playingAudioIndex !== trackNumber) {
				playbackData.htmlAudios[playbackData.playingAudioIndex].pause();
			}
			playbackData.playingAudioIndex = trackNumber;
		}
		
		function onPause(event) {
			playbackData.autostopTime = null;
			playbackData.playingAudioIndex = null;
			playbackData.closestPlayableSegIndex = 0;
		}
		
		function onSeeked(event) {
			playbackData.closestPlayableSegIndex = 0;
			playbackData.segments.forEach(function(s) { s.disable(); });
		}
		
		function onEnded(event) {
			var nextPlayingAudioIndex = playbackData.playingAudioIndex + 1;
			onPause(event);
			onSeeked(event);
			if (nextPlayingAudioIndex < playbackData.htmlAudios.length) {
				playbackData.htmlAudios[nextPlayingAudioIndex].play();
			}
		}
		
        audio.on('play', onPlay);
        audio.on('pause', onPause);
		audio.on('ended', onEnded);
		audio.on('seeked', onSeeked);
		
        playbackData.htmlAudios.push(audio.get(0));
    });


    // Create hyperlinks out of reconstruction markup

    $('*[data-def]').click(function() {
        var url = location.href;
        location.href = "#" + $(this).attr('data-def');
        history.replaceState(null, null, url);
    });


    // Update timing data

    $('*[data-segment]').each(function() {

        var m = /(?<track>\d+\/)?((?<minuteStart>\d+):)?(?<secondStart>\d+(.\d*)?)-((?<minuteEnd>\d+):)?(?<secondEnd>\d+(.\d*)?)/.exec($(this).attr('data-segment'));

		if (m) {
			playbackData.segments.push(new TimeSegment(
				m.groups.track? parseInt(m.groups.track) : 0,
				(m.groups.minuteStart? parseInt(m.groups.minuteStart) : 0) * 60 + parseFloat(m.groups.secondStart),
				(m.groups.minuteEnd? parseInt(m.groups.minuteEnd) : 0) * 60 + parseFloat(m.groups.secondEnd),
				$(this).find('.meta-progress') ));
		}
		else {
			$(this).append('Wrong time segment');
		}
	});

	playbackData.segments.sort(function(a, b) { return a.startTime - b.startTime; });

	
	// Playing tick
	
	window.setInterval(function() {
		if (playbackData.playingAudioIndex === null) {
			return;
		}
		var playingAudio = playbackData.htmlAudios[playbackData.playingAudioIndex];
		var currentTime = playingAudio.currentTime;
		
		var previouSegmentActive = false;
		
		for(var segIndex = playbackData.closestPlayableSegIndex;
			segIndex < playbackData.segments.length;
			segIndex++) {
			var segment = playbackData.segments[segIndex];
			segment.update(playbackData.playingAudioIndex, currentTime);
			
			if (segment.isDisabled()) {
				if (segment.startTime > currentTime) {
					break;
				}
				continue;
			}

			if (!previouSegmentActive) {
				playbackData.closestPlayableSegIndex = segIndex;
			}
			previouSegmentActive = true;
		}
		
		if (playbackData.autostopTime !== null && currentTime >= playbackData.autostopTime) {
			playingAudio.pause();
			return;
		}

	}, 50);

	
	// Implement the context menu for music references
	
	
	$.getScript('/w/index.php?title=MediaWiki:Jquery_context_popup.js&action=raw&ctype=text/javascript', function() {
		console.log('loaded plugin')
		var myMenu =  '<div>\
			  <a href="#"><i id="v-hap" class="material-icons">sentiment_very_satisfied</i></a>\
			  <a href="#"><i id="hap" class="material-icons">sentiment_satisfied</i></a>\
			  <a href="#"><i id="neut" class="material-icons">sentiment_neutral</i></a>\
			  <a href="#"><i id="unhap" class="material-icons">sentiment_dissatisfied</i></a>\
			  <a href="#"><i id="v-unhap" class="material-icons">sentiment_very_dissatisfied</i></a>\
			</div>';
			
		$('*[data-segment]').popup({
			content: myMenu,

			// Where the popup will show by default- top. 
			// Other options: right, bottom, or left
			position: 'bottom',  
			
			// Menu Element theme. Defaults to popupTheme, but custom class can be set instead
			theme: "popupTheme",

			// Default no style, will revert to default colours. 
			// Other options: blue, red, green, custom
			style: "",  

			// Standard animation by default. 
			// Other options: flip, grow, bounce
			animation: "standard",  

			// Default set to "click".
			// Can also be set to hover
			event: 'hover', 

			// When true, clicking off the menu closes it. When false, only clicking on the menu closes it.
			hideOnClick: true,  
		});
		
		console.log('set menus')
	});
});