Last active
November 14, 2023 02:02
-
-
Save kig/38958f6b900896973c6a244ee36d93ca to your computer and use it in GitHub Desktop.
about:blank file viewer. Copy-paste this into the console, then drop files into the page to view them.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let d=document.body,n='\n',f=d.ondragover=e=>e.preventDefault();d.style.whiteSpace='pre';d.ondrop=e=>[f(e)].map.call(e.dataTransfer.files,f=>{e=new Audio(URL.createObjectURL(f));e.controls=e.loop=1;d.append(f.name+n,e,n+n)}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// file_viewer.js | |
// This is a simple file viewer that allows you to drag and drop files onto the page and view them. | |
Object.assign(document.body.style, { | |
fontFamily: 'sans-serif', | |
display: 'grid', | |
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', | |
gridGap: '1em' | |
}); | |
const fullScreenStyle = { | |
position: 'fixed', | |
objectFit: 'contain', | |
background: '#fff', | |
top: '0', left: '0', width: '100%', height: '100%', zIndex: '1000', | |
}; | |
const regularStyle = {position: 'static', width: 'auto', height: 'auto'}; | |
const fileView = function(name, element) { | |
const el = document.createElement('div'); | |
const nameEl = document.createElement('div'); | |
nameEl.innerText = name; | |
el.append(nameEl, element); | |
return el; | |
} | |
const stopOthers = function() { | |
Array.from(document.querySelectorAll('video, audio')).forEach(el => { | |
if (el !== this) el.pause(); | |
}); | |
}; | |
const handleNextPlay = function() { | |
const els = Array.from(document.querySelectorAll('video, audio')); | |
const next = els[(els.indexOf(this) + 1) % els.length]; | |
next.currentTime = 0; | |
if (document.fullscreenElement === this) { | |
if (!this.origSrc) this.origSrc = this.src; | |
// When we leave fullscreen, we need to reset the src to the origSrc. | |
this.onfullscreenchange = () => { | |
if (document.fullscreenElement !== this) this.src = this.origSrc; | |
}; | |
this.src = next.src; | |
this.play(); | |
} else { | |
next.play(); | |
} | |
}; | |
document.body.addEventListener("dragover", (ev) => ev.preventDefault()); | |
document.body.addEventListener('drop', ev => { | |
ev.preventDefault(); | |
Array.from(ev.dataTransfer.files).forEach(f => { | |
let type = f.type.replace(/^image/, 'img').split("/")[0]; | |
if (!/^(video|audio|img)/.test(type)) type = 'iframe'; | |
let el = document.createElement(type); | |
el.src = URL.createObjectURL(f); | |
el.playsInline = true; | |
el.controls = true; | |
el.onplay = stopOthers; | |
el.onended = handleNextPlay; | |
el.style.maxWidth = '100%'; | |
if (type === 'iframe') { | |
const iframe = el; | |
Object.assign(iframe.style, { | |
width: '100%', | |
background: '#fff', | |
border: '1px solid #eee', | |
}); | |
const container = document.createElement('div'); | |
// Add a fullscreen button to the iframe. | |
const fs = document.createElement('button'); | |
fs.innerText = 'Toggle Fullscreen'; | |
fs.onclick = () => { | |
if (container.style.position === 'fixed') { | |
Object.assign(container.style, regularStyle); | |
Object.assign(iframe.style, {width: '100%', height: 'auto'}); | |
return; | |
} | |
Object.assign(container.style, fullScreenStyle); | |
Object.assign(iframe.style, {width: '100%', height: 'calc(100% - 2em)'}); | |
} | |
container.append(iframe, fs); | |
el = container; | |
} else if (type === 'img') { | |
el.onclick = () => { | |
if (el.style.position === 'fixed') { | |
Object.assign(el.style, regularStyle); | |
return; | |
} | |
Object.assign(el.style, fullScreenStyle); | |
}; | |
} | |
document.body.append(fileView(f.name, el)); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let d=document,b=d.body,n='\n',c='create',f=b.ondragover=e=>e.preventDefault();b.style.whiteSpace='pre';b.ondrop=e=>[f(e)].map.call(e.dataTransfer.files,f=>{e=d[c+'Element'](f.type.split("/")[0].replace('image','img'));e.src=URL[c+'ObjectURL'](f);e.style.width='25%';e.controls=e.loop=1;b.append(f.name+n,e,n+n)}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment