From 78808161c6b8726be5e18427a5da4328ab1fa26f Mon Sep 17 00:00:00 2001
From: Arjun Satarkar <me@arjunsatarkar.net>
Date: Mon, 29 Jul 2024 01:10:14 +0530
Subject: Refactor

---
 priv/discord_activity.html.eex | 10 ++++++----
 priv/home.html.eex             | 10 +++++-----
 priv/room.html.eex             | 32 +++++++++++++++++++++++++++++---
 priv/static/room/main.js       |  4 ++--
 4 files changed, 42 insertions(+), 14 deletions(-)

(limited to 'priv')
diff --git a/priv/discord_activity.html.eex b/priv/discord_activity.html.eex
index 5cb8a68..cfdba73 100644
--- a/priv/discord_activity.html.eex
+++ b/priv/discord_activity.html.eex
@@ -1,5 +1,8 @@
-<% home_url="/.proxy/?#{Mediasync.Constants.query_param_discord_activity_inner()}" %>
 <!DOCTYPE html>
+<%
+import Mediasync.Constants
+home_url="/.proxy/?#{query_param_discord_activity_inner()}"
+%>
 <html lang="en">
 
 <head>
@@ -72,15 +75,14 @@
         <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 QUERY_PARAM_DISCORD_ACTIVITY_INNER = "<%= Mediasync.Constants.query_param_discord_activity_inner() %>";
+        const QUERY_PARAM_DISCORD_ACTIVITY_INNER = "<%= query_param_discord_activity_inner() %>";
         const DISCORD_CLIENT_ID = "<%= Application.fetch_env!(:mediasync, :discord_client_id) %>";
         const ACCESS_TOKEN_URL = `/.proxy/discord_activity/access_token?${QUERY_PARAM_DISCORD_ACTIVITY_INNER}`;
         const HOME_URL = "<%= home_url %>";
         const roomsForInstanceUrl = (instanceId) => {
-            return `/.proxy/discord_activity/rooms_for_instance?${QUERY_PARAM_DISCORD_ACTIVITY_INNER}&instance_id=${instanceId}`;
+            return `/.proxy/discord_activity/rooms_for_instance?${QUERY_PARAM_DISCORD_ACTIVITY_INNER}&<%= query_param_instance_id() %>=${instanceId}`;
         };
         const roomUrl = (roomId) => {
             return `/.proxy/room/${roomId}?${QUERY_PARAM_DISCORD_ACTIVITY_INNER}`;
diff --git a/priv/home.html.eex b/priv/home.html.eex
index 4b6accd..87b0d5d 100644
--- a/priv/home.html.eex
+++ b/priv/home.html.eex
@@ -1,11 +1,11 @@
+<!DOCTYPE html>
 <%
-{form_action_base, form_action_suffix} = case mode do
-  :discord_activity -> {"/.proxy/", "?#{Mediasync.Constants.query_param_discord_activity_inner()}"}
-  :normal -> {"/", ""}
-  _ -> raise ArgumentError
+import Mediasync.Constants
+{form_action_base, form_action_suffix} = case in_discord_activity? do
+  true -> {"/.proxy/", "?#{query_param_discord_activity_inner()}"}
+  false -> {"/", ""}
 end
 %>
-<!DOCTYPE html>
 <html lang="en">
 
 <head>
diff --git a/priv/room.html.eex b/priv/room.html.eex
index 9f2ed0f..012ec0d 100644
--- a/priv/room.html.eex
+++ b/priv/room.html.eex
@@ -1,4 +1,18 @@
 <!DOCTYPE html>
+<%
+import Mediasync.Constants
+
+{video_info, websocket_path, state_url, home_button_url} = if in_discord_activity? do
+  {
+    %{video_info | url: "/.proxy/room/#{room_id}/video?#{query_param_discord_activity_inner()}"},
+    "/.proxy/room/#{room_id}/websocket?#{query_param_discord_activity_inner()}",
+    "/.proxy/room/#{room_id}/state.json?#{query_param_discord_activity_inner()}",
+    "/.proxy/?#{query_param_discord_activity_inner()}"
+  }
+else
+  {video_info, "/room/#{room_id}/websocket", "/room/#{room_id}/state.json", nil}
+end
+%>
 <html lang="en">
 
 <head>
@@ -18,7 +32,7 @@
             src: url("/static/fontawesome-free-6.6.0-web/webfonts/fa-solid-900.woff2") format("woff2");
         }
 
-        .icon-home, .icon-users {
+        .icon-home, .icon-users, .icon-left, .icon-right, .icon-left-right {
             font-family: "FontAwesomeSolid";
         }
 
@@ -27,7 +41,19 @@
         }
 
         .icon-users::before {
-            content: "\f0c0"
+            content: "\f0c0";
+        }
+
+        .icon-left::before {
+            content: "\f30a";
+        }
+
+        .icon-right::before {
+            content: "\f30b";
+        }
+
+        .icon-left-right::before {
+            content: "\f337";
         }
 
         #state-button-active::after {
@@ -53,7 +79,7 @@
     <script src="/static/video.js/video.min.js"></script>
     <script>
         const WEBSOCKET_URL = location.origin.replace(/^http/, "ws") + "<%= websocket_path %>";
-        const HOME_URL = <%= if home_url, do: ~s("#{home_url}"), else: "null" %>;
+        const HOME_BUTTON_URL = <%= if home_button_url, do: ~s("#{home_button_url}"), else: "null" %>;
         const STATE_ELEMENT_INITIAL_TEXT = "loading...";
         const STATE_URL = "<%= state_url %>";
     </script>
diff --git a/priv/static/room/main.js b/priv/static/room/main.js
index 7e0ade5..9a0b2ec 100644
--- a/priv/static/room/main.js
+++ b/priv/static/room/main.js
@@ -40,10 +40,10 @@
     {
       let customIconPosition = 1;
       const Button = videojs.getComponent("Button");
-      if (HOME_URL !== null) {
+      if (HOME_BUTTON_URL !== null) {
         const homeButton = new Button(player, {
           clickHandler: (_) => {
-            location = HOME_URL;
+            location = HOME_BUTTON_URL;
           },
         });
         homeButton.addClass("icon-home");
-- 
cgit v1.2.3-57-g22cb

