2022-10-17 07:52:55 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2023-04-14 09:36:04 +00:00
< title > Discord Embedder from AV1 server 1.0.16< / title >
2022-10-17 07:52:55 +00:00
< 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;
2022-10-17 14:13:20 +00:00
padding: 1rem 0.5rem;
2022-10-17 07:52:55 +00:00
font-family: sans-serif;
background: var(--bg);
color: var(--color);
}
input, button, textarea, select {
font: inherit;
}
h1 {
2022-10-17 14:13:20 +00:00
font-size: 1.88rem;
2022-10-17 07:52:55 +00:00
}
h2 {
2022-10-17 14:13:20 +00:00
font-size: 1.66rem;
2022-10-17 07:52:55 +00:00
}
h3 {
2022-10-17 14:13:20 +00:00
font-size: 1.44rem;
2022-10-17 07:52:55 +00:00
}
h4 {
2022-10-17 14:13:20 +00:00
font-size: 1.22rem;
2022-10-17 07:52:55 +00:00
}
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;
2023-04-14 09:31:18 +00:00
margin: 0.5rem 0;
2022-10-17 07:52:55 +00:00
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;
2022-10-17 14:13:20 +00:00
white-space: break-spaces;
word-break: break-all;
2022-10-17 07:52:55 +00:00
}
.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;
}
2022-10-17 14:13:20 +00:00
.center {
text-align: center;
}
video {
max-width: calc(100vw - 2rem);
max-height: calc(100vh - 140px);
}
2022-10-17 07:52:55 +00:00
.inside {
width: 100%;
max-width: var(--content-max-width);
display: flex;
flex-direction: column;
align-items: stretch;
margin: 0 auto;
}
2023-04-14 09:31:18 +00:00
h1 {
margin-bottom: 1rem;
}
.warning {
font-size: 0.9rem;
color: #ffe69c;
margin-bottom: 0.5rem;
}
.alert {
font-size: 0.9rem;
color: #f1aeb5;
margin-bottom: 0.5rem;
}
.info {
font-size: 0.9rem;
color: #a3cfbb;
margin-bottom: 0.5rem;
}
.info a, .info a:visited, .info a:hover {
color: inherit;
text-decoration: underline;
}
.row.optional {
background: #333;
margin: 1rem -0.5rem 0;
padding: 0rem 0.5rem 1rem;
}
.hidden {
display: none;
}
#previewVideo {
border: 1px solid white;
}
2022-10-17 07:52:55 +00:00
< / style >
< / head >
< body >
2022-10-17 14:13:20 +00:00
{{ if (videoLink & & imageLink) { }}
< p > Your link is:< / p >
< pre > {{=siteUrl}}< / pre >
< div class = "center" >
< video controls poster = "{{=imageLink}}" >
< source src = "{{=videoLink}}" >
< / video >
< / div >
{{ } }}
2022-10-17 07:52:55 +00:00
< form action = "/" method = "post" enctype = "multipart/form-data" class = "inside" >
< h1 > Create/generate embed url< / h1 >
2023-04-14 09:31:18 +00:00
< p class = "warning" > Please don't try to use < b > youtube.com< / b > links or file sharing sites that don't allow direct link to the video. They will show a download page and won't embed properly (for example < b > mediafire.com< / b > , < b > megaupload< / b > , < b > drive.google.com< / b > , etc.)< br > < b > Those will all not work< / b > . (You can test if embedding works by clicking play below in the video player after filling out the video link.)< / p >
< p class = "info" > Video upload sites that work are sites like < a href = "https://catbox.moe/" target = "_blank" > catbox.moe< / a > .< / p >
< p class = "alert" > Video files of .mkv < b > will not work< / b > ! Only files like *.mov, *.mp4 and *.webm will work.< / p >
2022-10-17 07:52:55 +00:00
{{ if (error) { }}< p class = "error" > {{=error}}< / p > {{ } }}
2023-04-14 09:31:18 +00:00
< label > Video link*< / label >
2022-10-17 14:13:20 +00:00
< input id = "inputVideo" type = "text" name = "video" value = "{{=inputVideo}}" >
2023-04-14 09:31:18 +00:00
< div class = "row optional" >
2022-10-17 07:52:55 +00:00
< div class = "row-item" >
2023-04-14 09:31:18 +00:00
< label > Optional: Image link (recommended, defaults to black cover)< / label >
2022-10-17 14:13:20 +00:00
< input id = "inputImage" type = "text" name = "image" value = "{{=inputImage}}" >
2022-10-17 07:52:55 +00:00
< / div >
< span class = "row-inbetween" > or< / span >
< div class = "row-item" >
2023-04-14 09:31:18 +00:00
< label > Optional: Upload image file (max 8MiB, recommended)< / label >
2022-10-17 07:52:55 +00:00
< input type = "file" name = "media" >
< / div >
< / div >
2022-10-17 14:13:20 +00:00
< input type = "submit" value = "Generate short url" >
2022-10-17 07:52:55 +00:00
< / form >
2022-10-17 14:13:20 +00:00
< p >
2023-04-14 09:31:18 +00:00
Preview:
2022-10-17 14:13:20 +00:00
< / p >
< pre id = "generateurl" >
2023-04-14 09:31:18 +00:00
{{=siteUrlBase}}?v=< video link>
2022-10-17 14:13:20 +00:00
< / pre >
2023-04-14 09:31:18 +00:00
< video class = "hidden" id = "previewVideo" controls poster = "" preload = "none" >
< source src = "" >
< / video >
2022-10-17 14:13:20 +00:00
< script type = "text/javascript" nonce = "{{=nonce}}" >
2023-04-14 09:31:18 +00:00
var defaultPoster = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAALQAQAAAADnBuD7AAAAh0lEQVR42u3BMQEAAADCIPuntsROYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACkDsTfAAFMFnd/AAAAAElFTkSuQmCC';
2022-10-17 14:13:20 +00:00
var baseSite = '{{=siteUrlBase}}';
var generateurl = document.getElementById('generateurl');
var inputVideo = document.getElementById('inputVideo');
var inputImage = document.getElementById('inputImage');
2023-04-14 09:31:18 +00:00
var previewVideo = document.getElementById('previewVideo');
2022-10-17 14:13:20 +00:00
var isExample = true;
2023-04-14 09:31:18 +00:00
previewVideo.poster = defaultPoster;
2022-10-17 14:13:20 +00:00
function checkChange() {
var currentIsExample = true;
2023-04-14 09:31:18 +00:00
if (inputVideo.value) {
2022-10-17 14:13:20 +00:00
currentIsExample = false;
}
if (isExample & & currentIsExample) { return; }
isExample = currentIsExample;
if (isExample) {
2023-04-14 09:31:18 +00:00
generateurl.innerText = baseSite + '?v=< video link > ';
previewVideo.classList.add('hidden')
2022-10-17 14:13:20 +00:00
} else {
2023-04-14 09:31:18 +00:00
generateurl.innerText = baseSite + '?v=' + encodeURIComponent(inputVideo.value) + (inputImage.value ? '& i=' + encodeURIComponent(inputImage.value) : '');
previewVideo.poster = inputImage.value || defaultPoster;
previewVideo.children[0].src = inputVideo.value;
previewVideo.classList.remove('hidden')
2022-10-17 14:13:20 +00:00
}
};
inputVideo.addEventListener('change', checkChange);
inputImage.addEventListener('change', checkChange);
inputVideo.addEventListener('keyup', checkChange);
inputImage.addEventListener('keyup', checkChange);
checkChange()
< / script >
2022-10-17 07:52:55 +00:00
< / body >
< / html >
