Updated

frontend/components/product/ProductVideo.vue

@@ -3,6 +3,7 @@
 // import
 
 import useGetProduct from "~/composables/api/product/useGetProduct";
+import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
 
 // state
 
@@ -11,13 +12,14 @@ const id = route.params.id as string | undefined;
 
 const { data: product } = useGetProduct(id);
 
+const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
 
 </script>
 
 <template>
-    <section v-if="product?.video" class="h-[110svh] w-full relative bg-black mt-[5rem]">
+    <section v-if="selectedVariant?.video" class="h-[110svh] w-full relative bg-black mt-[5rem]">
         <video
-            :src="product.video"
+            :src="selectedVariant.video"
             class="object-cover absolute size-full"
             muted
             autoplay
@@ -25,9 +27,9 @@ const { data: product } = useGetProduct(id);
         />
         <div class="size-full absolute inset-0 bg-black/20" />
         <StickyCard
-            color="آبی"
-            :price="product!.price"
-            picture="/img/product-6.webp"
+            :color="selectedVariant.color!"
+            :price="selectedVariant.price"
+            :picture="selectedVariant.images[0].image"
             :title="product!.name"
             class="absolute right-10 bottom-10"
         />