Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/**
* 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 );
}
}
} );
} );
}() );