@mundogamernetwork/shared-ui 1.1.78 → 1.1.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.1.78",
+  "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,6 +10,7 @@ import {
 	revealKey,
 	requestKey,
 } from "../../services/campaignService"
+import { fetchDetailGameImage } from "../../services/gamesService"
 
 // Injected by each front — provide in app.vue / a plugin
 const mgPlatform = inject<string>("mgPlatform", "MGTV")
@@ -112,11 +113,29 @@ const { data: redeemedUsers } = await useAsyncData(
 )
 
 // ------------------------------------------------------------------
-// Game gallery (images/videos) — already embedded in the campaign payload
+// Game gallery (images/videos)
 // ------------------------------------------------------------------
-const gameDetailsImages = computed(() => campaign.value?.game_images || [])
+// 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 []
+		try {
+			const response = await fetchDetailGameImage(locale.value, campaign.value.game_slug)
+			return response.data.data || []
+		} catch {
+			return []
+		}
+	},
+	{ watch: [campaign] },
+)
+
 const showVideoModal = ref(false)
 const selectedVideoUrl = ref("")
 const showImageModal = ref(false)

package/services/campaignService.ts

@@ -282,7 +282,6 @@ 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_images: (k.game?.images || []) as Array<{ url_image_src: string }>,
 		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,

package/services/gamesService.ts

@@ -0,0 +1,48 @@
+import axios, { type AxiosInstance } from "axios"
+
+// 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
+
+function getClient(): AxiosInstance {
+	if (_client) return _client
+
+	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 ||
+		""
+
+	_client = axios.create({ baseURL, withCredentials: true })
+
+	_client.interceptors.request.use((config) => {
+		if (
+			import.meta.env.VITE_APP_ENV !== "production" &&
+			typeof window !== "undefined" &&
+			import.meta.env.VITE_BEARER_TOKEN
+		) {
+			config.headers.Authorization = `Bearer ${import.meta.env.VITE_BEARER_TOKEN}`
+		}
+		return config
+	})
+
+	return _client
+}
+
+const client = new Proxy({} as AxiosInstance, {
+	get(_t, prop) {
+		return (getClient() as any)[prop]
+	},
+})
+
+export interface GameImage {
+	url_image_src: string
+}
+
+export const fetchDetailGameImage = (lang: string, slug: string) =>
+	client.get<{ data: GameImage[] }>(`/${lang}/games/details/${slug}/images`)