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

78
svelte/src/file_viewer/FilePreview.svelte
View File

@@ -1,78 +0,0 @@
<script>
import { createEventDispatcher } from "svelte";
import Spinner from "../util/Spinner.svelte";
import Video from "./viewers/Video.svelte";
import Audio from "./viewers/Audio.svelte";
import Image from "./viewers/Image.svelte";
import PDF from "./viewers/PDF.svelte";
import Text from "./viewers/Text.svelte";
import File from "./viewers/File.svelte";
import Abuse from "./viewers/Abuse.svelte";
import { file_type } from "./FileUtilities.svelte";
let viewer_type = "loading"
export let file = {
id: "",
name: "",
mime_type: "",
abuse_type: "",
}
$: update_file(file.id)
const update_file = () => {
if (file.id === "") {
viewer_type = "loading"
return
}else if (file.abuse_type !== "") {
viewer_type = "abuse"
return
}
viewer_type = file_type(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 file={file}></Abuse>
{:else if viewer_type === "image"}
<Image file={file}></Image>
{:else if viewer_type === "video"}
<Video file={file} on:download={download} on:prev={prev} on:next={next}></Video>
{:else if viewer_type === "audio"}
<Audio file={file} on:prev={prev} on:next={next}></Audio>
{:else if viewer_type === "pdf"}
<PDF file={file}></PDF>
{:else if viewer_type === "text"}
<Text file={file}></Text>
{:else if viewer_type === "file"}
<File file={file} 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>

2
svelte/src/file_viewer/FileStats.svelte
View File

@@ -16,7 +16,7 @@ let socket = null
let error_msg = ""
$: update_stats(file.id)
let update_stats = (id) => {
let update_stats = async id => {
if (id === "" || id == "demo") {
return
}

9
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -5,7 +5,7 @@ import { file_struct, list_struct, file_set_href } from "./FileUtilities.svelte"
import Modal from "../util/Modal.svelte";
import PixeldrainLogo from "../util/PixeldrainLogo.svelte";
import DetailsWindow from "./DetailsWindow.svelte";
import FilePreview from "./FilePreview.svelte";
import FilePreview from "./viewers/FilePreview.svelte";
import ListNavigator from "./ListNavigator.svelte";
import FileStats from "./FileStats.svelte";
import EditWindow from "./EditWindow.svelte";
@@ -29,6 +29,7 @@ let view = "" // file or gallery
let file = file_struct
let list = list_struct
let is_list = false
let file_preview
let button_home
let list_navigator
@@ -167,9 +168,11 @@ const open_file_index = async index => {
if (view !== "file") {
view = "file"
await tick() // Wait for the ListNavigator to render
await tick() // Wait for the file_preview and list_navigator to render
}
file_preview.set_file(file)
if (is_list) {
// Update the URL
location.replace("#item=" + index)
@@ -449,7 +452,7 @@ const keyboard_event = evt => {
<div id="file_preview" class="file_preview checkers" class:toolbar_visible class:skyscraper_visible>
{#if view === "file"}
<FilePreview
file={file}
bind:this={file_preview}
on:download={downloader.download_file}
on:prev={() => { if (list_navigator) { list_navigator.prev() }}}
on:next={() => { if (list_navigator) { list_navigator.next() }}}>

19
svelte/src/file_viewer/ListNavigator.svelte
View File

@@ -4,6 +4,7 @@ import { createEventDispatcher } from "svelte";
let dispatch = createEventDispatcher()
export let files = []
export let shuffle = false
let file_list_div
let selected_file_index = 0
@@ -24,14 +25,19 @@ export const rand_item = () => {
// Avoid viewing the same file multiple times
let rand
do {
rand = Math.round(Math.random() * files.length)
rand = Math.floor(Math.random() * files.length)
console.log("rand is " + rand)
} while(history.indexOf(rand) > -1)
set_item(rand)
select_item_event(rand)
}
export let shuffle = false
// select_item_event signals to the FileViewer that the file needs to be
// changed. The FileViewer then calls set_item if the change has been approved.
// ListNavigator cannot call set_item itself because it will cause a loop.
const select_item_event = idx => {
dispatch("set_file", idx)
}
export const set_item = idx => {
// Remove the class from the previous selected file
@@ -68,13 +74,6 @@ export const set_item = idx => {
}
animateScroll(start, 0)
}
// select_item signals to the FileViewer that the file needs to be changed. The
// FileViewer then calls set_item if the change has been approved. ListNavigator
// cannot call set_item itself because it will cause a loop.
const select_item_event = idx => {
dispatch("set_file", idx)
}
</script>
<div class="nav_container">

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;