87769cbfbf
- Tabbed Wallet Settings modal (Cashu + Fedimint) and dual-balance wallet card - Buy a peer's paid file (ecash / node Lightning / on-chain / external QR) - Recovery-phrase reveal + backup section; onboarding seed retry resilience - NetBird HTTPS launch, remote-control two-finger scroll + external-open - Shared BackButton, single-v version label, mesh Bitcoin header toggles Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1092 lines
45 KiB
Vue
1092 lines
45 KiB
Vue
<template>
|
||
<div class="pb-6">
|
||
<!-- Header with back button — shared component so peer files match local
|
||
files (CloudFolder) on both desktop and mobile. -->
|
||
<div class="shrink-0 mb-4">
|
||
<BackButton label="Back to Cloud" @click="goBack" />
|
||
|
||
<!-- Peer Header -->
|
||
<div class="flex items-center gap-4">
|
||
<div class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center bg-purple-500/15">
|
||
<svg class="w-7 h-7 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
|
||
</svg>
|
||
</div>
|
||
<div class="hidden md:block">
|
||
<div class="flex items-center gap-2">
|
||
<h1 class="text-2xl font-bold text-white">{{ peerDisplayName }}</h1>
|
||
<span
|
||
v-if="transportPill"
|
||
:class="transportPill.cls"
|
||
:title="transportPill.title"
|
||
class="text-xs px-2 py-0.5 rounded-full font-medium"
|
||
>{{ transportPill.label }}</span>
|
||
</div>
|
||
<p v-if="currentPeer?.did" class="text-sm text-white/50 font-mono truncate max-w-md" :title="currentPeer.did">{{ currentPeer.did }}</p>
|
||
<p v-else class="text-sm text-white/50">Peer files</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading -->
|
||
<div v-if="loading && catalogItems.length === 0" class="glass-card p-8 text-center">
|
||
<svg class="animate-spin h-6 w-6 text-purple-400 mx-auto mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
<p class="text-white/50 text-sm">Connecting to peer… This may take a few seconds.</p>
|
||
</div>
|
||
|
||
<!-- Error -->
|
||
<div v-else-if="catalogError && catalogItems.length === 0" class="glass-card p-6">
|
||
<div class="alert-error mb-4">{{ catalogError }}</div>
|
||
<button class="glass-button px-4 py-2 rounded-lg text-sm" @click="loadCatalog">Retry</button>
|
||
</div>
|
||
|
||
<!-- Empty -->
|
||
<div v-else-if="catalogItems.length === 0 && !loading" class="glass-card p-8 text-center">
|
||
<p class="text-white/50">This peer has no shared files.</p>
|
||
</div>
|
||
|
||
<!-- Purchase error -->
|
||
<div v-if="purchaseError" class="glass-card p-3 mb-4 flex items-center gap-3 border border-red-500/30">
|
||
<svg class="w-4 h-4 text-red-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
<span class="text-sm text-red-400 flex-1">{{ purchaseError }}</span>
|
||
<button class="text-xs text-white/50 hover:text-white" @click="purchaseError = null">Dismiss</button>
|
||
</div>
|
||
|
||
<!-- File Grid -->
|
||
<div v-if="catalogItems.length > 0" class="space-y-3">
|
||
<div v-if="loading" class="p-2 text-center text-white/45 text-xs flex items-center justify-center gap-2">
|
||
<svg class="animate-spin h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
</svg>
|
||
Refreshing peer files...
|
||
</div>
|
||
<div v-else-if="catalogError" class="p-3 rounded-lg border border-red-400/20 bg-red-500/10 text-red-200/85 text-sm">
|
||
{{ catalogError }}
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
<div
|
||
v-for="item in catalogItems"
|
||
:key="item.id"
|
||
class="glass-card overflow-hidden flex flex-col h-full"
|
||
>
|
||
<!-- Media preview (images / videos / audio) -->
|
||
<div
|
||
v-if="isMediaMime(item.mime_type)"
|
||
class="relative aspect-video overflow-hidden cursor-pointer group"
|
||
@click="isPlayable(item.mime_type) ? playMedia(item) : undefined"
|
||
>
|
||
<img
|
||
v-if="item.mime_type.startsWith('image/') && previewUrls[item.id]"
|
||
:src="previewUrls[item.id]"
|
||
:alt="item.filename"
|
||
class="w-full h-full object-cover"
|
||
:style="isPaidItem(item.access) ? 'filter: blur(16px); transform: scale(1.15);' : ''"
|
||
/>
|
||
<video
|
||
v-else-if="item.mime_type.startsWith('video/') && previewUrls[item.id]"
|
||
:src="previewUrls[item.id]"
|
||
class="w-full h-full object-cover pointer-events-none"
|
||
muted
|
||
autoplay
|
||
loop
|
||
playsinline
|
||
/>
|
||
<!-- Audio waveform placeholder -->
|
||
<div v-else-if="item.mime_type.startsWith('audio/')" class="w-full h-full flex flex-col items-center justify-center bg-gradient-to-br from-orange-500/10 to-orange-600/5">
|
||
<svg class="w-12 h-12 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
|
||
</svg>
|
||
<p class="mt-2 text-xs text-white/50 truncate max-w-[80%]">{{ item.filename.split('/').pop() }}</p>
|
||
</div>
|
||
<div v-else class="w-full h-full flex items-center justify-center" :class="fileIconBg(item.mime_type)">
|
||
<svg class="w-10 h-10" :class="fileIconColor(item.mime_type)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="fileIconPath(item.mime_type)" />
|
||
</svg>
|
||
</div>
|
||
<!-- Play button overlay for video/audio -->
|
||
<div
|
||
v-if="isPlayable(item.mime_type)"
|
||
class="absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 transition-colors"
|
||
>
|
||
<div class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<svg class="w-6 h-6 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M8 5v14l11-7L8 5z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<!-- Paid badge (top-right) -->
|
||
<div v-if="isPaidItem(item.access)" class="absolute top-2 right-2 flex items-center gap-1.5 px-2 py-1 rounded-lg bg-black/60 backdrop-blur-sm">
|
||
<svg class="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||
</svg>
|
||
<span class="text-xs font-medium text-orange-400">{{ getItemPrice(item.access) }} sats</span>
|
||
</div>
|
||
<!-- Preview badge for paid playable items -->
|
||
<div v-if="isPaidItem(item.access) && isPlayable(item.mime_type)" class="absolute bottom-2 left-2 px-2 py-0.5 rounded bg-black/60 backdrop-blur-sm">
|
||
<span class="text-xs text-white/70">10% preview</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card body — pinned to the bottom so the filename + action buttons
|
||
line up across cards of differing preview heights. -->
|
||
<div class="p-4 flex items-center gap-4 mt-auto">
|
||
<div v-if="!isMediaMime(item.mime_type)" class="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" :class="fileIconBg(item.mime_type)">
|
||
<svg class="w-5 h-5" :class="fileIconColor(item.mime_type)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="fileIconPath(item.mime_type)" />
|
||
</svg>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p class="text-sm font-medium text-white truncate">{{ item.filename }}</p>
|
||
<p class="text-xs text-white/40">{{ formatSize(item.size_bytes) }}</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span
|
||
v-if="!isPaidItem(item.access)"
|
||
class="text-xs px-2 py-0.5 rounded-full"
|
||
:class="accessBadgeClass(item.access)"
|
||
>
|
||
{{ accessLabel(item.access) }}
|
||
</span>
|
||
<!-- Play button for audio/video -->
|
||
<button
|
||
v-if="isPlayable(item.mime_type)"
|
||
class="glass-button px-3 py-1.5 rounded-lg text-xs font-medium flex items-center gap-1.5"
|
||
:disabled="playing === item.id"
|
||
@click="playMedia(item)"
|
||
>
|
||
<template v-if="playing === item.id">
|
||
<div class="w-3 h-3 border-2 border-white/20 border-t-white/80 rounded-full animate-spin"></div>
|
||
<span>Loading...</span>
|
||
</template>
|
||
<template v-else>
|
||
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M8 5v14l11-7L8 5z" />
|
||
</svg>
|
||
<span>{{ isPaidItem(item.access) ? 'Preview' : 'Play' }}</span>
|
||
</template>
|
||
</button>
|
||
<button
|
||
class="glass-button px-3 py-1.5 rounded-lg text-xs font-medium flex items-center gap-1.5"
|
||
:disabled="downloading === item.id"
|
||
@click="downloadFile(item)"
|
||
>
|
||
<template v-if="downloading === item.id">
|
||
<div class="w-3 h-3 border-2 border-white/20 border-t-white/80 rounded-full animate-spin"></div>
|
||
<span>{{ isPaidItem(item.access) ? 'Paying...' : 'Loading...' }}</span>
|
||
</template>
|
||
<template v-else-if="isPaidItem(item.access)">
|
||
<svg class="w-3.5 h-3.5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
<span>Buy {{ getItemPrice(item.access) }} sats</span>
|
||
</template>
|
||
<template v-else>
|
||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||
</svg>
|
||
<span>Download</span>
|
||
</template>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Video player modal -->
|
||
<Teleport to="body">
|
||
<Transition name="fade">
|
||
<div
|
||
v-if="videoPlayerUrl && videoPlayerItem"
|
||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
|
||
@click.self="closeVideoPlayer"
|
||
>
|
||
<div class="relative w-full max-w-4xl mx-4">
|
||
<!-- Close button -->
|
||
<button
|
||
class="absolute -top-10 right-0 text-white/60 hover:text-white transition-colors"
|
||
@click="closeVideoPlayer"
|
||
>
|
||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
<!-- Video element -->
|
||
<div class="relative">
|
||
<video
|
||
:src="videoPlayerUrl"
|
||
class="w-full rounded-xl bg-black"
|
||
controls
|
||
autoplay
|
||
@playing="videoLoading = false"
|
||
@canplay="videoLoading = false"
|
||
@error="videoLoading = false; videoError = true"
|
||
/>
|
||
<!-- Loader while the stream connects over mesh/Tor -->
|
||
<div v-if="videoLoading && !videoError" class="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-xl bg-black/60 pointer-events-none">
|
||
<svg class="w-8 h-8 animate-spin text-white/80" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.4 0 0 5.4 0 12h4z" />
|
||
</svg>
|
||
<span class="text-sm text-white/70">Connecting to peer…</span>
|
||
</div>
|
||
<!-- Error state -->
|
||
<div v-if="videoError" class="absolute inset-0 flex flex-col items-center justify-center gap-2 rounded-xl bg-black/70 text-center px-4">
|
||
<p class="text-sm text-white/80">Couldn't play this video</p>
|
||
<p class="text-xs text-white/50">The peer may be offline, or this preview can't be played. Try downloading it instead.</p>
|
||
</div>
|
||
</div>
|
||
<!-- Info bar -->
|
||
<div class="mt-3 flex items-center justify-between">
|
||
<div>
|
||
<p class="text-sm font-medium text-white">{{ videoPlayerItem.filename.split('/').pop() }}</p>
|
||
<p class="text-xs text-white/40">{{ formatSize(videoPlayerItem.size_bytes) }}</p>
|
||
</div>
|
||
<div v-if="videoPlayerPaid" class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-orange-500/15">
|
||
<svg class="w-3.5 h-3.5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||
</svg>
|
||
<span class="text-xs text-orange-400">10% preview - Buy to unlock full</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
|
||
<!-- Payment method picker / Lightning invoice QR (#46) -->
|
||
<Teleport to="body">
|
||
<Transition name="fade">
|
||
<div
|
||
v-if="payItem"
|
||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
|
||
@click.self="closePayModal"
|
||
>
|
||
<div class="glass-card w-full max-w-md p-5 rounded-2xl relative">
|
||
<button
|
||
class="absolute top-3 right-3 text-white/50 hover:text-white transition-colors"
|
||
@click="closePayModal"
|
||
>
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
|
||
<h3 class="text-base font-semibold text-white mb-1">Buy this file</h3>
|
||
<p class="text-xs text-white/50 mb-4 truncate">
|
||
{{ payItem.filename.split('/').pop() }} · {{ getItemPrice(payItem.access) }} sats
|
||
</p>
|
||
|
||
<!-- Step 1: choose a payment method -->
|
||
<div v-if="payMode === 'choose'" class="space-y-3">
|
||
<button
|
||
class="w-full glass-button px-4 py-3 rounded-xl flex items-center justify-start gap-3 text-left"
|
||
:disabled="downloading === payItem.id"
|
||
@click="payWithEcash"
|
||
>
|
||
<svg class="w-6 h-6 text-green-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
||
</svg>
|
||
<span>
|
||
<span class="block text-base text-white">{{ downloading === payItem.id ? 'Paying…' : 'Pay from this node’s ecash wallet' }}</span>
|
||
<span class="block text-sm text-white/50">Instant, using your ecash balance</span>
|
||
</span>
|
||
</button>
|
||
|
||
<button
|
||
class="w-full glass-button px-4 py-3 rounded-xl flex items-center justify-start gap-3 text-left"
|
||
:disabled="lnPaying"
|
||
@click="payWithLightning"
|
||
>
|
||
<svg class="w-6 h-6 text-yellow-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
<span>
|
||
<span class="block text-base text-white">{{ lnPaying ? 'Paying…' : 'Pay with my Lightning node' }}</span>
|
||
<span class="block text-sm text-white/50">Pays the seller’s invoice from your node’s Lightning wallet</span>
|
||
</span>
|
||
</button>
|
||
|
||
<button
|
||
class="w-full glass-button px-4 py-3 rounded-xl flex items-center justify-start gap-3 text-left"
|
||
:disabled="lnPaying || onchainPaying"
|
||
@click="payWithInvoice"
|
||
>
|
||
<svg class="w-6 h-6 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
|
||
</svg>
|
||
<span>
|
||
<span class="block text-base text-white">Pay from another wallet (QR)</span>
|
||
<span class="block text-sm text-white/50">Scan a Lightning invoice with any wallet</span>
|
||
</span>
|
||
</button>
|
||
|
||
<button
|
||
class="w-full glass-button px-4 py-3 rounded-xl flex items-center justify-start gap-3 text-left"
|
||
:disabled="lnPaying || onchainPaying"
|
||
@click="payOnchain"
|
||
>
|
||
<svg class="w-6 h-6 text-orange-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
||
</svg>
|
||
<span>
|
||
<span class="block text-base text-white">{{ onchainPaying ? 'Sending…' : 'Pay on-chain from my node' }}</span>
|
||
<span class="block text-sm text-white/50">Sends Bitcoin on-chain from your node’s wallet (slower)</span>
|
||
</span>
|
||
</button>
|
||
|
||
<p v-if="lnError" class="text-xs text-red-400 px-1">{{ lnError }}</p>
|
||
</div>
|
||
|
||
<!-- Step 2: Lightning invoice -->
|
||
<div v-else class="text-center">
|
||
<div v-if="invoiceWaiting && !invoiceData" class="py-10 flex flex-col items-center gap-3">
|
||
<svg class="w-7 h-7 animate-spin text-white/80" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.4 0 0 5.4 0 12h4z" />
|
||
</svg>
|
||
<span class="text-sm text-white/70">Requesting invoice from seller…</span>
|
||
</div>
|
||
|
||
<div v-else-if="invoiceData">
|
||
<div v-if="invoiceQr" class="bg-white rounded-xl p-3 inline-block mb-3">
|
||
<img :src="invoiceQr" alt="Lightning invoice QR" class="w-48 h-48" />
|
||
</div>
|
||
<p class="text-sm text-white mb-1">{{ invoiceData.price_sats }} sats</p>
|
||
<p class="text-xs text-white/50 mb-3 flex items-center justify-center gap-2">
|
||
<svg class="w-3.5 h-3.5 animate-spin text-amber-400" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.4 0 0 5.4 0 12h4z" />
|
||
</svg>
|
||
Waiting for payment…
|
||
</p>
|
||
<div class="flex items-center gap-2 bg-black/40 rounded-lg px-2 py-1.5">
|
||
<code class="text-[10px] text-white/60 truncate flex-1 text-left">{{ invoiceData.bolt11 }}</code>
|
||
<button class="text-xs text-white/60 hover:text-white shrink-0" @click="copyInvoice">
|
||
{{ invoiceCopied ? 'Copied!' : 'Copy' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<p v-if="invoiceError" class="text-sm text-red-400 mt-3">{{ invoiceError }}</p>
|
||
<button
|
||
v-if="invoiceError"
|
||
class="glass-button px-4 py-2 rounded-lg text-sm mt-3"
|
||
@click="payMode = 'choose'"
|
||
>
|
||
Back
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, reactive, watch, onMounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import QRCode from 'qrcode'
|
||
import { rpcClient } from '@/api/rpc-client'
|
||
import { useAudioPlayer } from '@/composables/useAudioPlayer'
|
||
import BackButton from '@/components/BackButton.vue'
|
||
|
||
const props = defineProps<{
|
||
peerId?: string
|
||
}>()
|
||
|
||
const router = useRouter()
|
||
|
||
interface PeerNode {
|
||
did: string
|
||
pubkey: string
|
||
onion: string
|
||
name?: string
|
||
trust_level: string
|
||
}
|
||
|
||
interface CatalogItem {
|
||
id: string
|
||
filename: string
|
||
mime_type: string
|
||
size_bytes: number
|
||
description: string
|
||
access: string | { paid: { price_sats: number } }
|
||
}
|
||
|
||
const loading = ref(true)
|
||
const currentPeer = ref<PeerNode | null>(null)
|
||
const catalogError = ref('')
|
||
const catalogItems = ref<CatalogItem[]>([])
|
||
const downloading = ref<string | null>(null)
|
||
const playing = ref<string | null>(null)
|
||
const purchaseError = ref<string | null>(null)
|
||
// Transport actually used to reach this peer (returned by content.browse-peer)
|
||
// so we can show a FIPS/Tor pill instead of always assuming Tor (B21).
|
||
const transport = ref<string | null>(null)
|
||
const transportPill = computed(() => {
|
||
switch (transport.value) {
|
||
case 'fips':
|
||
return { label: 'FIPS', cls: 'bg-green-500/20 text-green-300', title: 'Connected over the fast encrypted mesh (FIPS)' }
|
||
case 'mesh':
|
||
return { label: 'Mesh', cls: 'bg-green-500/20 text-green-300', title: 'Connected over the mesh' }
|
||
case 'lan':
|
||
return { label: 'LAN', cls: 'bg-blue-500/20 text-blue-300', title: 'Connected over the local network' }
|
||
case 'tor':
|
||
return { label: 'Tor', cls: 'bg-amber-500/20 text-amber-300', title: 'Connected over Tor (slower)' }
|
||
default:
|
||
return null
|
||
}
|
||
})
|
||
const previewUrls = reactive<Record<string, string>>({})
|
||
const audioPlayer = useAudioPlayer()
|
||
|
||
// ─── Payment picker (#46) ────────────────────────────────────────────────
|
||
// When buying a paid item the user chooses how to pay: their local ecash
|
||
// wallet (instant), or a Lightning invoice drawn on the SELLER's node that
|
||
// they can pay from any external wallet by scanning a QR.
|
||
const payItem = ref<CatalogItem | null>(null)
|
||
const payMode = ref<'choose' | 'invoice'>('choose')
|
||
const invoiceData = ref<{ bolt11: string; payment_hash: string; price_sats: number } | null>(null)
|
||
const invoiceQr = ref('')
|
||
const invoiceWaiting = ref(false)
|
||
const invoiceError = ref('')
|
||
const invoiceCopied = ref(false)
|
||
const lnPaying = ref(false)
|
||
const lnError = ref('')
|
||
const onchainPaying = ref(false)
|
||
let onchainPollTimer: ReturnType<typeof setTimeout> | null = null
|
||
let invoicePollTimer: ReturnType<typeof setTimeout> | null = null
|
||
|
||
// Video player modal state
|
||
const videoPlayerItem = ref<CatalogItem | null>(null)
|
||
const videoPlayerUrl = ref<string | null>(null)
|
||
const videoPlayerPaid = ref(false)
|
||
// Streaming a peer's file connects over mesh/Tor before the first frame, so
|
||
// show a loader until the element can actually play (or errors).
|
||
const videoLoading = ref(false)
|
||
const videoError = ref(false)
|
||
|
||
const peerDisplayName = computed(() => {
|
||
if (currentPeer.value?.name) return currentPeer.value.name
|
||
if (currentPeer.value?.did) return truncateDid(currentPeer.value.did)
|
||
return props.peerId ? truncateOnion(props.peerId) : 'Peer Files'
|
||
})
|
||
|
||
function goBack() {
|
||
router.push({ name: 'cloud' })
|
||
}
|
||
|
||
onMounted(async () => {
|
||
if (props.peerId) {
|
||
// Find the peer by onion address
|
||
try {
|
||
const result = await rpcClient.federationListNodes()
|
||
const peers = result?.nodes ?? []
|
||
currentPeer.value = peers.find((p: PeerNode) => p.onion === props.peerId) || null
|
||
} catch {
|
||
// Continue with just the onion address
|
||
}
|
||
await loadCatalog()
|
||
} else {
|
||
loading.value = false
|
||
}
|
||
})
|
||
|
||
async function loadCatalog() {
|
||
const onion = props.peerId || currentPeer.value?.onion
|
||
if (!onion) return
|
||
const hadItems = catalogItems.value.length > 0
|
||
loading.value = true
|
||
catalogError.value = ''
|
||
try {
|
||
const result = await rpcClient.call<{ items?: CatalogItem[]; transport?: string }>({
|
||
method: 'content.browse-peer',
|
||
params: { onion },
|
||
timeout: 30000,
|
||
})
|
||
catalogItems.value = result?.items ?? []
|
||
transport.value = result?.transport ?? null
|
||
} catch (e: unknown) {
|
||
catalogError.value = e instanceof Error ? e.message : 'Failed to connect to peer'
|
||
if (!hadItems) catalogItems.value = []
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// Load visual previews for image and video items when catalog loads
|
||
// Audio files don't need visual thumbnails — they show a waveform icon
|
||
watch(catalogItems, async (items) => {
|
||
const onion = props.peerId || currentPeer.value?.onion
|
||
if (!onion) return
|
||
for (const item of items) {
|
||
if ((item.mime_type.startsWith('image/') || item.mime_type.startsWith('video/')) && !previewUrls[item.id]) {
|
||
loadPreview(onion, item)
|
||
}
|
||
}
|
||
})
|
||
|
||
async function loadPreview(onion: string, item: CatalogItem) {
|
||
try {
|
||
const result = await rpcClient.call<{ data?: string; content_type?: string }>({
|
||
method: 'content.preview-peer',
|
||
params: { onion, content_id: item.id },
|
||
timeout: 30000,
|
||
})
|
||
if (result?.data) {
|
||
const mime = result.content_type || item.mime_type
|
||
const bytes = Uint8Array.from(atob(result.data), c => c.charCodeAt(0))
|
||
const blob = new Blob([bytes], { type: mime })
|
||
previewUrls[item.id] = URL.createObjectURL(blob)
|
||
}
|
||
} catch {
|
||
// Preview not available — icon fallback is fine
|
||
}
|
||
}
|
||
|
||
function truncateDid(did: string): string {
|
||
if (did.length <= 24) return did
|
||
return did.slice(0, 16) + '...' + did.slice(-8)
|
||
}
|
||
|
||
function truncateOnion(onion: string): string {
|
||
if (onion.length <= 20) return onion
|
||
return onion.slice(0, 12) + '...'
|
||
}
|
||
|
||
function formatSize(bytes: number): string {
|
||
if (bytes === 0) return '0 B'
|
||
const units = ['B', 'KB', 'MB', 'GB']
|
||
const i = Math.floor(Math.log(bytes) / Math.log(1024))
|
||
return (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + ' ' + units[i]
|
||
}
|
||
|
||
function fileIconBg(mime: string): string {
|
||
if (mime.startsWith('image/')) return 'bg-blue-500/15'
|
||
if (mime.startsWith('audio/')) return 'bg-orange-500/15'
|
||
if (mime.startsWith('video/')) return 'bg-pink-500/15'
|
||
if (mime.startsWith('text/')) return 'bg-green-500/15'
|
||
return 'bg-white/10'
|
||
}
|
||
|
||
function fileIconColor(mime: string): string {
|
||
if (mime.startsWith('image/')) return 'text-blue-400'
|
||
if (mime.startsWith('audio/')) return 'text-orange-400'
|
||
if (mime.startsWith('video/')) return 'text-pink-400'
|
||
if (mime.startsWith('text/')) return 'text-green-400'
|
||
return 'text-white/60'
|
||
}
|
||
|
||
function fileIconPath(mime: string): string {
|
||
if (mime.startsWith('image/')) return 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'
|
||
if (mime.startsWith('audio/')) return 'M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3'
|
||
if (mime.startsWith('video/')) return 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z'
|
||
return 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
|
||
}
|
||
|
||
function accessLabel(access: CatalogItem['access']): string {
|
||
if (access === 'free') return 'Free'
|
||
if (access === 'peersonly') return 'Peers Only'
|
||
if (typeof access === 'object' && 'paid' in access) return `${access.paid.price_sats} sats`
|
||
return String(access)
|
||
}
|
||
|
||
function accessBadgeClass(access: CatalogItem['access']): string {
|
||
if (access === 'free') return 'bg-green-500/15 text-green-400'
|
||
if (access === 'peersonly') return 'bg-blue-500/15 text-blue-400'
|
||
if (typeof access === 'object' && 'paid' in access) return 'bg-orange-500/15 text-orange-400'
|
||
return 'bg-white/10 text-white/50'
|
||
}
|
||
|
||
function isMediaMime(mime: string): boolean {
|
||
return mime.startsWith('image/') || mime.startsWith('video/') || mime.startsWith('audio/')
|
||
}
|
||
|
||
function isPlayable(mime: string): boolean {
|
||
return mime.startsWith('video/') || mime.startsWith('audio/')
|
||
}
|
||
|
||
function isPaidItem(access: CatalogItem['access']): boolean {
|
||
return typeof access === 'object' && 'paid' in access
|
||
}
|
||
|
||
function getItemPrice(access: CatalogItem['access']): number {
|
||
if (typeof access === 'object' && 'paid' in access) return access.paid.price_sats
|
||
return 0
|
||
}
|
||
|
||
async function downloadFile(item: CatalogItem) {
|
||
const onion = props.peerId || currentPeer.value?.onion
|
||
if (!onion) return
|
||
purchaseError.value = null
|
||
|
||
const price = getItemPrice(item.access)
|
||
if (price > 0) {
|
||
// Let the buyer choose how to pay (local ecash vs external-wallet QR).
|
||
openPayModal(item)
|
||
return
|
||
}
|
||
|
||
// Free / peers-only download: stream straight from the Range-capable proxy
|
||
// (B3) to disk instead of pulling the whole file as a base64 blob over RPC.
|
||
// The old base64-over-RPC path buffered the entire file in node memory AND
|
||
// the browser, which failed outright for large files (#38). A tiny probe
|
||
// first surfaces the real server error (peer unreachable on mesh and Tor)
|
||
// instead of a generic failure (#30).
|
||
downloading.value = item.id
|
||
try {
|
||
const streamUrl = `/api/peer-content/${encodeURIComponent(onion)}/${encodeURIComponent(item.id)}`
|
||
const probe = await probePeerContent(streamUrl)
|
||
if (probe !== true) {
|
||
purchaseError.value = probe
|
||
return
|
||
}
|
||
streamDownload(streamUrl, item)
|
||
} catch (e: unknown) {
|
||
purchaseError.value = e instanceof Error ? e.message : 'Download failed'
|
||
} finally {
|
||
downloading.value = null
|
||
}
|
||
}
|
||
|
||
function openPayModal(item: CatalogItem) {
|
||
payItem.value = item
|
||
payMode.value = 'choose'
|
||
invoiceData.value = null
|
||
invoiceQr.value = ''
|
||
invoiceWaiting.value = false
|
||
invoiceError.value = ''
|
||
invoiceCopied.value = false
|
||
lnPaying.value = false
|
||
lnError.value = ''
|
||
onchainPaying.value = false
|
||
}
|
||
|
||
function closePayModal() {
|
||
if (invoicePollTimer) { clearTimeout(invoicePollTimer); invoicePollTimer = null }
|
||
if (onchainPollTimer) { clearTimeout(onchainPollTimer); onchainPollTimer = null }
|
||
payItem.value = null
|
||
invoiceWaiting.value = false
|
||
onchainPaying.value = false
|
||
}
|
||
|
||
/**
|
||
* Pay on-chain from THIS node's wallet: ask the seller for a fresh address +
|
||
* amount, broadcast with lnd.sendcoins, then poll the seller until it detects
|
||
* the payment and release the file (address is the gate token). Slower than LN
|
||
* because the seller waits for the tx to appear/confirm.
|
||
*/
|
||
async function payOnchain() {
|
||
const item = payItem.value
|
||
const onion = props.peerId || currentPeer.value?.onion
|
||
if (!item || !onion || onchainPaying.value) return
|
||
|
||
onchainPaying.value = true
|
||
lnError.value = ''
|
||
try {
|
||
const req = await rpcClient.call<{ address?: string; amount_sats?: number; error?: string }>({
|
||
method: 'content.request-onchain',
|
||
params: { onion, content_id: item.id },
|
||
timeout: 60000,
|
||
})
|
||
if (!req?.address || !req?.amount_sats) {
|
||
lnError.value = req?.error || 'The seller could not provide an on-chain address.'
|
||
onchainPaying.value = false
|
||
return
|
||
}
|
||
const addr = req.address
|
||
const send = await rpcClient.call<{ txid?: string; error?: string }>({
|
||
method: 'lnd.sendcoins',
|
||
params: { addr, amount: req.amount_sats },
|
||
timeout: 60000,
|
||
})
|
||
if (!send?.txid) {
|
||
lnError.value = send?.error || 'On-chain send failed (insufficient on-chain balance?).'
|
||
onchainPaying.value = false
|
||
return
|
||
}
|
||
// Broadcast — now wait for the seller to see it and release.
|
||
pollOnchain(addr)
|
||
} catch (e: unknown) {
|
||
lnError.value = e instanceof Error ? e.message : 'Could not pay on-chain'
|
||
onchainPaying.value = false
|
||
}
|
||
}
|
||
|
||
async function pollOnchain(address: string) {
|
||
const item = payItem.value
|
||
const onion = props.peerId || currentPeer.value?.onion
|
||
if (!item || !onion) { onchainPaying.value = false; return }
|
||
try {
|
||
const res = await rpcClient.call<{ paid?: boolean }>({
|
||
method: 'content.onchain-status',
|
||
params: { onion, content_id: item.id, address },
|
||
timeout: 30000,
|
||
})
|
||
if (res?.paid) {
|
||
const dl = await rpcClient.call<{ data?: string; error?: string }>({
|
||
method: 'content.download-peer-onchain',
|
||
params: { onion, content_id: item.id, address },
|
||
timeout: 120000,
|
||
})
|
||
onchainPaying.value = false
|
||
if (dl?.data) {
|
||
triggerDownload(dl.data, item)
|
||
closePayModal()
|
||
} else {
|
||
lnError.value = dl?.error || 'Paid, but the download failed. Try again shortly.'
|
||
}
|
||
return
|
||
}
|
||
} catch {
|
||
// transient — keep polling
|
||
}
|
||
if (payItem.value && onchainPaying.value) {
|
||
onchainPollTimer = setTimeout(() => pollOnchain(address), 5000)
|
||
}
|
||
}
|
||
|
||
/** Pay the open item from the local ecash wallet (mint token + download). */
|
||
async function payWithEcash() {
|
||
const item = payItem.value
|
||
const onion = props.peerId || currentPeer.value?.onion
|
||
if (!item || !onion) return
|
||
const price = getItemPrice(item.access)
|
||
|
||
downloading.value = item.id
|
||
purchaseError.value = null
|
||
try {
|
||
// Check ecash balance first
|
||
try {
|
||
const balanceRes = await rpcClient.call<{ balance_sats?: number }>({
|
||
method: 'wallet.ecash-balance',
|
||
})
|
||
const balance = balanceRes?.balance_sats ?? 0
|
||
if (balance < price) {
|
||
purchaseError.value = `Insufficient ecash balance (${balance} sats). Need ${price} sats. Fund your wallet, or pay from another wallet via QR.`
|
||
closePayModal()
|
||
return
|
||
}
|
||
} catch {
|
||
// Balance check failed — try the purchase anyway
|
||
}
|
||
|
||
const result = await rpcClient.call<{ data?: string; error?: string }>({
|
||
method: 'content.download-peer-paid',
|
||
params: { onion, content_id: item.id, price_sats: price },
|
||
timeout: 120000,
|
||
})
|
||
if (result?.data) {
|
||
triggerDownload(result.data, item)
|
||
closePayModal()
|
||
} else if (result?.error) {
|
||
purchaseError.value = `Payment failed: ${result.error}`
|
||
closePayModal()
|
||
}
|
||
} catch (e: unknown) {
|
||
purchaseError.value = e instanceof Error ? e.message : 'Download failed'
|
||
closePayModal()
|
||
} finally {
|
||
downloading.value = null
|
||
}
|
||
}
|
||
|
||
/** Ask the seller for a Lightning invoice, render a QR, and poll for payment. */
|
||
async function payWithInvoice() {
|
||
const item = payItem.value
|
||
const onion = props.peerId || currentPeer.value?.onion
|
||
if (!item || !onion) return
|
||
|
||
payMode.value = 'invoice'
|
||
invoiceError.value = ''
|
||
invoiceWaiting.value = true
|
||
try {
|
||
const res = await rpcClient.call<{ bolt11?: string; payment_hash?: string; price_sats?: number; error?: string }>({
|
||
method: 'content.request-invoice',
|
||
params: { onion, content_id: item.id },
|
||
timeout: 60000,
|
||
})
|
||
if (!res?.bolt11 || !res?.payment_hash) {
|
||
invoiceError.value = res?.error || 'The seller could not create an invoice (is its Lightning node running?).'
|
||
invoiceWaiting.value = false
|
||
return
|
||
}
|
||
invoiceData.value = { bolt11: res.bolt11, payment_hash: res.payment_hash, price_sats: res.price_sats ?? getItemPrice(item.access) }
|
||
try {
|
||
invoiceQr.value = await QRCode.toDataURL(res.bolt11.toUpperCase(), { margin: 1, width: 240 })
|
||
} catch {
|
||
invoiceQr.value = '' // fall back to showing the raw invoice string
|
||
}
|
||
scheduleInvoicePoll()
|
||
} catch (e: unknown) {
|
||
invoiceError.value = e instanceof Error ? e.message : 'Could not request an invoice'
|
||
invoiceWaiting.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Pay the seller's invoice straight from THIS node's Lightning wallet, then
|
||
* release the file. No QR/polling: lnd.payinvoice only returns once the payment
|
||
* settles, so the payment_hash is immediately valid as the download gate token.
|
||
*/
|
||
async function payWithLightning() {
|
||
const item = payItem.value
|
||
const onion = props.peerId || currentPeer.value?.onion
|
||
if (!item || !onion || lnPaying.value) return
|
||
|
||
lnPaying.value = true
|
||
lnError.value = ''
|
||
try {
|
||
// 1. Ask the seller to mint a bolt11 (also records the pending entitlement).
|
||
const inv = await rpcClient.call<{ bolt11?: string; payment_hash?: string; error?: string }>({
|
||
method: 'content.request-invoice',
|
||
params: { onion, content_id: item.id },
|
||
timeout: 60000,
|
||
})
|
||
if (!inv?.bolt11 || !inv?.payment_hash) {
|
||
lnError.value = inv?.error || 'The seller could not create an invoice (is its Lightning node running?).'
|
||
return
|
||
}
|
||
// 2. Pay it from our own node. Returns only after settlement.
|
||
const pay = await rpcClient.call<{ payment_hash?: string; payment_error?: string }>({
|
||
method: 'lnd.payinvoice',
|
||
params: { payment_request: inv.bolt11 },
|
||
timeout: 120000,
|
||
})
|
||
if (pay?.payment_error) {
|
||
lnError.value = `Payment failed: ${pay.payment_error}`
|
||
return
|
||
}
|
||
// 3. Settled — pull the file using the payment hash as the gate token.
|
||
const dl = await rpcClient.call<{ data?: string; error?: string }>({
|
||
method: 'content.download-peer-invoice',
|
||
params: { onion, content_id: item.id, payment_hash: inv.payment_hash },
|
||
timeout: 120000,
|
||
})
|
||
if (dl?.data) {
|
||
triggerDownload(dl.data, item)
|
||
closePayModal()
|
||
} else {
|
||
lnError.value = dl?.error || 'Paid, but the download failed. Try again shortly.'
|
||
}
|
||
} catch (e: unknown) {
|
||
lnError.value = e instanceof Error ? e.message : 'Could not pay from your Lightning node'
|
||
} finally {
|
||
lnPaying.value = false
|
||
}
|
||
}
|
||
|
||
function scheduleInvoicePoll() {
|
||
if (invoicePollTimer) clearTimeout(invoicePollTimer)
|
||
invoicePollTimer = setTimeout(pollInvoice, 3000)
|
||
}
|
||
|
||
async function pollInvoice() {
|
||
const item = payItem.value
|
||
const inv = invoiceData.value
|
||
const onion = props.peerId || currentPeer.value?.onion
|
||
if (!item || !inv || !onion) return
|
||
try {
|
||
const res = await rpcClient.call<{ paid?: boolean }>({
|
||
method: 'content.invoice-status',
|
||
params: { onion, content_id: item.id, payment_hash: inv.payment_hash },
|
||
timeout: 30000,
|
||
})
|
||
if (res?.paid) {
|
||
// Settled — pull the file using the payment hash as the gate token.
|
||
invoiceWaiting.value = false
|
||
const dl = await rpcClient.call<{ data?: string; error?: string }>({
|
||
method: 'content.download-peer-invoice',
|
||
params: { onion, content_id: item.id, payment_hash: inv.payment_hash },
|
||
timeout: 120000,
|
||
})
|
||
if (dl?.data) {
|
||
triggerDownload(dl.data, item)
|
||
closePayModal()
|
||
} else {
|
||
invoiceError.value = dl?.error || 'Paid, but the download failed. Try again shortly.'
|
||
}
|
||
return
|
||
}
|
||
} catch {
|
||
// Transient — keep polling.
|
||
}
|
||
if (payItem.value && invoiceData.value) scheduleInvoicePoll()
|
||
}
|
||
|
||
async function copyInvoice() {
|
||
if (!invoiceData.value) return
|
||
try {
|
||
await navigator.clipboard.writeText(invoiceData.value.bolt11)
|
||
invoiceCopied.value = true
|
||
setTimeout(() => { invoiceCopied.value = false }, 2000)
|
||
} catch { /* clipboard blocked */ }
|
||
}
|
||
|
||
/** Play audio/video inline. For free items, downloads full file; for paid, uses the preview. */
|
||
async function playMedia(item: CatalogItem) {
|
||
const onion = props.peerId || currentPeer.value?.onion
|
||
if (!onion) return
|
||
|
||
const paid = isPaidItem(item.access)
|
||
|
||
// Free content: stream via the Range-capable proxy (B3) so the player can
|
||
// seek and start instantly, instead of downloading the whole file as a
|
||
// base64 blob into a non-seekable Blob URL (which broke video/large audio).
|
||
if (!paid) {
|
||
const streamUrl = `/api/peer-content/${encodeURIComponent(onion)}/${encodeURIComponent(item.id)}`
|
||
if (item.mime_type.startsWith('audio/')) {
|
||
audioPlayer.play(streamUrl, item.filename.split('/').pop() || item.filename)
|
||
} else if (item.mime_type.startsWith('video/')) {
|
||
videoPlayerItem.value = item
|
||
videoPlayerUrl.value = streamUrl
|
||
videoPlayerPaid.value = false
|
||
}
|
||
return
|
||
}
|
||
|
||
// Paid content: use the preview/download flow below.
|
||
// If we already have a preview blob URL, use it
|
||
const existingUrl = previewUrls[item.id]
|
||
if (existingUrl) {
|
||
if (item.mime_type.startsWith('audio/')) {
|
||
audioPlayer.play(existingUrl, item.filename.split('/').pop() || item.filename)
|
||
} else if (item.mime_type.startsWith('video/')) {
|
||
videoPlayerItem.value = item
|
||
videoPlayerUrl.value = existingUrl
|
||
videoPlayerPaid.value = paid
|
||
}
|
||
return
|
||
}
|
||
|
||
// Download the content (preview for paid, full for free)
|
||
playing.value = item.id
|
||
try {
|
||
const method = paid ? 'content.preview-peer' : 'content.download-peer'
|
||
const result = await rpcClient.call<{ data?: string; content_type?: string }>({
|
||
method,
|
||
params: { onion, content_id: item.id },
|
||
timeout: 120000,
|
||
})
|
||
|
||
if (result?.data) {
|
||
const mime = result.content_type || item.mime_type
|
||
const bytes = Uint8Array.from(atob(result.data), c => c.charCodeAt(0))
|
||
const blob = new Blob([bytes], { type: mime })
|
||
const blobUrl = URL.createObjectURL(blob)
|
||
previewUrls[item.id] = blobUrl
|
||
|
||
if (item.mime_type.startsWith('audio/')) {
|
||
audioPlayer.play(blobUrl, item.filename.split('/').pop() || item.filename)
|
||
} else if (item.mime_type.startsWith('video/')) {
|
||
videoPlayerItem.value = item
|
||
videoPlayerUrl.value = blobUrl
|
||
videoPlayerPaid.value = paid
|
||
}
|
||
} else {
|
||
purchaseError.value = 'No preview data returned — peer may be offline'
|
||
}
|
||
} catch (e: unknown) {
|
||
purchaseError.value = e instanceof Error ? e.message : 'Failed to load media — peer may be offline'
|
||
} finally {
|
||
playing.value = null
|
||
}
|
||
}
|
||
|
||
function closeVideoPlayer() {
|
||
videoPlayerItem.value = null
|
||
videoPlayerUrl.value = null
|
||
videoPlayerPaid.value = false
|
||
videoLoading.value = false
|
||
videoError.value = false
|
||
}
|
||
|
||
// Show the loader the moment a video opens; the element's playing/canplay/error
|
||
// events clear it.
|
||
watch(videoPlayerUrl, (url) => {
|
||
if (url) {
|
||
videoLoading.value = true
|
||
videoError.value = false
|
||
}
|
||
})
|
||
|
||
/**
|
||
* Probe the streaming proxy with a 1-byte Range request so we can report the
|
||
* real failure reason (peer offline on both mesh and Tor) before kicking off a
|
||
* browser-managed download that can't surface HTTP status. Returns `true` on
|
||
* success, or a human-readable error string. Aborts immediately on success so
|
||
* a large body is never drained.
|
||
*/
|
||
async function probePeerContent(url: string): Promise<true | string> {
|
||
const controller = new AbortController()
|
||
try {
|
||
const res = await fetch(url, {
|
||
headers: { Range: 'bytes=0-0' },
|
||
signal: controller.signal,
|
||
})
|
||
if (res.ok || res.status === 206) {
|
||
controller.abort()
|
||
return true
|
||
}
|
||
let msg = `Peer returned an error (${res.status})`
|
||
try {
|
||
const body = await res.json()
|
||
if (body?.error) msg = String(body.error)
|
||
} catch {
|
||
// non-JSON error body — keep the status-based message
|
||
}
|
||
return msg
|
||
} catch (e) {
|
||
return e instanceof Error ? e.message : 'Could not reach the peer — it may be offline'
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Stream a free file to disk via the Range-capable proxy. The browser manages
|
||
* the transfer with constant memory (no base64, no in-memory Blob), so large
|
||
* files download reliably (#38). Same-origin, so the session cookie rides along.
|
||
*/
|
||
function streamDownload(url: string, item: CatalogItem) {
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = item.filename.split('/').pop() || item.filename
|
||
document.body.appendChild(a)
|
||
a.click()
|
||
a.remove()
|
||
}
|
||
|
||
function triggerDownload(base64Data: string, item: CatalogItem) {
|
||
const blob = new Blob(
|
||
[Uint8Array.from(atob(base64Data), c => c.charCodeAt(0))],
|
||
{ type: item.mime_type },
|
||
)
|
||
const url = URL.createObjectURL(blob)
|
||
const a = document.createElement('a')
|
||
a.href = url
|
||
a.download = item.filename.split('/').pop() || item.filename
|
||
a.click()
|
||
URL.revokeObjectURL(url)
|
||
}
|
||
|
||
defineExpose({ loadCatalog })
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.fade-enter-from,
|
||
.fade-leave-to {
|
||
opacity: 0;
|
||
}
|
||
</style>
|