diff --git a/src/App.vue b/src/App.vue
index 6280cb1..c538694 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 
 import Header from './components/Header.vue';
 import Hero from './components/Hero.vue';
 import VideoCarousel from './components/VideoCarousel.vue';
 import VideoDetailsDialog from './components/VideoDetailsDialog.vue';
 import catalogData from './catalogData';
+import { navigateToPlayerByVideoId } from './shared/navigation';
 
 
 const modalDetailOpen = ref(false);
 const selectedVideoId = ref<string | null>(null);
+const loading = ref(true);
+const catalog = ref<any | null>(null);
+const byId = ref<Record<string, any>>({});
 
 function openDetails(id: string) {
 	selectedVideoId.value = id;
@@ -22,19 +26,31 @@ function handleShowDetails() {
 }
 
 const selectedVideo = computed(() =>
-	selectedVideoId.value ? (catalogData as any).byId[selectedVideoId.value] : null
+	selectedVideoId.value ? byId.value[selectedVideoId.value] : null
 );
 
 const relatedVideos = computed(() => {
 	const current = selectedVideo.value as any;
 	if (!current || !current.relatedIds) return [] as any[];
-	return current.relatedIds.map((id: string) => (catalogData as any).byId[id]).filter(Boolean);
+	return current.relatedIds.map((id: string) => byId.value[id]).filter(Boolean);
 });
 
-function handleRedirectPlayer() {
-	if ((window as any)?.shellNavigate) {
-		(window as any).shellNavigate("/player");
+onMounted(async () => {
+	const delay = new Promise((res) => setTimeout(res, 1200));
+	const [data] = await Promise.all([catalogData, delay]);
+	console.log(data);
+	catalog.value = catalogData;
+	const idx: Record<string, any> = {};
+	for (const c of data.carousels) {
+		for (const v of c.videos) idx[v.id] = v;
 	}
+	byId.value = idx;
+	loading.value = false;
+});
+
+function handleRedirectPlayer() {
+	// Usa o vídeo do hero (id: '1')
+	navigateToPlayerByVideoId('1');
 }
 </script>
 
@@ -55,9 +71,34 @@ function handleRedirectPlayer() {
 		<div class="relative z-10">
 			<Header />
 			<main class="z-10">
-				<Hero @on-show-details="handleShowDetails" @on-watch-now="handleRedirectPlayer" />
-				<VideoCarousel v-for="carousel in (catalogData as any).carousels" :key="carousel.id" class="mt-4"
-					:title="carousel.title" :videos="carousel.videos" @select="openDetails" />
+				<Hero v-if="!loading" @on-show-details="handleShowDetails" @on-watch-now="handleRedirectPlayer" />
+				<!-- Hero skeleton -->
+				<section v-else class="relative h-[85vh] flex items-end pt-20 pb-16">
+					<div class="absolute inset-0 bg-zinc-800/30 animate-pulse" />
+					<div class="relative z-10 px-8 max-w-3xl w-full">
+						<div class="h-8 w-28 mb-6 rounded-full bg-white/10" />
+						<div class="h-16 w-80 mb-4 rounded bg-white/10" />
+						<div class="h-10 w-64 mb-6 rounded bg-white/10" />
+						<div class="h-20 w-full max-w-xl mb-8 rounded bg-white/10" />
+						<div class="flex gap-4">
+							<div class="h-12 w-40 rounded bg-white/10" />
+							<div class="h-12 w-40 rounded bg-white/10" />
+						</div>
+					</div>
+				</section>
+				<template v-if="!loading && catalog">
+					<VideoCarousel
+						v-for="carousel in catalog.carousels"
+						:key="carousel.id"
+						class="mt-4"
+						:title="carousel.title"
+						:videos="carousel.videos"
+						@select="openDetails"
+					/>
+				</template>
+				<template v-else>
+					<VideoCarousel v-for="i in 3" :key="i" class="mt-4" title="" :videos="[]" :loading="true" />
+				</template>
 			</main>
 
 		</div>
diff --git a/src/catalogData.ts b/src/catalogData.ts
index 82f1318..5862439 100644
--- a/src/catalogData.ts
+++ b/src/catalogData.ts
@@ -13,6 +13,7 @@ export type CatalogVideo = {
   technologies?: string[];
   learnings?: string[];
   relatedIds?: string[];
+  manifestUrl?: string; // URL do manifest.remote.json para buscar thumbnail e duration real
 };
 
 export type CatalogCarousel = {
@@ -75,7 +76,8 @@ export const catalogData: CatalogData = {
             'Compartilhamento de componentes',
             'Gestão de dependências'
           ],
-          relatedIds: ['2', '3', '5']
+          relatedIds: ['2', '3', '5'],
+          manifestUrl: 'https://d2ov2y0lwp0e6t.cloudfront.net/videos/video2/manifest.remote.json'
         },
         {
           id: '2',
diff --git a/src/components/VideoCard.vue b/src/components/VideoCard.vue
index f52620f..52248cd 100644
--- a/src/components/VideoCard.vue
+++ b/src/components/VideoCard.vue
@@ -3,13 +3,13 @@
         @mouseleave="() => isHovered = false" @click="() => emit('select', id)">
 		<div
 			class="relative aspect-video rounded-lg overflow-hidden bg-gradient-to-br from-violet-900/20 to-cyan-900/20 border border-white/5">
-			<img :src="thumbnail" :alt="title"
+			<img :src="displayThumbnail" :alt="title"
 				class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" />
 
 			<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60" />
 
 			<div class="absolute top-2 right-2 px-2 py-1 bg-black/70 backdrop-blur-sm rounded text-xs">
-				{{ duration }}
+				{{ displayDuration }}
 			</div>
 
 			<div class="absolute top-2 left-2 px-2 py-1 backdrop-blur-sm rounded text-xs" :style="{
@@ -27,7 +27,7 @@
 						<button class="px-4 py-2 rounded-lg transition-all duration-300 flex items-center gap-2 shadow-lg" :style="{
 							backgroundImage: 'linear-gradient(120deg, #71bedb 30%, #f4f468)',
 							boxShadow: '0 10px 15px -3px rgba(113, 190, 219, 0.3)'
-						}" @mouseenter="(e: any) => e.currentTarget.style.boxShadow = '0 10px 15px -3px rgba(113, 190, 219, 0.5)'"
+						}" @click.stop="handleWatch" @mouseenter="(e: any) => e.currentTarget.style.boxShadow = '0 10px 15px -3px rgba(113, 190, 219, 0.5)'"
 							@mouseleave="(e: any) => e.currentTarget.style.boxShadow = '0 10px 15px -3px rgba(113, 190, 219, 0.3)'">
 							<Play class="w-4 h-4 text-black" />
 							<span class="text-sm text-black">Assistir</span>
@@ -47,7 +47,9 @@
 
 <script setup lang="ts">
 import { Play, Plus, ThumbsUp } from 'lucide-vue-next';
-import { ref } from 'vue';
+import { ref, onMounted, computed } from 'vue';
+import { loadManifestData, formatDuration } from '../utils/manifestLoader';
+import { navigateToPlayerByVideoId } from '../shared/navigation';
 
 interface VideoCardProps {
 	id: string;
@@ -55,13 +57,38 @@ interface VideoCardProps {
 	thumbnail: string;
 	duration: string;
 	category: string;
+	manifestUrl?: string;
 }
 
 const isHovered = ref(false);
+const manifestThumbnail = ref<string | null>(null);
+const manifestDuration = ref<string | null>(null);
 
 const props = defineProps<VideoCardProps>();
 const emit = defineEmits<{ (e: 'select', id: string): void }>();
 
-const { id, title, thumbnail, duration, category } = props as any;
+const { id, title, thumbnail, duration, category, manifestUrl } = props as any;
+
+const displayThumbnail = computed(() => manifestThumbnail.value || thumbnail);
+
+const displayDuration = computed(() => manifestDuration.value || duration);
+
+function handleWatch() {
+	navigateToPlayerByVideoId(id);
+}
+
+onMounted(async () => {
+	if (manifestUrl) {
+		const manifestData = await loadManifestData(manifestUrl);
+		if (manifestData) {
+			if (manifestData.thumbnailUrl) {
+				manifestThumbnail.value = manifestData.thumbnailUrl;
+			}
+			if (manifestData.duration) {
+				manifestDuration.value = formatDuration(manifestData.duration);
+			}
+		}
+	}
+});
 
 </script>
\ No newline at end of file
diff --git a/src/components/VideoCarousel.vue b/src/components/VideoCarousel.vue
index 170ea9c..458ee47 100644
--- a/src/components/VideoCarousel.vue
+++ b/src/components/VideoCarousel.vue
@@ -5,7 +5,7 @@
 			{{ title }}
 		</h2>
 
-		<div class="relative px-8" ref="emblaWrapperRef">
+        <div class="relative px-8" ref="emblaWrapperRef">
 
 			<button
 				class="absolute left-4 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-full bg-black/60 backdrop-blur-md p-2 hover:bg-black/80 disabled:opacity-30 disabled:cursor-not-allowed"
@@ -19,16 +19,30 @@
 				<ChevronRight class="w-6 h-6" />
 			</button>
 
-			<div class="overflow-hidden" ref="emblaRef">
+            <div class="overflow-hidden" ref="emblaRef">
                 <div class="flex gap-4 will-change-transform select-none touch-pan-y" style="backface-visibility:hidden">
-					<div v-for="video in videos" :key="video.id" class="px-2 flex-shrink-0 min-w-0" :style="{
-						flex: `0 0 calc(100% / var(--slides-per-view, ${slidesPerView}))`,
-						maxWidth: `calc(100% / var(--slides-per-view, ${slidesPerView}))`,
-					}">
-                        <VideoCard v-bind="video" @select="(id) => emit('select', id)" />
-					</div>
-				</div>
-			</div>
+                    <template v-if="!loading">
+                        <div v-for="video in videos" :key="video.id" class="px-2 flex-shrink-0 min-w-0" :style="{
+                            flex: `0 0 calc(100% / var(--slides-per-view, ${slidesPerView}))`,
+                            maxWidth: `calc(100% / var(--slides-per-view, ${slidesPerView}))`,
+                        }">
+                            <VideoCard v-bind="video" @select="(id) => emit('select', id)" />
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div v-for="i in skeletonCount" :key="i" class="px-2 flex-shrink-0 min-w-0" :style="{
+                            flex: `0 0 calc(100% / var(--slides-per-view, ${slidesPerView}))`,
+                            maxWidth: `calc(100% / var(--slides-per-view, ${slidesPerView}))`,
+                        }">
+                            <div class="relative aspect-video rounded-lg overflow-hidden border border-white/5 bg-white/5 animate-pulse">
+                                <div class="absolute inset-0 bg-gradient-to-br from-zinc-800/40 to-zinc-700/20" />
+                                <div class="absolute bottom-2 left-2 h-4 w-20 rounded bg-white/10" />
+                                <div class="absolute bottom-2 right-2 h-4 w-12 rounded bg-white/10" />
+                            </div>
+                        </div>
+                    </template>
+                </div>
+            </div>
 		</div>
 
 	</div>
@@ -45,17 +59,19 @@ interface Video {
 	thumbnail: string;
 	duration: string;
 	category: string;
+	manifestUrl?: string;
 }
 
 interface VideoCarouselProps {
-	title: string;
-	videos: Video[];
+    title: string;
+    videos: Video[];
+    loading?: boolean;
 }
 
 const props = defineProps<VideoCarouselProps>();
 const emit = defineEmits<{ (e: 'select', id: string): void }>();
 
-const { title, videos } = props;
+const { title, videos, loading = false } = props as any;
 
 const [emblaRef, emblaApi] = emblaCarouselVue({
 	loop: false,
@@ -66,6 +82,7 @@ const canPrev = ref(false);
 const canNext = ref(false);
 const slidesPerView = ref(5);
 const slidesToScroll = ref(3);
+const skeletonCount = ref(10);
 
 const emblaRootEl = ref<HTMLElement | null>(null);
 const emblaWrapperRef = ref<HTMLElement | null>(null);
diff --git a/src/components/VideoDetailsDialog.vue b/src/components/VideoDetailsDialog.vue
index 7b23e94..672abb4 100644
--- a/src/components/VideoDetailsDialog.vue
+++ b/src/components/VideoDetailsDialog.vue
@@ -11,6 +11,7 @@ import {
 	X,
 } from 'lucide-vue-next';
 import VideoCard from './VideoCard.vue';
+import { navigateToPlayerByVideoId } from '../shared/navigation';
 
 const props = defineProps<{
     open: boolean,
@@ -57,6 +58,12 @@ onBeforeUnmount(() => {
 });
 
 const relatedVideos = computed(() => props.related || []);
+
+function handleWatch() {
+	if (props.video?.id) {
+		navigateToPlayerByVideoId(props.video.id);
+	}
+}
 </script>
 
 <template>
@@ -139,7 +146,7 @@ const relatedVideos = computed(() => props.related || []);
 												'linear-gradient(120deg, #71bedb 30%, #f4f468)',
 											boxShadow:
 												'0 20px 25px -5px rgba(113, 190, 219, 0.3), 0 10px 10px -5px rgba(113, 190, 219, 0.2)',
-										}" @mouseenter="
+										}" @click="handleWatch" @mouseenter="
 											(e: any) =>
 											(e.currentTarget.style.boxShadow =
 												'0 20px 25px -5px rgba(113, 190, 219, 0.5), 0 10px 10px -5px rgba(113, 190, 219, 0.3)')
diff --git a/src/shared/hash.ts b/src/shared/hash.ts
new file mode 100644
index 0000000..e14ac80
--- /dev/null
+++ b/src/shared/hash.ts
@@ -0,0 +1,47 @@
+import type { VideoHash } from './types';
+
+export function generateVideoHash(videoId: string): VideoHash {
+  let hash = 0;
+  const str = `video_${videoId}`;
+  
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash;
+  }
+  
+  const positiveHash = Math.abs(hash);
+  return `v${positiveHash.toString(36)}`;
+}
+
+/**
+ * Valida se uma string é um hash válido
+ * 
+ * @param hash - String a ser validada
+ * @returns True se for um hash válido
+ */
+export function isValidVideoHash(hash: string): boolean {
+  return typeof hash === 'string' && hash.length > 0 && hash.startsWith('v');
+}
+
+/**
+ * Extrai o hash de uma URL de query string
+ * 
+ * @param url - URL completa ou query string
+ * @returns Hash se encontrado, null caso contrário
+ */
+export function extractHashFromUrl(url?: string): VideoHash | null {
+  if (!url) {
+    const params = new URLSearchParams(window.location.search);
+    const hash = params.get('v');
+    return hash && isValidVideoHash(hash) ? hash : null;
+  }
+  
+  try {
+    const urlObj = new URL(url, window.location.origin);
+    const hash = urlObj.searchParams.get('v');
+    return hash && isValidVideoHash(hash) ? hash : null;
+  } catch {
+    return null;
+  }
+}
diff --git a/src/shared/index.ts b/src/shared/index.ts
new file mode 100644
index 0000000..48455c2
--- /dev/null
+++ b/src/shared/index.ts
@@ -0,0 +1,37 @@
+/**
+ * Módulo compartilhado de dados de vídeo
+ * Este módulo será exposto via Module Federation
+ */
+
+// Tipos
+export type {
+  VideoManifest,
+  VideoMetadata,
+  VideoData,
+  VideoRegistry,
+  VideoHash,
+} from './types';
+
+// Utilitários de hash
+export {
+  generateVideoHash,
+  isValidVideoHash,
+  extractHashFromUrl,
+} from './hash';
+
+// Registro de vídeos
+export {
+  getVideoByHash,
+  getVideoById,
+  getHashByVideoId,
+  getVideoRegistry,
+  updateVideoMetadata,
+  upsertVideo,
+} from './registry';
+
+// Navegação
+export {
+  navigateToPlayer,
+  navigateToPlayerByVideoId,
+  navigateToPlayerByHash,
+} from './navigation';
diff --git a/src/shared/navigation.ts b/src/shared/navigation.ts
new file mode 100644
index 0000000..1af11a8
--- /dev/null
+++ b/src/shared/navigation.ts
@@ -0,0 +1,57 @@
+/**
+ * Utilitário para navegação ao player
+ * Centraliza a lógica de redirecionamento usando hash
+ */
+
+import type { VideoHash } from './types';
+import { getHashByVideoId } from './registry';
+
+/**
+ * Interface para navegação do shell
+ */
+interface ShellNavigate {
+  (path: string): void;
+}
+
+declare global {
+  interface Window {
+    shellNavigate?: ShellNavigate;
+  }
+}
+
+/**
+ * Navega para o player com o hash do vídeo
+ * 
+ * @param hash - Hash do vídeo ou ID do vídeo
+ * @param useHashDirectly - Se true, assume que o parâmetro já é um hash
+ */
+export function navigateToPlayer(hashOrId: string, useHashDirectly: boolean = false): void {
+  const hash: VideoHash = useHashDirectly ? hashOrId : getHashByVideoId(hashOrId);
+  
+  if (!window.shellNavigate) {
+    console.error('shellNavigate não está disponível. Verifique se o shell está carregado.');
+    // Fallback: usar window.location se shellNavigate não estiver disponível
+    window.location.href = `/player?v=${hash}`;
+    return;
+  }
+  
+  window.shellNavigate(`/player?v=${hash}`);
+}
+
+/**
+ * Navega para o player a partir de um objeto de vídeo
+ * 
+ * @param videoId - ID do vídeo
+ */
+export function navigateToPlayerByVideoId(videoId: string): void {
+  navigateToPlayer(videoId, false);
+}
+
+/**
+ * Navega para o player usando hash diretamente
+ * 
+ * @param hash - Hash do vídeo
+ */
+export function navigateToPlayerByHash(hash: VideoHash): void {
+  navigateToPlayer(hash, true);
+}
diff --git a/src/shared/registry.ts b/src/shared/registry.ts
new file mode 100644
index 0000000..9815bf8
--- /dev/null
+++ b/src/shared/registry.ts
@@ -0,0 +1,120 @@
+import type { VideoData, VideoRegistry, VideoMetadata, VideoHash } from './types';
+import { generateVideoHash } from './hash';
+import catalogData from '../catalogData';
+
+let videoRegistry: VideoRegistry = {};
+/**
+ * URL padrão do manifest para todos os vídeos
+ * (temporariamente todos usam o mesmo manifest)
+ */
+const DEFAULT_MANIFEST_URL = 'https://d2ov2y0lwp0e6t.cloudfront.net/videos/video2/manifest.remote.json';
+
+
+function initializeRegistry() {
+  const registry: VideoRegistry = {};
+  
+  // Processa todos os vídeos do catálogo
+  for (const carousel of catalogData.carousels) {
+    for (const video of carousel.videos) {
+      const hash = generateVideoHash(video.id);
+      const videoData: VideoData = {
+        metadata: {
+          id: video.id,
+          title: video.title,
+          thumbnail: video.thumbnail,
+          duration: video.duration,
+          category: video.category,
+          year: video.year,
+          rating: video.rating,
+          views: video.views,
+          synopsis: video.synopsis,
+          instructor: video.instructor,
+          level: video.level,
+          technologies: video.technologies,
+          learnings: video.learnings,
+          relatedIds: video.relatedIds,
+          manifestUrl: video.manifestUrl || DEFAULT_MANIFEST_URL,
+        },
+        hash,
+      };
+      
+      registry[hash] = videoData;
+    }
+  }
+  
+  videoRegistry = registry;
+}
+
+/**
+ * Obtém os dados de um vídeo pelo hash
+ * 
+ * @param hash - Hash do vídeo
+ * @returns Dados do vídeo ou null se não encontrado
+ */
+export function getVideoByHash(hash: VideoHash): VideoData | null {
+  if (!videoRegistry[hash]) {
+    return null;
+  }
+  return videoRegistry[hash];
+}
+
+/**
+ * Obtém os dados de um vídeo pelo ID
+ * 
+ * @param videoId - ID do vídeo
+ * @returns Dados do vídeo ou null se não encontrado
+ */
+export function getVideoById(videoId: string): VideoData | null {
+  const hash = generateVideoHash(videoId);
+  return getVideoByHash(hash);
+}
+
+/**
+ * Obtém o hash de um vídeo pelo ID
+ * 
+ * @param videoId - ID do vídeo
+ * @returns Hash do vídeo
+ */
+export function getHashByVideoId(videoId: string): VideoHash {
+  return generateVideoHash(videoId);
+}
+
+/**
+ * Obtém todo o registro de vídeos
+ * 
+ * @returns Registro completo de vídeos
+ */
+export function getVideoRegistry(): VideoRegistry {
+  return { ...videoRegistry };
+}
+
+/**
+ * Atualiza os metadados de um vídeo existente
+ * Útil para enriquecimento dinâmico de dados (ex: thumbnail do manifest)
+ * 
+ * @param hash - Hash do vídeo
+ * @param metadata - Novos metadados (parcial)
+ */
+export function updateVideoMetadata(
+  hash: VideoHash,
+  metadata: Partial<VideoMetadata>
+): void {
+  if (videoRegistry[hash]) {
+    videoRegistry[hash].metadata = {
+      ...videoRegistry[hash].metadata,
+      ...metadata,
+    };
+  }
+}
+
+/**
+ * Adiciona ou atualiza um vídeo no registro
+ * 
+ * @param videoData - Dados completos do vídeo
+ */
+export function upsertVideo(videoData: VideoData): void {
+  videoRegistry[videoData.hash] = videoData;
+}
+
+// Inicializa o registro ao carregar o módulo
+initializeRegistry();
diff --git a/src/shared/types.ts b/src/shared/types.ts
new file mode 100644
index 0000000..15789e1
--- /dev/null
+++ b/src/shared/types.ts
@@ -0,0 +1,48 @@
+/**
+ * Tipos compartilhados para dados de vídeo entre microfrontends
+ * Este arquivo define a estrutura padronizada de dados de vídeo
+ */
+
+export interface VideoManifest {
+  version: number;
+  videoId: string;
+  segmentSeconds: number;
+  codec: string;
+  chunks: string[];
+  baseUrl?: string;
+  chunkUrls: string[];
+  duration?: number;
+  thumbnail?: string;
+  thumbnailUrl?: string;
+}
+
+export interface VideoMetadata {
+  id: string;
+  title: string;
+  thumbnail: string;
+  thumbnailUrl?: string;
+  duration: string | number;
+  category: string;
+  year?: number;
+  rating?: number;
+  views?: string;
+  synopsis?: string[];
+  instructor?: string;
+  level?: string;
+  technologies?: string[];
+  learnings?: string[];
+  relatedIds?: string[];
+  manifestUrl?: string;
+}
+
+export interface VideoData {
+  metadata: VideoMetadata;
+  manifest?: VideoManifest;
+  hash: string;
+}
+
+export interface VideoRegistry {
+  [hash: string]: VideoData;
+}
+
+export type VideoHash = string;
diff --git a/src/utils/manifestLoader.ts b/src/utils/manifestLoader.ts
new file mode 100644
index 0000000..5be6221
--- /dev/null
+++ b/src/utils/manifestLoader.ts
@@ -0,0 +1,32 @@
+export interface ManifestData {
+  thumbnailUrl?: string;
+  duration?: number;
+}
+
+export async function loadManifestData(manifestUrl: string): Promise<ManifestData | null> {
+  try {
+    const response = await fetch(manifestUrl);
+    if (!response.ok) {
+      return null;
+    }
+    const manifest = await response.json();
+    return {
+      thumbnailUrl: manifest.thumbnailUrl,
+      duration: manifest.duration
+    };
+  } catch (error) {
+    console.error('Erro ao carregar manifest:', error);
+    return null;
+  }
+}
+
+export function formatDuration(seconds: number): string {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  
+  if (hours > 0) {
+    return `${hours}h ${minutes}min`;
+  }
+  return `${minutes} min`;
+}
+
diff --git a/vite.config.js b/vite.config.js
index 63412c1..966a379 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -42,6 +42,7 @@ export default defineConfig(async ({ mode }) => {
         filename: "remoteEntry.js",
         exposes: {
           "./Catalog": "./src/export-app.ts",
+          "./VideoShared": "./src/shared/index.ts",
         },
         shared: {
           vue: { singleton: true, eager: true },