@mundogamernetwork/shared-ui 1.11.3 → 1.12.1

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

@@ -7,6 +7,8 @@ interface Video {
 	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 {
@@ -23,6 +25,12 @@ const selectedVideoId = ref<number | 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=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/);
@@ -48,6 +56,16 @@ function formatType(type?: string) {
 
 		<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)"
@@ -62,12 +80,19 @@ function formatType(type?: string) {
 				v-for="video in videos"
 				:key="video.id"
 				:class="['video-item', { active: activeVideo?.id === video.id }]"
-				@click="selectedVideoId = video.id"
+				@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>
@@ -101,6 +126,40 @@ function formatType(type?: string) {
 			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 {
@@ -136,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;
@@ -145,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/locales/de.json

@@ -58,16 +58,16 @@
         "edit": "Bearbeiten",
         "delete": "Löschen"
       },
-      "title": "Key Campaigns",
-      "my_requests": "My Requests",
+      "title": "Key-Kampagnen",
+      "my_requests": "Meine Anfragen",
       "calendar_export_label": "Diese Fristen in deinen Kalender übernehmen:",
       "calendar_export_ics": "Kalender (.ics)",
       "calendar_export_csv": "Tabelle (.csv)",
       "calendar_export_busy": "Wird vorbereitet...",
       "calendar_export_error": "Die Datei konnte nicht erstellt werden. Bitte versuche es erneut.",
-      "all": "All",
+      "all": "Alle",
       "details": "Details",
-      "see_campaign": "See campaign",
+      "see_campaign": "Kampagne ansehen",
       "see_content": "See content",
       "redeem": "Request",
       "load_more": "Load more",

package/locales/pt-BR.json

@@ -58,16 +58,16 @@
         "edit": "Editar",
         "delete": "Excluir"
       },
-      "title": "Key Campaigns",
-      "my_requests": "My Requests",
+      "title": "Campanhas de Chaves",
+      "my_requests": "Minhas Solicitações",
       "calendar_export_label": "Leve estes prazos para o seu calendário:",
       "calendar_export_ics": "Calendário (.ics)",
       "calendar_export_csv": "Planilha (.csv)",
       "calendar_export_busy": "Preparando...",
       "calendar_export_error": "Não foi possível gerar o arquivo. Tente novamente.",
-      "all": "All",
-      "details": "Details",
-      "see_campaign": "See campaign",
+      "all": "Todas",
+      "details": "Detalhes",
+      "see_campaign": "Ver Campanha",
       "see_content": "See content",
       "redeem": "Request",
       "load_more": "Load more",

package/locales/ro.json

@@ -58,16 +58,16 @@
         "edit": "Editează",
         "delete": "Șterge"
       },
-      "title": "Key Campaigns",
-      "my_requests": "My Requests",
+      "title": "Campanii de Chei",
+      "my_requests": "Solicitările Mele",
       "calendar_export_label": "Adaugă aceste termene în calendarul tău:",
       "calendar_export_ics": "Calendar (.ics)",
       "calendar_export_csv": "Foaie de calcul (.csv)",
       "calendar_export_busy": "Se pregătește...",
       "calendar_export_error": "Fișierul nu a putut fi generat. Încearcă din nou.",
-      "all": "All",
-      "details": "Details",
-      "see_campaign": "See campaign",
+      "all": "Toate",
+      "details": "Detalii",
+      "see_campaign": "Vezi Campania",
       "see_content": "See content",
       "redeem": "Request",
       "load_more": "Load more",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.11.3",
+  "version": "1.12.1",
   "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/plugins/echo.client.ts

@@ -36,6 +36,11 @@ export default defineNuxtPlugin({
 		headers.Authorization = `Bearer ${import.meta.env.VITE_BEARER_TOKEN}`;
 	}
 
+	// Per-channel count of consecutive unauthorized auth attempts, so a channel
+	// whose session is gone stops being re-authorized on every reconnect.
+	const authFailures = new Map<string, number>();
+	const MAX_AUTH_FAILURES = 3;
+
 	window.Pusher = Pusher;
 	window.Echo = new Echo({
 		broadcaster: "pusher",
@@ -66,10 +71,51 @@ export default defineNuxtPlugin({
 							},
 						)
 						.then((response) => {
+							authFailures.delete(channel.name);
 							callback(false, response.data);
 						})
 						.catch((error) => {
+							const status = error?.response?.status;
 							callback(true, error);
+
+							// 401/403 means the session is gone, not that the
+							// request glitched. pusher-js keeps a failed channel
+							// in its subscription list and re-subscribes every
+							// channel on each reconnect, so the channel asks
+							// broadcasting/auth again on every cycle — forever,
+							// from a tab nobody is even looking at.
+							//
+							// Not dropped on the first failure: a token being
+							// refreshed can produce one transient 401, and giving
+							// up there would silently kill a channel that was
+							// about to work. After MAX_AUTH_FAILURES the session
+							// is genuinely gone, so the channel is released and
+							// the reconnect loop has nothing left to retry.
+							if (status !== 401 && status !== 403) {
+								return;
+							}
+
+							const failures = (authFailures.get(channel.name) ?? 0) + 1;
+							authFailures.set(channel.name, failures);
+
+							if (failures < MAX_AUTH_FAILURES) {
+								return;
+							}
+
+							authFailures.delete(channel.name);
+							console.warn(
+								`[WebSocket] Dropping ${channel.name} after ${failures} unauthorized auth attempts.`,
+							);
+
+							// Deferred: unsubscribing re-enters pusher-js, and we
+							// are still inside its authorize() callback here.
+							setTimeout(() => {
+								try {
+									window.Echo.leaveChannel(channel.name);
+								} catch (e) {
+									console.error("[WebSocket] Failed to leave channel:", e);
+								}
+							}, 0);
 						});
 				},
 			};

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')