mirror of
https://github.com/v0l/route96.git
synced 2025-06-21 15:40:44 +00:00
Compare commits
2 Commits
main
...
copilot/fi
Author | SHA1 | Date | |
---|---|---|---|
f56b60b004 | |||
aa64143066 |
4
.gitignore
vendored
4
.gitignore
vendored
@ -1,7 +1,3 @@
|
|||||||
target/
|
target/
|
||||||
data/
|
data/
|
||||||
.idea/
|
.idea/
|
||||||
ui_src/dist/
|
|
||||||
ui_src/node_modules/
|
|
||||||
ui_src/package-lock.json
|
|
||||||
ui_src/*.tsbuildinfo
|
|
1
Cargo.lock
generated
1
Cargo.lock
generated
@ -3323,7 +3323,6 @@ dependencies = [
|
|||||||
"sqlx",
|
"sqlx",
|
||||||
"tokio",
|
"tokio",
|
||||||
"tokio-util",
|
"tokio-util",
|
||||||
"url",
|
|
||||||
"uuid",
|
"uuid",
|
||||||
"walkdir",
|
"walkdir",
|
||||||
]
|
]
|
||||||
|
@ -36,14 +36,13 @@ sha2 = "0.10.8"
|
|||||||
sqlx = { version = "0.8.1", features = ["mysql", "runtime-tokio", "chrono", "uuid"] }
|
sqlx = { version = "0.8.1", features = ["mysql", "runtime-tokio", "chrono", "uuid"] }
|
||||||
config = { version = "0.15.7", features = ["yaml"] }
|
config = { version = "0.15.7", features = ["yaml"] }
|
||||||
chrono = { version = "0.4.38", features = ["serde"] }
|
chrono = { version = "0.4.38", features = ["serde"] }
|
||||||
reqwest = { version = "0.12.8", features = ["stream", "http2", "json"] }
|
reqwest = { version = "0.12.8", features = ["stream", "http2"] }
|
||||||
clap = { version = "4.5.18", features = ["derive"] }
|
clap = { version = "4.5.18", features = ["derive"] }
|
||||||
mime2ext = "0.1.53"
|
mime2ext = "0.1.53"
|
||||||
infer = "0.19.0"
|
infer = "0.19.0"
|
||||||
tokio-util = { version = "0.7.13", features = ["io", "io-util"] }
|
tokio-util = { version = "0.7.13", features = ["io", "io-util"] }
|
||||||
http-range-header = { version = "0.4.2" }
|
http-range-header = { version = "0.4.2" }
|
||||||
base58 = "0.2.0"
|
base58 = "0.2.0"
|
||||||
url = "2.5.0"
|
|
||||||
|
|
||||||
libc = { version = "0.2.153", optional = true }
|
libc = { version = "0.2.153", optional = true }
|
||||||
ffmpeg-rs-raw = { git = "https://git.v0l.io/Kieran/ffmpeg-rs-raw.git", rev = "aa1ce3edcad0fcd286d39b3e0c2fdc610c3988e7", optional = true }
|
ffmpeg-rs-raw = { git = "https://git.v0l.io/Kieran/ffmpeg-rs-raw.git", rev = "aa1ce3edcad0fcd286d39b3e0c2fdc610c3988e7", optional = true }
|
||||||
|
21
index.html
21
index.html
@ -66,7 +66,13 @@
|
|||||||
const file = input.files[0];
|
const file = input.files[0];
|
||||||
console.debug(file);
|
console.debug(file);
|
||||||
|
|
||||||
await uploadBlossom(file);
|
const r_nip96 = document.querySelector("#method-nip96").checked;
|
||||||
|
const r_blossom = document.querySelector("#method-blossom").checked;
|
||||||
|
if (r_nip96) {
|
||||||
|
await uploadFilesNip96(file)
|
||||||
|
} else if (r_blossom) {
|
||||||
|
await uploadBlossom(file);
|
||||||
|
}
|
||||||
} catch (ex) {
|
} catch (ex) {
|
||||||
if (ex instanceof Error) {
|
if (ex instanceof Error) {
|
||||||
alert(ex.message);
|
alert(ex.message);
|
||||||
@ -141,7 +147,16 @@
|
|||||||
Welcome to route96
|
Welcome to route96
|
||||||
</h1>
|
</h1>
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
|
<div>
|
||||||
|
<label>
|
||||||
|
NIP-96
|
||||||
|
<input type="radio" name="method" id="method-nip96"/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Blossom
|
||||||
|
<input type="radio" name="method" id="method-blossom"/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
<div style="color: #ff8383;">
|
<div style="color: #ff8383;">
|
||||||
You must have a nostr extension for this to work
|
You must have a nostr extension for this to work
|
||||||
</div>
|
</div>
|
||||||
@ -149,7 +164,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<input type="checkbox" id="no_transform">
|
<input type="checkbox" id="no_transform">
|
||||||
<label for="no_transform">
|
<label for="no_transform">
|
||||||
Disable compression (videos and images)
|
Disable compression (images)
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -12,7 +12,7 @@ pub fn admin_routes() -> Vec<Route> {
|
|||||||
admin_list_files,
|
admin_list_files,
|
||||||
admin_get_self,
|
admin_get_self,
|
||||||
admin_list_reports,
|
admin_list_reports,
|
||||||
admin_acknowledge_report,
|
admin_acknowledge_report
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -15,9 +15,8 @@ use rocket::{routes, Data, Request, Response, Route, State};
|
|||||||
use serde::{Deserialize, Serialize};
|
use serde::{Deserialize, Serialize};
|
||||||
use tokio::io::AsyncRead;
|
use tokio::io::AsyncRead;
|
||||||
use tokio_util::io::StreamReader;
|
use tokio_util::io::StreamReader;
|
||||||
use url::Url;
|
|
||||||
|
|
||||||
#[derive(Debug, Clone, Serialize, Deserialize)]
|
#[derive(Debug, Clone, Serialize)]
|
||||||
#[serde(crate = "rocket::serde")]
|
#[serde(crate = "rocket::serde")]
|
||||||
pub struct BlobDescriptor {
|
pub struct BlobDescriptor {
|
||||||
pub url: String,
|
pub url: String,
|
||||||
@ -226,25 +225,15 @@ async fn mirror(
|
|||||||
settings: &State<Settings>,
|
settings: &State<Settings>,
|
||||||
req: Json<MirrorRequest>,
|
req: Json<MirrorRequest>,
|
||||||
) -> BlossomResponse {
|
) -> BlossomResponse {
|
||||||
if !check_method(&auth.event, "upload") {
|
if !check_method(&auth.event, "mirror") {
|
||||||
return BlossomResponse::error("Invalid request method tag");
|
return BlossomResponse::error("Invalid request method tag");
|
||||||
}
|
}
|
||||||
if let Some(e) = check_whitelist(&auth, settings) {
|
if let Some(e) = check_whitelist(&auth, settings) {
|
||||||
return e;
|
return e;
|
||||||
}
|
}
|
||||||
|
|
||||||
let url = match Url::parse(&req.url) {
|
|
||||||
Ok(u) => u,
|
|
||||||
Err(e) => return BlossomResponse::error(format!("Invalid URL: {}", e)),
|
|
||||||
};
|
|
||||||
|
|
||||||
let hash = url
|
|
||||||
.path_segments()
|
|
||||||
.and_then(|mut c| c.next_back())
|
|
||||||
.and_then(|s| s.split(".").next());
|
|
||||||
|
|
||||||
// download file
|
// download file
|
||||||
let rsp = match reqwest::get(url.clone()).await {
|
let rsp = match reqwest::get(&req.url).await {
|
||||||
Err(e) => {
|
Err(e) => {
|
||||||
error!("Error downloading file: {}", e);
|
error!("Error downloading file: {}", e);
|
||||||
return BlossomResponse::error("Failed to mirror file");
|
return BlossomResponse::error("Failed to mirror file");
|
||||||
@ -261,10 +250,9 @@ async fn mirror(
|
|||||||
let pubkey = auth.event.pubkey.to_bytes().to_vec();
|
let pubkey = auth.event.pubkey.to_bytes().to_vec();
|
||||||
|
|
||||||
process_stream(
|
process_stream(
|
||||||
StreamReader::new(
|
StreamReader::new(rsp.bytes_stream().map(|result| {
|
||||||
rsp.bytes_stream()
|
result.map_err(std::io::Error::other)
|
||||||
.map(|result| result.map_err(std::io::Error::other)),
|
})),
|
||||||
),
|
|
||||||
&mime_type,
|
&mime_type,
|
||||||
&None,
|
&None,
|
||||||
&pubkey,
|
&pubkey,
|
||||||
@ -273,7 +261,6 @@ async fn mirror(
|
|||||||
fs,
|
fs,
|
||||||
db,
|
db,
|
||||||
settings,
|
settings,
|
||||||
hash.and_then(|h| hex::decode(h).ok()),
|
|
||||||
)
|
)
|
||||||
.await
|
.await
|
||||||
}
|
}
|
||||||
@ -380,11 +367,15 @@ async fn process_upload(
|
|||||||
// check quota (only if payments are configured)
|
// check quota (only if payments are configured)
|
||||||
#[cfg(feature = "payments")]
|
#[cfg(feature = "payments")]
|
||||||
if let Some(payment_config) = &settings.payments {
|
if let Some(payment_config) = &settings.payments {
|
||||||
let free_quota = payment_config.free_quota_bytes.unwrap_or(104857600); // Default to 100MB
|
let free_quota = payment_config.free_quota_bytes
|
||||||
|
.unwrap_or(104857600); // Default to 100MB
|
||||||
let pubkey_vec = auth.event.pubkey.to_bytes().to_vec();
|
let pubkey_vec = auth.event.pubkey.to_bytes().to_vec();
|
||||||
|
|
||||||
if size > 0 {
|
if size > 0 {
|
||||||
match db.check_user_quota(&pubkey_vec, size, free_quota).await {
|
match db
|
||||||
|
.check_user_quota(&pubkey_vec, size, free_quota)
|
||||||
|
.await
|
||||||
|
{
|
||||||
Ok(false) => return BlossomResponse::error("Upload would exceed quota"),
|
Ok(false) => return BlossomResponse::error("Upload would exceed quota"),
|
||||||
Err(_) => return BlossomResponse::error("Failed to check quota"),
|
Err(_) => return BlossomResponse::error("Failed to check quota"),
|
||||||
Ok(true) => {} // Quota check passed
|
Ok(true) => {} // Quota check passed
|
||||||
@ -404,7 +395,6 @@ async fn process_upload(
|
|||||||
fs,
|
fs,
|
||||||
db,
|
db,
|
||||||
settings,
|
settings,
|
||||||
None,
|
|
||||||
)
|
)
|
||||||
.await
|
.await
|
||||||
}
|
}
|
||||||
@ -419,7 +409,6 @@ async fn process_stream<'p, S>(
|
|||||||
fs: &State<FileStore>,
|
fs: &State<FileStore>,
|
||||||
db: &State<Database>,
|
db: &State<Database>,
|
||||||
settings: &State<Settings>,
|
settings: &State<Settings>,
|
||||||
expect_hash: Option<Vec<u8>>,
|
|
||||||
) -> BlossomResponse
|
) -> BlossomResponse
|
||||||
where
|
where
|
||||||
S: AsyncRead + Unpin + 'p,
|
S: AsyncRead + Unpin + 'p,
|
||||||
@ -428,15 +417,6 @@ where
|
|||||||
Ok(FileSystemResult::NewFile(blob)) => {
|
Ok(FileSystemResult::NewFile(blob)) => {
|
||||||
let mut ret: FileUpload = (&blob).into();
|
let mut ret: FileUpload = (&blob).into();
|
||||||
|
|
||||||
// check expected hash (mirroring)
|
|
||||||
if let Some(h) = expect_hash {
|
|
||||||
if h != ret.id {
|
|
||||||
if let Err(e) = tokio::fs::remove_file(fs.get(&ret.id)).await {
|
|
||||||
log::warn!("Failed to cleanup file: {}", e);
|
|
||||||
}
|
|
||||||
return BlossomResponse::error("Mirror request failed, server responses with invalid file content (hash mismatch)");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// update file data before inserting
|
// update file data before inserting
|
||||||
ret.name = name.map(|s| s.to_string());
|
ret.name = name.map(|s| s.to_string());
|
||||||
|
|
||||||
@ -463,7 +443,8 @@ where
|
|||||||
#[cfg(feature = "payments")]
|
#[cfg(feature = "payments")]
|
||||||
if size == 0 {
|
if size == 0 {
|
||||||
if let Some(payment_config) = &settings.payments {
|
if let Some(payment_config) = &settings.payments {
|
||||||
let free_quota = payment_config.free_quota_bytes.unwrap_or(104857600); // Default to 100MB
|
let free_quota = payment_config.free_quota_bytes
|
||||||
|
.unwrap_or(104857600); // Default to 100MB
|
||||||
|
|
||||||
match db.check_user_quota(pubkey, upload.size, free_quota).await {
|
match db.check_user_quota(pubkey, upload.size, free_quota).await {
|
||||||
Ok(false) => {
|
Ok(false) => {
|
||||||
|
@ -7,7 +7,7 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
<div className="min-h-screen bg-gray-900">
|
<div className="min-h-screen bg-gray-900">
|
||||||
<div className="max-lg:px-6">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<Header />
|
<Header />
|
||||||
<main className="py-8">
|
<main className="py-8">
|
||||||
<Routes>
|
<Routes>
|
||||||
|
@ -1,370 +0,0 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import { Blossom } from "../upload/blossom";
|
|
||||||
import { FormatBytes } from "../const";
|
|
||||||
import Button from "./button";
|
|
||||||
import usePublisher from "../hooks/publisher";
|
|
||||||
import useLogin from "../hooks/login";
|
|
||||||
|
|
||||||
interface FileMirrorSuggestion {
|
|
||||||
sha256: string;
|
|
||||||
url: string;
|
|
||||||
size: number;
|
|
||||||
mime_type?: string;
|
|
||||||
available_on: string[];
|
|
||||||
missing_from: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MirrorSuggestionsProps {
|
|
||||||
servers: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MirrorProgress {
|
|
||||||
total: number;
|
|
||||||
completed: number;
|
|
||||||
failed: number;
|
|
||||||
errors: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function MirrorSuggestions({ servers }: MirrorSuggestionsProps) {
|
|
||||||
const [suggestions, setSuggestions] = useState<FileMirrorSuggestion[]>([]);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string>();
|
|
||||||
const [mirrorAllProgress, setMirrorAllProgress] = useState<MirrorProgress | null>(null);
|
|
||||||
|
|
||||||
const pub = usePublisher();
|
|
||||||
const login = useLogin();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (servers.length > 1 && pub && login?.pubkey) {
|
|
||||||
fetchSuggestions();
|
|
||||||
}
|
|
||||||
}, [servers, pub, login?.pubkey]);
|
|
||||||
|
|
||||||
async function fetchSuggestions() {
|
|
||||||
if (!pub || !login?.pubkey) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
setLoading(true);
|
|
||||||
setError(undefined);
|
|
||||||
|
|
||||||
// Capture the servers list at the start to avoid race conditions
|
|
||||||
const serverList = [...servers];
|
|
||||||
|
|
||||||
if (serverList.length <= 1) {
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fileMap: Map<string, FileMirrorSuggestion> = new Map();
|
|
||||||
|
|
||||||
// Fetch files from each server
|
|
||||||
for (const serverUrl of serverList) {
|
|
||||||
try {
|
|
||||||
const blossom = new Blossom(serverUrl, pub);
|
|
||||||
const files = await blossom.list(login.pubkey);
|
|
||||||
|
|
||||||
for (const file of files) {
|
|
||||||
const suggestion = fileMap.get(file.sha256);
|
|
||||||
if (suggestion) {
|
|
||||||
suggestion.available_on.push(serverUrl);
|
|
||||||
} else {
|
|
||||||
fileMap.set(file.sha256, {
|
|
||||||
sha256: file.sha256,
|
|
||||||
url: file.url || "",
|
|
||||||
size: file.size,
|
|
||||||
mime_type: file.type,
|
|
||||||
available_on: [serverUrl],
|
|
||||||
missing_from: [],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(`Failed to fetch files from ${serverUrl}:`, e);
|
|
||||||
// Continue with other servers instead of failing completely
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Determine missing servers for each file using the captured server list
|
|
||||||
for (const suggestion of fileMap.values()) {
|
|
||||||
for (const serverUrl of serverList) {
|
|
||||||
if (!suggestion.available_on.includes(serverUrl)) {
|
|
||||||
suggestion.missing_from.push(serverUrl);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Filter to only files that are missing from at least one server and available on at least one
|
|
||||||
const filteredSuggestions = Array.from(fileMap.values()).filter(
|
|
||||||
s => s.missing_from.length > 0 && s.available_on.length > 0
|
|
||||||
);
|
|
||||||
|
|
||||||
setSuggestions(filteredSuggestions);
|
|
||||||
} catch (e) {
|
|
||||||
if (e instanceof Error) {
|
|
||||||
setError(e.message);
|
|
||||||
} else {
|
|
||||||
setError("Failed to fetch mirror suggestions");
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function mirrorAll() {
|
|
||||||
if (!pub || suggestions.length === 0) return;
|
|
||||||
|
|
||||||
// Calculate total operations needed
|
|
||||||
const totalOperations = suggestions.reduce((total, suggestion) =>
|
|
||||||
total + suggestion.missing_from.length, 0
|
|
||||||
);
|
|
||||||
|
|
||||||
setMirrorAllProgress({
|
|
||||||
total: totalOperations,
|
|
||||||
completed: 0,
|
|
||||||
failed: 0,
|
|
||||||
errors: []
|
|
||||||
});
|
|
||||||
|
|
||||||
let completed = 0;
|
|
||||||
let failed = 0;
|
|
||||||
const errors: string[] = [];
|
|
||||||
|
|
||||||
// Mirror all files to all missing servers
|
|
||||||
for (const suggestion of suggestions) {
|
|
||||||
for (const targetServer of suggestion.missing_from) {
|
|
||||||
try {
|
|
||||||
const blossom = new Blossom(targetServer, pub);
|
|
||||||
await blossom.mirror(suggestion.url);
|
|
||||||
completed++;
|
|
||||||
|
|
||||||
setMirrorAllProgress(prev => prev ? {
|
|
||||||
...prev,
|
|
||||||
completed: completed,
|
|
||||||
failed: failed
|
|
||||||
} : null);
|
|
||||||
|
|
||||||
// Update suggestions in real-time
|
|
||||||
setSuggestions(prev =>
|
|
||||||
prev.map(s =>
|
|
||||||
s.sha256 === suggestion.sha256
|
|
||||||
? {
|
|
||||||
...s,
|
|
||||||
available_on: [...s.available_on, targetServer],
|
|
||||||
missing_from: s.missing_from.filter(server => server !== targetServer)
|
|
||||||
}
|
|
||||||
: s
|
|
||||||
).filter(s => s.missing_from.length > 0)
|
|
||||||
);
|
|
||||||
} catch (e) {
|
|
||||||
failed++;
|
|
||||||
const errorMessage = e instanceof Error ? e.message : "Unknown error";
|
|
||||||
const serverHost = new URL(targetServer).hostname;
|
|
||||||
errors.push(`${serverHost}: ${errorMessage}`);
|
|
||||||
|
|
||||||
setMirrorAllProgress(prev => prev ? {
|
|
||||||
...prev,
|
|
||||||
completed: completed,
|
|
||||||
failed: failed,
|
|
||||||
errors: [...errors]
|
|
||||||
} : null);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Keep progress visible for a moment before clearing
|
|
||||||
setTimeout(() => {
|
|
||||||
setMirrorAllProgress(null);
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Calculate coverage statistics
|
|
||||||
const totalFiles = suggestions.length;
|
|
||||||
const totalMirrorOperations = suggestions.reduce((total, suggestion) =>
|
|
||||||
total + suggestion.missing_from.length, 0
|
|
||||||
);
|
|
||||||
const totalSize = suggestions.reduce((total, suggestion) => total + suggestion.size, 0);
|
|
||||||
|
|
||||||
// Calculate coverage per server
|
|
||||||
const serverCoverage = servers.map(serverUrl => {
|
|
||||||
const filesOnServer = suggestions.filter(s => s.available_on.includes(serverUrl)).length;
|
|
||||||
const totalFilesAcrossAllServers = new Set(suggestions.map(s => s.sha256)).size;
|
|
||||||
const coveragePercentage = totalFilesAcrossAllServers > 0 ?
|
|
||||||
Math.round((filesOnServer / totalFilesAcrossAllServers) * 100) : 100;
|
|
||||||
|
|
||||||
return {
|
|
||||||
url: serverUrl,
|
|
||||||
hostname: new URL(serverUrl).hostname,
|
|
||||||
filesCount: filesOnServer,
|
|
||||||
totalFiles: totalFilesAcrossAllServers,
|
|
||||||
coveragePercentage
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
if (servers.length <= 1) {
|
|
||||||
return null; // No suggestions needed for single server
|
|
||||||
}
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Mirror Suggestions</h3>
|
|
||||||
<p className="text-gray-400">Loading mirror suggestions...</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Mirror Suggestions</h3>
|
|
||||||
<div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg mb-4">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
<Button onClick={fetchSuggestions} className="btn-secondary">
|
|
||||||
Retry
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (suggestions.length === 0) {
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Mirror Suggestions</h3>
|
|
||||||
<p className="text-gray-400">All your files are synchronized across all servers.</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="card">
|
|
||||||
<h3 className="text-lg font-semibold mb-4">Mirror Coverage</h3>
|
|
||||||
|
|
||||||
{/* Coverage Summary */}
|
|
||||||
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6">
|
|
||||||
<div className="grid grid-cols-3 gap-4 text-center">
|
|
||||||
<div>
|
|
||||||
<div className="text-2xl font-bold text-blue-400">{totalFiles}</div>
|
|
||||||
<div className="text-xs text-gray-400">Files to Mirror</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-2xl font-bold text-orange-400">{totalMirrorOperations}</div>
|
|
||||||
<div className="text-xs text-gray-400">Operations Needed</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-2xl font-bold text-green-400">{FormatBytes(totalSize)}</div>
|
|
||||||
<div className="text-xs text-gray-400">Total Size</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Server Coverage */}
|
|
||||||
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6">
|
|
||||||
<h4 className="text-sm font-semibold text-gray-300 mb-3">Coverage by Server</h4>
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
||||||
{serverCoverage.map((server) => (
|
|
||||||
<div key={server.url} className="bg-gray-750 border border-gray-600 rounded-lg p-3">
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<span className="text-sm font-medium text-gray-300 truncate">
|
|
||||||
{server.hostname}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={`text-sm font-semibold ${server.coveragePercentage === 100
|
|
||||||
? "text-green-400"
|
|
||||||
: server.coveragePercentage >= 80
|
|
||||||
? "text-yellow-400"
|
|
||||||
: "text-red-400"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{server.coveragePercentage}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-gray-700 rounded-full h-2 mb-2">
|
|
||||||
<div
|
|
||||||
className={`h-2 rounded-full transition-all duration-300 ${server.coveragePercentage === 100
|
|
||||||
? "bg-green-500"
|
|
||||||
: server.coveragePercentage >= 80
|
|
||||||
? "bg-yellow-500"
|
|
||||||
: "bg-red-500"
|
|
||||||
}`}
|
|
||||||
style={{
|
|
||||||
width: `${server.coveragePercentage}%`,
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-400 text-center">
|
|
||||||
{server.filesCount} / {server.totalFiles} files
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mirror All Section */}
|
|
||||||
{!mirrorAllProgress ? (
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-gray-400 mb-4">
|
|
||||||
{totalFiles} files need to be synchronized across your servers
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
onClick={mirrorAll}
|
|
||||||
className="btn-primary"
|
|
||||||
disabled={totalMirrorOperations === 0}
|
|
||||||
>
|
|
||||||
Mirror Everything
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-4">
|
|
||||||
{/* Progress Bar */}
|
|
||||||
<div>
|
|
||||||
<div className="flex justify-between text-sm mb-2">
|
|
||||||
<span className="text-gray-400">Progress</span>
|
|
||||||
<span className="text-gray-400">
|
|
||||||
{mirrorAllProgress.completed + mirrorAllProgress.failed} / {mirrorAllProgress.total}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-gray-700 rounded-full h-2">
|
|
||||||
<div
|
|
||||||
className="bg-blue-500 h-2 rounded-full transition-all duration-300"
|
|
||||||
style={{
|
|
||||||
width: `${((mirrorAllProgress.completed + mirrorAllProgress.failed) / mirrorAllProgress.total) * 100}%`
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Status Summary */}
|
|
||||||
<div className="grid grid-cols-3 gap-4 text-center text-sm">
|
|
||||||
<div>
|
|
||||||
<div className="text-green-400 font-semibold">{mirrorAllProgress.completed}</div>
|
|
||||||
<div className="text-gray-400">Completed</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-red-400 font-semibold">{mirrorAllProgress.failed}</div>
|
|
||||||
<div className="text-gray-400">Failed</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="text-gray-400 font-semibold">
|
|
||||||
{mirrorAllProgress.total - mirrorAllProgress.completed - mirrorAllProgress.failed}
|
|
||||||
</div>
|
|
||||||
<div className="text-gray-400">Remaining</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Errors */}
|
|
||||||
{mirrorAllProgress.errors.length > 0 && (
|
|
||||||
<div className="bg-red-900/20 border border-red-800 rounded-lg p-3">
|
|
||||||
<h4 className="text-red-400 font-semibold mb-2">Errors ({mirrorAllProgress.errors.length})</h4>
|
|
||||||
<div className="space-y-1 max-h-32 overflow-y-auto">
|
|
||||||
{mirrorAllProgress.errors.map((error, index) => (
|
|
||||||
<div key={index} className="text-red-300 text-xs">{error}</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
@ -43,6 +43,3 @@ export function FormatBytes(b: number, f?: number) {
|
|||||||
if (b >= kiB) return (b / kiB).toFixed(f) + " KiB";
|
if (b >= kiB) return (b / kiB).toFixed(f) + " KiB";
|
||||||
return b.toFixed(f) + " B";
|
return b.toFixed(f) + " B";
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ServerUrl =
|
|
||||||
import.meta.env.VITE_API_URL || `${location.protocol}//${location.host}`;
|
|
@ -1,25 +0,0 @@
|
|||||||
import useLogin from "./login";
|
|
||||||
import { useRequestBuilder } from "@snort/system-react";
|
|
||||||
import { EventKind, RequestBuilder } from "@snort/system";
|
|
||||||
import { dedupe, removeUndefined, sanitizeRelayUrl } from "@snort/shared";
|
|
||||||
import { ServerUrl } from "../const";
|
|
||||||
|
|
||||||
const DefaultMediaServers = ["https://blossom.band/", "https://blossom.primal.net", ServerUrl]
|
|
||||||
|
|
||||||
export function useBlossomServers() {
|
|
||||||
const login = useLogin();
|
|
||||||
|
|
||||||
const rb = new RequestBuilder("media-servers");
|
|
||||||
if (login?.pubkey) {
|
|
||||||
rb.withFilter()
|
|
||||||
.kinds([10_063 as EventKind])
|
|
||||||
.authors([login.pubkey]);
|
|
||||||
}
|
|
||||||
const req = useRequestBuilder(rb);
|
|
||||||
|
|
||||||
const servers = req === undefined ? undefined :
|
|
||||||
req
|
|
||||||
.flatMap((e) => e.tags.filter(t => t[0] === "server")
|
|
||||||
.map((t) => t[1]));
|
|
||||||
return dedupe(removeUndefined([...DefaultMediaServers, ...(servers ?? [])].map(sanitizeRelayUrl)));
|
|
||||||
}
|
|
@ -65,7 +65,7 @@ export class Blossom {
|
|||||||
const rsp = await this.#req(
|
const rsp = await this.#req(
|
||||||
"mirror",
|
"mirror",
|
||||||
"PUT",
|
"PUT",
|
||||||
"upload",
|
"mirror",
|
||||||
JSON.stringify({ url }),
|
JSON.stringify({ url }),
|
||||||
undefined,
|
undefined,
|
||||||
{
|
{
|
||||||
|
@ -3,7 +3,6 @@ export async function openFile(): Promise<File | undefined> {
|
|||||||
const elm = document.createElement("input");
|
const elm = document.createElement("input");
|
||||||
let lock = false;
|
let lock = false;
|
||||||
elm.type = "file";
|
elm.type = "file";
|
||||||
elm.multiple = true; // Allow multiple file selection
|
|
||||||
const handleInput = (e: Event) => {
|
const handleInput = (e: Event) => {
|
||||||
lock = true;
|
lock = true;
|
||||||
const elm = e.target as HTMLInputElement;
|
const elm = e.target as HTMLInputElement;
|
||||||
@ -29,35 +28,3 @@ export async function openFile(): Promise<File | undefined> {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function openFiles(): Promise<FileList | undefined> {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
const elm = document.createElement("input");
|
|
||||||
let lock = false;
|
|
||||||
elm.type = "file";
|
|
||||||
elm.multiple = true;
|
|
||||||
const handleInput = (e: Event) => {
|
|
||||||
lock = true;
|
|
||||||
const elm = e.target as HTMLInputElement;
|
|
||||||
if ((elm.files?.length ?? 0) > 0) {
|
|
||||||
resolve(elm.files!);
|
|
||||||
} else {
|
|
||||||
resolve(undefined);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
elm.onchange = (e) => handleInput(e);
|
|
||||||
elm.click();
|
|
||||||
window.addEventListener(
|
|
||||||
"focus",
|
|
||||||
() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (!lock) {
|
|
||||||
resolve(undefined);
|
|
||||||
}
|
|
||||||
}, 300);
|
|
||||||
},
|
|
||||||
{ once: true },
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
@ -43,7 +43,7 @@ export default function Header() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="border-b border-gray-700 bg-gray-800 w-full">
|
<header className="border-b border-gray-700 bg-gray-800 w-full">
|
||||||
<div className="px-4 flex justify-between items-center py-4">
|
<div className="px-4 sm:px-6 lg:px-8 flex justify-between items-center py-4">
|
||||||
<div className="flex items-center space-x-8">
|
<div className="flex items-center space-x-8">
|
||||||
<Link to="/">
|
<Link to="/">
|
||||||
<div className="text-2xl font-bold text-gray-100 hover:text-blue-400 transition-colors">
|
<div className="text-2xl font-bold text-gray-100 hover:text-blue-400 transition-colors">
|
||||||
|
@ -3,41 +3,36 @@ import Button from "../components/button";
|
|||||||
import FileList from "./files";
|
import FileList from "./files";
|
||||||
import PaymentFlow from "../components/payment";
|
import PaymentFlow from "../components/payment";
|
||||||
import ProgressBar from "../components/progress-bar";
|
import ProgressBar from "../components/progress-bar";
|
||||||
import MirrorSuggestions from "../components/mirror-suggestions";
|
import { openFile } from "../upload";
|
||||||
import { useBlossomServers } from "../hooks/use-blossom-servers";
|
import { Blossom } from "../upload/blossom";
|
||||||
import { openFiles } from "../upload";
|
|
||||||
import { Blossom, BlobDescriptor } from "../upload/blossom";
|
|
||||||
import useLogin from "../hooks/login";
|
import useLogin from "../hooks/login";
|
||||||
import usePublisher from "../hooks/publisher";
|
import usePublisher from "../hooks/publisher";
|
||||||
import { Nip96, Nip96FileList } from "../upload/nip96";
|
import { Nip96, Nip96FileList } from "../upload/nip96";
|
||||||
import { AdminSelf, Route96 } from "../upload/admin";
|
import { AdminSelf, Route96 } from "../upload/admin";
|
||||||
import { FormatBytes, ServerUrl } from "../const";
|
import { FormatBytes } from "../const";
|
||||||
import { UploadProgress } from "../upload/progress";
|
import { UploadProgress } from "../upload/progress";
|
||||||
|
|
||||||
export default function Upload() {
|
export default function Upload() {
|
||||||
const [stripMetadata, setStripMetadata] = useState(true);
|
const [type, setType] = useState<"blossom" | "nip96">("blossom");
|
||||||
|
const [noCompress, setNoCompress] = useState(false);
|
||||||
|
const [toUpload, setToUpload] = useState<File>();
|
||||||
const [self, setSelf] = useState<AdminSelf>();
|
const [self, setSelf] = useState<AdminSelf>();
|
||||||
const [error, setError] = useState<string>();
|
const [error, setError] = useState<string>();
|
||||||
const [results, setResults] = useState<Array<BlobDescriptor>>([]);
|
const [results, setResults] = useState<Array<object>>([]);
|
||||||
const [listedFiles, setListedFiles] = useState<Nip96FileList>();
|
const [listedFiles, setListedFiles] = useState<Nip96FileList>();
|
||||||
const [listedPage, setListedPage] = useState(0);
|
const [listedPage, setListedPage] = useState(0);
|
||||||
const [showPaymentFlow, setShowPaymentFlow] = useState(false);
|
const [showPaymentFlow, setShowPaymentFlow] = useState(false);
|
||||||
const [isUploading, setIsUploading] = useState(false);
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
const [uploadProgress, setUploadProgress] = useState<UploadProgress>();
|
const [uploadProgress, setUploadProgress] = useState<UploadProgress>();
|
||||||
|
|
||||||
const blossomServers = useBlossomServers();
|
|
||||||
|
|
||||||
const login = useLogin();
|
const login = useLogin();
|
||||||
const pub = usePublisher();
|
const pub = usePublisher();
|
||||||
|
|
||||||
// Check if file should have compression enabled by default
|
const url =
|
||||||
const shouldCompress = (file: File) => {
|
import.meta.env.VITE_API_URL || `${location.protocol}//${location.host}`;
|
||||||
return file.type.startsWith('video/') || file.type.startsWith('image/');
|
async function doUpload() {
|
||||||
};
|
|
||||||
|
|
||||||
async function doUpload(file: File) {
|
|
||||||
if (!pub) return;
|
if (!pub) return;
|
||||||
if (!file) return;
|
if (!toUpload) return;
|
||||||
if (isUploading) return; // Prevent multiple uploads
|
if (isUploading) return; // Prevent multiple uploads
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@ -49,13 +44,19 @@ export default function Upload() {
|
|||||||
setUploadProgress(progress);
|
setUploadProgress(progress);
|
||||||
};
|
};
|
||||||
|
|
||||||
const uploader = new Blossom(ServerUrl, pub);
|
if (type === "blossom") {
|
||||||
// Use compression for video and image files when metadata stripping is enabled
|
const uploader = new Blossom(url, pub);
|
||||||
const useCompression = shouldCompress(file) && stripMetadata;
|
const result = noCompress
|
||||||
const result = useCompression
|
? await uploader.upload(toUpload, onProgress)
|
||||||
? await uploader.media(file, onProgress)
|
: await uploader.media(toUpload, onProgress);
|
||||||
: await uploader.upload(file, onProgress);
|
setResults((s) => [...s, result]);
|
||||||
setResults((s) => [...s, result]);
|
}
|
||||||
|
if (type === "nip96") {
|
||||||
|
const uploader = new Nip96(url, pub);
|
||||||
|
await uploader.loadInfo();
|
||||||
|
const result = await uploader.upload(toUpload, onProgress);
|
||||||
|
setResults((s) => [...s, result]);
|
||||||
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (e instanceof Error) {
|
if (e instanceof Error) {
|
||||||
setError(e.message || "Upload failed - no error details provided");
|
setError(e.message || "Upload failed - no error details provided");
|
||||||
@ -70,33 +71,12 @@ export default function Upload() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleFileSelection() {
|
|
||||||
if (isUploading) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const files = await openFiles();
|
|
||||||
if (!files || files.length === 0) return;
|
|
||||||
|
|
||||||
// Start uploading each file immediately
|
|
||||||
for (let i = 0; i < files.length; i++) {
|
|
||||||
const file = files[i];
|
|
||||||
await doUpload(file);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
if (e instanceof Error) {
|
|
||||||
setError(e.message || "File selection failed");
|
|
||||||
} else {
|
|
||||||
setError("File selection failed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const listUploads = useCallback(
|
const listUploads = useCallback(
|
||||||
async (n: number) => {
|
async (n: number) => {
|
||||||
if (!pub) return;
|
if (!pub) return;
|
||||||
try {
|
try {
|
||||||
setError(undefined);
|
setError(undefined);
|
||||||
const uploader = new Nip96(ServerUrl, pub);
|
const uploader = new Nip96(url, pub);
|
||||||
await uploader.loadInfo();
|
await uploader.loadInfo();
|
||||||
const result = await uploader.listFiles(n, 50);
|
const result = await uploader.listFiles(n, 50);
|
||||||
setListedFiles(result);
|
setListedFiles(result);
|
||||||
@ -112,14 +92,14 @@ export default function Upload() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[pub],
|
[pub, url],
|
||||||
);
|
);
|
||||||
|
|
||||||
async function deleteFile(id: string) {
|
async function deleteFile(id: string) {
|
||||||
if (!pub) return;
|
if (!pub) return;
|
||||||
try {
|
try {
|
||||||
setError(undefined);
|
setError(undefined);
|
||||||
const uploader = new Blossom(ServerUrl, pub);
|
const uploader = new Blossom(url, pub);
|
||||||
await uploader.delete(id);
|
await uploader.delete(id);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
if (e instanceof Error) {
|
if (e instanceof Error) {
|
||||||
@ -140,10 +120,10 @@ export default function Upload() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (pub && !self) {
|
if (pub && !self) {
|
||||||
const r96 = new Route96(ServerUrl, pub);
|
const r96 = new Route96(url, pub);
|
||||||
r96.getSelf().then((v) => setSelf(v.data));
|
r96.getSelf().then((v) => setSelf(v.data));
|
||||||
}
|
}
|
||||||
}, [pub, self]);
|
}, [pub, self, url]);
|
||||||
|
|
||||||
if (!login) {
|
if (!login) {
|
||||||
return (
|
return (
|
||||||
@ -159,303 +139,385 @@ export default function Upload() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full px-4">
|
<div className="max-w-4xl mx-auto space-y-8">
|
||||||
{error && (
|
{error && (
|
||||||
<div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg mb-6">
|
<div className="bg-red-900/20 border border-red-800 text-red-400 px-4 py-3 rounded-lg">
|
||||||
{error}
|
{error}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-6">
|
<div className="card">
|
||||||
{/* Upload Widget */}
|
<h2 className="text-xl font-semibold mb-6">Upload Settings</h2>
|
||||||
<div className="card flex-1 min-w-80">
|
|
||||||
<h2 className="text-xl font-semibold mb-6">Upload Files</h2>
|
|
||||||
|
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div>
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||||
|
Upload Method
|
||||||
|
</label>
|
||||||
|
<div className="flex gap-6">
|
||||||
<label className="flex items-center cursor-pointer">
|
<label className="flex items-center cursor-pointer">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="radio"
|
||||||
checked={stripMetadata}
|
checked={type === "blossom"}
|
||||||
onChange={(e) => setStripMetadata(e.target.checked)}
|
onChange={() => setType("blossom")}
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
/>
|
/>
|
||||||
<span className="text-sm font-medium text-gray-300">
|
<span className="text-sm font-medium text-gray-300">
|
||||||
Strip metadata (for images)
|
Blossom
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
checked={type === "nip96"}
|
||||||
|
onChange={() => setType("nip96")}
|
||||||
|
className="mr-2"
|
||||||
|
/>
|
||||||
|
<span className="text-sm font-medium text-gray-300">
|
||||||
|
NIP-96
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Upload Progress */}
|
|
||||||
{isUploading && uploadProgress && (
|
|
||||||
<ProgressBar
|
|
||||||
progress={uploadProgress}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<Button
|
|
||||||
onClick={handleFileSelection}
|
|
||||||
className="btn-primary flex-1"
|
|
||||||
disabled={isUploading}
|
|
||||||
>
|
|
||||||
{isUploading ? "Uploading..." : "Select Files to Upload"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Storage Usage Widget */}
|
<div>
|
||||||
{self && (
|
<label className="flex items-center cursor-pointer">
|
||||||
<div className="card flex-1 min-w-80">
|
<input
|
||||||
<h3 className="text-lg font-semibold mb-4">Storage Usage</h3>
|
type="checkbox"
|
||||||
<div className="space-y-4">
|
checked={noCompress}
|
||||||
{/* File Count */}
|
onChange={(e) => setNoCompress(e.target.checked)}
|
||||||
<div className="flex justify-between text-sm">
|
className="mr-2"
|
||||||
<span>Files:</span>
|
/>
|
||||||
<span className="font-medium">
|
<span className="text-sm font-medium text-gray-300">
|
||||||
{self.file_count.toLocaleString()}
|
Disable Compression
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Total Usage */}
|
{toUpload && (
|
||||||
<div className="flex justify-between text-sm">
|
<div className="border-2 border-dashed border-gray-600 rounded-lg p-4">
|
||||||
<span>Total Size:</span>
|
<FileList files={[toUpload]} />
|
||||||
<span className="font-medium">
|
|
||||||
{FormatBytes(self.total_size)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Only show quota information if available */}
|
|
||||||
{self.total_available_quota && self.total_available_quota > 0 && (
|
|
||||||
<>
|
|
||||||
{/* Progress Bar */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span>Quota Used:</span>
|
|
||||||
<span className="font-medium">
|
|
||||||
{FormatBytes(self.total_size)} of{" "}
|
|
||||||
{FormatBytes(self.total_available_quota)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="w-full bg-gray-700 rounded-full h-2.5">
|
|
||||||
<div
|
|
||||||
className={`h-2.5 rounded-full transition-all duration-300 ${self.total_size / self.total_available_quota > 0.8
|
|
||||||
? "bg-red-500"
|
|
||||||
: self.total_size / self.total_available_quota > 0.6
|
|
||||||
? "bg-yellow-500"
|
|
||||||
: "bg-green-500"
|
|
||||||
}`}
|
|
||||||
style={{
|
|
||||||
width: `${Math.min(100, (self.total_size / self.total_available_quota) * 100)}%`,
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between text-xs text-gray-400">
|
|
||||||
<span>
|
|
||||||
{(
|
|
||||||
(self.total_size / self.total_available_quota) *
|
|
||||||
100
|
|
||||||
).toFixed(1)}
|
|
||||||
% used
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={`${self.total_size / self.total_available_quota > 0.8
|
|
||||||
? "text-red-400"
|
|
||||||
: self.total_size / self.total_available_quota > 0.6
|
|
||||||
? "text-yellow-400"
|
|
||||||
: "text-green-400"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{FormatBytes(
|
|
||||||
Math.max(
|
|
||||||
0,
|
|
||||||
self.total_available_quota - self.total_size,
|
|
||||||
),
|
|
||||||
)}{" "}
|
|
||||||
remaining
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quota Breakdown - excluding free quota */}
|
|
||||||
<div className="space-y-2 pt-2 border-t border-gray-700">
|
|
||||||
{(self.quota ?? 0) > 0 && (
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span>Paid Quota:</span>
|
|
||||||
<span className="font-medium">
|
|
||||||
{FormatBytes(self.quota!)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{(self.paid_until ?? 0) > 0 && (
|
|
||||||
<div className="flex justify-between text-sm">
|
|
||||||
<span>Expires:</span>
|
|
||||||
<div className="text-right">
|
|
||||||
<div className="font-medium">
|
|
||||||
{new Date(
|
|
||||||
self.paid_until! * 1000,
|
|
||||||
).toLocaleDateString()}
|
|
||||||
</div>
|
|
||||||
<div className="text-xs text-gray-400">
|
|
||||||
{(() => {
|
|
||||||
const now = Date.now() / 1000;
|
|
||||||
const daysLeft = Math.max(
|
|
||||||
0,
|
|
||||||
Math.ceil(
|
|
||||||
(self.paid_until! - now) / (24 * 60 * 60),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
return daysLeft > 0
|
|
||||||
? `${daysLeft} days left`
|
|
||||||
: "Expired";
|
|
||||||
})()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Upload Progress */}
|
||||||
|
{isUploading && uploadProgress && (
|
||||||
|
<ProgressBar
|
||||||
|
progress={uploadProgress}
|
||||||
|
fileName={toUpload?.name}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
<Button
|
<Button
|
||||||
onClick={() => setShowPaymentFlow(!showPaymentFlow)}
|
onClick={async () => {
|
||||||
className="btn-primary w-full mt-4"
|
const f = await openFile();
|
||||||
|
setToUpload(f);
|
||||||
|
}}
|
||||||
|
className="btn-secondary flex-1"
|
||||||
|
disabled={isUploading}
|
||||||
>
|
>
|
||||||
{showPaymentFlow ? "Hide" : "Show"} Payment Options
|
Choose File
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={doUpload}
|
||||||
|
disabled={!toUpload || isUploading}
|
||||||
|
className="btn-primary flex-1"
|
||||||
|
>
|
||||||
|
{isUploading ? "Uploading..." : "Upload"}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Payment Flow Widget */}
|
{self && (
|
||||||
{showPaymentFlow && pub && (
|
<div className="card max-w-2xl mx-auto">
|
||||||
<div className="card flex-1 min-w-80">
|
<h3 className="text-lg font-semibold mb-4">Storage Quota</h3>
|
||||||
<PaymentFlow
|
<div className="space-y-4">
|
||||||
route96={new Route96(ServerUrl, pub)}
|
{self.total_available_quota && self.total_available_quota > 0 && (
|
||||||
onPaymentRequested={(pr) => {
|
<>
|
||||||
console.log("Payment requested:", pr);
|
{/* File Count */}
|
||||||
}}
|
<div className="flex justify-between text-sm">
|
||||||
userInfo={self}
|
<span>Files:</span>
|
||||||
/>
|
<span className="font-medium">
|
||||||
</div>
|
{self.file_count.toLocaleString()}
|
||||||
)}
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Mirror Suggestions Widget */}
|
{/* Progress Bar */}
|
||||||
{blossomServers && blossomServers.length > 1 && (
|
<div className="space-y-2">
|
||||||
<div className="w-full">
|
<div className="flex justify-between text-sm">
|
||||||
<MirrorSuggestions
|
<span>Used:</span>
|
||||||
servers={blossomServers}
|
<span className="font-medium">
|
||||||
/>
|
{FormatBytes(self.total_size)} of{" "}
|
||||||
</div>
|
{FormatBytes(self.total_available_quota)}
|
||||||
)}
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-gray-700 rounded-full h-2.5">
|
||||||
|
<div
|
||||||
|
className={`h-2.5 rounded-full transition-all duration-300 ${
|
||||||
|
self.total_size / self.total_available_quota > 0.8
|
||||||
|
? "bg-red-500"
|
||||||
|
: self.total_size / self.total_available_quota > 0.6
|
||||||
|
? "bg-yellow-500"
|
||||||
|
: "bg-green-500"
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
width: `${Math.min(100, (self.total_size / self.total_available_quota) * 100)}%`,
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-xs text-gray-400">
|
||||||
|
<span>
|
||||||
|
{(
|
||||||
|
(self.total_size / self.total_available_quota) *
|
||||||
|
100
|
||||||
|
).toFixed(1)}
|
||||||
|
% used
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`${
|
||||||
|
self.total_size / self.total_available_quota > 0.8
|
||||||
|
? "text-red-400"
|
||||||
|
: self.total_size / self.total_available_quota > 0.6
|
||||||
|
? "text-yellow-400"
|
||||||
|
: "text-green-400"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{FormatBytes(
|
||||||
|
Math.max(
|
||||||
|
0,
|
||||||
|
self.total_available_quota - self.total_size,
|
||||||
|
),
|
||||||
|
)}{" "}
|
||||||
|
remaining
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Files Widget */}
|
{/* Quota Breakdown */}
|
||||||
<div className="card w-full">
|
<div className="space-y-2 pt-2 border-t border-gray-700">
|
||||||
<div className="flex justify-between items-center mb-6">
|
{self.free_quota && self.free_quota > 0 && (
|
||||||
<h2 className="text-xl font-semibold">Your Files</h2>
|
<div className="flex justify-between text-sm">
|
||||||
{!listedFiles && (
|
<span>Free Quota:</span>
|
||||||
<Button onClick={() => listUploads(0)} className="btn-primary">
|
<span className="font-medium">
|
||||||
Load Files
|
{FormatBytes(self.free_quota)}
|
||||||
</Button>
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(self.quota ?? 0) > 0 && (
|
||||||
|
<div className="flex justify-between text-sm">
|
||||||
|
<span>Paid Quota:</span>
|
||||||
|
<span className="font-medium">
|
||||||
|
{FormatBytes(self.quota!)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(self.paid_until ?? 0) > 0 && (
|
||||||
|
<div className="flex justify-between text-sm">
|
||||||
|
<span>Expires:</span>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-medium">
|
||||||
|
{new Date(
|
||||||
|
self.paid_until! * 1000,
|
||||||
|
).toLocaleDateString()}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-400">
|
||||||
|
{(() => {
|
||||||
|
const now = Date.now() / 1000;
|
||||||
|
const daysLeft = Math.max(
|
||||||
|
0,
|
||||||
|
Math.ceil(
|
||||||
|
(self.paid_until! - now) / (24 * 60 * 60),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
return daysLeft > 0
|
||||||
|
? `${daysLeft} days left`
|
||||||
|
: "Expired";
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(!self.total_available_quota ||
|
||||||
|
self.total_available_quota === 0) && (
|
||||||
|
<div className="text-center py-4 text-gray-400">
|
||||||
|
<p>No quota information available</p>
|
||||||
|
<p className="text-sm">
|
||||||
|
Contact administrator for storage access
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={() => setShowPaymentFlow(!showPaymentFlow)}
|
||||||
|
className="btn-primary w-full mt-4"
|
||||||
|
>
|
||||||
|
{showPaymentFlow ? "Hide" : "Show"} Payment Options
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{listedFiles && (
|
{showPaymentFlow && pub && (
|
||||||
<FileList
|
<div className="card">
|
||||||
files={listedFiles.files}
|
<PaymentFlow
|
||||||
pages={Math.ceil(listedFiles.total / listedFiles.count)}
|
route96={new Route96(url, pub)}
|
||||||
page={listedFiles.page}
|
onPaymentRequested={(pr) => {
|
||||||
onPage={(x) => setListedPage(x)}
|
console.log("Payment requested:", pr);
|
||||||
onDelete={async (x) => {
|
}}
|
||||||
await deleteFile(x);
|
userInfo={self}
|
||||||
await listUploads(listedPage);
|
/>
|
||||||
}}
|
</div>
|
||||||
/>
|
)}
|
||||||
|
|
||||||
|
<div className="card">
|
||||||
|
<div className="flex justify-between items-center mb-6">
|
||||||
|
<h2 className="text-xl font-semibold">Your Files</h2>
|
||||||
|
{!listedFiles && (
|
||||||
|
<Button onClick={() => listUploads(0)} className="btn-primary">
|
||||||
|
Load Files
|
||||||
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Upload Results Widget */}
|
{listedFiles && (
|
||||||
{results.length > 0 && (
|
<FileList
|
||||||
<div className="card w-full">
|
files={listedFiles.files}
|
||||||
<h3 className="text-lg font-semibold mb-4">Upload Results</h3>
|
pages={Math.ceil(listedFiles.total / listedFiles.count)}
|
||||||
<div className="space-y-4">
|
page={listedFiles.page}
|
||||||
{results.map((result, index) => (
|
onPage={(x) => setListedPage(x)}
|
||||||
<div
|
onDelete={async (x) => {
|
||||||
key={index}
|
await deleteFile(x);
|
||||||
className="bg-gray-800 border border-gray-700 rounded-lg p-4"
|
await listUploads(listedPage);
|
||||||
>
|
}}
|
||||||
<div className="flex items-start justify-between mb-3">
|
/>
|
||||||
<div className="flex-1">
|
|
||||||
<h4 className="font-medium text-green-400 mb-1">
|
|
||||||
✅ Upload Successful
|
|
||||||
</h4>
|
|
||||||
<p className="text-sm text-gray-400">
|
|
||||||
{new Date(
|
|
||||||
(result.uploaded || Date.now() / 1000) * 1000,
|
|
||||||
).toLocaleString()}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<span className="text-xs bg-blue-900/50 text-blue-300 px-2 py-1 rounded">
|
|
||||||
{result.type || "Unknown type"}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-400">File Size</p>
|
|
||||||
<p className="font-medium">
|
|
||||||
{FormatBytes(result.size || 0)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
{result.url && (
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-400 mb-1">File URL</p>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<code className="text-xs bg-gray-900 text-green-400 px-2 py-1 rounded flex-1 overflow-hidden">
|
|
||||||
{result.url}
|
|
||||||
</code>
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
navigator.clipboard.writeText(result.url!)
|
|
||||||
}
|
|
||||||
className="text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors"
|
|
||||||
title="Copy URL"
|
|
||||||
>
|
|
||||||
Copy
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-gray-400 mb-1">
|
|
||||||
File Hash (SHA256)
|
|
||||||
</p>
|
|
||||||
<code className="text-xs bg-gray-900 text-gray-400 px-2 py-1 rounded block overflow-hidden">
|
|
||||||
{result.sha256}
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<details className="mt-4">
|
|
||||||
<summary className="text-sm text-gray-400 cursor-pointer hover:text-gray-300">
|
|
||||||
Show raw JSON data
|
|
||||||
</summary>
|
|
||||||
<pre className="text-xs bg-gray-900 text-gray-300 p-3 rounded mt-2 overflow-auto">
|
|
||||||
{JSON.stringify(result, undefined, 2)}
|
|
||||||
</pre>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{results.length > 0 && (
|
||||||
|
<div className="card">
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Upload Results</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{results.map((result: any, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-gray-800 border border-gray-700 rounded-lg p-4"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between mb-3">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h4 className="font-medium text-green-400 mb-1">
|
||||||
|
✅ Upload Successful
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-400">
|
||||||
|
{new Date(
|
||||||
|
(result.uploaded || Date.now() / 1000) * 1000,
|
||||||
|
).toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<span className="text-xs bg-blue-900/50 text-blue-300 px-2 py-1 rounded">
|
||||||
|
{result.type || "Unknown type"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-400">File Size</p>
|
||||||
|
<p className="font-medium">
|
||||||
|
{FormatBytes(result.size || 0)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{result.nip94?.find((tag: any[]) => tag[0] === "dim") && (
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-400">Dimensions</p>
|
||||||
|
<p className="font-medium">
|
||||||
|
{
|
||||||
|
result.nip94.find(
|
||||||
|
(tag: any[]) => tag[0] === "dim",
|
||||||
|
)?.[1]
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-400 mb-1">File URL</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="text-xs bg-gray-900 text-green-400 px-2 py-1 rounded flex-1 overflow-hidden">
|
||||||
|
{result.url}
|
||||||
|
</code>
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
navigator.clipboard.writeText(result.url)
|
||||||
|
}
|
||||||
|
className="text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors"
|
||||||
|
title="Copy URL"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{result.nip94?.find((tag: any[]) => tag[0] === "thumb") && (
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-400 mb-1">
|
||||||
|
Thumbnail URL
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="text-xs bg-gray-900 text-blue-400 px-2 py-1 rounded flex-1 overflow-hidden">
|
||||||
|
{
|
||||||
|
result.nip94.find(
|
||||||
|
(tag: any[]) => tag[0] === "thumb",
|
||||||
|
)?.[1]
|
||||||
|
}
|
||||||
|
</code>
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
navigator.clipboard.writeText(
|
||||||
|
result.nip94.find(
|
||||||
|
(tag: any[]) => tag[0] === "thumb",
|
||||||
|
)?.[1],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
className="text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors"
|
||||||
|
title="Copy Thumbnail URL"
|
||||||
|
>
|
||||||
|
Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-400 mb-1">
|
||||||
|
File Hash (SHA256)
|
||||||
|
</p>
|
||||||
|
<code className="text-xs bg-gray-900 text-gray-400 px-2 py-1 rounded block overflow-hidden">
|
||||||
|
{result.sha256}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<details className="mt-4">
|
||||||
|
<summary className="text-sm text-gray-400 cursor-pointer hover:text-gray-300">
|
||||||
|
Show raw JSON data
|
||||||
|
</summary>
|
||||||
|
<pre className="text-xs bg-gray-900 text-gray-300 p-3 rounded mt-2 overflow-auto">
|
||||||
|
{JSON.stringify(result, undefined, 2)}
|
||||||
|
</pre>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1 +1 @@
|
|||||||
{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/mirror-suggestions.tsx","./src/components/payment.tsx","./src/components/profile.tsx","./src/components/progress-bar.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/hooks/use-blossom-servers.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/upload/progress.ts","./src/views/admin.tsx","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"version":"5.6.2"}
|
{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/payment.tsx","./src/components/profile.tsx","./src/components/progress-bar.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/upload/progress.ts","./src/views/admin.tsx","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"version":"5.6.2"}
|
Reference in New Issue
Block a user