@mundogamernetwork/shared-ui 1.4.2 → 1.6.0

package/composables/usePlaytestAccessGrant.ts

@@ -0,0 +1,88 @@
+import { ref } from "vue";
+import {
+	fetchAccessGrant,
+	initiateAccessGrantWaiver,
+	verifyAccessGrantWaiver,
+	type PlaytestAccessGrant,
+} from "../services/playtestTesterService";
+
+/**
+ * Game-access grant state (key/link + liability waiver) for a single
+ * accepted response. Only meaningful once the response's status is
+ * 'accepted' — a submitted/rejected response has no grant to load.
+ * One instance per response — instantiate fresh per mount, mirroring
+ * usePlaytestResponse().
+ */
+export function usePlaytestAccessGrant(responseId: number) {
+	const loading = ref(false);
+	const submitting = ref(false);
+	const grant = ref<PlaytestAccessGrant | null>(null);
+	const genericError = ref<string | null>(null);
+	// True once an OTP has been sent for the current signing attempt — lets
+	// the waiver UI switch from "send code" to "enter code" without waiting
+	// on a grant re-fetch (the grant itself only changes once verified).
+	const waiverInitiated = ref(false);
+
+	function resetErrors() {
+		genericError.value = null;
+	}
+
+	function errorMessage(e: any, fallback: string): string {
+		return e?.response?.data?.message ?? e?.message ?? fallback;
+	}
+
+	async function loadAccessGrant() {
+		loading.value = true;
+		try {
+			const res = await fetchAccessGrant(responseId);
+			grant.value = res.data.data;
+			return grant.value;
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	async function initiateWaiver() {
+		resetErrors();
+		submitting.value = true;
+		try {
+			await initiateAccessGrantWaiver(responseId);
+			waiverInitiated.value = true;
+			return true;
+		} catch (e: any) {
+			genericError.value = errorMessage(e, "Could not send the verification code. Please try again.");
+			return false;
+		} finally {
+			submitting.value = false;
+		}
+	}
+
+	async function verifyWaiver(otpCode: string) {
+		resetErrors();
+		submitting.value = true;
+		try {
+			const res = await verifyAccessGrantWaiver(responseId, otpCode);
+			grant.value = res.data.data;
+			return grant.value;
+		} catch (e: any) {
+			genericError.value = errorMessage(e, "Invalid or expired code.");
+			return null;
+		} finally {
+			submitting.value = false;
+		}
+	}
+
+	return {
+		loading,
+		submitting,
+		grant,
+		genericError,
+		waiverInitiated,
+		loadAccessGrant,
+		initiateWaiver,
+		verifyWaiver,
+		resetErrors,
+	};
+}
+
+export type PlaytestAccessGrantComposable = ReturnType<typeof usePlaytestAccessGrant>;

package/composables/usePlaytestVideoRecording.ts

@@ -0,0 +1,191 @@
+import { ref } from "vue";
+import {
+	requestRecordingUploadUrl,
+	fetchRecording,
+	storeRecordingMarker,
+	submitPlaytestResponse,
+	type PlaytestRecording,
+	type PlaytestRecordingMarker,
+} from "../services/playtestTesterService";
+
+/**
+ * Browser-side capture (MediaRecorder over getDisplayMedia — screen + audio)
+ * and upload lifecycle for a "Video Playtest" ("minutagem") response. One
+ * instance per campaign visit, mirroring usePlaytestResponse().
+ *
+ * Deliberately minimal per the game-access/minutagem plan's cost controls:
+ * no client-side trimming/editing, no separate mic-track mixing (system/tab
+ * audio only — a real limitation, not an oversight), duration capped
+ * server-side (config playtest.video.max_duration_seconds).
+ */
+export function usePlaytestVideoRecording(campaignId: number) {
+	const capturing = ref(false);
+	const uploading = ref(false);
+	const uploadProgress = ref(0);
+	const submitting = ref(false);
+	const genericError = ref<string | null>(null);
+
+	const recordingId = ref<number | null>(null);
+	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 }[]>([]);
+
+	let mediaRecorder: MediaRecorder | null = null;
+	let chunks: BlobPart[] = [];
+	let captureStartedAt = 0;
+
+	function resetError() {
+		genericError.value = null;
+	}
+
+	function errorMessage(e: any, fallback: string): string {
+		return e?.response?.data?.message ?? e?.message ?? fallback;
+	}
+
+	/** Also used to add a marker mid-recording — timestamp is relative to capture start. */
+	function elapsedSeconds(): number {
+		return captureStartedAt ? Math.floor((Date.now() - captureStartedAt) / 1000) : 0;
+	}
+
+	async function startCapture() {
+		resetError();
+		try {
+			const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
+			chunks = [];
+			mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm" });
+			mediaRecorder.ondataavailable = (e) => {
+				if (e.data.size > 0) chunks.push(e.data);
+			};
+			mediaRecorder.onstop = () => {
+				recordedBlob.value = new Blob(chunks, { type: "video/webm" });
+				recordedDurationSeconds.value = elapsedSeconds();
+				stream.getTracks().forEach((t) => t.stop());
+			};
+			mediaRecorder.start(1000);
+			captureStartedAt = Date.now();
+			capturing.value = true;
+		} catch (e: any) {
+			genericError.value = errorMessage(e, "Could not start screen recording. Please allow screen-share permission and try again.");
+		}
+	}
+
+	function stopCapture() {
+		if (mediaRecorder && mediaRecorder.state !== "inactive") {
+			mediaRecorder.stop();
+		}
+		capturing.value = false;
+	}
+
+	/** Adds a marker anchored to the current elapsed recording time. */
+	function markNow(comment: string, severity?: string) {
+		markers.value.push({ timestamp_seconds: elapsedSeconds(), comment, severity });
+	}
+
+	/** Requests the upload slot and uploads the recorded blob directly to the video provider. */
+	async function uploadRecording(): Promise<boolean> {
+		if (!recordedBlob.value) {
+			genericError.value = "No recording to upload yet.";
+			return false;
+		}
+		resetError();
+		uploading.value = true;
+		uploadProgress.value = 0;
+		try {
+			const { data } = await requestRecordingUploadUrl(campaignId);
+			recordingId.value = data.data.recording_id;
+
+			const form = new FormData();
+			form.append("file", recordedBlob.value, "recording.webm");
+
+			await new Promise<void>((resolve, reject) => {
+				const xhr = new XMLHttpRequest();
+				xhr.open("POST", data.data.upload_url);
+				xhr.upload.onprogress = (e) => {
+					if (e.lengthComputable) uploadProgress.value = Math.round((e.loaded / e.total) * 100);
+				};
+				xhr.onload = () => (xhr.status >= 200 && xhr.status < 300 ? resolve() : reject(new Error(`Upload failed (${xhr.status})`)));
+				xhr.onerror = () => reject(new Error("Upload failed — network error."));
+				xhr.send(form);
+			});
+
+			return true;
+		} catch (e: any) {
+			genericError.value = errorMessage(e, "Could not upload the recording. Please try again.");
+			return false;
+		} finally {
+			uploading.value = false;
+		}
+	}
+
+	/**
+	 * Submits the response once the backend confirms the recording is ready.
+	 * Processing is async (the provider's webhook updates our DB after
+	 * upload), so this retries a few times with a short delay instead of
+	 * failing on the first "not ready yet" — the backend (not this client)
+	 * is the source of truth for readiness.
+	 */
+	async function submitVideoResponse(
+		meta: { time_on_task_seconds?: number; device?: string; os?: string } = {},
+		maxAttempts = 5,
+		delayMs = 4000,
+	) {
+		if (!recordingId.value) {
+			genericError.value = "Upload the recording before submitting.";
+			return null;
+		}
+		resetError();
+		submitting.value = true;
+		try {
+			for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+				try {
+					const { data } = await submitPlaytestResponse(campaignId, {
+						answers: {},
+						recording_id: recordingId.value,
+						...meta,
+					});
+					for (const m of markers.value) {
+						await storeRecordingMarker(data.id, m as any);
+					}
+					return data;
+				} catch (e: any) {
+					if (attempt === maxAttempts) throw e;
+					await new Promise((r) => setTimeout(r, delayMs));
+				}
+			}
+			return null;
+		} catch (e: any) {
+			genericError.value = errorMessage(e, "The recording isn't ready yet — please wait a moment and try again.");
+			return null;
+		} finally {
+			submitting.value = false;
+		}
+	}
+
+	async function loadRecording(responseId: number) {
+		const { data } = await fetchRecording(responseId);
+		recording.value = data.data;
+		return recording.value;
+	}
+
+	return {
+		capturing,
+		uploading,
+		uploadProgress,
+		submitting,
+		genericError,
+		recordingId,
+		recording,
+		recordedBlob,
+		recordedDurationSeconds,
+		markers,
+		startCapture,
+		stopCapture,
+		markNow,
+		uploadRecording,
+		submitVideoResponse,
+		loadRecording,
+	};
+}
+
+export type PlaytestVideoRecordingComposable = ReturnType<typeof usePlaytestVideoRecording>;

