145 lines
7.1 KiB
HTML
145 lines
7.1 KiB
HTML
<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>
|