@mundogamernetwork/shared-ui 1.5.0 → 1.7.0

package/pages/widget/wall/[id].vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="widget-root" :style="{ '--accent': alertPixel?.background_color || '#FDB215' }">
+    <!-- Canvas -->
+    <div class="widget-canvas-wrap">
+      <div ref="canvasEl" class="widget-canvas" :style="canvasStyle">
+        <div
+          v-for="pixel in visiblePixels"
+          :key="pixel.id"
+          class="widget-pixel"
+          :class="{ 'widget-pixel--new': newPixelIds.has(pixel.id) }"
+          :style="pixelStyle(pixel)"
+        >
+          <img v-if="pixel.image_url" :src="pixel.image_url" class="widget-pixel__img" alt="" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Alert overlay -->
+    <transition name="alert-slide">
+      <div v-if="alertPixel" :key="alertKey" class="widget-alert">
+        <div class="widget-alert__avatar">
+          <img v-if="alertPixel.buyer_avatar" :src="alertPixel.buyer_avatar" alt="" />
+          <span v-else>{{ (alertPixel.buyer_name || '?')[0].toUpperCase() }}</span>
+        </div>
+        <div class="widget-alert__info">
+          <strong>{{ alertPixel.buyer_name || 'Anonymous' }}</strong>
+          <span v-if="alertPixel.tier_name"> · {{ alertPixel.tier_name }}</span>
+          <span> · {{ alertPixel.pixel_count || 1 }} pixel{{ (alertPixel.pixel_count || 1) > 1 ? 's' : '' }}</span>
+          <p v-if="alertPixel.message" class="widget-alert__msg">{{ alertPixel.message }}</p>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { fetchPublicWall, getWallSupporters, getWallEventsUrl } from '../../../services/indieWallService'
+
+definePageMeta({ layout: 'blank' })
+
+const route = useRoute()
+const wallId = route.params.id as string
+const token = (route.query.token as string) || ''
+
+const CELL_SIZE = 12
+
+interface Pixel {
+  id: number; x: number; y: number
+  width?: number; height?: number; pixel_count?: number
+  background_color?: string; image_url?: string
+  title?: string; message?: string
+  buyer_name?: string; buyer_avatar?: string
+  tier_name?: string; status?: boolean
+}
+
+interface Wall {
+  id: number; width: number; height: number; name?: string
+}
+
+const wall = ref<Wall | null>(null)
+const pixels = ref<Pixel[]>([])
+const newPixelIds = ref(new Set<number>())
+const alertPixel = ref<Pixel | null>(null)
+const alertKey = ref(0)
+const canvasEl = ref<HTMLDivElement | null>(null)
+
+let alertTimer: ReturnType<typeof setTimeout> | null = null
+let audioCtx: AudioContext | null = null
+let es: EventSource | null = null
+
+const visiblePixels = computed(() => pixels.value.filter(p => p.status !== false))
+
+const canvasStyle = computed(() => {
+  if (!wall.value) return {}
+  return {
+    position: 'relative' as const,
+    width: `${wall.value.width * CELL_SIZE}px`,
+    height: `${wall.value.height * CELL_SIZE}px`,
+  }
+})
+
+function pixelStyle(pixel: Pixel) {
+  const w = pixel.width ?? 1
+  const h = pixel.height ?? 1
+  return {
+    position: 'absolute' as const,
+    left: `${pixel.x * CELL_SIZE}px`,
+    top: `${pixel.y * CELL_SIZE}px`,
+    width: `${w * CELL_SIZE}px`,
+    height: `${h * CELL_SIZE}px`,
+    backgroundColor: pixel.image_url ? 'transparent' : (pixel.background_color || '#FDB215'),
+    overflow: 'hidden',
+  }
+}
+
+function unlockAudio() {
+  if (!audioCtx) audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)()
+  if (audioCtx.state === 'suspended') audioCtx.resume()
+}
+
+let audioUnlockInterval: ReturnType<typeof setInterval> | null = null
+
+function playChime() {
+  if (!audioCtx) return
+  try {
+    const osc = audioCtx.createOscillator()
+    const gain = audioCtx.createGain()
+    osc.connect(gain)
+    gain.connect(audioCtx.destination)
+    osc.type = 'sine'
+    const t = audioCtx.currentTime
+    osc.frequency.setValueAtTime(880, t)
+    osc.frequency.linearRampToValueAtTime(1320, t + 0.12)
+    gain.gain.setValueAtTime(0.4, t)
+    gain.gain.exponentialRampToValueAtTime(0.001, t + 0.8)
+    osc.start(t)
+    osc.stop(t + 0.8)
+  } catch {}
+}
+
+function showAlert(pixel: Pixel) {
+  alertPixel.value = pixel
+  alertKey.value++
+  if (alertTimer) clearTimeout(alertTimer)
+  alertTimer = setTimeout(() => { alertPixel.value = null }, 7000)
+  playChime()
+}
+
+function addNewPixel(data: any) {
+  const pixel: Pixel = {
+    id: data.pixel_id || Date.now(),
+    x: data.x, y: data.y,
+    pixel_count: data.pixel_count,
+    width: data.pixel_count, height: 1,
+    background_color: data.background_color,
+    image_url: data.image_url,
+    message: data.message,
+    buyer_name: data.buyer_name,
+    tier_name: data.tier_name,
+    status: true,
+  }
+  pixels.value.push(pixel)
+  newPixelIds.value = new Set([...newPixelIds.value, pixel.id])
+  setTimeout(() => {
+    const next = new Set(newPixelIds.value)
+    next.delete(pixel.id)
+    newPixelIds.value = next
+  }, 3000)
+  showAlert(pixel)
+}
+
+function connectSSE() {
+  if (!token) return
+  es = new EventSource(getWallEventsUrl(wallId, token))
+  es.addEventListener('purchase', (e: MessageEvent) => {
+    try { addNewPixel(JSON.parse(e.data)) } catch {}
+  })
+  es.onerror = () => {
+    es?.close()
+    setTimeout(connectSSE, 5000)
+  }
+}
+
+onMounted(async () => {
+  // OBS's embedded Chromium runs every Browser Source with autoplay unlocked
+  // by default, so resume() succeeds here with no user gesture. This widget
+  // runs unattended during a live stream — a click/keydown would never fire.
+  unlockAudio()
+  audioUnlockInterval = setInterval(() => {
+    if (!audioCtx) { unlockAudio(); return }
+    if (audioCtx.state === 'running') {
+      if (audioUnlockInterval) clearInterval(audioUnlockInterval)
+      return
+    }
+    audioCtx.resume().catch(() => {})
+  }, 3000)
+
+  try {
+    const [wallRes, pixelRes] = await Promise.all([
+      fetchPublicWall(wallId),
+      getWallSupporters(wallId, { per_page: 'all' }),
+    ])
+    wall.value = (wallRes as any)?.data ?? wallRes
+    pixels.value = ((pixelRes as any)?.data ?? []).filter((p: Pixel) => p.status !== false)
+  } catch {}
+  connectSSE()
+})
+
+onBeforeUnmount(() => {
+  es?.close()
+  if (alertTimer) clearTimeout(alertTimer)
+  if (audioUnlockInterval) clearInterval(audioUnlockInterval)
+})
+</script>
+
+<style scoped lang="scss">
+.widget-root {
+  background: transparent;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.widget-canvas-wrap {
+  overflow: auto;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+.widget-canvas {
+  background: #0d0d0d;
+  background-image:
+    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
+  background-size: 12px 12px;
+}
+
+.widget-pixel {
+  box-sizing: border-box;
+
+  &__img {
+    width: 100%; height: 100%;
+    object-fit: cover; display: block;
+  }
+
+  &--new {
+    animation: pixel-pop 0.4s ease-out, pixel-glow 2.5s ease-out forwards;
+  }
+}
+
+@keyframes pixel-pop {
+  0%   { transform: scale(0.5); opacity: 0.6; }
+  60%  { transform: scale(1.15); }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes pixel-glow {
+  0%   { box-shadow: 0 0 10px 3px var(--accent, #64D8FF); }
+  80%  { box-shadow: 0 0 4px 1px color-mix(in srgb, var(--accent, #64D8FF) 50%, transparent); }
+  100% { box-shadow: none; }
+}
+
+.widget-alert {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(13,13,13,0.92);
+  border: 1px solid var(--accent, #64D8FF);
+  padding: 12px 20px;
+  max-width: 400px;
+  z-index: 100;
+  box-shadow: 0 0 20px rgba(100, 216, 255, 0.2);
+
+  &__avatar {
+    width: 44px; height: 44px;
+    background: var(--accent, #64D8FF);
+    flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+    font-weight: 700; color: #000; font-size: 18px;
+    overflow: hidden;
+
+    img { width: 100%; height: 100%; object-fit: cover; }
+  }
+
+  &__info {
+    flex: 1;
+    color: #fff;
+    font-size: 14px;
+    line-height: 1.4;
+
+    strong { color: var(--accent, #64D8FF); }
+  }
+
+  &__msg {
+    margin: 4px 0 0;
+    font-size: 12px;
+    color: #aaa;
+    font-style: italic;
+  }
+}
+
+.alert-slide-enter-active,
+.alert-slide-leave-active { transition: all 0.3s ease; }
+.alert-slide-enter-from,
+.alert-slide-leave-to { opacity: 0; transform: translateX(-50%) translateY(20px); }
+</style>