@mundogamernetwork/shared-ui 1.11.2 → 1.12.0

package/assets/kit/kit-base.css

@@ -440,6 +440,66 @@ body:has(.kit-press) {
 }
 .kit-logo-tile .ic { color: var(--kit-accent, #FDB215); }
 
+/* Downloads: press releases, fact sheets, asset bundles. Its own section
+   because these used to sit inside "Logos & icons", where a journalist
+   hunting for the press release would never look. One row per file so the
+   same release in several languages reads as a list of choices. */
+.kit-docs {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+.kit-doc {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 12px 16px;
+	background: var(--kit-surface, #14171d);
+	border: 1px solid var(--kit-line, #252a34);
+	color: var(--kit-text, #f4f6fa);
+	text-decoration: none;
+	transition: border-color 0.15s;
+}
+.kit-doc:hover { border-color: var(--kit-accent, #FDB215); }
+.kit-doc__ic {
+	color: var(--kit-accent, #FDB215);
+	font-size: 0.85rem;
+	flex-shrink: 0;
+}
+.kit-doc__body {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+	flex: 1;
+}
+.kit-doc__title {
+	font-size: 0.9rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.kit-doc__meta {
+	font-size: 0.72rem;
+	color: var(--kit-muted, #8b92a0);
+}
+.kit-doc__lang {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	flex-shrink: 0;
+	padding: 3px 9px;
+	border: 1px solid var(--kit-line, #252a34);
+	color: var(--kit-muted, #8b92a0);
+	font-size: 0.72rem;
+}
+.kit-doc__lang img {
+	width: 16px;
+	height: 12px;
+	object-fit: cover;
+	display: block;
+}
+
 /* Articles */
 .kit-articles {
 	display: grid;

package/components/PressKit/VideoPlayer.vue

@@ -4,8 +4,11 @@ interface Video {
 	title: string;
 	url: string;
 	type?: string;
+	thumbnail_url?: string;
 	is_primary?: boolean;
 	sort_order?: number;
+	/** Spoken/subtitled language, for studios shipping a dubbed cut per market. */
+	language?: { name?: string; native_name?: string; name_abrev?: string; flag_url?: string } | null;
 }
 
 interface Props {
@@ -14,21 +17,33 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const activeVideo = ref<Video | null>(null);
-
-onMounted(() => {
-	const primary = props.videos.find(v => v.is_primary);
-	activeVideo.value = primary || props.videos[0] || null;
-});
+// Initialize synchronously so direct public-page loads also have a player
+// during SSR, instead of waiting for client hydration.
+const selectedVideoId = ref<number | null>(
+	(props.videos.find(v => v.is_primary) || props.videos[0])?.id ?? null,
+);
+const activeVideo = computed(() =>
+	props.videos.find(v => v.id === selectedVideoId.value) || props.videos[0] || null,
+);
+const playing = ref(false);
+
+function selectVideo(id: number) {
+	selectedVideoId.value = id;
+	playing.value = false;
+}
 
 function getEmbedUrl(url: string) {
-	const ytMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
+	const ytMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/);
 	if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`;
 	const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
 	if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
 	return url;
 }
 
+function isDirectVideo(url: string) {
+	return /\.(mp4|webm|ogg)(?:[?#].*)?$/i.test(url);
+}
+
 function formatType(type?: string) {
 	if (!type) return '';
 	return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
@@ -40,7 +55,19 @@ function formatType(type?: string) {
 		<h3 class="section-title">{{ $t('press_kit.videos') }}</h3>
 
 		<div v-if="activeVideo" class="video-embed">
+			<video v-if="isDirectVideo(activeVideo.url)" :src="activeVideo.url" :poster="activeVideo.thumbnail_url || undefined" controls preload="metadata" />
+			<button
+				v-else-if="activeVideo.thumbnail_url && !playing"
+				type="button"
+				class="video-poster"
+				:aria-label="activeVideo.title"
+				@click="playing = true"
+			>
+				<img :src="activeVideo.thumbnail_url" :alt="activeVideo.title" />
+				<span class="video-poster__play">▶</span>
+			</button>
 			<iframe
+				v-else
 				:src="getEmbedUrl(activeVideo.url)"
 				frameborder="0"
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -53,12 +80,19 @@ function formatType(type?: string) {
 				v-for="video in videos"
 				:key="video.id"
 				:class="['video-item', { active: activeVideo?.id === video.id }]"
-				@click="activeVideo = video"
+				@click="selectVideo(video.id)"
 			>
-				<MGIcon icon="videos" />
+				<img v-if="video.thumbnail_url" :src="video.thumbnail_url" :alt="video.title" class="video-item__thumb" />
+				<MGIcon v-else icon="videos" />
 				<div class="video-meta">
 					<span class="video-title">{{ video.title }}</span>
-					<span v-if="video.type" class="video-type">{{ formatType(video.type) }}</span>
+					<span class="video-sub">
+						<span v-if="video.type" class="video-type">{{ formatType(video.type) }}</span>
+						<span v-if="video.language" class="video-lang">
+							<img v-if="video.language.flag_url" :src="video.language.flag_url" :alt="video.language.name || ''" loading="lazy" />
+							{{ video.language.native_name || video.language.name }}
+						</span>
+					</span>
 				</div>
 			</div>
 		</div>
@@ -86,6 +120,46 @@ function formatType(type?: string) {
 			width: 100%;
 			height: 100%;
 		}
+
+		video {
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+		}
+
+		.video-poster {
+			position: absolute;
+			inset: 0;
+			width: 100%;
+			height: 100%;
+			padding: 0;
+			border: 0;
+			background: #000;
+			cursor: pointer;
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				display: block;
+			}
+		}
+
+		.video-poster__play {
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			width: 64px;
+			height: 64px;
+			display: grid;
+			place-items: center;
+			padding-left: 4px;
+			background: rgba(253, 178, 21, 0.95);
+			color: #101217;
+			font-size: 24px;
+			box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
+		}
 	}
 
 	.video-list {
@@ -121,6 +195,14 @@ function formatType(type?: string) {
 		flex-direction: column;
 	}
 
+	.video-item__thumb {
+		width: 72px;
+		height: 42px;
+		object-fit: cover;
+		flex-shrink: 0;
+		border: 1px solid #343842;
+	}
+
 	.video-title {
 		font-size: 0.9rem;
 		font-weight: 500;
@@ -130,5 +212,27 @@ function formatType(type?: string) {
 		font-size: 0.75rem;
 		color: #888;
 	}
+
+	.video-sub {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-wrap: wrap;
+	}
+
+	.video-lang {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		font-size: 0.75rem;
+		color: #888;
+
+		img {
+			width: 15px;
+			height: 11px;
+			object-fit: cover;
+			display: block;
+		}
+	}
 }
 </style>

package/components/keys/KeyBrowser.vue

@@ -5,7 +5,7 @@ import {
   fetchPlatforms,
   requestKey as apiRequestKey,
   revealKey as apiRevealKey,
-  type KeyPool,
+  type KeyCampaign,
   type KeyRequest,
   type RevealResult,
 } from '../../services/keyService'
@@ -30,7 +30,7 @@ const emit = defineEmits<{
 
 // ─── State ────────────────────────────────────────────────────────────────────
 
-const pools = ref<KeyPool[]>([])
+const pools = ref<KeyCampaign[]>([])
 const myRequests = ref<KeyRequest[]>([])
 const platforms = ref<{ id: number; name: string }[]>([])
 const loadingPools = ref(true)
@@ -116,7 +116,7 @@ function redirectToLogin() {
 
 // ─── Request ──────────────────────────────────────────────────────────────────
 
-async function doRequestKey(pool: KeyPool) {
+async function doRequestKey(pool: KeyCampaign) {
   requesting.value = pool.id
   delete requestErrors.value[pool.id]
   try {
@@ -156,7 +156,7 @@ async function doRequestKey(pool: KeyPool) {
   }
 }
 
-function handleRequestKey(pool: KeyPool) {
+function handleRequestKey(pool: KeyCampaign) {
   if (!isAuthenticated.value) {
     redirectToLogin()
     return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/presskit/game/[slug].vue

@@ -104,7 +104,26 @@ const showcases = computed(() => list(kit.value?.showcases));
 const hasEcosystem = computed(() => showcases.value.length || kit.value?.ventures_url || kit.value?.magazine_feature || kit.value?.community_url);
 
 const screenshots = computed(() => assets.value.filter((a: any) => ['screenshot', 'artwork', 'gif'].includes(a.type)));
-const brandAssets = computed(() => assets.value.filter((a: any) => ['logo', 'document'].includes(a.type)));
+// Documents used to be lumped in with logos under "Logos & icons", which is
+// where a journalist looking for the press release would never think to look.
+const brandAssets = computed(() => assets.value.filter((a: any) => a.type === 'logo'));
+// Grouped by language so the same release in several languages reads as one
+// row of choices rather than a pile of near-identical filenames.
+const documents = computed(() => [...assets.value.filter((a: any) => a.type === 'document')]
+	.sort((a: any, b: any) => (a.language?.name_abrev || '').localeCompare(b.language?.name_abrev || '')));
+
+const fileExtension = (a: any) => {
+	const match = String(a?.url || '').split('?')[0].match(/\.([a-z0-9]{1,5})$/i);
+	return match ? match[1].toUpperCase() : '';
+};
+
+const fileSize = (bytes?: number) => {
+	if (!bytes) return '';
+	if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+	return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+};
+
+const documentMeta = (a: any) => [fileExtension(a), fileSize(a.file_size)].filter(Boolean).join(' · ');
 
 // Animated assets get the full gallery row at their natural height — cropping a
 // gameplay loop into the 16/9 thumbnail grid makes it unreadable. The type is
@@ -135,12 +154,23 @@ const allowDownload = computed(() => kit.value?.allow_asset_download !== false);
 const hasDownloadableAssets = computed(() => assets.value.length > 0);
 const canDownload = computed(() => allowDownload.value && hasDownloadableAssets.value);
 const zipDownloadUrl = computed(() => `${apiBase}/public/press-kits/${slug}/download${previewToken ? `?preview_token=${previewToken}` : ''}`);
-const interviewMailto = computed(() => {
+/**
+ * The interview button used to be a hardcoded mailto: that showed up whenever
+ * the kit had a press e-mail — studios could neither hide it nor point it at
+ * the scheduler they already run. `interview_mode` is now the source of truth;
+ * kits that predate the field default to 'email' server-side, so nothing about
+ * an existing published kit changes.
+ */
+const interviewMode = computed(() => kit.value?.interview_mode || 'email');
+const interviewHref = computed(() => {
+	if (interviewMode.value === 'off') return '';
+	if (interviewMode.value === 'external') return kit.value?.interview_url || '';
 	const email = kit.value?.press_contact_email;
 	if (!email) return '';
 	const subject = `${t('kit.press.request_interview')} — ${kit.value?.name || ''}`;
 	return `mailto:${email}?subject=${encodeURIComponent(subject)}`;
 });
+const interviewIsExternal = computed(() => interviewMode.value === 'external' && !!interviewHref.value);
 
 const keyPoolsVisible = ref(false);
 function onPoolsReady(count: number) {
@@ -261,6 +291,7 @@ const navSections = computed(() => {
 	s.push({ id: 'factsheet', label: 'kit.press.fact_sheet' });
 	if (steamAppId.value) s.push({ id: 'steam', label: 'kit.press.steam_widget' });
 	if (screenshots.value.length || brandAssets.value.length) s.push({ id: 'media', label: 'kit.press.screenshots' });
+	if (documents.value.length) s.push({ id: 'downloads', label: 'kit.press.downloads' });
 	if (videos.value.length) s.push({ id: 'trailers', label: 'kit.press.videos' });
 	if (articles.value.length) s.push({ id: 'articles', label: 'kit.press.articles' });
 	if (coverage.value.length) s.push({ id: 'creators', label: 'kit.press.coverage' });
@@ -403,7 +434,14 @@ useHead(() => ({
 							     offered when the kit is actually linked to a game with open pools, same
 							     gate as the section itself, so this never links to an empty/broken state. -->
 							<a v-if="kit.game_id" class="kit-btn kit-btn-ghost" href="#review-key" @click.prevent="scrollToSection('review-key')">{{ $t('kit.press.request_review_key') }}</a>
-							<a v-if="interviewMailto" class="kit-btn kit-btn-ghost" :href="interviewMailto" @click="track('contact')">{{ $t('kit.press.request_interview') }}</a>
+							<a
+								v-if="interviewHref"
+								class="kit-btn kit-btn-ghost"
+								:href="interviewHref"
+								:target="interviewIsExternal ? '_blank' : undefined"
+								:rel="interviewIsExternal ? 'noopener' : undefined"
+								@click="track('contact')"
+							>{{ $t('kit.press.request_interview') }}</a>
 						</div>
 					</div>
 				</div>
@@ -515,6 +553,32 @@ useHead(() => ({
 							</div>
 						</section>
 
+						<!-- Documentos: press release, fact sheet, bundles -->
+						<section v-if="documents.length" id="downloads" class="kit-block">
+							<div class="kit-shead"><h2>{{ $t('kit.press.downloads') }}</h2></div>
+							<div class="kit-docs">
+								<a
+									v-for="(d, i) in documents"
+									:key="i"
+									class="kit-doc"
+									:href="d.url"
+									target="_blank"
+									rel="noopener"
+									@click="track('download')"
+								>
+									<span class="kit-doc__ic">▼</span>
+									<span class="kit-doc__body">
+										<span class="kit-doc__title">{{ d.title || fileExtension(d) }}</span>
+										<span v-if="documentMeta(d)" class="kit-doc__meta">{{ documentMeta(d) }}</span>
+									</span>
+									<span v-if="d.language" class="kit-doc__lang">
+										<img v-if="d.language.flag_url" :src="d.language.flag_url" :alt="d.language.name || ''" loading="lazy" />
+										{{ d.language.native_name || d.language.name }}
+									</span>
+								</a>
+							</div>
+						</section>
+
 						<!-- Conteúdos & Artigos -->
 						<section v-if="articles.length" id="articles" class="kit-block">
 							<div class="kit-shead"><h2>{{ $t('kit.press.articles') }}</h2></div>

package/services/keyService.ts

@@ -1,6 +1,6 @@
 import httpService from './httpService'
 
-export type KeyPool = {
+export type KeyCampaign = {
   id: number
   name: string
   slug: string
@@ -29,17 +29,26 @@ export type RevealResult = {
   revealed_at: string
 }
 
+// Every route below is registered by agency-api inside its `public` group
+// (routes/api.php: `['prefix' => 'public']`), so the real paths are
+// /api/v1/public/... — httpService's baseURL only supplies /api/v1. These
+// calls omitted the `public` segment and had been 404ing: KeyBrowser rendered
+// an empty "no campaigns available" state instead of the real list, on the
+// press room, the media-partner dashboard and the public press kit.
+// Confirmed against `php artisan route:list`; agency-frontend is the only
+// consumer of this service, and it points at agency-api.
+
 export const fetchAvailablePools = (params: Record<string, any> = {}) =>
-  httpService.get<{ data: KeyPool[] }>('/key-pools/available', { params })
+  httpService.get<{ data: KeyCampaign[] }>('/public/key-campaigns/available', { params })
 
 export const fetchMyRequests = () =>
-  httpService.get<{ data: KeyRequest[] }>('/key-requests/mine')
+  httpService.get<{ data: KeyRequest[] }>('/public/key-requests/mine')
 
 export const requestKey = (poolId: number, body: Record<string, any>) =>
-  httpService.post(`/key-pools/${poolId}/request`, body)
+  httpService.post(`/public/key-campaigns/${poolId}/request`, body)
 
 export const revealKey = (requestId: number, body: Record<string, any> = {}) =>
-  httpService.post<{ data: RevealResult }>(`/key-requests/${requestId}/reveal`, body)
+  httpService.post<{ data: RevealResult }>(`/public/key-requests/${requestId}/reveal`, body)
 
 export const fetchPlatforms = () =>
-  httpService.get<{ data: { id: number; name: string }[] }>('/showcase-studio-dashboard/platforms')
+  httpService.get<{ data: { id: number; name: string }[] }>('/public/showcase-studio-dashboard/platforms')