|
|
@ -1,5 +1,5 @@ |
|
|
import {useNavigate, useParams} from "react-router-dom"; |
|
|
import {useNavigate, useParams} from "react-router-dom"; |
|
|
import {useEffect, useState, useRef} from "react"; |
|
|
import {useEffect, useState, useRef, useCallback} from "react"; |
|
|
import Navbar from "../components/Navbar.jsx"; |
|
|
import Navbar from "../components/Navbar.jsx"; |
|
|
import { useAuth } from "../contexts/AuthContext.jsx"; |
|
|
import { useAuth } from "../contexts/AuthContext.jsx"; |
|
|
import Comment from "../components/Comment.jsx"; |
|
|
import Comment from "../components/Comment.jsx"; |
|
|
@ -22,51 +22,69 @@ export default function Video() { |
|
|
const [showControls, setShowControls] = useState(false); |
|
|
const [showControls, setShowControls] = useState(false); |
|
|
const [comment, setComment] = useState(""); |
|
|
const [comment, setComment] = useState(""); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
const fetchVideo = useCallback(async () => { |
|
|
const fetchVideo = async () => { |
|
|
// Fetch video data and similar videos based on the video ID from the URL |
|
|
// Fetch video data and similar videos based on the video ID from the URL |
|
|
try { |
|
|
try { |
|
|
const response = await fetch(`/api/videos/${id}`); |
|
|
const response = await fetch(`/api/videos/${id}`); |
|
|
if (!response.ok) { |
|
|
if (!response.ok) { |
|
|
throw new Error('Network response was not ok'); |
|
|
throw new Error('Network response was not ok'); |
|
|
|
|
|
} |
|
|
|
|
|
const videoData = await response.json(); |
|
|
|
|
|
setVideo(videoData); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error('Error fetching video:', error); |
|
|
|
|
|
} |
|
|
} |
|
|
try { |
|
|
const videoData = await response.json(); |
|
|
const response = await fetch(`/api/videos/${id}/similar`); |
|
|
setVideo(videoData); |
|
|
if (!response.ok) { |
|
|
} catch (error) { |
|
|
throw new Error('Network response was not ok'); |
|
|
console.error('Error fetching video:', error); |
|
|
} |
|
|
} |
|
|
const similarVideosData = await response.json(); |
|
|
try { |
|
|
setSimilarVideos(similarVideosData); |
|
|
const response = await fetch(`/api/videos/${id}/similar`); |
|
|
} catch (error) { |
|
|
if (!response.ok) { |
|
|
console.error('Error fetching similar videos:', error); |
|
|
throw new Error('Network response was not ok'); |
|
|
} |
|
|
} |
|
|
|
|
|
const similarVideosData = await response.json(); |
|
|
|
|
|
setSimilarVideos(similarVideosData); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error('Error fetching similar videos:', error); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// Add views to the video |
|
|
// Add views to the video |
|
|
try { |
|
|
try { |
|
|
const token = localStorage.getItem('token'); |
|
|
const token = localStorage.getItem('token'); |
|
|
if (!token) { |
|
|
if (!token) { |
|
|
navigation('/login'); |
|
|
navigation('/login'); |
|
|
return; |
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
await fetch(`/api/videos/${id}/views`, { |
|
|
|
|
|
method: 'GET', |
|
|
|
|
|
headers: { |
|
|
|
|
|
'Content-Type': 'application/json', |
|
|
|
|
|
'Authorization': `Bearer ${token}` |
|
|
} |
|
|
} |
|
|
await fetch(`/api/videos/${id}/views`, { |
|
|
}); |
|
|
method: 'GET', |
|
|
} catch (error) { |
|
|
headers: { |
|
|
console.error('Error adding views:', error); |
|
|
'Content-Type': 'application/json', |
|
|
} |
|
|
'Authorization': `Bearer ${token}` |
|
|
}, [id, navigation]); |
|
|
} |
|
|
|
|
|
}); |
|
|
const fetchComments = useCallback(async () => { |
|
|
} catch (error) { |
|
|
// Fetch comments for the video |
|
|
console.error('Error adding views:', error); |
|
|
try { |
|
|
|
|
|
const response = await fetch(`/api/comments/video/${id}`); |
|
|
|
|
|
if (!response.ok) { |
|
|
|
|
|
throw new Error('Network response was not ok'); |
|
|
} |
|
|
} |
|
|
|
|
|
const commentsData = await response.json(); |
|
|
|
|
|
setVideo((prevVideo) => ({ |
|
|
|
|
|
...prevVideo, |
|
|
|
|
|
comments: commentsData |
|
|
|
|
|
})); |
|
|
|
|
|
} catch (error) { |
|
|
|
|
|
console.error('Error fetching comments:', error); |
|
|
} |
|
|
} |
|
|
fetchVideo(); |
|
|
|
|
|
}, [id]); |
|
|
}, [id]); |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
fetchVideo(); |
|
|
|
|
|
}, [fetchVideo]); |
|
|
|
|
|
|
|
|
const handlePlayPause = () => { |
|
|
const handlePlayPause = () => { |
|
|
if (videoRef.current) { |
|
|
if (videoRef.current) { |
|
|
if (videoRef.current.paused) { |
|
|
if (videoRef.current.paused) { |
|
|
@ -278,6 +296,12 @@ export default function Video() { |
|
|
console.log('Comment posted successfully:', data); |
|
|
console.log('Comment posted successfully:', data); |
|
|
setComment(""); // Clear the comment input |
|
|
setComment(""); // Clear the comment input |
|
|
|
|
|
|
|
|
|
|
|
setVideo((prevVideo) => ({ |
|
|
|
|
|
...prevVideo, |
|
|
|
|
|
comments: [...(prevVideo.comments || []), data] // Add the new comment to the existing comments |
|
|
|
|
|
})); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} catch (error) { |
|
|
} catch (error) { |
|
|
console.error('Error posting comment:', error); |
|
|
console.error('Error posting comment:', error); |
|
|
} |
|
|
} |
|
|
@ -405,7 +429,7 @@ export default function Video() { |
|
|
<div className="mt-4"> |
|
|
<div className="mt-4"> |
|
|
{video.comments && video.comments.length > 0 ? ( |
|
|
{video.comments && video.comments.length > 0 ? ( |
|
|
video.comments.map((comment, index) => ( |
|
|
video.comments.map((comment, index) => ( |
|
|
<Comment comment={comment} index={index} videoId={id} /> |
|
|
<Comment comment={comment} index={index} videoId={id} key={index} refetchVideo={fetchVideo} /> |
|
|
)) |
|
|
)) |
|
|
) : ( |
|
|
) : ( |
|
|
<p className="text-gray-400">Aucun commentaire pour le moment. Soyez le premier à en publier !</p> |
|
|
<p className="text-gray-400">Aucun commentaire pour le moment. Soyez le premier à en publier !</p> |
|
|
|
Sacha GUERIN
5 months ago
GitHub