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

Aktuelle Version vom 19. September 2026, 20:11 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. Deshalb erscheint zuerst eine Vorschaubox; erst
 * der Klick baut die Verbindung auf. Auf Wunsch merkt sich der Browser die
 * Freigabe für die laufende Sitzung (sessionStorage – kein Cookie, kein
 * Banner); sie endet mit dem Schließen des Browsers.
 *
 * PEER-TO-PEER (das eigentliche Prinzip von PeerTube)
 * PeerTube verteilt Videos nicht nur vom Server, sondern auch zwischen den
 * Zuschauern (WebTorrent). Das entlastet kleine Instanzen – und macht die
 * IP-Adresse für die anderen Zuschauer desselben Videos sichtbar. Weil das
 * eine echte Abwägung ist, entscheidet sie der Besucher selbst: in der
 * Vorschaubox steht ein zweites Häkchen dafür.
 *
 * Voreinstellung je Video über data-p2p:
 *   nicht gesetzt / "0"  => Häkchen ist zu Beginn leer (Standard)
 *   "1"                  => Häkchen ist zu Beginn gesetzt; sinnvoll bei
 *                           Videos mit erwartbarem Zulauf, wo das Teilen
 *                           tatsächlich etwas bringt
 * Der Besucher kann es in beide Richtungen ändern – data-p2p legt nur fest,
 * was vorausgewählt ist, nie was passiert.
 *
 * 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" => Teilen-Häkchen ist vorausgewählt (Standard: leer).
 *   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 SPEICHER_P2P = 'wiki-makertube-p2p';
	var DATENSCHUTZ = 'https://makertube.net/about/instance';

	/* Noch gesperrte Einbettungen dieser Seite – damit ein "merken"-Klick
	 * auch weitere Videos derselben Seite gleich mitfreigibt. */
	var wartende = [];

	function freigegeben() {
		try {
			return window.sessionStorage.getItem( SPEICHER ) === 'ja';
		} catch ( e ) {
			return false; // privater Modus o.Ä.: dann eben jedes Mal fragen
		}
	}

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

	/* Gemerkte P2P-Entscheidung: true, false – oder null, wenn der Besucher
	 * in dieser Sitzung noch nichts entschieden hat. */
	function gemerktesP2p() {
		try {
			var wert = window.sessionStorage.getItem( SPEICHER_P2P );
			if ( wert === 'ja' ) {
				return true;
			}
			if ( wert === 'nein' ) {
				return false;
			}
		} catch ( e ) {}
		return null;
	}

	function setzeP2p( ja, merken ) {
		try {
			if ( !merken ) {
				window.sessionStorage.removeItem( SPEICHER_P2P );
			} else {
				window.sessionStorage.setItem( SPEICHER_P2P, ja ? 'ja' : 'nein' );
			}
		} catch ( e ) {}
	}

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

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

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

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

	/* --- Vorschaubox (noch nichts geladen) ------------------------------ */
	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 );

		/* --- Häkchen 1: Peer-to-Peer --- */
		var hakenP2p = document.createElement( 'input' );
		hakenP2p.type = 'checkbox';
		hakenP2p.checked = cfg.p2pVorgewaehlt;

		var p2pLabel = stil( document.createElement( 'label' ), {
			display: 'block',
			margin: '0.9em 0 0.2em 0',
			fontSize: '92%'
		} );
		p2pLabel.appendChild( hakenP2p );
		p2pLabel.appendChild( document.createTextNode(
			' Bandbreite mit anderen Zuschauern teilen (Peer-to-Peer)'
		) );
		box.appendChild( p2pLabel );

		var p2pHinweis = stil( document.createElement( 'div' ), {
			fontSize: '85%',
			marginLeft: '1.7em',
			marginBottom: '0.3em'
		} );

		function zeigeP2pHinweis() {
			if ( hakenP2p.checked ) {
				p2pHinweis.style.color = '#b32424';
				p2pHinweis.textContent = 'So ist PeerTube gedacht: du lädst Teile ' +
					'des Videos von anderen Zuschauern und gibst sie weiter, was ' +
					'die Instanz entlastet. Dabei wird deine IP-Adresse für diese ' +
					'anderen Zuschauer sichtbar.';
			} else {
				p2pHinweis.style.color = '#54595d';
				p2pHinweis.textContent = 'Ohne Häkchen lädst du ausschließlich vom ' +
					'Server von makertube.net; andere Zuschauer sehen deine ' +
					'IP-Adresse nicht.';
			}
		}
		zeigeP2pHinweis();
		hakenP2p.addEventListener( 'change', zeigeP2pHinweis );
		box.appendChild( p2pHinweis );

		/* --- Häkchen 2: für die Sitzung merken --- */
		var hakenMerken = document.createElement( 'input' );
		hakenMerken.type = 'checkbox';

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

		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( p2p ) {
			if ( erledigt ) {
				return;
			}
			erledigt = true;
			lade( container, cfg, p2p );
		}

		wartende.push( freigeben );

		knopf.addEventListener( 'click', function () {
			var p2p = hakenP2p.checked;
			if ( hakenMerken.checked ) {
				setzeFreigabe( true );
				setzeP2p( p2p, true );
				gibAlleFrei( p2p );
			} else {
				freigeben( p2p );
			}
		} );
	}

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

		var iframe = document.createElement( 'iframe' );
		iframe.src = baueUrl( cfg, p2p );
		iframe.title = cfg.titel;
		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' );
		stil( iframe, {
			width: cfg.breite,
			maxWidth: '100%',
			height: cfg.hoehe,
			border: '0'
		} );
		container.appendChild( iframe );

		var fuss = stil( document.createElement( 'div' ), {
			fontSize: '85%',
			color: '#54595d',
			marginTop: '0.4em'
		} );
		fuss.appendChild( document.createTextNode(
			p2p ? 'Peer-to-Peer ist eingeschaltet. · ' :
				'Peer-to-Peer ist abgeschaltet. · '
		) );

		var zurueck = document.createElement( 'a' );
		zurueck.href = '#';
		zurueck.textContent = 'Verbindung zu makertube.net wieder sperren';
		zurueck.addEventListener( 'click', function ( e ) {
			e.preventDefault();
			setzeFreigabe( false );
			setzeP2p( false, 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 ),
			p2pVorgewaehlt: String( $c.data( 'p2p' ) || '' ) === '1',
			start: $.trim( String( $c.data( 'start' ) || '' ) )
		};

		if ( freigegeben() ) {
			// Gemerkte Entscheidung des Besuchers schlägt die Seiten-Vorauswahl.
			var gemerkt = gemerktesP2p();
			lade( container, cfg,
				gemerkt === null ? cfg.p2pVorgewaehlt : gemerkt );
		} 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 );
				}
			}
		} );
	} );

}() );