forked from Kieran/void.cat
Show stats on preview
This commit is contained in:
parent
66c31f74ba
commit
e4be25dfb5
@ -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"
|
||||
|
@ -17,3 +17,14 @@
|
||||
.preview video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-stats {
|
||||
line-height: 32px;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.file-stats svg {
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
@ -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"}
|
||||
|
@ -28,7 +28,7 @@ export function GlobalStats(props) {
|
||||
{FormatBytes(stats?.bandwidth?.egress ?? 0, 2)}
|
||||
</div>
|
||||
<div>
|
||||
<FeatherIcon icon="database" />
|
||||
<FeatherIcon icon="hard-drive"/>
|
||||
{FormatBytes(stats?.totalBytes ?? 0, 2)}
|
||||
</div>
|
||||
<div>
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user