unquenchedaluminum/index.html

145 lines
7.1 KiB
HTML
Raw Normal View History

2021-06-05 11:16:47 +00:00
<html>
<head>
<meta name="referrer" content="no-referrer">
<title>unquenchedaluminum</title>
<style>
body {
background-color: black;
color: white;
text-align: center;
}
div {
border: 1px solid #fcc;
background: #fee;
padding: 0.5em 1em 0.5em 1em;
color: black;
}
div#header {
border: 1px solid #008;
background: #eef;
}
img, video {
max-width: 100%;
height: auto;
object-fit: contain;
}
</style>
</head>
<body>
<div id="header">
<a href="https://gitlab.com/blankX/unquenchedaluminum" style="text-decoration: none;">unquenchedaluminum</a>
<br>
An alternative Imgur client
</div>
<noscript><div><b>Javascript is required since data from Imgur is loaded client-side</b></div></noscript>
<p id="instructions">Set the <code>url</code> query string or set the fragment to an Imgur link</p>
<div id="error" style="display: none;"></div>
<script>
function showError(e) {
console.error(e);
let pre = document.createElement('pre');
pre.style.textAlign = 'left';
let text = e;
if (e instanceof Error && 'stack' in e) {
text += '\n' + e.stack;
}
pre.append(text);
let b = document.createElement('b');
b.append(pre);
let div = document.getElementById('error');
div.append(b);
div.style.display = null;
}
try {
let hash = window.location.hash.replace(/^#/, '');
if (hash.length === 0) {
hash = (new URLSearchParams(window.location.search)).get('url');
}
if (hash !== null && hash.length !== 0) {
hash = new URL(hash, 'https://imgur.com/');
let url = hash.pathname.replace(/^\/|\/+$/g, '').split('/');
let url_part = null;
if (url.length === 1) {
url_part = 'media/' + url[0];
} else if (url.length === 2 && ['a', 'gallery'].includes(url[0])) {
url_part = 'albums/' + url[1];
}
if (url_part !== null) {
let instructions = document.getElementById('instructions');
instructions.innerText = 'Loading...';
fetch('https://api.imgur.com/post/v1/' + url_part + '?client_id=546c25a59c58ad7&include=media', {credentials: 'omit', referrerPolicy: 'no-referrer'})
.then(async function(resp) {
resp = await resp.json();
if ('errors' in resp) {
if (resp.errors.length === 1 && resp.errors[0].code === '404') {
let b = document.createElement('b');
let text = '404: ' + resp.errors[0].detail;
b.innerText = text;
let div = document.getElementById('error');
div.append(b);
div.style.display = null;
document.title = text;
return;
}
throw JSON.stringify(resp, null, ' ');
}
if (resp.is_mature) {
let b = document.createElement('b');
b.append('Marked as NSFW');
let div = document.createElement('div');
div.append(b);
document.body.append(div);
}
if (resp.title.length !== 0) {
let h1 = document.createElement('h1');
h1.append(resp.title);
document.body.append(h1);
document.title = resp.title;
}
for (var i = 0; i < resp.media.length; i++) {
let media = resp.media[i];
switch (media.type) {
case 'image':
let img = document.createElement('img');
img.height = media.height;
img.width = media.width;
img.src = media.url;
document.body.append(img);
break;
case 'video':
let video = document.createElement('video');
video.controls = true;
video.height = media.height;
video.width = media.width;
video.src = media.url;
document.body.append(video);
break;
default:
let a = document.createElement('a');
a.href = media.url;
a.append(media.url);
let div = document.createElement('div');
div.append('Unknown media type ' + media.type + ', URL is ', a);
document.body.append(div);
}
if (media.metadata.description.length !== 0) {
let p = document.createElement('p');
p.append(media.metadata.description);
document.body.append(p);
}
}
})
.catch(showError)
.finally(function() {
instructions.style.display = 'none';
document.getElementById('header').style.display = 'none';
});
}
}
} catch (e) {
showError(e);
}
</script>
</body>
</html>