nfp/nfp_sites
1
0
Fork 0
Code Issues Pull requests Projects Releases 53 Wiki Activity Actions

discord_embed: Add text to guide which files won't work. Add preview player. Make poster optional
Some checks failed
continuous-integration/appveyor/branch AppVeyor build failed
Details

Browse source
This commit is contained in:
Jonatan Nilsson 2023-04-14 09:31:18 +00:00
parent c613aa126a
commit ba3161dd62
3 changed files with 68 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
discord_embed/api/post.mjs
View file

@ -80,7 +80,7 @@ Redirecting
/** POST: / */ /** POST: / */
async createNewLink(ctx) { async createNewLink(ctx) {
ctx.state.video = ctx.req.body.video ctx.state.video = ctx.req.body.video
ctx.state.image = ctx.req.body.image ctx.state.image = ctx.req.body.image || 'https://cdn.nfp.is/av1/empty.png'
let rateLimited = false let rateLimited = false
let redisKey = 'ratelimit_' + ctx.req.ip.replace(/:/g, '-') let redisKey = 'ratelimit_' + ctx.req.ip.replace(/:/g, '-')

2
discord_embed/package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "discord_embed", "name": "discord_embed",
"version": "1.0.14", "version": "1.0.15",
"port": 4120, "port": 4120,
"description": "AV1 discord server embed helper", "description": "AV1 discord server embed helper",
"main": "index.js", "main": "index.js",

78
discord_embed/public/index.html
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Discord Embedder from AV1 server 1.0.12</title> <title>Discord Embedder from AV1 server 1.0.15</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
{{ if (imageLink) { }} {{ if (imageLink) { }}
@ -97,8 +97,7 @@ input[type=text] {
label { label {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
margin-top: 1rem; margin: 0.5rem 0;
margin-bottom: 0.25rem;
display: block; display: block;
} }
@ -171,6 +170,46 @@ video {
margin: 0 auto; 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> </style>
</head> </head>
<body> <body>
@ -185,17 +224,20 @@ video {
{{ } }} {{ } }}
<form action="/" method="post" enctype="multipart/form-data" class="inside"> <form action="/" method="post" enctype="multipart/form-data" class="inside">
<h1>Create/generate embed url</h1> <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>.</p>
<p class="alert">Video files of .mkv <b>will not work</b>! Only files like *.mov, *.mp4 and *.webm will work.</p>
{{ if (error) { }}<p class="error">{{=error}}</p>{{ } }} {{ if (error) { }}<p class="error">{{=error}}</p>{{ } }}
<label>Video link</label> <label>Video link*</label>
<input id="inputVideo" type="text" name="video" value="{{=inputVideo}}"> <input id="inputVideo" type="text" name="video" value="{{=inputVideo}}">
<div class="row"> <div class="row optional">
<div class="row-item"> <div class="row-item">
<label>Image link (required for proper discord embed)</label> <label>Optional: Image link (recommended, defaults to black cover)</label>
<input id="inputImage" type="text" name="image" value="{{=inputImage}}"> <input id="inputImage" type="text" name="image" value="{{=inputImage}}">
</div> </div>
<span class="row-inbetween">or</span> <span class="row-inbetween">or</span>
<div class="row-item"> <div class="row-item">
<label>Upload image file (max 8MiB)</label> <label>Optional: Upload image file (max 8MiB, recommended)</label>
<input type="file" name="media"> <input type="file" name="media">
</div> </div>
</div> </div>
@ -204,29 +246,41 @@ video {
</form> </form>
<p> <p>
Alternatively, copy paste the following full url: Preview:
</p> </p>
<pre id="generateurl"> <pre id="generateurl">
{{=siteUrlBase}}?v=&lt;video link&gt;&amp;i=&lt;image link&gt; {{=siteUrlBase}}?v=&lt;video link&gt;
</pre> </pre>
<video class="hidden" id="previewVideo" controls poster="" preload="none">
<source src="">
</video>
<script type="text/javascript" nonce="{{=nonce}}"> <script type="text/javascript" nonce="{{=nonce}}">
var defaultPoster = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAALQAQAAAADnBuD7AAAAh0lEQVR42u3BMQEAAADCIPuntsROYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACkDsTfAAFMFnd/AAAAAElFTkSuQmCC';
var baseSite = '{{=siteUrlBase}}'; var baseSite = '{{=siteUrlBase}}';
var generateurl = document.getElementById('generateurl'); var generateurl = document.getElementById('generateurl');
var inputVideo = document.getElementById('inputVideo'); var inputVideo = document.getElementById('inputVideo');
var inputImage = document.getElementById('inputImage'); var inputImage = document.getElementById('inputImage');
var previewVideo = document.getElementById('previewVideo');
var isExample = true; var isExample = true;
previewVideo.poster = defaultPoster;
function checkChange() { function checkChange() {
var currentIsExample = true; var currentIsExample = true;
if (inputVideo.value && inputImage.value) { if (inputVideo.value) {
currentIsExample = false; currentIsExample = false;
} }
if (isExample && currentIsExample) { return; } if (isExample && currentIsExample) { return; }
isExample = currentIsExample; isExample = currentIsExample;
if (isExample) { if (isExample) {
generateurl.innerText = baseSite + '?v=<video link>&i=<image link>'; generateurl.innerText = baseSite + '?v=<video link>';
previewVideo.classList.add('hidden')
} else { } else {
generateurl.innerText = baseSite + '?v=' + encodeURIComponent(inputVideo.value) + '&i=' + encodeURIComponent(inputImage.value); 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')
} }
}; };