Finish Discord activity implementation

author: Arjun Satarkar <me@arjunsatarkar.net> 2024-07-27 15:34:28 +0000
committer: Arjun Satarkar <me@arjunsatarkar.net> 2024-07-27 15:34:28 +0000
commit: 407862a4e0e10ce2a035e4e5e76e26dde849aac1 (patch)
tree: db8fe1c95672d31621c6bd5fe545cab5497f18df /priv
parent: cd794243a5bba358d995e26ba024268e7d5d3f85 (diff)
download: mediasync-407862a4e0e10ce2a035e4e5e76e26dde849aac1.tar
mediasync-407862a4e0e10ce2a035e4e5e76e26dde849aac1.tar.gz
mediasync-407862a4e0e10ce2a035e4e5e76e26dde849aac1.zip
4 files changed, 155 insertions, 27 deletions
diff --git a/priv/discord_activity.html.eex b/priv/discord_activity.html.eex
index 83bda0d..5278400 100644
--- a/priv/discord_activity.html.eex
+++ b/priv/discord_activity.html.eex
@@ -1,3 +1,4 @@
+<% home_url = "/.proxy/?#{Mediasync.Constants.query_param_discord_activity_inner()}" %>
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -6,25 +7,58 @@
     <meta name="robots" content="noindex, nofollow">
     <title>discord activity | mediasync</title>
     <style>
+        :root {
+            --instance-room-info-height: 20svh;
+            --instance-room-info-remainder: calc(100svh - var(--instance-room-info-height));
+        }
+
         body {
             overflow: hidden;
+            background-color: black;
+            color: white;
+            font-family: monospace;
         }
         iframe {
             border: none;
         }
         html, body, iframe {
             margin: 0;
-            width: 100%;
-            height: 100%;
+            width: 100svw;
+            height: 100svh;
+        }
+
+        iframe.at-home {
+            height: var(--instance-room-info-remainder);
+        }
+
+        div#instance-room-info {
+            display: none;
+            overflow: auto;
+        }
+
+        body:has(> iframe.at-home) > div#instance-room-info {
+            display: block;
+            height: var(--instance-room-info-height);
+            border-bottom: 1px solid white;
         }
     </style>
 </head>
-<body>
-    <iframe src="/.proxy/?<%= Mediasync.Constants.query_param_discord_activity_inner() %>"></iframe>
+<body data-csrf-token="<%= Plug.CSRFProtection.get_csrf_token() %>">
+    <div id="instance-room-info">
+        <span style="font-weight: bold;">currently hosting:</span>
+        <div id="instance-room-info-content"></div>
+    </div>
+    </div>
+    <iframe src="<%= home_url %>" style="display: none;" class="at-home" name="activity-inner-iframe"></iframe>
     <script>
         const DISCORD_CLIENT_ID = "<%= Application.fetch_env!(:mediasync, :discord_client_id) %>";
+        const ACCESS_TOKEN_URL = "/.proxy/discord_activity/access_token?<%= Mediasync.Constants.query_param_discord_activity_inner() %>";
+        const HOME_URL = "<%= home_url %>";
+        const roomUrl = (roomId) => {
+          return `/.proxy/room/${roomId}?<%= Mediasync.Constants.query_param_discord_activity_inner() %>`;
+        };
     </script>
     <script src="/static/discord-embedded-app-sdk/Discord.js" type="module"></script>
-    <script src="/static/discord_activity.js" type="module"></script>
+    <script src="/static/discordActivity.js" type="module"></script>
 </body>
 </html>
