diff options
| -rw-r--r-- | src/components/ViewAds.jsx | 25 |
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. |