[Broadcaster] Add chat moderation capabilities

broadcaster/assets/js/app.js

@@ -23,11 +23,11 @@ import { LiveSocket } from 'phoenix_live_view';
 import topbar from '../vendor/topbar';
 
 import { Home } from './home.js';
-import { Player } from './player.js';
+import { Panel } from './panel.js';
 
 let Hooks = {};
 Hooks.Home = Home;
-Hooks.Player = Player;
+Hooks.Panel = Panel;
 
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")

broadcaster/assets/js/chat.js

@@ -1,6 +1,6 @@
 import { Socket, Presence } from 'phoenix';
 
-export async function connectChat() {
+export async function connectChat(isAdmin) {
   const viewercount = document.getElementById('viewercount');
   const chatMessages = document.getElementById('chat-messages');
   const chatInput = document.getElementById('chat-input');
@@ -14,18 +14,46 @@ export async function connectChat() {
   const channel = socket.channel('stream:chat');
   const presence = new Presence(channel);
 
-  const send = function () {
-    const body = chatInput.value.trim();
-    if (body != '') {
-      channel.push('chat_msg', { body: body });
-      chatInput.value = '';
-    }
-  };
-
   presence.onSync(() => {
     viewercount.innerText = presence.list().length;
   });
 
+  if (!isAdmin) {
+    const send = () => {
+      const body = chatInput.value.trim();
+      if (body != '') {
+        channel.push('chat_msg', { body: body });
+        chatInput.value = '';
+      }
+    };
+
+    channel.on('join_chat_resp', (resp) => {
+      if (resp.result === 'success') {
+        chatButton.innerText = 'Send';
+        chatButton.onclick = send;
+        chatNickname.disabled = true;
+        chatInput.disabled = false;
+        chatInput.onkeydown = (ev) => {
+          if (ev.key === 'Enter') {
+            // prevent from adding a new line in our text area
+            ev.preventDefault();
+            send();
+          }
+        };
+      } else {
+        chatNickname.classList.add('invalid-input');
+      }
+    });
+
+    chatButton.onclick = () => {
+      channel.push('join_chat', { nickname: chatNickname.value });
+    };
+
+    chatNickname.onclick = () => {
+      chatNickname.classList.remove('invalid-input');
+    };
+  }
+
   channel
     .join()
     .receive('ok', (resp) => {
@@ -35,56 +63,60 @@ export async function connectChat() {
       console.log('Unable to join chat channel', resp);
     });
 
-  channel.on('join_chat_resp', (resp) => {
-    if (resp.result === 'success') {
-      chatButton.innerText = 'Send';
-      chatButton.onclick = send;
-      chatNickname.disabled = true;
-      chatInput.disabled = false;
-      chatInput.onkeydown = (ev) => {
-        if (ev.key === 'Enter') {
-          // prevent from adding a new line in our text area
-          ev.preventDefault();
-          send();
-        }
-      };
-    } else {
-      chatNickname.classList.add('invalid-input');
-    }
-  });
-
-  channel.on('chat_msg', (msg) => {
-    if (msg.nickname == undefined || msg.body == undefined) return;
-
-    const chatMessage = document.createElement('div');
-    chatMessage.classList.add('chat-message');
-
-    const nickname = document.createElement('div');
-    nickname.classList.add('chat-nickname');
-    nickname.innerText = msg.nickname;
-
-    const body = document.createElement('div');
-    body.innerText = msg.body;
-
-    chatMessage.appendChild(nickname);
-    chatMessage.appendChild(body);
-
-    chatMessages.appendChild(chatMessage);
+  channel.on('chat_msg', (msg) =>
+    appendChatMessage(chatMessages, msg, isAdmin)
+  );
+  channel.on('delete_chat_msg', (msg) => deleteChatMessage(chatMessages, msg));
+}
 
-    // scroll to the bottom after adding a message
-    chatMessages.scrollTop = chatMessages.scrollHeight;
+function appendChatMessage(chatMessages, msg, isAdmin) {
+  if (msg.nickname == undefined || msg.body == undefined) return;
+
+  const chatMessage = document.createElement('div');
+  chatMessage.classList.add('chat-message');
+  chatMessage.setAttribute('data-id', msg.id);
+
+  const nickname = document.createElement('div');
+  nickname.classList.add('chat-nickname');
+  nickname.innerText = msg.nickname;
+  chatMessage.appendChild(nickname);
+
+  if (isAdmin) {
+    const remove = document.createElement('button');
+    remove.innerText = 'remove';
+    remove.classList.add('chat-remove');
+    remove.onclick = async () => {
+      const response = await fetch(
+        `${window.location.origin}/api/admin/chat/${msg.id}`,
+        { method: 'DELETE' }
+      );
+      if (response.status != 200) {
+        console.warn('Deleting message failed');
+      }
+    };
+    chatMessage.appendChild(remove);
+  }
+
+  const body = document.createElement('div');
+  body.innerText = msg.body;
+  chatMessage.appendChild(body);
+
+  chatMessages.appendChild(chatMessage);
+
+  // scroll to the bottom after adding a message
+  chatMessages.scrollTop = chatMessages.scrollHeight;
+
+  // allow for 1 scroll history
+  if (chatMessages.scrollHeight > 2 * chatMessages.clientHeight) {
+    chatMessages.removeChild(chatMessages.children[0]);
+  }
+}
 
-    // allow for 1 scroll history
-    if (chatMessages.scrollHeight > 2 * chatMessages.clientHeight) {
-      chatMessages.removeChild(chatMessages.children[0]);
+function deleteChatMessage(chatMessages, msg) {
+  for (const child of chatMessages.children) {
+    if (child.getAttribute('data-id') == msg.id) {
+      child.lastChild.innerText = 'Removed by moderator';
+      child.lastChild.style.fontStyle = 'italic';
     }
-  });
-
-  chatButton.onclick = () => {
-    channel.push('join_chat', { nickname: chatNickname.value });
-  };
-
-  chatNickname.onclick = () => {
-    chatNickname.classList.remove('invalid-input');
-  };
+  }
 }

broadcaster/assets/js/home.js

@@ -208,7 +208,7 @@ function toggleBox(element, other) {
 export const Home = {
   mounted() {
     connectMedia();
-    connectChat();
+    connectChat(false);
 
     videoQuality.onchange = () => changeLayer(videoQuality.value);
 

broadcaster/assets/js/player.js → broadcaster/assets/js/panel.js

@@ -1,3 +1,5 @@
+import { connectChat } from './chat.js';
+
 const audioDevices = document.getElementById('audioDevices');
 const videoDevices = document.getElementById('videoDevices');
 const serverUrl = document.getElementById('serverUrl');
@@ -176,8 +178,9 @@ async function run() {
   bindControls();
 }
 
-export const Player = {
+export const Panel = {
   mounted() {
+    connectChat(true);
     run();
   },
 };

broadcaster/lib/broadcaster_web/channels/stream_channel.ex

@@ -18,15 +18,26 @@ defmodule BroadcasterWeb.StreamChannel do
 
   @impl true
   def handle_in("chat_msg", %{"body" => body}, socket) do
-    broadcast!(socket, "chat_msg", %{body: body, nickname: socket.assigns.nickname})
-    {:noreply, socket}
+    msg = %{
+      body: body,
+      nickname: socket.assigns.nickname,
+      id: "#{socket.assigns.user_id}:#{socket.assigns.msg_count}"
+    }
+
+    broadcast!(socket, "chat_msg", msg)
+
+    {:noreply, assign(socket, :msg_count, socket.assigns.msg_count + 1)}
   end
 
   @impl true
   def handle_in("join_chat", %{"nickname" => nickname}, socket) do
     case register(nickname) do
       :ok ->
-        socket = assign(socket, :nickname, nickname)
+        socket =
+          socket
+          |> assign(:nickname, nickname)
+          |> assign(:msg_count, 0)
+
         :ok = push(socket, "join_chat_resp", %{"result" => "success"})
         {:noreply, socket}
 

broadcaster/lib/broadcaster_web/controllers/page_controller.ex

@@ -5,7 +5,12 @@ defmodule BroadcasterWeb.PageController do
     render(conn, :home, page_title: "Home")
   end
 
-  def player(conn, _params) do
-    render(conn, :player, page_title: "Player")
+  def panel(conn, _params) do
+    render(conn, :panel, page_title: "Panel")
+  end
+
+  def delete_chat_message(conn, %{"id" => id}) do
+    BroadcasterWeb.Endpoint.broadcast!("stream:chat", "delete_chat_msg", %{id: id})
+    send_resp(conn, 200, "")
   end
 end

broadcaster/lib/broadcaster_web/controllers/page_html/player.html.heex → broadcaster/lib/broadcaster_web/controllers/page_html/panel.html.heex

@@ -1,4 +1,4 @@
-<div id="player" phx-hook="Player" class="p-10">
+<div id="panel" phx-hook="Panel" class="p-10">
   <h1>WHIP Player</h1>
   <div>
     <div class="p-2">
@@ -33,4 +33,10 @@
       <video id="previewPlayer" controls autoplay muted></video>
     </div>
   </div>
+  <div
+    id="chat"
+    class="hidden lg:flex flex-col overflow-hidden justify-end h-full text-wrap break-words w-96 p-4 border-brand/50 border-2 rounded-xl"
+  >
+    <div id="chat-messages" class="overflow-y-scroll justify-end"></div>
+  </div>
 </div>

broadcaster/lib/broadcaster_web/router.ex

@@ -26,7 +26,7 @@ defmodule BroadcasterWeb.Router do
     pipe_through :auth
     pipe_through :browser
 
-    get "/player", PageController, :player
+    get "/panel", PageController, :panel
 
     live_dashboard "/dashboard",
       metrics: BroadcasterWeb.Telemetry,
@@ -44,6 +44,12 @@ defmodule BroadcasterWeb.Router do
       post "/sse", MediaController, :sse
       post "/layer", MediaController, :layer
     end
+
+    scope "/admin" do
+      pipe_through :auth
+
+      delete "/chat/:id", PageController, :delete_chat_message
+    end
   end
 
   defp admin_auth(conn, _opts) do