From e0a38be3d603ab357ab7145c3e09a86b69df3ce4 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Wed, 5 Nov 2025 00:07:06 -0300
Subject: [PATCH 1/4] feat: render video by manifestUrl

---
 src/App.vue               |  17 ++-
 src/components/Player.vue | 272 +++++++++++++++++++++++++++++++++++---
 2 files changed, 271 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8836f26..a61aaf3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,23 @@
 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
 import Player from './components/Player.vue';
+
+const manifestUrl = ref<string | null>(null);
+const title = ref('Microfrontends');
+const subtitle = ref('Arquitetura do Futuro');
+const description = ref('Aprenda como construir aplicações escaláveis e modulares usando a arquitetura de microfrontends.');
+
+onMounted(() => {
+	const urlParams = new URLSearchParams(window.location.search);
+	const url = urlParams.get('manifestUrl');
+	if (url) {
+		manifestUrl.value = url;
+	}
+});
 </script>
 
 <template>
-	<Player videoUrl="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" title="Teste"
-		subtitle="E3 • Teste" description="Teste" />
+	<Player :manifestUrl="manifestUrl" :title="title" :subtitle="subtitle" :description="description" />
 </template>
 <style>
 @import "tailwindcss";
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 32e42e4..c7336cf 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref=containerRef class="relative w-full h-screen bg-black overflow-hidden group" @mousemove="handleMouseMove"
 		@mouseleave="handleMouseLeave" :class="showControls ? 'cursor-auto' : 'cursor-none'">
-		<video ref=videoRef :src=videoUrl class="w-full h-full object-contain cursor-pointer" @click="handleVideoClick"
+		<video ref=videoRef class="w-full h-full object-contain cursor-pointer" @click="handleVideoClick"
 			preload="metadata" />
 
 