package/locales/de.json

@@ -204,6 +204,7 @@
       "required_fields": "Bitte alle Pflichtfelder ausfüllen",
       "plan": "Deckungspläne",
       "plan_placeholder": "Beschreibe deinen Berichterstattungsplan: wo du über das Spiel streamen oder posten wirst, dein Publikum und das geplante Veröffentlichungsdatum",
+      "notify_opt_in": "Benachrichtige mich über neue Key-Kampagnen",
       "resources_title": "Ressourcen",
       "press_kit_link": "Presse-Kit",
       "review_guideline": "Review-Richtlinie",

package/locales/en.json

@@ -204,6 +204,7 @@
       "required_fields": "Please fill in all required fields",
       "plan": "Coverage plans",
       "plan_placeholder": "Describe your coverage plan: where you will stream or post about this game, your audience, and expected publish date",
+      "notify_opt_in": "Notify me about new key campaigns",
       "resources_title": "Resources",
       "press_kit_link": "Press Kit",
       "review_guideline": "Review guideline",

package/locales/pt-BR.json

@@ -204,6 +204,7 @@
       "required_fields": "Por favor, preencha todos os campos obrigatórios",
       "plan": " Planos de cobertura",
       "plan_placeholder": "Descreva seu plano de cobertura: onde vai fazer stream ou publicar sobre o jogo, seu público e a data prevista de publicação",
