MediaWiki:Gadget-makertube.js: Unterschied zwischen den Versionen

Version vom 19. September 2026, 19:55 Uhr

/**
 * Gadget-MakerTube.js
 * ============================================================================
 * Bettet Videos von makertube.net ein (eine PeerTube-Instanz).
 *
 * ZWEI-KLICK-SPERRE
 * Der Player liegt auf makertube.net. Beim Laden erfährt der Server die
 * IP-Adresse des Besuchers. PeerTube verteilt Videos zusätzlich per
 * Peer-to-Peer (WebTorrent): dabei sieht nicht nur der Server, sondern auch
 * jeder andere Zuschauer desselben Videos die IP-Adresse. Dieses Gadget
 * schaltet P2P deshalb standardmäßig ab (p2p=0) und weist in der
 * Vorschaubox darauf hin, wenn es per data-p2p="1" doch erlaubt wird.
 *
 * EINBINDUNG AUF EINER SEITE
 *   <div class="makertube-embed" data-video="a1b2c3d4-…"></div>
 *
 * data-Attribute:
 *   data-video   Pflicht. UUID oder Kurzkennung aus der Adresse des Videos
 *                (der Teil hinter /w/ bzw. /videos/watch/).
 *   data-width   Breite in Pixeln (Standard 560). "100%" ist erlaubt.
 *   data-height  Höhe in Pixeln (Standard 315).
 *   data-titel   Überschrift der Vorschaubox (Standard: "Video").
 *   data-p2p     "1" => Peer-to-Peer-Verteilung zulassen (Standard: aus).
 *   data-start   Startzeit in Sekunden.
 * ============================================================================
 */
