You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
8.5 KiB
170 lines
8.5 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="referrer" content="no-referrer"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<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> |
|
<!-- |
|
MIT License |
|
|
|
Copyright (c) 2021 blank X |
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
|
of this software and associated documentation files (the "Software"), to deal |
|
in the Software without restriction, including without limitation the rights |
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|
copies of the Software, and to permit persons to whom the Software is |
|
furnished to do so, subject to the following conditions: |
|
|
|
The above copyright notice and this permission notice shall be included in all |
|
copies or substantial portions of the Software. |
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
|
SOFTWARE. |
|
--> |
|
<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>
|
|
|