Improved player

internal/static/index.html

@@ -25,7 +25,8 @@
         <a href="https://stream-server.h-da.io/reference">Reference</a>
       </p>
       <small>
-        <a href="javascript:toggleFullscreen()">toggle fullscreen</a>
+        <a href="javascript:toggleFullscreen()">toggle fullscreen</a> or press
+        <kbd>F11</kbd>
       </small>
     </div>
 

internal/static/main.js

 "use strict";
 
+// When the chat loads faster than the stream, the stream would be out to the left of the window.
+// This fixes the scrolling...
+window.onscroll = () => {
+  window.scrollTo(0, 0);
+};
+
 let large_player;
 let small_player;
 
@@ -10,6 +16,8 @@ function newLargePlayer(channel) {
     height: "",
     controls: false,
     muted: false,
+    theme: "dark",
+    allowfullscreen: false,
   });
 }
 
@@ -20,6 +28,8 @@ function newSmallPlayer(channel) {
     height: "",
     controls: false,
     muted: true,
+    theme: "dark",
+    allowfullscreen: false,
   });
 }
 
@@ -162,12 +172,3 @@ function toggleFullscreen() {
     }
   }
 }
-
-large_player_elem.addEventListener("mousedown", (event) => {
-  if (event.detail > 1) {
-    // double click
-    toggleFullscreen();
-
-    event.preventDefault();
-  }
-});

internal/static/style.css

@@ -51,7 +51,15 @@ body.with-chat {
   /* the iframes always grow to the parents size */
   flex-grow: 1;
 
-  pointer-events: none;
+  /* pointer-events: none; */
+}
+
+#small-player > iframe {
+  z-index: 2000;
+}
+
+#large-player > iframe {
+  z-index: 1000;
 }
 
 .hidden > iframe {
@@ -81,7 +89,7 @@ body.with-chat {
 }
 
 #chat {
-  width: 21.25rem;
+  flex: 0 0 21.25rem;
 }
 
 a:link,