@mundogamernetwork/shared-ui 1.1.76 → 1.1.78

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.78",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

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

@@ -111,6 +111,34 @@ const { data: redeemedUsers } = await useAsyncData(
 	{ watch: [campaign] },
 )
 
+// ------------------------------------------------------------------
+// Game gallery (images/videos) — already embedded in the campaign payload
+// ------------------------------------------------------------------
+const gameDetailsImages = computed(() => campaign.value?.game_images || [])
+const gameDetailsVideos = computed(() => campaign.value?.game_videos || [])
+
+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 +598,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.external_id)"
+									>
+										<img
+											:src="'https://img.youtube.com/vi/' + video.external_id + '/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 +1027,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/campaignService.ts

@@ -282,6 +282,8 @@ 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,
 		request_admin_notes: k.requests?.[0]?.admin_notes ?? null,