@mundogamernetwork/shared-ui 1.13.4 → 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/components/ui/MgXpLevelBar.vue

@@ -5,13 +5,15 @@ import { fetchGamificationSummary, type GamificationSummary } from "../../servic
 const props = withDefaults(
 	defineProps<{
 		/**
-		 * Where to send the user to see and claim their tasks. Only Community
-		 * hosts those pages, so leaving this unset points at Community — which
-		 * is the right destination from every other front. Community itself
-		 * passes its own internal route to avoid a full page load.
+		 * Where to send the user to see and claim their tasks. The missions
+		 * list is centralized on network-accounts (one page, every platform,
+		 * with cross-vertical filters) — leaving this unset points there,
+		 * which is the right destination from every front. A front that still
+		 * has its own local missions page should pass its own internal route
+		 * here to avoid a full page load; most no longer do.
 		 */
 		missionsUrl?: string;
-		/** Locale segment for the default Community destination. */
+		/** Locale segment for the default network-accounts destination. */
 		locale?: string;
 		/** Renders without the title line, for tight spaces. */
 		compact?: boolean;
@@ -23,14 +25,25 @@ const props = withDefaults(
 		mgcBalance?: number | null;
 		/** Hide the balance where the host already shows it elsewhere. */
 		showBalance?: boolean;
+		/**
+		 * Pre-fetched summary from a call the host already makes elsewhere
+		 * (e.g. its own dashboard composable, through its own configured HTTP
+		 * client). When set — even to `null` while the host's own fetch is
+		 * still resolving — this component skips its internal fetch entirely,
+		 * avoiding a second request to the same endpoint through a second,
+		 * independently-configured base URL that can drift from the host's
+		 * own over time. Leave unset (`undefined`) to keep the original
+		 * self-fetching behaviour.
+		 */
+		summary?: GamificationSummary | null;
 	}>(),
-	{ missionsUrl: "", locale: "", compact: false, mgcBalance: null, showBalance: true },
+	{ missionsUrl: "", locale: "", compact: false, mgcBalance: null, showBalance: true, summary: undefined },
 );
 
 const emit = defineEmits<{ (e: "navigate"): void }>();
 
-/** Missions and the reward store live on Community for the whole ecosystem. */
-const COMMUNITY_URL = "https://mundogamer.community";
+/** The centralized missions page lives on network-accounts for the whole ecosystem. */
+const ACCOUNTS_URL = "https://accounts.mundogamer.network";
 
 /**
  * Dig out the payload regardless of how many envelopes wrap it.
@@ -53,8 +66,15 @@ function unwrapSummary(payload: any): GamificationSummary | null {
 	return null;
 }
 
-const summary = ref<GamificationSummary | null>(null);
-const loaded = ref(false);
+const fetchedSummary = ref<GamificationSummary | null>(null);
+const selfLoaded = ref(false);
+
+/** The host manages this prop as soon as it's bound, even before its own fetch resolves — `undefined` only when the prop was never passed at all. */
+const isHostManaged = computed(() => props.summary !== undefined);
+const summary = computed(() => (isHostManaged.value ? props.summary ?? null : fetchedSummary.value));
+// Host-managed: loaded once the host's data actually arrives (an unresolved
+// host fetch must keep showing the skeleton, not the empty/hidden state).
+const loaded = computed(() => (isHostManaged.value ? summary.value !== null : selfLoaded.value));
 
 const level = computed(() => summary.value?.level ?? null);
 const claimable = computed(() => summary.value?.missions?.claimable_count ?? 0);
@@ -70,7 +90,7 @@ const destination = computed(() => {
 		(typeof document !== "undefined" ? document.documentElement.lang : "") ||
 		"en";
 
-	return `${COMMUNITY_URL}/${locale}/gamification/missions`;
+	return `${ACCOUNTS_URL}/${locale}/account/missions`;
 });
 
 const balance = computed(() => {
@@ -95,18 +115,20 @@ const percent = computed(() => {
 });
 
 onMounted(async () => {
+	if (isHostManaged.value) return; // host supplies (and reactively updates) props.summary itself
+
 	try {
 		const response = await fetchGamificationSummary();
-		summary.value = unwrapSummary(response?.data);
+		fetchedSummary.value = unwrapSummary(response?.data);
 	} catch (error) {
 		// Never let a gamification hiccup break the header it sits in — but say
 		// so. Swallowing this silently made a deployed bar that renders nothing
 		// indistinguishable from a bar that was never deployed, and cost hours
 		// of bundle forensics to tell apart.
 		console.warn("[MgXpLevelBar] gamification dashboard unavailable", error);
-		summary.value = null;
+		fetchedSummary.value = null;
 	} finally {
-		loaded.value = true;
+		selfLoaded.value = true;
 	}
 });
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.13.4",
+  "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/httpService.ts

@@ -37,6 +37,19 @@ export function getHttpService(): AxiosInstance {
 		withCredentials: true,
 	});
 
+	// Dev-only bearer token injection lives on `defaults.headers.common` rather
+	// than inside the request interceptor below: axios 1.19's `mergeConfig`
+	// (invoked on every dispatch via resolveConfig.js) converts an AxiosHeaders
+	// instance to a plain object via `{ ...thing }` before merging, and an
+	// Authorization value set inside a request interceptor does not survive
+	// that spread — it never reaches the server. Already discovered and fixed
+	// the same way in jobs-frontend's own httpService.ts; this file had the
+	// same bug independently. `defaults.headers.common` goes through axios's
+	// own default-header merge path instead, which does not hit it.
+	if (import.meta.env.VITE_APP_ENV !== "production" && import.meta.env.VITE_BEARER_TOKEN) {
+		_httpService.defaults.headers.common.Authorization = `Bearer ${import.meta.env.VITE_BEARER_TOKEN}`;
+	}
+
 	_httpService.interceptors.response.use(
 		(response) => response,
 		(error) => {
@@ -88,9 +101,6 @@ export function getHttpService(): AxiosInstance {
 		config.params = { ...config.params, lang };
 
 		if (import.meta.env.VITE_APP_ENV !== "production" && typeof window !== "undefined") {
-			if (import.meta.env.VITE_BEARER_TOKEN) {
-				config.headers.Authorization = `Bearer ${import.meta.env.VITE_BEARER_TOKEN}`;
-			}
 			config.headers.set("X-Timezone", Intl.DateTimeFormat().resolvedOptions().timeZone);
 		}
 

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)