44 files changed, 1624 insertions, 770 deletions
diff --git a/client/src/assets/images/default-playlist.jpg b/client/src/assets/images/default-playlist.jpg
new file mode 100644
index 000000000..978fb16f2
--- /dev/null
+++ b/client/src/assets/images/default-playlist.jpg
Binary files differ
diff --git a/client/src/assets/images/global/add.html b/client/src/assets/images/global/add.html
index bfb0a52bc..34f497056 100644
--- a/client/src/assets/images/global/add.html
+++ b/client/src/assets/images/global/add.html
@@ -2,9 +2,9 @@
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(-92.000000, -115.000000)">
            <g id="2" transform="translate(92.000000, 115.000000)">
-                <circle id="Oval-1" stroke="#ffffff" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <circle id="Oval-1" stroke="#000000" stroke-width="2" cx="12" cy="12" r="10"></circle>
-                <rect id="Rectangle-1" fill="#ffffff" x="11" y="7" width="2" height="10" rx="1"></rect>
+                <rect id="Rectangle-1" fill="#000000" x="11" y="7" width="2" height="10" rx="1"></rect>
-                <rect id="Rectangle-1" fill="#ffffff" x="7" y="11" width="10" height="2" rx="1"></rect>
+                <rect id="Rectangle-1" fill="#000000" x="7" y="11" width="10" height="2" rx="1"></rect>
            </g>
        </g>
    </g>
diff --git a/client/src/assets/images/global/folder.html b/client/src/assets/images/global/folder.html
new file mode 100644
index 000000000..8443c15c6
--- /dev/null
+++ b/client/src/assets/images/global/folder.html
@@ -0,0 +1,10 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-708.000000, -115.000000)">
+            <g id="16" transform="translate(708.000000, 115.000000)">
+                <path d="M11.5857864,17 L14.2928932,19.7071068 L14.5857864,20 L15,20 L20.009222,20 C21.1044506,20 22,19.102094 22,18.0014977 L22,6.99850233 C22,5.89626364 21.1085926,5 20.0066023,5 L3.99339768,5 C2.89217541,5 2,5.89385529 2,6.99539757 L2,15.0046024 C2,16.099013 2.89670181,17 3.99754465,17 L11.5857864,17 Z" id="Rectangle-406" stroke="#000000" stroke-width="2" stroke-linejoin="round" transform="translate(12.000000, 12.500000) scale(1, -1) translate(-12.000000, -12.500000) "/>
+                <path d="M3,5 C3,4.44771525 3.4454627,4 3.99871095,4 L12.5,4 L10.5,6 L3.99594209,6 C3.44589846,6 3,5.55613518 3,5 L3,5 Z" id="Rectangle-409" fill="#000000"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/history.html b/client/src/assets/images/global/history.html
new file mode 100644
index 000000000..dfb70b598
--- /dev/null
+++ b/client/src/assets/images/global/history.html
@@ -0,0 +1,11 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard-4" transform="translate(-620.000000, -863.000000)" stroke="#000000" stroke-width="2">
+            <g id="354" transform="translate(620.000000, 863.000000)">
+                <path d="M6.63582585,18.3637479 C8.26452234,19.9925528 10.5146102,21 13,21 L13,21 C17.9705627,21 22,16.9705627 22,12 C22,7.02943725 17.9705627,3 13,3 C8.02943725,3 4,7.02943725 4,12" id="Oval-203"/>
+                <polygon id="Path-282" fill="#000000" points="1.5 11 7.5 11 4.5 14"/>
+                <polyline id="Path-283" points="13 7 13 12 15.5 14.5"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/video/more.html b/client/src/assets/images/global/more-horizontal.html
index 39dcad10e..39dcad10e 100644
--- a/client/src/assets/images/video/more.html
+++ b/client/src/assets/images/global/more-horizontal.html
diff --git a/client/src/assets/images/global/more-vertical.html b/client/src/assets/images/global/more-vertical.html
new file mode 100644
index 000000000..9bff87a82
--- /dev/null
+++ b/client/src/assets/images/global/more-vertical.html
@@ -0,0 +1,11 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Artboard-4" transform="translate(-268.000000, -1046.000000)" fill="#000000">
+      <g id="Extras" transform="translate(48.000000, 1046.000000)">
+        <g id="more-vertical" transform="translate(220.000000, 0.000000)">
+          <path d="M10,12 C10,10.8954305 10.8877296,10 12,10 C13.1045695,10 14,10.8877296 14,12 C14,13.1045695 13.1122704,14 12,14 C10.8954305,14 10,13.1122704 10,12 Z M10,5 C10,3.8954305 10.8877296,3 12,3 C13.1045695,3 14,3.88772964 14,5 C14,6.1045695 13.1122704,7 12,7 C10.8954305,7 10,6.11227036 10,5 Z M10,19 C10,17.8954305 10.8877296,17 12,17 C13.1045695,17 14,17.8877296 14,19 C14,20.1045695 13.1122704,21 12,21 C10.8954305,21 10,20.1122704 10,19 Z" id="Combined-Shape"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/global/play.html b/client/src/assets/images/global/play.html
new file mode 100644
index 000000000..d00122de4
--- /dev/null
+++ b/client/src/assets/images/global/play.html
@@ -0,0 +1,9 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+    <g id="Artboard-4" transform="translate(-532.000000, -115.000000)" stroke-width="2" stroke="#000000">
+      <g id="12" transform="translate(532.000000, 115.000000)">
+        <polygon id="Triangle-1" points="5 21 5 3 21 12" fill="#000000"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/global/playlists.html b/client/src/assets/images/global/playlists.html
new file mode 100644
index 000000000..21b05009a
--- /dev/null
+++ b/client/src/assets/images/global/playlists.html
@@ -0,0 +1,9 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-664.000000, -467.000000)" stroke="#000000">
+            <g id="175" transform="translate(664.000000, 467.000000)">
+                <path stoke="#000000" d="M7.5,7 C7.5,6.72427445 7.72568093,6.5 8.00684547,6.5 L19.9931545,6.5 C20.2754761,6.5 20.5,6.72240424 20.5,7 C20.5,7.27572555 20.2743191,7.5 19.9931545,7.5 L8.00684547,7.5 C7.72452386,7.5 7.5,7.27759576 7.5,7 Z M7.5,12 C7.5,11.7242745 7.72568093,11.5 8.00684547,11.5 L19.9931545,11.5 C20.2754761,11.5 20.5,11.7224042 20.5,12 C20.5,12.2757255 20.2743191,12.5 19.9931545,12.5 L8.00684547,12.5 C7.72452386,12.5 7.5,12.2775958 7.5,12 Z M7.5,17 C7.5,16.7242745 7.72568093,16.5 8.00684547,16.5 L19.9931545,16.5 C20.2754761,16.5 20.5,16.7224042 20.5,17 C20.5,17.2757255 20.2743191,17.5 19.9931545,17.5 L8.00684547,17.5 C7.72452386,17.5 7.5,17.2775958 7.5,17 Z M4,7.5 C3.72385763,7.5 3.5,7.27614237 3.5,7 C3.5,6.72385763 3.72385763,6.5 4,6.5 C4.27614237,6.5 4.5,6.72385763 4.5,7 C4.5,7.27614237 4.27614237,7.5 4,7.5 Z M4,12.5 C3.72385763,12.5 3.5,12.2761424 3.5,12 C3.5,11.7238576 3.72385763,11.5 4,11.5 C4.27614237,11.5 4.5,11.7238576 4.5,12 C4.5,12.2761424 4.27614237,12.5 4,12.5 Z M4,17.5 C3.72385763,17.5 3.5,17.2761424 3.5,17 C3.5,16.7238576 3.72385763,16.5 4,16.5 C4.27614237,16.5 4.5,16.7238576 4.5,17 C4.5,17.2761424 4.27614237,17.5 4,17.5 Z" id="Combined-Shape"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/refresh.html b/client/src/assets/images/global/refresh.html
new file mode 100644
index 000000000..421ab343d
--- /dev/null
+++ b/client/src/assets/images/global/refresh.html
@@ -0,0 +1,12 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs/>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Artboard-4" transform="translate(-224.000000, -1046.000000)" fill="#000000">
+      <g id="Extras" transform="translate(48.000000, 1046.000000)">
+        <g id="refresh" transform="translate(176.000000, 0.000000)">
+          <path d="M20.9995201,13.0312796 L20.9999519,13.0312796 C20.9830843,17.9874565 16.960132,22 12,22 C7.02943725,22 3,17.9705627 3,13 C3,8.0398348 7.01259713,4.01686187 11.9688198,4.00005287 L11.9688198,6.00006796 C8.11716976,6.01686496 5,9.14440548 5,13 C5,16.8659932 8.13400675,20 12,20 C15.8555614,20 18.9830812,16.8828839 18.9999316,13.0312796 L19.0004799,13.0312796 C19.0001607,13.0208922 19,13.0104649 19,13 C19,12.4477153 19.4477153,12 20,12 C20.5522847,12 21,12.4477153 21,13 C21,13.0104649 20.9998393,13.0208922 20.9995201,13.0312796 Z M12,9 L12,1 L16,5 L12,9 Z" id="Combined-Shape"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/global/server.html b/client/src/assets/images/global/server.html
new file mode 100644
index 000000000..409026e1a
--- /dev/null
+++ b/client/src/assets/images/global/server.html
@@ -0,0 +1,15 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-796.000000, -643.000000)">
+            <g id="258" transform="translate(796.000000, 643.000000)">
+                <ellipse id="Oval-140" stroke="#000000" stroke-width="2" cx="12" cy="6" rx="9" ry="3"/>
+                <path d="M3,10.5 C3,12.1568542 7.02943725,13.5 12,13.5 L12,13.5 C16.9705627,13.5 21,12.1568542 21,10.5" id="Oval-140" stroke="#000000"/>
+                <path d="M3,14.5 C3,16.1568542 7.02943725,17.5 12,17.5 C16.9705627,17.5 21,16.1568542 21,14.5" id="Oval-140" stroke="#000000"/>
+                <path d="M3,5.98958785 L3,19 C3,20.6568542 7.02943725,22 12,22 C16.9705627,22 21,20.6568542 21,19 L21,5.98958785" id="Oval-140" stroke="#000000" stroke-width="2"/>
+                <circle id="Oval-141" fill="#000000" cx="18.5" cy="10.5" r="1"/>
+                <circle id="Oval-141" fill="#000000" cx="18.5" cy="14.5" r="1"/>
+                <circle id="Oval-141" fill="#000000" cx="18.5" cy="18.5" r="1"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/sign-out.html b/client/src/assets/images/global/sign-out.html
new file mode 100644
index 000000000..4e316dc8b
--- /dev/null
+++ b/client/src/assets/images/global/sign-out.html
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1536 1536" width="1536" height="1536" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#000000" d="M640 1440c0 28 13 96-32 96H288c-159 0-288-129-288-288V544c0-159 129-288 288-288h320c17 0 32 15 32 32 0 28 13 96-32 96H288c-88 0-160 72-160 160v704c0 88 72 160 160 160h288c25 0 64-5 64 32zm928-544c0 17-7 33-19 45l-544 544c-12 12-28 19-45 19-35 0-64-29-64-64v-288H448c-35 0-64-29-64-64V704c0-35 29-64 64-64h448V352c0-35 29-64 64-64 17 0 33 7 45 19l544 544c12 12 19 28 19 45z"/>
+</svg>
diff --git a/client/src/assets/images/global/user.html b/client/src/assets/images/global/user.html
new file mode 100644
index 000000000..c7b9319b6
--- /dev/null
+++ b/client/src/assets/images/global/user.html
@@ -0,0 +1,10 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-532.000000, -159.000000)" stroke="#000000" stroke-width="2">
+            <g id="32" transform="translate(532.000000, 159.000000)">
+                <path d="M2,21 C2,21 1.5,16 7,16 C12.5,16 11.512498,16 17.006249,16 C22.5,16 22.0062485,21 22.0062485,21" id="Path-41" stroke-linecap="round" stroke-linejoin="round"/>
+                <circle id="Oval-40" cx="12" cy="8" r="5"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/global/users.html b/client/src/assets/images/global/users.html
new file mode 100644
index 000000000..522883785
--- /dev/null
+++ b/client/src/assets/images/global/users.html
@@ -0,0 +1,11 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Artboard-4" transform="translate(-92.000000, -863.000000)">
+      <g id="342" transform="translate(92.000000, 863.000000)">
+        <path d="M7,21 C7,21 7,17 11,17 C15,17 14.9937515,17 19,17 C23.0062485,17 23.0062485,21 23.0062485,21" id="Path-41" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M8.27455269,11.9477557 C5.85692935,11.5963698 4,9.51503944 4,7 C4,4.23857625 6.23857625,2 9,2 C10.373942,2 11.6184509,2.55416948 12.5221996,3.45118158 C11.8469348,3.70680858 11.2215328,4.06387931 10.664592,4.50379553 C10.1883045,4.18555118 9.61582114,4 9,4 C7.34314575,4 6,5.34314575 6,7 C6,8.3069749 6.83577432,9.41874424 8.00202365,9.83000873 C8.00067709,9.88650926 8,9.94317556 8,10 C8,10.6759052 8.09579644,11.329436 8.27455269,11.9477557 Z M8.67363116,13 L5,13 C2.85717375,13 1.39436214,13.9752077 0.605572809,15.5527864 C0.148670182,16.4665917 -7.10542736e-14,17.3586127 -7.10542736e-14,18 C-7.10542736e-14,18.5522847 0.44771525,19 1,19 C1.55228475,19 2,18.5522847 2,18 C2,17.9269061 2.01176795,17.7621548 2.04889392,17.539399 C2.11167338,17.1627222 2.22417415,16.7877197 2.39442719,16.4472136 C2.85563786,15.5247923 3.64282625,15 5,15 L10.1010173,15 C9.51513298,14.4258795 9.02972955,13.7496048 8.67363116,13 Z" id="Combined-Shape" fill="#000000" fill-rule="nonzero"/>
+        <circle id="Oval-40" stroke="#000000" stroke-width="2" cx="15" cy="10" r="4"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/global/videos.html b/client/src/assets/images/global/videos.html
new file mode 100644
index 000000000..6e37f466f
--- /dev/null
+++ b/client/src/assets/images/global/videos.html
@@ -0,0 +1,14 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard-4" transform="translate(-312.000000, -511.000000)">
+            <g id="187" transform="translate(312.000000, 511.000000)">
+                <rect id="Rectangle-124" stroke="#000000" stroke-width="2" x="3" y="6" width="18" height="16" rx="1"/>
+                <polygon fill="#000000" id="Triangle-1" points="10 17.5 10 10.4 15.5 13.9"/>
+                <rect id="Rectangle-125" fill="#000000" x="4" y="3" width="16" height="1" rx="0.5"/>
+                <rect id="Rectangle-125" fill="#000000" x="5" y="1" width="14" height="1" rx="0.5"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/menu/about.svg b/client/src/assets/images/menu/about.html
index eac2932a9..bea602aac 100644
--- a/client/src/assets/images/menu/about.svg
+++ b/client/src/assets/images/menu/about.html
@@ -1,11 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard-4" transform="translate(-400.000000, -247.000000)">
            <g id="69" transform="translate(400.000000, 247.000000)">
