1 files changed, 33 insertions, 29 deletions
diff --git a/priv/room.html.eex b/priv/room.html.eex
index 012ec0d..c3ae92e 100644
--- a/priv/room.html.eex
+++ b/priv/room.html.eex
@@ -2,15 +2,16 @@
 <%
 import Mediasync.Constants
 
-{video_info, websocket_path, state_url, home_button_url} = if in_discord_activity? do
+{video_info, websocket_path, state_url, home_button_url, show_snap_button?} = 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()}"
+    "/.proxy/?#{query_param_discord_activity_inner()}",
+    true
   }
 else
-  {video_info, "/room/#{room_id}/websocket", "/room/#{room_id}/state.json", nil}
+  {video_info, "/room/#{room_id}/websocket", "/room/#{room_id}/state.json", nil, false}
 end
 %>
 <html lang="en">
@@ -27,33 +28,31 @@ end
             margin: 0;
         }
 
-        @font-face {
-            font-family: "FontAwesomeSolid";
-            src: url("/static/fontawesome-free-6.6.0-web/webfonts/fa-solid-900.woff2") format("woff2");
+        div#outerContainer {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            height: 100svh;
+            width: 100svw;
         }
 
-        .icon-home, .icon-users, .icon-left, .icon-right, .icon-left-right {
-            font-family: "FontAwesomeSolid";
+        div#playerContainer {
+            /* Default values; JS will adjust depending on actual aspect ratio */
+            height: 100svh;
+            width: 100svw;
+            /* We should be in the (horizontal) center by default */
+            margin: 0 auto;
         }
 
-        .icon-home::before {
-            content: "\f015";
+        div#playerContainer:has(#snap-button.icon-right) {
+            /* We should be on the left */
+            margin-left: 0;
         }
 
-        .icon-users::before {
-            content: "\f0c0";
-        }
-
-        .icon-left::before {
-            content: "\f30a";
-        }
-
-        .icon-right::before {
-            content: "\f30b";
-        }
-
-        .icon-left-right::before {
-            content: "\f337";
+        div#playerContainer:has(#snap-button.icon-left-right) {
+            /* We should be on the right */
+            margin-left: auto;
+            margin-right: 0;
         }
 
         #state-button-active::after {
@@ -67,14 +66,18 @@ end
             top: 0;
         }
     </style>
+    <!-- Will be modified by JS -->
+    <style id="extra-styles"></style>
 </head>
 
 <body>
-    <div id="playerContainer">
-        <video-js id="player">
-            <source src="<%= Plug.HTML.html_escape(video_info.url) %>"
-                type="<%= Plug.HTML.html_escape(video_info.content_type) %>">
-        </video-js>
+    <div id="outerContainer">
+        <div id="playerContainer">
+            <video-js id="player">
+                <source src="<%= Plug.HTML.html_escape(video_info.url) %>"
+                    type="<%= Plug.HTML.html_escape(video_info.content_type) %>">
+            </video-js>
+        </div>
     </div>
     <script src="/static/video.js/video.min.js"></script>
     <script>
@@ -82,6 +85,7 @@ end
         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 %>";
+        const SHOW_SNAP_BUTTON = <%= show_snap_button? %>;
     </script>
     <script src="/static/room/main.js"></script>
     <script src="/static/room/displayState.js"></script>