|
|
@ -4,13 +4,15 @@ import Tag from "../components/Tag.jsx"; |
|
|
import { getChannel, searchByUsername } from "../services/user.service.js"; |
|
|
import { getChannel, searchByUsername } from "../services/user.service.js"; |
|
|
import { uploadVideo, uploadThumbnail, uploadTags } from "../services/video.service.js"; |
|
|
import { uploadVideo, uploadThumbnail, uploadTags } from "../services/video.service.js"; |
|
|
import UserCard from "../components/UserCard.jsx"; |
|
|
import UserCard from "../components/UserCard.jsx"; |
|
|
|
|
|
import LoadingVideoModal from "../modals/LoadingVideoModal.jsx"; |
|
|
|
|
|
import { useNavigate } from "react-router-dom"; |
|
|
|
|
|
|
|
|
export default function AddVideo() { |
|
|
export default function AddVideo() { |
|
|
|
|
|
|
|
|
const storedUser = localStorage.getItem("user"); |
|
|
const storedUser = localStorage.getItem("user"); |
|
|
const user = storedUser ? JSON.parse(storedUser) : null; |
|
|
const user = storedUser ? JSON.parse(storedUser) : null; |
|
|
const token = localStorage.getItem("token"); |
|
|
const token = localStorage.getItem("token"); |
|
|
|
|
|
const navigation = useNavigate(); |
|
|
|
|
|
|
|
|
const [videoTitle, setVideoTitle] = useState(""); |
|
|
const [videoTitle, setVideoTitle] = useState(""); |
|
|
const [videoDescription, setVideoDescription] = useState(""); |
|
|
const [videoDescription, setVideoDescription] = useState(""); |
|
|
@ -23,6 +25,8 @@ export default function AddVideo() { |
|
|
const [authorizedUsers, setAuthorizedUsers] = useState([]); |
|
|
const [authorizedUsers, setAuthorizedUsers] = useState([]); |
|
|
const [searchResults, setSearchResults] = useState([]); |
|
|
const [searchResults, setSearchResults] = useState([]); |
|
|
const [alerts, setAlerts] = useState([]); |
|
|
const [alerts, setAlerts] = useState([]); |
|
|
|
|
|
const [loadingState, setLoadingState] = useState("none"); |
|
|
|
|
|
const [loadingMessage, setLoadingMessage] = useState(""); |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
fetchChannel(); |
|
|
fetchChannel(); |
|
|
@ -53,6 +57,8 @@ export default function AddVideo() { |
|
|
e.preventDefault(); |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
console.log(channel) |
|
|
console.log(channel) |
|
|
|
|
|
setLoadingState("loading"); |
|
|
|
|
|
setLoadingMessage("Envoie de la vidéo..."); |
|
|
|
|
|
|
|
|
if (!videoTitle || !videoDescription || !videoThumbnail || !videoFile) { |
|
|
if (!videoTitle || !videoDescription || !videoThumbnail || !videoFile) { |
|
|
addAlert('error', 'Veuillez remplir tous les champs requis.'); |
|
|
addAlert('error', 'Veuillez remplir tous les champs requis.'); |
|
|
@ -77,6 +83,8 @@ export default function AddVideo() { |
|
|
|
|
|
|
|
|
const request = await uploadVideo(formData, token, addAlert); |
|
|
const request = await uploadVideo(formData, token, addAlert); |
|
|
|
|
|
|
|
|
|
|
|
setLoadingMessage("Envoie de la miniature..."); |
|
|
|
|
|
|
|
|
// If the video was successfully created, we can now upload the thumbnail |
|
|
// If the video was successfully created, we can now upload the thumbnail |
|
|
const response = await request.json(); |
|
|
const response = await request.json(); |
|
|
const videoId = response.id; |
|
|
const videoId = response.id; |
|
|
@ -86,6 +94,7 @@ export default function AddVideo() { |
|
|
thumbnailFormData.append("channel", channel.id.toString()); |
|
|
thumbnailFormData.append("channel", channel.id.toString()); |
|
|
await uploadThumbnail(thumbnailFormData, token, addAlert); |
|
|
await uploadThumbnail(thumbnailFormData, token, addAlert); |
|
|
|
|
|
|
|
|
|
|
|
setLoadingMessage("Envoie des tags..."); |
|
|
// if the thumbnail was successfully uploaded, we can send the tags |
|
|
// if the thumbnail was successfully uploaded, we can send the tags |
|
|
const body = { |
|
|
const body = { |
|
|
tags: videoTags, |
|
|
tags: videoTags, |
|
|
@ -93,6 +102,7 @@ export default function AddVideo() { |
|
|
}; |
|
|
}; |
|
|
await uploadTags(body, videoId, token, addAlert); |
|
|
await uploadTags(body, videoId, token, addAlert); |
|
|
// If everything is successful, redirect to the video management page |
|
|
// If everything is successful, redirect to the video management page |
|
|
|
|
|
navigation("/manage-channel/" + channel.id); |
|
|
addAlert('success', 'Vidéo ajoutée avec succès !'); |
|
|
addAlert('success', 'Vidéo ajoutée avec succès !'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -345,7 +355,7 @@ export default function AddVideo() { |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</main> |
|
|
</main> |
|
|
|
|
|
<LoadingVideoModal state={loadingState} message={loadingMessage} /> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
|
