@mundogamernetwork/shared-ui 1.16.21 → 1.16.23

package/pages/mural/[slug]/pixel/[pixelId].vue

@@ -1,456 +0,0 @@
-<script setup lang="ts">
-import {
-	fetchPublicWall,
-	getWallPixel,
-	requestWallPixelShareRender,
-	pollWallPixelShareRender,
-} from '../../../../services/indieWallService'
-
-const { t, locale } = useI18n()
-const route = useRoute()
-const localePath = useLocalePath()
-const wallSlug = route.params.slug as string
-const pixelId = route.params.pixelId as string
-
-// SSR-safe fetch: the wall must be resolved first (its numeric id, not the
-// slug, is what the pixel/share-render endpoints key off — see
-// IndieWallController::showPixel / IndieWallPixelShareController, which
-// compare indie_wall_id directly and do not resolve a slug like show()/
-// supporters() do).
-const { data, error } = await useAsyncData(`mural-pixel-${wallSlug}-${pixelId}`, async () => {
-	const wallRes = await fetchPublicWall(wallSlug)
-	const wall = wallRes.data?.data || wallRes.data
-	if (!wall?.id) return null
-	const pixelRes = await getWallPixel(wall.id, pixelId)
-	const pixel = pixelRes.data?.data || pixelRes.data
-	if (!pixel?.id) return null
-	return { wall, pixel }
-})
-
-if (error.value || !data.value?.wall || !data.value?.pixel) {
-	throw createError({ statusCode: 404, statusMessage: 'Pixel not found' })
-}
-
-const wall = ref<any>(data.value.wall)
-const pixel = ref<any>(data.value.pixel)
-
-// ── Display helpers (duplicated from pages/mural/[slug]/index.vue rather
-// than shared, matching this repo's existing pattern in
-// components/indie-wall/MediaKitWallBlock.vue, which duplicates the same
-// small pure functions instead of extracting a composable). ─────────────────
-function supporterDisplayName(s: any): string {
-	if (!s) return t('tv.dashboard.indie_wall.anonymous')
-	if (s.is_anonymous) return t('tv.dashboard.indie_wall.anonymous')
-	return s.user?.nickname
-		|| s.user?.username
-		|| s.user?.full_name
-		|| s.user?.name
-		|| s.guest_name
-		|| t('tv.dashboard.indie_wall.anonymous')
-}
-
-function formatMoney(amount: number, currency?: string | null) {
-	try {
-		return new Intl.NumberFormat(locale.value, { style: 'currency', currency: currency || 'USD' }).format(amount)
-	} catch {
-		return `${currency || ''} ${Number(amount).toFixed(2)}`.trim()
-	}
-}
-
-const displayName = computed(() => supporterDisplayName(pixel.value))
-
-// ── SEO ───────────────────────────────────────────────────────────────────
-const requestUrl = useRequestURL()
-
-const seoTitle = computed(() => t('tv.dashboard.indie_wall.share_pixel_title', {
-	name: displayName.value,
-	wall: wall.value?.name,
-}))
-const seoDescription = computed(() =>
-	pixel.value?.supporter_message
-	|| t('tv.dashboard.indie_wall.share_pixel_default_desc', { wall: wall.value?.name }),
-)
-// share_image_url (auto-generated branded reveal) takes priority, then the
-// pixel's own uploaded image, then the wall's cover/logo as a last resort.
-const seoImage = computed(() =>
-	pixel.value?.share_image_url
-	|| pixel.value?.image_url
-	|| wall.value?.cover_image_url
-	|| wall.value?.logo_url
-	|| '',
-)
-
-// Raw useHead meta-array form — same proven pattern as
-// pages/mural/[slug]/index.vue (see the comment there: useSeoMeta silently
-// dropped og:*/twitter:*/description overrides in this app).
-useHead(() => ({
-	title: seoTitle.value,
-	link: [{ rel: 'canonical', href: requestUrl.href }],
-	meta: [
-		{ name: 'description', content: seoDescription.value },
-		{ property: 'og:title', content: seoTitle.value },
-		{ property: 'og:description', content: seoDescription.value },
-		...(seoImage.value ? [{ property: 'og:image', content: seoImage.value }] : []),
-		{ property: 'og:type', content: 'website' },
-		{ property: 'og:url', content: requestUrl.href },
-		{ property: 'og:site_name', content: 'Mundo Gamer Wall' },
-		{ name: 'twitter:card', content: 'summary_large_image' },
-		{ name: 'twitter:title', content: seoTitle.value },
-		{ name: 'twitter:description', content: seoDescription.value },
-		...(seoImage.value ? [{ name: 'twitter:image', content: seoImage.value }] : []),
-	],
-}))
-
-// ── Share: copy / native share the page link ────────────────────────────────
-const shareText = computed(() => t('tv.dashboard.indie_wall.share_pixel_text', {
-	name: displayName.value,
-	wall: wall.value?.name,
-}))
-const shareTwitterUrl = computed(() => `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText.value)}&url=${encodeURIComponent(requestUrl.href)}`)
-const shareWhatsappUrl = computed(() => `https://wa.me/?text=${encodeURIComponent(`${shareText.value} ${requestUrl.href}`)}`)
-const shareFacebookUrl = computed(() => `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(requestUrl.href)}`)
-
-const linkCopied = ref(false)
-async function shareOrCopyLink() {
-	if (typeof navigator !== 'undefined' && (navigator as any).share) {
-		try {
-			await (navigator as any).share({ title: seoTitle.value, text: shareText.value, url: requestUrl.href })
-			return
-		} catch {
-			// user cancelled the native sheet, or it's unsupported for this
-			// context — fall back to clipboard copy below.
-		}
-	}
-	try {
-		await navigator.clipboard.writeText(requestUrl.href)
-		linkCopied.value = true
-		setTimeout(() => { linkCopied.value = false }, 2000)
-	} catch { /* clipboard unavailable */ }
-}
-
-// ── Download the pixel's own image ──────────────────────────────────────────
-const pixelDownloadImage = computed(() => pixel.value?.share_image_url || pixel.value?.image_url || '')
-
-// ── Generate-on-demand branded reveal video ─────────────────────────────────
-const renderState = ref<'idle' | 'rendering' | 'done' | 'failed'>('idle')
-const renderAssetUrl = ref<string | null>(null)
-let renderPollTimer: ReturnType<typeof setInterval> | null = null
-
-function stopRenderPolling() {
-	if (renderPollTimer) {
-		clearInterval(renderPollTimer)
-		renderPollTimer = null
-	}
-}
-
-function pollRenderJob(jobId: string) {
-	stopRenderPolling()
-	renderPollTimer = setInterval(async () => {
-		try {
-			const res = await pollWallPixelShareRender(wall.value.id, pixel.value.id, jobId)
-			const status = res.data?.status
-			if (status === 'done') {
-				renderAssetUrl.value = res.data?.assetUrl || null
-				renderState.value = renderAssetUrl.value ? 'done' : 'failed'
-				stopRenderPolling()
-			} else if (status === 'failed') {
-				renderState.value = 'failed'
-				stopRenderPolling()
-			}
-			// any other status (e.g. 'rendering') keeps the loop going
-		} catch {
-			// transient network hiccup on a single poll — keep trying
-		}
-	}, 3000)
-}
-
-async function generateReveal() {
-	if (!wall.value?.id || !pixel.value?.id || renderState.value === 'rendering') return
-	renderState.value = 'rendering'
-	renderAssetUrl.value = null
-	try {
-		const res = await requestWallPixelShareRender(wall.value.id, pixel.value.id, 'video')
-		const jobId = res.data?.jobId
-		if (!jobId) throw new Error('missing_job_id')
-		pollRenderJob(jobId)
-	} catch {
-		renderState.value = 'failed'
-	}
-}
-
-const renderAssetIsVideo = computed(() =>
-	!!renderAssetUrl.value && /\.(mp4|webm|mov)(\?|$)/i.test(renderAssetUrl.value),
-)
-
-onUnmounted(() => stopRenderPolling())
-
-// ── Back to wall ─────────────────────────────────────────────────────────────
-const backToWallUrl = computed(() => localePath(`/mural/${wallSlug}`))
-</script>
-
-<template>
-	<div class="pixel-page">
-		<NuxtLink :to="backToWallUrl" class="back-link">
-			← {{ $t('tv.dashboard.indie_wall.back_to_wall') }}
-		</NuxtLink>
-
-		<div class="pixel-card">
-			<div class="pixel-hero" :style="{ background: pixel.background_color || '#272930' }">
-				<img v-if="pixel.share_image_url || pixel.image_url" :src="pixel.share_image_url || pixel.image_url" alt="" />
-				<span v-else class="pixel-initial">{{ (displayName || '?')[0].toUpperCase() }}</span>
-			</div>
-
-			<div class="pixel-body">
-				<p class="pixel-name">{{ displayName }}</p>
-				<p v-if="pixel.title && pixel.title !== displayName" class="pixel-title">{{ pixel.title }}</p>
-				<p v-if="pixel.supporter_message" class="pixel-msg">"{{ pixel.supporter_message }}"</p>
-
-				<div class="pixel-amount-row">
-					<span class="pixel-amount-label">{{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
-					<span class="pixel-amount-value">{{ formatMoney(Number(pixel.amount_paid), wall?.currency) }}</span>
-				</div>
-
-				<div class="pixel-chips">
-					<span class="pixel-chip">{{ pixel.pixel_count }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
-					<span class="pixel-chip">{{ $t('tv.dashboard.indie_wall.mural_position') }} ({{ pixel.x }}, {{ pixel.y }})</span>
-				</div>
-
-				<a v-if="pixel.link" :href="pixel.link" target="_blank" rel="noopener" class="pixel-link">
-					{{ pixel.link }}
-				</a>
-
-				<p class="pixel-wall-context">
-					{{ $t('tv.dashboard.indie_wall.mural_by', { name: wall.owner_nickname || wall.owner_name || wall.name }) }}
-				</p>
-
-				<!-- ── Share ─────────────────────────────────────────────────── -->
-				<div class="pixel-share">
-					<p class="pixel-share-title">{{ $t('tv.dashboard.indie_wall.share_pixel_cta') }}</p>
-
-					<div class="pixel-share-row">
-						<a :href="shareTwitterUrl" target="_blank" rel="noopener" class="pixel-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_twitter')">𝕏</a>
-						<a :href="shareWhatsappUrl" target="_blank" rel="noopener" class="pixel-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_whatsapp')">
-							<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M9.2 6.8c-.2-.45-.42-.46-.62-.47h-.53c-.18 0-.48.07-.73.34-.25.27-.96.93-.96 2.28s.98 2.65 1.12 2.83c.14.18 1.9 3.03 4.7 4.14 2.32.92 2.8.74 3.3.7.5-.05 1.62-.66 1.85-1.3.23-.63.23-1.17.16-1.29-.07-.11-.25-.18-.53-.32-.27-.14-1.62-.8-1.87-.89-.25-.09-.43-.14-.62.14-.18.27-.7.89-.86 1.07-.16.18-.32.2-.59.07-.27-.14-1.15-.42-2.19-1.35-.81-.72-1.36-1.62-1.52-1.89-.16-.27-.02-.42.12-.55.13-.13.27-.33.4-.5.13-.16.18-.27.27-.45.09-.18.05-.34-.02-.48-.07-.14-.6-1.5-.85-2.05Z"/></svg>
-						</a>
-						<a :href="shareFacebookUrl" target="_blank" rel="noopener" class="pixel-share-btn" :aria-label="$t('tv.dashboard.indie_wall.share_via_facebook')">f</a>
-						<button type="button" class="pixel-share-btn" @click="shareOrCopyLink" :aria-label="$t('tv.dashboard.indie_wall.share_copy_link')">
-							{{ linkCopied ? '✓' : '🔗' }}
-						</button>
-					</div>
-					<p v-if="linkCopied" class="pixel-share-copied">{{ $t('tv.dashboard.indie_wall.share_link_copied') }}</p>
-
-					<a
-						v-if="pixelDownloadImage"
-						:href="pixelDownloadImage"
-						download
-						target="_blank"
-						rel="noopener"
-						class="pixel-share-action"
-					>
-						{{ $t('tv.dashboard.indie_wall.share_download_image') }}
-					</a>
-
-					<button
-						type="button"
-						class="pixel-share-action"
-						:disabled="renderState === 'rendering'"
-						@click="generateReveal"
-					>
-						{{ renderState === 'rendering'
-							? $t('tv.dashboard.indie_wall.share_generating')
-							: $t('tv.dashboard.indie_wall.share_generate_video') }}
-					</button>
-
-					<p v-if="renderState === 'failed'" class="pixel-share-error">
-						{{ $t('tv.dashboard.indie_wall.share_generate_failed') }}
-					</p>
-
-					<div v-if="renderState === 'done' && renderAssetUrl" class="pixel-reveal-result">
-						<p class="pixel-reveal-title">{{ $t('tv.dashboard.indie_wall.share_video_ready') }}</p>
-						<video v-if="renderAssetIsVideo" :src="renderAssetUrl" controls class="pixel-reveal-media" />
-						<img v-else :src="renderAssetUrl" alt="" class="pixel-reveal-media" />
-						<a :href="renderAssetUrl" download target="_blank" rel="noopener" class="pixel-share-action">
-							{{ $t('tv.dashboard.indie_wall.share_download_image') }}
-						</a>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style lang="scss" scoped>
-.pixel-page {
-	max-width: 480px;
-	margin: 0 auto;
-	padding: 32px 16px 100px;
-}
-
-.back-link {
-	display: inline-block;
-	color: var(--secondary-info-fg, #aaa);
-	font-size: 0.82rem;
-	text-decoration: none;
-	margin-bottom: 20px;
-	&:hover { color: var(--title-fg, #fff); }
-}
-
-.pixel-card {
-	background: #13141A;
-	border: 1px solid rgba(107, 21, 172, 0.35);
-	overflow: hidden;
-	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(107, 21, 172, 0.1);
-}
-
-.pixel-hero {
-	width: 100%;
-	height: 260px;
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: #0d0f13;
-	img { max-width: 100%; max-height: 100%; object-fit: contain; }
-}
-.pixel-initial {
-	font-size: 5rem;
-	font-weight: 700;
-	color: rgba(255, 255, 255, 0.5);
-	line-height: 1;
-}
-
-.pixel-body { padding: 24px; }
-.pixel-name {
-	font-size: 1.3rem;
-	font-weight: 700;
-	color: var(--title-fg, #fff);
-	margin: 0 0 4px;
-}
-.pixel-title {
-	color: var(--secondary-info-fg, #aaa);
-	font-size: 0.85rem;
-	line-height: 1.35;
-	margin: 0 0 10px;
-}
-.pixel-msg {
-	color: var(--secondary-info-fg, #aaa);
-	font-size: 0.92rem;
-	font-style: italic;
-	line-height: 1.5;
-	margin: 0 0 16px;
-}
-.pixel-amount-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	background: rgba(107, 21, 172, 0.12);
-	border: 1px solid rgba(107, 21, 172, 0.25);
-	padding: 10px 14px;
-	margin-bottom: 12px;
-}
-.pixel-amount-label {
-	font-size: 12px;
-	color: var(--secondary-info-fg, #aaa);
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-}
-.pixel-amount-value {
-	font-weight: 700;
-	font-size: 1.15rem;
-	color: var(--chip-text, #D297FF);
-}
-.pixel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
-.pixel-chip {
-	font-size: 11px;
-	color: var(--secondary-info-fg, #aaa);
-	background: rgba(255, 255, 255, 0.05);
-	border: 1px solid rgba(255, 255, 255, 0.08);
-	padding: 3px 8px;
-}
-.pixel-link {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	color: var(--chip-text, #D297FF);
-	font-size: 0.8rem;
-	word-break: break-all;
-	text-decoration: none;
-	margin-bottom: 8px;
-	&:hover { text-decoration: underline; }
-}
-.pixel-wall-context {
-	color: var(--secondary-info-fg, #888);
-	font-size: 0.78rem;
-	margin: 0;
-}
-
-.pixel-share {
-	margin-top: 20px;
-	padding-top: 20px;
-	border-top: 1px solid #272930;
-}
-.pixel-share-title {
-	margin: 0 0 10px;
-	font-size: 0.85rem;
-	font-weight: 600;
-	color: var(--title-fg, #fff);
-}
-.pixel-share-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
-.pixel-share-btn {
-	width: 36px;
-	height: 36px;
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: rgba(255, 255, 255, 0.06);
-	border: 1px solid #272930;
-	color: var(--title-fg, #fff);
-	font-size: 0.9rem;
-	font-weight: 700;
-	cursor: pointer;
-	text-decoration: none;
-	transition: border-color 0.15s;
-	&:hover { border-color: var(--chip-text, #D297FF); }
-}
-.pixel-share-copied {
-	color: var(--chip-text, #D297FF);
-	font-size: 0.78rem;
-	margin: 0 0 10px;
-}
-.pixel-share-action {
-	display: block;
-	width: 100%;
-	text-align: center;
-	background: none;
-	border: 1px solid var(--chip-text, #D297FF);
-	color: var(--chip-text, #D297FF);
-	font-weight: 600;
-	font-size: 0.85rem;
-	padding: 10px 14px;
-	margin-top: 8px;
-	cursor: pointer;
-	text-decoration: none;
-	transition: background 0.15s, color 0.15s, opacity 0.15s;
-	&:hover:not(:disabled) { background: var(--chip-text, #D297FF); color: #13161C; }
-	&:disabled { opacity: 0.5; cursor: not-allowed; }
-}
-.pixel-share-error {
-	color: #ff6b6b;
-	font-size: 0.78rem;
-	margin: 8px 0 0;
-}
-.pixel-reveal-result { margin-top: 16px; }
-.pixel-reveal-title {
-	margin: 0 0 8px;
-	font-size: 0.82rem;
-	font-weight: 600;
-	color: var(--title-fg, #fff);
-}
-.pixel-reveal-media {
-	width: 100%;
-	display: block;
-	background: #0d0f13;
-	border: 1px solid #272930;
-}
-</style>

package/pages/wall/[slug]/pixel/[pixelId].vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-const localePath = useLocalePath()
-const slug = route.params.slug as string
-const pixelId = route.params.pixelId as string
-const qs = Object.keys(route.query).length
-	? '?' + new URLSearchParams(route.query as Record<string, string>).toString()
-	: ''
-navigateTo(localePath(`/mural/${slug}/pixel/${pixelId}`) + qs, { replace: true })
-</script>
-
-<template><div /></template>