( function () {
	'use strict';

	var INSTANZ = 'https://makertube.net';
	var STD_BREITE = 560;
	var STD_HOEHE = 315;

	var SPEICHER = 'wiki-freigabe-makertube';
	var DATENSCHUTZ = 'https://makertube.net/about/instance';

	var wartende = [];

	function freigegeben() {
		try {
			return window.sessionStorage.getItem( SPEICHER ) === 'ja';
		} catch ( e ) {
			return false;
		}
	}

	function setzeFreigabe( ja ) {
		try {
			if ( ja ) {
				window.sessionStorage.setItem( SPEICHER, 'ja' );
			} else {
				window.sessionStorage.removeItem( SPEICHER );
			}
		} catch ( e ) {}
	}

	function gibAlleFrei() {
		var liste = wartende.slice();
		wartende.length = 0;
		liste.forEach( function ( fn ) {
			fn();
		} );
	}

	function stil( el, regeln ) {
		var name;
		for ( name in regeln ) {
			el.style[ name ] = regeln[ name ];
		}
		return el;
	}

	function masszahl( wert, standard ) {
		if ( !wert ) {
			return standard + 'px';
		}
		wert = String( wert ).trim();
		return /^\d+$/.test( wert ) ? wert + 'px' : wert;
	}

	function baueUrl( cfg ) {
		var url = INSTANZ + '/videos/embed/' + encodeURIComponent( cfg.id ) +
			'?p2p=' + ( cfg.p2p ? '1' : '0' ) +
			'&warningTitle=0';
		if ( cfg.start ) {
			url += '&start=' + encodeURIComponent( cfg.start );
		}
		return url;
	}

	/* --- Vorschaubox ---------------------------------------------------- */
	function sperre( container, cfg ) {
		var erledigt = false;

		container.textContent = '';

		var box = stil( document.createElement( 'div' ), {
			border: '1px solid #a2a9b1',
			borderRadius: '2px',
			background: '#f8f9fa',
			padding: '1em',
			maxWidth: '42em',
			boxSizing: 'border-box'
		} );
		box.className = 'makertube-embed-sperre';

		var kopf = stil( document.createElement( 'div' ), {
			fontWeight: 'bold',
			fontSize: '108%',
			marginBottom: '0.4em'
		} );
		kopf.textContent = cfg.titel + ' auf MakerTube';
		box.appendChild( kopf );

		var text = stil( document.createElement( 'p' ), { margin: '0.4em 0' } );
		text.textContent = 'Das Video liegt auf makertube.net, einer unabhängigen ' +
			'PeerTube-Instanz. Beim Abspielen erfährt dieser Server deine ' +
			'IP-Adresse und welches Video du ansiehst. Vor deinem Klick wird ' +
			'nichts dorthin übertragen.';
		box.appendChild( text );

		var p2pText = stil( document.createElement( 'p' ), { margin: '0.4em 0' } );
		if ( cfg.p2p ) {
			p2pText.style.color = '#b32424';
			p2pText.textContent = 'Achtung: Für dieses Video ist die ' +
				'Peer-to-Peer-Verteilung eingeschaltet. Dann tauschst du ' +
				'Videodaten direkt mit anderen Zuschauern aus – und deine ' +
				'IP-Adresse wird für diese sichtbar.';
		} else {
			p2pText.style.color = '#54595d';
			p2pText.style.fontSize = '92%';
			p2pText.textContent = 'Die Peer-to-Peer-Verteilung ist abgeschaltet: ' +
				'du lädst ausschließlich vom Server, andere Zuschauer sehen ' +
				'deine IP-Adresse nicht.';
		}
		box.appendChild( p2pText );

		var haken = document.createElement( 'input' );
		haken.type = 'checkbox';

		var hakenLabel = stil( document.createElement( 'label' ), {
			display: 'block',
			margin: '0.7em 0',
			fontSize: '92%'
		} );
		hakenLabel.appendChild( haken );
		hakenLabel.appendChild( document.createTextNode(
			' Für diese Sitzung merken – gilt dann für alle MakerTube-Videos im ' +
			'Wiki und endet, sobald du den Browser schließt. Es wird kein ' +
			'Cookie gesetzt.'
		) );
		box.appendChild( hakenLabel );

		var knopf = stil( document.createElement( 'button' ), {
			cursor: 'pointer',
			padding: '0.4em 0.9em',
			fontWeight: 'bold'
		} );
		knopf.type = 'button';
		knopf.textContent = 'Video laden und abspielen';
		box.appendChild( stil( document.createElement( 'div' ),
			{ margin: '0.7em 0' } ) ).appendChild( knopf );

		var fuss = stil( document.createElement( 'div' ), {
			fontSize: '85%',
			color: '#54595d',
			marginTop: '0.6em'
		} );
		var dsLink = document.createElement( 'a' );
		dsLink.href = DATENSCHUTZ;
		dsLink.target = '_blank';
		dsLink.rel = 'noopener';
		dsLink.textContent = 'Über die Instanz makertube.net';
		fuss.appendChild( dsLink );
		fuss.appendChild( document.createTextNode( ' · ' ) );

		var direkt = document.createElement( 'a' );
		direkt.href = INSTANZ + '/w/' + cfg.id;
		direkt.target = '_blank';
		direkt.rel = 'noopener';
		direkt.textContent = 'Stattdessen direkt auf MakerTube ansehen';
		fuss.appendChild( direkt );
		box.appendChild( fuss );

		container.appendChild( box );

		function freigeben() {
			if ( erledigt ) {
				return;
			}
			erledigt = true;
			lade( container, cfg );
		}

		wartende.push( freigeben );

		knopf.addEventListener( 'click', function () {
			if ( haken.checked ) {
				setzeFreigabe( true );
				gibAlleFrei();
			} else {
				freigeben();
			}
		} );
	}

	/* --- Geladener Player ----------------------------------------------- */
	function lade( container, cfg ) {
		container.textContent = '';

		var iframe = document.createElement( 'iframe' );
		iframe.src = baueUrl( cfg );
		iframe.setAttribute( 'frameborder', '0' );
		iframe.setAttribute( 'allowfullscreen', 'allowfullscreen' );
		iframe.setAttribute( 'allow', 'fullscreen; picture-in-picture' );
		iframe.setAttribute( 'sandbox',
			'allow-same-origin allow-scripts allow-popups allow-forms' );
		iframe.setAttribute( 'referrerpolicy', 'no-referrer' );
		iframe.title = cfg.titel;
		iframe.style.width = cfg.breite;
		iframe.style.height = cfg.hoehe;
		iframe.style.border = '0';
		container.appendChild( iframe );

		var fuss = stil( document.createElement( 'div' ), {
			fontSize: '85%',
			color: '#54595d',
			marginTop: '0.4em'
		} );
		var zurueck = document.createElement( 'a' );
		zurueck.href = '#';
		zurueck.textContent = 'Verbindung zu makertube.net wieder sperren';
		zurueck.addEventListener( 'click', function ( e ) {
			e.preventDefault();
			setzeFreigabe( false );
			sperre( container, cfg );
		} );
		fuss.appendChild( zurueck );
		container.appendChild( fuss );
	}

	/* --- Einstieg -------------------------------------------------------- */
	function baueEinbettung( container ) {
		var $c = $( container );
		var id = $.trim( String( $c.data( 'video' ) || '' ) );

		if ( !id ) {
			container.textContent = 'MakerTube-Einbettung: kein data-video angegeben.';
			return;
		}

		var cfg = {
			id: id,
			titel: $.trim( String( $c.data( 'titel' ) || '' ) ) || 'Video',
			breite: masszahl( $c.data( 'width' ), STD_BREITE ),
			hoehe: masszahl( $c.data( 'height' ), STD_HOEHE ),
			p2p: String( $c.data( 'p2p' ) || '' ) === '1',
			start: $.trim( String( $c.data( 'start' ) || '' ) )
		};

		if ( freigegeben() ) {
			lade( container, cfg );
		} else {
			sperre( container, cfg );
		}
	}

	$( function () {
		$( '.makertube-embed' ).each( function () {
			try {
				baueEinbettung( this );
			} catch ( e ) {
				this.textContent = 'MakerTube-Video konnte nicht geladen werden.';
				if ( window.mw && mw.log ) {
					mw.log.error( e );
				}
			}
		} );
	} );

}() );