@mundogamernetwork/shared-ui 1.1.77 → 1.1.79

package/package.json

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

package/pages/key-campaigns/[slug].vue

@@ -10,7 +10,7 @@ import {
 	revealKey,
 	requestKey,
 } from "../../services/campaignService"
-import { fetchDetailGameImage, fetchDetailGameVideo } from "../../services/gamesService"
+import { fetchDetailGameImage } from "../../services/gamesService"
 
 // Injected by each front — provide in app.vue / a plugin
 const mgPlatform = inject<string>("mgPlatform", "MGTV")
@@ -115,29 +115,22 @@ const { data: redeemedUsers } = await useAsyncData(
 // ------------------------------------------------------------------
 // Game gallery (images/videos)
 // ------------------------------------------------------------------
+// Videos are already embedded in the campaign payload (YouTube IDs need no
+// CDN prefix). Screenshots come from the dedicated games endpoint instead —
+// the campaign payload's embedded game.images filenames aren't CDN-resolved,
+// unlike this endpoint's response (same one tv-frontend's production
+// gameDetails.ts already relies on).
+const gameDetailsVideos = computed(() => campaign.value?.game_videos || [])
+
 const { data: gameDetailsImages } = await useAsyncData(
 	`campaign-game-images-${slug}`,
 	async () => {
-		if (!campaign.value?.game_slug) return null
+		if (!campaign.value?.game_slug) return []
 		try {
 			const response = await fetchDetailGameImage(locale.value, campaign.value.game_slug)
-			return response.data.data || null
-		} catch {
-			return null
-		}
-	},
-	{ watch: [campaign] },
-)
-
-const { data: gameDetailsVideos } = await useAsyncData(
-	`campaign-game-videos-${slug}`,
-	async () => {
-		if (!campaign.value?.game_slug) return null
-		try {
-			const response = await fetchDetailGameVideo(locale.value, campaign.value.game_slug)
-			return response.data.data || null
+			return response.data.data || []
 		} catch {
-			return null
+			return []
 		}
 	},
 	{ watch: [campaign] },
@@ -640,10 +633,10 @@ onMounted(async () => {
 										v-for="(video, index) in gameDetailsVideos.slice(0, 1)"
 										:key="'video-' + index"
 										class="video-thumbnail"
-										@click="openVideoPlayer('https://www.youtube.com/embed/' + video.url_youtube)"
+										@click="openVideoPlayer('https://www.youtube.com/embed/' + video.external_id)"
 									>
 										<img
-											:src="'https://img.youtube.com/vi/' + video.url_youtube + '/hqdefault.jpg'"
+											:src="'https://img.youtube.com/vi/' + video.external_id + '/hqdefault.jpg'"
 											:alt="$t('common.video_thumbnail')"
 										/>
 										<div class="play-icon">

package/services/campaignService.ts

@@ -282,6 +282,7 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		available_at_for_user: k.available_at_for_user ?? null,
 		max_keys_for_user: k.max_keys_for_user ?? 1,
 		game_summary: k.game?.summary,
+		game_videos: (k.game?.videos || []) as Array<{ external_id: string; name?: string }>,
 		request_id: k.requests?.[0]?.id,
 		request_item_id: k.requests?.[0]?.key_item_id,
 		request_admin_notes: k.requests?.[0]?.admin_notes ?? null,

package/services/gamesService.ts

@@ -1,7 +1,10 @@
 import axios, { type AxiosInstance } from "axios"
 
-// Game catalog service (images, videos, summary) shared across the network.
-// Mirrors tv-frontend's services/games/gameDetails.ts pattern.
+// Game catalog service (screenshots with CDN-resolved URLs) shared across the
+// network. The keys/campaign API embeds raw game.images filenames without the
+// CDN prefix, so screenshots must come from this dedicated endpoint instead
+// (same one tv-frontend's services/games/gameDetails.ts already calls in
+// production — mirrors that pattern rather than reinventing it).
 
 let _client: AxiosInstance | null = null
 
@@ -10,9 +13,9 @@ function getClient(): AxiosInstance {
 
 	const baseURL =
 		import.meta.env.VITE_BASE_URL_COMMUNITY ||
+		import.meta.env.VITE_API_BASE_URL ||
 		import.meta.env.VITE_CAMPAIGN_API_URL ||
 		import.meta.env.VITE_BASE_URL_NETWORK ||
-		import.meta.env.VITE_API_BASE_URL ||
 		""
 
 	_client = axios.create({ baseURL, withCredentials: true })
@@ -41,12 +44,5 @@ export interface GameImage {
 	url_image_src: string
 }
 
-export interface GameVideo {
-	url_youtube: string
-}
-
 export const fetchDetailGameImage = (lang: string, slug: string) =>
 	client.get<{ data: GameImage[] }>(`/${lang}/games/details/${slug}/images`)
-
-export const fetchDetailGameVideo = (lang: string, slug: string) =>
-	client.get<{ data: GameVideo[] }>(`/${lang}/games/details/${slug}/videos`)