Jonatan Nilsson
aa324cf0f1
Some checks failed
continuous-integration/appveyor/branch AppVeyor build failed
295 lines
7.3 KiB
HTML
295 lines
7.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Discord Embedder from AV1 server 1.0.18</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: 0.5rem 0;
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
</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>
|
|
<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> and other sites that allow direct link to video file.</p>
|
|
<p class="alert"><b>HEVC/h.265 files will not embed or work</b>!</p>
|
|
<p class="alert">Video files of .mkv <b>will also not work</b>! Only files like *.mov, *.mp4 and *.webm will work.</p>
|
|
{{ if (error) { }}<p class="error">{{=error}}</p>{{ } }}
|
|
<label>Video link*</label>
|
|
<input id="inputVideo" type="text" name="video" value="{{=inputVideo}}">
|
|
<div class="row optional">
|
|
<div class="row-item">
|
|
<label>Optional: Image link (recommended, defaults to black cover)</label>
|
|
<input id="inputImage" type="text" name="image" value="{{=inputImage}}">
|
|
</div>
|
|
<span class="row-inbetween">or</span>
|
|
<div class="row-item">
|
|
<label>Optional: Upload image file (max 8MiB, recommended)</label>
|
|
<input type="file" name="media">
|
|
</div>
|
|
</div>
|
|
|
|
<input type="submit" value="Generate short url">
|
|
</form>
|
|
|
|
<p>
|
|
Preview:
|
|
</p>
|
|
<pre id="generateurl">
|
|
{{=siteUrlBase}}?v=<video link>
|
|
</pre>
|
|
|
|
<video class="hidden" id="previewVideo" controls poster="" preload="none">
|
|
<source src="">
|
|
</video>
|
|
|
|
<script type="text/javascript" nonce="{{=nonce}}">
|
|
var defaultPoster = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAALQAQAAAADnBuD7AAAAh0lEQVR42u3BMQEAAADCIPuntsROYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACkDsTfAAFMFnd/AAAAAElFTkSuQmCC';
|
|
var baseSite = '{{=siteUrlBase}}';
|
|
var generateurl = document.getElementById('generateurl');
|
|
var inputVideo = document.getElementById('inputVideo');
|
|
var inputImage = document.getElementById('inputImage');
|
|
var previewVideo = document.getElementById('previewVideo');
|
|
var isExample = true;
|
|
previewVideo.poster = defaultPoster;
|
|
|
|
function checkChange() {
|
|
var currentIsExample = true;
|
|
if (inputVideo.value) {
|
|
currentIsExample = false;
|
|
}
|
|
if (isExample && currentIsExample) { return; }
|
|
isExample = currentIsExample;
|
|
if (isExample) {
|
|
generateurl.innerText = baseSite + '?v=<video link>';
|
|
previewVideo.classList.add('hidden')
|
|
} else {
|
|
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')
|
|
}
|
|
};
|
|
|
|
inputVideo.addEventListener('change', checkChange);
|
|
inputImage.addEventListener('change', checkChange);
|
|
inputVideo.addEventListener('keyup', checkChange);
|
|
inputImage.addEventListener('keyup', checkChange);
|
|
checkChange()
|
|
</script>
|
|
</body>
|
|
</html>
|