Benutzer:Nw520/AudioPlayer.js

/* eslint-disable max-len */
// <nowiki>
/******************************************************************************
 * AudioPlayer
 * Spielt Audiodateien direkt auf der Seite ab.
 *
 * Maintainer: nw520
 ******************************************************************************/

mw.hook( 'wikipage.content' ).add( function ( $container ) {
	var CLASS_LOADING = 'ext-audioplayer-loading';

	var CLASS_PLAYING = 'ext-audioplayer-playing';

	/** @type {HTMLAudioElement} */
	var audio = null;

	var cssInjected = false;

	/** @type {HTMLElement} */
	var previousPlayer = null;

	var strings = {
		'ext-audioplayer-loadingfailed': {
			de: 'Beim Laden der Audiodatei ist ein Fehler aufgetreten.',
			en: 'An error occurred while loading the audio file.'
		}
	};

	function main() {
		setupStrings();

		$container[ 0 ].querySelectorAll( '.voy-audio a[href]' ).forEach( function ( item ) {
			item.addEventListener( 'click', function ( e ) {
				e.preventDefault();
				if ( !cssInjected ) {
					mw.loader.using( 'mediawiki.util' ).then( function () {
						mw.util.addCSS( '.ext-audioplayer-loading{animation:ext-audioplayer-loading .7s infinite alternate}.ext-audioplayer-loading,.ext-audioplayer-loading *{cursor:progress}.ext-audioplayer-playing img{filter:invert(51%) sepia(68%) saturate(395%) hue-rotate(98deg) brightness(86%) contrast(88%)}@keyframes ext-audioplayer-loading{0%{opacity:1}to{opacity:.25}}' );
						cssInjected = true;
					} );
				}

				var currentPlayer = item.closest( '.voy-audio' );
				var audioPlaying = audio !== null && audio.duration > 0 && !audio.paused;
				var loading = currentPlayer.classList.contains( CLASS_LOADING );

				// Cleanup
				if ( audio !== null ) {
					audio.pause();
				}
				resetPlayer( previousPlayer );

				// Play
				if ( !audioPlaying && !loading || previousPlayer !== currentPlayer ) {
					// Only play, if clicked on other link, audio was already paused and not loading
					previousPlayer = currentPlayer;

					// Create audio
					audio = new Audio( item.href );

					if ( e.shiftKey ) {
						// Slower playback when shift-key is pressed
						audio.playbackRate = 0.5;
					}

					audio.addEventListener( 'loadstart', function () {
						currentPlayer.classList.add( CLASS_LOADING );
					} );
					[ 'abort', 'canplaythrough' ].forEach( function ( event ) {
						audio.addEventListener( event, function () {
							currentPlayer.classList.remove( CLASS_LOADING );
						} );
					} );
					[ 'ended', 'pause', 'waiting' ].forEach( function ( event ) {
						audio.addEventListener( event, function () {
							currentPlayer.classList.remove( CLASS_PLAYING );
						} );
					} );
					[ 'play', 'playing' ].forEach( function ( event ) {
						audio.addEventListener( event, function () {
							currentPlayer.classList.add( CLASS_PLAYING );
						} );
					} );
					audio.addEventListener( 'error', function () {
						mw.notify( mw.msg( 'ext-audioplayer-loadingfailed' ), {
							title: 'AudioPlayer',
							type: 'error'
						} );
						currentPlayer.classList.remove( CLASS_LOADING );
					} );

					audio.play();
				}
			} );
		} );
	}

	function setupStrings() {
		var lang = mw.config.get( 'wgUserLanguage' );
		mw.messages.set( Object.fromEntries( Object.keys( strings ).map( function ( stringKey ) {
			return [ stringKey, strings[ stringKey ][ lang ] !== undefined ? strings[ stringKey ][ lang ] : strings[ stringKey ].en ];
		} ) ) );
	}

	/**
	 * @param {HTMLElement} player
	 */
	function resetPlayer( player ) {
		if ( player !== null ) {
			player.classList.remove( CLASS_LOADING );
			player.classList.remove( CLASS_PLAYING );
		}
	}

	main();
} );