pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update files with exported function instead of a reactive function

Browse Source
This commit is contained in:
Fornax
2021-12-13 16:33:23 +01:00
parent abab25ad2d
commit 967c7837fb
13 changed files with 192 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
svelte/src/file_viewer/viewers/Abuse.svelte
View File

@@ -1,5 +1,6 @@
<script>
export let file = {
export const set_file = f => file = f
let file = {
id: "",
name: "",
abuse_type: "",

46
svelte/src/file_viewer/viewers/Audio.svelte
View File

@@ -1,5 +1,6 @@
<script>
import { onMount, createEventDispatcher, tick } from "svelte";
import { createEventDispatcher, tick } from "svelte";
import LargeFileMessage from "./LargeFileMessage.svelte";
let dispatch = createEventDispatcher()
export let file = {
@@ -14,11 +15,17 @@ $: loop = file.name.includes(".loop.")
let player
let playing = false
let audio_reload = false
let media_session = false
$: update_file(file.id)
const update_file = async () => {
if (media_session) {
export const set_file = async f => {
let same_file = f.id == file.id
file = f
if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('play', () => player.play());
navigator.mediaSession.setActionHandler('pause', () => player.pause());
navigator.mediaSession.setActionHandler('stop', () => player.stop());
navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("prev", {}));
navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("next", {}));
navigator.mediaSession.metadata = new MediaMetadata({
title: file.name,
artist: "pixeldrain",
@@ -27,28 +34,18 @@ const update_file = async () => {
console.log("updating media session")
}
// When the component receives a new ID the video track does not automatically
// start playing the new video. So we use this little hack to make sure that the
// video is unloaded and loaded when the ID changes
audio_reload = true
await tick()
audio_reload = false
// When the component receives a new ID the video track does not
// automatically start playing the new video. So we use this little hack to
// make sure that the video is unloaded and loaded when the ID changes
if (!same_file) {
audio_reload = true
await tick()
audio_reload = false
}
}
const toggle_play = () => playing ? player.pause() : player.play()
onMount(() => {
if ('mediaSession' in navigator) {
media_session = true
navigator.mediaSession.setActionHandler('play', () => player.play());
navigator.mediaSession.setActionHandler('pause', () => player.pause());
navigator.mediaSession.setActionHandler('stop', () => player.stop());
navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("prev", {}));
navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("next", {}));
update_file()
}
})
</script>
<div class="container">
@@ -89,6 +86,9 @@ onMount(() => {
<source src={file.get_href} type={file.mime_type} />
</audio>
{/if}
<br/>
<LargeFileMessage file={file}></LargeFileMessage>
</div>
<style>

22
svelte/src/file_viewer/viewers/File.svelte
View File

@@ -1,9 +1,10 @@
<script>
import { createEventDispatcher } from "svelte";
import { formatDuration } from "../../util/Formatting.svelte";
import LargeFileMessage from "./LargeFileMessage.svelte";
let dispatch = createEventDispatcher()
export let file = {
export const set_file = f => file = f
let file = {
id: "",
size: 0,
name: "",
@@ -25,21 +26,8 @@ export let file = {
<i class="icon">save</i> Download
</button>
</div>
{#if file.show_ads && file.size > 5e8}
<br/>
<div class="description" style="max-width: 700px; text-align: center;">
<!-- If the file is larger than 500 MB-->
<hr/>
Your download speed is currently limited to 4 MiB/s. Downloading this
file for free will take at least
{formatDuration((file.size/4194304)*1000)}.
You can
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
upgrade to Pro
</a>
to download at the fastest speed available.
</div>
{/if}
<br/>
<LargeFileMessage file={file}></LargeFileMessage>
</div>
<style>

77
svelte/src/file_viewer/viewers/FilePreview.svelte Normal file
View File

@@ -0,0 +1,77 @@
<script>
import { createEventDispatcher, tick } from "svelte";
import Spinner from "../../util/Spinner.svelte";
import Video from "./Video.svelte";
import Audio from "./Audio.svelte";
import Image from "./Image.svelte";
import PDF from "./PDF.svelte";
import Text from "./Text.svelte";
import File from "./File.svelte";
import Abuse from "./Abuse.svelte";
import { file_type } from "../FileUtilities.svelte";
let viewer
let viewer_type = "loading"
export const set_file = async file => {
if (file.id === "") {
viewer_type = "loading"
return
} else if (file.abuse_type !== "") {
viewer_type = "abuse"
} else {
viewer_type = file_type(file)
}
console.log("opening file", file)
// Render the viewer component and set the file type
await tick()
viewer.set_file(file)
}
let dispatch = createEventDispatcher()
const download = () => { dispatch("download") }
const next = () => { dispatch("next") }
const prev = () => { dispatch("prev") }
</script>
<div class="file_container">
{#if viewer_type === "loading"}
<div class="center" style="width: 100px; height: 100px;">
<Spinner></Spinner>
</div>
{:else if viewer_type === "abuse"}
<Abuse bind:this={viewer}></Abuse>
{:else if viewer_type === "image"}
<Image bind:this={viewer}></Image>
{:else if viewer_type === "video"}
<Video bind:this={viewer} on:download={download} on:prev={prev} on:next={next}></Video>
{:else if viewer_type === "audio"}
<Audio bind:this={viewer} on:prev={prev} on:next={next}></Audio>
{:else if viewer_type === "pdf"}
<PDF bind:this={viewer}></PDF>
{:else if viewer_type === "text"}
<Text bind:this={viewer}></Text>
{:else if viewer_type === "file"}
<File bind:this={viewer} on:download={download}></File>
{/if}
</div>
<style>
.file_container {
width: 100%;
height: 100%;
}
.center{
position: relative;
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
top: 50%;
transform: translateY(-50%);
}
</style>

5
svelte/src/file_viewer/viewers/Image.svelte
View File

@@ -1,11 +1,12 @@
<script>
export let file = {
export const set_file = f => file = f
let file = {
id: "",
name: "",
mime_type: "",
get_href: "",
}
let container
let zoom = false
let x, y = 0

35
svelte/src/file_viewer/viewers/LargeFileMessage.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script>
import { formatDuration } from "../../util/Formatting.svelte";
export let file = {
id: "",
name: "",
show_ads: false,
size: 0,
}
</script>
{#if file.show_ads && file.size > 1e8}
<!-- If the file is larger than 100 MB we show a warning about the transfer speed -->
<div class="description">
<hr/>
Your download speed is currently limited to 4 MiB/s. Downloading this
file for free will take at least
{formatDuration((file.size/4194304)*1000)} (under ideal conditions).
You can
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
upgrade to Pro
</a>
to download at the fastest speed available.
</div>
{/if}
<style>
.description {
display: inline-block;
text-align: center;
padding-left: 8px;
vertical-align: middle;
max-width: 700px;
}
</style>

3
svelte/src/file_viewer/viewers/PDF.svelte
View File

@@ -1,5 +1,6 @@
<script>
export let file = {
export const set_file = f => file = f
let file = {
get_href: "",
}
</script>

28
svelte/src/file_viewer/viewers/Text.svelte
View File

@@ -1,31 +1,21 @@
<script>
import { onMount } from "svelte";
export let file = {
id: "",
name: "",
mime_type: "",
size: 0,
get_href: "",
}
let container
let text_type = ""
$: update_file(file.id)
const update_file = async () => {
export const set_file = file => {
console.log("loading text file", file.id)
if (file.name.endsWith(".md") || file.name.endsWith(".markdown") || file.mime_type === "text/demo") {
markdown()
markdown(file)
} else if (file.name.endsWith(".txt")) {
text()
text(file)
} else {
code()
code(file)
}
}
onMount(update_file)
let md_container
const markdown = () => {
const markdown = file => {
text_type = "markdown"
fetch("/u/" + file.id + "/preview").then(resp => {
@@ -39,7 +29,7 @@ const markdown = () => {
}
let text_pre
const text = () => {
const text = file => {
text_type = "text"
if (file.size > 1 << 22) { // File larger than 4 MiB
@@ -59,7 +49,7 @@ const text = () => {
let code_pre
let prettyprint = false
const code = () => {
const code = file => {
text_type = "code"
if (file.size > 1 << 22) { // File larger than 4 MiB

50
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -1,9 +1,9 @@
<script>
import { onMount, createEventDispatcher, tick } from "svelte";
import { formatDuration } from "../../util/Formatting.svelte";
import LargeFileMessage from "./LargeFileMessage.svelte";
let dispatch = createEventDispatcher()
export let file = {
let file = {
id: "",
size: 0,
name: "",
@@ -20,8 +20,10 @@ let player
let video_reload = false
let media_session = false
$: update_file(file.id)
const update_file = async () => {
export const set_file = async f => {
let same_file = f.id == file.id
file = f
if (media_session) {
navigator.mediaSession.metadata = new MediaMetadata({
title: file.name,
@@ -31,12 +33,14 @@ const update_file = async () => {
console.log("updating media session")
}
// When the component receives a new ID the video track does not automatically
// start playing the new video. So we use this little hack to make sure that the
// video is unloaded and loaded when the ID changes
video_reload = true
await tick()
video_reload = false
// When the component receives a new ID the video track does not
// automatically start playing the new video. So we use this little hack to
// make sure that the video is unloaded and loaded when the ID changes
if (!same_file) {
video_reload = true
await tick()
video_reload = false
}
}
onMount(() => {
@@ -47,7 +51,6 @@ onMount(() => {
navigator.mediaSession.setActionHandler('stop', () => player.stop());
navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("prev", {}));
navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("next", {}));
update_file()
}
})
@@ -74,9 +77,9 @@ let download = () => { dispatch("download", {}) }
<h1>This is a video file on pixeldrain</h1>
<img src={file.icon_href} alt="Video icon" style="display: inline-block; vertical-align: top;">
<div class="description">
The online video player on pixeldrain has been disabled to prevent
abuse. You can still watch videos online by upgrading to Pro. Or
download the video and watch it locally on your computer.
The online video player on pixeldrain is only available when the
uploader of the file or the viewer pays for the bandwidth usage. You
can still download the video and watch it locally on your computer.
<br/>
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" class="button button_highlight">
<i class="icon">upgrade</i> Upgrade to Pro
@@ -85,21 +88,8 @@ let download = () => { dispatch("download", {}) }
<i class="icon">save</i> Download
</button>
</div>
{#if file.show_ads && file.size > 5e8}
<br/>
<div class="description" style="max-width: 700px; text-align: center;">
<!-- If the file is larger than 500 MB-->
<hr/>
Your download speed is currently limited to 4 MiB/s. Downloading this
file for free will take at least
{formatDuration((file.size/4194304)*1000)}.
You can
<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
upgrade to Pro
</a>
to download at the fastest speed available.
</div>
{/if}
<br/>
<LargeFileMessage file={file}></LargeFileMessage>
{/if}
</div>
@@ -123,7 +113,7 @@ let download = () => { dispatch("download", {}) }
}
.description {
display: inline-block;
text-align: left;
text-align: justify;
padding-left: 8px;
vertical-align: middle;
max-width: 550px;