35 files changed, 1465 insertions, 649 deletions

diff --git a/client/src/assets/images/global/exit-fullscreen.svg b/client/src/assets/images/global/exit-fullscreen.svg
new file mode 100644
index 000000000..ba01f583c
--- /dev/null
+++ b/client/src/assets/images/global/exit-fullscreen.svg
@@ -0,0 +1,16 @@
+<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" stroke-linejoin="round">
+    <g id="Artboard-4" transform="translate(-400.000000, -1046.000000)" stroke="#333333" stroke-width="2">
+      <g id="Extras" transform="translate(48.000000, 1046.000000)">
+        <g id="exit-fullscreen" transform="translate(352.000000, 0.000000)">
+          <rect id="Rectangle-433" x="6" y="8" width="12" height="8"/>
+          <polyline id="Path-42" stroke-linecap="round" transform="translate(21.500000, 5.500000) scale(-1, -1) translate(-21.500000, -5.500000) " points="23 7 23 4 20 4"/>
+          <polyline id="Path-42" stroke-linecap="round" transform="translate(2.500000, 18.500000) scale(-1, -1) translate(-2.500000, -18.500000) " points="4 20 1 20 1 17"/>
+          <polyline id="Path-42" stroke-linecap="round" transform="translate(21.500000, 18.500000) scale(-1, 1) translate(-21.500000, -18.500000) " points="23 20 23 17 20 17"/>
+          <polyline id="Path-42" stroke-linecap="round" transform="translate(2.500000, 5.500000) scale(-1, 1) translate(-2.500000, -5.500000) " points="4 7 1 7 1 4"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/global/fullscreen.svg b/client/src/assets/images/global/fullscreen.svg
new file mode 100644
index 000000000..4a9d67864
--- /dev/null
+++ b/client/src/assets/images/global/fullscreen.svg
@@ -0,0 +1,17 @@
+<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>fullscreen</title>
+  <desc>Created with Sketch.</desc>
+  <defs/>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Artboard-4" transform="translate(-576.000000, -159.000000)" stroke="#333333" stroke-width="2">
+      <g id="33" transform="translate(576.000000, 159.000000)">
+        <rect id="Rectangle-433" x="1" y="4" width="22" height="16" rx="1"/>
+        <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" points="20 10 20 7 17 7"/>
+        <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" points="7 17 4 17 4 14"/>
+        <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" transform="translate(18.500000, 15.500000) scale(1, -1) translate(-18.500000, -15.500000) " points="20 17 20 14 17 14"/>
+        <polyline id="Path-42" stroke-linecap="round" stroke-linejoin="round" transform="translate(5.500000, 8.500000) scale(1, -1) translate(-5.500000, -8.500000) " points="7 10 4 10 4 7"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/client/src/assets/images/global/npm.svg b/client/src/assets/images/global/npm.svg
new file mode 100644
index 000000000..ec8f41243
--- /dev/null
+++ b/client/src/assets/images/global/npm.svg
@@ -0,0 +1,6 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 18 7" style="transform: scale(1.3) translateY(1px);">

+  <path fill="#00000" d="M0,0h18v6H9v1H5V6H0V0z M1,5h2V2h1v3h1V1H1V5z M6,1v5h2V5h2V1H6z M8,2h1v2H8V2z M11,1v4h2V2h1v3h1V2h1v3h1V1H11z"/>

+  <polygon fill="#FFFFFF" points="1,5 3,5 3,2 4,2 4,5 5,5 5,1 1,1 "/>

+  <polygon fill="#FFFFFF" d="M6,1v5h2V5h2V1H6z M9,4H8V2h1V4z"/>

+  <polygon fill="#FFFFFF" points="11,1 11,5 13,5 13,2 14,2 14,5 15,5 15,2 16,2 16,5 17,5 17,1 "/>

+</svg>

diff --git a/client/src/assets/images/global/video-lang.svg b/client/src/assets/images/global/video-lang.svg
new file mode 100644
index 000000000..8d7b6a016
--- /dev/null
+++ b/client/src/assets/images/global/video-lang.svg
@@ -0,0 +1,15 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" style="transform:scale(1.1);">
+ <g class="layer" style="transform: scale(.9);">
+  <g fill="none" fill-rule="evenodd">
+   <g transform="translate(-884.000000, -863.000000)">
+    <g transform="translate(884.000000, 863.000000)">
+     <path d="m22.78031,7.45167c0,0 -0.21495,-1.56763 -0.87461,-2.25797c-0.83658,-0.90605 -1.7743,-0.91055 -2.20433,-0.96357c-3.07858,-0.23013 -7.69661,-0.23013 -7.69661,-0.23013l-0.00956,0c0,0 -4.61792,0 -7.69661,0.23013c-0.43005,0.05302 -1.36743,0.05752 -2.20431,0.96357c-0.65962,0.69034 -0.87427,2.25797 -0.87427,2.25797c0,0 -0.22001,1.84092 -0.22001,3.68182l0,1.72585c0,1.84087 0.22001,3.68177 0.22001,3.68177c0,0 0.21465,1.56766 0.87427,2.25799c0.83688,0.90608 1.93618,0.87741 2.42581,0.97238c1.76002,0.17451 7.47991,0.22852 7.47991,0.22852c0,0 4.62279,-0.00719 7.70137,-0.2373c0.43003,-0.05305 1.36775,-0.05752 2.20433,-0.9636c0.65966,-0.69033 0.87461,-2.25799 0.87461,-2.25799c0,0 0.21969,-1.8409 0.21969,-3.68177l0,-1.72585c0,-1.8409 -0.21969,-3.68182 -0.21969,-3.68182l0,0z" fill="#ffffff" stroke="#000000" stroke-width="2"/>
+    </g>
+   </g>
+  </g>
+  <g>
+   <path d="m9.639451,16.289861a0.758829,0.758829 0 0 1 -0.537251,-1.296079l3.226539,-3.226539l-2.689289,0a0.758829,0.758829 0 0 1 0,-1.517657l4.521101,0a0.758829,0.758829 0 0 1 0.537251,1.296079l-4.522619,4.521101a0.758829,0.758829 0 0 1 -0.535733,0.223096z" fill="#000000" stroke="#000000" stroke-width="0"/>
+   <path d="m13.029897,9.507451l-2.208191,0a0.758829,0.758829 0 1 1 0,-1.517657l2.21578,0a0.758829,0.758829 0 0 1 0,1.517657l-0.007588,0z" fill="#000000" stroke="#000000" stroke-width="0"/>
+  </g>
+ </g>
+</svg>
diff --git a/client/src/assets/images/menu/about.svg b/client/src/assets/images/menu/about.svg
deleted file mode 100644
index bea602aac..000000000
--- a/client/src/assets/images/menu/about.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?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">
-    <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="#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="#000000"></path>
-            </g>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/menu/administration.svg b/client/src/assets/images/menu/administration.svg
deleted file mode 100644
index 0dceda082..000000000
--- a/client/src/assets/images/menu/administration.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?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">
-    <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="#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>
-        </g>
-    </g>
-</svg>
diff --git a/client/src/assets/images/menu/eye-closed.svg b/client/src/assets/images/menu/eye-closed.svg
new file mode 100644
index 000000000..5c441e719
--- /dev/null
+++ b/client/src/assets/images/menu/eye-closed.svg
@@ -0,0 +1,17 @@
+<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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+    <g transform="translate(-796.000000, -1046.000000)" stroke="#000000" stroke-width="2">
+      <g transform="translate(48.000000, 1046.000000)">
+        <g transform="translate(760.000000, 12.000000) scale(1, -1) translate(-760.000000, -12.000000) translate(748.000000, 0.000000)">
+          <path d="M2,14 C2,14 5,7 12,7 C19,7 22,14 22,14" id="Path-80" stroke-linejoin="round"/>
+          <path d="M12,7 L12,5"/>
+          <path d="M18,8.5 L19,7"/>
+          <path d="M21,12 L22.5,11"/>
+          <path d="M1.5,12 L3,11" transform="translate(2.250000, 11.500000) scale(1, -1) translate(-2.250000, -11.500000) "/>
+          <path d="M5,8.5 L6,7" transform="translate(5.500000, 7.750000) scale(-1, 1) translate(-5.500000, -7.750000) "/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/client/src/assets/images/menu/eye.svg b/client/src/assets/images/menu/eye.svg
new file mode 100644
index 000000000..d1c3941f1
--- /dev/null
+++ b/client/src/assets/images/menu/eye.svg
@@ -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 stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-268.000000, -203.000000)" stroke="#000000" stroke-width="2">
+      <g transform="translate(268.000000, 203.000000)">
+        <path d="M2,12 C2,12 5,5 12,5 C19,5 22,12 22,12 C22,12 19,19 12,19 C5,19 2,12 2,12 Z" stroke-linejoin="round"/>
+        <circle id="Oval-50" cx="12" cy="12" r="3"/>
+        <path d="M12,5 L12,3" stroke-linecap="round"/>
+        <path d="M18,6.5 L19,5" stroke-linecap="round"/>
+        <path d="M21,10 L22.5,9" stroke-linecap="round"/>
+        <path d="M1.5,10 L3,9" stroke-linecap="round" transform="translate(2.250000, 9.500000) scale(1, -1) translate(-2.250000, -9.500000) "/>
+        <path d="M5,6.5 L6,5" stroke-linecap="round" transform="translate(5.500000, 5.750000) scale(-1, 1) translate(-5.500000, -5.750000) "/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/client/src/assets/images/menu/language.png b/client/src/assets/images/menu/language.png
deleted file mode 100644
index 60e6fec00..000000000
--- a/client/src/assets/images/menu/language.png
+++ /dev/null
diff --git a/client/src/assets/images/menu/language.svg b/client/src/assets/images/menu/language.svg
new file mode 100644
index 000000000..0ac754c87
--- /dev/null
+++ b/client/src/assets/images/menu/language.svg
@@ -0,0 +1,10 @@
+<!-- by Aaron Jin - free for commercial use -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" style="transform:scale(1.2)">
+  <path stroke="#000000" fill="#000000" stroke-width="3" d="M92.63,155H42.09a17.8,17.8,0,0,1-17.78-17.78V29.31a5,5,0,0,1,5-5h88.32a5,5,0,0,1,4.9,6L97.53,151A5,5,0,0,1,92.63,155ZM34.31,34.31V137.22A7.79,7.79,0,0,0,42.09,145H88.56L111.49,34.31Z"/>
+  <path stroke="#000000" fill="#000000" stroke-width="3" d="M170.69,175.69H75a5,5,0,0,1-4.9-6L74.39,149a5,5,0,0,1,9.8,2l-3,14.67h84.55V62.78A7.79,7.79,0,0,0,157.91,55H113.35a5,5,0,0,1,0-10h44.56a17.8,17.8,0,0,1,17.78,17.78V170.69A5,5,0,0,1,170.69,175.69Z"/>
+  <path stroke="#000000" fill="#000000" stroke-width="3" d="M50,92h0a5,5,0,0,1-5-5l0-24.49a17.49,17.49,0,0,1,35,0V87a5,5,0,0,1-10,0V62.49a7.49,7.49,0,0,0-15,0L55,87A5,5,0,0,1,50,92Z"/>
+  <path stroke="#000000" fill="#000000" stroke-width="3" d="M75,76H50a5,5,0,0,1,0-10H75a5,5,0,0,1,0,10Z"/>
+  <path stroke="#000000" fill="#000000" stroke-width="3" d="M120.21,155a5,5,0,0,1-3.54-8.54l21.26-21.26H120.21a5,5,0,0,1,0-10H150a5,5,0,0,1,3.54,8.54l-29.8,29.79A5,5,0,0,1,120.21,155Z"/>
+  <path stroke="#000000" fill="#000000" stroke-width="3" d="M150,155a5,5,0,0,1-3.54-1.47l-14.89-14.89a5,5,0,0,1,7.07-7.07l14.9,14.89A5,5,0,0,1,150,155Z"/>
+  <path stroke="#000000" fill="#000000" stroke-width="3" d="M142.55,110.31H128a5,5,0,1,1,0-10h14.6a5,5,0,0,1,0,10Z"/>
+</svg>
\ No newline at end of file
diff --git a/client/src/assets/images/menu/moonsun.svg b/client/src/assets/images/menu/moonsun.svg
deleted file mode 100644
index fe2a96396..000000000
--- a/client/src/assets/images/menu/moonsun.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="300px" width="300px" fill="#fff" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 100" x="0px" y="0px"><title>Artboard 633</title><circle cx="50" cy="6" r="4"/><circle cx="50" cy="94" r="4"/><circle cx="6" cy="50" r="4"/><circle cx="94" cy="50" r="4"/><circle cx="18" cy="18" r="4"/><circle cx="82" cy="82" r="4"/><circle cx="18" cy="82" r="4"/><circle cx="82" cy="18" r="4"/><path d="M82,50A32,32,0,1,0,50,82,32,32,0,0,0,82,50ZM50,26a23.67,23.67,0,0,1,5.87.76c4.36,9.93.57,19-4.66,24.29s-14.4,9.24-24.45,4.83A23.75,23.75,0,0,1,26,50,24,24,0,0,1,50,26Zm0,48a23.94,23.94,0,0,1-18.26-8.47,29.38,29.38,0,0,0,3.74.26,30.07,30.07,0,0,0,21.41-9.11,29.82,29.82,0,0,0,8.61-25A24,24,0,0,1,50,74Z"/></svg>
\ No newline at end of file
diff --git a/client/src/assets/images/menu/p2p.svg b/client/src/assets/images/menu/p2p.svg
new file mode 100644
index 000000000..744643010
--- /dev/null
+++ b/client/src/assets/images/menu/p2p.svg
@@ -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">
+  <defs/>
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(-752.000000, -423.000000)" fill="#000000">
+      <g transform="translate(752.000000, 423.000000)">
+        <path d="M19.1632285,17.9958742 C20.7455119,17.9132011 22,16.5984601 22,14.9914698 L22,7.0085302 C22,5.35043647 20.6598453,4 19.0049107,4 L4.99508929,4 C3.33899222,4 2,5.34829734 2,7.0085302 L2,14.9914698 C2,16.5963573 3.25552676,17.9130154 4.83678095,17.9958629 L6.5,16 L4.99508929,16 C4.4481604,16 4,15.5484013 4,14.9914698 L4,7.0085302 C4,6.4497782 4.44667411,6 4.99508929,6 L19.0049107,6 C19.5518396,6 20,6.45159872 20,7.0085302 L20,14.9914698 C20,15.5502218 19.5533259,16 19.0049107,16 L17.5,16 L19.1632285,17.9958742 Z" fill-rule="nonzero"/>
+        <polygon stroke="#000000" stroke-width="2" stroke-linejoin="round" points="12 14 17 20 7 20"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/client/src/assets/player/bezels/bezels-plugin.ts b/client/src/assets/player/bezels/bezels-plugin.ts
index c2c251961..ca88bc1f9 100644
--- a/client/src/assets/player/bezels/bezels-plugin.ts
+++ b/client/src/assets/player/bezels/bezels-plugin.ts
@@ -1,85 +1,12 @@
-// @ts-ignore
-import * as videojs from 'video.js'
-import { VideoJSComponentInterface } from '../peertube-videojs-typings'
+import videojs from 'video.js'
+import './pause-bezel'
 
