added fetching content from firebase

1 files changed, 20 insertions, 5 deletions

diff --git a/src/components/ViewAds.jsx b/src/components/ViewAds.jsx
index 0c5486c..e681989 100644
--- a/src/components/ViewAds.jsx
+++ b/src/components/ViewAds.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import './ViewAds.css';
 import { getDownloadURL, listAll, ref } from 'firebase/storage';
 import { storage } from '../firebase';
+import './ViewAds.css';
 
 const ViewAds = () => {
   const [urls, setUrls] = useState([]);
@@ -22,18 +22,33 @@ const ViewAds = () => {
     fetchUrls();
   }, []);
 
+  const getFileType = (url) => {
+    const fileExtension = url.split('?')[0].split('.').pop().toLowerCase();
+    const imageExtensions = ['jpeg', 'jpg', 'gif', 'png'];
+    const videoExtensions = ['mp4', 'mov', 'avi', 'mkv'];
+
+    if (imageExtensions.includes(fileExtension)) {
+      return 'image';
+    } else if (videoExtensions.includes(fileExtension)) {
+      return 'video';
+    } else {
+      return 'unsupported';
+    }
+  };
+
   return (
     <div>
       <h2>Uploaded Ads</h2>
       <div className="ads-container">
         {urls.map((url, index) => {
-          const isImage = url.match(/\.(jpeg|jpg|gif|png)$/);
-          const isVideo = url.match(/\.(mp4|mov|avi|mkv)$/);
+          const fileType = getFileType(url);
+          console.log(`URL: ${url}, fileType: ${fileType}`);
+
           return (
             <div key={index} className="ad-item">
-              {isImage ? (
+              {fileType === 'image' ? (
                 <img src={url} alt={`Ad ${index + 1}`} style={{ maxWidth: '100%', height: 'auto' }} />
-              ) : isVideo ? (
+              ) : fileType === 'video' ? (
                 <video controls style={{ maxWidth: '100%', height: 'auto' }}>
                   <source src={url} type={`video/${url.split('.').pop()}`} />
                   Your browser does not support the video tag.