feat: streaming ecash payments + media playback overhaul
Cashu ecash protocol (BDHKE blind signatures, cashuA token format, mint HTTP client) replacing the stub wallet. TollGate-inspired streaming data payment system with step-based pricing (bytes/time/requests), session management with incremental top-ups, usage metering, and Nostr kind 10021 service advertisements. 13 new streaming.* RPC endpoints. Content server now verifies real Cashu tokens. Profits tracking includes streaming revenue. Frontend: GlobalAudioPlayer (persistent bottom bar across all pages), video lightbox with full controls, audio in MediaLightbox, free file previews (no blur), paid 10% audio/video previews, separated play vs download buttons in PeerFiles. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
@@ -57,47 +57,194 @@
|
||||
<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-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div v-else-if="catalogItems.length > 0" 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 p-4 flex items-center gap-4"
|
||||
class="glass-card overflow-hidden"
|
||||
>
|
||||
<div 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
|
||||
class="text-xs px-2 py-0.5 rounded-full"
|
||||
:class="accessBadgeClass(item.access)"
|
||||
<!-- 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"
|
||||
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"
|
||||
>
|
||||
{{ accessLabel(item.access) }}
|
||||
</span>
|
||||
<button
|
||||
v-if="canDownload(item.access)"
|
||||
class="glass-button px-3 py-1.5 rounded-lg text-xs font-medium"
|
||||
:disabled="downloading === item.id"
|
||||
@click="downloadFile(item)"
|
||||
>
|
||||
{{ downloading === item.id ? '...' : 'Download' }}
|
||||
</button>
|
||||
<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 -->
|
||||
<div class="p-4 flex items-center gap-4">
|
||||
<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>
|
||||
|
||||
<!-- 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 -->
|
||||
<video
|
||||
:src="videoPlayerUrl"
|
||||
class="w-full rounded-xl"
|
||||
controls
|
||||
autoplay
|
||||
/>
|
||||
<!-- 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, Teleport } from 'vue'
|
||||
import { ref, computed, reactive, watch, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { rpcClient } from '@/api/rpc-client'
|
||||
import { useAudioPlayer } from '@/composables/useAudioPlayer'
|
||||
|
||||
const props = defineProps<{
|
||||
peerId?: string
|
||||
@@ -127,6 +274,15 @@ 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)
|
||||
const previewUrls = reactive<Record<string, string>>({})
|
||||
const audioPlayer = useAudioPlayer()
|
||||
|
||||
// Video player modal state
|
||||
const videoPlayerItem = ref<CatalogItem | null>(null)
|
||||
const videoPlayerUrl = ref<string | null>(null)
|
||||
const videoPlayerPaid = ref(false)
|
||||
|
||||
const peerDisplayName = computed(() => {
|
||||
if (currentPeer.value?.name) return currentPeer.value.name
|
||||
@@ -174,6 +330,36 @@ async function loadCatalog() {
|
||||
}
|
||||
}
|
||||
|
||||
// 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)
|
||||
@@ -228,33 +414,162 @@ function accessBadgeClass(access: CatalogItem['access']): string {
|
||||
return 'bg-white/10 text-white/50'
|
||||
}
|
||||
|
||||
function canDownload(access: CatalogItem['access']): boolean {
|
||||
return access === 'free' || access === 'peersonly'
|
||||
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
|
||||
downloading.value = item.id
|
||||
purchaseError.value = null
|
||||
|
||||
try {
|
||||
const result = await rpcClient.call<{ data?: string }>({
|
||||
method: 'content.download-peer',
|
||||
params: { onion, content_id: item.id },
|
||||
timeout: 120000,
|
||||
})
|
||||
if (result?.data) {
|
||||
const blob = new Blob([Uint8Array.from(atob(result.data), 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)
|
||||
const price = getItemPrice(item.access)
|
||||
|
||||
if (price > 0) {
|
||||
// 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 first.`
|
||||
return
|
||||
}
|
||||
} catch {
|
||||
// Balance check failed — try the purchase anyway
|
||||
}
|
||||
|
||||
// Paid download: mint ecash + download atomically
|
||||
const result = await rpcClient.call<{ data?: string; error?: string; price_sats?: number }>({
|
||||
method: 'content.download-peer-paid',
|
||||
params: { onion, content_id: item.id, price_sats: price },
|
||||
timeout: 120000,
|
||||
})
|
||||
|
||||
if (result?.data) {
|
||||
triggerDownload(result.data, item)
|
||||
} else if (result?.error) {
|
||||
purchaseError.value = `Payment failed: ${result.error}`
|
||||
}
|
||||
} else {
|
||||
// Free / peers-only download
|
||||
const result = await rpcClient.call<{ data?: string; error?: string; price_sats?: number }>({
|
||||
method: 'content.download-peer',
|
||||
params: { onion, content_id: item.id },
|
||||
timeout: 120000,
|
||||
})
|
||||
|
||||
if (result?.error === 'payment_required') {
|
||||
purchaseError.value = `This content requires payment: ${result.price_sats ?? 0} sats`
|
||||
return
|
||||
}
|
||||
|
||||
if (result?.data) {
|
||||
triggerDownload(result.data, item)
|
||||
}
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (import.meta.env.DEV) console.warn('Download failed', e)
|
||||
purchaseError.value = e instanceof Error ? e.message : 'Download failed'
|
||||
} finally {
|
||||
downloading.value = null
|
||||
}
|
||||
}
|
||||
|
||||
/** 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)
|
||||
|
||||
// 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
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
purchaseError.value = 'Failed to load media for playback'
|
||||
} finally {
|
||||
playing.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function closeVideoPlayer() {
|
||||
videoPlayerItem.value = null
|
||||
videoPlayerUrl.value = null
|
||||
videoPlayerPaid.value = false
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user