1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import React, { useState, useEffect } from 'react';
import { getDownloadURL, listAll, ref } from 'firebase/storage';
import { storage } from '../firebase';
import './ViewAds.css';
const ViewAds = () => {
const [urls, setUrls] = useState([]);
useEffect(() => {
const fetchUrls = async () => {
const listRef = ref(storage, 'ads/');
try {
const res = await listAll(listRef);
const urlsPromises = res.items.map(itemRef => getDownloadURL(itemRef));
const urls = await Promise.all(urlsPromises);
setUrls(urls);
} catch (error) {
console.error('Error fetching URLs:', error);
}
};
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 fileType = getFileType(url);
console.log(`URL: ${url}, fileType: ${fileType}`);
return (
<div key={index} className="ad-item">
{fileType === 'image' ? (
<img src={url} alt={`Ad ${index + 1}`} style={{ maxWidth: '100%', height: 'auto' }} />
) : 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.
</video>
) : (
<p>Unsupported file type</p>
)}
</div>
);
})}
</div>
</div>
);
};
export default ViewAds;
|
