@mundogamernetwork/shared-ui 1.1.76 → 1.1.77

package/locales/de.json

@@ -133,7 +133,9 @@
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
         "no_data": "Campaign not found",
-        "title": "Kampagne"
+        "title": "Kampagne",
+        "about": "Über das Spiel",
+        "screenshot_alt": "Spiel-Screenshot"
       },
       "other_campaigns": "Andere Kampagnen",
       "available": "verfügbar",
@@ -191,5 +193,9 @@
       "success_message": "Your material was sent for review. Thank you!",
       "success_close": "Close"
     }
+  },
+  "common": {
+    "video_thumbnail": "Video-Vorschaubild",
+    "expanded_image": "Vergrößertes Bild"
   }
 }

package/locales/en.json

@@ -133,7 +133,9 @@
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
         "no_data": "Campaign not found",
-        "title": "Campaign"
+        "title": "Campaign",
+        "about": "About the game",
+        "screenshot_alt": "Game screenshot"
       },
       "other_campaigns": "Other campaigns",
       "available": "available",
@@ -191,5 +193,9 @@
       "success_message": "Your material was sent for review. Thank you!",
       "success_close": "Close"
     }
+  },
+  "common": {
+    "video_thumbnail": "Video thumbnail",
+    "expanded_image": "Expanded image"
   }
 }

package/locales/pt-BR.json

@@ -133,7 +133,9 @@
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
         "no_data": "Campaign not found",
-        "title": "Campanha"
+        "title": "Campanha",
+        "about": "Sobre o jogo",
+        "screenshot_alt": "Captura de tela do jogo"
       },
       "other_campaigns": "Outras campanhas",
       "available": "disponível",
@@ -191,5 +193,9 @@
       "success_message": "Your material was sent for review. Thank you!",
       "success_close": "Close"
     }
+  },
+  "common": {
+    "video_thumbnail": "Miniatura do vídeo",
+    "expanded_image": "Imagem ampliada"
   }
 }

package/locales/ro.json

@@ -133,7 +133,9 @@
         "who_redeem": "Who redeemed",
         "created_by": "Published by",
         "no_data": "Campaign not found",
-        "title": "Campanie"
+        "title": "Campanie",
+        "about": "Despre joc",
+        "screenshot_alt": "Captură de ecran a jocului"
       },
       "other_campaigns": "Alte campanii",
       "available": "disponibil",
@@ -191,5 +193,9 @@
       "success_message": "Your material was sent for review. Thank you!",
       "success_close": "Close"
     }
+  },
+  "common": {
+    "video_thumbnail": "Miniatură video",
+    "expanded_image": "Imagine mărită"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.1.76",
+  "version": "1.1.77",
   "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, fetchDetailGameVideo } from "../../services/gamesService"
 
 // Injected by each front — provide in app.vue / a plugin
 const mgPlatform = inject<string>("mgPlatform", "MGTV")
@@ -111,6 +112,59 @@ const { data: redeemedUsers } = await useAsyncData(
 	{ watch: [campaign] },
 )
 
+// ------------------------------------------------------------------
+// Game gallery (images/videos)
+// ------------------------------------------------------------------
+const { data: gameDetailsImages } = await useAsyncData(
+	`campaign-game-images-${slug}`,
+	async () => {
+		if (!campaign.value?.game_slug) return null
+		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
+		} catch {
+			return null
+		}
+	},
+	{ watch: [campaign] },
+)
+
+const showVideoModal = ref(false)
+const selectedVideoUrl = ref("")
+const showImageModal = ref(false)
+const selectedImageUrl = ref("")
+
+const openVideoPlayer = (videoUrl: string) => {
+	selectedVideoUrl.value = videoUrl
+	showVideoModal.value = true
+}
+
+const openImagePreview = (imageUrl: string) => {
+	selectedImageUrl.value = imageUrl
+	showImageModal.value = true
+}
+
+const closeMediaModal = () => {
+	showVideoModal.value = false
+	showImageModal.value = false
+	selectedVideoUrl.value = ""
+	selectedImageUrl.value = ""
+}
+
 // ------------------------------------------------------------------
 // Countdown
 // ------------------------------------------------------------------
