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>

neode-ui/src/App.vue

@@ -37,6 +37,9 @@
     <!-- PWA Install Prompt (Install app, not just Add to Home Screen) -->
     <PWAInstallPrompt />
 
+    <!-- Global persistent audio player (bottom bar) -->
+    <GlobalAudioPlayer />
+
     <!-- Toast notifications - top right, glass style, any page -->
     <Teleport to="body">
       <Transition name="toast">
@@ -75,6 +78,7 @@ import AppLauncherOverlay from './components/AppLauncherOverlay.vue'
 import ToastStack from './components/ToastStack.vue'
 import Screensaver from './components/Screensaver.vue'
 import HelpGuideModal from './components/HelpGuideModal.vue'
+import GlobalAudioPlayer from './components/GlobalAudioPlayer.vue'
 
 import { useControllerNav } from '@/composables/useControllerNav'
 import { playKeyboardTypingSound } from '@/composables/useLoginSounds'

neode-ui/src/components/GlobalAudioPlayer.vue

@@ -0,0 +1,106 @@
+<template>
+  <!-- Spacer to prevent content from being hidden behind the player -->
+  <div v-if="audioPlayer.currentName.value" class="h-14"></div>
+
+  <Teleport to="body">
+    <Transition name="slide-up">
+      <div
+        v-if="audioPlayer.currentName.value"
+        class="fixed bottom-0 left-0 right-0 z-50 audio-player-bar"
+      >
+        <!-- Progress bar (clickable) -->
+        <div
+          class="h-1 bg-white/10 cursor-pointer"
+          @click="onProgressClick"
+        >
+          <div
+            class="h-full bg-orange-500 transition-all duration-200"
+            :style="{ width: audioPlayer.progress.value + '%' }"
+          />
+        </div>
+
+        <div class="flex items-center gap-3 px-4 py-2.5">
+          <!-- Play/Pause -->
+          <button
+            class="flex-shrink-0 w-9 h-9 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
+            @click="togglePlay"
+          >
+            <svg v-if="!audioPlayer.playing.value" class="w-5 h-5 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M8 5v14l11-7L8 5z" />
+            </svg>
+            <svg v-else class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+            </svg>
+          </button>
+
+          <!-- Track info -->
+          <div class="flex-1 min-w-0">
+            <p v-if="audioPlayer.error.value" class="text-sm text-red-400 truncate">{{ audioPlayer.error.value }}</p>
+            <p v-else class="text-sm font-medium text-white/90 truncate">{{ audioPlayer.currentName.value }}</p>
+            <p class="text-xs text-white/40">{{ formatTime(audioPlayer.currentTime.value) }} / {{ formatTime(audioPlayer.duration.value) }}</p>
+          </div>
+
+          <!-- Close -->
+          <button
+            class="flex-shrink-0 w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center transition-colors"
+            @click="audioPlayer.stop()"
+          >
+            <svg class="w-4 h-4 text-white/60" 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>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useAudioPlayer } from '@/composables/useAudioPlayer'
+
+const audioPlayer = useAudioPlayer()
+
+function togglePlay() {
+  if (audioPlayer.playing.value) {
+    audioPlayer.pause()
+  } else if (audioPlayer.currentSrc.value) {
+    audioPlayer.play(audioPlayer.currentSrc.value, audioPlayer.currentName.value)
+  }
+}
+
+function onProgressClick(e: MouseEvent) {
+  const el = e.currentTarget as HTMLElement
+  const rect = el.getBoundingClientRect()
+  const ratio = (e.clientX - rect.left) / rect.width
+  const time = ratio * audioPlayer.duration.value
+  audioPlayer.seek(time)
+}
+
+function formatTime(seconds: number): string {
+  if (!seconds || !isFinite(seconds)) return '0:00'
+  const m = Math.floor(seconds / 60)
+  const s = Math.floor(seconds % 60)
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+</script>
+
+<style scoped>
+.audio-player-bar {
+  background: rgba(15, 15, 15, 0.55);
+  backdrop-filter: blur(24px) saturate(1.4);
+  -webkit-backdrop-filter: blur(24px) saturate(1.4);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+</style>

neode-ui/src/components/cloud/FileCardGrid.vue

@@ -47,7 +47,7 @@
         v-if="isAudio || isVideo"
         class="cloud-grid-card-play"
         :class="{ 'cloud-grid-card-play-active': isCurrentlyPlaying }"
-        @click.stop="emit('play', item.path, item.name)"
+        @click.stop="isVideo ? emit('preview', item.path) : emit('play', item.path, item.name)"
       >
         <span class="cloud-grid-card-play-btn">
           <svg v-if="!isCurrentlyPlaying" class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
@@ -132,6 +132,7 @@ const emit = defineEmits<{
   delete: [path: string]
   play: [path: string, name: string]
   share: [path: string, name: string, isDir: boolean]
+  preview: [path: string]
 }>()
 
 const cloudStore = useCloudStore()
@@ -171,6 +172,8 @@ const coverBg = computed(() => {
 function handleClick() {
   if (props.item.isDir) {
     emit('navigate', props.item.path)
+  } else if (isImage.value || isVideo.value) {
+    emit('preview', props.item.path)
   }
 }
 </script>

neode-ui/src/components/cloud/MediaLightbox.vue

@@ -0,0 +1,256 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="show"
+      class="lightbox-backdrop"
+      @click.self="close"
+      @keydown="onKeydown"
+      tabindex="0"
+      ref="backdropEl"
+    >
+      <!-- Close button -->
+      <button class="lightbox-close" @click="close">
+        <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>
+
+      <!-- Counter -->
+      <div v-if="mediaItems.length > 1" class="lightbox-counter">
+        {{ currentIndex + 1 }} / {{ mediaItems.length }}
+      </div>
+
+      <!-- Previous button -->
+      <button
+        v-if="mediaItems.length > 1"
+        class="lightbox-nav lightbox-nav-prev"
+        @click.stop="prev"
+      >
+        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
+
+      <!-- Next button -->
+      <button
+        v-if="mediaItems.length > 1"
+        class="lightbox-nav lightbox-nav-next"
+        @click.stop="next"
+      >
+        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+
+      <!-- Media content -->
+      <div class="lightbox-content" @click.stop>
+        <!-- Loading -->
+        <div v-if="loading" class="lightbox-loading">
+          <div class="w-10 h-10 border-3 border-white/20 border-t-white/80 rounded-full animate-spin"></div>
+        </div>
+
+        <!-- Image -->
+        <img
+          v-else-if="currentItem && currentUrl && isImageFile(currentItem)"
+          :src="currentUrl"
+          :alt="currentItem.name"
+          class="lightbox-media"
+          @error="onMediaError"
+        />
+
+        <!-- Video -->
+        <video
+          v-else-if="currentItem && currentUrl && isVideoFile(currentItem)"
+          :src="currentUrl"
+          :key="currentUrl"
+          class="lightbox-media"
+          controls
+          autoplay
+          @error="onMediaError"
+        />
+
+        <!-- Audio -->
+        <div
+          v-else-if="currentItem && currentUrl && isAudioFile(currentItem)"
+          class="flex flex-col items-center justify-center gap-6 p-8"
+        >
+          <div class="w-32 h-32 rounded-2xl bg-gradient-to-br from-orange-500/20 to-orange-600/10 flex items-center justify-center">
+            <svg class="w-16 h-16 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>
+          </div>
+          <audio
+            :src="currentUrl"
+            :key="currentUrl"
+            controls
+            autoplay
+            class="w-full max-w-md"
+            @error="onMediaError"
+          />
+        </div>
+
+        <!-- Error -->
+        <div v-else-if="mediaError" class="lightbox-error">
+          <p class="text-white/60">Failed to load media</p>
+        </div>
+      </div>
+
+      <!-- Filename -->
+      <div class="lightbox-filename">
+        <p class="text-sm text-white/70 truncate max-w-md">{{ currentItem?.name }}</p>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted, nextTick } from 'vue'
+import type { FileBrowserItem } from '@/api/filebrowser-client'
+import { getFileCategory } from '@/composables/useFileType'
+
+const props = defineProps<{
+  items: FileBrowserItem[]
+  startIndex: number
+  show: boolean
+  fetchBlobUrl: (path: string) => Promise<string>
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const currentIndex = ref(0)
+const loading = ref(false)
+const mediaError = ref(false)
+const currentUrl = ref<string | null>(null)
+const backdropEl = ref<HTMLElement | null>(null)
+
+// Cache blob URLs to avoid re-fetching
+const urlCache = new Map<string, string>()
+
+const mediaItems = computed(() =>
+  props.items.filter(item => {
+    const ext = item.name.includes('.') ? item.name.split('.').pop()!.toLowerCase() : ''
+    const cat = getFileCategory(ext, item.isDir)
+    return cat === 'image' || cat === 'video' || cat === 'audio'
+  })
+)
+
+const currentItem = computed(() => mediaItems.value[currentIndex.value] ?? null)
+
+function isImageFile(item: FileBrowserItem): boolean {
+  const ext = item.name.includes('.') ? item.name.split('.').pop()!.toLowerCase() : ''
+  return getFileCategory(ext, false) === 'image'
+}
+
+function isVideoFile(item: FileBrowserItem): boolean {
+  const ext = item.name.includes('.') ? item.name.split('.').pop()!.toLowerCase() : ''
+  return getFileCategory(ext, false) === 'video'
+}
+
+function isAudioFile(item: FileBrowserItem): boolean {
+  const ext = item.name.includes('.') ? item.name.split('.').pop()!.toLowerCase() : ''
+  return getFileCategory(ext, false) === 'audio'
+}
+
+async function loadMedia(item: FileBrowserItem) {
+  loading.value = true
+  mediaError.value = false
+  currentUrl.value = null
+
+  try {
+    const cached = urlCache.get(item.path)
+    if (cached) {
+      currentUrl.value = cached
+    } else {
+      const url = await props.fetchBlobUrl(item.path)
+      urlCache.set(item.path, url)
+      currentUrl.value = url
+    }
+  } catch {
+    mediaError.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+function preloadAdjacent() {
+  const items = mediaItems.value
+  if (items.length <= 1) return
+  const prevIdx = (currentIndex.value - 1 + items.length) % items.length
+  const nextIdx = (currentIndex.value + 1) % items.length
+
+  for (const idx of [prevIdx, nextIdx]) {
+    const item = items[idx]
+    if (item && !urlCache.has(item.path) && isImageFile(item)) {
+      props.fetchBlobUrl(item.path).then(url => {
+        urlCache.set(item.path, url)
+      }).catch(() => {})
+    }
+  }
+}
+
+function prev() {
+  const len = mediaItems.value.length
+  if (len <= 1) return
+  currentIndex.value = (currentIndex.value - 1 + len) % len
+}
+
+function next() {
+  const len = mediaItems.value.length
+  if (len <= 1) return
+  currentIndex.value = (currentIndex.value + 1) % len
+}
+
+function close() {
+  emit('close')
+}
+
+function onMediaError() {
+  mediaError.value = true
+  loading.value = false
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    close()
+  } else if (e.key === 'ArrowLeft') {
+    e.preventDefault()
+    prev()
+  } else if (e.key === 'ArrowRight') {
+    e.preventDefault()
+    next()
+  }
+}
+
+// Load media when current item changes
+watch(currentItem, (item) => {
+  if (item) {
+    loadMedia(item)
+    preloadAdjacent()
+  }
+})
+
+// Initialize when shown
+watch(() => props.show, async (visible) => {
+  if (visible) {
+    currentIndex.value = props.startIndex
+    const item = mediaItems.value[props.startIndex]
+    if (item) {
+      await loadMedia(item)
+      preloadAdjacent()
+    }
+    await nextTick()
+    backdropEl.value?.focus()
+  }
+}, { immediate: true })
+
+// Clean up blob URLs on unmount
+onUnmounted(() => {
+  for (const url of urlCache.values()) {
+    URL.revokeObjectURL(url)
+  }
+  urlCache.clear()
+})
+</script>

neode-ui/src/views/CloudFolder.vue

@@ -119,25 +119,10 @@
         @delete="handleDelete"
         @play="handlePlay"
         @share="handleShare"
+        @preview="handlePreview"
       />
 
-      <!-- Mini Audio Player -->
-      <div v-if="audioPlayer.currentName.value" class="cloud-audio-player">
-        <button class="cloud-audio-player-btn" @click="audioPlayer.playing.value ? audioPlayer.pause() : audioPlayer.play(audioPlayer.currentSrc.value!, audioPlayer.currentName.value)">
-          <svg v-if="!audioPlayer.playing.value" class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7L8 5z" /></svg>
-          <svg v-else class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" /></svg>
-        </button>
-        <div class="flex-1 min-w-0">
-          <p v-if="audioPlayer.error.value" class="text-sm text-red-400 truncate">{{ audioPlayer.error.value }}</p>
-          <p v-else class="text-sm font-medium text-white/90 truncate">{{ audioPlayer.currentName.value }}</p>
-          <div class="cloud-audio-progress">
-            <div class="cloud-audio-progress-bar" :style="{ width: audioPlayer.progress.value + '%' }"></div>
-          </div>
-        </div>
-        <button class="cloud-audio-player-btn" @click="audioPlayer.stop()">
-          <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>
-      </div>
+      <!-- Audio player is now the global bottom bar (GlobalAudioPlayer in App.vue) -->
     </div>
 
     <!-- Fallback iframe (for sections without native UI) -->
@@ -168,6 +153,16 @@
       @close="shareTarget = null"
       @saved="shareTarget = null"
     />
+
+    <!-- Media Lightbox -->
+    <MediaLightbox
+      v-if="lightboxIndex !== null"
+      :items="cloudStore.sortedItems"
+      :start-index="lightboxIndex"
+      :show="lightboxIndex !== null"
+      :fetch-blob-url="cloudStore.fetchBlobUrl"
+      @close="lightboxIndex = null"
+    />
   </div>
 </template>
 
@@ -179,7 +174,9 @@ import { useCloudStore } from '../stores/cloud'
 import CloudToolbar from '../components/cloud/CloudToolbar.vue'
 import FileGrid from '../components/cloud/FileGrid.vue'
 import ShareModal from '../components/cloud/ShareModal.vue'
+import MediaLightbox from '../components/cloud/MediaLightbox.vue'
 import { useAudioPlayer } from '../composables/useAudioPlayer'
+import { getFileCategory } from '../composables/useFileType'
 
 const router = useRouter()
 const route = useRoute()
@@ -301,6 +298,20 @@ watch([useNativeUI, section], async ([native, sec]) => {
 }, { immediate: true })
 
 const shareTarget = ref<{ path: string; name: string; isDir: boolean } | null>(null)
+const lightboxIndex = ref<number | null>(null)
+
+function handlePreview(path: string) {
+  // MediaLightbox internally filters items to media only, so startIndex
+  // must be the index within that filtered list
+  const items = cloudStore.sortedItems
+  const mediaItems = items.filter(item => {
+    const ext = item.name.includes('.') ? item.name.split('.').pop()!.toLowerCase() : ''
+    const cat = getFileCategory(ext, item.isDir)
+    return cat === 'image' || cat === 'video' || cat === 'audio'
+  })
+  const idx = mediaItems.findIndex(item => item.path === path)
+  lightboxIndex.value = idx >= 0 ? idx : 0
+}
 
 function handleShare(path: string, name: string, isDir: boolean) {
   shareTarget.value = { path, name, isDir }

neode-ui/src/views/PeerFiles.vue

@@ -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>