@mundogamernetwork/shared-ui 1.11.1 → 1.11.3

package/components/PressKit/VideoPlayer.vue

@@ -4,6 +4,7 @@ interface Video {
 	title: string;
 	url: string;
 	type?: string;
+	thumbnail_url?: string;
 	is_primary?: boolean;
 	sort_order?: number;
 }
@@ -14,21 +15,27 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const activeVideo = ref<Video | null>(null);
-
-onMounted(() => {
-	const primary = props.videos.find(v => v.is_primary);
-	activeVideo.value = primary || props.videos[0] || null;
-});
+// Initialize synchronously so direct public-page loads also have a player
+// during SSR, instead of waiting for client hydration.
+const selectedVideoId = ref<number | null>(
+	(props.videos.find(v => v.is_primary) || props.videos[0])?.id ?? null,
+);
+const activeVideo = computed(() =>
+	props.videos.find(v => v.id === selectedVideoId.value) || props.videos[0] || null,
+);
 
 function getEmbedUrl(url: string) {
-	const ytMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/);
+	const ytMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{11})/);
 	if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`;
 	const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
 	if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
 	return url;
 }
 
+function isDirectVideo(url: string) {
+	return /\.(mp4|webm|ogg)(?:[?#].*)?$/i.test(url);
+}
+
 function formatType(type?: string) {
 	if (!type) return '';
 	return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
@@ -40,7 +47,9 @@ function formatType(type?: string) {
 		<h3 class="section-title">{{ $t('press_kit.videos') }}</h3>
 
 		<div v-if="activeVideo" class="video-embed">
+			<video v-if="isDirectVideo(activeVideo.url)" :src="activeVideo.url" :poster="activeVideo.thumbnail_url || undefined" controls preload="metadata" />
 			<iframe
+				v-else
 				:src="getEmbedUrl(activeVideo.url)"
 				frameborder="0"
 				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -53,7 +62,7 @@ function formatType(type?: string) {
 				v-for="video in videos"
 				:key="video.id"
 				:class="['video-item', { active: activeVideo?.id === video.id }]"
-				@click="activeVideo = video"
+				@click="selectedVideoId = video.id"
 			>
 				<MGIcon icon="videos" />
 				<div class="video-meta">
@@ -86,6 +95,12 @@ function formatType(type?: string) {
 			width: 100%;
 			height: 100%;
 		}
+
+		video {
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+		}
 	}
 
 	.video-list {

package/package.json

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

package/pages/key-campaigns/index.vue

@@ -313,8 +313,8 @@
 					</div>
 
 					<!-- Step 2: My requests -->
-					<div class="step-inside" v-if="currentStep === 2">
-						<div class="header">
+					<div class="step-inside requests-step" v-if="currentStep === 2">
+						<div class="header requests-toolbar">
 							<div class="header-left">
 								<button
 									class="btn tertiary"
@@ -334,12 +334,16 @@
 								</button>
 							</div>
 							<div class="bar">
-								<input
-									type="text"
-									v-model="searchTerm"
-									:placeholder="$t('keys.campaigns.search_placeholder')"
-								/>
-								<button type="button"><MGIcon icon="search" /></button>
+								<div class="search-box">
+									<input
+										type="text"
+										v-model="searchTerm"
+										:placeholder="$t('keys.campaigns.search_placeholder')"
+									/>
+									<button type="button" :aria-label="$t('keys.campaigns.search_placeholder')">
+										<MGIcon icon="search" />
+									</button>
+								</div>
 							</div>
 						</div>
 
@@ -369,31 +373,45 @@
 							<p v-if="calendarError" class="calendar-export__error">{{ calendarError }}</p>
 						</div>
 
-						<div class="cards mt-5">
+						<div class="cards request-cards">
 							<template v-if="loadingRequests">
-								<div class="card skeleton" v-for="n in 3" :key="n"></div>
+								<div class="card request-card skeleton" v-for="n in 3" :key="n"></div>
 							</template>
 							<template v-else>
-								<div class="card" v-for="card in filteredCards" :key="card.id">
+								<nuxt-link
+									class="card request-card"
+									v-for="card in filteredCards"
+									:key="card.id"
+									:to="`/${locale}/key-campaigns/${card.key.slug}`"
+								>
 									<div class="card-header">
-										<nuxt-link :to="`/${locale}/key-campaigns/${card.key.slug}`">
-											<div class="img-content">
-												<img :src="card.key.cover_src" :alt="card.key.name" />
+										<div class="img-content">
+											<img
+												:src="card.key.cover_src || '/imgs/no-cover-img.jpg'"
+												:alt="card.key.name"
+												@error="(e) => { (e.target as HTMLImageElement).src = '/imgs/no-cover-img.jpg' }"
+											/>
+											<div class="request-status" :style="{ '--request-status-color': card.color }">
+												<span class="request-status__dot"></span>
+												{{ $t(card.status) }}
 											</div>
-										</nuxt-link>
+										</div>
 									</div>
-									<div class="text">
-										{{ card.key.name }}
-										<div class="status">
-											<span :style="{ color: card.color }">◉</span>
-											{{ $t(card.status) }}
+									<div class="text request-card__body">
+										<div class="card-name">{{ card.key.game?.name || card.key.name }}</div>
+										<div v-if="card.key.game?.name && card.key.name !== card.key.game.name" class="request-card__campaign">
+											{{ card.key.name }}
+										</div>
+										<div class="request-card__footer">
+											<span v-if="card.key.type?.name" class="request-card__type">{{ card.key.type.name }}</span>
+											<MGIcon icon="chevron-right" />
 										</div>
 									</div>
-								</div>
+								</nuxt-link>
 							</template>
 						</div>
 
-						<div v-if="!loadingRequests && filteredCards.length === 0" class="d-flex flex-column align-items-center">
+						<div v-if="!loadingRequests && filteredCards.length === 0" class="requests-empty">
 							<div class="no-content"><MGIcon icon="eye-slash" /></div>
 							<h4>{{ $t("keys.campaigns.no_results") }}</h4>
 						</div>
@@ -920,12 +938,31 @@ onUnmounted(() => {
 		display: flex;
 		align-items: center;
 		flex-wrap: wrap;
-		gap: 8px;
-		margin-bottom: 16px;
+		gap: 10px;
+		margin: 0 0 28px;
+		padding: 16px 18px;
+		border: 1px solid var(--key-border, rgba(255, 255, 255, 0.1));
+		background: var(--body-bg-card, rgba(255, 255, 255, 0.035));
 
 		&__label {
+			margin-right: auto;
 			font-size: 13px;
-			opacity: 0.75;
+			font-weight: 500;
+			color: var(--secondary-info-fg);
+		}
+
+		.btn {
+			display: inline-flex;
+			align-items: center;
+			gap: 7px;
+			min-height: 38px;
+			border: 1px solid var(--key-border, rgba(255, 255, 255, 0.14));
+			background: var(--button-secondary-default-bg, #1e1e1e);
+
+			&:hover:not(:disabled) {
+				border-color: var(--key-accent, var(--primary, #D297FF));
+				color: var(--key-accent, var(--primary, #D297FF));
+			}
 		}
 
 		&__error {
@@ -937,6 +974,145 @@ onUnmounted(() => {
 		}
 	}
 
+	.requests-step {
+		.requests-toolbar {
+			margin: 18px 0;
+			padding: 14px !important;
+			border: 1px solid var(--key-border, rgba(255, 255, 255, 0.08));
+			background: var(--body-bg-card, rgba(255, 255, 255, 0.025));
+
+			.header-left {
+				flex-wrap: wrap;
+				gap: 8px !important;
+
+				button {
+					height: 38px !important;
+					padding-inline: 16px;
+					border: 1px solid transparent;
+				}
+			}
+
+			.search-box { width: min(320px, 100%); }
+		}
+
+		.request-cards {
+			display: grid !important;
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+			gap: 20px !important;
+			margin: 0 0 48px !important;
+		}
+
+		.request-card {
+			min-width: 0 !important;
+			max-width: none !important;
+			width: 100%;
+			color: inherit;
+			text-decoration: none;
+			border: 1px solid var(--key-border, rgba(255, 255, 255, 0.08)) !important;
+			overflow: hidden;
+
+			&:hover {
+				border-color: var(--key-accent, var(--primary, #D297FF)) !important;
+				transform: translateY(-4px);
+				box-shadow: 0 12px 30px var(--key-accent-shadow, rgba(107, 21, 172, 0.18));
+				text-decoration: none;
+			}
+
+			.card-header .img-content {
+				min-height: 168px !important;
+				max-height: 168px !important;
+
+				img {
+					width: 100% !important;
+					height: 168px !important;
+					object-fit: cover;
+				}
+
+				&::after {
+					content: "";
+					position: absolute;
+					inset: auto 0 0;
+					height: 55%;
+					background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
+					pointer-events: none;
+				}
+			}
+
+			&__body {
+				min-height: 132px !important;
+				gap: 7px !important;
+			}
+
+			&__campaign {
+				font-size: 12px;
+				font-weight: 400;
+				color: var(--secondary-info-fg);
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			&__footer {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 10px;
+				margin-top: auto;
+				padding-top: 12px;
+				border-top: 1px solid var(--key-border, rgba(255, 255, 255, 0.08));
+				color: var(--secondary-info-fg);
+
+				i { color: var(--key-accent, var(--primary, #D297FF)); }
+			}
+
+			&__type {
+				font-size: 11px;
+				font-weight: 600;
+				text-transform: uppercase;
+				letter-spacing: 0.04em;
+			}
+		}
+
+		.request-status {
+			position: absolute;
+			z-index: 2;
+			left: 12px;
+			bottom: 12px;
+			display: inline-flex;
+			align-items: center;
+			gap: 7px;
+			padding: 6px 9px;
+			background: rgba(8, 8, 10, 0.88);
+			border: 1px solid color-mix(in srgb, var(--request-status-color, #D297FF) 55%, transparent);
+			color: #fff;
+			font-size: 11px;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.03em;
+
+			&__dot {
+				width: 7px;
+				height: 7px;
+				border-radius: 50%;
+				background: var(--request-status-color, #D297FF);
+				box-shadow: 0 0 8px var(--request-status-color, #D297FF);
+			}
+		}
+
+		.requests-empty {
+			display: flex;
+			min-height: 280px;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			border: 1px dashed var(--key-border, rgba(255, 255, 255, 0.14));
+			background: var(--body-bg-card, rgba(255, 255, 255, 0.02));
+
+			.no-content { margin-top: 0 !important; }
+			h4 { margin: 0; font-size: 15px; }
+		}
+	}
+
 .spinner {
 	display: inline-block;
 	width: 20px;
@@ -1475,6 +1651,25 @@ onUnmounted(() => {
 	}
 
 	@media (max-width: 767px) {
+		.requests-step {
+			.requests-toolbar {
+				align-items: stretch !important;
+				padding: 12px !important;
+
+				.header-left { width: 100%; }
+				.bar, .search-box { width: 100% !important; }
+			}
+
+			.request-cards { grid-template-columns: 1fr; }
+		}
+
+		.calendar-export {
+			align-items: stretch;
+
+			&__label { flex-basis: 100%; margin-bottom: 4px; }
+			.btn { flex: 1; justify-content: center; }
+		}
+
 		.stepper-content .step-inside {
 			.header {
 				flex-direction: column;
@@ -1492,6 +1687,10 @@ onUnmounted(() => {
 			.slider-container .slide { height: auto; }
 		}
 	}
+
+	@media (min-width: 768px) and (max-width: 1023px) {
+		.requests-step .request-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+	}
 }
 </style>