Add free transfer limit to filesystem

svelte/src/filesystem/FSNavigator.ts

@@ -1,5 +1,6 @@
-import { fs_get_node, fs_encode_path, fs_split_path, type FSNode, type FSPath, type FSPermissions } from "./FilesystemAPI";
-import { type Writable } from "svelte/store"
+import { fs_get_node, fs_encode_path, fs_split_path } from "./FilesystemAPI";
+import type { FSNode, FSPath, FSPermissions, FSContext } from "./FilesystemAPI";
+import type { Writable } from "svelte/store"
 
 export class FSNavigator {
 	// Parts of the raw API response
@@ -7,6 +8,7 @@ export class FSNavigator {
 	base_index: number = 0
 	children: Array<FSNode> = []
 	permissions: FSPermissions = <FSPermissions>{}
+	context: FSContext = <FSContext>{}
 
 	// base equals path[base_index]. It's updated every time the path updates
 	base: FSNode = <FSNode>{}
@@ -128,6 +130,7 @@ export class FSNavigator {
 		this.base = node.path[node.base_index]
 		this.children = node.children
 		this.permissions = node.permissions
+		this.context = node.context
 		this.initialized = true
 
 		console.debug("Opened node", node)

svelte/src/filesystem/Filesystem.svelte

@@ -13,6 +13,8 @@ import { branding_from_path } from './edit_window/Branding.js'
 import Menu from './Menu.svelte';
 import { FSNavigator } from "./FSNavigator"
 import { writable } from 'svelte/store';
+import TransferLimit from '../file_viewer/TransferLimit.svelte';
+import { stats } from "src/util/StatsSocket.js"
 
 let file_viewer
 let file_preview
@@ -178,6 +180,21 @@ const search = async () => {
 		</div>
 	</div>
 
+	{#if $nav.context.premium_transfer === false}
+		<div class="download_limit">
+			{#if $stats.limits.transfer_limit_used > $stats.limits.transfer_limit}
+				<div class="highlight_yellow">
+					Your free download limit has been used up and your download
+					speed has been limited to 1 MiB/s. <a href="/#pro"
+					target="_blank">Upgrade to premium</a> to continue fast
+					downloading
+				</div>
+			{:else}
+				<TransferLimit/>
+			{/if}
+		</div>
+	{/if}
+
 	<!-- This frame will load the download URL when a download button is pressed -->
 	<iframe
 		bind:this={download_frame}
@@ -244,6 +261,15 @@ const search = async () => {
 	overflow: hidden;
 }
 
+/* Download limit gauge (row 3) */
+.download_limit {
+	flex: 0 0 auto;
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	background-color: var(--shaded_background);
+}
+
 /* This max-width needs to be synced with the .toolbar max-width in
 Toolbar.svelte and the .label max-width in FileStats.svelte */
 @media (max-width: 800px) {

svelte/src/filesystem/FilesystemAPI.ts

@@ -11,6 +11,7 @@ export type FSPath = {
 	base_index: number,
 	children: Array<FSNode>,
 	permissions: FSPermissions,
+	context: FSContext,
 }
 
 export type FSNode = {
@@ -42,6 +43,10 @@ export type FSPermissions = {
 	delete: boolean,
 }
 
+export type FSContext = {
+	premium_transfer: boolean,
+}
+
 // API parameters
 // ==============
 

svelte/src/filesystem/viewers/Audio.svelte

@@ -1,8 +1,8 @@
 <script>
 import { onMount } from 'svelte'
-import { fs_path_url, fs_encode_path, fs_node_icon } from "./../FilesystemAPI"
-import FileTitle from './../../file_viewer/viewers/FileTitle.svelte';
-import TextBlock from './../../file_viewer/viewers/TextBlock.svelte';
+import { fs_path_url, fs_encode_path, fs_node_icon } from "src/filesystem/FilesystemAPI.ts"
+import FileTitle from "src/layout/FileTitle.svelte";
+import TextBlock from "src/layout/TextBlock.svelte"
 
 export let nav
 let player

svelte/src/filesystem/viewers/File.svelte

@@ -1,8 +1,8 @@
 <script>
 import { createEventDispatcher } from "svelte";
-import IconBlock from "../../file_viewer/viewers/IconBlock.svelte";
+import IconBlock from "src/layout/IconBlock.svelte";
 import { fs_thumbnail_url } from "../FilesystemAPI";
-import TextBlock from "../../file_viewer/viewers/TextBlock.svelte";
+import TextBlock from "src/layout/TextBlock.svelte"
 let dispatch = createEventDispatcher()
 
 export let nav

svelte/src/filesystem/viewers/FilePreview.svelte

@@ -1,7 +1,7 @@
 <script>
 import { onMount, tick } from "svelte";
 import Spinner from "../../util/Spinner.svelte";
-import { fs_node_type } from "./../FilesystemAPI";
+import { fs_node_type, fs_thumbnail_url } from "./../FilesystemAPI";
 import FileManager from "../filemanager/FileManager.svelte";
 import Audio from "./Audio.svelte";
 import File from "./File.svelte";
@@ -12,6 +12,8 @@ import Video from "./Video.svelte";
 import Torrent from "./Torrent.svelte";
 import Zip from "./Zip.svelte";
 import CustomBanner from "./CustomBanner.svelte";
+import { stats } from "src/util/StatsSocket.js"
+import SlowDown from "src/layout/SlowDown.svelte";
 
 export let nav
 export let edit_window
@@ -60,6 +62,14 @@ export const seek = delta => {
 	<FileManager nav={nav} edit_window={edit_window} on:upload_picker>
 		<CustomBanner path={$nav.path}/>
 	</FileManager>
+{:else if $nav.context.premium_transfer === false && $stats.limits.transfer_limit_used > $stats.limits.transfer_limit}
+	<SlowDown
+		on:download
+		file_size={$nav.base.file_size}
+		file_name={$nav.base.name}
+		file_type={$nav.base.file_type}
+		icon_href={fs_thumbnail_url($nav.base.path, 256, 256)}
+	/>
 {:else if viewer_type === "audio"}
 	<Audio nav={nav} bind:this={viewer}>
 		<CustomBanner path={$nav.path}/>

svelte/src/filesystem/viewers/Image.svelte

@@ -1,6 +1,6 @@
 <script>
 import { createEventDispatcher } from "svelte";
-import { swipe_nav } from "./../../file_viewer/viewers/SwipeNavigate";
+import { swipe_nav } from "src/util/SwipeNavigate.ts";
 import { fs_path_url } from "./../FilesystemAPI";
 
 let dispatch = createEventDispatcher();

svelte/src/filesystem/viewers/Torrent.svelte

@@ -3,8 +3,8 @@ import { createEventDispatcher } from "svelte";
 import Magnet from "../../icons/Magnet.svelte";
 import { formatDate } from "../../util/Formatting.svelte"
 import TorrentItem from "./TorrentItem.svelte"
-import IconBlock from "../../file_viewer/viewers/IconBlock.svelte";
-import TextBlock from "../../file_viewer/viewers/TextBlock.svelte";
+import IconBlock from "src/layout/IconBlock.svelte";
+import TextBlock from "src/layout/TextBlock.svelte"
 import { fs_node_icon, fs_path_url } from "../FilesystemAPI";
 import CopyButton from "../../layout/CopyButton.svelte";
 

svelte/src/filesystem/viewers/Zip.svelte

@@ -2,8 +2,8 @@
 import { createEventDispatcher } from "svelte";
 import { formatDataVolume, formatDate } from "../../util/Formatting.svelte"
 import ZipItem from "../../file_viewer/viewers/ZipItem.svelte";
-import IconBlock from "../../file_viewer/viewers/IconBlock.svelte";
-import TextBlock from "../../file_viewer/viewers/TextBlock.svelte";
+import IconBlock from "src/layout/IconBlock.svelte";
+import TextBlock from "src/layout/TextBlock.svelte"
 import { fs_node_icon, fs_path_url } from "../FilesystemAPI";
 
 let dispatch = createEventDispatcher()