@mundogamernetwork/shared-ui 1.0.0

package/pages/media-kit/[slug].vue

@@ -0,0 +1,625 @@
+<script setup lang="ts">
+import { fetchPublicMediaKit, trackMediaKitEvent } from '../../services/mediaKitService';
+import { fetchStreamerActiveWalls } from '../../services/indieWallService';
+
+const route = useRoute();
+const slug = computed(() => route.params.slug as string);
+
+const kit = ref<Record<string, any> | null>(null);
+const loading = ref(true);
+const error = ref(false);
+const walls = ref<any[]>([]);
+
+const userId = computed(() => kit.value?.user_id);
+const streamer = computed(() => kit.value?.streamer ?? {});
+const stats = computed(() => kit.value?.stats ?? {});
+const topGames = computed(() => kit.value?.top_games ?? []);
+const period = computed(() => kit.value?.period ?? {});
+const mediaKitWall = computed(() => {
+	return walls.value.find((w: any) => w.show_on_media_kit) ?? null;
+});
+
+onMounted(async () => {
+	try {
+		const { data } = await fetchPublicMediaKit(slug.value);
+		kit.value = data?.data || data;
+
+		if (kit.value?.user_id) {
+			trackMediaKitEvent(kit.value.user_id, {
+				type: 'view',
+				referrer: document.referrer || undefined,
+			}).catch(() => {});
+		}
+	} catch {
+		error.value = true;
+	} finally {
+		loading.value = false;
+	}
+});
+
+watch(userId, async (id) => {
+	if (!id) return;
+	try {
+		const res = await fetchStreamerActiveWalls(id);
+		walls.value = res.data?.data ?? res.data ?? [];
+	} catch {
+		walls.value = [];
+	}
+}, { immediate: true });
+
+function formatNumber(num: number) {
+	if (!num) return '0';
+	if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+	if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+	return num.toLocaleString();
+}
+
+function handleContact() {
+	if (userId.value) {
+		trackMediaKitEvent(userId.value, { type: 'contact' });
+	}
+}
+
+function handleDownload() {
+	if (userId.value) {
+		trackMediaKitEvent(userId.value, { type: 'download' });
+	}
+	if (import.meta.client) window.print();
+}
+</script>
+
+<template>
+	<div id="public-media-kit">
+		<div class="mk-inner">
+			<div v-if="loading" class="loading-state">
+				<i class="fa-solid fa-spinner fa-spin" />
+			</div>
+
+			<div v-else-if="error" class="error-state">
+				<i class="fa-solid fa-circle-exclamation" />
+				<p>{{ $t("tv.media_kit.not_available") }}</p>
+			</div>
+
+			<template v-else-if="kit">
+				<!-- Header -->
+				<header class="mk-header">
+					<div class="mk-header-content">
+						<img
+							v-if="streamer.avatar"
+							:src="streamer.avatar"
+							width="80"
+							height="80"
+							class="mk-avatar"
+						/>
+						<div class="mk-header-info">
+							<h1 class="mk-name">{{ streamer.name }}</h1>
+							<div class="mk-meta">
+								<span v-if="streamer.platform" class="mk-platform">
+									<i :class="streamer.platform === 'twitch' ? 'fa-brands fa-twitch' : 'fa-brands fa-youtube'" />
+									{{ streamer.platform }}
+								</span>
+								<span v-if="streamer.tier && streamer.tier !== 'free'" class="mk-tier">
+									{{ streamer.tier.toUpperCase() }}
+								</span>
+							</div>
+							<p v-if="streamer.bio" class="mk-bio">{{ streamer.bio }}</p>
+						</div>
+					</div>
+					<div class="mk-header-actions no-print">
+						<button class="btn-mk-download" @click="handleDownload">
+							<i class="fa-solid fa-download" />
+							{{ $t("tv.media_kit.download_pdf") }}
+						</button>
+						<button v-if="streamer.social_links?.website" class="btn-mk-contact" @click="handleContact">
+							<a :href="streamer.social_links.website" target="_blank" rel="noopener noreferrer">
+								<i class="fa-solid fa-envelope" />
+								{{ $t("tv.media_kit.contact") }}
+							</a>
+						</button>
+					</div>
+				</header>
+
+				<!-- Key Metrics -->
+				<section class="mk-section">
+					<h2 class="mk-section-title">{{ $t("tv.media_kit.key_metrics") }}</h2>
+					<p class="mk-period">{{ $t("tv.media_kit.last_days", { days: period.days }) }} ({{ period.start }} — {{ period.end }})</p>
+					<div class="mk-metrics-grid">
+						<div class="mk-metric-card">
+							<span class="mk-metric-value">{{ formatNumber(stats.total_followers) }}</span>
+							<span class="mk-metric-label">{{ $t("tv.media_kit.followers") }}</span>
+						</div>
+						<div class="mk-metric-card">
+							<span class="mk-metric-value">{{ formatNumber(stats.avg_viewers) }}</span>
+							<span class="mk-metric-label">{{ $t("tv.media_kit.avg_viewers") }}</span>
+						</div>
+						<div class="mk-metric-card">
+							<span class="mk-metric-value">{{ formatNumber(stats.peak_viewers) }}</span>
+							<span class="mk-metric-label">{{ $t("tv.media_kit.peak_viewers") }}</span>
+						</div>
+						<div class="mk-metric-card">
+							<span class="mk-metric-value">{{ stats.streams_per_week }}</span>
+							<span class="mk-metric-label">{{ $t("tv.media_kit.streams_week") }}</span>
+						</div>
+						<div class="mk-metric-card">
+							<span class="mk-metric-value">{{ formatNumber(stats.total_streams_90d) }}</span>
+							<span class="mk-metric-label">{{ $t("tv.media_kit.total_streams") }}</span>
+						</div>
+						<div class="mk-metric-card">
+							<span class="mk-metric-value">{{ stats.total_hours_90d }}h</span>
+							<span class="mk-metric-label">{{ $t("tv.media_kit.hours_streamed") }}</span>
+						</div>
+						<div class="mk-metric-card">
+							<span class="mk-metric-value">+{{ formatNumber(stats.new_followers_90d) }}</span>
+							<span class="mk-metric-label">{{ $t("tv.media_kit.new_followers") }}</span>
+						</div>
+						<div class="mk-metric-card">
+							<span class="mk-metric-value">{{ formatNumber(stats.total_chat_messages) }}</span>
+							<span class="mk-metric-label">{{ $t("tv.media_kit.chat_messages") }}</span>
+						</div>
+					</div>
+				</section>
+
+				<!-- Top Games -->
+				<section v-if="topGames.length" class="mk-section">
+					<h2 class="mk-section-title">{{ $t("tv.media_kit.top_games") }}</h2>
+					<div class="mk-games-list">
+						<div v-for="game in topGames" :key="game.game" class="mk-game-item">
+							<span class="mk-game-name">{{ game.game }}</span>
+							<div class="mk-game-stats">
+								<span>{{ game.hours }}h {{ $t("tv.media_kit.played") }}</span>
+								<span>{{ game.avg_viewers }} {{ $t("tv.media_kit.avg_viewers_short") }}</span>
+							</div>
+						</div>
+					</div>
+				</section>
+
+				<!-- Social Links -->
+				<section v-if="streamer.social_links && Object.values(streamer.social_links).some(Boolean)" class="mk-section no-print">
+					<h2 class="mk-section-title">{{ $t("tv.media_kit.connect") }}</h2>
+					<div class="mk-social-links">
+						<a
+							v-for="(url, platform) in streamer.social_links"
+							v-show="url"
+							:key="platform"
+							:href="url"
+							target="_blank"
+							rel="noopener noreferrer"
+							class="mk-social-link"
+							@click="() => userId && trackMediaKitEvent(userId, { type: 'click' })"
+						>
+							<i :class="{
+								'fa-brands fa-x-twitter': platform === 'twitter',
+								'fa-brands fa-instagram': platform === 'instagram',
+								'fa-brands fa-discord': platform === 'discord',
+								'fa-brands fa-tiktok': platform === 'tiktok',
+								'fa-solid fa-globe': platform === 'website',
+							}" />
+							<span>{{ platform }}</span>
+						</a>
+					</div>
+				</section>
+
+				<!-- IndieWall section (shown only if creator has a media-kit wall) -->
+				<section v-if="mediaKitWall" class="mk-section mk-indiewall">
+					<h2 class="mk-section-title">{{ $t("tv.media_kit.indiewall_title") }}</h2>
+					<div class="mk-indiewall-card">
+						<div class="mk-indiewall-info">
+							<h3 class="mk-indiewall-name">{{ mediaKitWall.name }}</h3>
+							<p v-if="mediaKitWall.description" class="mk-indiewall-desc">{{ mediaKitWall.description }}</p>
+							<div class="mk-indiewall-stats">
+								<div class="mk-indiewall-stat">
+									<span class="mk-indiewall-stat-label">{{ $t("tv.media_kit.indiewall_raised") }}</span>
+									<span class="mk-indiewall-stat-value">{{ mediaKitWall.currency }} {{ Number(mediaKitWall.raised_amount || 0).toFixed(2) }}</span>
+								</div>
+								<div class="mk-indiewall-stat">
+									<span class="mk-indiewall-stat-label">{{ $t("tv.media_kit.indiewall_supporters") }}</span>
+									<span class="mk-indiewall-stat-value">{{ mediaKitWall.supporters_count ?? 0 }}</span>
+								</div>
+								<div class="mk-indiewall-stat">
+									<span class="mk-indiewall-stat-label">{{ $t("tv.media_kit.indiewall_pixels") }}</span>
+									<span class="mk-indiewall-stat-value">{{ mediaKitWall.used_pixels ?? 0 }} / {{ mediaKitWall.total_pixels ?? 0 }}</span>
+								</div>
+							</div>
+						</div>
+						<a :href="mediaKitWall.mural_url" target="_blank" rel="noopener" class="mk-indiewall-cta">
+							{{ $t("tv.media_kit.indiewall_cta") }}
+						</a>
+					</div>
+				</section>
+
+				<!-- Footer -->
+				<footer class="mk-footer">
+					<p>{{ $t("tv.media_kit.powered_by") }} <strong>Mundo Gamer TV</strong></p>
+					<p class="mk-generated">{{ $t("tv.media_kit.generated") }} {{ kit.generated_at?.slice(0, 10) }}</p>
+				</footer>
+			</template>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+#public-media-kit {
+	min-height: 100vh;
+	background: #0a0a0a;
+	color: #fff;
+	font-family: "Roboto", sans-serif;
+
+	.mk-inner {
+		max-width: 800px;
+		margin: 0 auto;
+		padding: 40px 24px;
+	}
+
+	.loading-state,
+	.error-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 60vh;
+		gap: 16px;
+		color: #878a99;
+		font-size: 16px;
+
+		i {
+			font-size: 32px;
+			color: #d297ff;
+		}
+	}
+
+	.mk-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 24px;
+		margin-bottom: 48px;
+		padding-bottom: 32px;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+		.mk-header-content {
+			display: flex;
+			gap: 20px;
+			align-items: flex-start;
+		}
+
+		.mk-avatar {
+			border: 2px solid #6b15ac;
+			flex-shrink: 0;
+		}
+
+		.mk-header-info {
+			display: flex;
+			flex-direction: column;
+			gap: 6px;
+		}
+
+		.mk-name {
+			font: 700 28px/36px "Roboto", sans-serif;
+			color: #fff;
+		}
+
+		.mk-meta {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.mk-platform {
+			color: #878a99;
+			font-size: 14px;
+			text-transform: capitalize;
+
+			i {
+				margin-right: 4px;
+			}
+		}
+
+		.mk-tier {
+			background: rgba(107, 21, 172, 0.2);
+			color: #a855f7;
+			font-size: 10px;
+			font-weight: 700;
+			padding: 2px 8px;
+			letter-spacing: 0.05em;
+		}
+
+		.mk-bio {
+			color: #aaa;
+			font: 400 14px/20px "Roboto", sans-serif;
+			margin-top: 8px;
+			max-width: 480px;
+		}
+
+		.mk-header-actions {
+			display: flex;
+			gap: 8px;
+			flex-shrink: 0;
+		}
+
+		.btn-mk-download,
+		.btn-mk-contact {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			padding: 8px 16px;
+			font: 400 13px/20px "Roboto", sans-serif;
+			cursor: pointer;
+			transition: all 0.15s ease-in-out;
+		}
+
+		.btn-mk-download {
+			background: transparent;
+			border: 1px solid #6b15ac;
+			color: #d297ff;
+
+			&:hover {
+				background: rgba(107, 21, 172, 0.15);
+			}
+		}
+
+		.btn-mk-contact {
+			background: #6b15ac;
+			border: 1px solid #6b15ac;
+			color: #fff;
+
+			a {
+				color: inherit;
+				text-decoration: none;
+				display: flex;
+				align-items: center;
+				gap: 6px;
+			}
+
+			&:hover {
+				background: #460279;
+			}
+		}
+	}
+
+	.mk-section {
+		margin-bottom: 40px;
+
+		.mk-section-title {
+			font: 600 20px/28px "Roboto", sans-serif;
+			color: #fff;
+			margin-bottom: 8px;
+		}
+
+		.mk-period {
+			color: #878a99;
+			font: 400 13px/18px "Roboto", sans-serif;
+			margin-bottom: 20px;
+		}
+	}
+
+	.mk-metrics-grid {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		gap: 12px;
+
+		.mk-metric-card {
+			background: rgba(255, 255, 255, 0.04);
+			border: 1px solid rgba(255, 255, 255, 0.08);
+			padding: 20px 16px;
+			text-align: center;
+
+			.mk-metric-value {
+				display: block;
+				font: 700 24px/32px "Roboto", sans-serif;
+				color: #d297ff;
+				margin-bottom: 4px;
+			}
+
+			.mk-metric-label {
+				display: block;
+				font: 400 12px/16px "Roboto", sans-serif;
+				color: #878a99;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
+			}
+		}
+	}
+
+	.mk-games-list {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		.mk-game-item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 12px 16px;
+			background: rgba(255, 255, 255, 0.04);
+			border: 1px solid rgba(255, 255, 255, 0.08);
+
+			.mk-game-name {
+				font: 500 14px/20px "Roboto", sans-serif;
+				color: #fff;
+			}
+
+			.mk-game-stats {
+				display: flex;
+				gap: 20px;
+				color: #878a99;
+				font: 400 13px/18px "Roboto", sans-serif;
+			}
+		}
+	}
+
+	.mk-social-links {
+		display: flex;
+		gap: 12px;
+		flex-wrap: wrap;
+
+		.mk-social-link {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			padding: 8px 16px;
+			background: rgba(255, 255, 255, 0.04);
+			border: 1px solid rgba(255, 255, 255, 0.08);
+			color: #d297ff;
+			text-decoration: none;
+			font: 400 13px/18px "Roboto", sans-serif;
+			text-transform: capitalize;
+			transition: all 0.15s ease-in-out;
+
+			&:hover {
+				background: rgba(107, 21, 172, 0.15);
+			}
+		}
+	}
+
+	.mk-indiewall {
+		.mk-indiewall-card {
+			background: rgba(107, 21, 172, 0.08);
+			border: 1px solid rgba(107, 21, 172, 0.3);
+			padding: 24px;
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			justify-content: space-between;
+			gap: 20px;
+		}
+
+		.mk-indiewall-name {
+			font: 700 18px/24px "Roboto", sans-serif;
+			color: #fff;
+			margin: 0 0 6px;
+		}
+
+		.mk-indiewall-desc {
+			font: 400 13px/20px "Roboto", sans-serif;
+			color: #aaa;
+			margin: 0 0 16px;
+		}
+
+		.mk-indiewall-stats {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 20px;
+		}
+
+		.mk-indiewall-stat {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+		}
+
+		.mk-indiewall-stat-label {
+			font: 400 10px/14px "Roboto", sans-serif;
+			color: #888;
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+		}
+
+		.mk-indiewall-stat-value {
+			font: 700 15px/20px "Roboto", sans-serif;
+			color: #d297ff;
+		}
+
+		.mk-indiewall-cta {
+			display: inline-block;
+			background: #6b15ac;
+			color: #fff;
+			padding: 10px 20px;
+			font: 600 13px/18px "Roboto", sans-serif;
+			text-decoration: none;
+			white-space: nowrap;
+
+			&:hover {
+				background: #7d1bc8;
+			}
+		}
+	}
+
+	.mk-footer {
+		margin-top: 60px;
+		padding-top: 24px;
+		border-top: 1px solid rgba(255, 255, 255, 0.1);
+		text-align: center;
+		color: #878a99;
+		font: 400 13px/18px "Roboto", sans-serif;
+
+		strong {
+			color: #d297ff;
+		}
+
+		.mk-generated {
+			margin-top: 4px;
+			font-size: 11px;
+		}
+	}
+
+	@media screen and (max-width: 767px) {
+		.mk-inner {
+			padding: 24px 16px;
+		}
+
+		.mk-header {
+			flex-direction: column;
+
+			.mk-header-content {
+				flex-direction: column;
+				align-items: center;
+				text-align: center;
+			}
+
+			.mk-header-info {
+				align-items: center;
+			}
+
+			.mk-meta {
+				justify-content: center;
+			}
+
+			.mk-header-actions {
+				width: 100%;
+				justify-content: center;
+			}
+		}
+
+		.mk-metrics-grid {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		.mk-games-list .mk-game-item {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 4px;
+		}
+	}
+
+	@media print {
+		background: #fff;
+		color: #000;
+
+		.no-print {
+			display: none !important;
+		}
+
+		.mk-name {
+			color: #000;
+		}
+
+		.mk-metric-value {
+			color: #6b15ac !important;
+		}
+
+		.mk-metric-card,
+		.mk-game-item {
+			border-color: #ddd !important;
+			background: #f9f9f9 !important;
+		}
+
+		.mk-section-title {
+			color: #000;
+		}
+
+		.mk-footer strong {
+			color: #6b15ac;
+		}
+	}
+}
+</style>