-                <circle id="Oval-7" stroke="#808080" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <circle id="Oval-7" stroke="#000000" stroke-width="2" cx="12" cy="12" r="10"></circle>
-                <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#808080"></path>
+                <path d="M12.016,14.544 C12.384,14.544 12.64,14.256 12.704,13.904 L12.768,13.168 C14.544,12.864 16,11.952 16,9.936 L16,9.904 C16,7.904 14.48,6.656 12.24,6.656 C10.768,6.656 9.696,7.184 8.848,7.984 C8.624,8.176 8.528,8.432 8.528,8.672 C8.528,9.152 8.928,9.552 9.424,9.552 C9.648,9.552 9.856,9.456 10.016,9.328 C10.656,8.752 11.344,8.448 12.192,8.448 C13.344,8.448 14.032,9.072 14.032,9.968 L14.032,10 C14.032,11.008 13.2,11.584 11.696,11.728 C11.264,11.776 11.008,12.096 11.072,12.528 L11.232,13.904 C11.28,14.272 11.552,14.544 11.92,14.544 L12.016,14.544 Z M10.784,16.816 L10.784,16.976 C10.784,17.6 11.264,18.08 11.92,18.08 C12.576,18.08 13.056,17.6 13.056,16.976 L13.056,16.816 C13.056,16.192 12.576,15.712 11.92,15.712 C11.264,15.712 10.784,16.192 10.784,16.816 Z" id="?" fill="#000000"></path>
            </g>
        </g>
    </g>
diff --git a/client/src/assets/images/menu/administration.svg b/client/src/assets/images/menu/administration.html
index b6da837d2..0dceda082 100644
--- a/client/src/assets/images/menu/administration.svg
+++ b/client/src/assets/images/menu/administration.html
@@ -1,11 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>filter</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-444.000000, -247.000000)" fill="#808080">
+        <g id="Artboard-4" transform="translate(-444.000000, -247.000000)" fill="#000000">
            <g id="70" transform="translate(444.000000, 247.000000)">
                <path d="M8.82929429,17 L20.0066023,17 C20.5552407,17 21,17.4438648 21,18 C21,18.5522847 20.5550537,19 20.0066023,19 L8.82929429,19 C8.41745788,20.1651924 7.30621883,21 6,21 C4.34314575,21 3,19.6568542 3,18 C3,16.3431458 4.34314575,15 6,15 C7.30621883,15 8.41745788,15.8348076 8.82929429,17 Z M9.17070571,13 L3.99339768,13 C3.44475929,13 3,12.5561352 3,12 C3,11.4477153 3.44494629,11 3.99339768,11 L9.17070571,11 C9.58254212,9.83480763 10.6937812,9 12,9 C13.3062188,9 14.4174579,9.83480763 14.8292943,11 L20.0066023,11 C20.5552407,11 21,11.4438648 21,12 C21,12.5522847 20.5550537,13 20.0066023,13 L14.8292943,13 C14.4174579,14.1651924 13.3062188,15 12,15 C10.6937812,15 9.58254212,14.1651924 9.17070571,13 Z M15.1659641,6.98648118 C15.1124525,6.99537358 15.05751,7 15.0014977,7 L3.99850233,7 C3.44704472,7 3,6.55613518 3,6 C3,5.44771525 3.44748943,5 3.99850233,5 L15.0014977,5 C15.0575314,5 15.1124871,5.00458274 15.1660053,5.01340035 C15.5740343,3.84121344 16.6887792,3 18,3 C19.6568542,3 21,4.34314575 21,6 C21,7.65685425 19.6568542,9 18,9 C16.688735,9 15.5739592,8.15872988 15.1659641,6.98648118 Z M18,7 C18.5522847,7 19,6.55228475 19,6 C19,5.44771525 18.5522847,5 18,5 C17.4477153,5 17,5.44771525 17,6 C17,6.55228475 17.4477153,7 18,7 Z M12,13 C12.5522847,13 13,12.5522847 13,12 C13,11.4477153 12.5522847,11 12,11 C11.4477153,11 11,11.4477153 11,12 C11,12.5522847 11.4477153,13 12,13 Z M6,19 C6.55228475,19 7,18.5522847 7,18 C7,17.4477153 6.55228475,17 6,17 C5.44771525,17 5,17.4477153 5,18 C5,18.5522847 5.44771525,19 6,19 Z" id="Combined-Shape"></path>
            </g>
diff --git a/client/src/assets/images/menu/globe.svg b/client/src/assets/images/menu/globe.html
index a4b3db9c5..cf8331256 100644
--- a/client/src/assets/images/menu/globe.svg
+++ b/client/src/assets/images/menu/globe.html
@@ -1,11 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>globe</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Artboard-4" transform="translate(-224.000000, -687.000000)" stroke="#808080" stroke-width="2">
+        <g id="Artboard-4" transform="translate(-224.000000, -687.000000)" stroke="#000000" stroke-width="2">
            <g id="265" transform="translate(224.000000, 687.000000)">
                <circle id="Oval-148" cx="12" cy="12" r="10"></circle>
                <path d="M12,2 L12,22.006249" id="Path-199"></path>
diff --git a/client/src/assets/images/menu/go.html b/client/src/assets/images/menu/go.html
new file mode 100644
index 000000000..b16e794ec
--- /dev/null
+++ b/client/src/assets/images/menu/go.html
@@ -0,0 +1,12 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard-4" transform="translate(-576.000000, -1046.000000)" stroke="#000000" stroke-width="2">
+            <g id="Extras" transform="translate(48.000000, 1046.000000)">
+                <g id="up-right" transform="translate(528.000000, 0.000000)">
+                    <path d="M18,6 L5,19" id="Path-58"/>
+                    <polyline id="Path-59" stroke-linejoin="round" transform="translate(13.000000, 11.000000) scale(-1, -1) translate(-13.000000, -11.000000) " points="7 5 7 17 19 17"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/client/src/assets/images/menu/home.svg b/client/src/assets/images/menu/home.html
index bb95e949a..b7b8cb755 100644
--- a/client/src/assets/images/menu/home.svg
+++ b/client/src/assets/images/menu/home.html
@@ -1,11 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>home</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Artboard-4" transform="translate(-620.000000, -159.000000)" stroke="#808080" stroke-width="2">
+        <g id="Artboard-4" transform="translate(-620.000000, -159.000000)" stroke="#000000" stroke-width="2">
            <g id="34" transform="translate(620.000000, 159.000000)">
                <path d="M1,11 L12,2 C12,2 22.9999989,11.0000005 23,11" id="Path-50"></path>
                <path d="M3,10 C3,10 3,10.4453982 3,10.9968336 L3,20.0170446 C3,20.5675806 3.43788135,21.0138782 4.00292933,21.0138781 L8.99707067,21.0138779 C9.55097324,21.0138779 10,20.5751284 10,20.0089602 L10,15.0049177 C10,14.449917 10.4433532,14 11.0093689,14 L12.9906311,14 C13.5480902,14 14,14.4387495 14,15.0049177 L14,20.0089602 C14,20.5639609 14.4378817,21.0138779 15.0029302,21.0138779 L19.9970758,21.0138781 C20.5509789,21.0138782 21.000006,20.56848 21.000006,20.0170446 L21.0000057,10" id="Path-51"></path>
diff --git a/client/src/assets/images/menu/recently-added.svg b/client/src/assets/images/menu/recently-added.html
index 6473837f8..d551bfb69 100644
--- a/client/src/assets/images/menu/recently-added.svg
+++ b/client/src/assets/images/menu/recently-added.html
@@ -1,12 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard-4" transform="translate(-92.000000, -115.000000)">
            <g id="2" transform="translate(92.000000, 115.000000)">
-                <circle id="Oval-1" stroke="#808080" stroke-width="2" cx="12" cy="12" r="10"></circle>
+                <circle id="Oval-1" stroke="#000000" stroke-width="2" cx="12" cy="12" r="10"></circle>
-                <rect id="Rectangle-1" fill="#808080" x="11" y="7" width="2" height="10" rx="1"></rect>
+                <rect id="Rectangle-1" fill="#000000" x="11" y="7" width="2" height="10" rx="1"></rect>
-                <rect id="Rectangle-1" fill="#808080" x="7" y="11" width="10" height="2" rx="1"></rect>
+                <rect id="Rectangle-1" fill="#000000" x="7" y="11" width="10" height="2" rx="1"></rect>
            </g>
        </g>
    </g>
diff --git a/client/src/assets/images/menu/subscriptions.svg b/client/src/assets/images/menu/subscriptions.html
index cd6efc54e..08322e520 100644
--- a/client/src/assets/images/menu/subscriptions.svg
+++ b/client/src/assets/images/menu/subscriptions.html
@@ -1,25 +1,22 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>podcasts</title>
-    <desc>Created with Sketch.</desc>
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="97.3333865%" id="linearGradient-1">
-            <stop stop-color="#808080" offset="0%"></stop>
+            <stop stop-color="#000000" offset="0%"></stop>
-            <stop stop-color="#808080" stop-opacity="0.247310915" offset="100%"></stop>
+            <stop stop-color="#000000" stop-opacity="0.247310915" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="97.8635204%" id="linearGradient-2">
-            <stop stop-color="#808080" offset="0%"></stop>
+            <stop stop-color="#000000" offset="0%"></stop>
-            <stop stop-color="#808080" stop-opacity="0.250707654" offset="100%"></stop>
+            <stop stop-color="#000000" stop-opacity="0.250707654" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard-4" transform="translate(-532.000000, -775.000000)">
            <g id="312" transform="translate(532.000000, 775.000000)">
-                <circle id="Oval-169" fill="#808080" cx="12" cy="10" r="3"></circle>
+                <circle id="Oval-169" fill="#000000" cx="12" cy="10" r="3"></circle>
                <path d="M16.3851456,13.8501206 C17.4222377,12.6991612 18,11.4167199 18,10 C18,6.74089158 15.2591084,4 12,4 C8.74089158,4 6,6.74089158 6,10 C6,11.4186069 6.57916224,12.7027674 7.61838071,13.8540306 C7.80341316,14.0590125 8.11958231,14.0751848 8.32456427,13.8901523 C8.52954623,13.7051199 8.5457185,13.3889507 8.36068606,13.1839688 C7.47616718,12.2040844 7,11.148292 7,10 C7,7.29317633 9.29317633,5 12,5 C14.7068237,5 17,7.29317633 17,10 C17,11.1466944 16.5249958,12.2010466 15.6422459,13.1807178 C15.4573954,13.3858639 15.4738483,13.7020185 15.6789944,13.886869 C15.8841405,14.0717195 16.2002951,14.0552666 16.3851456,13.8501206 Z" id="Oval-169" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
                <path d="M17.5678226,18.3077078 C20.3159646,16.4626239 22,13.3733223 22,10 C22,4.4771525 17.5228475,0 12,0 C6.4771525,0 2,4.4771525 2,10 C2,13.3762414 3.68696556,16.4678678 6.43901638,18.3122954 C6.89779529,18.6197696 7.51896613,18.4971129 7.82644029,18.0383339 C8.13391444,17.579555 8.0112577,16.9583842 7.55247879,16.65091 C5.34877306,15.1739839 4,12.7021478 4,10 C4,5.581722 7.581722,2 12,2 C16.418278,2 20,5.581722 20,10 C20,12.699815 18.6535741,15.1697843 16.4529947,16.6472384 C15.9944687,16.9550897 15.8723227,17.5763611 16.180174,18.0348871 C16.4880252,18.4934131 17.1092967,18.6155591 17.5678226,18.3077078 Z" id="Oval-169" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
-                <path d="M9.32918137,15.9750882 C9.14737952,14.8842771 9.89826062,14 10.9979131,14 L13.0020869,14 C14.1055038,14 14.8534426,14.8793447 14.6708186,15.9750882 L13.6633817,22.0197096 C13.5731485,22.561109 13.0573397,23 12.5010434,23 L11.4989566,23 C10.9472481,23 10.4276519,22.5659113 10.3366183,22.0197096 L9.32918137,15.9750882 Z" id="Rectangle-217" fill="#808080"></path>
+                <path d="M9.32918137,15.9750882 C9.14737952,14.8842771 9.89826062,14 10.9979131,14 L13.0020869,14 C14.1055038,14 14.8534426,14.8793447 14.6708186,15.9750882 L13.6633817,22.0197096 C13.5731485,22.561109 13.0573397,23 12.5010434,23 L11.4989566,23 C10.9472481,23 10.4276519,22.5659113 10.3366183,22.0197096 L9.32918137,15.9750882 Z" id="Rectangle-217" fill="#000000"></path>
            </g>
        </g>
    </g>