@@ -95,7 +95,7 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import {
 	ArrowLeft,
 	Loader2,
@@ -111,20 +111,20 @@ import {
 import Slider from './Slider.vue';
 
 const props = defineProps<{
-	videoUrl: string;
+	manifestUrl: string | null;
 	title: string;
 	subtitle: string;
 	description?: string;
 }>();
 
-const { videoUrl, title, subtitle, description } = props;
+const { manifestUrl, title, subtitle, description } = props;
 
 const showControls = ref(true);
 const showDetails = ref(true);
 const currentTime = ref(0);
 const duration = ref(0);
 const isPlaying = ref(false);
-const isLoading = ref(true);
+const isLoading = ref(false);
 const isMuted = ref(false);
 const volume = ref(0.5);
 const playbackRate = ref(1);
@@ -133,6 +133,194 @@ const controlsTimeoutRef = ref<NodeJS.Timeout | null>(null);
 const videoRef = ref<HTMLVideoElement | null>(null);
 const containerRef = ref<HTMLElement | null>(null);
 
+// Chunk management state
+const PREFETCH_THRESHOLD = 10;
+let manifest: any = null;
+let chunkUrls: string[] = [];
+let currentChunkIndex = 0;
+let segmentSeconds = 0;
+let totalDuration = 0;
+let prefetchedBlobUrls: Record<number, string> = {};
+
+// Helper functions
+function toHttps(url: string): string {
+	if (!url) return '';
+	if (url.startsWith('https://') || url.startsWith('http://')) {
+		return url.replace(/^http:\/\//, 'https://');
+	}
+	return 'https://' + url;
+}
+
+function resetPlayer() {
+	// limpa blobs pré-carregados
+	for (const idx in prefetchedBlobUrls) {
+		try {
+			URL.revokeObjectURL(prefetchedBlobUrls[parseInt(idx)]);
+		} catch { 
+			// TODO:
+		}
+	}
+	prefetchedBlobUrls = {};
+
+	chunkUrls = [];
+	currentChunkIndex = 0;
+	segmentSeconds = 0;
+	totalDuration = 0;
+
+	const video = videoRef.value;
+	if (!video) return;
+
+	try {
+		video.pause();
+	} catch (e) { 
+		// TODO: 
+	}
+
+	video.removeAttribute('src');
+	video.load();
+	currentTime.value = 0;
+	duration.value = 0;
+	isLoading.value = false;
+}
+
+async function loadManifest(url: string) {
+	if (!url) return;
+
+	resetPlayer();
+	isLoading.value = true;
+
+	try {
+		const res = await fetch(url);
+		if (!res.ok) {
+			isLoading.value = false;
+			console.error('Erro loading manifest:', res.status);
+			return;
+		}
+
+		manifest = await res.json();
+
+		if (!manifest.chunkUrls || !manifest.chunkUrls.length) {
+			isLoading.value = false;
+			return;
+		}
+
+		const baseUrl = manifest.baseUrl ? toHttps(manifest.baseUrl) : '';
+		const rawChunks = manifest.chunkUrls;
+
+		chunkUrls = rawChunks.map((u: string) => {
+			if (u.startsWith('http://') || u.startsWith('https://')) {
+				return toHttps(u);
+			}
+			if (!u.startsWith('/') && u.includes('.cloudfront.net')) {
+				return toHttps(u);
+			}
+			if (baseUrl) {
+				const sep = baseUrl.endsWith('/') ? '' : '/';
+				return baseUrl + sep + u.replace(/^\//, '');
+			}
+			return toHttps(u);
+		});
+
+
+		segmentSeconds = manifest.segmentSeconds || 60;
+		totalDuration = segmentSeconds * chunkUrls.length;
+		duration.value = totalDuration;
+
+		loadChunk(0, 0);
+	} catch (e) {
+		isLoading.value = false;
+	}
+}
+
+function loadChunk(index: number, startAtSeconds: number = 0) {
+	if (!chunkUrls.length) return;
+	if (index < 0 || index >= chunkUrls.length) return;
+
+	const video = videoRef.value;
+	if (!video) return;
+
+	currentChunkIndex = index;
+
+	// se esse chunk já foi pré-carregado, usa o blob
+	const prefetchedUrl = prefetchedBlobUrls[index];
+	const url = prefetchedUrl || chunkUrls[index];
+
+	isLoading.value = true;
+
+	video.src = url;
+	video.load();
+
+	const onLoadedMetadata = () => {
+		video.removeEventListener('loadedmetadata', onLoadedMetadata);
+		if (startAtSeconds > 0 && !isNaN(video.duration)) {
+			video.currentTime = Math.min(startAtSeconds, video.duration);
+		}
+	};
+
+	const onPlaying = () => {
+		video.removeEventListener('playing', onPlaying);
+		isLoading.value = false;
+	};
+
+	const onError = () => {
+		video.removeEventListener('error', onError);
+		isLoading.value = false;
+	};
+
+	video.addEventListener('loadedmetadata', onLoadedMetadata);
+	video.addEventListener('playing', onPlaying);
+	video.addEventListener('error', onError);
+
+	video.play().catch((err) => {
+		console.error('Erro play video:', err);
+		isLoading.value = false;
+	});
+
+	// se usamos o blob pré-carregado, liberamos a referência do map
+	if (prefetchedUrl) {
+		delete prefetchedBlobUrls[index];
+	}
+}
+
+// Prefetch inteligente do próximo chunk
+function prefetchChunk(index: number) {
+	if (index <= currentChunkIndex) return;
+	if (index >= chunkUrls.length) return;
+	if (prefetchedBlobUrls[index]) return;
+
+	const url = chunkUrls[index];
+
+
+	fetch(url)
+		.then((res) => {
+			if (!res.ok) throw new Error('status ' + res.status);
+			return res.blob();
+		})
+		.then((blob) => {
+			const objUrl = URL.createObjectURL(blob);
+			prefetchedBlobUrls[index] = objUrl;
+		})
+		.catch((err) => {
+			console.error('Erro loading chunk', index, err);
+		});
+}
+
+function getGlobalCurrentTime(): number {
+	const video = videoRef.value;
+	if (!video) return 0;
+	return currentChunkIndex * segmentSeconds + (video.currentTime || 0);
+}
+
+function seekGlobal(targetSeconds: number) {
+	targetSeconds = Math.max(0, Math.min(targetSeconds, totalDuration));
+
+	const chunkIndex = Math.floor(targetSeconds / segmentSeconds);
+	const offsetInChunk = targetSeconds - chunkIndex * segmentSeconds;
+	const safeIndex = Math.min(chunkIndex, chunkUrls.length - 1);
+
+	loadChunk(safeIndex, offsetInChunk);
+}
+
 const handleBack = () => {
 	if ((window as any)?.shellNavigate) {
 		(window as any).shellNavigate("/catalog");
@@ -223,19 +411,17 @@ const formatTime = (time: number) => {
 };
 
 const skip = (seconds: number) => {
-	const video = videoRef.value;
-	if (!video) return;
-
-	video.currentTime = Math.max(0, Math.min(duration.value, video.currentTime + seconds));
+	if (!totalDuration) return;
+	const globalCurrent = getGlobalCurrentTime();
+	const target = Math.max(0, Math.min(totalDuration, globalCurrent + seconds));
+	seekGlobal(target);
 };
 
 
 const handleSeek = (value: number[]) => {
-	const video = videoRef.value;
-	if (!video) return;
-
-	video.currentTime = value[0];
-	currentTime.value = value[0];
+	if (!totalDuration || !segmentSeconds) return;
+	const targetGlobalTime = value[0];
+	seekGlobal(targetGlobalTime);
 };
 
 const handleVolumeChange = (value: number[]) => {
@@ -251,18 +437,50 @@ const handleVolumeChange = (value: number[]) => {
 const handleWaiting = () => isLoading.value = true;
 const handleCanPlay = () => isLoading.value = false;
 const handleLoadedMetadata = () => {
-	duration.value = videoRef.value?.duration || 0;
+	// Não atualizamos duration aqui quando usamos chunks, ele vem do totalDuration
+	if (!chunkUrls.length) {
+		duration.value = videoRef.value?.duration || 0;
+	}
 	isLoading.value = false;
 };
 
 const handleTimeUpdate = () => {
-	currentTime.value = videoRef.value?.currentTime || 0;
+	if (chunkUrls.length && segmentSeconds && totalDuration) {
+		// Usa tempo global quando há chunks
+		const globalCurrent = getGlobalCurrentTime();
+		currentTime.value = globalCurrent;
+		
+		// Prefetch do próximo chunk quando está próximo do fim
+		const video = videoRef.value;
+		if (video && !isNaN(video.currentTime)) {
+			const remainingInChunk = (video.duration && !isNaN(video.duration))
+				? (video.duration - video.currentTime)
+				: (segmentSeconds - (video.currentTime || 0));
+			
+			if (remainingInChunk < PREFETCH_THRESHOLD) {
+				const nextIndex = currentChunkIndex + 1;
+				prefetchChunk(nextIndex);
+			}
+		}
+	} else {
+		// Fallback para vídeo normal
+		currentTime.value = videoRef.value?.currentTime || 0;
+	}
 };
 
 const handleFullscreenChange = () => {
 	isFullscreen.value = !!document.fullscreenElement;
 };
 
+const handleChunkEndedRef = ref<(() => void) | null>(null);
+
+// Observa mudanças no manifestUrl
+watch(() => props.manifestUrl, (newUrl) => {
+	if (newUrl) {
+		loadManifest(newUrl);
+	}
+});
+
 onMounted(() => {
 	const video = videoRef.value;
 	if (!video) return;
@@ -271,8 +489,25 @@ onMounted(() => {
 	video.addEventListener('timeupdate', handleTimeUpdate);
 	video.addEventListener('waiting', handleWaiting);
 	video.addEventListener('canplay', handleCanPlay);
+	
+	// Quando um chunk termina, vai pro próximo automaticamente
+	const handleChunkEnded = () => {
+		const nextIndex = currentChunkIndex + 1;
+		if (nextIndex < chunkUrls.length) {
+			loadChunk(nextIndex, 0);
+		} else {
+			isPlaying.value = false;
+		}
+	};
+	handleChunkEndedRef.value = handleChunkEnded;
+	video.addEventListener('ended', handleChunkEnded);
 
 	document.addEventListener('fullscreenchange', handleFullscreenChange);
+
+	// Carrega o manifest se fornecido
+	if (manifestUrl) {
+		loadManifest(manifestUrl);
+	}
 });
 
 onUnmounted(() => {
@@ -282,8 +517,13 @@ onUnmounted(() => {
 	video.removeEventListener('timeupdate', handleTimeUpdate);
 	video.removeEventListener('waiting', handleWaiting);
 	video.removeEventListener('canplay', handleCanPlay);
+	if (handleChunkEndedRef.value) {
+		video.removeEventListener('ended', handleChunkEndedRef.value);
+	}
 
 	document.removeEventListener('fullscreenchange', handleFullscreenChange);
+	
+	resetPlayer();
 });
 
 </script>
\ No newline at end of file

From 47d1d34832f9a636acff48a429bcef12bbe79586 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Wed, 5 Nov 2025 01:07:16 -0300
Subject: [PATCH 2/4] chore: get duration from manifest

---
 src/components/Player.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index c7336cf..e88ac44 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -223,7 +223,11 @@ async function loadManifest(url: string) {
 
 
 		segmentSeconds = manifest.segmentSeconds || 60;
-		totalDuration = segmentSeconds * chunkUrls.length;
+		if (manifest.duration && typeof manifest.duration === 'number') {
+			totalDuration = manifest.duration;
+		} else {
+			totalDuration = segmentSeconds * chunkUrls.length;
+		}
 		duration.value = totalDuration;
 
 		loadChunk(0, 0);

From 4c904aa4f5a44f7f676a6bff001da3448b8a4438 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Wed, 5 Nov 2025 23:18:08 -0300
Subject: [PATCH 3/4] fix: handleBack and isPlaying state when onMounted

---
 src/components/Player.vue | 92 +++++++++++++++++++++++++++++----------
 1 file changed, 68 insertions(+), 24 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index e88ac44..d5bb099 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -9,29 +9,31 @@
 			<Loader2 class="w-16 h-16 text-white animate-spin" />
 		</div>
 
-		<div v-if="showDetails && !isPlaying && !isLoading"
-			class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent flex items-end pointer-events-none">
-			<div class="p-12 max-w-3xl">
-				<h1 class="text-5xl mb-4 text-white">{{ title }}</h1>
-				<p class="text-xl text-gray-300 mb-2">{{ subtitle }}</p>
-				<p v-if="description" class="text-gray-400 text-lg">{{ description }}</p>
+			<div v-if="showDetails && !isPlaying && !isLoading"
+		class="absolute inset-0 flex items-end pointer-events-none z-10">
+		<div class="w-full bg-gradient-to-t from-black/95 via-black/70 via-black/40 to-transparent pb-24 pt-32">
+			<div class="p-12 max-w-4xl">
+				<h1 class="text-5xl mb-4 text-white drop-shadow-lg">{{ title }}</h1>
+				<p class="text-xl text-gray-200 mb-2 drop-shadow-md">{{ subtitle }}</p>
+				<p v-if="description" class="text-gray-300 text-lg drop-shadow-md max-w-2xl">{{ description }}</p>
 			</div>
 		</div>
+	</div>
 
-		<div
-			:class="['absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-black/50 transition-opacity duration-300', showControls || !isPlaying ? 'opacity-100' : 'opacity-0']">
-			<div class="absolute top-0 left-0 right-0 p-6 flex items-center gap-4">
-				<button class="text-white hover:bg-white/20 p-2 rounded-full transition-colors" @click="handleBack">
-					<ArrowLeft class="w-6 h-6" />
-				</button>
-			</div>
+			<div
+		:class="['absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-black/50 transition-opacity duration-300 z-20', showControls || !isPlaying ? 'opacity-100' : 'opacity-0']">
+		<div class="absolute top-0 left-0 right-0 p-6 flex items-center gap-4 z-30">
+			<button class="text-white hover:bg-white/20 p-2 rounded-full transition-colors z-40 pointer-events-auto" @click.stop="handleBack">
+				<ArrowLeft class="w-6 h-6" />
+			</button>
+		</div>
 
-			<div v-if="!isPlaying && !isLoading" class="absolute inset-0 flex items-center justify-center">
-				<button @click="togglePlay"
-					class="bg-white/20 hover:bg-white/30 backdrop-blur-sm p-8 rounded-full transition-all">
-					<Play class="w-16 h-16 text-white fill-white" />
-				</button>
-			</div>
+		<div v-if="!isPlaying && !isLoading" class="absolute inset-0 flex items-center justify-center pointer-events-none z-25">
+			<button @click.stop="togglePlay"
+				class="bg-white/20 hover:bg-white/30 backdrop-blur-sm p-8 rounded-full transition-all pointer-events-auto">
+				<Play class="w-16 h-16 text-white fill-white" />
+			</button>
+		</div>
 
 			<div class="absolute bottom-0 left-0 right-0 p-6">
 				<div class="mb-4">
@@ -264,6 +266,13 @@ function loadChunk(index: number, startAtSeconds: number = 0) {
 	const onPlaying = () => {
 		video.removeEventListener('playing', onPlaying);
 		isLoading.value = false;
+		isPlaying.value = true;
+		showDetails.value = false;
+		setTimeout(() => {
+			if (isPlaying.value) {
+				showControls.value = false;
+			}
+		}, 2000);
 	};
 
 	const onError = () => {
@@ -325,11 +334,18 @@ function seekGlobal(targetSeconds: number) {
 	loadChunk(safeIndex, offsetInChunk);
 }
 
-const handleBack = () => {
-	if ((window as any)?.shellNavigate) {
-		(window as any).shellNavigate("/catalog");
-	}
-};
+	const handleBack = () => {
+		const video = videoRef.value;
+		if (video && !video.paused) {
+			video.pause();
+		}
+		
+		if ((window as any)?.shellNavigate) {
+			(window as any).shellNavigate("/catalog");
+		} else {
+			window.location.href = '/catalog';
+		}
+	};
 
 const handleMouseMove = () => {
 	showControls.value = true;
@@ -477,6 +493,8 @@ const handleFullscreenChange = () => {
 };
 
 const handleChunkEndedRef = ref<(() => void) | null>(null);
+const handleVideoPlayRef = ref<(() => void) | null>(null);
+const handleVideoPauseRef = ref<(() => void) | null>(null);
 
 // Observa mudanças no manifestUrl
 watch(() => props.manifestUrl, (newUrl) => {
@@ -494,6 +512,22 @@ onMounted(() => {
 	video.addEventListener('waiting', handleWaiting);
 	video.addEventListener('canplay', handleCanPlay);
 	
+	const handleVideoPlay = () => {
+		isPlaying.value = true;
+		showDetails.value = false;
+	};
+	
+	const handleVideoPause = () => {
+		isPlaying.value = false;
+		showDetails.value = true;
+	};
+	
+	handleVideoPlayRef.value = handleVideoPlay;
+	handleVideoPauseRef.value = handleVideoPause;
+	
+	video.addEventListener('play', handleVideoPlay);
+	video.addEventListener('pause', handleVideoPause);
+	
 	// Quando um chunk termina, vai pro próximo automaticamente
 	const handleChunkEnded = () => {
 		const nextIndex = currentChunkIndex + 1;
@@ -521,12 +555,22 @@ onUnmounted(() => {
 	video.removeEventListener('timeupdate', handleTimeUpdate);
 	video.removeEventListener('waiting', handleWaiting);
 	video.removeEventListener('canplay', handleCanPlay);
+	if (handleVideoPlayRef.value) {
+		video.removeEventListener('play', handleVideoPlayRef.value);
+	}
+	if (handleVideoPauseRef.value) {
+		video.removeEventListener('pause', handleVideoPauseRef.value);
+	}
 	if (handleChunkEndedRef.value) {
 		video.removeEventListener('ended', handleChunkEndedRef.value);
 	}
 
 	document.removeEventListener('fullscreenchange', handleFullscreenChange);
 	
+	if (controlsTimeoutRef.value) {
+		clearTimeout(controlsTimeoutRef.value);
+	}
+
 	resetPlayer();
 });
 

From c3afac9f1ae26886ce0ab0a0093218b88945e7f2 Mon Sep 17 00:00:00 2001
From: Andre Torquato <ats.torquato1@gmail.com>
Date: Wed, 5 Nov 2025 23:20:48 -0300
Subject: [PATCH 4/4] feat: get video from catalog mfe

---
 .env.example                |  3 +-
 src/App.vue                 | 36 ++++++++++++++++++---
 src/services/videoLookup.ts | 63 +++++++++++++++++++++++++++++++++++++
 src/types/mf.d.ts           | 31 ++++++++++++++++++
 vite.config.js              |  7 +++++
 5 files changed, 134 insertions(+), 6 deletions(-)
 create mode 100644 src/services/videoLookup.ts
 create mode 100644 src/types/mf.d.ts

diff --git a/.env.example b/.env.example
index b331fc2..6b14f8f 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
-VITE_HOST=
\ No newline at end of file
+VITE_HOST=
+VITE_REMOTE_CATALOG_URL=
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index a61aaf3..5327ec6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,43 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import Player from './components/Player.vue';
+import { getVideoDataByHash } from './services/videoLookup';
+import { extractHashFromUrl } from 'catalog/VideoShared';
 
 const manifestUrl = ref<string | null>(null);
 const title = ref('Microfrontends');
 const subtitle = ref('Arquitetura do Futuro');
 const description = ref('Aprenda como construir aplicações escaláveis e modulares usando a arquitetura de microfrontends.');
 
-onMounted(() => {
-	const urlParams = new URLSearchParams(window.location.search);
-	const url = urlParams.get('manifestUrl');
-	if (url) {
-		manifestUrl.value = url;
+onMounted(async () => {
+	const hash = extractHashFromUrl();
+	
+	if (hash) {
+		const videoData = await getVideoDataByHash(hash);
+		
+		if (videoData) {
+			const { metadata } = videoData;
+			
+			if (metadata.title) title.value = metadata.title;
+			if (metadata.synopsis && metadata.synopsis.length > 0) {
+				description.value = metadata.synopsis.join(' ');
+			}
+			if (metadata.category) subtitle.value = metadata.category;
+			
+			if (metadata.manifestUrl) {
+				manifestUrl.value = metadata.manifestUrl;
+			} else {
+				console.warn('manifestUrl not found:', hash);
+			}
+		} else {
+			console.error('VVideo not found for hash:', hash);
+		}
+	} else {
+		const urlParams = new URLSearchParams(window.location.search);
+		const url = urlParams.get('manifestUrl');
+		if (url) {
+			manifestUrl.value = url;
+		}
 	}
 });
 </script>
diff --git a/src/services/videoLookup.ts b/src/services/videoLookup.ts
new file mode 100644
index 0000000..43b0f68
--- /dev/null
+++ b/src/services/videoLookup.ts
@@ -0,0 +1,63 @@
+/**
+ * Serviço para lookup de dados de vídeo via Module Federation
+ * Busca dados do módulo compartilhado do catalog
+ */
+
+import type { VideoData, VideoHash } from 'catalog/VideoShared';
+
+/**
+ * Obtém dados de vídeo pelo hash usando o módulo compartilhado
+ * 
+ * @param hash - Hash do vídeo
+ * @returns Dados do vídeo ou null se não encontrado
+ */
+export async function getVideoDataByHash(hash: VideoHash): Promise<VideoData | null> {
+  try {
+    // Importa o módulo compartilhado do catalog via Module Federation
+    const videoShared = await import('catalog/VideoShared');
+    
+    if (!videoShared) {
+      console.error('shared module catalog/VideoShared not available');
+      return null;
+    }
+    
+    if (typeof videoShared.getVideoByHash !== 'function') {
+      console.error('Function getVideoByHash not found in shared module');
+      return null;
+    }
+    
+    const videoData = videoShared.getVideoByHash(hash);
+    return videoData;
+  } catch (error) {
+    console.error('Error get video by hash:', error);
+    return null;
+  }
+}
+
+/**
+ * Obtém dados de vídeo pelo ID do vídeo
+ * 
+ * @param videoId - ID do vídeo
+ * @returns Dados do vídeo ou null se não encontrado
+ */
+export async function getVideoDataById(videoId: string): Promise<VideoData | null> {
+  try {
+    const videoShared = await import('catalog/VideoShared');
+    
+    if (!videoShared) {
+      console.error('shared module catalog/VideoShared not available');
+      return null;
+    }
+    
+    if (typeof videoShared.getVideoById !== 'function') {
+      console.error('Function getVideoById not found in shared module');
+      return null;
+    }
+    
+    const videoData = videoShared.getVideoById(videoId);
+    return videoData;
+  } catch (error) {
+    console.error('Error get video by id:', error);
+    return null;
+  }
+}
diff --git a/src/types/mf.d.ts b/src/types/mf.d.ts
new file mode 100644
index 0000000..71326ce
--- /dev/null
+++ b/src/types/mf.d.ts
@@ -0,0 +1,31 @@
+declare module "catalog/VideoShared" {
+  export type VideoHash = string;
+  export interface VideoData {
+    id: string;
+    hash: VideoHash;
+    title: string;
+    description?: string;
+    thumbnailUrl?: string;
+    duration?: number;
+    createdAt?: string;
+    updatedAt?: string;
+    [key: string]: any;
+  }
+
+  export function getVideoByHash(
+    hash: VideoHash,
+  ): Promise<VideoData | null> | VideoData | null;
+
+  export function getVideoById(
+    videoId: string,
+  ): Promise<VideoData | null> | VideoData | null;
+
+  export function extractHashFromUrl(): VideoHash | null;
+
+  const _default: {
+    getVideoByHash: typeof getVideoByHash;
+    getVideoById: typeof getVideoById;
+  };
+
+  export default _default;
+}
diff --git a/vite.config.js b/vite.config.js
index ead0f5a..75892b3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -40,6 +40,13 @@ export default defineConfig(async ({ mode }) => {
       federation({
         name: "player",
         filename: "remoteEntry.js",
+        remotes: {
+          catalog: {
+            type: "module",
+            name: "catalog",
+            entry: env.VITE_REMOTE_CATALOG_URL,
+          },
+        },
         exposes: {
           "./Player": "./src/export-app.ts",
         },