feat: render video from catalog mfe

.env.example

@@ -1 +1,2 @@
-VITE_HOST=
+VITE_HOST=
+VITE_REMOTE_CATALOG_URL=

src/App.vue

@@ -1,10 +1,49 @@
 <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(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>
 
 <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";