diff --git a/client/src/assets/images/menu/trending.svg b/client/src/assets/images/menu/trending.html
index ffc65cc04..f1ce11487 100644
--- a/client/src/assets/images/menu/trending.svg
+++ b/client/src/assets/images/menu/trending.html
@@ -1,11 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>graph</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="Artboard-4" transform="translate(-444.000000, -203.000000)" stroke-width="2" stroke="#808080">
+        <g id="Artboard-4" transform="translate(-444.000000, -203.000000)" stroke-width="2" stroke="#000000">
            <g id="50" transform="translate(444.000000, 203.000000)">
                <polyline id="Path-96" points="3 3 3 21.006249 21.0246733 21.006249"></polyline>
                <polyline id="Path-101" points="6 18 11 12 14 13 19 7"></polyline>
diff --git a/client/src/assets/images/video/playlist-add.html b/client/src/assets/images/video/playlist-add.html
new file mode 100644
index 000000000..ada845c75
--- /dev/null
+++ b/client/src/assets/images/video/playlist-add.html
@@ -0,0 +1,10 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 426.667 426.667" xml:space="preserve">
+  <g fill="#000000">
+    <rect x="0" y="64" width="256" height="42.667"/>
+    <rect x="0" y="149.333" width="256" height="42.667"/>
+    <rect x="0" y="234.667" width="170.667" height="42.667"/>
+    <polygon points="341.333,234.667 341.333,149.333 298.667,149.333 298.667,234.667 213.333,234.667 213.333,277.333
+      298.667,277.333 298.667,362.667 341.333,362.667 341.333,277.333 426.667,277.333 426.667,234.667                   "/>
+  </g>
+</svg>
diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
new file mode 100644
index 000000000..bbd3e008d
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -0,0 +1,161 @@
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import * as videojs from 'video.js'
+import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from '../peertube-videojs-typings'
+import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
+import { Events } from 'p2p-media-loader-core'
+import { timeToInt } from '../utils'
+// videojs-hlsjs-plugin needs videojs in window
+window['videojs'] = videojs
+require('@streamroot/videojs-hlsjs-plugin')
+const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+class P2pMediaLoaderPlugin extends Plugin {
+  private readonly CONSTANTS = {
+    INFO_SCHEDULER: 1000 // Don't change this
+  }
+  private readonly options: P2PMediaLoaderPluginOptions
+  private hlsjs: any // Don't type hlsjs to not bundle the module
+  private p2pEngine: Engine
+  private statsP2PBytes = {
+    pendingDownload: [] as number[],
+    pendingUpload: [] as number[],
+    numPeers: 0,
+    totalDownload: 0,
+    totalUpload: 0
+  }
+  private statsHTTPBytes = {
+    pendingDownload: [] as number[],
+    pendingUpload: [] as number[],
+    totalDownload: 0,
+    totalUpload: 0
+  }
+  private startTime: number
+  private networkInfoInterval: any
+  constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) {
+    super(player, options)
+    this.options = options
+    if (!videojs.Html5Hlsjs) {
+      const message = 'HLS.js does not seem to be supported.'
+      console.warn(message)
+      player.ready(() => player.trigger('error', new Error(message)))
+      return
+    }
+    videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
+      this.hlsjs = hlsjs
+    })
+    initVideoJsContribHlsJsPlayer(player)
+    this.startTime = timeToInt(options.startTime)
+    player.src({
+      type: options.type,
+      src: options.src
+    })
+    player.one('play', () => {
+      player.addClass('vjs-has-big-play-button-clicked')
+    })
+    player.ready(() => this.initialize())
+  }
+  dispose () {
+    if (this.hlsjs) this.hlsjs.destroy()
+    if (this.p2pEngine) this.p2pEngine.destroy()
+    clearInterval(this.networkInfoInterval)
+  }
+  private initialize () {
+    initHlsJsPlayer(this.hlsjs)
+    const tech = this.player.tech_
+    this.p2pEngine = tech.options_.hlsjsConfig.loader.getEngine()
+    // Avoid using constants to not import hls.hs
+    // https://github.com/video-dev/hls.js/blob/master/src/events.js#L37
+    this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => {
+      this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
+    })
+    this.p2pEngine.on(Events.SegmentError, (segment, err) => {
+      console.error('Segment error.', segment, err)
+    })
+    this.statsP2PBytes.numPeers = 1 + this.options.redundancyBaseUrls.length
+    this.runStats()
+    this.hlsjs.on('hlsLevelLoaded', () => {
+      if (this.startTime) this.player.currentTime(this.startTime)
+      this.hlsjs.off('hlsLevelLoaded', this)
+    })
+  }
+  private runStats () {
+    this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => {
+      const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
+      elem.pendingDownload.push(size)
+      elem.totalDownload += size
+    })
+    this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => {
+      const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
+      elem.pendingUpload.push(size)
+      elem.totalUpload += size
+    })
+    this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
+    this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
+    this.networkInfoInterval = setInterval(() => {
+      const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
+      const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
+      const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload)
+      const httpUploadSpeed = this.arraySum(this.statsHTTPBytes.pendingUpload)
+      this.statsP2PBytes.pendingDownload = []
+      this.statsP2PBytes.pendingUpload = []
+      this.statsHTTPBytes.pendingDownload = []
+      this.statsHTTPBytes.pendingUpload = []
+      return this.player.trigger('p2pInfo', {
+        http: {
+          downloadSpeed: httpDownloadSpeed,
+          uploadSpeed: httpUploadSpeed,
+          downloaded: this.statsHTTPBytes.totalDownload,
+          uploaded: this.statsHTTPBytes.totalUpload
+        },
+        p2p: {
+          downloadSpeed: p2pDownloadSpeed,
+          uploadSpeed: p2pUploadSpeed,
+          numPeers: this.statsP2PBytes.numPeers,
+          downloaded: this.statsP2PBytes.totalDownload,
+          uploaded: this.statsP2PBytes.totalUpload
+        }
+      } as PlayerNetworkInfo)
+    }, this.CONSTANTS.INFO_SCHEDULER)
+  }
+  private arraySum (data: number[]) {
+    return data.reduce((a: number, b: number) => a + b, 0)
+  }
+}
+videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
+export { P2pMediaLoaderPlugin }
diff --git a/client/src/assets/player/p2p-media-loader/segment-url-builder.ts b/client/src/assets/player/p2p-media-loader/segment-url-builder.ts
new file mode 100644
index 000000000..fb990a19d
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/segment-url-builder.ts
@@ -0,0 +1,28 @@
+import { basename } from 'path'
+import { Segment } from 'p2p-media-loader-core'
+function segmentUrlBuilderFactory (baseUrls: string[]) {
+  return function segmentBuilder (segment: Segment) {
+    const max = baseUrls.length + 1
+    const i = getRandomInt(max)
+    if (i === max - 1) return segment.url
+    const newBaseUrl = baseUrls[i]
+    const middlePart = newBaseUrl.endsWith('/') ? '' : '/'
+    return newBaseUrl + middlePart + basename(segment.url)
+  }
+}
+// ---------------------------------------------------------------------------
+export {
+  segmentUrlBuilderFactory
+}
+// ---------------------------------------------------------------------------
+function getRandomInt (max: number) {
+  return Math.floor(Math.random() * Math.floor(max))
+}
diff --git a/client/src/assets/player/p2p-media-loader/segment-validator.ts b/client/src/assets/player/p2p-media-loader/segment-validator.ts
new file mode 100644
index 000000000..72c32f9e0
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/segment-validator.ts
@@ -0,0 +1,63 @@
+import { Segment } from 'p2p-media-loader-core'
+import { basename } from 'path'
+function segmentValidatorFactory (segmentsSha256Url: string) {
+  const segmentsJSON = fetchSha256Segments(segmentsSha256Url)
+  const regex = /bytes=(\d+)-(\d+)/
+  return async function segmentValidator (segment: Segment) {
+    const filename = basename(segment.url)
+    const captured = regex.exec(segment.range)
+    const range = captured[1] + '-' + captured[2]
+    const hashShouldBe = (await segmentsJSON)[filename][range]
+    if (hashShouldBe === undefined) {
+      throw new Error(`Unknown segment name ${filename}/${range} in segment validator`)
+    }
+    const calculatedSha = bufferToEx(await sha256(segment.data))
+    if (calculatedSha !== hashShouldBe) {
+      throw new Error(
+        `Hashes does not correspond for segment ${filename}/${range}` +
+        `(expected: ${hashShouldBe} instead of ${calculatedSha})`
+      )
+    }
+  }
+}
+// ---------------------------------------------------------------------------
+export {
+  segmentValidatorFactory
+}
+// ---------------------------------------------------------------------------
+function fetchSha256Segments (url: string) {
+  return fetch(url)
+    .then(res => res.json())
+    .catch(err => {
+      console.error('Cannot get sha256 segments', err)
+      return {}
+    })
+}
+function sha256 (data?: ArrayBuffer) {
+  if (!data) return undefined
+  return window.crypto.subtle.digest('SHA-256', data)
+}
+// Thanks: https://stackoverflow.com/a/53307879
+function bufferToEx (buffer?: ArrayBuffer) {
+  if (!buffer) return ''
+  let s = ''
+  const h = '0123456789abcdef'
+  const o = new Uint8Array(buffer)
+  o.forEach((v: any) => s += h[ v >> 4 ] + h[ v & 15 ])
+  return s
+}
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
new file mode 100644
index 000000000..6cdd54372
--- /dev/null
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -0,0 +1,472 @@
+import { VideoFile } from '../../../../shared/models/videos'
+// @ts-ignore
+import * as videojs from 'video.js'
+import 'videojs-hotkeys'
+import 'videojs-dock'
+import 'videojs-contextmenu-ui'
+import 'videojs-contrib-quality-levels'
+import './peertube-plugin'
+import './videojs-components/peertube-link-button'
+import './videojs-components/resolution-menu-button'
+import './videojs-components/settings-menu-button'
+import './videojs-components/p2p-info-button'
+import './videojs-components/peertube-load-progress-bar'
+import './videojs-components/theater-button'
+import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
+import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
+import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
+import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
+import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
+// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
+videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
+// Change Captions to Subtitles/CC
+videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
+// We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
+videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
+export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
+export type WebtorrentOptions = {
+  videoFiles: VideoFile[]
+}
+export type P2PMediaLoaderOptions = {
+  playlistUrl: string
+  segmentsSha256Url: string
+  trackerAnnounce: string[]
+  redundancyBaseUrls: string[]
+  videoFiles: VideoFile[]
+}
+export type CommonOptions = {
+  playerElement: HTMLVideoElement
+  onPlayerElementChange: (element: HTMLVideoElement) => void
+  autoplay: boolean
+  videoDuration: number
+  enableHotkeys: boolean
+  inactivityTimeout: number
+  poster: string
+  startTime: number | string
+  stopTime: number | string
+  theaterMode: boolean
+  captions: boolean
+  peertubeLink: boolean
+  videoViewUrl: string
+  embedUrl: string
+  language?: string
+  controls?: boolean
+  muted?: boolean
+  loop?: boolean
+  subtitle?: string
+  videoCaptions: VideoJSCaption[]
+  userWatching?: UserWatching
+  serverUrl: string
+}
+export type PeertubePlayerManagerOptions = {
+  common: CommonOptions,
+  webtorrent: WebtorrentOptions,
+  p2pMediaLoader?: P2PMediaLoaderOptions
+}
+export class PeertubePlayerManager {
+  private static videojsLocaleCache: { [ path: string ]: any } = {}
+  private static playerElementClassName: string
+  static getServerTranslations (serverUrl: string, locale: string) {
+    const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
+    // It is the default locale, nothing to translate
+    if (!path) return Promise.resolve(undefined)
+    return fetch(path + '/server.json')
+      .then(res => res.json())
+      .catch(err => {
+        console.error('Cannot get server translations', err)
+        return undefined
+      })
+  }
+  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) {
+    let p2pMediaLoader: any
+    this.playerElementClassName = options.common.playerElement.className
+    if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin')
+    if (mode === 'p2p-media-loader') {
+      [ p2pMediaLoader ] = await Promise.all([
+        import('p2p-media-loader-hlsjs'),
+        import('./p2p-media-loader/p2p-media-loader-plugin')
+      ])
+    }
+    const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader)
+    await this.loadLocaleInVideoJS(options.common.serverUrl, options.common.language)
+    const self = this
+    return new Promise(res => {
+      videojs(options.common.playerElement, videojsOptions, function (this: any) {
+        const player = this
+        player.tech_.one('error', () => self.maybeFallbackToWebTorrent(mode, player, options))
+        player.one('error', () => self.maybeFallbackToWebTorrent(mode, player, options))
+        self.addContextMenu(mode, player, options.common.embedUrl)
+        return res(player)
+      })
+    })
+  }
+  private static async maybeFallbackToWebTorrent (currentMode: PlayerMode, player: any, options: PeertubePlayerManagerOptions) {
+    if (currentMode === 'webtorrent') return
+    console.log('Fallback to webtorrent.')
+    const newVideoElement = document.createElement('video')
+    newVideoElement.className = this.playerElementClassName
+    // VideoJS wraps our video element inside a div
+    let currentParentPlayerElement = options.common.playerElement.parentNode
+    // Fix on IOS, don't ask me why
+    if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(options.common.playerElement.id).parentNode
+    currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement)
+    options.common.playerElement = newVideoElement
+    options.common.onPlayerElementChange(newVideoElement)
+    player.dispose()
+    await import('./webtorrent/webtorrent-plugin')
+    const mode = 'webtorrent'
+    const videojsOptions = this.getVideojsOptions(mode, options)
+    const self = this
+    videojs(newVideoElement, videojsOptions, function (this: any) {
+      const player = this
+      self.addContextMenu(mode, player, options.common.embedUrl)
+    })
+  }
+  private static loadLocaleInVideoJS (serverUrl: string, locale: string) {
+    const path = PeertubePlayerManager.getLocalePath(serverUrl, locale)
+    // It is the default locale, nothing to translate
+    if (!path) return Promise.resolve(undefined)
+    let p: Promise<any>
+    if (PeertubePlayerManager.videojsLocaleCache[path]) {
+      p = Promise.resolve(PeertubePlayerManager.videojsLocaleCache[path])
+    } else {
+      p = fetch(path + '/player.json')
+        .then(res => res.json())
+        .then(json => {
+          PeertubePlayerManager.videojsLocaleCache[path] = json
+          return json
+        })
+        .catch(err => {
+          console.error('Cannot get player translations', err)
+          return undefined
+        })
+    }
+    const completeLocale = getCompleteLocale(locale)
+    return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
+  }
+  private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) {
+    const commonOptions = options.common
+    const webtorrentOptions = options.webtorrent
+    const p2pMediaLoaderOptions = options.p2pMediaLoader
+    let autoplay = options.common.autoplay
+    let html5 = {}
+    const plugins: VideoJSPluginOptions = {
+      peertube: {
+        mode,
+        autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
+        videoViewUrl: commonOptions.videoViewUrl,
+        videoDuration: commonOptions.videoDuration,
+        userWatching: commonOptions.userWatching,
+        subtitle: commonOptions.subtitle,
+        videoCaptions: commonOptions.videoCaptions,
+        stopTime: commonOptions.stopTime
+      }
+    }
+    if (mode === 'p2p-media-loader') {
+      const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
+        redundancyBaseUrls: options.p2pMediaLoader.redundancyBaseUrls,
+        type: 'application/x-mpegURL',
+        startTime: commonOptions.startTime,
+        src: p2pMediaLoaderOptions.playlistUrl
+      }
+      const trackerAnnounce = p2pMediaLoaderOptions.trackerAnnounce
+        .filter(t => t.startsWith('ws'))
+      const p2pMediaLoaderConfig = {
+        loader: {
+          trackerAnnounce,
+          segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url),
+          rtcConfig: getRtcConfig(),
+          requiredSegmentsPriority: 5,
+          segmentUrlBuilder: segmentUrlBuilderFactory(options.p2pMediaLoader.redundancyBaseUrls)
+        },
+        segments: {
+          swarmId: p2pMediaLoaderOptions.playlistUrl
+        }
+      }
+      const streamrootHls = {
+        levelLabelHandler: (level: { height: number, width: number }) => {
+          const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
+          let label = file.resolution.label
+          if (file.fps >= 50) label += file.fps
+          return label
+        },
+        html5: {
+          hlsjsConfig: {
+            liveSyncDurationCount: 7,
+            loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass()
+          }
+        }
+      }
+      Object.assign(plugins, { p2pMediaLoader, streamrootHls })
+      html5 = streamrootHls.html5
+    }
+    if (mode === 'webtorrent') {
+      const webtorrent = {
+        autoplay,
+        videoDuration: commonOptions.videoDuration,
+        playerElement: commonOptions.playerElement,
+        videoFiles: webtorrentOptions.videoFiles,
+        startTime: commonOptions.startTime
+      }
+      Object.assign(plugins, { webtorrent })
+      // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
+      autoplay = false
+    }
+    const videojsOptions = {
+      html5,
+      // We don't use text track settings for now
+      textTrackSettings: false,
+      controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
+      loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
+      muted: commonOptions.muted !== undefined
+        ? commonOptions.muted
+        : undefined, // Undefined so the player knows it has to check the local storage
+      poster: commonOptions.poster,
+      autoplay: autoplay === true ? 'any' : autoplay, // Use 'any' instead of true to get notifier by videojs if autoplay fails
+      inactivityTimeout: commonOptions.inactivityTimeout,
+      playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
+      plugins,
+      controlBar: {
+        children: this.getControlBarChildren(mode, {
+          captions: commonOptions.captions,
+          peertubeLink: commonOptions.peertubeLink,
+          theaterMode: commonOptions.theaterMode
+        })
+      }
+    }
+    if (commonOptions.enableHotkeys === true) {
+      Object.assign(videojsOptions.plugins, {
+        hotkeys: {
+          enableVolumeScroll: false,
+          enableModifiersForNumbers: false,
+          fullscreenKey: function (event: KeyboardEvent) {
+            // fullscreen with the f key or Ctrl+Enter
+            return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
+          },
+          seekStep: function (event: KeyboardEvent) {
+            // mimic VLC seek behavior, and default to 5 (original value is 5).
+            if (event.ctrlKey && event.altKey) {
+              return 5 * 60
+            } else if (event.ctrlKey) {
+              return 60
+            } else if (event.altKey) {
+              return 10
+            } else {
+              return 5
+            }
+          },
+          customKeys: {
+            increasePlaybackRateKey: {
+              key: function (event: KeyboardEvent) {
+                return event.key === '>'
+              },
+              handler: function (player: videojs.Player) {
+                player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
+              }
+            },
+            decreasePlaybackRateKey: {
+              key: function (event: KeyboardEvent) {
+                return event.key === '<'
+              },
+              handler: function (player: videojs.Player) {
+                player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
+              }
+            },
+            frameByFrame: {
+              key: function (event: KeyboardEvent) {
+                return event.key === '.'
+              },
+              handler: function (player: videojs.Player) {
+                player.pause()
+                // Calculate movement distance (assuming 30 fps)
+                const dist = 1 / 30
+                player.currentTime(player.currentTime() + dist)
+              }
+            }
+          }
+        }
+      })
+    }
+    if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
+      Object.assign(videojsOptions, { language: commonOptions.language })
+    }
+    return videojsOptions
+  }
+  private static getControlBarChildren (mode: PlayerMode, options: {
+    peertubeLink: boolean
+    theaterMode: boolean,
+    captions: boolean
+  }) {
+    const settingEntries = []
+    const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar'
+    // Keep an order
+    settingEntries.push('playbackRateMenuButton')
+    if (options.captions === true) settingEntries.push('captionsButton')
+    settingEntries.push('resolutionMenuButton')
+    const children = {
+      'playToggle': {},
+      'currentTimeDisplay': {},
+      'timeDivider': {},
+      'durationDisplay': {},
+      'liveDisplay': {},
+      'flexibleWidthSpacer': {},
+      'progressControl': {
+        children: {
+          'seekBar': {
+            children: {
+              [loadProgressBar]: {},
+              'mouseTimeDisplay': {},
+              'playProgressBar': {}
+            }
+          }
+        }
+      },
+      'p2PInfoButton': {},
+      'muteToggle': {},
+      'volumeControl': {},
+      'settingsButton': {
+        setup: {
+          maxHeightOffset: 40
+        },
+        entries: settingEntries
+      }
+    }
+    if (options.peertubeLink === true) {
+      Object.assign(children, {
+        'peerTubeLinkButton': {}
+      })
+    }
+    if (options.theaterMode === true) {
+      Object.assign(children, {
+        'theaterButton': {}
+      })
+    }
+    Object.assign(children, {
+      'fullscreenToggle': {}
+    })
+    return children
+  }
+  private static addContextMenu (mode: PlayerMode, player: any, videoEmbedUrl: string) {
+    const content = [
+      {
+        label: player.localize('Copy the video URL'),
+        listener: function () {
+          copyToClipboard(buildVideoLink())
+        }
+      },
+      {
+        label: player.localize('Copy the video URL at the current time'),
+        listener: function () {
+          const player = this as videojs.Player
+          copyToClipboard(buildVideoLink(player.currentTime()))
+        }
+      },
+      {
+        label: player.localize('Copy embed code'),
+        listener: () => {
+          copyToClipboard(buildVideoEmbed(videoEmbedUrl))
+        }
+      }
+    ]
+    if (mode === 'webtorrent') {
+      content.push({
+        label: player.localize('Copy magnet URI'),
+        listener: function () {
+          const player = this as videojs.Player
+          copyToClipboard(player.webtorrent().getCurrentVideoFile().magnetUri)
+        }
+      })
+    }
+    player.contextmenuUI({ content })
+  }
+  private static getLocalePath (serverUrl: string, locale: string) {
+    const completeLocale = getCompleteLocale(locale)
+    if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
+    return serverUrl + '/client/locales/' + completeLocale
+  }
+}
+// ############################################################################
+export {
+  videojs
+}
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
deleted file mode 100644
index 2de6d7fef..000000000
--- a/client/src/assets/player/peertube-player.ts
+++ /dev/null
@@ -1,300 +0,0 @@
-import { VideoFile } from '../../../../shared/models/videos'
-import 'videojs-hotkeys'
-import 'videojs-dock'
-import 'videojs-contextmenu-ui'
-import './peertube-link-button'
-import './resolution-menu-button'
-import './settings-menu-button'
-import './webtorrent-info-button'
-import './peertube-videojs-plugin'
-import './peertube-load-progress-bar'
-import './theater-button'
-import { UserWatching, VideoJSCaption, videojsUntyped } from './peertube-videojs-typings'
-import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
-import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
-// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
-videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
-// Change Captions to Subtitles/CC
-videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
-// We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
-videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
-function getVideojsOptions (options: {
-  autoplay: boolean
-  playerElement: HTMLVideoElement
-  videoViewUrl: string
-  videoDuration: number
-  videoFiles: VideoFile[]
-  enableHotkeys: boolean
-  inactivityTimeout: number
-  peertubeLink: boolean
-  poster: string
-  startTime: number | string
-  theaterMode: boolean
-  videoCaptions: VideoJSCaption[]
-  language?: string
-  controls?: boolean
-  muted?: boolean
-  loop?: boolean
-  subtitle?: string
-  userWatching?: UserWatching
-}) {
-  const videojsOptions = {
-    // We don't use text track settings for now
-    textTrackSettings: false,
-    controls: options.controls !== undefined ? options.controls : true,
-    loop: options.loop !== undefined ? options.loop : false,
-    muted: options.muted !== undefined ? options.muted : undefined, // Undefined so the player knows it has to check the local storage
-    poster: options.poster,
-    autoplay: false,
-    inactivityTimeout: options.inactivityTimeout,
-    playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
-    plugins: {
-      peertube: {
-        autoplay: options.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
-        videoCaptions: options.videoCaptions,
-        videoFiles: options.videoFiles,
-        playerElement: options.playerElement,
-        videoViewUrl: options.videoViewUrl,
-        videoDuration: options.videoDuration,
-        startTime: options.startTime,
-        userWatching: options.userWatching,
-        subtitle: options.subtitle
-      }
-    },
-    controlBar: {
-      children: getControlBarChildren(options)
-    }
-  }
-  if (options.enableHotkeys === true) {
-    Object.assign(videojsOptions.plugins, {
-      hotkeys: {
-        enableVolumeScroll: false,
-        enableModifiersForNumbers: false,
-        fullscreenKey: function (event: KeyboardEvent) {
-          // fullscreen with the f key or Ctrl+Enter
-          return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
-        },
-        seekStep: function (event: KeyboardEvent) {
-          // mimic VLC seek behavior, and default to 5 (original value is 5).
-          if (event.ctrlKey && event.altKey) {
-            return 5 * 60
-          } else if (event.ctrlKey) {
-            return 60
-          } else if (event.altKey) {
-            return 10
-          } else {
-            return 5
-          }
-        },
-        customKeys: {
-          increasePlaybackRateKey: {
-            key: function (event: KeyboardEvent) {
-              return event.key === '>'
-            },
-            handler: function (player: Player) {
-              player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
-            }
-          },
-          decreasePlaybackRateKey: {
-            key: function (event: KeyboardEvent) {
-              return event.key === '<'
-            },
-            handler: function (player: Player) {
-              player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
-            }
-          },
-          frameByFrame: {
-            key: function (event: KeyboardEvent) {
-              return event.key === '.'
-            },
-            handler: function (player: Player) {
-              player.pause()
-              // Calculate movement distance (assuming 30 fps)
-              const dist = 1 / 30
-              player.currentTime(player.currentTime() + dist)
-            }
-          }
-        }
-      }
-    })
-  }
-  if (options.language && !isDefaultLocale(options.language)) {
-    Object.assign(videojsOptions, { language: options.language })
-  }
-  return videojsOptions
-}
-function getControlBarChildren (options: {
-  peertubeLink: boolean
-  theaterMode: boolean,
-  videoCaptions: VideoJSCaption[]
-}) {
-  const settingEntries = []
-  // Keep an order
-  settingEntries.push('playbackRateMenuButton')
-  if (options.videoCaptions.length !== 0) settingEntries.push('captionsButton')
-  settingEntries.push('resolutionMenuButton')
-  const children = {
-    'playToggle': {},
-    'currentTimeDisplay': {},
-    'timeDivider': {},
-    'durationDisplay': {},
-    'liveDisplay': {},
-    'flexibleWidthSpacer': {},
-    'progressControl': {
-      children: {
-        'seekBar': {
-          children: {
-            'peerTubeLoadProgressBar': {},
-            'mouseTimeDisplay': {},
-            'playProgressBar': {}
-          }
-        }
-      }
-    },
-    'webTorrentButton': {},
-    'muteToggle': {},
-    'volumeControl': {},
-    'settingsButton': {
-      setup: {
-        maxHeightOffset: 40
-      },
-      entries: settingEntries
-    }
-  }
-  if (options.peertubeLink === true) {
-    Object.assign(children, {
-      'peerTubeLinkButton': {}
-    })
-  }
-  if (options.theaterMode === true) {
-    Object.assign(children, {
-      'theaterButton': {}
-    })
-  }
-  Object.assign(children, {
-    'fullscreenToggle': {}
-  })
-  return children
-}
-function addContextMenu (player: any, videoEmbedUrl: string) {
-  player.contextmenuUI({
-    content: [
-      {
-        label: player.localize('Copy the video URL'),
-        listener: function () {
-          copyToClipboard(buildVideoLink())
-        }
-      },
-      {
-        label: player.localize('Copy the video URL at the current time'),
-        listener: function () {
-          const player = this as Player
-          copyToClipboard(buildVideoLink(player.currentTime()))
-        }
-      },
-      {
-        label: player.localize('Copy embed code'),
-        listener: () => {
-          copyToClipboard(buildVideoEmbed(videoEmbedUrl))
-        }
-      },
-      {
-        label: player.localize('Copy magnet URI'),
-        listener: function () {
-          const player = this as Player
-          copyToClipboard(player.peertube().getCurrentVideoFile().magnetUri)
-        }
-      }
-    ]
-  })
-}
-function loadLocaleInVideoJS (serverUrl: string, videojs: any, locale: string) {
-  const path = getLocalePath(serverUrl, locale)
-  // It is the default locale, nothing to translate
-  if (!path) return Promise.resolve(undefined)
-  let p: Promise<any>
-  if (loadLocaleInVideoJS.cache[path]) {
-    p = Promise.resolve(loadLocaleInVideoJS.cache[path])
-  } else {
-    p = fetch(path + '/player.json')
-      .then(res => res.json())
-      .then(json => {
-        loadLocaleInVideoJS.cache[path] = json
-        return json
-      })
-      .catch(err => {
-        console.error('Cannot get player translations', err)
-        return undefined
-      })
-  }
-  const completeLocale = getCompleteLocale(locale)
-  return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json))
-}
-namespace loadLocaleInVideoJS {
-  export const cache: { [ path: string ]: any } = {}
-}
-function getServerTranslations (serverUrl: string, locale: string) {
-  const path = getLocalePath(serverUrl, locale)
-  // It is the default locale, nothing to translate
-  if (!path) return Promise.resolve(undefined)
-  return fetch(path + '/server.json')
-    .then(res => res.json())
-    .catch(err => {
-      console.error('Cannot get server translations', err)
-      return undefined
-    })
-}
-// ############################################################################
-export {
-  getServerTranslations,
-  loadLocaleInVideoJS,
-  getVideojsOptions,
-  addContextMenu
-}
-// ############################################################################
-function getLocalePath (serverUrl: string, locale: string) {
-  const completeLocale = getCompleteLocale(locale)
-  if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined
-  return serverUrl + '/client/locales/' + completeLocale
-}
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
new file mode 100644
index 000000000..dd9408c8e
--- /dev/null
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -0,0 +1,269 @@
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import * as videojs from 'video.js'
+import './videojs-components/settings-menu-button'
+import {
+  PeerTubePluginOptions,
+  ResolutionUpdateData,
+  UserWatching,
+  VideoJSCaption,
+  VideoJSComponentInterface,
+  videojsUntyped
+} from './peertube-videojs-typings'
+import { isMobile, timeToInt } from './utils'
+import {
+  getStoredLastSubtitle,
+  getStoredMute,
+  getStoredVolume,
+  saveLastSubtitle,
+  saveMuteInStore,
+  saveVolumeInStore
+} from './peertube-player-local-storage'
+const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+class PeerTubePlugin extends Plugin {
+  private readonly videoViewUrl: string
+  private readonly videoDuration: number
+  private readonly CONSTANTS = {
+    USER_WATCHING_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
+  }
+  private player: any
+  private videoCaptions: VideoJSCaption[]
+  private defaultSubtitle: string
+  private videoViewInterval: any
+  private userWatchingVideoInterval: any
+  private lastResolutionChange: ResolutionUpdateData
+  constructor (player: videojs.Player, options: PeerTubePluginOptions) {
+    super(player, options)
+    this.videoViewUrl = options.videoViewUrl
+    this.videoDuration = options.videoDuration
+    this.videoCaptions = options.videoCaptions
+    if (options.autoplay === true) this.player.addClass('vjs-has-autoplay')
+    this.player.on('autoplay-failure', () => {
+      this.player.removeClass('vjs-has-autoplay')
+    })
+    this.player.ready(() => {
+      const playerOptions = this.player.options_
+      if (options.mode === 'webtorrent') {
+        this.player.webtorrent().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
+        this.player.webtorrent().on('autoResolutionChange', (_: any, d: any) => this.trigger('autoResolutionChange', d))
+      }
+      if (options.mode === 'p2p-media-loader') {
+        this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
+      }
+      this.player.tech_.on('loadedqualitydata', () => {
+        setTimeout(() => {
+          // Replay a resolution change, now we loaded all quality data
+          if (this.lastResolutionChange) this.handleResolutionChange(this.lastResolutionChange)
+        }, 0)
+      })
+      const volume = getStoredVolume()
+      if (volume !== undefined) this.player.volume(volume)
+      const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
+      if (muted !== undefined) this.player.muted(muted)
+      this.defaultSubtitle = options.subtitle || getStoredLastSubtitle()
+      this.player.on('volumechange', () => {
+        saveVolumeInStore(this.player.volume())
+        saveMuteInStore(this.player.muted())
+      })
+      if (options.stopTime) {
+        const stopTime = timeToInt(options.stopTime)
+        const self = this
+        this.player.on('timeupdate', function onTimeUpdate () {
+          if (self.player.currentTime() > stopTime) {
+            self.player.pause()
+            self.player.trigger('stopped')
+            self.player.off('timeupdate', onTimeUpdate)
+          }
+        })
+      }
+      this.player.textTracks().on('change', () => {
+        const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => {
+          return t.kind === 'captions' && t.mode === 'showing'
+        })
+        if (!showing) {
+          saveLastSubtitle('off')
+          return
+        }
+        saveLastSubtitle(showing.language)
+      })
+      this.player.on('sourcechange', () => this.initCaptions())
+      this.player.duration(options.videoDuration)
+      this.initializePlayer()
+      this.runViewAdd()
+      if (options.userWatching) this.runUserWatchVideo(options.userWatching)
+    })
+  }
+  dispose () {
+    if (this.videoViewInterval) clearInterval(this.videoViewInterval)
+    if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
+  }
+  private initializePlayer () {
+    if (isMobile()) this.player.addClass('vjs-is-mobile')
+    this.initSmoothProgressBar()
+    this.initCaptions()
+    this.alterInactivity()
+  }
+  private runViewAdd () {
+    this.clearVideoViewInterval()
+    // After 30 seconds (or 3/4 of the video), add a view to the video
+    let minSecondsToView = 30
+    if (this.videoDuration < minSecondsToView) minSecondsToView = (this.videoDuration * 3) / 4
+    let secondsViewed = 0
+    this.videoViewInterval = setInterval(() => {
+      if (this.player && !this.player.paused()) {
+        secondsViewed += 1
+        if (secondsViewed > minSecondsToView) {
+          this.clearVideoViewInterval()
+          this.addViewToVideo().catch(err => console.error(err))
+        }
+      }
+    }, 1000)
+  }
+  private runUserWatchVideo (options: UserWatching) {
+    let lastCurrentTime = 0
+    this.userWatchingVideoInterval = setInterval(() => {
+      const currentTime = Math.floor(this.player.currentTime())
+      if (currentTime - lastCurrentTime >= 1) {
+        lastCurrentTime = currentTime
+        this.notifyUserIsWatching(currentTime, options.url, options.authorizationHeader)
+          .catch(err => console.error('Cannot notify user is watching.', err))
+      }
+    }, this.CONSTANTS.USER_WATCHING_VIDEO_INTERVAL)
+  }
+  private clearVideoViewInterval () {
+    if (this.videoViewInterval !== undefined) {
+      clearInterval(this.videoViewInterval)
+      this.videoViewInterval = undefined
+    }
+  }
+  private addViewToVideo () {
+    if (!this.videoViewUrl) return Promise.resolve(undefined)
+    return fetch(this.videoViewUrl, { method: 'POST' })
+  }
+  private notifyUserIsWatching (currentTime: number, url: string, authorizationHeader: string) {
+    const body = new URLSearchParams()
+    body.append('currentTime', currentTime.toString())
+    const headers = new Headers({ 'Authorization': authorizationHeader })
+    return fetch(url, { method: 'PUT', body, headers })
+  }
+  private handleResolutionChange (data: ResolutionUpdateData) {
+    this.lastResolutionChange = data
+    const qualityLevels = this.player.qualityLevels()
+    for (let i = 0; i < qualityLevels.length; i++) {
+      if (qualityLevels[i].height === data.resolutionId) {
+        data.id = qualityLevels[i].id
+        break
+      }
+    }
+    this.trigger('resolutionChange', data)
+  }
+  private alterInactivity () {
+    let saveInactivityTimeout: number
+    const disableInactivity = () => {
+      saveInactivityTimeout = this.player.options_.inactivityTimeout
+      this.player.options_.inactivityTimeout = 0
+    }
+    const enableInactivity = () => {
+      this.player.options_.inactivityTimeout = saveInactivityTimeout
+    }
+    const settingsDialog = this.player.children_.find((c: any) => c.name_ === 'SettingsDialog')
+    this.player.controlBar.on('mouseenter', () => disableInactivity())
+    settingsDialog.on('mouseenter', () => disableInactivity())
+    this.player.controlBar.on('mouseleave', () => enableInactivity())
+    settingsDialog.on('mouseleave', () => enableInactivity())
+  }
+  private initCaptions () {
+    for (const caption of this.videoCaptions) {
+      this.player.addRemoteTextTrack({
+        kind: 'captions',
+        label: caption.label,
+        language: caption.language,
+        id: caption.language,
+        src: caption.src,
+        default: this.defaultSubtitle === caption.language
+      }, false)
+    }
+    this.player.trigger('captionsChanged')
+  }
+  // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
+  private initSmoothProgressBar () {
+    const SeekBar = videojsUntyped.getComponent('SeekBar')
+    SeekBar.prototype.getPercent = function getPercent () {
+      // Allows for smooth scrubbing, when player can't keep up.
+      // const time = (this.player_.scrubbing()) ?
+      //   this.player_.getCache().currentTime :
+      //   this.player_.currentTime()
+      const time = this.player_.currentTime()
+      const percent = time / this.player_.duration()
+      return percent >= 1 ? 1 : percent
+    }
+    SeekBar.prototype.handleMouseMove = function handleMouseMove (event: any) {
+      let newTime = this.calculateDistance(event) * this.player_.duration()
+      if (newTime === this.player_.duration()) {
+        newTime = newTime - 0.1
+      }
+      this.player_.currentTime(newTime)
+      this.update()
+    }
+  }
+}
+videojs.registerPlugin('peertube', PeerTubePlugin)
+export { PeerTubePlugin }
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index 634c7fdc9..a96b0bc8c 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -3,11 +3,16 @@
 import * as videojs from 'video.js'
 import { VideoFile } from '../../../../shared/models/videos/video.model'
