Use websocket proto for getting file stats and rate limits. Remove view_token

svelte/src/file_viewer/FileStats.svelte

@@ -1,6 +1,6 @@
 <script>
-import { onMount } from "svelte";
 import { formatDataVolume, formatThousands } from "../util/Formatting.svelte"
+import { set_file, stats } from "./StatsSocket"
 
 export let file = {
 	id: "",
@@ -10,98 +10,42 @@ export let file = {
 	bandwidth_used: 0,
 	bandwidth_used_paid: 0,
 }
-export let view_token = ""
 
 let views = 0
 let downloads = 0
 let size = 0
-let socket = null
-let error_msg = ""
-
-$: update_stats(file.id)
-let update_stats = async id => {
-	if (id === "" || id == "demo") {
-		return
-	}
-
-	views = file.views
-	if (file.size === 0) {
-		downloads = file.downloads
-	} else {
-		downloads = Math.round((file.bandwidth_used + file.bandwidth_used_paid) / file.size)
-	}
+$: {
 	size = file.size
 
-	send_watch_command()
-}
+	if ($stats.file_stats_init) {
+		views = $stats.file_stats.views
 
-const send_watch_command = () => {
-	if (socket !== null && socket.readyState === WebSocket.OPEN) {
-		socket.send(
-			JSON.stringify(
-				{cmd: "watch_file", a1: file.id, a2: view_token}
-			)
-		)
-	}
-}
-
-const init_socket = () => {
-	if (socket !== null && socket.readyState !== WebSocket.CLOSED) {
-		return
-	}
-
-	console.log("initializing socket")
-	socket = new WebSocket(location.origin.replace(/^http/, 'ws') + "/api/file_stats")
-
-	socket.onopen = () => send_watch_command()
-	socket.onmessage = msg => {
-		let j = JSON.parse(msg.data)
-		console.debug("WS update", j)
-
-		error_msg = ""
-		views = j.views
 		if (file.size === 0) {
-			downloads = j.downloads
+			downloads = $stats.file_stats.downloads
 		} else {
-			downloads = Math.round((j.bandwidth + j.bandwidth_paid) / file.size)
+			downloads = Math.round(($stats.file_stats.bandwidth + $stats.file_stats.bandwidth_paid) / file.size)
 		}
-	}
-	socket.onerror = err => {
-		if (socket === null) {
-			return
-		}
-		console.error("WS error", err)
-		socket.close()
-		socket = null
-		error_msg = "failed to get stats, retrying..."
+	} else {
+		views = file.views
 
-		window.setTimeout(init_socket, 2000)
+		if (file.size === 0) {
+			downloads = file.downloads
+		} else {
+			downloads = Math.round((file.bandwidth_used + file.bandwidth_used_paid) / file.size)
+		}
 	}
 }
 
-onMount(() => {
-	init_socket()
-
-	return () => {
-		if (socket !== null) {
-			socket.close()
-			socket = null
-		}
-	}
-})
+$: set_file(file.id)
 </script>
 
 <div>
-	{#if error_msg !== ""}
-		{error_msg}
-	{:else}
-		<div class="label">Views</div>
-		<div class="stat">{formatThousands(views)}</div>
-		<div class="label">Downloads</div>
-		<div class="stat">{formatThousands(downloads)}</div>
-		<div class="label">Size</div>
-		<div class="stat">{formatDataVolume(size, 3)}</div>
-	{/if}
+	<div class="label">Views</div>
+	<div class="stat">{formatThousands(views)}</div>
+	<div class="label">Downloads</div>
+	<div class="stat">{formatThousands(downloads)}</div>
+	<div class="label">Size</div>
+	<div class="stat">{formatDataVolume(size, 3)}</div>
 </div>
 
 <style>