nfp_sites/discord_embed/public/index.html

241 lines
5.3 KiB
HTML
Raw Normal View History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Discord Embedder from AV1 server</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{ if (imageLink) { }}
<meta property="og:image" content="{{=imageLink}}">
<meta property="og:type" content="video.other">
<meta property="og:video:url" content="{{=videoLink}}">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
{{ } else { }}
<meta property="og:type" content="website" />
<meta property="og:url" content="{{=siteUrl}}" />
<meta property="og:image" content="/heart.png" />
<meta property="og:description" content="Simple site to help with embedding of AV1 videos and large/external videos into Discord." />
<meta property="og:title" content="Discord Embedder Helper Website" />
{{ } }}
<link rel="icon" type="image/png" href="/favicon.png">
<style>
:root {
--content-max-width: 1280px;
--bg: black;
--bg-content-alt: #333;
--color: #d7dadc;
--link: #bb4d00;
--button-border: 1px solid #f57c00;
--button-bg: #ffad42;
--button-fg: #000;
--error: red;
}
/* Box sizing rules */
*, *::before, *::after { box-sizing: border-box;
}
/* Remove default margin */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
margin: 0;
}
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
font-size: 16px;
padding: 1rem 0.5rem;
font-family: sans-serif;
background: var(--bg);
color: var(--color);
}
input, button, textarea, select {
font: inherit;
}
h1 {
font-size: 1.88rem;
}
h2 {
font-size: 1.66rem;
}
h3 {
font-size: 1.44rem;
}
h4 {
font-size: 1.22rem;
}
h5 {
font-size: 1.0rem;
}
a, a:visited, button {
text-decoration: none;
border: none;
padding: 0;
margin: 0;
font-weight: bold;
cursor: pointer;
}
input[type=text] {
border: 1px solid var(--color);
background: var(--bg);
color: var(--color);
border-radius: 0;
padding: 0.25rem;
line-height: 1rem;
outline: none;
width: 100%;
}
label {
font-size: 0.75rem;
font-weight: 500;
margin-top: 1rem;
margin-bottom: 0.25rem;
display: block;
}
input[type=text]:hover,
input[type=text]:active,
input[type=text]:focus {
border-color: var(--link);
}
input[type=text]:focus {
outline: 1px solid var(--link);
}
button,
input[type=submit] {
border: var(--button-border);
background: var(--button-bg);
color: var(--button-fg);
padding: 0.25rem 1rem;
margin: 1rem 0 2rem;
}
pre {
background: var(--bg-content-alt);
padding: 0.5rem;
white-space: break-spaces;
word-break: break-all;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-item {
flex: 2 0 200px;
align-self: flex-end;
}
.row-item input {
width: 100%;
}
.row-inbetween {
align-self: flex-end;
padding: 0.25rem 1rem;
}
.error {
color: var(--error);
font-size: 0.8rem;
padding: 1rem 1rem 0;
}
.center {
text-align: center;
}
video {
max-width: calc(100vw - 2rem);
max-height: calc(100vh - 140px);
}
.inside {
width: 100%;
max-width: var(--content-max-width);
display: flex;
flex-direction: column;
align-items: stretch;
margin: 0 auto;
}
</style>
</head>
<body>
{{ if (videoLink && imageLink) { }}
<p>Your link is:</p>
<pre>{{=siteUrl}}</pre>
<div class="center">
<video controls poster="{{=imageLink}}">
<source src="{{=videoLink}}">
</video>
</div>
{{ } }}
<form action="/" method="post" enctype="multipart/form-data" class="inside">
<h1>Create/generate embed url</h1>
{{ if (error) { }}<p class="error">{{=error}}</p>{{ } }}
<label>Video link</label>
<input id="inputVideo" type="text" name="video" value="{{=inputVideo}}">
<div class="row">
<div class="row-item">
<label>Image link (required for proper discord embed)</label>
<input id="inputImage" type="text" name="image" value="{{=inputImage}}">
</div>
<span class="row-inbetween">or</span>
<div class="row-item">
<label>Upload image file (max 8MiB)</label>
<input type="file" name="media">
</div>
</div>
<input type="submit" value="Generate short url">
</form>
<p>
Alternatively, copy paste the following full url:
</p>
<pre id="generateurl">
{{=siteUrlBase}}?v=&lt;video link&gt;&amp;i=&lt;image link&gt;
</pre>
<script type="text/javascript" nonce="{{=nonce}}">
var baseSite = '{{=siteUrlBase}}';
var generateurl = document.getElementById('generateurl');
var inputVideo = document.getElementById('inputVideo');
var inputImage = document.getElementById('inputImage');
var isExample = true;
function checkChange() {
var currentIsExample = true;
if (inputVideo.value && inputImage.value) {
currentIsExample = false;
}
if (isExample && currentIsExample) { return; }
isExample = currentIsExample;
if (isExample) {
generateurl.innerText = baseSite + '?v=<video link>&i=<image link>';
} else {
generateurl.innerText = baseSite + '?v=' + encodeURI(inputVideo.value) + '&i=' + encodeURI(inputImage.value);
}
};
inputVideo.addEventListener('change', checkChange);
inputImage.addEventListener('change', checkChange);
inputVideo.addEventListener('keyup', checkChange);
inputImage.addEventListener('keyup', checkChange);
checkChange()
</script>
</body>
</html>