@mundogamernetwork/shared-ui 1.13.5 → 1.13.6

package/assets/kit/kit-base.css

@@ -40,6 +40,12 @@ body:has(.kit-press) {
 	padding-top: 15vh;
 	width: 100%;
 }
+.kit-state--locked {
+	min-height: 100vh;
+	justify-content: flex-start;
+	padding-top: 20vh;
+	width: 100%;
+}
 .kit-state__desc {
 	max-width: 420px;
 	text-align: center;
@@ -1092,6 +1098,27 @@ body:has(.kit-press) {
 .kit-keys-form .kit-btn {
 	align-self: flex-start;
 }
+.kit-unlock-form {
+	max-width: 320px;
+	width: 100%;
+	align-items: stretch;
+}
+.kit-unlock-form input {
+	background: var(--kit-card, #1a1e27);
+	border: 1px solid var(--kit-line, #252a34);
+	color: var(--kit-text, #f4f6fa);
+	padding: 10px 12px;
+	font-size: 0.9rem;
+	font-family: inherit;
+	width: 100%;
+}
+.kit-unlock-form input:focus {
+	outline: none;
+	border-color: var(--kit-accent, #FDB215);
+}
+.kit-unlock-form .kit-btn {
+	align-self: center;
+}
 
 /* ── Responsive ─────────────────────────────────────────────────────*/
 @media (max-width: 900px) {

package/components/PressKit/VideoPlayer.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import Hls from 'hls.js';
+
 interface Video {
 	id: number;
 	title: string;
@@ -9,6 +11,11 @@ interface Video {
 	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;
+	/** null = a pasted link (YouTube/Vimeo/external), always playable. Set =
+	 * hosted by us (Cloudflare Stream); only status 'ready' has a real url. */
+	provider?: string | null;
+	status?: string | null;
+	duration_seconds?: number | null;
 }
 
 interface Props {
@@ -17,13 +24,19 @@ interface Props {
 
 const props = defineProps<Props>();
 
+// A provider-hosted video that's still uploading/processing/failed has no
+// real playback URL yet — filtering it out here is simpler and safer than
+// rendering a broken player for it. It reappears on its own once a later
+// page load picks up the 'ready' status from the webhook.
+const playableVideos = computed(() => props.videos.filter(v => !v.provider || v.status === 'ready'));
+
 // 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,
+	(playableVideos.value.find(v => v.is_primary) || playableVideos.value[0])?.id ?? null,
 );
 const activeVideo = computed(() =>
-	props.videos.find(v => v.id === selectedVideoId.value) || props.videos[0] || null,
+	playableVideos.value.find(v => v.id === selectedVideoId.value) || playableVideos.value[0] || null,
 );
 const playing = ref(false);
 
@@ -44,18 +57,63 @@ function isDirectVideo(url: string) {
 	return /\.(mp4|webm|ogg)(?:[?#].*)?$/i.test(url);
 }
 
+// Cloudflare Stream's playback URL is an HLS manifest (.m3u8) — Safari plays
+// it natively via the plain <video> tag, every other browser needs hls.js
+// (MediaSource Extensions). Same split as Playtest's RecordedSessionPlayer.
+function isHlsVideo(video: Video) {
+	return video.provider === 'cloudflare_stream' || /\.m3u8(?:[?#].*)?$/i.test(video.url);
+}
+
 function formatType(type?: string) {
 	if (!type) return '';
 	return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
 }
+
+const hlsVideoEl = ref<HTMLVideoElement | null>(null);
+let hls: Hls | null = null;
+
+function destroyHls() {
+	if (hls) {
+		hls.destroy();
+		hls = null;
+	}
+}
+
+function setupHls() {
+	destroyHls();
+
+	const video = hlsVideoEl.value;
+	const source = activeVideo.value;
+	if (!video || !source || !isHlsVideo(source) || !source.url) return;
+
+	if (Hls.isSupported()) {
+		hls = new Hls();
+		hls.loadSource(source.url);
+		hls.attachMedia(video);
+	} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+		// Safari and other browsers with native HLS support.
+		video.src = source.url;
+	}
+}
+
+onMounted(setupHls);
+watch(activeVideo, () => nextTick(setupHls));
+onBeforeUnmount(destroyHls);
 </script>
 
 <template>
-	<div v-if="videos.length" class="video-player">
+	<div v-if="playableVideos.length" class="video-player">
 		<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" />
+			<video
+				v-if="isHlsVideo(activeVideo)"
+				ref="hlsVideoEl"
+				:poster="activeVideo.thumbnail_url || undefined"
+				controls
+				preload="metadata"
+			/>
+			<video v-else-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"
@@ -75,9 +133,9 @@ function formatType(type?: string) {
 			/>
 		</div>
 
-		<div v-if="videos.length > 1" class="video-list">
+		<div v-if="playableVideos.length > 1" class="video-list">
 			<div
-				v-for="video in videos"
+				v-for="video in playableVideos"
 				:key="video.id"
 				:class="['video-item', { active: activeVideo?.id === video.id }]"
 				@click="selectVideo(video.id)"

package/package.json

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

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

@@ -32,6 +32,13 @@ const lang = SUPPORTED_LOCALES.find(l => routePath.includes(l)) || 'en';
 // kits render on the same public page without needing to be published first.
 const previewToken = route.query.preview_token as string | undefined;
 
+// Proof a visitor already unlocked a password-protected kit, once obtained
+// from POST .../unlock. Starts null on every render (including SSR, which has
+// no localStorage) — a returning visitor's token is picked up client-side in
+// the onMounted below and triggers one silent refresh.
+const accessToken = ref<string | null>(null);
+const ACCESS_TOKEN_STORAGE_KEY = `kit_access_${slug}`;
+
 const { data: kitData, error: fetchError, pending, refresh: refreshKit } = await useAsyncData(
 	`press-kit-${slug}`,
 	() => $fetch<any>(`${apiBase}/public/press-kits/${slug}`, {
@@ -39,6 +46,7 @@ const { data: kitData, error: fetchError, pending, refresh: refreshKit } = await
 			include: 'assets,videos,credits,awards,quotes',
 			lang,
 			...(previewToken ? { preview_token: previewToken } : {}),
+			...(accessToken.value ? { access_token: accessToken.value } : {}),
 		},
 	}),
 	{ lazy: false },
@@ -70,6 +78,53 @@ const loadFailed = computed(
 );
 const notFound = computed(() => !pending.value && !loadFailed.value && !kit.value);
 
+// The public controller returns { slug, name, is_password_protected, locked }
+// with everything else stripped when a visitor hasn't unlocked the kit yet.
+const locked = computed(() => !!kit.value?.locked);
+
+const unlockPasswordInput = ref('');
+const unlocking = ref(false);
+const unlockError = ref('');
+
+async function submitUnlock() {
+	if (!unlockPasswordInput.value || unlocking.value) return;
+	unlocking.value = true;
+	unlockError.value = '';
+	try {
+		const res = await $fetch<any>(`${apiBase}/public/press-kits/${slug}/unlock`, {
+			method: 'POST',
+			body: { password: unlockPasswordInput.value },
+		});
+		const token = res?.data?.access_token;
+		if (!token) throw new Error('no token');
+		accessToken.value = token;
+		try {
+			localStorage.setItem(ACCESS_TOKEN_STORAGE_KEY, token);
+		} catch {
+			// Private browsing / storage disabled — the unlock still works for
+			// this page load, it just won't be remembered on the next visit.
+		}
+		await refreshKit();
+	} catch {
+		unlockError.value = t('kit.press.unlock_error');
+	} finally {
+		unlocking.value = false;
+	}
+}
+
+onMounted(() => {
+	if (!locked.value) return;
+	try {
+		const stored = localStorage.getItem(ACCESS_TOKEN_STORAGE_KEY);
+		if (stored) {
+			accessToken.value = stored;
+			refreshKit();
+		}
+	} catch {
+		// No stored grant, or storage unavailable — visitor re-enters the password.
+	}
+});
+
 const retrying = ref(false);
 async function retryKit() {
 	retrying.value = true;
@@ -85,6 +140,7 @@ onMounted(() => {
 		trackPressKitEvent(slug, {
 			event_type: 'view',
 			referrer: document.referrer || undefined,
+			experiments: experimentTags.value,
 		}).catch(() => {});
 	}
 });
@@ -334,9 +390,16 @@ const moreKits = computed(() => {
 	return items.filter((k: any) => k.slug !== slug).slice(0, 10);
 });
 
+// Tags for whichever running experiments assigned this visitor a variant —
+// echoed back on every event so a click/download/contact attributes to the
+// right variant. See PublicPressKitController::applyExperiments().
+const experimentTags = computed(() =>
+	(kit.value?.active_experiments || []).map((e: any) => ({ experiment_id: e.experiment_id, variant_id: e.variant_id })),
+);
+
 function track(type: 'click' | 'download' | 'contact') {
 	if (previewToken) return;
-	trackPressKitEvent(slug, { event_type: type, referrer: document.referrer || undefined }).catch(() => {});
+	trackPressKitEvent(slug, { event_type: type, referrer: document.referrer || undefined, experiments: experimentTags.value }).catch(() => {});
 }
 
 const requestUrl = useRequestURL();
@@ -413,6 +476,21 @@ useHead(() => ({
 			</section>
 		</div>
 
+		<div v-else-if="locked" class="kit-state kit-state--locked">
+			<h2>{{ kit.name }}</h2>
+			<p class="kit-state__desc">{{ $t('kit.press.locked_desc') }}</p>
+			<form class="kit-keys-form kit-unlock-form" @submit.prevent="submitUnlock">
+				<div class="kit-keys-field">
+					<label>{{ $t('kit.press.locked_placeholder') }}</label>
+					<input v-model="unlockPasswordInput" type="password" autocomplete="off" />
+				</div>
+				<p v-if="unlockError" class="kit-keys-error">{{ unlockError }}</p>
+				<button type="submit" class="kit-btn kit-btn-primary" :disabled="unlocking">
+					{{ unlocking ? $t('kit.loading') : $t('kit.press.unlock_cta') }}
+				</button>
+			</form>
+		</div>
+
 		<template v-else>
 			<!-- CAPA / COVER -->
 			<header class="kit-cover">

package/services/pressKitService.ts

@@ -44,8 +44,19 @@ const pk = new Proxy({} as AxiosInstance, {
 
 export default pk
 
-export const fetchPublicPressKit = (slug: string) =>
-	pk.get(`/public/press-kits/${slug}?include=assets,videos,credits,awards,quotes`)
+export const fetchPublicPressKit = (slug: string, accessToken?: string | null) =>
+	pk.get(`/public/press-kits/${slug}`, {
+		params: {
+			include: "assets,videos,credits,awards,quotes",
+			...(accessToken ? { access_token: accessToken } : {}),
+		},
+	})
+
+// Unlocks a password-protected kit. On success the response carries
+// { access_token, expires_at } — the caller persists the token (localStorage,
+// keyed by slug) and replays it on the next fetchPublicPressKit call.
+export const unlockPressKit = (slug: string, password: string) =>
+	pk.post(`/public/press-kits/${slug}/unlock`, { password })
 
 export const trackPressKitEvent = (
 	slug: string,
@@ -53,5 +64,8 @@ export const trackPressKitEvent = (
 		event_type: "view" | "click" | "download" | "contact"
 		referrer?: string
 		metadata?: Record<string, any>
+		// Echoed from the kit's own active_experiments (see fetchPublicPressKit)
+		// so a view/conversion attributes back to the variant this visitor saw.
+		experiments?: { experiment_id: number; variant_id: number }[]
 	},
 ) => pk.post(`/public/press-kits/${slug}/analytics`, data)