[WIP] Ptitloup/add p2p feature

pod/live/templates/live/direct.html

@@ -188,7 +188,7 @@ <h2 class="card-title pod-card__title h4">
   }
 
   // Management of the end of the stream (for Firefox, Chrome... not working for Edge, Safari)
-  videojs.Hls.xhr.beforeRequest = function(options) {
+  videojs.Hls.xhr.onRequest = function(options) {
     // Reset counter if video state is ok
     if (started && player.readyState() > 2) { nbLoop = 0; }
     if (started && player.readyState() <= 2) {

pod/live/templates/live/event-iframe.html

@@ -140,7 +140,6 @@ <h2 class="video-title">{{ event.title }}</h2>
 
         {# affichage du bouton d'info sur le player #}
         {% if event.is_coming and event.video_on_hold.is_video or event.is_current  %}
-
             <script>
                 {% if event.is_coming and event.video_on_hold.is_video %}
                     iframeplayer = videojs("podvideoonholdplayer");

pod/live/templates/live/event-script.html

@@ -1,7 +1,16 @@
 {% load custom_tags %}
 {% load i18n %}
 {% load static %}
+{% get_setting "USE_LIVE_P2P" False as use_live_p2p %}
+{% if use_live_p2p %}
+  {% get_setting "P2P_TRACKERS" "" as p2p_trackers %}
+  {% get_setting "P2P_STUNS" "" as p2p_stuns %}
+  {% if event.is_current %}
+  <script src="{% static 'js/video-p2p-stats.js' %}?ver={{VERSION}}"></script>
+  {% endif %}
+{% endif %}
 <script>
+
     // Debug if necessary, depends on the settings_local
     const debug = "{% get_setting "DEBUG" False %}" === "True";
 

pod/package.json

@@ -1,6 +1,8 @@
 {
   "license": "LGPL-3.0",
   "dependencies": {
+    "p2p-media-loader-core": "0.6.2",
+    "p2p-media-loader-hlsjs": "0.6.2",
     "@silvermine/videojs-quality-selector": "^1.3.0",
     "blueimp-file-upload": "^10.32.0",
     "bootstrap": "^5.3.2",
@@ -11,11 +13,9 @@
     "jquery-ui-dist": "^1.13.2",
     "js-cookie": "^3.0.5",
     "spark-md5": "^3.0.2",
-    "video.js": "7.20.3",
-    "videojs-contrib-quality-levels": "^3.0.0",
-    "videojs-hls-quality-selector": "^1.1.4",
+    "video.js": "8.10.0",
     "videojs-overlay": "^3.1.0",
-    "videojs-seek-buttons": "latest7",
+    "videojs-quality-selector-hls": "^1.1.1",
     "videojs-vr": "^2.0.0",
     "videojs-vtt-thumbnails": "^0.0.13",
     "videojs-wavesurfer": "^3.9.0",

pod/video/static/js/video-p2p-stats.js

@@ -0,0 +1,101 @@
+/**
+ * Show the p2p stats.
+ */
+function updateStats() {
+    let httpMb = window.downloadTotals.http / 1048576;
+    let p2pMb = window.downloadTotals.p2p / 1048576;
+    let totalMb = httpMb + p2pMb;
+    let uploadMb = uploadTotal / 1048576;
+    if (totalMb != 0 || uploadMb != 0) {
+      let statInfoDownload =
+        '<i class="bi bi-person-fill-down" aria-hidden="true"></i> ' +
+        Number(totalMb).toFixed(1) +
+        " MiB ";
+      statInfoDownload +=
+        '[ <i class="bi bi-server" aria-hidden="true"></i> : ' +
+        Number(httpMb).toFixed(1) +
+        " MiB / " +
+        Number((httpMb * 100) / totalMb).toFixed(0) +
+        "%";
+      statInfoDownload +=
+        ' - <i class="bi bi-people" aria-hidden="true"></i> : ' +
+        Number(p2pMb).toFixed(1) +
+        " MiB / " +
+        Number((p2pMb * 100) / totalMb).toFixed(0) +
+        "% ] </span>";
+      var stat_info_download = document.getElementById("p2p-stat-info-download");
+      if (stat_info_download) {
+        stat_info_download.innerHTML = statInfoDownload;
+      }
+
+      let statInfoUpload =
+        '<i class="bi bi-person-fill-up" aria-hidden="true"></i> ' +
+        Number(uploadMb).toFixed(1) +
+        " MiB</span>";
+      var stat_info_upload = document.getElementById("p2p-stat-info-upload");
+      if (stat_info_upload) {
+        stat_info_upload.innerHTML = statInfoUpload;
+      }
+    }
+  }
+
+  /**
+   * Show the number of peers sharing file with the user.
+   */
+  function updatePeers() {
+    let statPeer =
+      '<i class="bi bi-people-fill" aria-hidden="true"></i> ' + nb_peers;
+    document.querySelector("#p2p-stat-peers").innerHTML = statPeer;
+  }
+
+  /**
+   * Saves the bytes just download by the player by the download method.
+   * This method is called by the bytes download event.
+   *
+   * @param {string} method method used to download bytes : http or p2p.
+   * @param {string} segment current segment of video downloaded.
+   * @param {number} bytes umber of bytes downloaded.
+   */
+  function onBytesDownloaded(method, segment, bytes) {
+    // console.log("onBytesDownloaded", method, size)
+    window.downloadTotals[method] += bytes;
+    updateStats();
+  }
+
+  /**
+   * Saves the bytes just upload by the player.
+   * This method is called by the bytes upload event.
+   *
+   * @param {string} method method used to upload bytes : only p2p.
+   * @param {string} segment current segment of video uploaded.
+   * @param {number} bytes umber of bytes uploaded.
+   */
+  function onBytesUploaded(method, segment, bytes) {
+    // console.log("onBytesUploaded", method, size)
+    uploadTotal += bytes;
+    updateStats();
+  }
+
+  /**
+   * Increments the number of peer connected.
+   * This method is called by the peer connect event.
+   *
+   * @param {object} peer the current peer connected.
+   */
+  function onPeerConnect(peer) {
+    nb_peers += 1;
+    // console.log("peer_connect", peer.id, peer.remoteAddress);
+    updatePeers();
+  }
+
+  /**
+   * Decrements the number of connected peers.
+   * This method is called by the peer close event.
+   *
+   * @param {number} peerId the id of the peer who are no more available.
+   */
+  function onPeerClose(peerId) {
+    // console.log("peer_close", peerId);
+    nb_peers -= 1;
+    updatePeers();
+  }