-function getPauseBezel () {
-  return `
-  <div class="vjs-bezels-pause">
-    <div class="vjs-bezel" role="status" aria-label="Pause">
-      <div class="vjs-bezel-icon">
-        <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
-          <use class="vjs-svg-shadow" xlink:href="#vjs-id-1"></use>
-          <path class="vjs-svg-fill" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" id="vjs-id-1"></path>
-        </svg>
-      </div>
-    </div>
-  </div>
-  `
-}
-
-function getPlayBezel () {
-  return `
-  <div class="vjs-bezels-play">
-    <div class="vjs-bezel" role="status" aria-label="Play">
-      <div class="vjs-bezel-icon">
-        <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
-          <use class="vjs-svg-shadow" xlink:href="#vjs-id-2"></use>
-          <path class="vjs-svg-fill" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" id="ytp-id-2"></path>
-        </svg>
-      </div>
-    </div>
-  </div>
-  `
-}
-
-// @ts-ignore-start
-const Component = videojs.getComponent('Component')
-class PauseBezel extends Component {
-  options_: any
-  container: HTMLBodyElement
-
-  constructor (player: videojs.Player, options: any) {
-    super(player, options)
-    this.options_ = options
-
-    player.on('pause', (_: any) => {
-      if (player.seeking() || player.ended()) return
-      this.container.innerHTML = getPauseBezel()
-      this.showBezel()
-    })
-
-    player.on('play', (_: any) => {
-      if (player.seeking()) return
-      this.container.innerHTML = getPlayBezel()
-      this.showBezel()
-    })
-  }
+const Plugin = videojs.getPlugin('plugin')
 
-  createEl () {
-    const container = super.createEl('div', {
-      className: 'vjs-bezels-content'
-    })
-    this.container = container
-    container.style.display = 'none'
-
-    return container
-  }
-
-  showBezel () {
-    this.container.style.display = 'inherit'
-    setTimeout(() => {
-      this.container.style.display = 'none'
-    }, 500) // matching the animation duration
-  }
-}
-// @ts-ignore-end
-
-videojs.registerComponent('PauseBezel', PauseBezel)
-
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class BezelsPlugin extends Plugin {
-  constructor (player: videojs.Player, options: any = {}) {
-    super(player, options)
+
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
+    super(player)
 
     this.player.ready(() => {
       player.addClass('vjs-bezels')
@@ -90,4 +17,5 @@ class BezelsPlugin extends Plugin {
 }
 
 videojs.registerPlugin('bezels', BezelsPlugin)
+
 export { BezelsPlugin }
diff --git a/client/src/assets/player/bezels/pause-bezel.ts b/client/src/assets/player/bezels/pause-bezel.ts
new file mode 100644
index 000000000..886574380
--- /dev/null
+++ b/client/src/assets/player/bezels/pause-bezel.ts
@@ -0,0 +1,72 @@
+import videojs from 'video.js'
+
+function getPauseBezel () {
+  return `
+  <div class="vjs-bezels-pause">
+    <div class="vjs-bezel" role="status" aria-label="Pause">
+      <div class="vjs-bezel-icon">
+        <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
+          <use class="vjs-svg-shadow" xlink:href="#vjs-id-1"></use>
+          <path class="vjs-svg-fill" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" id="vjs-id-1"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+  `
+}
+
+function getPlayBezel () {
+  return `
+  <div class="vjs-bezels-play">
+    <div class="vjs-bezel" role="status" aria-label="Play">
+      <div class="vjs-bezel-icon">
+        <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
+          <use class="vjs-svg-shadow" xlink:href="#vjs-id-2"></use>
+          <path class="vjs-svg-fill" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" id="ytp-id-2"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+  `
+}
+
+const Component = videojs.getComponent('Component')
+class PauseBezel extends Component {
+  container: HTMLDivElement
+
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
+    super(player, options)
+
+    player.on('pause', (_: any) => {
+      if (player.seeking() || player.ended()) return
+      this.container.innerHTML = getPauseBezel()
+      this.showBezel()
+    })
+
+    player.on('play', (_: any) => {
+      if (player.seeking()) return
+      this.container.innerHTML = getPlayBezel()
+      this.showBezel()
+    })
+  }
+
+  createEl () {
+    this.container = super.createEl('div', {
+      className: 'vjs-bezels-content'
+    }) as HTMLDivElement
+
+    this.container.style.display = 'none'
+
+    return this.container
+  }
+
+  showBezel () {
+    this.container.style.display = 'inherit'
+
+    setTimeout(() => {
+      this.container.style.display = 'none'
+    }, 500) // matching the animation duration
+  }
+}
+
+videojs.registerComponent('PauseBezel', PauseBezel)
diff --git a/client/src/assets/player/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
new file mode 100644
index 000000000..9e2ac1aa4
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
@@ -0,0 +1,628 @@
+// Thanks https://github.com/streamroot/videojs-hlsjs-plugin
+// We duplicated this plugin to choose the hls.js version we want, because streamroot only provide a bundled file
+
+import * as Hlsjs from 'hls.js/dist/hls.light.js'
+import videojs from 'video.js'
+import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings'
+
+type ErrorCounts = {
+  [ type: string ]: number
+}
+
+type Metadata = {
+  levels: Hlsjs.Level[]
+}
+
+type CustomAudioTrack = AudioTrack & { name?: string, lang?: string }
+
+const registerSourceHandler = function (vjs: typeof videojs) {
+  if (!Hlsjs.isSupported()) {
+    console.warn('Hls.js is not supported in this browser!')
+    return
+  }
+
+  const html5 = vjs.getTech('Html5')
+
+  if (!html5) {
+    console.error('Not supported version if video.js')
+    return
+  }
+
+  // FIXME: typings
+  (html5 as any).registerSourceHandler({
+    canHandleSource: function (source: videojs.Tech.SourceObject) {
+      const hlsTypeRE = /^application\/x-mpegURL|application\/vnd\.apple\.mpegurl$/i
+      const hlsExtRE = /\.m3u8/i
+
+      if (hlsTypeRE.test(source.type)) return 'probably'
+      if (hlsExtRE.test(source.src)) return 'maybe'
+
+      return ''
+    },
+
+    handleSource: function (source: videojs.Tech.SourceObject, tech: VideoJSTechHLS) {
+      if (tech.hlsProvider) {
+        tech.hlsProvider.dispose()
+      }
+
+      tech.hlsProvider = new Html5Hlsjs(vjs, source, tech)
+
+      return tech.hlsProvider
+    }
+  }, 0);
+
+  // FIXME: typings
+  (vjs as any).Html5Hlsjs = Html5Hlsjs
+}
+
+function hlsjsConfigHandler (this: videojs.Player, options: HlsjsConfigHandlerOptions) {
+  const player = this
+
+  if (!options) return
+
+  if (!player.srOptions_) {
+    player.srOptions_ = {}
+  }
+
+  if (!player.srOptions_.hlsjsConfig) {
+    player.srOptions_.hlsjsConfig = options.hlsjsConfig
+  }
+
+  if (!player.srOptions_.captionConfig) {
+    player.srOptions_.captionConfig = options.captionConfig
+  }
+
+  if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
+    player.srOptions_.levelLabelHandler = options.levelLabelHandler
+  }
+}
+
+const registerConfigPlugin = function (vjs: typeof videojs) {
+  // Used in Brightcove since we don't pass options directly there
+  const registerVjsPlugin = vjs.registerPlugin || vjs.plugin
+  registerVjsPlugin('hlsjs', hlsjsConfigHandler)
+}
+
+class Html5Hlsjs {
+  private static readonly hooks: { [id: string]: Function[] } = {}
+
+  private readonly videoElement: HTMLVideoElement
+  private readonly errorCounts: ErrorCounts = {}
+  private readonly player: videojs.Player
+  private readonly tech: videojs.Tech
+  private readonly source: videojs.Tech.SourceObject
+  private readonly vjs: typeof videojs
+
+  private hls: Hlsjs & { manualLevel?: number, audioTrack?: any, audioTracks?: CustomAudioTrack[] } // FIXME: typings
+  private hlsjsConfig: Partial<Hlsjs.Config & { cueHandler: any }> = null
+
+  private _duration: number = null
+  private metadata: Metadata = null
+  private isLive: boolean = null
+  private dvrDuration: number = null
+  private edgeMargin: number = null
+
+  private handlers: { [ id in 'play' | 'addtrack' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = {
+    play: null,
+    addtrack: null,
+    playing: null,
+    textTracksChange: null,
+    audioTracksChange: null
+  }
+
+  private uiTextTrackHandled = false
+
+  constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
+    this.vjs = vjs
+    this.source = source
+
+    this.tech = tech;
+    (this.tech as any).name_ = 'Hlsjs'
+
+    this.videoElement = tech.el() as HTMLVideoElement
+    this.player = vjs((tech.options_ as any).playerId)
+
+    this.videoElement.addEventListener('error', event => {
+      let errorTxt: string
+      const mediaError = (event.currentTarget as HTMLVideoElement).error
+
+      switch (mediaError.code) {
+        case mediaError.MEDIA_ERR_ABORTED:
+          errorTxt = 'You aborted the video playback'
+          break
+        case mediaError.MEDIA_ERR_DECODE:
+          errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support'
+          this._handleMediaError(mediaError)
+          break
+        case mediaError.MEDIA_ERR_NETWORK:
+          errorTxt = 'A network error caused the video download to fail part-way'
+          break
+        case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+          errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported'
+          break
+
+        default:
+          errorTxt = mediaError.message
+      }
+
+      console.error('MEDIA_ERROR: ', errorTxt)
+    })
+
+    this.initialize()
+  }
+
+  duration () {
+    return this._duration || this.videoElement.duration || 0
+  }
+
+  seekable () {
+    if (this.hls.media) {
+      if (!this.isLive) {
+        return this.vjs.createTimeRanges(0, this.hls.media.duration)
+      }
+
+      // Video.js doesn't seem to like floating point timeranges
+      const startTime = Math.round(this.hls.media.duration - this.dvrDuration)
+      const endTime = Math.round(this.hls.media.duration - this.edgeMargin)
+
+      return this.vjs.createTimeRanges(startTime, endTime)
+    }
+
+    return this.vjs.createTimeRanges()
+  }
+
+  // See comment for `initialize` method.
+  dispose () {
+    this.videoElement.removeEventListener('play', this.handlers.play)
+    this.videoElement.textTracks.removeEventListener('addtrack', this.handlers.addtrack)
+    this.videoElement.removeEventListener('playing', this.handlers.playing)
+
+    this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange)
+    this.uiTextTrackHandled = false
+
+    this.player.audioTracks().removeEventListener('change', this.handlers.audioTracksChange)
+
+    this.hls.destroy()
+  }
+
+  static addHook (type: string, callback: Function) {
+    Html5Hlsjs.hooks[ type ] = this.hooks[ type ] || []
+    Html5Hlsjs.hooks[ type ].push(callback)
+  }
+
+  static removeHook (type: string, callback: Function) {
+    if (Html5Hlsjs.hooks[ type ] === undefined) return false
+
+    const index = Html5Hlsjs.hooks[ type ].indexOf(callback)
+    if (index === -1) return false
+
+    Html5Hlsjs.hooks[ type ].splice(index, 1)
+
+    return true
+  }
+
+  private _executeHooksFor (type: string) {
+    if (Html5Hlsjs.hooks[ type ] === undefined) {
+      return
+    }
+
+    // ES3 and IE < 9
+    for (let i = 0; i < Html5Hlsjs.hooks[ type ].length; i++) {
+      Html5Hlsjs.hooks[ type ][ i ](this.player, this.hls)
+    }
+  }
+
+  private _handleMediaError (error: any) {
+    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 1) {
+      console.info('trying to recover media error')
+      this.hls.recoverMediaError()
+      return
+    }
+
+    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 2) {
+      console.info('2nd try to recover media error (by swapping audio codec')
+      this.hls.swapAudioCodec()
+      this.hls.recoverMediaError()
+      return
+    }
+
+    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] > 2) {
+      console.info('bubbling media error up to VIDEOJS')
+      this.tech.error = () => error
+      this.tech.trigger('error')
+      return
+    }
+  }
+
+  private _onError (_event: any, data: Hlsjs.errorData) {
+    const error: { message: string, code?: number } = {
+      message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}`
+    }
+    console.error(error.message)
+
+    // increment/set error count
+    if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1
+    else this.errorCounts[ data.type ] = 1
+
+    // Implement simple error handling based on hls.js documentation
+    // https://github.com/dailymotion/hls.js/blob/master/API.md#fifth-step-error-handling
+    if (data.fatal) {
+      switch (data.type) {
+        case Hlsjs.ErrorTypes.NETWORK_ERROR:
+          console.info('bubbling network error up to VIDEOJS')
+          error.code = 2
+          this.tech.error = () => error as any
+          this.tech.trigger('error')
+          break
+
+        case Hlsjs.ErrorTypes.MEDIA_ERROR:
+          error.code = 3
+          this._handleMediaError(error)
+          break
+
+        default:
+          // cannot recover
+          this.hls.destroy()
+          console.info('bubbling error up to VIDEOJS')
+          this.tech.error = () => error as any
+          this.tech.trigger('error')
+          break
+      }
+    }
+  }
+
+  private switchQuality (qualityId: number) {
+    this.hls.nextLevel = qualityId
+  }
+
+  private _levelLabel (level: Hlsjs.Level) {
+    if (this.player.srOptions_.levelLabelHandler) {
+      return this.player.srOptions_.levelLabelHandler(level)
+    }
+
+    if (level.height) return level.height + 'p'
+    if (level.width) return Math.round(level.width * 9 / 16) + 'p'
+    if (level.bitrate) return (level.bitrate / 1000) + 'kbps'
+
+    return 0
+  }
+
+  private _relayQualityChange (qualityLevels: QualityLevels) {
+    // Determine if it is "Auto" (all tracks enabled)
+    let isAuto = true
+
+    for (let i = 0; i < qualityLevels.length; i++) {
+      if (!qualityLevels[ i ]._enabled) {
+        isAuto = false
+        break
+      }
+    }
+
+    // Interact with ME
+    if (isAuto) {
+      this.hls.currentLevel = -1
+      return
+    }
+
+    // Find ID of highest enabled track
+    let selectedTrack: number
+
+    for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) {
+      if (qualityLevels[ selectedTrack ]._enabled) {
+        break
+      }
+    }
+
+    this.hls.currentLevel = selectedTrack
+  }
+
+  private _handleQualityLevels () {
+    if (!this.metadata) return
+
+    const qualityLevels = this.player.qualityLevels && this.player.qualityLevels()
+    if (!qualityLevels) return
+
+    for (let i = 0; i < this.metadata.levels.length; i++) {
+      const details = this.metadata.levels[ i ]
+      const representation: QualityLevelRepresentation = {
+        id: i,
+        width: details.width,
+        height: details.height,
+        bandwidth: details.bitrate,
+        bitrate: details.bitrate,
+        _enabled: true
+      }
+
+      const self = this
+      representation.enabled = function (this: QualityLevels, level: number, toggle?: boolean) {
+        // Brightcove switcher works TextTracks-style (enable tracks that it wants to ABR on)
+        if (typeof toggle === 'boolean') {
+          this[ level ]._enabled = toggle
+          self._relayQualityChange(this)
+        }
+
+        return this[ level ]._enabled
+      }
+
+      qualityLevels.addQualityLevel(representation)
+    }
+  }
+
+  private _notifyVideoQualities () {
+    if (!this.metadata) return
+    const cleanTracklist = []
+
+    if (this.metadata.levels.length > 1) {
+      const autoLevel = {
+        id: -1,
+        label: 'auto',
+        selected: this.hls.manualLevel === -1
+      }
+      cleanTracklist.push(autoLevel)
+    }
+
+    this.metadata.levels.forEach((level, index) => {
+      // Don't write in level (shared reference with Hls.js)
+      const quality = {
+        id: index,
+        selected: index === this.hls.manualLevel,
+        label: this._levelLabel(level)
+      }
+
+      cleanTracklist.push(quality)
+    })
+
+    const payload = {
+      qualityData: { video: cleanTracklist },
+      qualitySwitchCallback: this.switchQuality.bind(this)
+    }
+
+    this.tech.trigger('loadedqualitydata', payload)
+
+    // Self-de-register so we don't raise the payload multiple times
+    this.videoElement.removeEventListener('playing', this.handlers.playing)
+  }
+
+  private _updateSelectedAudioTrack () {
+    const playerAudioTracks = this.tech.audioTracks()
+    for (let j = 0; j < playerAudioTracks.length; j++) {
+      // FIXME: typings
+      if ((playerAudioTracks[ j ] as any).enabled) {
+        this.hls.audioTrack = j
+        break
+      }
+    }
+  }
+
+  private _onAudioTracks () {
+    const hlsAudioTracks = this.hls.audioTracks
+    const playerAudioTracks = this.tech.audioTracks()
+
+    if (hlsAudioTracks.length > 1 && playerAudioTracks.length === 0) {
+      // Add Hls.js audio tracks if not added yet
+      for (let i = 0; i < hlsAudioTracks.length; i++) {
+        playerAudioTracks.addTrack(new this.vjs.AudioTrack({
+          id: i.toString(),
+          kind: 'alternative',
+          label: hlsAudioTracks[ i ].name || hlsAudioTracks[ i ].lang,
+          language: hlsAudioTracks[ i ].lang,
+          enabled: i === this.hls.audioTrack
+        }))
+      }
+
+      // Handle audio track change event
+      this.handlers.audioTracksChange = this._updateSelectedAudioTrack.bind(this)
+      playerAudioTracks.addEventListener('change', this.handlers.audioTracksChange)
+    }
+  }
+
+  private _getTextTrackLabel (textTrack: TextTrack) {
+    // Label here is readable label and is optional (used in the UI so if it is there it should be different)
+    return textTrack.label ? textTrack.label : textTrack.language
+  }
+
+  private _isSameTextTrack (track1: TextTrack, track2: TextTrack) {
+    return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2)
+      && track1.kind === track2.kind
+  }
+
+  private _updateSelectedTextTrack () {
+    const playerTextTracks = this.player.textTracks()
+    let activeTrack: TextTrack = null
+
+    for (let j = 0; j < playerTextTracks.length; j++) {
+      if (playerTextTracks[ j ].mode === 'showing') {
+        activeTrack = playerTextTracks[ j ]
+        break
+      }
+    }
+
+    const hlsjsTracks = this.videoElement.textTracks
+    for (let k = 0; k < hlsjsTracks.length; k++) {
+      if (hlsjsTracks[ k ].kind === 'subtitles' || hlsjsTracks[ k ].kind === 'captions') {
+        hlsjsTracks[ k ].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[ k ], activeTrack)
+          ? 'showing'
+          : 'disabled'
+      }
+    }
+  }
+
+  private _startLoad () {
+    this.hls.startLoad(-1)
+    this.videoElement.removeEventListener('play', this.handlers.play)
+  }
+
+  private _oneLevelObjClone (obj: object) {
+    const result = {}
+    const objKeys = Object.keys(obj)
+    for (let i = 0; i < objKeys.length; i++) {
+      result[ objKeys[ i ] ] = obj[ objKeys[ i ] ]
+    }
+
+    return result
+  }
+
+  private _filterDisplayableTextTracks (textTracks: TextTrackList) {
+    const displayableTracks = []
+
+    // Filter out tracks that is displayable (captions or subtitles)
+    for (let idx = 0; idx < textTracks.length; idx++) {
+      if (textTracks[ idx ].kind === 'subtitles' || textTracks[ idx ].kind === 'captions') {
+        displayableTracks.push(textTracks[ idx ])
+      }
+    }
+
+    return displayableTracks
+  }
+
+  private _updateTextTrackList () {
+    const displayableTracks = this._filterDisplayableTextTracks(this.videoElement.textTracks)
+    const playerTextTracks = this.player.textTracks()
+
+    // Add stubs to make the caption switcher shows up
+    // Adding the Hls.js text track in will make us have double captions
+    for (let idx = 0; idx < displayableTracks.length; idx++) {
+      let isAdded = false
+
+      for (let jdx = 0; jdx < playerTextTracks.length; jdx++) {
+        if (this._isSameTextTrack(displayableTracks[ idx ], playerTextTracks[ jdx ])) {
+          isAdded = true
+          break
+        }
+      }
+
+      if (!isAdded) {
+        const hlsjsTextTrack = displayableTracks[ idx ]
+        this.player.addRemoteTextTrack({
+          kind: hlsjsTextTrack.kind as videojs.TextTrack.Kind,
+          label: this._getTextTrackLabel(hlsjsTextTrack),
+          language: hlsjsTextTrack.language,
+          srclang: hlsjsTextTrack.language
+        }, false)
+      }
+    }
+
+    // Handle UI switching
+    this._updateSelectedTextTrack()
+
+    if (!this.uiTextTrackHandled) {
+      this.handlers.textTracksChange = this._updateSelectedTextTrack.bind(this)
+      playerTextTracks.addEventListener('change', this.handlers.textTracksChange)
+
+      this.uiTextTrackHandled = true
+    }
+  }
+
+  private _onMetaData (_event: any, data: Hlsjs.manifestLoadedData) {
+    // This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later
+    this.metadata = data as any
+    this._handleQualityLevels()
+  }
+
+  private _createCueHandler (captionConfig: any) {
+    return {
+      newCue: (track: any, startTime: number, endTime: number, captionScreen: { rows: any[] }) => {
+        let row: any
+        let cue: VTTCue
+        let text: string
+        const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue
+
+        for (let r = 0; r < captionScreen.rows.length; r++) {
+          row = captionScreen.rows[ r ]
+          text = ''
+
+          if (!row.isEmpty()) {
+            for (let c = 0; c < row.chars.length; c++) {
+              text += row.chars[ c ].ucharj
+            }
+
+            cue = new VTTCue(startTime, endTime, text.trim())
+
+            // typeof null === 'object'
+            if (captionConfig != null && typeof captionConfig === 'object') {
+              // Copy client overridden property into the cue object
+              const configKeys = Object.keys(captionConfig)
+
+              for (let k = 0; k < configKeys.length; k++) {
+                cue[ configKeys[ k ] ] = captionConfig[ configKeys[ k ] ]
+              }
+            }
+            track.addCue(cue)
+            if (endTime === startTime) track.addCue(new VTTCue(endTime + 5, ''))
+          }
+        }
+      }
+    }
+  }
+
+  private _initHlsjs () {
+    const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions
+    const srOptions_ = this.player.srOptions_
+
+    const hlsjsConfigRef = srOptions_ && srOptions_.hlsjsConfig || techOptions.hlsjsConfig
+    // Hls.js will write to the reference thus change the object for later streams
+    this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {}
+
+    if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) {
+      this.hlsjsConfig.autoStartLoad = false
+    }
+
+    const captionConfig = srOptions_ && srOptions_.captionConfig || techOptions.captionConfig
+    if (captionConfig) {
+      this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig)
+    }
+
+    // If the user explicitly sets autoStartLoad to false, we're not going to enter the if block above
+    // That's why we have a separate if block here to set the 'play' listener
+    if (this.hlsjsConfig.autoStartLoad === false) {
+      this.handlers.play = this._startLoad.bind(this)
+      this.videoElement.addEventListener('play', this.handlers.play)
+    }
+
+    // _notifyVideoQualities sometimes runs before the quality picker event handler is registered -> no video switcher
+    this.handlers.playing = this._notifyVideoQualities.bind(this)
+    this.videoElement.addEventListener('playing', this.handlers.playing)
+
+    this.hls = new Hlsjs(this.hlsjsConfig)
+
+    this._executeHooksFor('beforeinitialize')
+
+    this.hls.on(Hlsjs.Events.ERROR, (event, data) => this._onError(event, data))
+    this.hls.on(Hlsjs.Events.AUDIO_TRACKS_UPDATED, () => this._onAudioTracks())
+    this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data as any)) // FIXME: typings
+    this.hls.on(Hlsjs.Events.LEVEL_LOADED, (event, data) => {
+      // The DVR plugin will auto seek to "live edge" on start up
+      if (this.hlsjsConfig.liveSyncDuration) {
+        this.edgeMargin = this.hlsjsConfig.liveSyncDuration
+      } else if (this.hlsjsConfig.liveSyncDurationCount) {
+        this.edgeMargin = this.hlsjsConfig.liveSyncDurationCount * data.details.targetduration
+      }
+
+      this.isLive = data.details.live
+      this.dvrDuration = data.details.totalduration
+      this._duration = this.isLive ? Infinity : data.details.totalduration
+    })
+    this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
+      // Emit custom 'loadedmetadata' event for parity with `videojs-contrib-hls`
+      // Ref: https://github.com/videojs/videojs-contrib-hls#loadedmetadata
+      this.tech.trigger('loadedmetadata')
+    })
+
+    this.hls.attachMedia(this.videoElement)
+
+    this.handlers.addtrack = this._updateTextTrackList.bind(this)
+    this.videoElement.textTracks.addEventListener('addtrack', this.handlers.addtrack)
+
+    this.hls.loadSource(this.source.src)
+  }
+
+  private initialize () {
+    this._initHlsjs()
+  }
+}
+
+export {
+  Html5Hlsjs,
+  registerSourceHandler,
+  registerConfigPlugin
+}
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
index c3f863f72..46c6bbaf2 100644
--- 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
@@ -1,16 +1,15 @@
-// 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 videojs from 'video.js'
+import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
 import { Events, Segment } from 'p2p-media-loader-core'
 import { timeToInt } from '../utils'
+import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
+import * as Hlsjs from 'hls.js/dist/hls.light.js'
 
-// videojs-hlsjs-plugin needs videojs in window
-window['videojs'] = videojs
-require('@streamroot/videojs-hlsjs-plugin')
+registerConfigPlugin(videojs)
+registerSourceHandler(videojs)
 
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
 class P2pMediaLoaderPlugin extends Plugin {
 
   private readonly CONSTANTS = {
@@ -18,7 +17,7 @@ class P2pMediaLoaderPlugin extends Plugin {
   }
   private readonly options: P2PMediaLoaderPluginOptions
 
-  private hlsjs: any // Don't type hlsjs to not bundle the module
+  private hlsjs: Hlsjs
   private p2pEngine: Engine
   private statsP2PBytes = {
     pendingDownload: [] as number[],
@@ -37,12 +36,13 @@ class P2pMediaLoaderPlugin extends Plugin {
 
   private networkInfoInterval: any
 
-  constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) {
-    super(player, options)
+  constructor (player: videojs.Player, options?: P2PMediaLoaderPluginOptions) {
+    super(player)
 
     this.options = options
 
-    if (!videojs.Html5Hlsjs) {
+    // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
+    if (!(videojs as any).Html5Hlsjs) {
       const message = 'HLS.js does not seem to be supported.'
       console.warn(message)
 
@@ -50,7 +50,8 @@ class P2pMediaLoaderPlugin extends Plugin {
       return
     }
 
-    videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
+    // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
+    (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
       this.hlsjs = hlsjs
     })
 
@@ -84,12 +85,11 @@ class P2pMediaLoaderPlugin extends Plugin {
   private initialize () {
     initHlsJsPlayer(this.hlsjs)
 
-    const tech = this.player.tech_
-    this.p2pEngine = tech.options_.hlsjsConfig.loader.getEngine()
+    // FIXME: typings
+    const options = this.player.tech(true).options_ as any
+    this.p2pEngine = 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.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHING, (_: any, data: any) => {
       this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
     })
 
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index d9e02cd7d..12e460f03 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -1,21 +1,26 @@
 import { VideoFile } from '../../../../shared/models/videos'
-// @ts-ignore
-import * as videojs from 'video.js'
-import 'videojs-hotkeys'
+import videojs from 'video.js'
+import 'videojs-hotkeys/videojs.hotkeys'
 import 'videojs-dock'
 import 'videojs-contextmenu-ui'
 import 'videojs-contrib-quality-levels'
+import './upnext/end-card'
 import './upnext/upnext-plugin'
 import './bezels/bezels-plugin'
 import './peertube-plugin'
 import './videojs-components/next-video-button'
+import './videojs-components/p2p-info-button'
 import './videojs-components/peertube-link-button'
+import './videojs-components/peertube-load-progress-bar'
 import './videojs-components/resolution-menu-button'
+import './videojs-components/resolution-menu-item'
+import './videojs-components/settings-dialog'
 import './videojs-components/settings-menu-button'
-import './videojs-components/p2p-info-button'
-import './videojs-components/peertube-load-progress-bar'
+import './videojs-components/settings-menu-item'
+import './videojs-components/settings-panel'
+import './videojs-components/settings-panel-child'
 import './videojs-components/theater-button'
-import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
+import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings'
 import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
 import { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
 import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
@@ -25,11 +30,13 @@ import { getStoredP2PEnabled } from './peertube-player-local-storage'
 import { TranslationsManager } from './translations-manager'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
-videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
+(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
+
+const CaptionsButton = videojs.getComponent('CaptionsButton') as any
 // Change Captions to Subtitles/CC
-videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
+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_ = ' '
+CaptionsButton.prototype.label_ = ' '
 
 export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
 
@@ -92,9 +99,9 @@ export type PeertubePlayerManagerOptions = {
 
 export class PeertubePlayerManager {
   private static playerElementClassName: string
-  private static onPlayerChange: (player: any) => void
+  private static onPlayerChange: (player: videojs.Player) => void
 
-  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: any) => void) {
+  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
     let p2pMediaLoader: any
 
     this.onPlayerChange = onPlayerChange
@@ -114,12 +121,12 @@ export class PeertubePlayerManager {
 
     const self = this
     return new Promise(res => {
-      videojs(options.common.playerElement, videojsOptions, function (this: any) {
+      videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
         const player = this
 
         let alreadyFallback = false
 
-        player.tech_.one('error', () => {
+        player.tech(true).one('error', () => {
           if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
           alreadyFallback = true
         })
@@ -164,7 +171,7 @@ export class PeertubePlayerManager {
     const videojsOptions = this.getVideojsOptions(mode, options)
 
     const self = this
-    videojs(newVideoElement, videojsOptions, function (this: any) {
+    videojs(newVideoElement, videojsOptions, function (this: videojs.Player) {
       const player = this
 
       self.addContextMenu(mode, player, options.common.embedUrl)
@@ -173,7 +180,11 @@ export class PeertubePlayerManager {
     })
   }
 
-  private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) {
+  private static getVideojsOptions (
+    mode: PlayerMode,
+    options: PeertubePlayerManagerOptions,
+    p2pMediaLoaderModule?: any
+  ): videojs.PlayerOptions {
     const commonOptions = options.common
 
     let autoplay = commonOptions.autoplay
@@ -197,9 +208,9 @@ export class PeertubePlayerManager {
     }
 
     if (mode === 'p2p-media-loader') {
-      const { streamrootHls } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
+      const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
 
-      html5 = streamrootHls.html5
+      html5 = hlsjs.html5
     }
 
     if (mode === 'webtorrent') {
@@ -213,7 +224,7 @@ export class PeertubePlayerManager {
       html5,
 
       // We don't use text track settings for now
-      textTrackSettings: false,
+      textTrackSettings: false as any, // FIXME: typings
       controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
       loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
 
@@ -222,7 +233,7 @@ export class PeertubePlayerManager {
         : undefined, // Undefined so the player knows it has to check the local storage
 
       autoplay: autoplay === true
-        ? 'any' // Use 'any' instead of true to get notifier by videojs if autoplay fails
+        ? 'play' // Use 'any' instead of true to get notifier by videojs if autoplay fails
         : autoplay,
 
       poster: commonOptions.poster,
@@ -237,7 +248,7 @@ export class PeertubePlayerManager {
           peertubeLink: commonOptions.peertubeLink,
           theaterButton: commonOptions.theaterButton,
           nextVideo: commonOptions.nextVideo
-        })
+        }) as any // FIXME: typings
       }
     }
 
@@ -289,7 +300,7 @@ export class PeertubePlayerManager {
         swarmId: p2pMediaLoaderOptions.playlistUrl
       }
     }
-    const streamrootHls = {
+    const hlsjs = {
       levelLabelHandler: (level: { height: number, width: number }) => {
         const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
 
@@ -308,7 +319,7 @@ export class PeertubePlayerManager {
       }
     }
 
-    const toAssign = { p2pMediaLoader, streamrootHls }
+    const toAssign = { p2pMediaLoader, hlsjs }
     Object.assign(plugins, toAssign)
 
     return toAssign
@@ -406,7 +417,7 @@ export class PeertubePlayerManager {
     return children
   }
 
-  private static addContextMenu (mode: PlayerMode, player: any, videoEmbedUrl: string) {
+  private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string) {
     const content = [
       {
         label: player.localize('Copy the video URL'),
@@ -416,9 +427,8 @@ export class PeertubePlayerManager {
       },
       {
         label: player.localize('Copy the video URL at the current time'),
-        listener: function () {
-          const player = this as videojs.Player
-          copyToClipboard(buildVideoLink({ startTime: player.currentTime() }))
+        listener: function (this: videojs.Player) {
+          copyToClipboard(buildVideoLink({ startTime: this.currentTime() }))
         }
       },
       {
@@ -432,9 +442,8 @@ export class PeertubePlayerManager {
     if (mode === 'webtorrent') {
       content.push({
         label: player.localize('Copy magnet URI'),
-        listener: function () {
-          const player = this as videojs.Player
-          copyToClipboard(player.webtorrent().getCurrentVideoFile().magnetUri)
+        listener: function (this: videojs.Player) {
+          copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
         }
       })
     }
@@ -472,7 +481,8 @@ export class PeertubePlayerManager {
               return event.key === '>'
             },
             handler: function (player: videojs.Player) {
-              player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
+              const newValue = Math.min(player.playbackRate() + 0.1, 5)
+              player.playbackRate(parseFloat(newValue.toFixed(2)))
             }
           },
           decreasePlaybackRateKey: {
@@ -480,7 +490,8 @@ export class PeertubePlayerManager {
               return event.key === '<'
             },
             handler: function (player: videojs.Player) {
-              player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
+              const newValue = Math.max(player.playbackRate() - 0.1, 0.10)
+              player.playbackRate(parseFloat(newValue.toFixed(2)))
             }
           },
           frameByFrame: {
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 9824c43b5..5085f7f86 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -1,14 +1,10 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
+import videojs from 'video.js'
 import './videojs-components/settings-menu-button'
 import {
   PeerTubePluginOptions,
   ResolutionUpdateData,
   UserWatching,
-  VideoJSCaption,
-  VideoJSComponentInterface,
-  videojsUntyped
+  VideoJSCaption
 } from './peertube-videojs-typings'
 import { isMobile, timeToInt } from './utils'
 import {
@@ -20,7 +16,8 @@ import {
   saveVolumeInStore
 } from './peertube-player-local-storage'
 
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
+
 class PeerTubePlugin extends Plugin {
   private readonly videoViewUrl: string
   private readonly videoDuration: number
@@ -28,7 +25,6 @@ class PeerTubePlugin extends Plugin {
     USER_WATCHING_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
   }
 
-  private player: any
   private videoCaptions: VideoJSCaption[]
   private defaultSubtitle: string
 
@@ -40,8 +36,8 @@ class PeerTubePlugin extends Plugin {
   private mouseInControlBar = false
   private readonly savedInactivityTimeout: number
 
-  constructor (player: videojs.Player, options: PeerTubePluginOptions) {
-    super(player, options)
+  constructor (player: videojs.Player, options?: PeerTubePluginOptions) {
+    super(player)
 
     this.videoViewUrl = options.videoViewUrl
     this.videoDuration = options.videoDuration
@@ -67,7 +63,7 @@ class PeerTubePlugin extends Plugin {
         this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
       }
 
-      this.player.tech_.on('loadedqualitydata', () => {
+      this.player.tech(true).on('loadedqualitydata', () => {
         setTimeout(() => {
           // Replay a resolution change, now we loaded all quality data
           if (this.lastResolutionChange) this.handleResolutionChange(this.lastResolutionChange)
@@ -102,7 +98,7 @@ class PeerTubePlugin extends Plugin {
       }
 
       this.player.textTracks().on('change', () => {
-        const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => {
+        const showing = this.player.textTracks().tracks_.find(t => {
           return t.kind === 'captions' && t.mode === 'showing'
         })
 
@@ -262,7 +258,7 @@ class PeerTubePlugin extends Plugin {
 
   // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
   private initSmoothProgressBar () {
-    const SeekBar = videojsUntyped.getComponent('SeekBar')
+    const SeekBar = videojs.getComponent('SeekBar') as any
     SeekBar.prototype.getPercent = function getPercent () {
       // Allows for smooth scrubbing, when player can't keep up.
       // const time = (this.player_.scrubbing()) ?
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index aad4dbb4f..cb7d6f6b4 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -1,28 +1,81 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
-
 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'
 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
 import { VideoFile } from '@shared/models'
+import videojs from 'video.js'
+import { Config, Level } from 'hls.js'
+
+declare module 'video.js' {
+
+  export interface VideoJsPlayer {
+    srOptions_: HlsjsConfigHandlerOptions
+
+    theaterEnabled: boolean
+
+    // FIXME: add it to upstream typings
+    posterImage: {
+      show (): void
+      hide (): void
+    }
+
+    handleTechSeeked_ (): void
+
+    // Plugins
 
-declare namespace videojs {
-  interface Player {
     peertube (): PeerTubePlugin
+
     webtorrent (): WebTorrentPlugin
+
     p2pMediaLoader (): P2pMediaLoaderPlugin
+
+    contextmenuUI (options: any): any
+
+    bezels (): void
+
+    qualityLevels (): QualityLevels
+
+    textTracks (): TextTrackList & {
+      on: Function
+      tracks_: (TextTrack & { id: string, label: string, src: string })[]
+    }
+
+    audioTracks (): AudioTrackList
+
+    dock (options: { title: string, description: string }): void
   }
 }
 
-interface VideoJSComponentInterface {
-  _player: videojs.Player
+export interface VideoJSTechHLS extends videojs.Tech {
+  hlsProvider: any // FIXME: typings
+}
+
+export interface HlsjsConfigHandlerOptions {
+  hlsjsConfig?: Config & { cueHandler: any }// FIXME: typings
+  captionConfig?: any // FIXME: typings
+
+  levelLabelHandler?: (level: Level) => string
+}
+
+type QualityLevelRepresentation = {
+  id: number
+  height: number
+
+  label?: string
+  width?: number
+  bandwidth?: number
+  bitrate?: number
 
-  new (player: videojs.Player, options?: any): any
+  enabled?: Function
+  _enabled: boolean
+}
+
+type QualityLevels = QualityLevelRepresentation[] & {
+  selectedIndex: number
+  selectedIndex_: number
 
-  registerComponent (name: string, obj: any): any
+  addQualityLevel (representation: QualityLevelRepresentation): void
 }
 
 type VideoJSCaption = {
@@ -78,9 +131,6 @@ type VideoJSPluginOptions = {
   p2pMediaLoader?: P2PMediaLoaderPluginOptions
 }
 
-// videojs typings don't have some method we need
-const videojsUntyped = videojs as any
-
 type LoadedQualityData = {
   qualitySwitchCallback: Function,
   qualityData: {
@@ -123,13 +173,13 @@ export {
   PlayerNetworkInfo,
   ResolutionUpdateData,
   AutoResolutionUpdateData,
-  VideoJSComponentInterface,
-  videojsUntyped,
   VideoJSCaption,
   UserWatching,
   PeerTubePluginOptions,
   WebtorrentPluginOptions,
   P2PMediaLoaderPluginOptions,
   VideoJSPluginOptions,
-  LoadedQualityData
+  LoadedQualityData,
+  QualityLevelRepresentation,
+  QualityLevels
 }
diff --git a/client/src/assets/player/upnext/end-card.ts b/client/src/assets/player/upnext/end-card.ts
new file mode 100644
index 000000000..8fabfc3fd
--- /dev/null
+++ b/client/src/assets/player/upnext/end-card.ts
@@ -0,0 +1,155 @@
+import videojs from 'video.js'
+
+function getMainTemplate (options: any) {
+  return `
+    <div class="vjs-upnext-top">
+      <span class="vjs-upnext-headtext">${options.headText}</span>
+      <div class="vjs-upnext-title"></div>
+    </div>
+    <div class="vjs-upnext-autoplay-icon">
+      <svg height="100%" version="1.1" viewbox="0 0 98 98" width="100%">
+        <circle class="vjs-upnext-svg-autoplay-circle" cx="49" cy="49" fill="#000" fill-opacity="0.8" r="48"></circle>
+        <circle class="vjs-upnext-svg-autoplay-ring" cx="-49" cy="49" fill-opacity="0" r="46.5" stroke="#FFFFFF" stroke-width="4" transform="rotate(-90)"></circle>
+        <polygon class="vjs-upnext-svg-autoplay-triangle" fill="#fff" points="32,27 72,49 32,71"></polygon></svg>
+    </div>
+    <span class="vjs-upnext-bottom">
+      <span class="vjs-upnext-cancel">
+        <button class="vjs-upnext-cancel-button" tabindex="0" aria-label="Cancel autoplay">${options.cancelText}</button>
+      </span>
+      <span class="vjs-upnext-suspended">${options.suspendedText}</span>
+    </span>
+  `
+}
+
+export interface EndCardOptions extends videojs.ComponentOptions {
+  next: Function,
+  getTitle: () => string
+  timeout: number
+  cancelText: string
+  headText: string
+  suspendedText: string
+  condition: () => boolean
+  suspended: () => boolean
+}
+
+const Component = videojs.getComponent('Component')
+class EndCard extends Component {
+  options_: EndCardOptions
+
+  dashOffsetTotal = 586
+  dashOffsetStart = 293
+  interval = 50
+  upNextEvents = new videojs.EventTarget()
+  ticks = 0
+  totalTicks: number
+
+  container: HTMLDivElement
+  title: HTMLElement
+  autoplayRing: HTMLElement
+  cancelButton: HTMLElement
+  suspendedMessage: HTMLElement
+  nextButton: HTMLElement
+
+  constructor (player: videojs.Player, options: EndCardOptions) {
+    super(player, options)
+
+    this.totalTicks = this.options_.timeout / this.interval
+
+    player.on('ended', (_: any) => {
+      if (!this.options_.condition()) return
+
+      player.addClass('vjs-upnext--showing')
+      this.showCard((canceled: boolean) => {
+        player.removeClass('vjs-upnext--showing')
+        this.container.style.display = 'none'
+        if (!canceled) {
+          this.options_.next()
+        }
+      })
+    })
+
+    player.on('playing', () => {
+      this.upNextEvents.trigger('playing')
+    })
+  }
+
+  createEl () {
+    const container = super.createEl('div', {
+      className: 'vjs-upnext-content',
+      innerHTML: getMainTemplate(this.options_)
+    }) as HTMLDivElement
+
+    this.container = container
+    container.style.display = 'none'
+
+    this.autoplayRing = container.getElementsByClassName('vjs-upnext-svg-autoplay-ring')[0] as HTMLElement
+    this.title = container.getElementsByClassName('vjs-upnext-title')[0] as HTMLElement
+    this.cancelButton = container.getElementsByClassName('vjs-upnext-cancel-button')[0] as HTMLElement
+    this.suspendedMessage = container.getElementsByClassName('vjs-upnext-suspended')[0] as HTMLElement
+    this.nextButton = container.getElementsByClassName('vjs-upnext-autoplay-icon')[0] as HTMLElement
+
+    this.cancelButton.onclick = () => {
+      this.upNextEvents.trigger('cancel')
+    }
+
+    this.nextButton.onclick = () => {
+      this.upNextEvents.trigger('next')
+    }
+
+    return container
+  }
+
+  showCard (cb: Function) {
+    let timeout: any
+
+    this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart)
+    this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart)
+
+    this.title.innerHTML = this.options_.getTitle()
+
+    this.upNextEvents.one('cancel', () => {
+      clearTimeout(timeout)
+      cb(true)
+    })
+
+    this.upNextEvents.one('playing', () => {
+      clearTimeout(timeout)
+      cb(true)
+    })
+
+    this.upNextEvents.one('next', () => {
+      clearTimeout(timeout)
+      cb(false)
+    })
+
+    const goToPercent = (percent: number) => {
+      const newOffset = Math.max(-this.dashOffsetTotal, - this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100)
+      this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset)
+    }
+
+    const tick = () => {
+      goToPercent((this.ticks++) * 100 / this.totalTicks)
+    }
+
+    const update = () => {
+      if (this.options_.suspended()) {
+        this.suspendedMessage.innerText = this.options_.suspendedText
+        goToPercent(0)
+        this.ticks = 0
+        timeout = setTimeout(update.bind(this), 300) // checks once supsended can be a bit longer
+      } else if (this.ticks >= this.totalTicks) {
+        clearTimeout(timeout)
+        cb(false)
+      } else {
+        this.suspendedMessage.innerText = ''
+        tick()
+        timeout = setTimeout(update.bind(this), this.interval)
+      }
+    }
+
+    this.container.style.display = 'block'
+    timeout = setTimeout(update.bind(this), this.interval)
+  }
+}
+
+videojs.registerComponent('EndCard', EndCard)
diff --git a/client/src/assets/player/upnext/upnext-plugin.ts b/client/src/assets/player/upnext/upnext-plugin.ts
index a3747b25f..db969024d 100644
--- a/client/src/assets/player/upnext/upnext-plugin.ts
+++ b/client/src/assets/player/upnext/upnext-plugin.ts
@@ -1,154 +1,11 @@
-// @ts-ignore
-import * as videojs from 'video.js'
-import { VideoJSComponentInterface } from '../peertube-videojs-typings'
+import videojs from 'video.js'
+import { EndCardOptions } from './end-card'
 
-function getMainTemplate (options: any) {
-  return `
-    <div class="vjs-upnext-top">
-      <span class="vjs-upnext-headtext">${options.headText}</span>
-      <div class="vjs-upnext-title"></div>
-    </div>
-    <div class="vjs-upnext-autoplay-icon">
-      <svg height="100%" version="1.1" viewbox="0 0 98 98" width="100%">
-        <circle class="vjs-upnext-svg-autoplay-circle" cx="49" cy="49" fill="#000" fill-opacity="0.8" r="48"></circle>
-        <circle class="vjs-upnext-svg-autoplay-ring" cx="-49" cy="49" fill-opacity="0" r="46.5" stroke="#FFFFFF" stroke-width="4" transform="rotate(-90)"></circle>
-        <polygon class="vjs-upnext-svg-autoplay-triangle" fill="#fff" points="32,27 72,49 32,71"></polygon></svg>
-    </div>
-    <span class="vjs-upnext-bottom">
-      <span class="vjs-upnext-cancel">
-        <button class="vjs-upnext-cancel-button" tabindex="0" aria-label="Cancel autoplay">${options.cancelText}</button>
-      </span>
-      <span class="vjs-upnext-suspended">${options.suspendedText}</span>
-    </span>
-  `
-}
-
-// @ts-ignore-start
-const Component = videojs.getComponent('Component')
-class EndCard extends Component {
-  options_: any
-  dashOffsetTotal = 586
-  dashOffsetStart = 293
-  interval = 50
-  upNextEvents = new videojs.EventTarget()
-  ticks = 0
-  totalTicks: number
-
-  container: HTMLElement
-  title: HTMLElement
-  autoplayRing: HTMLElement
-  cancelButton: HTMLElement
-  suspendedMessage: HTMLElement
-  nextButton: HTMLElement
-
-  constructor (player: videojs.Player, options: any) {
-    super(player, options)
-
-    this.totalTicks = this.options_.timeout / this.interval
-
-    player.on('ended', (_: any) => {
-      if (!this.options_.condition()) return
-
-      player.addClass('vjs-upnext--showing')
-      this.showCard((canceled: boolean) => {
-        player.removeClass('vjs-upnext--showing')
-        this.container.style.display = 'none'
-        if (!canceled) {
-          this.options_.next()
-        }
-      })
-    })
-
-    player.on('playing', () => {
-      this.upNextEvents.trigger('playing')
-    })
-  }
-
-  createEl () {
-    const container = super.createEl('div', {
-      className: 'vjs-upnext-content',
-      innerHTML: getMainTemplate(this.options_)
-    })
-
-    this.container = container
-    container.style.display = 'none'
-
-    this.autoplayRing = container.getElementsByClassName('vjs-upnext-svg-autoplay-ring')[0]
-    this.title = container.getElementsByClassName('vjs-upnext-title')[0]
-    this.cancelButton = container.getElementsByClassName('vjs-upnext-cancel-button')[0]
-    this.suspendedMessage = container.getElementsByClassName('vjs-upnext-suspended')[0]
-    this.nextButton = container.getElementsByClassName('vjs-upnext-autoplay-icon')[0]
-
-    this.cancelButton.onclick = () => {
-      this.upNextEvents.trigger('cancel')
-    }
-
-    this.nextButton.onclick = () => {
-      this.upNextEvents.trigger('next')
-    }
-
-    return container
-  }
+const Plugin = videojs.getPlugin('plugin')
 
-  showCard (cb: Function) {
-    let timeout: any
-
-    this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart)
-    this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart)
-
-    this.title.innerHTML = this.options_.getTitle()
-
-    this.upNextEvents.one('cancel', () => {
-      clearTimeout(timeout)
-      cb(true)
-    })
-
-    this.upNextEvents.one('playing', () => {
-      clearTimeout(timeout)
-      cb(true)
-    })
-
-    this.upNextEvents.one('next', () => {
-      clearTimeout(timeout)
-      cb(false)
-    })
-
-    const goToPercent = (percent: number) => {
-      const newOffset = Math.max(-this.dashOffsetTotal, - this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100)
-      this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset)
-    }
-
-    const tick = () => {
-      goToPercent((this.ticks++) * 100 / this.totalTicks)
-    }
-
-    const update = () => {
-      if (this.options_.suspended()) {
-        this.suspendedMessage.innerText = this.options_.suspendedText
-        goToPercent(0)
-        this.ticks = 0
-        timeout = setTimeout(update.bind(this), 300) // checks once supsended can be a bit longer
-      } else if (this.ticks >= this.totalTicks) {
-        clearTimeout(timeout)
-        cb(false)
-      } else {
-        this.suspendedMessage.innerText = ''
-        tick()
-        timeout = setTimeout(update.bind(this), this.interval)
-      }
-    }
-
-    this.container.style.display = 'block'
-    timeout = setTimeout(update.bind(this), this.interval)
-  }
-}
-// @ts-ignore-end
-
-videojs.registerComponent('EndCard', EndCard)
-
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class UpNextPlugin extends Plugin {
-  constructor (player: videojs.Player, options: any = {}) {
+
+  constructor (player: videojs.Player, options: Partial<EndCardOptions> = {}) {
     const settings = {
       next: options.next,
       getTitle: options.getTitle,
@@ -160,7 +17,7 @@ class UpNextPlugin extends Plugin {
       suspended: options.suspended
     }
 
-    super(player, settings)
+    super(player)
 
     this.player.ready(() => {
       player.addClass('vjs-upnext')
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index 38f2482eb..fa902e1f1 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -51,8 +51,9 @@ function buildVideoLink (options: {
     : window.location.origin + window.location.pathname.replace('/embed/', '/watch/')
 
   const params = new URLSearchParams(window.location.search)
-  // Remove this unused parameter when we are on a playlist page
+  // Remove these unused parameters when we are on a playlist page
   params.delete('videoId')
+  params.delete('resume')
 
   if (options.startTime) {
     const startTimeInt = Math.floor(options.startTime)
diff --git a/client/src/assets/player/videojs-components/next-video-button.ts b/client/src/assets/player/videojs-components/next-video-button.ts
index bf5c1aba4..22b32f06b 100644
--- a/client/src/assets/player/videojs-components/next-video-button.ts
+++ b/client/src/assets/player/videojs-components/next-video-button.ts
@@ -1,21 +1,25 @@
-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'
+import videojs from 'video.js'
 
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
+
+export interface NextVideoButtonOptions extends videojs.ComponentOptions {
+  handler: Function
+}
 
 class NextVideoButton extends Button {
+  private readonly nextVideoButtonOptions: NextVideoButtonOptions
 
-  constructor (player: Player, options: any) {
+  constructor (player: videojs.Player, options?: NextVideoButtonOptions) {
     super(player, options)
+
+    this.nextVideoButtonOptions = options
   }
 
   createEl () {
-    const button = videojsUntyped.dom.createEl('button', {
+    const button = videojs.dom.createEl('button', {
       className: 'vjs-next-video'
-    })
-    const nextIcon = videojsUntyped.dom.createEl('span', {
+    }) as HTMLButtonElement
+    const nextIcon = videojs.dom.createEl('span', {
       className: 'icon icon-next'
     })
     button.appendChild(nextIcon)
@@ -26,11 +30,8 @@ class NextVideoButton extends Button {
   }
 
   handleClick () {
-    this.options_.handler()
+    this.nextVideoButtonOptions.handler()
   }
-
 }
 
-NextVideoButton.prototype.controlText_ = 'Next video'
-
-NextVideoButton.registerComponent('NextVideoButton', NextVideoButton)
+videojs.registerComponent('NextVideoButton', NextVideoButton)
diff --git a/client/src/assets/player/videojs-components/p2p-info-button.ts b/client/src/assets/player/videojs-components/p2p-info-button.ts
index 6424787b2..db6806fed 100644
--- a/client/src/assets/player/videojs-components/p2p-info-button.ts
+++ b/client/src/assets/player/videojs-components/p2p-info-button.ts
@@ -1,63 +1,64 @@
-import { PlayerNetworkInfo, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import { PlayerNetworkInfo } from '../peertube-videojs-typings'
+import videojs from 'video.js'
 import { bytes } from '../utils'
 
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
 class P2pInfoButton extends Button {
 
   createEl () {
-    const div = videojsUntyped.dom.createEl('div', {
+    const div = videojs.dom.createEl('div', {
       className: 'vjs-peertube'
     })
-    const subDivWebtorrent = videojsUntyped.dom.createEl('div', {
+    const subDivWebtorrent = videojs.dom.createEl('div', {
       className: 'vjs-peertube-hidden' // Hide the stats before we get the info
-    })
+    }) as HTMLDivElement
     div.appendChild(subDivWebtorrent)
 
-    const downloadIcon = videojsUntyped.dom.createEl('span', {
+    const downloadIcon = videojs.dom.createEl('span', {
       className: 'icon icon-download'
     })
     subDivWebtorrent.appendChild(downloadIcon)
 
-    const downloadSpeedText = videojsUntyped.dom.createEl('span', {
+    const downloadSpeedText = videojs.dom.createEl('span', {
       className: 'download-speed-text'
     })
-    const downloadSpeedNumber = videojsUntyped.dom.createEl('span', {
+    const downloadSpeedNumber = videojs.dom.createEl('span', {
       className: 'download-speed-number'
     })
-    const downloadSpeedUnit = videojsUntyped.dom.createEl('span')
+    const downloadSpeedUnit = videojs.dom.createEl('span')
     downloadSpeedText.appendChild(downloadSpeedNumber)
     downloadSpeedText.appendChild(downloadSpeedUnit)
     subDivWebtorrent.appendChild(downloadSpeedText)
 
-    const uploadIcon = videojsUntyped.dom.createEl('span', {
+    const uploadIcon = videojs.dom.createEl('span', {
       className: 'icon icon-upload'
     })
     subDivWebtorrent.appendChild(uploadIcon)
 
-    const uploadSpeedText = videojsUntyped.dom.createEl('span', {
+    const uploadSpeedText = videojs.dom.createEl('span', {
       className: 'upload-speed-text'
     })
-    const uploadSpeedNumber = videojsUntyped.dom.createEl('span', {
+    const uploadSpeedNumber = videojs.dom.createEl('span', {
       className: 'upload-speed-number'
     })
-    const uploadSpeedUnit = videojsUntyped.dom.createEl('span')
+    const uploadSpeedUnit = videojs.dom.createEl('span')
     uploadSpeedText.appendChild(uploadSpeedNumber)
     uploadSpeedText.appendChild(uploadSpeedUnit)
     subDivWebtorrent.appendChild(uploadSpeedText)
 
-    const peersText = videojsUntyped.dom.createEl('span', {
+    const peersText = videojs.dom.createEl('span', {
       className: 'peers-text'
     })
-    const peersNumber = videojsUntyped.dom.createEl('span', {
+    const peersNumber = videojs.dom.createEl('span', {
       className: 'peers-number'
     })
     subDivWebtorrent.appendChild(peersNumber)
     subDivWebtorrent.appendChild(peersText)
 
-    const subDivHttp = videojsUntyped.dom.createEl('div', {
+    const subDivHttp = videojs.dom.createEl('div', {
       className: 'vjs-peertube-hidden'
     })
-    const subDivHttpText = videojsUntyped.dom.createEl('span', {
+    const subDivHttpText = videojs.dom.createEl('span', {
       className: 'http-fallback',
       textContent: 'HTTP'
     })
@@ -83,8 +84,8 @@ class P2pInfoButton extends Button {
       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(' '))
+      subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
+        this.player().localize('Total uploaded: ' + totalUploaded.join(' '))
 
       downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
       downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
@@ -92,14 +93,15 @@ class P2pInfoButton extends Button {
       uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
       uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
 
-      peersNumber.textContent = numPeers
-      peersText.textContent = ' ' + (numPeers > 1 ? this.player_.localize('peers') : this.player_.localize('peer'))
+      peersNumber.textContent = numPeers.toString()
+      peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer'))
 
       subDivHttp.className = 'vjs-peertube-hidden'
       subDivWebtorrent.className = 'vjs-peertube-displayed'
     })
 
-    return div
+    return div as HTMLButtonElement
   }
 }
-Button.registerComponent('P2PInfoButton', P2pInfoButton)
+
+videojs.registerComponent('P2PInfoButton', P2pInfoButton)
diff --git a/client/src/assets/player/videojs-components/peertube-link-button.ts b/client/src/assets/player/videojs-components/peertube-link-button.ts
index 4d0ea37f5..63e92eb77 100644
--- a/client/src/assets/player/videojs-components/peertube-link-button.ts
+++ b/client/src/assets/player/videojs-components/peertube-link-button.ts
@@ -1,13 +1,10 @@
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
 import { buildVideoLink } from '../utils'
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
+import videojs from 'video.js'
 
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
 class PeerTubeLinkButton extends Button {
 
-  constructor (player: Player, options: any) {
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player, options)
   }
 
@@ -20,21 +17,22 @@ class PeerTubeLinkButton extends Button {
   }
 
   handleClick () {
-    this.player_.pause()
+    this.player().pause()
   }
 
   private buildElement () {
-    const el = videojsUntyped.dom.createEl('a', {
+    const el = videojs.dom.createEl('a', {
       href: buildVideoLink(),
       innerHTML: 'PeerTube',
-      title: this.player_.localize('Go to the video page'),
+      title: this.player().localize('Go to the video page'),
       className: 'vjs-peertube-link',
       target: '_blank'
     })
 
     el.addEventListener('mouseenter', () => this.updateHref())
 
-    return el
+    return el as HTMLButtonElement
   }
 }
-Button.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)
+
+videojs.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)
diff --git a/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts b/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
index b594fc1c5..7869b56ce 100644
--- a/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
+++ b/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
@@ -1,16 +1,12 @@
-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'
+import videojs from 'video.js'
 
-const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
+const Component = videojs.getComponent('Component')
 
 class PeerTubeLoadProgressBar extends Component {
-  partEls_: any[]
 
-  constructor (player: Player, options: any) {
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player, options)
-    this.partEls_ = []
+
     this.on(player, 'progress', this.update)
   }
 
@@ -22,8 +18,6 @@ class PeerTubeLoadProgressBar extends Component {
   }
 
   dispose () {
-    this.partEls_ = null
-
     super.dispose()
   }
 
@@ -31,7 +25,8 @@ class PeerTubeLoadProgressBar extends Component {
     const torrent = this.player().webtorrent().getTorrent()
     if (!torrent) return
 
-    this.el_.style.width = (torrent.progress * 100) + '%'
+    // FIXME: typings
+    (this.el() as HTMLElement).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
index 2de3ece19..98e7f56fc 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-button.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts
@@ -1,22 +1,19 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
+import videojs from 'video.js'
 
-import { LoadedQualityData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import { LoadedQualityData } from '../peertube-videojs-typings'
 import { ResolutionMenuItem } from './resolution-menu-item'
 
-const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
-const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
+const Menu = videojs.getComponent('Menu')
+const MenuButton = videojs.getComponent('MenuButton')
 class ResolutionMenuButton extends MenuButton {
-  label: HTMLElement
-  labelEl_: any
-  player: Player
+  labelEl_: HTMLElement
 
-  constructor (player: Player, options: any) {
+  constructor (player: videojs.Player, options?: videojs.MenuButtonOptions) {
     super(player, options)
-    this.player = player
 
-    player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
+    this.controlText('Quality')
+
+    player.tech(true).on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
 
     player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
   }
@@ -24,9 +21,9 @@ class ResolutionMenuButton extends MenuButton {
   createEl () {
     const el = super.createEl()
 
-    this.labelEl_ = videojsUntyped.dom.createEl('div', {
+    this.labelEl_ = videojs.dom.createEl('div', {
       className: 'vjs-resolution-value'
-    })
+    }) as HTMLElement
 
     el.appendChild(this.labelEl_)
 
@@ -55,7 +52,7 @@ class ResolutionMenuButton extends MenuButton {
 
       for (const child of children) {
         if (component !== child) {
-          child.selected(false)
+          (child as videojs.MenuItem).selected(false)
         }
       }
     })
@@ -76,7 +73,7 @@ class ResolutionMenuButton extends MenuButton {
       if (d.id === -1) continue
 
       const label = d.label === '0p'
-        ? this.player.localize('Audio-only')
+        ? this.player().localize('Audio-only')
         : d.label
 
       this.menu.addChild(new ResolutionMenuItem(
@@ -110,6 +107,5 @@ class ResolutionMenuButton extends MenuButton {
     this.trigger('menuChanged')
   }
 }
-ResolutionMenuButton.prototype.controlText_ = 'Quality'
 
-MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
+videojs.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
index 6c42fefd2..73ad47d2b 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-item.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts
@@ -1,12 +1,16 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
+import videojs from 'video.js'
+import { AutoResolutionUpdateData, ResolutionUpdateData } from '../peertube-videojs-typings'
 
-import { AutoResolutionUpdateData, ResolutionUpdateData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+const MenuItem = videojs.getComponent('MenuItem')
+
+export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions {
+  labels?: { [id: number]: string }
+  id: number
+  callback: Function
+}
 
-const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
 class ResolutionMenuItem extends MenuItem {
-  private readonly id: number
+  private readonly resolutionId: number
   private readonly label: string
   // Only used for the automatic item
   private readonly labels: { [id: number]: string }
@@ -15,7 +19,7 @@ class ResolutionMenuItem extends MenuItem {
   private autoResolutionPossible: boolean
   private currentResolutionLabel: string
 
-  constructor (player: Player, options: any) {
+  constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) {
     options.selectable = true
 
     super(player, options)
@@ -23,40 +27,40 @@ class ResolutionMenuItem extends MenuItem {
     this.autoResolutionPossible = true
     this.currentResolutionLabel = ''
 
+    this.resolutionId = options.id
     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) {
+    if (this.resolutionId === -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
+    if (this.autoResolutionPossible === false && this.resolutionId === -1) return
 
     super.handleClick(event)
 
-    this.callback(this.id, 'video')
+    this.callback(this.resolutionId, 'video')
   }
 
   updateSelection (data: ResolutionUpdateData) {
-    if (this.id === -1) {
+    if (this.resolutionId === -1) {
       this.currentResolutionLabel = this.labels[data.id]
     }
 
     // Automatic resolution only
     if (data.auto === true) {
-      this.selected(this.id === -1)
+      this.selected(this.resolutionId === -1)
       return
     }
 
-    this.selected(this.id === data.id)
+    this.selected(this.resolutionId === data.id)
   }
 
   updateAutoResolution (data: AutoResolutionUpdateData) {
@@ -71,13 +75,13 @@ class ResolutionMenuItem extends MenuItem {
   }
 
   getLabel () {
-    if (this.id === -1) {
+    if (this.resolutionId === -1) {
       return this.label + ' <small>' + this.currentResolutionLabel + '</small>'
     }
 
     return this.label
   }
 }
-MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
+videojs.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
 
 export { ResolutionMenuItem }
diff --git a/client/src/assets/player/videojs-components/settings-dialog.ts b/client/src/assets/player/videojs-components/settings-dialog.ts
new file mode 100644
index 000000000..41911e7e8
--- /dev/null
+++ b/client/src/assets/player/videojs-components/settings-dialog.ts
@@ -0,0 +1,37 @@
+import videojs from 'video.js'
+
+const Component = videojs.getComponent('Component')
+
+class SettingsDialog extends Component {
+  constructor (player: videojs.Player) {
+    super(player)
+
+    this.hide()
+  }
+
+  /**
+   * Create the component's DOM element
+   *
+   * @return {Element}
+   * @method createEl
+   */
+  createEl () {
+    const uniqueId = this.id()
+    const dialogLabelId = 'TTsettingsDialogLabel-' + uniqueId
+    const dialogDescriptionId = 'TTsettingsDialogDescription-' + uniqueId
+
+    return super.createEl('div', {
+      className: 'vjs-settings-dialog vjs-modal-overlay',
+      innerHTML: '',
+      tabIndex: -1
+    }, {
+      'role': 'dialog',
+      'aria-labelledby': dialogLabelId,
+      'aria-describedby': dialogDescriptionId
+    })
+  }
+}
+
+Component.registerComponent('SettingsDialog', SettingsDialog)
+
+export { SettingsDialog }
diff --git a/client/src/assets/player/videojs-components/settings-menu-button.ts b/client/src/assets/player/videojs-components/settings-menu-button.ts
index b700f4be6..011323267 100644
--- a/client/src/assets/player/videojs-components/settings-menu-button.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-button.ts
@@ -1,43 +1,52 @@
-// Author: Yanko Shterev
-// Thanks https://github.com/yshterev/videojs-settings-menu
-
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
-
+// Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
 import { SettingsMenuItem } from './settings-menu-item'
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
 import { toTitleCase } from '../utils'
+import videojs from 'video.js'
+
+import { SettingsDialog } from './settings-dialog'
+import { SettingsPanel } from './settings-panel'
+import { SettingsPanelChild } from './settings-panel-child'
 
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
-const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
-const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
+const Button = videojs.getComponent('Button')
+const Menu = videojs.getComponent('Menu')
+const Component = videojs.getComponent('Component')
+
+export interface SettingsButtonOptions extends videojs.ComponentOptions {
+  entries: any[]
+  setup?: {
+    maxHeightOffset: number
+  }
+}
 
 class SettingsButton extends Button {
-  playerComponent = videojs.Player
-  dialog: any
-  dialogEl: any
-  menu: any
-  panel: any
-  panelChild: any
-
-  addSettingsItemHandler: Function
-  disposeSettingsItemHandler: Function
-  playerClickHandler: Function
-  userInactiveHandler: Function
-
-  constructor (player: videojs.Player, options: any) {
+  dialog: SettingsDialog
+  dialogEl: HTMLElement
+  menu: videojs.Menu
+  panel: SettingsPanel
+  panelChild: SettingsPanelChild
+
+  addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
+  disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
+  playerClickHandler: typeof SettingsButton.prototype.onPlayerClick
+  userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
+
+  private settingsButtonOptions: SettingsButtonOptions
+
+  constructor (player: videojs.Player, options?: SettingsButtonOptions) {
     super(player, options)
 
-    this.playerComponent = player
-    this.dialog = this.playerComponent.addChild('settingsDialog')
-    this.dialogEl = this.dialog.el_
+    this.settingsButtonOptions = options
+
+    this.controlText('Settings')
+
+    this.dialog = this.player().addChild('settingsDialog')
+    this.dialogEl = this.dialog.el() as HTMLElement
     this.menu = null
     this.panel = this.dialog.addChild('settingsPanel')
     this.panelChild = this.panel.addChild('settingsPanelChild')
 
     this.addClass('vjs-settings')
-    this.el_.setAttribute('aria-label', 'Settings Button')
+    this.el().setAttribute('aria-label', 'Settings Button')
 
     // Event handlers
     this.addSettingsItemHandler = this.onAddSettingsItem.bind(this)
@@ -84,7 +93,7 @@ class SettingsButton extends Button {
 
     this.hideDialog()
 
-    if (this.options_.entries.length === 0) {
+    if (this.settingsButtonOptions.entries.length === 0) {
       this.addClass('vjs-hidden')
     }
   }
@@ -103,10 +112,10 @@ class SettingsButton extends Button {
   }
 
   bindEvents () {
-    this.playerComponent.on('click', this.playerClickHandler)
-    this.playerComponent.on('addsettingsitem', this.addSettingsItemHandler)
-    this.playerComponent.on('disposesettingsitem', this.disposeSettingsItemHandler)
-    this.playerComponent.on('userinactive', this.userInactiveHandler)
+    this.player().on('click', this.playerClickHandler)
+    this.player().on('addsettingsitem', this.addSettingsItemHandler)
+    this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
+    this.player().on('userinactive', this.userInactiveHandler)
   }
 
   buildCSSClass () {
@@ -122,9 +131,9 @@ class SettingsButton extends Button {
   }
 
   showDialog () {
-    this.player_.peertube().onMenuOpen()
+    this.player().peertube().onMenuOpen();
 
-    this.menu.el_.style.opacity = '1'
+    (this.menu.el() as HTMLElement).style.opacity = '1'
     this.dialog.show()
 
     this.setDialogSize(this.getComponentSize(this.menu))
@@ -134,23 +143,24 @@ class SettingsButton extends Button {
     this.player_.peertube().onMenuClosed()
 
     this.dialog.hide()
-    this.setDialogSize(this.getComponentSize(this.menu))
-    this.menu.el_.style.opacity = '1'
+    this.setDialogSize(this.getComponentSize(this.menu));
+    (this.menu.el() as HTMLElement).style.opacity = '1'
     this.resetChildren()
   }
 
-  getComponentSize (element: any) {
+  getComponentSize (element: videojs.Component | HTMLElement) {
     let width: number = null
     let height: number = null
 
     // Could be component or just DOM element
     if (element instanceof Component) {
-      width = element.el_.offsetWidth
-      height = element.el_.offsetHeight
+      const el = element.el() as HTMLElement
+
+      width = el.offsetWidth
+      height = el.offsetHeight;
 
-      // keep width/height as properties for direct use
-      element.width = width
-      element.height = height
+      (element as any).width = width;
+      (element as any).height = height
     } else {
       width = element.offsetWidth
       height = element.offsetHeight
@@ -164,15 +174,17 @@ class SettingsButton extends Button {
       return
     }
 
-    const offset = this.options_.setup.maxHeightOffset
-    const maxHeight = this.playerComponent.el_.offsetHeight - offset
+    const offset = this.settingsButtonOptions.setup.maxHeightOffset
+    const maxHeight = (this.player().el() as HTMLElement).offsetHeight - offset // FIXME: typings
+
+    const panelEl = this.panel.el() as HTMLElement
 
     if (height > maxHeight) {
       height = maxHeight
       width += 17
-      this.panel.el_.style.maxHeight = `${height}px`
-    } else if (this.panel.el_.style.maxHeight !== '') {
-      this.panel.el_.style.maxHeight = ''
+      panelEl.style.maxHeight = `${height}px`
+    } else if (panelEl.style.maxHeight !== '') {
+      panelEl.style.maxHeight = ''
     }
 
     this.dialogEl.style.width = `${width}px`
@@ -182,7 +194,7 @@ class SettingsButton extends Button {
   buildMenu () {
     this.menu = new Menu(this.player())
     this.menu.addClass('vjs-main-menu')
-    const entries = this.options_.entries
+    const entries = this.settingsButtonOptions.entries
 
     if (entries.length === 0) {
       this.addClass('vjs-hidden')
@@ -191,7 +203,7 @@ class SettingsButton extends Button {
     }
 
     for (const entry of entries) {
-      this.addMenuItem(entry, this.options_)
+      this.addMenuItem(entry, this.settingsButtonOptions)
     }
 
     this.panelChild.addChild(this.menu)
@@ -199,15 +211,17 @@ class SettingsButton extends Button {
 
   addMenuItem (entry: any, options: any) {
     const openSubMenu = function (this: any) {
-      if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
-        videojsUntyped.dom.removeClass(this.el_, 'open')
+      if (videojs.dom.hasClass(this.el_, 'open')) {
+        videojs.dom.removeClass(this.el_, 'open')
       } else {
-        videojsUntyped.dom.addClass(this.el_, 'open')
+        videojs.dom.addClass(this.el_, 'open')
       }
     }
 
     options.name = toTitleCase(entry)
-    const settingsMenuItem = new SettingsMenuItem(this.player(), options, entry, this as any)
+
+    const newOptions = Object.assign({}, options, { entry, menuButton: this })
+    const settingsMenuItem = new SettingsMenuItem(this.player(), newOptions)
 
     this.menu.addChild(settingsMenuItem)
 
@@ -221,7 +235,7 @@ class SettingsButton extends Button {
 
   resetChildren () {
     for (const menuChild of this.menu.children()) {
-      menuChild.reset()
+      (menuChild as SettingsMenuItem).reset()
     }
   }
 
@@ -230,75 +244,12 @@ class SettingsButton extends Button {
    */
   hideChildren () {
     for (const menuChild of this.menu.children()) {
-      menuChild.hideSubMenu()
+      (menuChild as SettingsMenuItem).hideSubMenu()
     }
   }
 
 }
 
-class SettingsPanel extends Component {
-  constructor (player: videojs.Player, options: any) {
-    super(player, options)
-  }
-
-  createEl () {
-    return super.createEl('div', {
-      className: 'vjs-settings-panel',
-      innerHTML: '',
-      tabIndex: -1
-    })
-  }
-}
-
-class SettingsPanelChild extends Component {
-  constructor (player: videojs.Player, options: any) {
-    super(player, options)
-  }
-
-  createEl () {
-    return super.createEl('div', {
-      className: 'vjs-settings-panel-child',
-      innerHTML: '',
-      tabIndex: -1
-    })
-  }
-}
-
-class SettingsDialog extends Component {
-  constructor (player: videojs.Player, options: any) {
-    super(player, options)
-    this.hide()
-  }
-
-  /**
-   * Create the component's DOM element
-   *
-   * @return {Element}
-   * @method createEl
-   */
-  createEl () {
-    const uniqueId = this.id_
-    const dialogLabelId = 'TTsettingsDialogLabel-' + uniqueId
-    const dialogDescriptionId = 'TTsettingsDialogDescription-' + uniqueId
-
-    return super.createEl('div', {
-      className: 'vjs-settings-dialog vjs-modal-overlay',
-      innerHTML: '',
-      tabIndex: -1
-    }, {
-      'role': 'dialog',
-      'aria-labelledby': dialogLabelId,
-      'aria-describedby': dialogDescriptionId
-    })
-  }
-
-}
-
-SettingsButton.prototype.controlText_ = 'Settings'
-
 Component.registerComponent('SettingsButton', SettingsButton)
-Component.registerComponent('SettingsDialog', SettingsDialog)
-Component.registerComponent('SettingsPanel', SettingsPanel)
-Component.registerComponent('SettingsPanelChild', SettingsPanelChild)
 
-export { SettingsButton, SettingsDialog, SettingsPanel, SettingsPanelChild }
+export { SettingsButton }
diff --git a/client/src/assets/player/videojs-components/settings-menu-item.ts b/client/src/assets/player/videojs-components/settings-menu-item.ts
index 84d394c0e..f1342f179 100644
--- a/client/src/assets/player/videojs-components/settings-menu-item.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-item.ts
@@ -1,57 +1,63 @@
-// Author: Yanko Shterev
-// Thanks https://github.com/yshterev/videojs-settings-menu
-
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
-
+// Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
 import { toTitleCase } from '../utils'
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
-
-const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
-const component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
+import videojs from 'video.js'
+import { SettingsButton } from './settings-menu-button'
+import { SettingsDialog } from './settings-dialog'
+import { SettingsPanel } from './settings-panel'
+import { SettingsPanelChild } from './settings-panel-child'
+
+const MenuItem = videojs.getComponent('MenuItem')
+const component = videojs.getComponent('Component')
+
+export interface SettingsMenuItemOptions extends videojs.MenuItemOptions {
+  entry: string
+  menuButton: SettingsButton
+}
 
 class SettingsMenuItem extends MenuItem {
-  settingsButton: any
-  dialog: any
-  mainMenu: any
-  panel: any
-  panelChild: any
-  panelChildEl: any
-  size: any
+  settingsButton: SettingsButton
+  dialog: SettingsDialog
+  mainMenu: videojs.Menu
+  panel: SettingsPanel
+  panelChild: SettingsPanelChild
+  panelChildEl: HTMLElement
+  size: number[]
   menuToLoad: string
-  subMenu: any
+  subMenu: SettingsButton
 
-  submenuClickHandler: Function
-  transitionEndHandler: Function
+  submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick
+  transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd
 
-  settingsSubMenuTitleEl_: any
-  settingsSubMenuValueEl_: any
-  settingsSubMenuEl_: any
+  settingsSubMenuTitleEl_: HTMLElement
+  settingsSubMenuValueEl_: HTMLElement
+  settingsSubMenuEl_: HTMLElement
 
-  constructor (player: videojs.Player, options: any, entry: string, menuButton: VideoJSComponentInterface) {
+  constructor (player: videojs.Player, options?: SettingsMenuItemOptions) {
     super(player, options)
 
-    this.settingsButton = menuButton
+    this.settingsButton = options.menuButton
     this.dialog = this.settingsButton.dialog
     this.mainMenu = this.settingsButton.menu
     this.panel = this.dialog.getChild('settingsPanel')
     this.panelChild = this.panel.getChild('settingsPanelChild')
-    this.panelChildEl = this.panelChild.el_
+    this.panelChildEl = this.panelChild.el() as HTMLElement
 
     this.size = null
 
     // keep state of what menu type is loading next
     this.menuToLoad = 'mainmenu'
 
-    const subMenuName = toTitleCase(entry)
-    const SubMenuComponent = videojsUntyped.getComponent(subMenuName)
+    const subMenuName = toTitleCase(options.entry)
+    const SubMenuComponent = videojs.getComponent(subMenuName)
 
     if (!SubMenuComponent) {
       throw new Error(`Component ${subMenuName} does not exist`)
     }
-    this.subMenu = new SubMenuComponent(this.player(), options, menuButton, this)
-    const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
+
+    const newOptions = Object.assign({}, options, { entry: options.menuButton, menuButton: this })
+
+    this.subMenu = new SubMenuComponent(this.player(), newOptions) as any // FIXME: typings
+    const subMenuClass = this.subMenu.buildCSSClass().split(' ')[ 0 ]
     this.settingsSubMenuEl_.className += ' ' + subMenuClass
 
     this.eventHandlers()
@@ -72,7 +78,7 @@ class SettingsMenuItem extends MenuItem {
           player.on('captionsChanged', () => {
             setTimeout(() => {
               this.settingsSubMenuEl_.innerHTML = ''
-              this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
+              this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
               this.update()
               this.bindClickEvents()
             }, 0)
@@ -119,27 +125,27 @@ class SettingsMenuItem extends MenuItem {
    * @method createEl
    */
   createEl () {
-    const el = videojsUntyped.dom.createEl('li', {
+    const el = videojs.dom.createEl('li', {
       className: 'vjs-menu-item'
     })
 
-    this.settingsSubMenuTitleEl_ = videojsUntyped.dom.createEl('div', {
+    this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
       className: 'vjs-settings-sub-menu-title'
-    })
+    }) as HTMLElement
 
     el.appendChild(this.settingsSubMenuTitleEl_)
 
-    this.settingsSubMenuValueEl_ = videojsUntyped.dom.createEl('div', {
+    this.settingsSubMenuValueEl_ = videojs.dom.createEl('div', {
       className: 'vjs-settings-sub-menu-value'
-    })
+    }) as HTMLElement
 
     el.appendChild(this.settingsSubMenuValueEl_)
 
-    this.settingsSubMenuEl_ = videojsUntyped.dom.createEl('div', {
+    this.settingsSubMenuEl_ = videojs.dom.createEl('div', {
       className: 'vjs-settings-sub-menu'
-    })
+    }) as HTMLElement
 
-    return el
+    return el as HTMLLIElement
   }
 
   /**
@@ -147,17 +153,17 @@ class SettingsMenuItem extends MenuItem {
    *
    * @method handleClick
    */
-  handleClick () {
+  handleClick (event: videojs.EventTarget.Event) {
     this.menuToLoad = 'submenu'
     // Remove open class to ensure only the open submenu gets this class
-    videojsUntyped.dom.removeClass(this.el_, 'open')
+    videojs.dom.removeClass(this.el(), 'open')
 
-    super.handleClick()
+    super.handleClick(event);
 
-    this.mainMenu.el_.style.opacity = '0'
+    (this.mainMenu.el() as HTMLElement).style.opacity = '0'
     // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element
-    if (videojsUntyped.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
-      videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
+    if (videojs.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
+      videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
 
       // animation not played without timeout
       setTimeout(() => {
@@ -167,7 +173,7 @@ class SettingsMenuItem extends MenuItem {
 
       this.settingsButton.setDialogSize(this.size)
     } else {
-      videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+      videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
     }
   }
 
@@ -178,9 +184,9 @@ class SettingsMenuItem extends MenuItem {
    */
   createBackButton () {
     const button = this.subMenu.menu.addChild('MenuItem', {}, 0)
-    button.name_ = 'BackButton'
-    button.addClass('vjs-back-button')
-    button.el_.innerHTML = this.player_.localize(this.subMenu.controlText_)
+
+    button.addClass('vjs-back-button');
+    (button.el() as HTMLElement).innerHTML = this.player().localize(this.subMenu.controlText())
   }
 
   /**
@@ -189,17 +195,17 @@ class SettingsMenuItem extends MenuItem {
    * @method PrefixedEvent
    */
   PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
-    const prefix = ['webkit', 'moz', 'MS', 'o', '']
+    const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ]
 
     for (let p = 0; p < prefix.length; p++) {
-      if (!prefix[p]) {
+      if (!prefix[ p ]) {
         type = type.toLowerCase()
       }
 
       if (action === 'addEvent') {
-        element.addEventListener(prefix[p] + type, callback, false)
+        element.addEventListener(prefix[ p ] + type, callback, false)
       } else if (action === 'removeEvent') {
-        element.removeEventListener(prefix[p] + type, callback, false)
+        element.removeEventListener(prefix[ p ] + type, callback, false)
       }
     }
   }
@@ -211,7 +217,7 @@ class SettingsMenuItem extends MenuItem {
 
     if (this.menuToLoad === 'mainmenu') {
       // hide submenu
-      videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+      videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
 
       // reset opacity to 0
       this.settingsSubMenuEl_.style.opacity = '0'
@@ -219,25 +225,27 @@ class SettingsMenuItem extends MenuItem {
   }
 
   reset () {
-    videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+    videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
     this.settingsSubMenuEl_.style.opacity = '0'
     this.setMargin()
   }
 
   loadMainMenu () {
+    const mainMenuEl = this.mainMenu.el() as HTMLElement
     this.menuToLoad = 'mainmenu'
     this.mainMenu.show()
-    this.mainMenu.el_.style.opacity = '0'
+    mainMenuEl.style.opacity = '0'
 
     // back button will always take you to main menu, so set dialog sizes
-    this.settingsButton.setDialogSize([this.mainMenu.width, this.mainMenu.height])
+    const mainMenuAny = this.mainMenu as any
+    this.settingsButton.setDialogSize([ mainMenuAny.width, mainMenuAny.height ])
 
     // animation not triggered without timeout (some async stuff ?!?)
     setTimeout(() => {
       // animate margin and opacity before hiding the submenu
       // this triggers CSS Transition event
       this.setMargin()
-      this.mainMenu.el_.style.opacity = '1'
+      mainMenuEl.style.opacity = '1'
     }, 0)
   }
 
@@ -251,8 +259,8 @@ class SettingsMenuItem extends MenuItem {
       this.update()
     })
 
-    this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_)
-    this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
+    this.settingsSubMenuTitleEl_.innerHTML = this.player().localize(this.subMenu.controlText())
+    this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
     this.panelChildEl.appendChild(this.settingsSubMenuEl_)
     this.update()
 
@@ -283,7 +291,8 @@ class SettingsMenuItem extends MenuItem {
     // or sets options_['selected'] on the selected playback rate.
     // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
     if (subMenu === 'PlaybackRateMenuButton') {
-      setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = this.subMenu.labelEl_.innerHTML, 250)
+      const html = (this.subMenu as any).labelEl_.innerHTML
+      setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = html, 250)
     } else {
       // Loop trough the submenu items to find the selected child
       for (const subMenuItem of this.subMenu.menu.children_) {
@@ -292,13 +301,15 @@ class SettingsMenuItem extends MenuItem {
         }
 
         if (subMenuItem.hasClass('vjs-selected')) {
+          const subMenuItemUntyped = subMenuItem as any
+
           // Prefer to use the function
-          if (typeof subMenuItem.getLabel === 'function') {
-            this.settingsSubMenuValueEl_.innerHTML = subMenuItem.getLabel()
+          if (typeof subMenuItemUntyped.getLabel === 'function') {
+            this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.getLabel()
             break
           }
 
-          this.settingsSubMenuValueEl_.innerHTML = subMenuItem.options_.label
+          this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.options_.label
         }
       }
     }
@@ -313,7 +324,7 @@ class SettingsMenuItem extends MenuItem {
       if (!(item instanceof component)) {
         continue
       }
-      item.on(['tap', 'click'], this.submenuClickHandler)
+      item.on([ 'tap', 'click' ], this.submenuClickHandler)
     }
   }
 
@@ -321,11 +332,11 @@ class SettingsMenuItem extends MenuItem {
   // if number of submenu items change dynamically more logic will be needed
   setSize () {
     this.dialog.removeClass('vjs-hidden')
-    videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
+    videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
     this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
     this.setMargin()
     this.dialog.addClass('vjs-hidden')
-    videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+    videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
   }
 
   setMargin () {
@@ -341,19 +352,19 @@ class SettingsMenuItem extends MenuItem {
    */
   hideSubMenu () {
     // after removing settings item this.el_ === null
-    if (!this.el_) {
+    if (!this.el()) {
       return
     }
 
-    if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
-      videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
-      videojsUntyped.dom.removeClass(this.el_, 'open')
+    if (videojs.dom.hasClass(this.el(), 'open')) {
+      videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+      videojs.dom.removeClass(this.el(), 'open')
     }
   }
 
 }
 
-SettingsMenuItem.prototype.contentElType = 'button'
-videojsUntyped.registerComponent('SettingsMenuItem', SettingsMenuItem)
+(SettingsMenuItem as any).prototype.contentElType = 'button'
+videojs.registerComponent('SettingsMenuItem', SettingsMenuItem)
 
 export { SettingsMenuItem }
diff --git a/client/src/assets/player/videojs-components/settings-panel-child.ts b/client/src/assets/player/videojs-components/settings-panel-child.ts
new file mode 100644
index 000000000..d1582412c
--- /dev/null
+++ b/client/src/assets/player/videojs-components/settings-panel-child.ts
@@ -0,0 +1,22 @@
+import videojs from 'video.js'
+
+const Component = videojs.getComponent('Component')
+
+class SettingsPanelChild extends Component {
+
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
+    super(player, options)
+  }
+
+  createEl () {
+    return super.createEl('div', {
+      className: 'vjs-settings-panel-child',
+      innerHTML: '',
+      tabIndex: -1
+    })
+  }
+}
+
+Component.registerComponent('SettingsPanelChild', SettingsPanelChild)
+
+export { SettingsPanelChild }
diff --git a/client/src/assets/player/videojs-components/settings-panel.ts b/client/src/assets/player/videojs-components/settings-panel.ts
new file mode 100644
index 000000000..1ad8bb1fc
--- /dev/null
+++ b/client/src/assets/player/videojs-components/settings-panel.ts
@@ -0,0 +1,22 @@
+import videojs from 'video.js'
+
+const Component = videojs.getComponent('Component')
+
+class SettingsPanel extends Component {
+
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
+    super(player, options)
+  }
+
+  createEl () {
+    return super.createEl('div', {
+      className: 'vjs-settings-panel',
+      innerHTML: '',
+      tabIndex: -1
+    })
+  }
+}
+
+Component.registerComponent('SettingsPanel', SettingsPanel)
+
+export { SettingsPanel }
diff --git a/client/src/assets/player/videojs-components/theater-button.ts b/client/src/assets/player/videojs-components/theater-button.ts
index bf383cf34..f862ee224 100644
--- a/client/src/assets/player/videojs-components/theater-button.ts
+++ b/client/src/assets/player/videojs-components/theater-button.ts
@@ -1,26 +1,24 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
-
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import videojs from 'video.js'
 import { saveTheaterInStore, getStoredTheater } from '../peertube-player-local-storage'
 
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
 class TheaterButton extends Button {
 
   private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
 
-  constructor (player: videojs.Player, options: any) {
+  constructor (player: videojs.Player, options: videojs.ComponentOptions) {
     super(player, options)
 
     const enabled = getStoredTheater()
     if (enabled === true) {
-      this.player_.addClass(TheaterButton.THEATER_MODE_CLASS)
+      this.player().addClass(TheaterButton.THEATER_MODE_CLASS)
 
       this.handleTheaterChange()
     }
 
-    this.player_.theaterEnabled = enabled
+    this.controlText('Theater mode')
+
+    this.player().theaterEnabled = enabled
   }
 
   buildCSSClass () {
@@ -52,6 +50,4 @@ class TheaterButton extends Button {
   }
 }
 
-TheaterButton.prototype.controlText_ = 'Theater mode'
-
-TheaterButton.registerComponent('TheaterButton', TheaterButton)
+videojs.registerComponent('TheaterButton', TheaterButton)
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index 35cf85c99..cb3deacc6 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -1,17 +1,14 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
-
+import videojs from 'video.js'
 import * as WebTorrent from 'webtorrent'
 import { renderVideo } from './video-renderer'
-import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from '../peertube-videojs-typings'
+import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings'
 import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
 import { PeertubeChunkStore } from './peertube-chunk-store'
 import {
   getAverageBandwidthInStore,
   getStoredMute,
-  getStoredVolume,
   getStoredP2PEnabled,
+  getStoredVolume,
   saveAverageBandwidth
 } from '../peertube-player-local-storage'
 import { VideoFile } from '@shared/models'
@@ -24,14 +21,16 @@ type PlayOptions = {
   delay?: number
 }
 
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
+
 class WebTorrentPlugin extends Plugin {
+  readonly videoFiles: VideoFile[]
+
   private readonly playerElement: HTMLVideoElement
 
   private readonly autoplay: boolean = false
   private readonly startTime: number = 0
-  private readonly savePlayerSrcFunction: Function
-  private readonly videoFiles: VideoFile[]
+  private readonly savePlayerSrcFunction: videojs.Player['src']
   private readonly videoDuration: number
   private readonly CONSTANTS = {
     INFO_SCHEDULER: 1000, // Don't change this
@@ -49,7 +48,6 @@ class WebTorrentPlugin extends Plugin {
     dht: false
   })
 
-  private player: any
   private currentVideoFile: VideoFile
   private torrent: WebTorrent.Torrent
 
@@ -70,8 +68,8 @@ class WebTorrentPlugin extends Plugin {
 
   private downloadSpeeds: number[] = []
 
-  constructor (player: videojs.Player, options: WebtorrentPluginOptions) {
-    super(player, options)
+  constructor (player: videojs.Player, options?: WebtorrentPluginOptions) {
+    super(player)
 
     this.startTime = timeToInt(options.startTime)
 
@@ -147,12 +145,12 @@ class WebTorrentPlugin extends Plugin {
     }
 
     // Do not display error to user because we will have multiple fallback
-    this.disableErrorDisplay()
+    this.disableErrorDisplay();
 
     // Hack to "simulate" src link in video.js >= 6
     // Without this, we can't play the video after pausing it
     // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
-    this.player.src = () => true
+    (this.player as any).src = () => true
     const oldPlaybackRate = this.player.playbackRate()
 
     const previousVideoFile = this.currentVideoFile
@@ -333,7 +331,7 @@ class WebTorrentPlugin extends Plugin {
 
     const playPromise = this.player.play()
     if (playPromise !== undefined) {
-      return playPromise.then(done)
+      return playPromise.then(() => done())
                         .catch((err: Error) => {
                           if (err.message.indexOf('The play() request was interrupted by a call to pause()') !== -1) {
                             return
@@ -426,8 +424,8 @@ class WebTorrentPlugin extends Plugin {
     }
 
     // Proxy first play
-    const oldPlay = this.player.play.bind(this.player)
-    this.player.play = () => {
+    const oldPlay = this.player.play.bind(this.player);
+    (this.player as any).play = () => {
       this.player.addClass('vjs-has-big-play-button-clicked')
       this.player.play = oldPlay
 
@@ -619,7 +617,7 @@ class WebTorrentPlugin extends Plugin {
         video: qualityLevelsPayload
       }
     }
-    this.player.tech_.trigger('loadedqualitydata', payload)
+    this.player.tech(true).trigger('loadedqualitydata', payload)
   }
 
   private buildQualityLabel (file: VideoFile) {
@@ -651,9 +649,9 @@ class WebTorrentPlugin extends Plugin {
       return
     }
 
-    for (let i = 0; i < qualityLevels; i++) {
-      const q = this.player.qualityLevels[i]
-      if (q.height === resolutionId) qualityLevels.selectedIndex = i
+    for (let i = 0; i < qualityLevels.length; i++) {
+      const q = qualityLevels[i]
+      if (q.height === resolutionId) qualityLevels.selectedIndex_ = i
     }
   }
 }