chore: add new features

frontend-prep/src/components/ProductDetailsModal.tsx

@@ -19,6 +19,7 @@ import {
     Play,
 } from "lucide-react";
 import type { Product, ProductPrice } from "../api/api_types";
+import { getMediaUrl } from "../api/api";
 import "./ProductModal.css";
 
 interface ProductDetailsModalProps {
@@ -114,14 +115,14 @@ const ProductDetailsModal: React.FC<ProductDetailsModalProps> = ({
                             <div className="media-viewer">
                                 {currentMedia?.type === "image" ? (
                                     <img
-                                        src={`${currentMedia.url}`}
+                                        src={getMediaUrl(currentMedia.url)}
                                         alt={product.name}
                                         className="media-display"
                                     />
                                 ) : currentMedia?.type === "video" ? (
                                     <div className="video-container">
                                         <video
-                                            src={`${currentMedia.url}`}
+                                            src={getMediaUrl(currentMedia.url)}
                                             controls
                                             className="media-display"
                                         >
@@ -179,7 +180,7 @@ const ProductDetailsModal: React.FC<ProductDetailsModalProps> = ({
                                         >
                                             {media.type === "image" ? (
                                                 <img
-                                                    src={`{product.media[0].url}${media.url}`}
+                                                    src={getMediaUrl(media.url)}
                                                     alt={`Media ${index + 1}`}
                                                 />
                                             ) : (