@mundogamernetwork/shared-ui 1.7.0 → 1.8.1

package/components/keys/KeyBrowser.vue

@@ -147,12 +147,16 @@ function handleRequestKey(pool: KeyPool) {
 
 // ─── Notification prompt ──────────────────────────────────────────────────────
 
+// account-management/notification-preferences is the canonical, cross-product
+// preferences endpoint (network-accounts, community-frontend, mobile all use
+// it). Called with no mg_network_system_id so the row is global — one opt-in
+// covers key_campaigns alerts on TV/community/agency alike, matching how the
+// rest of the notification-preferences system already behaves.
 async function _checkNotifPrompt() {
   try {
-    const res = await httpService.get('/public/user/notification-preferences', {
-      params: { category: 'key_campaigns' },
-    })
-    if (res.data?.data === null) {
+    const res = await httpService.get('/account-management/notification-preferences')
+    const category = res.data?.data?.categories?.find((c: any) => c.category === 'key_campaigns')
+    if (category && category.is_set === false) {
       notifPromptVisible.value = true
     }
   } catch {
@@ -163,12 +167,14 @@ async function _checkNotifPrompt() {
 async function enableNotifAlerts() {
   notifSaving.value = true
   try {
-    await httpService.put('/public/user/notification-preferences', {
-      category: 'key_campaigns',
-      enabled: true,
-      channel_email: true,
-      channel_push: true,
-      channel_in_app: true,
+    await httpService.post('/account-management/notification-preferences', {
+      preferences: [{
+        category: 'key_campaigns',
+        enabled: true,
+        channel_email: true,
+        channel_push: true,
+        channel_in_app: true,
+      }],
     })
   } catch {
     // ignore — user can configure later in settings

package/components/playtest/video/RecordedSessionPlayer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 // Playback + clickable marker timeline for a Video Playtest recording.
-// Native <video> — plays HLS natively in Safari; other browsers need an
-// hls.js integration this first version doesn't include (documented
-// limitation, not silently broken: shows a note when playback fails).
-import { ref } from "vue";
+// Safari plays HLS natively; every other browser needs hls.js (MediaSource
+// Extensions) — falls back to a direct-link note only if neither path works
+// (very old browsers without MSE support).
+import { ref, onMounted, onBeforeUnmount, watch } from "vue";
+import Hls from "hls.js";
 
 const props = defineProps<{
 	playbackUrl: string | null;
@@ -14,6 +15,41 @@ const props = defineProps<{
 const videoEl = ref<HTMLVideoElement | null>(null);
 const playbackError = ref(false);
 
+let hls: Hls | null = null;
+
+function destroyPlayer() {
+	if (hls) {
+		hls.destroy();
+		hls = null;
+	}
+}
+
+function setupPlayback() {
+	destroyPlayer();
+	playbackError.value = false;
+
+	const video = videoEl.value;
+	if (!video || !props.playbackUrl) return;
+
+	if (Hls.isSupported()) {
+		hls = new Hls();
+		hls.on(Hls.Events.ERROR, (_event, data) => {
+			if (data.fatal) playbackError.value = true;
+		});
+		hls.loadSource(props.playbackUrl);
+		hls.attachMedia(video);
+	} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+		// Safari and other browsers with native HLS support.
+		video.src = props.playbackUrl;
+	} else {
+		playbackError.value = true;
+	}
+}
+
+onMounted(setupPlayback);
+watch(() => props.playbackUrl, setupPlayback);
+onBeforeUnmount(destroyPlayer);
+
 function seekTo(seconds: number) {
 	if (videoEl.value) {
 		videoEl.value.currentTime = seconds;
@@ -46,7 +82,6 @@ function severityClass(severity?: string | null): string {
 		<template v-else>
 			<video
 				ref="videoEl"
-				:src="playbackUrl"
 				controls
 				class="recorded-session-player__video"
 				@error="playbackError = true"

package/components/playtest/video/VideoPlaytestCapture.vue

@@ -16,6 +16,8 @@ const emit = defineEmits<{
 const rec = usePlaytestVideoRecording(props.campaignId);
 
 const markerDraft = ref("");
+const submitted = ref(false);
+const retryingMarkers = ref(false);
 const step = computed<"record" | "review" | "upload" | "done">(() => {
 	if (rec.recordedBlob.value && !rec.recordingId.value) return "review";
 	if (rec.recordingId.value) return "upload";
@@ -30,7 +32,23 @@ function addMarker() {
 
 async function submit() {
 	const result = await rec.submitVideoResponse();
-	if (result) emit("submitted");
+	if (!result) return;
+	submitted.value = true;
+	if (rec.markerSubmitErrors.value === 0) emit("submitted");
+}
+
+async function retryMarkers() {
+	retryingMarkers.value = true;
+	try {
+		await rec.retryPendingMarkers();
+		if (rec.markerSubmitErrors.value === 0) emit("submitted");
+	} finally {
+		retryingMarkers.value = false;
+	}
+}
+
+function continueAfterSubmit() {
+	emit("submitted");
 }
 
 function formatSeconds(s: number): string {
@@ -97,7 +115,7 @@ function formatSeconds(s: number): string {
 		</template>
 
 		<!-- Upload done, waiting on provider processing — submit -->
-		<template v-else-if="step === 'upload'">
+		<template v-else-if="step === 'upload' && !submitted">
 			<p class="video-capture__hint">
 				{{ $t("playtest.video_capture.processing_hint", "Your recording is uploaded and processing. Submit when you're ready — we'll finish confirming it's ready in the background.") }}
 			</p>
@@ -107,6 +125,23 @@ function formatSeconds(s: number): string {
 					: $t("playtest.video_capture.submit", "Submit response") }}
 			</button>
 		</template>
+
+		<!-- Response submitted, but one or more markers failed to save — offer a retry instead of silently dropping them -->
+		<template v-else-if="submitted && rec.markerSubmitErrors.value > 0">
+			<p class="video-capture__hint video-capture__error">
+				{{ $t("playtest.video_capture.marker_save_failed", "Response submitted, but {v} note(s) failed to save.", { v: rec.markerSubmitErrors.value }) }}
+			</p>
+			<div class="video-capture__actions">
+				<button type="button" class="btn primary" :disabled="retryingMarkers" @click="retryMarkers">
+					{{ retryingMarkers
+						? $t("playtest.video_capture.retrying", "Retrying…")
+						: $t("playtest.video_capture.retry_markers", "Retry saving notes") }}
+				</button>
+				<button type="button" class="btn" @click="continueAfterSubmit">
+					{{ $t("playtest.video_capture.continue_anyway", "Continue anyway") }}
+				</button>
+			</div>
+		</template>
 	</div>
 </template>
 
@@ -130,6 +165,7 @@ function formatSeconds(s: number): string {
 
 	&__actions {
 		display: flex;
+		gap: 8px;
 	}
 
 	&__recording {

package/composables/usePlaytestVideoRecording.ts

@@ -18,6 +18,8 @@ import {
  * audio only — a real limitation, not an oversight), duration capped
  * server-side (config playtest.video.max_duration_seconds).
  */
+type PendingMarker = { timestamp_seconds: number; comment: string; severity?: string };
+
 export function usePlaytestVideoRecording(campaignId: number) {
 	const capturing = ref(false);
 	const uploading = ref(false);
@@ -29,12 +31,45 @@ export function usePlaytestVideoRecording(campaignId: number) {
 	const recording = ref<PlaytestRecording | null>(null);
 	const recordedBlob = ref<Blob | null>(null);
 	const recordedDurationSeconds = ref(0);
-	const markers = ref<{ timestamp_seconds: number; comment: string; severity?: string }[]>([]);
+	const markers = ref<PendingMarker[]>([]);
+	// Markers a submitted response still needs posted — set when the post-submit
+	// loop hits an error partway through, so the UI can offer a retry instead of
+	// silently dropping the remainder (see storeRecordingMarker loop below).
+	const markerSubmitErrors = ref(0);
 
 	let mediaRecorder: MediaRecorder | null = null;
 	let chunks: BlobPart[] = [];
 	let captureStartedAt = 0;
 
+	// Markers only ever live in this Vue ref + localStorage until they're
+	// posted — a crash between adding a marker and a successful submit loses
+	// nothing beyond that point (the recording Blob itself is still
+	// memory-only and can't survive a reload; that's a separate, harder
+	// problem this doesn't attempt to solve).
+	const storageKey = `mgn_playtest_pending_markers_${campaignId}`;
+
+	function persistMarkers() {
+		try {
+			if (markers.value.length) {
+				localStorage.setItem(storageKey, JSON.stringify(markers.value));
+			} else {
+				localStorage.removeItem(storageKey);
+			}
+		} catch {
+			// localStorage unavailable (private mode / quota) — best-effort only.
+		}
+	}
+
+	/** Restores markers left over from a previous capture on this campaign that never made it to a submit. */
+	function restorePendingMarkers(): PendingMarker[] {
+		try {
+			const raw = localStorage.getItem(storageKey);
+			return raw ? (JSON.parse(raw) as PendingMarker[]) : [];
+		} catch {
+			return [];
+		}
+	}
+
 	function resetError() {
 		genericError.value = null;
 	}
@@ -50,6 +85,12 @@ export function usePlaytestVideoRecording(campaignId: number) {
 
 	async function startCapture() {
 		resetError();
+		// A previous capture on this campaign may have left markers behind
+		// (crash/reload before a successful submit) — recover them rather than
+		// silently starting from an empty list.
+		const leftover = restorePendingMarkers();
+		if (leftover.length) markers.value = leftover;
+
 		try {
 			const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
 			chunks = [];
@@ -80,6 +121,7 @@ export function usePlaytestVideoRecording(campaignId: number) {
 	/** Adds a marker anchored to the current elapsed recording time. */
 	function markNow(comment: string, severity?: string) {
 		markers.value.push({ timestamp_seconds: elapsedSeconds(), comment, severity });
+		persistMarkers();
 	}
 
 	/** Requests the upload slot and uploads the recorded blob directly to the video provider. */
@@ -118,6 +160,60 @@ export function usePlaytestVideoRecording(campaignId: number) {
 		}
 	}
 
+	let lastSubmittedResponseId: number | null = null;
+
+	/**
+	 * Marker timestamps are wall-clock elapsed time from when capture started,
+	 * not the real position in the final encoded file — any delay before
+	 * MediaRecorder actually starts encoding, or a hiccup mid-recording, drifts
+	 * them apart. Once the provider confirms the real duration (post-submit,
+	 * since submit only succeeds once the recording is 'ready'), scale every
+	 * marker proportionally against the wall-clock duration we measured — a
+	 * practical correction, not frame-perfect, but far closer than raw elapsed
+	 * seconds once the two durations diverge.
+	 */
+	function correctForDrift(realDurationSeconds: number | null | undefined) {
+		if (!realDurationSeconds || !recordedDurationSeconds.value) return;
+		const scale = realDurationSeconds / recordedDurationSeconds.value;
+		if (!isFinite(scale) || scale <= 0 || scale === 1) return;
+		markers.value = markers.value.map((m) => ({
+			...m,
+			timestamp_seconds: Math.min(realDurationSeconds, Math.max(0, Math.round(m.timestamp_seconds * scale))),
+		}));
+		persistMarkers();
+	}
+
+	/**
+	 * Posts whatever's left in markers.value for responseId, one at a time.
+	 * A failure on one marker does NOT abort the rest — each is independent
+	 * feedback, so losing one shouldn't cost the others. Successfully-posted
+	 * markers are removed from the pending list (and localStorage) as they
+	 * succeed; anything left after this call can be retried via
+	 * retryPendingMarkers() instead of being silently dropped.
+	 */
+	async function postPendingMarkers(responseId: number) {
+		lastSubmittedResponseId = responseId;
+		const remaining: PendingMarker[] = [];
+		let failures = 0;
+		for (const m of markers.value) {
+			try {
+				await storeRecordingMarker(responseId, m as any);
+			} catch {
+				remaining.push(m);
+				failures++;
+			}
+		}
+		markers.value = remaining;
+		markerSubmitErrors.value = failures;
+		persistMarkers();
+	}
+
+	/** Retries any markers that failed to post during submitVideoResponse(). */
+	async function retryPendingMarkers() {
+		if (!lastSubmittedResponseId || !markers.value.length) return;
+		await postPendingMarkers(lastSubmittedResponseId);
+	}
+
 	/**
 	 * Submits the response once the backend confirms the recording is ready.
 	 * Processing is async (the provider's webhook updates our DB after
@@ -135,6 +231,7 @@ export function usePlaytestVideoRecording(campaignId: number) {
 			return null;
 		}
 		resetError();
+		markerSubmitErrors.value = 0;
 		submitting.value = true;
 		try {
 			for (let attempt = 1; attempt <= maxAttempts; attempt++) {
@@ -144,9 +241,13 @@ export function usePlaytestVideoRecording(campaignId: number) {
 						recording_id: recordingId.value,
 						...meta,
 					});
-					for (const m of markers.value) {
-						await storeRecordingMarker(data.id, m as any);
+					try {
+						const fetched = await fetchRecording(data.id);
+						correctForDrift(fetched.data.data?.duration_seconds ?? null);
+					} catch {
+						// Non-fatal — fall back to uncorrected (wall-clock) timestamps.
 					}
+					await postPendingMarkers(data.id);
 					return data;
 				} catch (e: any) {
 					if (attempt === maxAttempts) throw e;
@@ -179,11 +280,13 @@ export function usePlaytestVideoRecording(campaignId: number) {
 		recordedBlob,
 		recordedDurationSeconds,
 		markers,
+		markerSubmitErrors,
 		startCapture,
 		stopCapture,
 		markNow,
 		uploadRecording,
 		submitVideoResponse,
+		retryPendingMarkers,
 		loadRecording,
 	};
 }

package/error.vue

@@ -51,13 +51,13 @@ onUnmounted(() => {
 
 <template>
 	<NuxtLayout>
-		<errors401 v-if="statusCodeError === HttpStatusCode.Unauthorized" />
-		<errors403 v-else-if="statusCodeError === HttpStatusCode.Forbidden" />
-		<errors404 v-else-if="statusCodeError === HttpStatusCode.NotFound" />
-		<errors500 v-else-if="statusCodeError === HttpStatusCode.InternalServerError" />
-		<errors503 v-else-if="statusCodeError === HttpStatusCode.ServiceUnavailable" />
-		<errors504 v-else-if="statusCodeError === HttpStatusCode.GatewayTimeout" />
-		<errors500 v-else />
+		<Error401 v-if="statusCodeError === HttpStatusCode.Unauthorized" />
+		<Error403 v-else-if="statusCodeError === HttpStatusCode.Forbidden" />
+		<Error404 v-else-if="statusCodeError === HttpStatusCode.NotFound" />
+		<Error500 v-else-if="statusCodeError === HttpStatusCode.InternalServerError" />
+		<Error503 v-else-if="statusCodeError === HttpStatusCode.ServiceUnavailable" />
+		<Error504 v-else-if="statusCodeError === HttpStatusCode.GatewayTimeout" />
+		<Error500 v-else />
 
 		<p v-if="isRecoverableError" class="recovery-line">
 			{{ $t("errors.recovery_hint") }}

package/locales/de.json

@@ -151,7 +151,7 @@
       "description_optional": "Beschreibung (optional)",
       "description_placeholder": "Erzähl uns etwas über deinen Kanal...",
       "sending": "Wird gesendet...",
-      "request_sent": "Anfrage gesendet! Weiterleitung...",
+      "request_sent": "Anfrage gesendet! Wir informieren dich per E-Mail, sobald sie geprüft wurde.",
       "error_loading": "Kampagnendaten konnten nicht geladen werden.",
       "error_request": "Anfrage konnte nicht gesendet werden. Bitte erneut versuchen.",
       "error_reveal": "Schlüssel konnte nicht enthüllt werden.",

package/locales/en.json

@@ -151,7 +151,7 @@
       "description_optional": "Description (optional)",
       "description_placeholder": "Tell us a bit about your channel or content plans...",
       "sending": "Sending...",
-      "request_sent": "Request sent! Redirecting...",
+      "request_sent": "Request sent! We'll email you once it's reviewed.",
       "error_loading": "Failed to load campaign data.",
       "error_request": "Could not submit request. Please try again.",
       "error_reveal": "Could not reveal key. Please try again.",

package/locales/pt-BR.json

@@ -151,7 +151,7 @@
       "description_optional": "Descrição (opcional)",
       "description_placeholder": "Conte um pouco sobre seu canal ou planos de conteúdo...",
       "sending": "Enviando...",
-      "request_sent": "Solicitação enviada! Redirecionando...",
+      "request_sent": "Solicitação enviada! Você será avisado por e-mail assim que for revisada.",
       "error_loading": "Falha ao carregar dados da campanha.",
       "error_request": "Não foi possível enviar a solicitação. Tente novamente.",
       "error_reveal": "Não foi possível revelar a chave. Tente novamente.",

package/locales/ro.json

@@ -151,7 +151,7 @@
       "description_optional": "Descriere (opțional)",
       "description_placeholder": "Spune-ne puțin despre canalul tău...",
       "sending": "Se trimite...",
-      "request_sent": "Cerere trimisă! Redirecționare...",
+      "request_sent": "Cerere trimisă! Te vom anunța prin e-mail după ce este analizată.",
       "error_loading": "Eroare la încărcarea datelor campaniei.",
       "error_request": "Nu s-a putut trimite cererea. Încearcă din nou.",
       "error_reveal": "Nu s-a putut dezvălui cheia.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -31,6 +31,7 @@
     "@pinia-plugin-persistedstate/nuxt": ">=1.0.0",
     "@pinia/nuxt": ">=0.5.0",
     "axios": ">=1.0.0",
+    "hls.js": ">=1.5.0",
     "laravel-echo": ">=1.15.0",
     "nuxt": ">=3.13.0",
     "pinia": ">=2.1.0",
@@ -41,6 +42,7 @@
     "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
     "@pinia/nuxt": "^0.5.5",
     "axios": "^1.18.1",
+    "hls.js": "^1.6.16",
     "laravel-echo": "^2.3.7",
     "nuxt": "^3.15.4",
     "pinia": "^2.3.1",

package/pages/key-campaigns/redeem-key.vue

@@ -203,6 +203,9 @@ function goBack() {
 			<div v-else-if="success" class="state success">
 				<MGIcon icon="check-circle" size="3x" />
 				<p>{{ $t("keys.campaigns.request_sent") }}</p>
+				<button class="btn" @click="goBack">
+					{{ $t("keys.campaigns.back_to_campaign") }}
+				</button>
 			</div>
 
 			<div v-else class="form-content">

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

@@ -214,6 +214,7 @@ const navSections = computed(() => {
 	if (awards.value.length) s.push({ id: 'awards', label: 'kit.press.awards' });
 	if (team.value.length) s.push({ id: 'team', label: 'kit.press.team' });
 	if (hasEcosystem.value) s.push({ id: 'events', label: 'kit.press.showcases' });
+	if (k.game_id && keyPoolsVisible.value) s.push({ id: 'review-key', label: 'kit.press.request_review_key' });
 	if (k.press_contact_email) s.push({ id: 'contact', label: 'kit.press.contact' });
 	return s;
 });
@@ -338,6 +339,11 @@ useHead(() => ({
 								<span v-else class="kit-btn kit-btn-primary kit-btn-disabled" :title="$t('kit.press.no_assets')">{{ $t('kit.press.no_assets') }}</span>
 							</template>
 							<a v-if="kit.press_contact_email" class="kit-btn kit-btn-ghost" :href="`mailto:${kit.press_contact_email}`" @click="track('contact')">{{ $t('kit.press.request_key') }}</a>
+							<!-- Real UnifiedKeyRequestController-backed flow (KeyBrowser below) — only
+							     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 class="kit-btn kit-btn-ghost" :href="`${agencyBase}/podcast-guest`" target="_blank" rel="noopener" @click="track('click')">{{ $t('kit.press.request_interview') }}</a>
 						</div>
 					</div>
 				</div>
@@ -492,7 +498,7 @@ useHead(() => ({
 						</section>
 
 						<!-- Key pools embed — shown when game has active pools -->
-						<section v-if="kit.game_id" v-show="keyPoolsVisible" class="kit-block kit-keys-section">
+						<section v-if="kit.game_id" v-show="keyPoolsVisible" id="review-key" class="kit-block kit-keys-section">
 							<h2 class="kit-keys-title">{{ $t('kit.press.get_key_title') }}</h2>
 							<p class="kit-keys-desc">{{ $t('kit.press.get_key_desc') }}</p>
 							<KeyBrowser