-import { PeerTubePlugin } from './peertube-videojs-plugin'
+import { PeerTubePlugin } from './peertube-plugin'
+import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
+import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin'
+import { PlayerMode } from './peertube-player-manager'
 declare namespace videojs {
  interface Player {
    peertube (): PeerTubePlugin
+    webtorrent (): WebTorrentPlugin
+    p2pMediaLoader (): P2pMediaLoaderPlugin
  }
 }
@@ -30,26 +35,100 @@ type UserWatching = {
  authorizationHeader: string
 }
-type PeertubePluginOptions = {
+type PeerTubePluginOptions = {
-  videoFiles: VideoFile[]
+  mode: PlayerMode
-  playerElement: HTMLVideoElement
+  autoplay: boolean
  videoViewUrl: string
  videoDuration: number
-  startTime: number | string
-  autoplay: boolean,
-  videoCaptions: VideoJSCaption[]
-  subtitle?: string
  userWatching?: UserWatching
+  subtitle?: string
+  videoCaptions: VideoJSCaption[]
+  stopTime: number | string
+}
+type WebtorrentPluginOptions = {
+  playerElement: HTMLVideoElement
+  autoplay: boolean
+  videoDuration: number
+  videoFiles: VideoFile[]
+  startTime: number | string
+}
+type P2PMediaLoaderPluginOptions = {
+  redundancyBaseUrls: string[]
+  type: string
+  src: string
+  startTime: number | string
+}
+type VideoJSPluginOptions = {
+  peertube: PeerTubePluginOptions
+  webtorrent?: WebtorrentPluginOptions
+  p2pMediaLoader?: P2PMediaLoaderPluginOptions
 }
 // videojs typings don't have some method we need
 const videojsUntyped = videojs as any
+type LoadedQualityData = {
+  qualitySwitchCallback: Function,
+  qualityData: {
+    video: {
+      id: number
+      label: string
+      selected: boolean
+    }[]
+  }
+}
+type ResolutionUpdateData = {
+  auto: boolean,
+  resolutionId: number
+  id?: number
+}
+type AutoResolutionUpdateData = {
+  possible: boolean
+}
+type PlayerNetworkInfo = {
+  http: {
+    downloadSpeed: number
+    uploadSpeed: number
+    downloaded: number
+    uploaded: number
+  }
+  p2p: {
+    downloadSpeed: number
+    uploadSpeed: number
+    downloaded: number
+    uploaded: number
+    numPeers: number
+  }
+}
 export {
+  PlayerNetworkInfo,
+  ResolutionUpdateData,
+  AutoResolutionUpdateData,
  VideoJSComponentInterface,
-  PeertubePluginOptions,
  videojsUntyped,
  VideoJSCaption,
-  UserWatching
+  UserWatching,
+  PeerTubePluginOptions,
+  WebtorrentPluginOptions,
+  P2PMediaLoaderPluginOptions,
+  VideoJSPluginOptions,
+  LoadedQualityData
 }
diff --git a/client/src/assets/player/resolution-menu-button.ts b/client/src/assets/player/resolution-menu-button.ts
deleted file mode 100644
index a3c1108ca..000000000
--- a/client/src/assets/player/resolution-menu-button.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
-import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
-import { ResolutionMenuItem } from './resolution-menu-item'
-const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
-const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
-class ResolutionMenuButton extends MenuButton {
-  label: HTMLElement
-  constructor (player: Player, options: any) {
-    super(player, options)
-    this.player = player
-    player.peertube().on('videoFileUpdate', () => this.updateLabel())
-    player.peertube().on('autoResolutionUpdate', () => this.updateLabel())
-  }
-  createEl () {
-    const el = super.createEl()
-    this.labelEl_ = videojsUntyped.dom.createEl('div', {
-      className: 'vjs-resolution-value',
-      innerHTML: this.buildLabelHTML()
-    })
-    el.appendChild(this.labelEl_)
-    return el
-  }
-  updateARIAAttributes () {
-    this.el().setAttribute('aria-label', 'Quality')
-  }
-  createMenu () {
-    const menu = new Menu(this.player_)
-    for (const videoFile of this.player_.peertube().videoFiles) {
-      let label = videoFile.resolution.label
-      if (videoFile.fps && videoFile.fps >= 50) {
-        label += videoFile.fps
-      }
-      menu.addChild(new ResolutionMenuItem(
-        this.player_,
-        {
-          id: videoFile.resolution.id,
-          label,
-          src: videoFile.magnetUri
-        })
-      )
-    }
-    menu.addChild(new ResolutionMenuItem(
-      this.player_,
-      {
-        id: -1,
-        label: this.player_.localize('Auto'),
-        src: null
-      }
-    ))
-    return menu
-  }
-  updateLabel () {
-    if (!this.labelEl_) return
-    this.labelEl_.innerHTML = this.buildLabelHTML()
-  }
-  buildCSSClass () {
-    return super.buildCSSClass() + ' vjs-resolution-button'
-  }
-  buildWrapperCSSClass () {
-    return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
-  }
-  private buildLabelHTML () {
-    return this.player_.peertube().getCurrentResolutionLabel()
-  }
-}
-ResolutionMenuButton.prototype.controlText_ = 'Quality'
-MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
diff --git a/client/src/assets/player/resolution-menu-item.ts b/client/src/assets/player/resolution-menu-item.ts
deleted file mode 100644
index b54fd91ef..000000000
--- a/client/src/assets/player/resolution-menu-item.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
-import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
-const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
-class ResolutionMenuItem extends MenuItem {
-  constructor (player: Player, options: any) {
-    const currentResolutionId = player.peertube().getCurrentResolutionId()
-    options.selectable = true
-    options.selected = options.id === currentResolutionId
-    super(player, options)
-    this.label = options.label
-    this.id = options.id
-    player.peertube().on('videoFileUpdate', () => this.updateSelection())
-    player.peertube().on('autoResolutionUpdate', () => this.updateSelection())
-  }
-  handleClick (event: any) {
-    if (this.id === -1 && this.player_.peertube().isAutoResolutionForbidden()) return
-    super.handleClick(event)
-    // Auto resolution
-    if (this.id === -1) {
-      this.player_.peertube().enableAutoResolution()
-      return
-    }
-    this.player_.peertube().disableAutoResolution()
-    this.player_.peertube().updateResolution(this.id)
-  }
-  updateSelection () {
-    // Check if auto resolution is forbidden or not
-    if (this.id === -1) {
-      if (this.player_.peertube().isAutoResolutionForbidden()) {
-        this.addClass('disabled')
-      } else {
-        this.removeClass('disabled')
-      }
-    }
-    if (this.player_.peertube().isAutoResolutionOn()) {
-      this.selected(this.id === -1)
-      return
-    }
-    this.selected(this.player_.peertube().getCurrentResolutionId() === this.id)
-  }
-  getLabel () {
-    if (this.id === -1) {
-      return this.label + ' <small>' + this.player_.peertube().getCurrentResolutionLabel() + '</small>'
-    }
-    return this.label
-  }
-}
-MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
-export { ResolutionMenuItem }
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index 8b9f34b99..366689962 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -4,6 +4,10 @@ function toTitleCase (str: string) {
  return str.charAt(0).toUpperCase() + str.slice(1)
 }
+function isWebRTCDisabled () {
+  return !!((window as any).RTCPeerConnection || (window as any).mozRTCPeerConnection || (window as any).webkitRTCPeerConnection) === false
+}
 // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
 // Don't import all Angular stuff, just copy the code with shame
 const dictionaryBytes: Array<{max: number, type: string}> = [
@@ -42,7 +46,7 @@ function timeToInt (time: number | string) {
  if (!time) return 0
  if (typeof time === 'number') return time
-  const reg = /^((\d+)h)?((\d+)m)?((\d+)s?)?$/
+  const reg = /^((\d+)[h:])?((\d+)[m:])?((\d+)s?)?$/
  const matches = time.match(reg)
  if (!matches) return 0
@@ -54,18 +58,27 @@ function timeToInt (time: number | string) {
  return hours * 3600 + minutes * 60 + seconds
 }
-function secondsToTime (seconds: number) {
+function secondsToTime (seconds: number, full = false, symbol?: string) {
  let time = ''
-  let hours = Math.floor(seconds / 3600)
+  const hourSymbol = (symbol || 'h')
-  if (hours >= 1) time = hours + 'h'
+  const minuteSymbol = (symbol || 'm')
+  const secondsSymbol = full ? '' : 's'
+  const hours = Math.floor(seconds / 3600)
+  if (hours >= 1) time = hours + hourSymbol
+  else if (full) time = '0' + hourSymbol
  seconds %= 3600
-  let minutes = Math.floor(seconds / 60)
+  const minutes = Math.floor(seconds / 60)
-  if (minutes >= 1) time += minutes + 'm'
+  if (minutes >= 1 && minutes < 10 && full) time += '0' + minutes + minuteSymbol
+  else if (minutes >= 1) time += minutes + minuteSymbol
+  else if (full) time += '00' + minuteSymbol
  seconds %= 60
-  if (seconds >= 1) time += seconds + 's'
+  if (seconds >= 1 && seconds < 10 && full) time += '0' + seconds + secondsSymbol
+  else if (seconds >= 1) time += seconds + secondsSymbol
+  else if (full) time += '00'
  return time
 }
@@ -112,11 +125,27 @@ function videoFileMinByResolution (files: VideoFile[]) {
  return min
 }
+function getRtcConfig () {
+  return {
+    iceServers: [
+      {
+        urls: 'stun:stun.stunprotocol.org'
+      },
+      {
+        urls: 'stun:stun.framasoft.org'
+      }
+    ]
+  }
+}
 // ---------------------------------------------------------------------------
 export {
+  getRtcConfig,
  toTitleCase,
  timeToInt,
+  secondsToTime,
+  isWebRTCDisabled,
  buildVideoLink,
  buildVideoEmbed,
  videoFileMaxByResolution,
diff --git a/client/src/assets/player/webtorrent-info-button.ts b/client/src/assets/player/videojs-components/p2p-info-button.ts
index c3c1af951..6424787b2 100644
--- a/client/src/assets/player/webtorrent-info-button.ts
+++ b/client/src/assets/player/videojs-components/p2p-info-button.ts
@@ -1,8 +1,8 @@
-import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { PlayerNetworkInfo, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
-import { bytes } from './utils'
+import { bytes } from '../utils'
 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
-class WebtorrentInfoButton extends Button {
+class P2pInfoButton extends Button {
  createEl () {
    const div = videojsUntyped.dom.createEl('div', {
@@ -65,7 +65,7 @@ class WebtorrentInfoButton extends Button {
    subDivHttp.appendChild(subDivHttpText)
    div.appendChild(subDivHttp)
-    this.player_.peertube().on('torrentInfo', (event: any, data: any) => {
+    this.player_.on('p2pInfo', (event: any, data: PlayerNetworkInfo) => {
      // We are in HTTP fallback
      if (!data) {
        subDivHttp.className = 'vjs-peertube-displayed'
@@ -74,11 +74,14 @@ class WebtorrentInfoButton extends Button {
        return
      }
-      const downloadSpeed = bytes(data.downloadSpeed)
+      const p2pStats = data.p2p
-      const uploadSpeed = bytes(data.uploadSpeed)
+      const httpStats = data.http
-      const totalDownloaded = bytes(data.downloaded)
-      const totalUploaded = bytes(data.uploaded)
+      const downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed)
-      const numPeers = data.numPeers
+      const uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed)
+      const totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded)
+      const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded)
+      const numPeers = p2pStats.numPeers
      subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
        this.player_.localize('Total uploaded: ' + totalUploaded.join(' '))
@@ -90,7 +93,7 @@ class WebtorrentInfoButton extends Button {
      uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
      peersNumber.textContent = numPeers
-      peersText.textContent = ' ' + this.player_.localize('peers')
+      peersText.textContent = ' ' + (numPeers > 1 ? this.player_.localize('peers') : this.player_.localize('peer'))
      subDivHttp.className = 'vjs-peertube-hidden'
      subDivWebtorrent.className = 'vjs-peertube-displayed'
@@ -99,4 +102,4 @@ class WebtorrentInfoButton extends Button {
    return div
  }
 }
-Button.registerComponent('WebTorrentButton', WebtorrentInfoButton)
+Button.registerComponent('P2PInfoButton', P2pInfoButton)
diff --git a/client/src/assets/player/peertube-link-button.ts b/client/src/assets/player/videojs-components/peertube-link-button.ts
index de9a49de9..fed8ea33e 100644
--- a/client/src/assets/player/peertube-link-button.ts
+++ b/client/src/assets/player/videojs-components/peertube-link-button.ts
@@ -1,5 +1,5 @@
-import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
-import { buildVideoLink } from './utils'
+import { buildVideoLink } from '../utils'
 // FIXME: something weird with our path definition in tsconfig and typings
 // @ts-ignore
 import { Player } from 'video.js'
diff --git a/client/src/assets/player/peertube-load-progress-bar.ts b/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
index af276d1b2..9a0e3b550 100644
--- a/client/src/assets/player/peertube-load-progress-bar.ts
+++ b/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
@@ -1,4 +1,4 @@
-import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
 // FIXME: something weird with our path definition in tsconfig and typings
 // @ts-ignore
 import { Player } from 'video.js'
@@ -27,7 +27,7 @@ class PeerTubeLoadProgressBar extends Component {
  }
  update () {
-    const torrent = this.player().peertube().getTorrent()
+    const torrent = this.player().webtorrent().getTorrent()
    if (!torrent) return
    this.el_.style.width = (torrent.progress * 100) + '%'
diff --git a/client/src/assets/player/videojs-components/resolution-menu-button.ts b/client/src/assets/player/videojs-components/resolution-menu-button.ts
new file mode 100644
index 000000000..cff44de72
--- /dev/null
+++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts
@@ -0,0 +1,109 @@
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import { Player } from 'video.js'
+import { LoadedQualityData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import { ResolutionMenuItem } from './resolution-menu-item'
+const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
+const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
+class ResolutionMenuButton extends MenuButton {
+  label: HTMLElement
+  constructor (player: Player, options: any) {
+    super(player, options)
+    this.player = player
+    player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
+    player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
+  }
+  createEl () {
+    const el = super.createEl()
+    this.labelEl_ = videojsUntyped.dom.createEl('div', {
+      className: 'vjs-resolution-value'
+    })
+    el.appendChild(this.labelEl_)
+    return el
+  }
+  updateARIAAttributes () {
+    this.el().setAttribute('aria-label', 'Quality')
+  }
+  createMenu () {
+    return new Menu(this.player_)
+  }
+  buildCSSClass () {
+    return super.buildCSSClass() + ' vjs-resolution-button'
+  }
+  buildWrapperCSSClass () {
+    return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
+  }
+  private addClickListener (component: any) {
+    component.on('click', () => {
+      const children = this.menu.children()
+      for (const child of children) {
+        if (component !== child) {
+          child.selected(false)
+        }
+      }
+    })
+  }
+  private buildQualities (data: LoadedQualityData) {
+    // The automatic resolution item will need other labels
+    const labels: { [ id: number ]: string } = {}
+    data.qualityData.video.sort((a, b) => {
+      if (a.id > b.id) return -1
+      if (a.id === b.id) return 0
+      return 1
+    })
+    for (const d of data.qualityData.video) {
+      // Skip auto resolution, we'll add it ourselves
+      if (d.id === -1) continue
+      this.menu.addChild(new ResolutionMenuItem(
+        this.player_,
+        {
+          id: d.id,
+          label: d.label,
+          selected: d.selected,
+          callback: data.qualitySwitchCallback
+        })
+      )
+      labels[d.id] = d.label
+    }
+    this.menu.addChild(new ResolutionMenuItem(
+      this.player_,
+      {
+        id: -1,
+        label: this.player_.localize('Auto'),
+        labels,
+        callback: data.qualitySwitchCallback,
+        selected: true // By default, in auto mode
+      }
+    ))
+    for (const m of this.menu.children()) {
+      this.addClickListener(m)
+    }
+    this.trigger('menuChanged')
+  }
+}
+ResolutionMenuButton.prototype.controlText_ = 'Quality'
+MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
diff --git a/client/src/assets/player/videojs-components/resolution-menu-item.ts b/client/src/assets/player/videojs-components/resolution-menu-item.ts
new file mode 100644
index 000000000..6c42fefd2
--- /dev/null
+++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts
@@ -0,0 +1,83 @@
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import { Player } from 'video.js'
+import { AutoResolutionUpdateData, ResolutionUpdateData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
+class ResolutionMenuItem extends MenuItem {
+  private readonly id: number
+  private readonly label: string
+  // Only used for the automatic item
+  private readonly labels: { [id: number]: string }
+  private readonly callback: Function
+  private autoResolutionPossible: boolean
+  private currentResolutionLabel: string
+  constructor (player: Player, options: any) {
+    options.selectable = true
+    super(player, options)
+    this.autoResolutionPossible = true
+    this.currentResolutionLabel = ''
+    this.label = options.label
+    this.labels = options.labels
+    this.id = options.id
+    this.callback = options.callback
+    player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data))
+    // We only want to disable the "Auto" item
+    if (this.id === -1) {
+      player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data))
+    }
+  }
+  handleClick (event: any) {
+    // Auto button disabled?
+    if (this.autoResolutionPossible === false && this.id === -1) return
+    super.handleClick(event)
+    this.callback(this.id, 'video')
+  }
+  updateSelection (data: ResolutionUpdateData) {
+    if (this.id === -1) {
+      this.currentResolutionLabel = this.labels[data.id]
+    }
+    // Automatic resolution only
+    if (data.auto === true) {
+      this.selected(this.id === -1)
+      return
+    }
+    this.selected(this.id === data.id)
+  }
+  updateAutoResolution (data: AutoResolutionUpdateData) {
+    // Check if the auto resolution is enabled or not
+    if (data.possible === false) {
+      this.addClass('disabled')
+    } else {
+      this.removeClass('disabled')
+    }
+    this.autoResolutionPossible = data.possible
+  }
+  getLabel () {
+    if (this.id === -1) {
+      return this.label + ' <small>' + this.currentResolutionLabel + '</small>'
+    }
+    return this.label
+  }
+}
+MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
+export { ResolutionMenuItem }
diff --git a/client/src/assets/player/settings-menu-button.ts b/client/src/assets/player/videojs-components/settings-menu-button.ts
index a7aefdcc3..5e09032b4 100644
--- a/client/src/assets/player/settings-menu-button.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-button.ts
@@ -6,8 +6,8 @@
 import * as videojs from 'video.js'
 import { SettingsMenuItem } from './settings-menu-item'
-import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
-import { toTitleCase } from './utils'
+import { toTitleCase } from '../utils'
 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
 const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
@@ -53,7 +53,7 @@ class SettingsButton extends Button {
  onDisposeSettingsItem (event: any, name: string) {
    if (name === undefined) {
-      let children = this.menu.children()
+      const children = this.menu.children()
      while (children.length > 0) {
        children[0].dispose()
@@ -62,7 +62,7 @@ class SettingsButton extends Button {
      this.addClass('vjs-hidden')
    } else {
-      let item = this.menu.getChild(name)
+      const item = this.menu.getChild(name)
      if (item) {
        item.dispose()
@@ -148,8 +148,8 @@ class SettingsButton extends Button {
      return
    }
-    let offset = this.options_.setup.maxHeightOffset
+    const offset = this.options_.setup.maxHeightOffset
-    let maxHeight = this.playerComponent.el_.offsetHeight - offset
+    const maxHeight = this.playerComponent.el_.offsetHeight - offset
    if (height > maxHeight) {
      height = maxHeight
@@ -166,7 +166,7 @@ class SettingsButton extends Button {
  buildMenu () {
    this.menu = new Menu(this.player())
    this.menu.addClass('vjs-main-menu')
-    let entries = this.options_.entries
+    const entries = this.options_.entries
    if (entries.length === 0) {
      this.addClass('vjs-hidden')
@@ -174,7 +174,7 @@ class SettingsButton extends Button {
      return
    }
-    for (let entry of entries) {
+    for (const entry of entries) {
      this.addMenuItem(entry, this.options_)
    }
@@ -191,7 +191,7 @@ class SettingsButton extends Button {
    }
    options.name = toTitleCase(entry)
-    let settingsMenuItem = new SettingsMenuItem(this.player(), options, entry, this as any)
+    const settingsMenuItem = new SettingsMenuItem(this.player(), options, entry, this as any)
    this.menu.addChild(settingsMenuItem)
@@ -204,7 +204,7 @@ class SettingsButton extends Button {
  }
  resetChildren () {
-    for (let menuChild of this.menu.children()) {
+    for (const menuChild of this.menu.children()) {
      menuChild.reset()
    }
  }
@@ -213,7 +213,7 @@ class SettingsButton extends Button {
   * Hide all the sub menus
   */
  hideChildren () {
-    for (let menuChild of this.menu.children()) {
+    for (const menuChild of this.menu.children()) {
      menuChild.hideSubMenu()
    }
  }
diff --git a/client/src/assets/player/settings-menu-item.ts b/client/src/assets/player/videojs-components/settings-menu-item.ts
index 2a3460ae5..78879a2ec 100644
--- a/client/src/assets/player/settings-menu-item.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-item.ts
@@ -5,8 +5,8 @@
 // @ts-ignore
 import * as videojs from 'video.js'
-import { toTitleCase } from './utils'
+import { toTitleCase } from '../utils'
-import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
 const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
 const component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
@@ -167,7 +167,7 @@ class SettingsMenuItem extends MenuItem {
   * @method PrefixedEvent
   */
  PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
-    let prefix = ['webkit', 'moz', 'MS', 'o', '']
+    const prefix = ['webkit', 'moz', 'MS', 'o', '']
    for (let p = 0; p < prefix.length; p++) {
      if (!prefix[p]) {
@@ -220,12 +220,14 @@ class SettingsMenuItem extends MenuItem {
  }
  build () {
-    const saveUpdateLabel = this.subMenu.updateLabel
+    this.subMenu.on('updateLabel', () => {
-    this.subMenu.updateLabel = () => {
      this.update()
+    })
-      saveUpdateLabel.call(this.subMenu)
+    this.subMenu.on('menuChanged', () => {
-    }
+      this.bindClickEvents()
+      this.setSize()
+      this.update()
+    })
    this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_)
    this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
@@ -233,7 +235,7 @@ class SettingsMenuItem extends MenuItem {
    this.update()
    this.createBackButton()
-    this.getSize()
+    this.setSize()
    this.bindClickEvents()
    // prefixed event listeners for CSS TransitionEnd
@@ -247,7 +249,7 @@ class SettingsMenuItem extends MenuItem {
  update (event?: any) {
    let target: HTMLElement = null
-    let subMenu = this.subMenu.name()
+    const subMenu = this.subMenu.name()
    if (event && event.type === 'tap') {
      target = event.target
@@ -262,7 +264,7 @@ class SettingsMenuItem extends MenuItem {
      setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = this.subMenu.labelEl_.innerHTML, 250)
    } else {
      // Loop trough the submenu items to find the selected child
-      for (let subMenuItem of this.subMenu.menu.children_) {
+      for (const subMenuItem of this.subMenu.menu.children_) {
        if (!(subMenuItem instanceof component)) {
          continue
        }
@@ -285,7 +287,7 @@ class SettingsMenuItem extends MenuItem {
  }
  bindClickEvents () {
-    for (let item of this.subMenu.menu.children()) {
+    for (const item of this.subMenu.menu.children()) {
      if (!(item instanceof component)) {
        continue
      }
@@ -295,8 +297,9 @@ class SettingsMenuItem extends MenuItem {
  // save size of submenus on first init
  // if number of submenu items change dynamically more logic will be needed
-  getSize () {
+  setSize () {
    this.dialog.removeClass('vjs-hidden')
+    videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
    this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
    this.setMargin()
    this.dialog.addClass('vjs-hidden')
@@ -304,7 +307,7 @@ class SettingsMenuItem extends MenuItem {
  }
  setMargin () {
-    let [width] = this.size
+    const [ width ] = this.size
    this.settingsSubMenuEl_.style.marginRight = `-${width}px`
  }
diff --git a/client/src/assets/player/theater-button.ts b/client/src/assets/player/videojs-components/theater-button.ts
index 4f8fede3d..bf383cf34 100644
--- a/client/src/assets/player/theater-button.ts
+++ b/client/src/assets/player/videojs-components/theater-button.ts
@@ -2,8 +2,8 @@
 // @ts-ignore
 import * as videojs from 'video.js'
-import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
-import { saveTheaterInStore, getStoredTheater } from './peertube-player-local-storage'
+import { saveTheaterInStore, getStoredTheater } from '../peertube-player-local-storage'
 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
 class TheaterButton extends Button {
@@ -16,8 +16,11 @@ class TheaterButton extends Button {
    const enabled = getStoredTheater()
    if (enabled === true) {
      this.player_.addClass(TheaterButton.THEATER_MODE_CLASS)
      this.handleTheaterChange()
    }
+    this.player_.theaterEnabled = enabled
  }
  buildCSSClass () {
@@ -25,13 +28,17 @@ class TheaterButton extends Button {
  }
  handleTheaterChange () {
-    if (this.isTheaterEnabled()) {
+    const theaterEnabled = this.isTheaterEnabled()
+    if (theaterEnabled) {
      this.controlText('Normal mode')
    } else {
      this.controlText('Theater mode')
    }
-    saveTheaterInStore(this.isTheaterEnabled())
+    saveTheaterInStore(theaterEnabled)
+    this.player_.trigger('theaterChange', theaterEnabled)
  }
  handleClick () {
diff --git a/client/src/assets/player/peertube-chunk-store.ts b/client/src/assets/player/webtorrent/peertube-chunk-store.ts
index 54cc0ea64..66762bef8 100644
--- a/client/src/assets/player/peertube-chunk-store.ts
+++ b/client/src/assets/player/webtorrent/peertube-chunk-store.ts
@@ -131,7 +131,7 @@ export class PeertubeChunkStore extends EventEmitter {
    // Chunk in store
    this.db.transaction('r', this.db.chunks, async () => {
      const result = await this.db.chunks.get({ id: index })
-      if (result === undefined) return cb(null, new Buffer(0))
+      if (result === undefined) return cb(null, Buffer.alloc(0))
      const buf = result.buf
      if (!opts) return this.nextTick(cb, null, buf)
@@ -162,13 +162,13 @@ export class PeertubeChunkStore extends EventEmitter {
      }
      if (this.db) {
-        await this.db.close()
+        this.db.close()
        await this.dropDatabase(this.databaseName)
      }
      if (this.expirationDB) {
-        await this.expirationDB.close()
+        this.expirationDB.close()
        this.expirationDB = null
      }
diff --git a/client/src/assets/player/video-renderer.ts b/client/src/assets/player/webtorrent/video-renderer.ts
index a3415937b..4dce87112 100644
--- a/client/src/assets/player/video-renderer.ts
+++ b/client/src/assets/player/webtorrent/video-renderer.ts
@@ -29,7 +29,7 @@ function renderVideo (
 function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer?: any) => void) {
  const extension = extname(file.name).toLowerCase()
-  let preparedElem: any = undefined
+  let preparedElem: any
  let currentTime = 0
  let renderer: any
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index e9fb90c61..eee3d4db9 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -3,23 +3,18 @@
 import * as videojs from 'video.js'
 import * as WebTorrent from 'webtorrent'
-import { VideoFile } from '../../../../shared/models/videos/video.model'
+import { VideoFile } from '../../../../../shared/models/videos/video.model'
 import { renderVideo } from './video-renderer'
-import './settings-menu-button'
+import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from '../peertube-videojs-typings'
-import { PeertubePluginOptions, UserWatching, VideoJSCaption, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
-import { isMobile, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from './utils'
 import { PeertubeChunkStore } from './peertube-chunk-store'
 import {
  getAverageBandwidthInStore,
-  getStoredLastSubtitle,
  getStoredMute,
  getStoredVolume,
  getStoredWebTorrentEnabled,
-  saveAverageBandwidth,
+  saveAverageBandwidth
-  saveLastSubtitle,
+} from '../peertube-player-local-storage'
-  saveMuteInStore,
-  saveVolumeInStore
-} from './peertube-player-local-storage'
 const CacheChunkStore = require('cache-chunk-store')
@@ -30,14 +25,13 @@ type PlayOptions = {
 }
 const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
-class PeerTubePlugin extends Plugin {
+class WebTorrentPlugin extends Plugin {
  private readonly playerElement: HTMLVideoElement
  private readonly autoplay: boolean = false
  private readonly startTime: number = 0
  private readonly savePlayerSrcFunction: Function
  private readonly videoFiles: VideoFile[]
-  private readonly videoViewUrl: string
  private readonly videoDuration: number
  private readonly CONSTANTS = {
    INFO_SCHEDULER: 1000, // Don't change this
@@ -45,22 +39,12 @@ class PeerTubePlugin extends Plugin {
    AUTO_QUALITY_THRESHOLD_PERCENT: 30, // Bandwidth should be 30% more important than a resolution bitrate to change to it
    AUTO_QUALITY_OBSERVATION_TIME: 10000, // Wait 10 seconds after having change the resolution before another check
    AUTO_QUALITY_HIGHER_RESOLUTION_DELAY: 5000, // Buffering higher resolution during 5 seconds
-    BANDWIDTH_AVERAGE_NUMBER_OF_VALUES: 5, // Last 5 seconds to build average bandwidth
+    BANDWIDTH_AVERAGE_NUMBER_OF_VALUES: 5 // Last 5 seconds to build average bandwidth
-    USER_WATCHING_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
  }
  private readonly webtorrent = new WebTorrent({
    tracker: {
-      rtcConfig: {
+      rtcConfig: getRtcConfig()
-        iceServers: [
-          {
-            urls: 'stun:stun.stunprotocol.org'
-          },
-          {
-            urls: 'stun:stun.framasoft.org'
-          }
-        ]
-      }
    },
    dht: false
  })
@@ -68,46 +52,39 @@ class PeerTubePlugin extends Plugin {
  private player: any
  private currentVideoFile: VideoFile
  private torrent: WebTorrent.Torrent
-  private videoCaptions: VideoJSCaption[]
-  private defaultSubtitle: string
  private renderer: any
  private fakeRenderer: any
  private destroyingFakeRenderer = false
  private autoResolution = true
-  private forbidAutoResolution = false
+  private autoResolutionPossible = true
  private isAutoResolutionObservation = false
  private playerRefusedP2P = false
-  private videoViewInterval: any
  private torrentInfoInterval: any
  private autoQualityInterval: any
-  private userWatchingVideoInterval: any
  private addTorrentDelay: any
  private qualityObservationTimer: any
  private runAutoQualitySchedulerTimer: any
  private downloadSpeeds: number[] = []
-  constructor (player: videojs.Player, options: PeertubePluginOptions) {
+  constructor (player: videojs.Player, options: WebtorrentPluginOptions) {
    super(player, options)
+    this.startTime = timeToInt(options.startTime)
    // Disable auto play on iOS
    this.autoplay = options.autoplay && this.isIOS() === false
    this.playerRefusedP2P = !getStoredWebTorrentEnabled()
-    this.startTime = timeToInt(options.startTime)
    this.videoFiles = options.videoFiles
-    this.videoViewUrl = options.videoViewUrl
    this.videoDuration = options.videoDuration
-    this.videoCaptions = options.videoCaptions
    this.savePlayerSrcFunction = this.player.src
    this.playerElement = options.playerElement
-    if (this.autoplay === true) this.player.addClass('vjs-has-autoplay')
    this.player.ready(() => {
      const playerOptions = this.player.options_
@@ -117,33 +94,10 @@ class PeerTubePlugin extends Plugin {
      const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
      if (muted !== undefined) this.player.muted(muted)
-      this.defaultSubtitle = options.subtitle || getStoredLastSubtitle()
-      this.player.on('volumechange', () => {
-        saveVolumeInStore(this.player.volume())
-        saveMuteInStore(this.player.muted())
-      })
-      this.player.textTracks().on('change', () => {
-        const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => {
-          return t.kind === 'captions' && t.mode === 'showing'
-        })
-        if (!showing) {
-          saveLastSubtitle('off')
-          return
-        }
-        saveLastSubtitle(showing.language)
-      })
      this.player.duration(options.videoDuration)
      this.initializePlayer()
      this.runTorrentInfoScheduler()
-      this.runViewAdd()
-      if (options.userWatching) this.runUserWatchVideo(options.userWatching)
      this.player.one('play', () => {
        // Don't run immediately scheduler, wait some seconds the TCP connections are made
@@ -157,12 +111,9 @@ class PeerTubePlugin extends Plugin {
    clearTimeout(this.qualityObservationTimer)
    clearTimeout(this.runAutoQualitySchedulerTimer)
-    clearInterval(this.videoViewInterval)
    clearInterval(this.torrentInfoInterval)
    clearInterval(this.autoQualityInterval)
-    if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
    // Don't need to destroy renderer, video player will be destroyed
    this.flushVideoFile(this.currentVideoFile, false)
@@ -173,13 +124,6 @@ class PeerTubePlugin extends Plugin {
    return this.currentVideoFile ? this.currentVideoFile.resolution.id : -1
  }
-  getCurrentResolutionLabel () {
-    if (!this.currentVideoFile) return ''
-    const fps = this.currentVideoFile.fps >= 50 ? this.currentVideoFile.fps : ''
-    return this.currentVideoFile.resolution.label + fps
-  }
  updateVideoFile (
    videoFile?: VideoFile,
    options: {
@@ -228,7 +172,8 @@ class PeerTubePlugin extends Plugin {
      return done()
    })
-    this.trigger('videoFileUpdate')
+    this.changeQuality()
+    this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.currentVideoFile.resolution.id })
  }
  updateResolution (resolutionId: number, delay = 0) {
@@ -262,28 +207,17 @@ class PeerTubePlugin extends Plugin {
    }
  }
-  isAutoResolutionOn () {
-    return this.autoResolution
-  }
  enableAutoResolution () {
    this.autoResolution = true
-    this.trigger('autoResolutionUpdate')
+    this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.getCurrentResolutionId() })
  }
  disableAutoResolution (forbid = false) {
-    if (forbid === true) this.forbidAutoResolution = true
+    if (forbid === true) this.autoResolutionPossible = false
    this.autoResolution = false
-    this.trigger('autoResolutionUpdate')
+    this.trigger('autoResolutionChange', { possible: this.autoResolutionPossible })
-  }
+    this.trigger('resolutionChange', { auto: this.autoResolution, resolutionId: this.getCurrentResolutionId() })
-  isAutoResolutionForbidden () {
-    return this.forbidAutoResolution === true
-  }
-  getCurrentVideoFile () {
-    return this.currentVideoFile
  }
  getTorrent () {
@@ -413,7 +347,7 @@ class PeerTubePlugin extends Plugin {
    if (!averageDownloadSpeed) averageDownloadSpeed = this.getAndSaveActualDownloadSpeed()
    // Limit resolution according to player height
-    const playerHeight = this.playerElement.offsetHeight as number
+    const playerHeight = this.playerElement.offsetHeight
    // We take the first resolution just above the player height
    // Example: player height is 530px, we want the 720p file instead of 480p
@@ -462,13 +396,7 @@ class PeerTubePlugin extends Plugin {
  }
  private initializePlayer () {
-    if (isMobile()) this.player.addClass('vjs-is-mobile')
+    this.buildQualities()
-    this.initSmoothProgressBar()
-    this.initCaptions()
-    this.alterInactivity()
    if (this.autoplay === true) {
      this.player.posterImage.hide()
@@ -491,7 +419,7 @@ class PeerTubePlugin extends Plugin {
      // Not initialized or in HTTP fallback
      if (this.torrent === undefined || this.torrent === null) return
-      if (this.isAutoResolutionOn() === false) return
+      if (this.autoResolution === false) return
      if (this.isAutoResolutionObservation === true) return
      const file = this.getAppropriateFile()
@@ -531,78 +459,27 @@ class PeerTubePlugin extends Plugin {
      if (this.torrent === undefined) return
      // Http fallback
-      if (this.torrent === null) return this.trigger('torrentInfo', false)
+      if (this.torrent === null) return this.player.trigger('p2pInfo', false)
      // this.webtorrent.downloadSpeed because we need to take into account the potential old torrent too
      if (this.webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(this.webtorrent.downloadSpeed)
-      return this.trigger('torrentInfo', {
+      return this.player.trigger('p2pInfo', {
-        downloadSpeed: this.torrent.downloadSpeed,
+        http: {
-        numPeers: this.torrent.numPeers,
+          downloadSpeed: 0,
-        uploadSpeed: this.torrent.uploadSpeed,
+          uploadSpeed: 0,
-        downloaded: this.torrent.downloaded,
+          downloaded: 0,
-        uploaded: this.torrent.uploaded
+          uploaded: 0
-      })
+        },
-    }, this.CONSTANTS.INFO_SCHEDULER)
+        p2p: {
-  }
+          downloadSpeed: this.torrent.downloadSpeed,
+          numPeers: this.torrent.numPeers,
-  private runViewAdd () {
+          uploadSpeed: this.torrent.uploadSpeed,
-    this.clearVideoViewInterval()
+          downloaded: this.torrent.downloaded,
+          uploaded: this.torrent.uploaded
-    // After 30 seconds (or 3/4 of the video), add a view to the video
-    let minSecondsToView = 30
-    if (this.videoDuration < minSecondsToView) minSecondsToView = (this.videoDuration * 3) / 4
-    let secondsViewed = 0
-    this.videoViewInterval = setInterval(() => {
-      if (this.player && !this.player.paused()) {
-        secondsViewed += 1
-        if (secondsViewed > minSecondsToView) {
-          this.clearVideoViewInterval()
-          this.addViewToVideo().catch(err => console.error(err))
        }
-      }
+      } as PlayerNetworkInfo)
-    }, 1000)
+    }, this.CONSTANTS.INFO_SCHEDULER)
-  }
-  private runUserWatchVideo (options: UserWatching) {
-    let lastCurrentTime = 0
-    this.userWatchingVideoInterval = setInterval(() => {
-      const currentTime = Math.floor(this.player.currentTime())
-      if (currentTime - lastCurrentTime >= 1) {
-        lastCurrentTime = currentTime
-        this.notifyUserIsWatching(currentTime, options.url, options.authorizationHeader)
-          .catch(err => console.error('Cannot notify user is watching.', err))
-      }
-    }, this.CONSTANTS.USER_WATCHING_VIDEO_INTERVAL)
-  }
-  private clearVideoViewInterval () {
-    if (this.videoViewInterval !== undefined) {
-      clearInterval(this.videoViewInterval)
-      this.videoViewInterval = undefined
-    }
-  }
-  private addViewToVideo () {
-    if (!this.videoViewUrl) return Promise.resolve(undefined)
-    return fetch(this.videoViewUrl, { method: 'POST' })
-  }
-  private notifyUserIsWatching (currentTime: number, url: string, authorizationHeader: string) {
-    const body = new URLSearchParams()
-    body.append('currentTime', currentTime.toString())
-    const headers = new Headers({ 'Authorization': authorizationHeader })
-    return fetch(url, { method: 'PUT', body, headers })
  }
  private fallbackToHttp (options: PlayOptions, done?: Function) {
@@ -620,8 +497,10 @@ class PeerTubePlugin extends Plugin {
    this.player.src = this.savePlayerSrcFunction
    this.player.src(httpUrl)
+    this.changeQuality()
    // We changed the source, so reinit captions
-    this.initCaptions()
+    this.player.trigger('sourcechange')
    return this.tryToPlay(err => {
      if (err && done) return done(err)
@@ -649,25 +528,6 @@ class PeerTubePlugin extends Plugin {
    return !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
  }
-  private alterInactivity () {
-    let saveInactivityTimeout: number
-    const disableInactivity = () => {
-      saveInactivityTimeout = this.player.options_.inactivityTimeout
-      this.player.options_.inactivityTimeout = 0
-    }
-    const enableInactivity = () => {
-      this.player.options_.inactivityTimeout = saveInactivityTimeout
-    }
-    const settingsDialog = this.player.children_.find((c: any) => c.name_ === 'SettingsDialog')
-    this.player.controlBar.on('mouseenter', () => disableInactivity())
-    settingsDialog.on('mouseenter', () => disableInactivity())
-    this.player.controlBar.on('mouseleave', () => enableInactivity())
-    settingsDialog.on('mouseleave', () => enableInactivity())
-  }
  private pickAverageVideoFile () {
    if (this.videoFiles.length === 1) return this.videoFiles[0]
@@ -712,43 +572,70 @@ class PeerTubePlugin extends Plugin {
    }
  }
-  private initCaptions () {
+  private buildQualities () {
-    for (const caption of this.videoCaptions) {
+    const qualityLevelsPayload = []
-      this.player.addRemoteTextTrack({
-        kind: 'captions',
+    for (const file of this.videoFiles) {
-        label: caption.label,
+      const representation = {
-        language: caption.language,
+        id: file.resolution.id,
-        id: caption.language,
+        label: this.buildQualityLabel(file),
-        src: caption.src,
+        height: file.resolution.id,
-        default: this.defaultSubtitle === caption.language
+        _enabled: true
-      }, false)
+      }
+      this.player.qualityLevels().addQualityLevel(representation)
+      qualityLevelsPayload.push({
+        id: representation.id,
+        label: representation.label,
+        selected: false
+      })
    }
-    this.player.trigger('captionsChanged')
+    const payload: LoadedQualityData = {
+      qualitySwitchCallback: (d: any) => this.qualitySwitchCallback(d),
+      qualityData: {
+        video: qualityLevelsPayload
+      }
+    }
+    this.player.tech_.trigger('loadedqualitydata', payload)
  }
-  // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
+  private buildQualityLabel (file: VideoFile) {
-  private initSmoothProgressBar () {
+    let label = file.resolution.label
-    const SeekBar = videojsUntyped.getComponent('SeekBar')
-    SeekBar.prototype.getPercent = function getPercent () {
+    if (file.fps && file.fps >= 50) {
-      // Allows for smooth scrubbing, when player can't keep up.
+      label += file.fps
-      // const time = (this.player_.scrubbing()) ?
-      //   this.player_.getCache().currentTime :
-      //   this.player_.currentTime()
-      const time = this.player_.currentTime()
-      const percent = time / this.player_.duration()
-      return percent >= 1 ? 1 : percent
    }
-    SeekBar.prototype.handleMouseMove = function handleMouseMove (event: any) {
-      let newTime = this.calculateDistance(event) * this.player_.duration()
+    return label
-      if (newTime === this.player_.duration()) {
+  }
-        newTime = newTime - 0.1
-      }
+  private qualitySwitchCallback (id: number) {
-      this.player_.currentTime(newTime)
+    if (id === -1) {
-      this.update()
+      if (this.autoResolutionPossible === true) this.enableAutoResolution()
+      return
+    }
+    this.disableAutoResolution()
+    this.updateResolution(id)
+  }
+  private changeQuality () {
+    const resolutionId = this.currentVideoFile.resolution.id
+    const qualityLevels = this.player.qualityLevels()
+    if (resolutionId === -1) {
+      qualityLevels.selectedIndex = -1
+      return
+    }
+    for (let i = 0; i < qualityLevels; i++) {
+      const q = this.player.qualityLevels[i]
+      if (q.height === resolutionId) qualityLevels.selectedIndex = i
    }
  }
 }
-videojs.registerPlugin('peertube', PeerTubePlugin)
+videojs.registerPlugin('webtorrent', WebTorrentPlugin)
-export { PeerTubePlugin }
+export { WebTorrentPlugin }