@@ -570,6 +624,73 @@ onMounted(async () => {
 									<span>{{ $t("keys.campaigns.campaign.no_data") }}</span>
 								</div>
 							</div>
+
+							<div class="gallery" v-if="(gameDetailsImages && gameDetailsImages.length) || (gameDetailsVideos && gameDetailsVideos.length)">
+								<template v-if="gameDetailsVideos && gameDetailsVideos.length > 0">
+									<div
+										v-if="gameDetailsImages"
+										v-for="(image, index) in gameDetailsImages.slice(0, 3)"
+										:key="'image-' + index"
+										class="image-thumbnail"
+										@click="openImagePreview('https:' + image.url_image_src)"
+									>
+										<img :src="'https:' + image.url_image_src" :alt="$t('keys.campaigns.campaign.screenshot_alt')" />
+									</div>
+									<div
+										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)"
+									>
+										<img
+											:src="'https://img.youtube.com/vi/' + video.url_youtube + '/hqdefault.jpg'"
+											:alt="$t('common.video_thumbnail')"
+										/>
+										<div class="play-icon">
+											<MGIcon size="2x" icon="youtube" />
+										</div>
+									</div>
+								</template>
+
+								<template v-else-if="gameDetailsImages && gameDetailsImages.length > 0">
+									<div
+										v-for="(image, index) in gameDetailsImages.slice(0, 4)"
+										:key="'image-' + index"
+										class="image-thumbnail"
+										@click="openImagePreview('https:' + image.url_image_src)"
+									>
+										<img :src="'https:' + image.url_image_src" :alt="$t('keys.campaigns.campaign.screenshot_alt')" />
+									</div>
+								</template>
+							</div>
+
+							<div class="media-modal" v-if="showVideoModal" @click.self="closeMediaModal">
+								<div class="media-modal-content">
+									<button class="close-button" @click="closeMediaModal">
+										<MGIcon size="1x" icon="close" />
+									</button>
+									<iframe
+										:src="selectedVideoUrl"
+										frameborder="0"
+										allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+										allowfullscreen
+									></iframe>
+								</div>
+							</div>
+
+							<div class="media-modal" v-if="showImageModal" @click.self="closeMediaModal">
+								<div class="media-modal-content">
+									<button class="close-button" @click="closeMediaModal">
+										<MGIcon size="1x" icon="close" />
+									</button>
+									<img :src="selectedImageUrl" :alt="$t('common.expanded_image')" class="expanded-image" />
+								</div>
+							</div>
+
+							<div class="game-summary" v-if="campaign?.game_summary">
+								<div class="title">{{ $t("keys.campaigns.campaign.about") }}</div>
+								<div class="description" v-html="campaign.game_summary"></div>
+							</div>
 						</div>
 					</div>
 
@@ -932,6 +1053,71 @@ onMounted(async () => {
 							span { color: var(--card-article-title); }
 						}
 					}
+
+					.gallery {
+						display: grid;
+						grid-template-columns: repeat(4, 1fr);
+						gap: 8px;
+
+						.image-thumbnail, .video-thumbnail {
+							position: relative;
+							aspect-ratio: 16 / 9;
+							overflow: hidden;
+							cursor: pointer;
+							background-color: var(--button-secondary-default-bg);
+							img { width: 100%; height: 100%; object-fit: cover; }
+						}
+
+						.video-thumbnail {
+							.play-icon {
+								position: absolute;
+								inset: 0;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								color: #fff;
+								background: var(--overlay-dark, rgba(0, 0, 0, 0.45));
+							}
+						}
+					}
+
+					.media-modal {
+						position: fixed;
+						inset: 0;
+						z-index: 1000;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						background: var(--overlay-dark-strong, rgba(0, 0, 0, 0.75));
+
+						.media-modal-content {
+							position: relative;
+							max-width: 90vw;
+							max-height: 90vh;
+
+							iframe { width: 80vw; height: 45vw; max-height: 80vh; border: none; }
+							.expanded-image { max-width: 90vw; max-height: 90vh; object-fit: contain; }
+
+							.close-button {
+								position: absolute;
+								top: -40px;
+								right: 0;
+								background: transparent;
+								border: none;
+								color: #fff;
+								cursor: pointer;
+							}
+						}
+					}
+
+					.game-summary {
+						display: flex;
+						flex-direction: column;
+						gap: 8px;
+
+						.title { font-size: 14px; font-weight: 600; color: var(--card-article-title); }
+						.description { font-size: 13px; line-height: 1.6; color: var(--secondary-info-fg); }
+					}
 				}
 			}
 

package/services/gamesService.ts

@@ -0,0 +1,52 @@
+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.
+
+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_CAMPAIGN_API_URL ||
+		import.meta.env.VITE_BASE_URL_NETWORK ||
+		import.meta.env.VITE_API_BASE_URL ||
+		""
+
+	_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 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`)