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.
428 lines
11 KiB
428 lines
11 KiB
<script lang="ts">
|
|
import { fileTypeFromBuffer, FileTypeResult } from "file-type";
|
|
import { settings, appState } from "../stores";
|
|
import { beforeUpdate, tick } from "svelte";
|
|
import type { EmbeddedFile } from "../main";
|
|
import { createEventDispatcher } from "svelte";
|
|
import { Buffer } from "buffer";
|
|
import { getHeaders, Platform } from "../platform";
|
|
import { peeTarget } from "../utils";
|
|
|
|
export const dispatch = createEventDispatcher();
|
|
|
|
export let file: EmbeddedFile;
|
|
|
|
let isVideo = false;
|
|
let isImage = false;
|
|
let isAudio = false;
|
|
let isText = false;
|
|
let url = "";
|
|
let settled = false;
|
|
let contracted = true;
|
|
let hovering = false;
|
|
let ftype = "";
|
|
|
|
let place: HTMLDivElement;
|
|
let hoverElem: HTMLDivElement;
|
|
let imgElem: HTMLImageElement;
|
|
let videoElem: HTMLVideoElement;
|
|
let hoverVideo: HTMLVideoElement;
|
|
let dims: [number, number] = [0, 0];
|
|
let furl: string | undefined = undefined;
|
|
|
|
let visible = false;
|
|
export const isNotChrome = !navigator.userAgent.includes("Chrome/");
|
|
|
|
export let id = "";
|
|
document.addEventListener("reveal", (e: any) => {
|
|
if (e.detail.id == id) visible = !visible;
|
|
});
|
|
|
|
export function isContracted() {
|
|
return contracted;
|
|
}
|
|
|
|
let content: Blob;
|
|
beforeUpdate(async () => {
|
|
if (settled) return;
|
|
settled = true;
|
|
|
|
const thumb = file.thumbnail || file.data;
|
|
let type: FileTypeResult | undefined;
|
|
if (typeof thumb != "string") {
|
|
let buff = thumb instanceof Uint8Array ? thumb : await thumb();
|
|
type = await fileTypeFromBuffer(buff);
|
|
if (
|
|
!type &&
|
|
file.filename.endsWith(".txt") &&
|
|
file.filename.startsWith("message")
|
|
) {
|
|
type = { ext: "txt", mime: "text/plain" } as any;
|
|
}
|
|
content = new Blob([buff], { type: type?.mime });
|
|
url = URL.createObjectURL(content);
|
|
if (!type) return;
|
|
} else {
|
|
let head = await getHeaders(thumb);
|
|
url = thumb;
|
|
type = {
|
|
ext: "" as any,
|
|
mime: head["content-type"].split(";")[0].trim() as any,
|
|
};
|
|
}
|
|
ftype = type.mime;
|
|
isVideo = type.mime.startsWith("video/");
|
|
isAudio = type.mime.startsWith("audio/");
|
|
isImage = type.mime.startsWith("image/");
|
|
isText = type.mime.startsWith("text/plain");
|
|
dispatch("fileinfo", { type });
|
|
|
|
if (isImage) {
|
|
contracted = !$settings.xpi;
|
|
}
|
|
if (isVideo) {
|
|
contracted = !$settings.xpv && !$appState.isCatalog;
|
|
}
|
|
if ($appState.isCatalog) contracted = true;
|
|
if ($settings.pre) {
|
|
unzip(); // not awaiting on purpose
|
|
}
|
|
|
|
if ($settings.prev) {
|
|
let obs = new IntersectionObserver(
|
|
(entries, obs) => {
|
|
for (const item of entries) {
|
|
if (!item.isIntersecting) continue;
|
|
unzip();
|
|
obs.unobserve(place);
|
|
}
|
|
},
|
|
{ root: null, rootMargin: "0px", threshold: 0.01 }
|
|
);
|
|
obs.observe(place);
|
|
}
|
|
});
|
|
|
|
let unzipping = false;
|
|
let progress = [0, 0];
|
|
async function unzip() {
|
|
if (!file.thumbnail) return;
|
|
if (unzipping) return;
|
|
|
|
let type: FileTypeResult | undefined;
|
|
if (typeof file.data != "string") {
|
|
unzipping = true;
|
|
let lisn = new peeTarget();
|
|
lisn.addEventListener("progress", (e: any) => {
|
|
progress = e.detail;
|
|
});
|
|
let full = file.data instanceof Uint8Array ? file.data : await file.data(lisn);
|
|
type = await fileTypeFromBuffer(full);
|
|
if (
|
|
!type &&
|
|
file.filename.endsWith(".txt") &&
|
|
file.filename.startsWith("message")
|
|
) {
|
|
type = { ext: "txt", mime: "text/plain" } as any;
|
|
}
|
|
content = new Blob([full], { type: type?.mime });
|
|
furl = URL.createObjectURL(content);
|
|
} else {
|
|
url = file.data;
|
|
furl = file.data;
|
|
let head = await getHeaders(file.data);
|
|
type = {
|
|
ext: "" as any,
|
|
mime: head["content-type"].split(";")[0].trim() as any,
|
|
};
|
|
}
|
|
if (!type) return;
|
|
ftype = type.mime;
|
|
isVideo = type.mime.startsWith("video/");
|
|
isAudio = type.mime.startsWith("audio/");
|
|
isImage = type.mime.startsWith("image/");
|
|
isText = type.mime.startsWith("text/plain");
|
|
unzipping = false;
|
|
|
|
dispatch("fileinfo", { type });
|
|
|
|
if (hovering) {
|
|
// reset hovering to recompute proper image coordinates
|
|
setTimeout(async () => {
|
|
do {
|
|
hoverUpdate();
|
|
await new Promise((_) => setTimeout(_, 20));
|
|
} while (dims[0] == 0 && dims[1] == 0);
|
|
}, 20);
|
|
}
|
|
}
|
|
|
|
function hasAudio(video: any) {
|
|
return (
|
|
video.mozHasAudio ||
|
|
!!video.webkitAudioDecodedByteCount ||
|
|
!!(video.audioTracks && video.audioTracks.length)
|
|
);
|
|
}
|
|
|
|
export let inhibitExpand: boolean = false;
|
|
|
|
export async function bepis(ev: MouseEvent) {
|
|
dispatch("click", ev);
|
|
if (inhibitExpand) return;
|
|
if ($appState.isCatalog) return;
|
|
|
|
if (ev.button == 0) {
|
|
contracted = !contracted;
|
|
if (hovering) hoverStop();
|
|
if (contracted && isVideo) {
|
|
videoElem.controls = false;
|
|
videoElem.pause();
|
|
}
|
|
if (!contracted && isVideo) {
|
|
videoElem.controls = true;
|
|
// has to be delayed
|
|
setTimeout(async () => {
|
|
videoElem.currentTime = hoverVideo.currentTime || 0;
|
|
await videoElem.play();
|
|
}, 10);
|
|
}
|
|
if (file.thumbnail && !furl) {
|
|
// don't know how you managed to click before hovering but oh well
|
|
unzip();
|
|
}
|
|
ev.preventDefault();
|
|
} else if (ev.button == 1) {
|
|
// middle click
|
|
let src = furl || url;
|
|
if (ev.altKey && file.source) {
|
|
src = file.source;
|
|
}
|
|
if (ev.shiftKey && file.page) {
|
|
src = file.page.url;
|
|
}
|
|
ev.preventDefault();
|
|
if (isNotChrome) {
|
|
window.open(src, "_blank");
|
|
} else await Platform.openInTab(src, { active: false, insert: true });
|
|
}
|
|
}
|
|
|
|
const getViewport = () =>
|
|
(typeof visualViewport != "undefined"
|
|
? () => [visualViewport.width, visualViewport.height]
|
|
: () => [
|
|
document.documentElement.clientWidth,
|
|
document.documentElement.clientHeight,
|
|
])();
|
|
|
|
function recompute() {
|
|
const [sw, sh] = getViewport();
|
|
|
|
let [iw, ih] = [0, 0];
|
|
if (isImage) {
|
|
[iw, ih] = [imgElem.naturalWidth, imgElem.naturalHeight];
|
|
} else if (isVideo) {
|
|
[iw, ih] = [videoElem.videoWidth, videoElem.videoHeight];
|
|
}
|
|
let scale = Math.min(1, sw / iw, sh / ih);
|
|
dims = [~~(iw * scale), ~~(ih * scale)];
|
|
|
|
hoverElem.style.width = `${dims[0]}px`;
|
|
hoverElem.style.height = `${dims[1]}px`;
|
|
}
|
|
|
|
async function hoverStart(ev?: MouseEvent) {
|
|
if (!(isVideo || isImage)) return;
|
|
if ($settings.dh) return;
|
|
if (file.thumbnail && !furl) {
|
|
unzip();
|
|
}
|
|
|
|
if (!isImage && !isVideo) return;
|
|
if (!contracted) return;
|
|
|
|
recompute();
|
|
hovering = true;
|
|
|
|
if (isVideo) {
|
|
try {
|
|
await hoverVideo.play();
|
|
} catch (e) {
|
|
// probably didn't interact with document error, mute the video and try again?
|
|
hoverVideo.muted = true;
|
|
hoverVideo.volume = 0;
|
|
await hoverVideo.play();
|
|
}
|
|
}
|
|
}
|
|
|
|
function hoverStop(ev?: MouseEvent) {
|
|
if ($settings.dh) return;
|
|
hovering = false;
|
|
if (isVideo) hoverVideo.pause();
|
|
}
|
|
|
|
let lastev: MouseEvent | undefined;
|
|
function hoverUpdate(ev?: MouseEvent) {
|
|
lastev = lastev || ev;
|
|
if ($settings.dh) return;
|
|
if (!contracted) return;
|
|
if (!(isVideo || isImage)) return;
|
|
recompute(); // yeah I gave up
|
|
const [sw, sh] = [visualViewport.width, visualViewport.height];
|
|
// shamelessly stolen from 4chanX
|
|
if (dims[0] == 0 && dims[1] == 0) recompute();
|
|
let width = dims[0];
|
|
let height = dims[1] + 25;
|
|
let { clientX, clientY } = ev || lastev!;
|
|
let top = Math.max(0, (clientY * (sh - height)) / sh);
|
|
let threshold = sw / 2;
|
|
let marginX: number | string =
|
|
(clientX <= threshold ? clientX : sw - clientX) + 45;
|
|
marginX = Math.min(marginX, sw - width);
|
|
marginX = marginX + "px";
|
|
let [left, right] = clientX <= threshold ? [marginX, ""] : ["", marginX];
|
|
let { style } = hoverElem;
|
|
style.top = top + "px";
|
|
style.left = left;
|
|
style.right = right;
|
|
}
|
|
|
|
function adjustAudio(ev: WheelEvent) {
|
|
if (!$settings.ca) return;
|
|
if (!isVideo) return;
|
|
if ($settings.dh && contracted) return;
|
|
if (!hasAudio(videoElem)) return;
|
|
let vol = videoElem.volume * (ev.deltaY > 0 ? 0.9 : 1.1);
|
|
vol = Math.max(0, Math.min(1, vol));
|
|
videoElem.volume = vol;
|
|
hoverVideo.volume = videoElem.volume;
|
|
hoverVideo.muted = vol < 0;
|
|
ev.preventDefault();
|
|
}
|
|
</script>
|
|
|
|
{#if !isText}
|
|
{#if !$settings.eye || visible}
|
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
|
<div
|
|
class:contract={contracted}
|
|
class="plaace"
|
|
on:click={(e) => e.preventDefault()}
|
|
on:auxclick={(e) => e.preventDefault()}
|
|
on:mousedown={bepis}
|
|
on:mouseover={hoverStart}
|
|
on:mouseout={hoverStop}
|
|
on:mousemove={hoverUpdate}
|
|
on:wheel={adjustAudio}
|
|
bind:this={place}
|
|
>
|
|
{#if isImage}
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<img
|
|
referrerpolicy="no-referrer"
|
|
bind:this={imgElem}
|
|
alt={file.filename}
|
|
src={furl || url}
|
|
/>
|
|
{/if}
|
|
{#if isAudio}
|
|
<audio
|
|
referrerpolicy="no-referrer"
|
|
controls
|
|
src={furl || url}
|
|
loop={$settings.loop}
|
|
alt={file.filename}
|
|
>
|
|
<source src={furl || url} type={ftype} />
|
|
</audio>
|
|
{/if}
|
|
{#if isVideo}
|
|
<!-- svelte-ignore a11y-media-has-caption -->
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<video
|
|
type={ftype}
|
|
referrerpolicy="no-referrer"
|
|
loop={$settings.loop}
|
|
bind:this={videoElem}
|
|
>
|
|
<source referrerpolicy="no-referrer" src={furl || url} />
|
|
</video>
|
|
<!-- assoom videos will never be loaded from thumbnails -->
|
|
{/if}
|
|
</div>
|
|
<div
|
|
bind:this={hoverElem}
|
|
class:visible={hovering && contracted}
|
|
class:unzipping
|
|
class="hoverer"
|
|
>
|
|
{#if unzipping}<span class="progress"
|
|
>[{progress[0]} / {progress[1]}]</span
|
|
>{/if}
|
|
|
|
{#if isImage}
|
|
<img alt={file.filename} src={furl || url} />
|
|
{/if}
|
|
{#if isVideo}
|
|
<!-- svelte-ignore a11y-media-has-caption -->
|
|
<video loop={$settings.loop} bind:this={hoverVideo}>
|
|
<source type={ftype} src={furl || url} data-test />
|
|
</video>
|
|
<!-- assoom videos will never be loaded from thumbnails -->
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
|
|
<style scoped>
|
|
.plaace {
|
|
cursor: pointer;
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.unzipping > img {
|
|
filter: brightness(0.5) blur(10px);
|
|
}
|
|
|
|
.progress {
|
|
color: black;
|
|
-webkit-text-stroke: 0.7px white;
|
|
font-weight: bold;
|
|
left: 50%;
|
|
top: 50%;
|
|
font-size: larger;
|
|
display: inline-block;
|
|
position: absolute;
|
|
z-index: 10;
|
|
}
|
|
|
|
.hoverer {
|
|
display: none;
|
|
position: fixed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.visible {
|
|
display: block;
|
|
z-index: 9;
|
|
}
|
|
|
|
.contract img,
|
|
.contract video {
|
|
max-width: 125px !important;
|
|
max-height: 125px !important;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.plaace:not(.contract) video,
|
|
.plaace:not(.contract) img,
|
|
.hoverer > video,
|
|
.hoverer > img {
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
}
|
|
</style>
|
|
|