Merge remote-tracking branch 'upstream/master'

chatcommands.go

@@ -213,7 +213,18 @@ var commands = &CommandControl{
 			HelpText: "Show a list of users in chat",
 			Function: func(cl *Client, args []string) (string, error) {
 				names := cl.belongsTo.GetNames()
-				return strings.Join(names, " "), nil
+				formatNames := func(names []string) []string {
+					result := make([]string, len(names))
+					for _, name := range names {
+						if strings.HasPrefix(name, "@") {
+							result = append(result, name)
+						} else {
+							result = append(result, "@"+name)
+						}
+					}
+					return result
+				}
+				return strings.Join(formatNames(names), " "), nil
 			},
 		},
 

static/css/site.css

@@ -191,10 +191,28 @@ input[type=text] {
     border-bottom-right-radius: 5px;
 }
 
-#videoElement {
+#videoWrapper {
+    position: relative;
+    display: flex;
+}
+
+#videoOverlay {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-color: rgb(0, 0, 0, 0.75);
+    z-index: 3;
+    text-align: center;
+    vertical-align: middle;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2;
+}
+
+#videoElement {
+    z-index: 1;
     position: relative;
-    top: 50%;
-    transform: translateY(-50%);
     width: 100%;
 }
 

static/js/video.js

@@ -2,16 +2,25 @@
 
 
 function initPlayer() {
-    if (flvjs.isSupported()) {
-        var videoElement = document.getElementById("videoElement");
-        var flvPlayer = flvjs.createPlayer({
-            type: "flv",
-            url: "/live"
-        });
-        flvPlayer.attachMediaElement(videoElement);
-        flvPlayer.load();
-        flvPlayer.play();
+    if (!flvjs.isSupported()) {
+        console.warn('flvjs not supported');
+        return;
     }
+
+    let videoElement = document.querySelector("#videoElement");
+    let flvPlayer = flvjs.createPlayer({
+        type: "flv",
+        url: "/live"
+    });
+    flvPlayer.attachMediaElement(videoElement);
+    flvPlayer.load();
+    flvPlayer.play();
+
+    let overlay = document.querySelector('#videoOverlay');
+    overlay.onclick = () => {
+        overlay.style.display = 'none';
+        videoElement.muted = false;
+    };
 }
 
 window.addEventListener("load", initPlayer);

static/main.html

@@ -35,10 +35,15 @@
 
 {{define "body"}}
 {{if .Video}}
-<video id="videoElement" controls autoplay x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline
-    webkit-playsinline>
-    Your browser is too old and doesn't support HTML5 video.
-</video>
+<div id="videoWrapper">
+    <div id="videoOverlay">
+        <img src="/static/img/mute-icon.png" />
+    </div>
+    <video id="videoElement" x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline webkit-playsinline
+        autoplay muted controls>
+        Your browser is too old and doesn't support HTML5 video.
+    </video>
+</div>
 {{end}}
 
 {{if .Chat}}

wasm/suggestions.go

@@ -74,14 +74,16 @@ func processMessageKey(this js.Value, v []js.Value) interface{} {
 		msg := global.Get("msg")
 		val := msg.Get("value").String()
 		newval := val[:startIdx]
+		wrap := string(suggestionEmote)
 
 		if i := strings.LastIndex(newval, string(currentSugType)); i != -1 {
 			var offset int
 			if currentSugType == suggestionName {
 				offset = 1
+				wrap = ""
 			}
 
-			newval = newval[:i+offset] + ":" + currentSug + ":"
+			newval = newval[:i+offset] + wrap + currentSug + wrap
 		}
 
 		endVal := val[startIdx:]