2022-01-05 20:50:44 +00:00
|
|
|
<script lang="ts">
|
2022-01-13 12:40:14 +00:00
|
|
|
import { fileTypeFromBuffer } from 'file-type'
|
|
|
|
import { Buffer } from 'buffer'
|
|
|
|
import type Embedding from './Embedding.svelte'
|
|
|
|
import type Embeddings from './Embeddings.svelte'
|
2022-01-05 22:20:20 +00:00
|
|
|
|
2022-01-13 12:40:14 +00:00
|
|
|
import type { EmbeddedFile } from './main'
|
2022-01-05 22:20:20 +00:00
|
|
|
|
2022-01-05 20:50:44 +00:00
|
|
|
import { settings } from './stores'
|
|
|
|
|
|
|
|
export let id = ''
|
2022-01-13 12:40:14 +00:00
|
|
|
export let files: EmbeddedFile[]
|
|
|
|
export let inst: Embedding | Embeddings
|
2022-01-07 04:43:28 +00:00
|
|
|
|
|
|
|
let isVideo = false
|
|
|
|
|
2022-01-13 12:40:14 +00:00
|
|
|
inst.$on('fileinfo', (info) => {
|
|
|
|
isVideo = isVideo || info.detail.type.mime.startsWith('video/')
|
2022-01-07 04:43:28 +00:00
|
|
|
})
|
2022-01-05 22:20:20 +00:00
|
|
|
|
2022-01-05 20:50:44 +00:00
|
|
|
let visible = false
|
|
|
|
function reveal() {
|
|
|
|
visible = !visible
|
|
|
|
document.dispatchEvent(new CustomEvent('reveal', { detail: { id } }))
|
|
|
|
}
|
2022-01-13 12:40:14 +00:00
|
|
|
const isNotChrome = !navigator.userAgent.includes('Chrome/')
|
2022-01-05 22:20:20 +00:00
|
|
|
|
2022-01-09 06:39:02 +00:00
|
|
|
async function downloadFile(file: EmbeddedFile) {
|
2022-01-13 12:40:14 +00:00
|
|
|
const a = document.createElement('a') as HTMLAnchorElement
|
|
|
|
document.body.appendChild(a)
|
|
|
|
a.style.display = 'none'
|
|
|
|
let url: string
|
|
|
|
if (typeof file.data != "string") {
|
|
|
|
const thumb = (Buffer.isBuffer(file.data) ? file.data : await file.data())
|
|
|
|
const type = await fileTypeFromBuffer(thumb)
|
|
|
|
url = URL.createObjectURL(new Blob([thumb], { type: type?.mime }))
|
|
|
|
} else
|
|
|
|
url = file.data;
|
|
|
|
a.href = url
|
|
|
|
a.download = file.filename
|
|
|
|
a.click()
|
|
|
|
window.URL.revokeObjectURL(url)
|
2022-01-05 22:20:20 +00:00
|
|
|
}
|
2022-01-05 20:50:44 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
{#if $settings.eye}
|
|
|
|
<span
|
|
|
|
on:click={reveal}
|
|
|
|
class:fa-eye={!visible}
|
|
|
|
class:fa-eye-slash={visible}
|
|
|
|
class="fa clickable"
|
|
|
|
/>
|
|
|
|
{/if}
|
2022-01-09 06:39:02 +00:00
|
|
|
{#each files as file}
|
2022-01-13 12:40:14 +00:00
|
|
|
<span
|
|
|
|
title={file.filename}
|
|
|
|
on:click={() => downloadFile(file)}
|
|
|
|
class="fa fa-download clickable"
|
|
|
|
/>
|
|
|
|
{#if file.source}
|
|
|
|
<!-- svelte-ignore a11y-missing-content -->
|
|
|
|
<a href={file.source} target="_blank" class="clickable">Source</a>
|
|
|
|
{/if}
|
|
|
|
{#if file.page}
|
|
|
|
<!-- svelte-ignore a11y-missing-content -->
|
|
|
|
<a href={file.page.url} target="_blank" class="clickable"
|
|
|
|
>{file.page.title}</a
|
|
|
|
>
|
|
|
|
{/if}
|
|
|
|
{#if isNotChrome && isVideo}
|
|
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
|
|
<a
|
|
|
|
on:click={(ev) => {
|
|
|
|
inst.bepis(ev)
|
|
|
|
}}
|
|
|
|
alt="By clicking this you agree to stay hydrated"
|
|
|
|
class="clickable">[PEE contract]</a
|
|
|
|
>
|
|
|
|
{/if}
|
2022-01-09 06:39:02 +00:00
|
|
|
{/each}
|
2022-01-05 20:50:44 +00:00
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.clickable {
|
|
|
|
cursor: pointer;
|
2022-01-05 21:14:45 +00:00
|
|
|
margin-left: 5px;
|
2022-01-05 20:50:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.clickable:hover {
|
|
|
|
text-shadow: 0 0 4px palevioletred;
|
|
|
|
}
|
|
|
|
</style>
|