diff --git a/priv/static/discordActivity.js b/priv/static/discordActivity.js
new file mode 100644
index 0000000..7ec4872
--- /dev/null
+++ b/priv/static/discordActivity.js
@@ -0,0 +1,113 @@
+import { DiscordSDK } from "/static/discord-embedded-app-sdk/Discord.js";
+
+const discordSdk = new DiscordSDK(DISCORD_CLIENT_ID);
+
+const updateInstanceRoomInfo = () => {
+  const contentEl = document.getElementById("instance-room-info-content");
+
+  const defaultContents = document.createElement("i");
+  defaultContents.innerText = "none yet";
+  if (!contentEl.hasChildNodes()) {
+    contentEl.replaceChildren(defaultContents);
+  }
+
+  fetch(
+    `/.proxy/discord_activity/rooms_for_instance?discord_activity_inner&instance_id=${discordSdk.instanceId}`,
+  )
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`Fetching instance room info failed with status code ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((json) => {
+      let docFragment = new DocumentFragment();
+      if (json.length === 0) {
+        docFragment.appendChild(defaultContents);
+      } else {
+        const listEl = docFragment.appendChild(document.createElement("ul"));
+        for (const roomInfo of json) {
+          const item = listEl.appendChild(document.createElement("li"));
+          item.innerText = roomInfo["host_username"] + " ";
+          const form = item.appendChild(document.createElement("form"));
+          form.action = roomUrl(roomInfo["room_id"]);
+          form.target = "activity-inner-iframe";
+          form.style.display = "inline";
+          const hiddenInput = form.appendChild(document.createElement("input"));
+          hiddenInput.type = "hidden";
+          hiddenInput.name = "discord_activity_inner";
+          const submitInput = form.appendChild(document.createElement("input"));
+          submitInput.type = "submit";
+          submitInput.value = "join";
+        }
+      }
+      contentEl.replaceChildren(docFragment);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+
+updateInstanceRoomInfo();
+const INSTANCE_ROOM_INFO_INTERVAL = 3000;
+let instanceRoomInfoIntervalId = setInterval(updateInstanceRoomInfo, INSTANCE_ROOM_INFO_INTERVAL);
+
+const iframe = document.querySelector("iframe");
+// It doesn't matter if the iframe's initial loading finishes before this is added
+iframe.addEventListener("load", (_) => {
+  clearInterval(instanceRoomInfoIntervalId);
+
+  const locationURL = new URL(iframe.contentWindow.location);
+  const locationPath = locationURL.pathname + locationURL.search;
+  if (locationPath === HOME_URL) {
+    instanceRoomInfoIntervalId = setInterval(updateInstanceRoomInfo, INSTANCE_ROOM_INFO_INTERVAL);
+    iframe.className = "at-home";
+  } else {
+    iframe.className = "";
+  }
+});
+
+discordSdk
+  .ready()
+  .then(() => {
+    return discordSdk.commands.authorize({
+      client_id: DISCORD_CLIENT_ID,
+      response_type: "code",
+      state: "",
+      prompt: "none",
+      scope: ["identify"],
+    });
+  })
+  .then((result) => {
+    const { code } = result;
+
+    return fetch(ACCESS_TOKEN_URL, {
+      body: new URLSearchParams([["code", code]]),
+      headers: {
+        "content-type": "application/x-www-form-urlencoded",
+        "x-csrf-token": document.body.dataset.csrfToken,
+      },
+      method: "POST",
+    });
+  })
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error(`Getting access token failed with status code ${response.status}`);
+    }
+    // Note: the access token should now be in the session cookie as well
+    return response.text();
+  })
+  .then((accessToken) => {
+    return discordSdk.commands.authenticate({ access_token: accessToken });
+  })
+  .then((authenticationResult) => {
+    if (authenticationResult === null) {
+      throw new Error("Authenticating with Discord client failed");
+    }
+    iframe.style.display = null;
+  })
+  .catch((error) => {
+    console.error(error);
+    const CLOSE_ABNORMAL = 1006;
+    discordSdk.close(CLOSE_ABNORMAL, "Could not obtain authorizations required to run this app.");
+  });
diff --git a/priv/static/discord_activity.js b/priv/static/discord_activity.js
deleted file mode 100644
index 344c30d..0000000
--- a/priv/static/discord_activity.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { DiscordSDK } from "/static/discord-embedded-app-sdk/Discord.js";
-
-const discordSdk = new DiscordSDK(DISCORD_CLIENT_ID);
-
-discordSdk
-  .ready()
-  .then(() => {
-    console.log("Mediasync: Discord SDK ready.");
-    return discordSdk.commands.authorize({
-      client_id: DISCORD_CLIENT_ID,
-      response_type: "code",
-      state: "",
-      prompt: "none",
-      scope: ["identify"],
-    });
-  })
-  .then((result) => {
-    const { code } = result;
-    console.log(code);
-  });
diff --git a/priv/static/room/displayState.js b/priv/static/room/displayState.js
index 3a5e923..a2da229 100644
--- a/priv/static/room/displayState.js
+++ b/priv/static/room/displayState.js
@@ -9,7 +9,7 @@
       fetch(STATE_URL)
         .then((response) => {
           if (!response.ok) {
-            throw new Error(`Error: fetching state returned ${response.status}`);
+            throw new Error(`Fetching room state failed with status code ${response.status}`);
           }
           return response.json();
         })
@@ -17,7 +17,8 @@
           const viewersConnected = json.viewersConnected;
           stateElement.dataset.text = `total viewers: ${viewersConnected}`;
         })
-        .catch((_) => {
+        .catch((error) => {
+          console.error(error);
           stateElement.dataset.text = STATE_ELEMENT_INITIAL_TEXT;
         });
     }
author	Arjun Satarkar <me@arjunsatarkar.net>	2024-07-27 15:34:28 +0000
committer	Arjun Satarkar <me@arjunsatarkar.net>	2024-07-27 15:34:28 +0000
commit	407862a4e0e10ce2a035e4e5e76e26dde849aac1 (patch)
tree	db8fe1c95672d31621c6bd5fe545cab5497f18df /priv
parent	cd794243a5bba358d995e26ba024268e7d5d3f85 (diff)
download	mediasync-407862a4e0e10ce2a035e4e5e76e26dde849aac1.tar mediasync-407862a4e0e10ce2a035e4e5e76e26dde849aac1.tar.gz mediasync-407862a4e0e10ce2a035e4e5e76e26dde849aac1.zip