From e4be25dfb5e9dbd2de88dc3e26e9581492420339 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Thu, 24 Feb 2022 13:00:05 +0000
Subject: [PATCH] Show stats on preview

---
 VoidCat/spa/package.json        |  1 +
 VoidCat/spa/src/FilePreview.css | 29 ++++++++++++++++++++---------
 VoidCat/spa/src/FilePreview.js  | 20 ++++++++++++++++++--
 VoidCat/spa/src/GlobalStats.js  |  8 ++++----
 VoidCat/spa/yarn.lock           | 20 ++++++++++++++++++++
 5 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/VoidCat/spa/package.json b/VoidCat/spa/package.json
index ecc8d9c..5b9dde1 100644
--- a/VoidCat/spa/package.json
+++ b/VoidCat/spa/package.json
@@ -10,6 +10,7 @@
     "qrcode.react": "^1.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0"
diff --git a/VoidCat/spa/src/FilePreview.css b/VoidCat/spa/src/FilePreview.css
index f09a1f6..7e50fa4 100644
--- a/VoidCat/spa/src/FilePreview.css
+++ b/VoidCat/spa/src/FilePreview.css
@@ -6,14 +6,25 @@
     margin-right: auto;
 }
 
-    .preview > a {
-        margin-bottom: 1vh;
-    }
+.preview > a {
+    margin-bottom: 1vh;
+}
 
-    .preview img {
-        width: 100%;
-    }
+.preview img {
+    width: 100%;
+}
 
-    .preview video {
-        width: 100%;
-    }
+.preview video {
+    width: 100%;
+}
+
+.file-stats {
+    line-height: 32px;
+    display: grid;
+    grid-auto-flow: column;
+}
+
+.file-stats svg {
+    vertical-align: middle;
+    margin-right: 10px;
+}
\ No newline at end of file
diff --git a/VoidCat/spa/src/FilePreview.js b/VoidCat/spa/src/FilePreview.js
index 63ba016..41f2313 100644
--- a/VoidCat/spa/src/FilePreview.js
+++ b/VoidCat/spa/src/FilePreview.js
@@ -1,11 +1,13 @@
 import {Fragment, useEffect, useState} from "react";
 import {useParams} from "react-router-dom";
 import {TextPreview} from "./TextPreview";
-
+import FeatherIcon from "feather-icons-react";
 import "./FilePreview.css";
 import {FileEdit} from "./FileEdit";
 import {FilePaywall} from "./FilePaywall";
 import {Api} from "./Api";
+import {Helmet} from "react-helmet";
+import {FormatBytes} from "./Util";
 
 export function FilePreview() {
     const params = useParams();
@@ -77,8 +79,22 @@ export function FilePreview() {
         <div className="preview">
             {info ? (
                 <Fragment>
-                    this.Download(<a className="btn" href={link}>{info.metadata?.name ?? info.id}</a>)
+                    <Helmet>
+                        <title>void.cat - {info.metadata?.name}</title>
+                        <meta name="description" content={info.metadata?.description}/>
+                    </Helmet>
+                    <a className="btn" href={link}>{info.metadata?.name ?? info.id}</a>
                     {renderTypes()}
+                    <div className="file-stats">
+                        <div>
+                            <FeatherIcon icon="download-cloud"/>
+                            {FormatBytes(info?.bandwidth?.egress ?? 0, 2)}
+                        </div>
+                        <div>
+                            <FeatherIcon icon="hard-drive"/>
+                            {FormatBytes(info?.metadata?.size ?? 0, 2)}
+                        </div>
+                    </div>
                     <FileEdit file={info}/>
                 </Fragment>
             ) : "Not Found"}
diff --git a/VoidCat/spa/src/GlobalStats.js b/VoidCat/spa/src/GlobalStats.js
index 19e0229..4feeeae 100644
--- a/VoidCat/spa/src/GlobalStats.js
+++ b/VoidCat/spa/src/GlobalStats.js
@@ -20,19 +20,19 @@ export function GlobalStats(props) {
     return (
         <dl className="stats">
             <div>
-                <FeatherIcon icon="upload-cloud" />
+                <FeatherIcon icon="upload-cloud"/>
                 {FormatBytes(stats?.bandwidth?.ingress ?? 0, 2)}
             </div>
             <div>
-                <FeatherIcon icon="download-cloud" />
+                <FeatherIcon icon="download-cloud"/>
                 {FormatBytes(stats?.bandwidth?.egress ?? 0, 2)}
             </div>
             <div>
-                <FeatherIcon icon="database" />
+                <FeatherIcon icon="hard-drive"/>
                 {FormatBytes(stats?.totalBytes ?? 0, 2)}
             </div>
             <div>
-                <FeatherIcon icon="hash" />
+                <FeatherIcon icon="hash"/>
                 {stats?.count ?? 0}
             </div>
         </dl>
diff --git a/VoidCat/spa/yarn.lock b/VoidCat/spa/yarn.lock
index 32c0cab..fc833c1 100644
--- a/VoidCat/spa/yarn.lock
+++ b/VoidCat/spa/yarn.lock
@@ -6865,6 +6865,21 @@ react-error-overlay@^6.0.10:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"
   integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
 
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -6962,6 +6977,11 @@ react-scripts@5.0.0:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-side-effect@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"