@mundogamernetwork/shared-ui 1.4.2 → 1.5.0

package/components/playtest/video/VideoPlaytestCapture.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+// Tester-facing capture step for the "Video Playtest" category — record,
+// upload, optionally drop timestamped markers, then submit. Mounted by
+// PlaytestResponseFlow.vue as the video_playtest category branch.
+import { ref, computed } from "vue";
+import { usePlaytestVideoRecording } from "../../../composables/usePlaytestVideoRecording";
+
+const props = defineProps<{
+	campaignId: number;
+}>();
+
+const emit = defineEmits<{
+	(e: "submitted"): void;
+}>();
+
+const rec = usePlaytestVideoRecording(props.campaignId);
+
+const markerDraft = ref("");
+const step = computed<"record" | "review" | "upload" | "done">(() => {
+	if (rec.recordedBlob.value && !rec.recordingId.value) return "review";
+	if (rec.recordingId.value) return "upload";
+	return "record";
+});
+
+function addMarker() {
+	if (!markerDraft.value.trim()) return;
+	rec.markNow(markerDraft.value.trim());
+	markerDraft.value = "";
+}
+
+async function submit() {
+	const result = await rec.submitVideoResponse();
+	if (result) emit("submitted");
+}
+
+function formatSeconds(s: number): string {
+	const m = Math.floor(s / 60);
+	const sec = s % 60;
+	return `${m}:${sec.toString().padStart(2, "0")}`;
+}
+</script>
+
+<template>
+	<div class="video-capture">
+		<p v-if="rec.genericError.value" class="video-capture__error">{{ rec.genericError.value }}</p>
+
+		<!-- Record -->
+		<template v-if="step === 'record'">
+			<p class="video-capture__hint">
+				{{ $t("playtest.video_capture.hint", "Record your screen while you play. You can drop timestamped notes as you go.") }}
+			</p>
+
+			<div v-if="!rec.capturing.value" class="video-capture__actions">
+				<button type="button" class="btn primary" @click="rec.startCapture">
+					{{ $t("playtest.video_capture.start", "Start recording") }}
+				</button>
+			</div>
+
+			<div v-else class="video-capture__recording">
+				<span class="video-capture__rec-dot" />
+				{{ $t("playtest.video_capture.recording", "Recording…") }}
+
+				<div class="video-capture__marker-form">
+					<input
+						v-model="markerDraft"
+						type="text"
+						:placeholder="$t('playtest.video_capture.marker_placeholder', 'Note something at this moment…')"
+						@keyup.enter="addMarker"
+					/>
+					<button type="button" class="btn" @click="addMarker">
+						{{ $t("playtest.video_capture.mark", "Mark") }}
+					</button>
+				</div>
+
+				<ul v-if="rec.markers.value.length" class="video-capture__marker-list">
+					<li v-for="(m, i) in rec.markers.value" :key="i">
+						<strong>{{ formatSeconds(m.timestamp_seconds) }}</strong> — {{ m.comment }}
+					</li>
+				</ul>
+
+				<button type="button" class="btn danger" @click="rec.stopCapture">
+					{{ $t("playtest.video_capture.stop", "Stop recording") }}
+				</button>
+			</div>
+		</template>
+
+		<!-- Review before upload -->
+		<template v-else-if="step === 'review'">
+			<p class="video-capture__hint">
+				{{ $t("playtest.video_capture.review_hint", "Recording captured ({v}). Upload it to submit your response.", { v: formatSeconds(rec.recordedDurationSeconds.value) }) }}
+			</p>
+			<button type="button" class="btn primary" :disabled="rec.uploading.value" @click="rec.uploadRecording">
+				{{ rec.uploading.value
+					? $t("playtest.video_capture.uploading", "Uploading… {v}%", { v: rec.uploadProgress.value })
+					: $t("playtest.video_capture.upload", "Upload recording") }}
+			</button>
+		</template>
+
+		<!-- Upload done, waiting on provider processing — submit -->
+		<template v-else-if="step === 'upload'">
+			<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>
+			<button type="button" class="btn primary" :disabled="rec.submitting.value" @click="submit">
+				{{ rec.submitting.value
+					? $t("playtest.video_capture.submitting", "Submitting…")
+					: $t("playtest.video_capture.submit", "Submit response") }}
+			</button>
+		</template>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.video-capture {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+
+	&__hint {
+		font-size: 13px;
+		color: var(--secondary-info-fg, #aaa);
+		margin: 0;
+	}
+
+	&__error {
+		font-size: 12px;
+		color: var(--danger, #e53935);
+		margin: 0;
+	}
+
+	&__actions {
+		display: flex;
+	}
+
+	&__recording {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		align-items: flex-start;
+		font-size: 13px;
+		color: var(--card-article-title, #fff);
+	}
+
+	&__rec-dot {
+		display: inline-block;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: var(--danger, #e53935);
+		margin-right: 6px;
+		animation: video-capture-pulse 1.2s ease-in-out infinite;
+	}
+
+	&__marker-form {
+		display: flex;
+		gap: 8px;
+		width: 100%;
+
+		input {
+			flex: 1;
+			height: 40px;
+			padding: 0 10px;
+			background: transparent;
+			border: 1px solid var(--bg-app-badge);
+			color: var(--card-article-title, #fff);
+			font-size: 13px;
+		}
+	}
+
+	&__marker-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		strong {
+			color: var(--primary, #d297ff);
+		}
+	}
+}
+
+.btn.danger {
+	background: var(--danger, #e53935);
+	color: #fff;
+}
+
+@keyframes video-capture-pulse {
+	0%, 100% { opacity: 1; }
+	50% { opacity: 0.3; }
+}
+</style>

package/components/ui/MgPaymentMethods.vue

@@ -119,6 +119,26 @@
 			/>
 		</svg>
 	</div>
+	<div v-if="method === 4">
+		<svg width="52" height="18" viewBox="0 0 52 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M9.5 2.2L11.8 4.5C12.5 5.2 12.5 6.3 11.8 7L9.5 9.3C8.8 10 7.7 10 7 9.3L4.7 7C4 6.3 4 5.2 4.7 4.5L7 2.2C7.7 1.5 8.8 1.5 9.5 2.2Z"
+				:fill="theme === 'dark' ? 'white' : '#32BCAD'"
+			/>
+			<path
+				d="M9.5 8.7L11.8 11C12.5 11.7 12.5 12.8 11.8 13.5L9.5 15.8C8.8 16.5 7.7 16.5 7 15.8L4.7 13.5C4 12.8 4 11.7 4.7 11L7 8.7C7.7 8 8.8 8 9.5 8.7Z"
+				:fill="theme === 'dark' ? 'white' : '#32BCAD'"
+			/>
+			<text
+				x="17"
+				y="13.5"
+				font-family="Arial, Helvetica, sans-serif"
+				font-size="13"
+				font-weight="700"
+				:fill="theme === 'dark' ? 'white' : '#111827'"
+			>Pix</text>
+		</svg>
+	</div>
 </template>
 <script setup lang="ts">
 const props = defineProps({

package/composables/usePaymentMethods.ts

@@ -9,40 +9,71 @@ export interface PaymentMethod {
 /**
  * Payment gateways shown in the checkout UI.
  *
- * These are FIXED to PayPal + Stripe — the only gateways live across the
- * ecosystem. We do NOT read the `payment_methods` table: that table holds
- * generic legacy methods (Cash, Credit Card, Transfer, Bitcoin...) and has no
- * notion of PayPal/Stripe.
+ * These are FIXED across the ecosystem — we do NOT read the
+ * `payment_methods` table: that table holds generic legacy methods (Cash,
+ * Credit Card, Transfer, Bitcoin...) and has no notion of PayPal/Stripe/Pix.
  *
  * The actual gateway *account* (which api_credential to charge) is resolved by
  * the backend at checkout time, honouring the existing active / default /
  * production flags on `api_credentials`. That lets admins switch accounts
  * without any frontend change. The frontend only sends
- * `payment_gateway: 'paypal' | 'stripe'`.
+ * `payment_gateway: 'paypal' | 'stripe' | 'pix'`.
  *
- * The numeric `id` here (PayPal = 2, Stripe = 3) is the convention used by
- * <MgPaymentMethods> to pick which inline SVG logo to render. It is unrelated
- * to the payment_methods table ids and to api ids (PayPal = 4, Stripe = 5).
+ * The numeric `id` here (PayPal = 2, Stripe = 3, Pix = 4) is the convention
+ * used by <MgPaymentMethods> to pick which inline SVG logo to render. It is
+ * unrelated to the payment_methods table ids and to api ids.
  */
-const GATEWAYS: PaymentMethod[] = [
+const ALL_GATEWAYS: PaymentMethod[] = [
   { id: 2, name: "paypal" },
   { id: 3, name: "stripe" },
+  { id: 4, name: "pix" },
 ];
 
+/**
+ * Emergency/operational kill-switch: pulling a gateway from every checkout
+ * across the whole ecosystem is a name added here (ecosystem-wide default,
+ * requires bump + republish) or via a consuming app's
+ * NUXT_PUBLIC_DISABLED_PAYMENT_GATEWAYS runtime config (e.g. a provider
+ * outage), no per-app code change needed either way.
+ */
+const DISABLED_BY_DEFAULT: string[] = [];
+
+function disabledGatewayNames(): string[] {
+  let fromRuntimeConfig: string[] = [];
+  try {
+    // useRuntimeConfig is auto-imported by Nuxt; guarded for non-Nuxt/test contexts.
+    const raw = useRuntimeConfig?.()?.public?.disabledPaymentGateways;
+    if (Array.isArray(raw)) {
+      fromRuntimeConfig = raw;
+    } else if (typeof raw === "string" && raw.length) {
+      fromRuntimeConfig = raw.split(",").map((n) => n.trim());
+    }
+  } catch {
+    // Not inside a Nuxt context (e.g. unit test) — fall back to the default list.
+  }
+
+  return [...DISABLED_BY_DEFAULT, ...fromRuntimeConfig].map((n) => n.toLowerCase());
+}
+
+function enabledGateways(): PaymentMethod[] {
+  const disabled = disabledGatewayNames();
+  return ALL_GATEWAYS.filter((g) => !disabled.includes(g.name));
+}
+
 export function usePaymentMethods(_httpService?: AxiosInstance) {
-  const methods = ref<PaymentMethod[]>([...GATEWAYS]);
+  const methods = ref<PaymentMethod[]>(enabledGateways());
   const selectedMethod = ref<string>("");
   const loading = ref(false);
   const error = ref<string | null>(null);
 
   // No HTTP call. Kept async + the context arg for call-site compatibility.
   async function fetchMethods(_context: "checkout" | "subscription" = "checkout") {
-    methods.value = [...GATEWAYS];
+    methods.value = enabledGateways();
   }
 
   const isStripe = computed(() => selectedMethod.value.toLowerCase() === "stripe");
   const isPaypal = computed(() => selectedMethod.value.toLowerCase() === "paypal");
-  const isPix = computed(() => false); // Pix not enabled yet
+  const isPix = computed(() => selectedMethod.value.toLowerCase() === "pix");
 
   function selectMethod(name: string) {
     selectedMethod.value = name.toLowerCase();

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/package.json

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