aboutsummaryrefslogtreecommitdiff
path: root/priv
diff options
context:
space:
mode:
Diffstat (limited to 'priv')
-rw-r--r--priv/discord_activity.html.eex49
1 files changed, 37 insertions, 12 deletions
diff --git a/priv/discord_activity.html.eex b/priv/discord_activity.html.eex
index 5278400..9dd0649 100644
--- a/priv/discord_activity.html.eex
+++ b/priv/discord_activity.html.eex
@@ -1,6 +1,7 @@
-<% home_url = "/.proxy/?#{Mediasync.Constants.query_param_discord_activity_inner()}" %>
+<% home_url="/.proxy/?#{Mediasync.Constants.query_param_discord_activity_inner()}" %>
<!DOCTYPE html>
<html lang="en">
+
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,23 +9,43 @@
<title>discord activity | mediasync</title>
<style>
:root {
- --instance-room-info-height: 20svh;
- --instance-room-info-remainder: calc(100svh - var(--instance-room-info-height));
+ /* Based on https://discord.com/developers/docs/activities/development-guides#mobile-safe-areas */
+ --sait: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));
+ --sair: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px));
+ --saib: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
+ --sail: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px));
+
+ --saiv: calc(var(--sait) + var(--saib));
+ --saih: calc(var(--sair) + var(--sail));
+
+ --instance-room-info-height: 20%;
+ --instance-room-info-remainder: calc(100% - var(--instance-room-info-height));
+
+ box-sizing: border-box;
+ height: calc(100% - var(--saiv));
+ width: calc(100% - var(--saih));
+ }
+
+ *,
+ *::before,
+ *::after {
+ box-sizing: inherit;
}
body {
- overflow: hidden;
background-color: black;
color: white;
font-family: monospace;
+ height: 100%;
+ margin: var(--sait) var(--sair) var(--saib) var(--sail);
+ overflow: hidden;
+ width: 100%;
}
+
iframe {
border: none;
- }
- html, body, iframe {
- margin: 0;
- width: 100svw;
- height: 100svh;
+ height: 100%;
+ width: 100%;
}
iframe.at-home {
@@ -32,17 +53,20 @@
}
div#instance-room-info {
+ border-bottom: 1px solid white;
display: none;
+ height: var(--instance-room-info-height);
overflow: auto;
+ padding: 8px 8px 0px 8px;
+ width: 100%;
}
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 data-csrf-token="<%= Plug.CSRFProtection.get_csrf_token() %>">
<div id="instance-room-info">
<span style="font-weight: bold;">currently hosting:</span>
@@ -55,10 +79,11 @@
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() %>`;
+ 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/discordActivity.js" type="module"></script>
</body>
+
</html>