Sync buffer time & various fixes + use piped everywhere

Author: bonswouar

README.md

@@ -5,6 +5,20 @@ Make a youtube playlist, collaboratively.
 
 ![dsu](https://github.com/pin3da/poolparty/blob/master/dsu.jpg)
 
+# Fork updates
+
+This is a forked version. There are quite a few fixes and new features, including:
+
+- Basic Youtube search support
+- Sync the playback on all clients *(experimental)*
+- Use piped instead of native youtube for everything - no call is ever made directly on youtube's server
+- Implement Shaka Player
+- DASH+xml conversion from streams (apparently youtube's HLS are kinda broken)
+- Update packages.json, remove reprecated
+- Dockerized
+
+You can take a look at TODO.md for details about potential future features.
+
 ## Requirements
 
 - [node.js](https://nodejs.org/en/)
@@ -22,7 +36,7 @@ Make a youtube playlist, collaboratively.
 When the server is running, everyone in the party can acces to
 server_ip:8080/  and add songs.
 
-One person will visit server_ip:8080/play in order to reproduce the 
+One person will visit server_ip:8080/play in order to reproduce the
 playlist.
 
 ## Authors
@@ -31,5 +45,3 @@ playlist.
 - [@jhonber](https://github.com/jhonber)
 - [@leiverandres](https://github.com/leiverandres)
 - [@pin3da](https://github.com/pin3da)
-
-

TODO.md

@@ -1,8 +1,5 @@
-- Fix deprecations :
-  ```
-  npm WARN deprecated har-validator@5.1.5: this library is no longer supported
-  npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
-  npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
-  ```
-
-- Use Piped everywhere & configurable instance url
+- Use Piped configurable instance url
+- Search & add YT playlists
+- Better playlist management (remove any video)
+- Permissions & rooms
+- Better design, & mobile app (?)

app.js

@@ -13,8 +13,6 @@ var app = express();
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'ejs');
 
-// uncomment after placing your favicon in /public
-//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
 app.use(cors());
 app.use(logger('dev'));
 app.use(bodyParser.json());

browser/main.js

@@ -1,22 +1,30 @@
 var io = require('socket.io-client');
 var Handlebars = require('handlebars');
-var parseAddress = require('../views/parseAddress.js');
+var parseAddress = require('../lib/parseAddress.js');
+var youtubeInfo = require('../lib/youtubeInfo.js');
 
 var socket = io();
 
-var serverTime = 0;
+// To have access in the templates (no better way?!)
+window.getParseAddress = function (address) {
+  return parseAddress(address);
+}
+window.getYoutubeInfo = async function (youtubeId, play) {
+  return await youtubeInfo(youtubeId, play);
+}
+
 
 function addToList(item) {
   list  = document.getElementById('playlist');
   var div = document.createElement('div')
   div.setAttribute('id', 'item');
 
   var title = document.createElement('h3');
-  title.innerHTML = item.info.title;
+  title.innerHTML = item.title;
   title.setAttribute('id', 'title');
 
   var entry = document.createElement('img');
-  var img = item.prev;
+  var img = item.thumbnail;
   entry.setAttribute('src', img);
   entry.setAttribute('id', 'img');
 
@@ -27,14 +35,17 @@ function addToList(item) {
 
 function sendData() {
   document.getElementById('searchResults').style.display = "none";
-  var songText = document.getElementById('songText');
-  if (parseAddress(songText.value) !== "invalid") {
-    var urlPre = 'https://pipedproxy.kavin.rocks/vi/' + parseAddress(songText.value) + '/maxresdefault.jpg?host=i.ytimg.com';
-    var data = {url: songText.value, prev: urlPre};
-    if (data.url !== '') {
-      socket.emit('add song', data);
-      songText.value = "";
-    }
+  var videoUrl = document.getElementById('videoUrl');
+  var youtubeId = parseAddress(videoUrl.value);
+  if (youtubeId) {
+    const requestYoutubeInfo = async () => {
+      var data = await youtubeInfo(youtubeId);
+      if (data) {
+        socket.emit('add video', data);
+        videoUrl.value = "";
+      }
+    };
+    requestYoutubeInfo();
   }
 }
 
@@ -58,12 +69,10 @@ function searchData() {
         link.href = "https://piped.kavin.rocks"+item.url;
         link.title = item.title;
         link.onclick = function(e) {
-          e.preventDefault;
-
-          var data = {url: link.href, prev: item.thumbnail};
+          var data = {url: link.href, thumbnail: item.thumbnail, title: item.title};
           if (data.url !== '') {
-            socket.emit('add song', data);
-            songText.value = "";
+            socket.emit('add video', data);
+            document.getElementById('videoUrl').value = "";
           }
 
           return false;
@@ -105,9 +114,9 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     var send = document.getElementById('sendButton');
-    var songText = document.getElementById('songText');
+    var videoUrl = document.getElementById('videoUrl');
     send.addEventListener('click', sendData);
-    songText.addEventListener('keyup', function(evt) {
+    videoUrl.addEventListener('keyup', function(evt) {
       if (evt.keyCode == 13)
         sendData();
     });
@@ -124,7 +133,7 @@ document.addEventListener('DOMContentLoaded', function() {
       addToList(data);
     });
 
-    socket.on('nextSong', function(data) {
+    socket.on('nextVideo', function(data) {
       var t = document.querySelector('#playlist');
       if (t.children.length > 0)
         t.removeChild(t.children[0]);
@@ -135,33 +144,28 @@ document.addEventListener('DOMContentLoaded', function() {
 
     socket.on('start', function(data) {
       for (var i = 0, f; f = data.playlist[i]; ++i) {
-        if (parseAddress(f.url) !== "invalid")
-          window.data.push(parseAddress(f.url));
+        if (parseAddress(f.url))
+          window.data.push(f.url);
       }
       if (window.data.length > 0) {
-        fetchHls(window.data.shift());
+        loadVideo(window.data.shift());
       }
     });
 
     socket.on('added', function(data) {
-      if (parseAddress(data.url) !== "invalid") {
-        window.data.push(parseAddress(data.url));
-        if (!document.getElementById('player-status').getAttribute('playing')) {
-          fetchHls(window.data.shift());
+      if (parseAddress(data.url)) {
+        window.data.push(data.url);
+        if (!window.playing) {
+          loadVideo(window.data.shift());
         }
       }
     });
 
-    socket.on('updated time', function(currentTime) {
-      if (serverTime < currentTime) {
-        serverTime = currentTime;
-        updatedTime(currentTime);
-      }
-    });
+    socket.on('updated time', updatedTime);
 
-    socket.on('nextSong', function(data) {
-      if (document.getElementById('player-status').getAttribute('current-url') != data) {
-        fetchHls(window.data.shift());
+    socket.on('nextVideo', function(data) {
+      if (window.currentVideoUrl != data) {
+        loadVideo(window.data.shift());
       }
     });
   }

docker-compose.yml

@@ -1,6 +1,6 @@
 version: "2.1"
 services:
-  radarr:
+  poolparty:
     image: poolparty
     container_name: poolparty
     environment:

views/parseAddress.js lib/parseAddress.jsviews/parseAddress.js renamed to lib/parseAddress.js

@@ -11,7 +11,7 @@ module.exports = function (address) {
       new_a =  arr[0].split('&')[0];
     }
   } else {
-    new_a =  "invalid";
+    new_a = null;
   }
   return new_a;
 }

lib/youtubeInfo.js

@@ -0,0 +1,14 @@
+
+module.exports = async function (youtubeVideoId, play = false) {
+  const response = await fetch(`https://pipedapi.kavin.rocks/streams/${youtubeVideoId}`)
+  const json = await response.json();
+  if (json) {
+    let returnData = {url: `https://piped.kavin.rocks/watch?v=${youtubeVideoId}`, title: json['title'], thumbnail: json['thumbnailUrl']};
+    if (play) {
+      returnData['audioStreams'] = json['audioStreams'];
+      returnData['videoStreams'] = json['videoStreams'];
+      returnData['duration'] = json['duration'];
+    }
+    return returnData;
+  }
+}