+      "notify_opt_in": "Quero ser notificado sobre novas campanhas de chaves",
       "resources_title": "Recursos",
       "press_kit_link": "Press Kit",
       "review_guideline": "Diretriz de review",

package/locales/ro.json

@@ -204,6 +204,7 @@
       "required_fields": "Vă rugăm să completați toate câmpurile obligatorii",
       "plan": "Planuri de acoperire",
       "plan_placeholder": "Descrie planul tău de acoperire: unde vei face stream sau vei posta despre joc, publicul tău și data estimată de publicare",
+      "notify_opt_in": "Anunță-mă despre noile campanii de chei",
       "resources_title": "Resurse",
       "press_kit_link": "Press Kit",
       "review_guideline": "Ghid de recenzie",

package/nuxt.config.ts

@@ -51,7 +51,14 @@ import { dirname } from "node:path";
 const SHARED_UI_COMPONENT_PRIORITY = 1000;
 
 const require = createRequire(`${process.cwd()}/`);
-const packageRoot = dirname(require.resolve("@mundogamernetwork/shared-ui/package.json"));
+let packageRoot: string;
+try {
+	packageRoot = dirname(require.resolve("@mundogamernetwork/shared-ui/package.json"));
+} catch {
+	// The package does not resolve by its own published name while running the
+	// local playground directly from this repository.
+	packageRoot = process.cwd();
+}
 
 export default defineNuxtConfig({
 	components: [
@@ -92,8 +99,8 @@ export default defineNuxtConfig({
 		],
 	},
 	css: [
-		"@mundogamernetwork/shared-ui/assets/kit/kit-base.css",
-		"@mundogamernetwork/shared-ui/assets/kit/kit-theme.css",
+		`${packageRoot}/assets/kit/kit-base.css`,
+		`${packageRoot}/assets/kit/kit-theme.css`,
 	],
 	runtimeConfig: {
 		public: {

package/package.json

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

package/pages/key-campaigns/index.vue

@@ -123,6 +123,7 @@
 													:src="card.cover"
 													:alt="card.text"
 													:class="{ 'gray-out': card.isExpired || card.isUpcoming || !card.user_can_access }"
+													:style="{ objectPosition: `${card.coverFocalX * 100}% ${card.coverFocalY * 100}%` }"
 													@error="(e) => { (e.target as HTMLImageElement).src = '/imgs/no-cover-img.jpg' }"
 												/>
 
@@ -419,7 +420,7 @@ const sortMode = ref<"recent" | "popular">("recent")
 // ------------------------------------------------------------------
 // Data
 // ------------------------------------------------------------------
-const sliderImages = ref<Array<{ slug: string; cover: string; name: string; id: number }>>([])
+const sliderImages = ref<Array<{ slug: string; cover: string; name: string; id: number; coverFocalX: number; coverFocalY: number }>>([])
 const cards = ref<Array<any>>([])
 const redeemedCards = ref<Array<any>>([])
 
@@ -529,11 +530,9 @@ async function loadFeaturedCampaigns() {
 			.filter((item: any) => (truthyFlag(item.featured) || truthyFlag(item.highlight)) && truthyFlag(item.is_open))
 			.map((item: any) => ({
 				id: item.id,
-				cover: item.game?.url_banner_src || item.cover_src,
-				// Only applies to the cover_src fallback — the game's own
-				// url_banner_src is already banner-shaped and needs no repositioning.
-				coverFocalX: item.game?.url_banner_src ? 0.5 : (item.cover_focal_x ?? 0.5),
-				coverFocalY: item.game?.url_banner_src ? 0.5 : (item.cover_focal_y ?? 0.5),
+				cover: item.cover_src || item.game?.url_banner_src || item.game?.url_cover_src || "/imgs/no-cover-img.jpg",
+				coverFocalX: item.cover_src ? (item.cover_focal_x ?? 0.5) : 0.5,
+				coverFocalY: item.cover_src ? (item.cover_focal_y ?? 0.5) : 0.5,
 				name: item.name,
 				slug: item.slug,
 			}))
@@ -592,6 +591,8 @@ async function loadCampaigns(page = 1) {
 				type: item.type?.name,
 				typeId: item.type?.id,
 				cover: item.cover_src || item.game?.url_cover_src || item.game?.url_banner_src || "/imgs/no-cover-img.jpg",
+				coverFocalX: item.cover_src ? (item.cover_focal_x ?? 0.5) : 0.5,
+				coverFocalY: item.cover_src ? (item.cover_focal_y ?? 0.5) : 0.5,
 				text: item.name,
 				time: item.time_to_expire ? item.time_to_expire.split(":")[0] : "0",
 				slug: item.slug,

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

@@ -8,6 +8,7 @@ import {
 	fetchKeyRegions,
 	fetchAvailableOptions,
 	requestKey,
+	enableKeyCampaignNotifications,
 } from "../../services/campaignService"
 
 const route = useRoute()
@@ -37,6 +38,7 @@ const selectedPlatformId = ref<number | null>(null)
 const selectedRegionId = ref<number | null>(null)
 const description = ref("")
 const quantity = ref<number | null>(1)
+const notifyKeyCampaigns = ref(true)
 
 const maxKeysForUser = computed(() => campaign.value?.max_keys_for_user ?? 1)
 
@@ -137,6 +139,12 @@ async function submit() {
 			quantity_keys: Number(quantity.value) || 1,
 		})
 		const created = response?.data?.data ?? response?.data ?? {}
+
+		if (notifyKeyCampaigns.value) {
+			// Fire-and-forget — never block the request/reveal flow on this.
+			enableKeyCampaignNotifications().catch(() => {})
+		}
+
 		// requires_approval=false campaigns (or Pro/Business TV subscribers) get
 		// auto-approved by the backend observer synchronously — status 3 already
 		// reflects that by the time this response comes back, so skip the
@@ -281,6 +289,13 @@ function goBack() {
 									rows="3"
 								/>
 							</div>
+
+							<div class="form-row form-row--checkbox">
+								<label class="checkbox-label">
+									<input type="checkbox" v-model="notifyKeyCampaigns" />
+									{{ $t("keys.campaigns.notify_opt_in") }}
+								</label>
+							</div>
 						</div>
 					</div>
 
@@ -445,6 +460,27 @@ function goBack() {
 		color: var(--card-article-title);
 	}
 
+	.form-row--checkbox {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 13px;
+		color: var(--card-article-title);
+		cursor: pointer;
+
+		input[type="checkbox"] {
+			width: 16px;
+			height: 16px;
+			accent-color: var(--key-accent, var(--primary, #D297FF));
+			cursor: pointer;
+		}
+	}
+
 	.select, .input, .textarea {
 		width: 100%;
 		background-color: transparent;