diff options
Diffstat (limited to 'priv/room.html.eex')
| -rw-r--r-- | priv/room.html.eex | 62 |
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> |