diff --git a/video.html b/video.html index e44e4a6..70fe78a 100644 --- a/video.html +++ b/video.html @@ -26,6 +26,12 @@

1. Pick a video:

+
+
+ + +
+

2. Join using your phones by typing this URL:

@@ -64,6 +70,21 @@

3. Click the "fullscreen" button

return youtubeLoaded; } +// Load PeerTube API +var peertubePromise = undefined; +function loadPeertube() { + if(!peertubePromise) { + peertubePromise = new Promise(function(resolve, reject) { + var peertubeJs = document.createElement("script"); + peertubeJs.src = "https://unpkg.com/@peertube/embed-api/build/player.min.js"; + peertubeJs.addEventListener("error", reject); + peertubeJs.addEventListener("load", resolve); + document.body.appendChild(peertubeJs); + }); + } + return peertubePromise; +} + var currentPath = window.location.pathname; // "/video/1234" var videoId = currentPath.substring(7); // "1234" @@ -106,6 +127,33 @@

3. Click the "fullscreen" button

}); } +function showPeertubeVideo(peertubeHost, peertubeId) { + // Replace existing element with an iframe + var oldVideo = document.getElementById("video"); + var newVideo = document.createElement("iframe"); + newVideo.setAttribute("id", "video"); + newVideo.setAttribute("src", "https://" + peertubeHost + "/videos/embed/" + peertubeId + "?api=1&peertubeLink=0"); + newVideo.setAttribute("width", "100%"); + newVideo.setAttribute("height", "100%"); + newVideo.setAttribute("frameborder", "0"); + oldVideo.parentNode.replaceChild(newVideo, oldVideo); + + // Load video, set videoPlayer when done + return loadPeertube().then(function() { + var player = new PeerTubePlayer(document.getElementById("video")); + player.ready.then(function() { + videoPlayer = { + play: function() { + player.play(); + }, + pause: function() { + player.pause(); + }, + }; + }); + }); +} + // Show a video file function showVideoFile(file) { var videoType = file.type; @@ -149,6 +197,15 @@

3. Click the "fullscreen" button

} }); +var peertubeSelector = document.getElementById("peertube-selector"); +document.getElementById("peertube-selector-form").addEventListener("submit", function(e) { + e.preventDefault(); + var m = peertubeSelector.value.match(new RegExp("(?:https?://)?([^/]+)/w/([^/]+)(?:\\?.*)?$")); + if(m) { + showPeertubeVideo(m[1], m[2]); + } +}); + // Go fullscreen fullscreenButton.addEventListener("click", function() { videoContainer.requestFullscreen();