[WIP] Ptitloup/feature video p2p

pod/main/configuration.json

@@ -2406,7 +2406,7 @@
                                 ],
                                 "fr": [
                                     "",
-                                    "Active la fonction pair à pair dans pod"
+                                    "Active la fonction pair à pair dans le lecteur vidéo de Pod"
                                 ]
                             },
                             "pod_version_end": "",

pod/video/static/js/videojs-hls-plugin-readme.md

@@ -0,0 +1,15 @@
+[FR]
+Le plugin videojs-hlsjs-plugin a été compilé et est fourni avec le code source pour être compatible avec la version 1.3 de la lib hls.js. 
+Une issue est créée avec la PR correspondante. Voici le lien : https://github.com/streamroot/videojs-hlsjs-plugin/issues/116
+Pour compiler le plugin, voici les commandes lancées :
+[EN]
+The videojs-hlsjs-plugin has been compiled and comes with the source code to be compatible with version 1.3 of the hls.js lib.
+An issue is created with the corresponding PR. Here is the link: https://github.com/streamroot/videojs-hlsjs-plugin/issues/116
+To compile the plugin, here are the commands launched:
+
+> git clone https://github.com/ptitloup/videojs-hlsjs-plugin.git
+> cd videojs-hlsjs-plugin/
+> git checkout ptitloup-patch-bump-hls.js
+> export NODE_OPTIONS=--openssl-legacy-provider
+> npm install
+> npm run build

pod/video/templates/videos/video-header.html

@@ -1,15 +1,16 @@
-{% load static %}
-
+{% load static custom_tags %}
+{% get_setting "USE_VIDEO_P2P" False as use_video_p2p %}
+{% if use_video_p2p %}
 <script src="{% static '@peertube/p2p-media-loader-core/build/p2p-media-loader-core.js' %}?ver={{VERSION}}" ></script>
 <script src="{% static '@peertube/p2p-media-loader-hlsjs/build/p2p-media-loader-hlsjs.js' %}?ver={{VERSION}}" ></script>
-
+{% endif %}
 <link href="{% static 'video.js/dist/video-js.min.css' %}?ver={{VERSION}}" rel="stylesheet">
 <script id="videojs_script_id" src="{% static 'video.js/dist/video.min.js' %}?ver={{VERSION}}"></script>
 {% with 'video.js/dist/lang/'|add:request.LANGUAGE_CODE|add:'.js' as videojs_lang %}
   <script src="{% static videojs_lang %}?ver={{VERSION}}"></script>
 {% endwith %}
 
-<script src="{% static 'js/videojs-hlsjs-plugin.js' %}?ver={{VERSION}}"></script>
+<script src="{% static 'js/videojs-hlsjs-plugin.min.js' %}?ver={{VERSION}}"></script>
 
 <script src="{% static 'videojs-quality-selector-hls/dist/videojs-quality-selector-hls.min.js' %}"></script>
 <link href="{% static 'videojs-quality-selector-hls/dist/videojs-quality-selector-hls.css' %}?ver={{VERSION}}" rel="stylesheet">

pod/video/templates/videos/video-script.html

@@ -6,7 +6,6 @@
 {% get_setting "USE_VIDEO_P2P" False as use_video_p2p %}
 {% get_setting "P2P_TRACKERS" "" as p2p_trackers %}
 {% get_setting "P2P_STUNS" "" as p2p_stuns %}
-
 <script id="id_video_script">
   var seektime = 10;
   var options = {};
@@ -17,7 +16,10 @@
   var uploadTotal = 0;
   var nb_peers = 0;
   {% endif %}
-  var initialized_player = function() {
+  /**
+   * Initialize the videojs player
+   */
+  var initialize_player = function() {
 
     window.onmessage = function(event) {
       var evt = event || window.event;
@@ -366,64 +368,92 @@
     controlText: 'Information',
     className: 'vjs-info-button'
   });
-  button.setAttribute("aria-label", "Information");
+  button.setAttribute("aria-label", gettext("Information"));
   {% endif %}
 }
-
-initialized_player()
-
+initialize_player()
+{% if use_video_p2p %}
+/**
+ * Show the p2p stats.
+ */
 function updateStats() {
   let httpMb = downloadTotals.http / 1048576;
   let p2pMb = downloadTotals.p2p / 1048576;
   let totalMb = httpMb + p2pMb;
   let uploadMb = uploadTotal / 1048576;
   let statInfo = "";
   if (totalMb != 0) {
-      statInfo += '<i class="bi bi-person-fill-down"></i> '
+      statInfo += '<i class="bi bi-person-fill-down" aria-hidden="true"></i> '
           + Number(totalMb).toFixed(1) + " MiB ";
-      statInfo += '[ <i class="bi bi-server"></i> : '
+      statInfo += '[ <i class="bi bi-server" aria-hidden="true"></i> : '
           + Number(httpMb).toFixed(1) + " MiB / "
           + Number((httpMb * 100) / totalMb).toFixed(0) + "%";
-      statInfo +=  ' - <i class="bi bi-people"></i> : '
+      statInfo +=  ' - <i class="bi bi-people" aria-hidden="true"></i> : '
           + Number(p2pMb).toFixed(1) + " MiB / "
           + Number((p2pMb * 100) / totalMb).toFixed(0) + "% ]";
-      statInfo +=  ' - <i class="bi bi-person-fill-up"></i> '
+      statInfo +=  ' - <i class="bi bi-person-fill-up" aria-hidden="true"></i> '
           + Number(uploadMb).toFixed(1) + " MiB";
   }
-  var stat_info = document.querySelector("#stat-info");
+  var stat_info = document.querySelector("#p2p-stat-info");
   if(stat_info) {
     stat_info.innerHTML = statInfo;
   }
 }
-
+/**
+ * Show the number of peers sharing file with the user.
+ */
 function updatePeers() {
-  let statPeer = '<i class="bi bi-people-fill"></i> ' + nb_peers;
-  document.querySelector("#stat-peers").innerHTML = statPeer;
+  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)
   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) {
   nb_peers -= 1;
   // console.log("peer_close", peerId);
   updatePeers();
 }
-
+{% endif %}
 </script>
 <script src="{% static 'js/video-show.js' %}?ver={{VERSION}}"></script>

pod/video/templates/videos/video_page_content.html

@@ -118,7 +118,7 @@ <h4 class="accordion-header theme_title" id="theme_desc_title">
         {% include 'videos/video-element.html' %}
       </div>
       {% if use_video_p2p %}
-      <div class="d-flex justify-content-end"><span id="stat-peers"><i class="bi bi-people-fill"></i> 0</span> | <span id="stat-info"> - </span></div>
+      <div class="d-flex justify-content-end"><span id="p2p-stat-peers"><i class="bi bi-people-fill" aria-hidden="true"></i> 0</span> | <span id="p2p-stat-info"> - </span></div>
       {% endif %}
       <div id="info-video" class="pod-info-video">
         {% include 'videos/video-all-info.html' %}