diff --git a/backend/logs/access.log b/backend/logs/access.log index 3fcfa30..552e604 100644 --- a/backend/logs/access.log +++ b/backend/logs/access.log @@ -11402,3 +11402,62 @@ [2025-08-27 14:02:56.751] [undefined] GET(/:id/history): successfully retrieved history of user 4 with status 200 [2025-08-27 14:02:56.755] [undefined] GET(/:id/channel): successfully retrieved channel of user 4 with status 200 [2025-08-27 14:02:56.761] [undefined] GET(/user/:id): Playlists retrieved for user with id 4 with status 200 +[2025-08-31 10:18:51.355] [undefined] GET(/:id/history): try to retrieve history of user 1 +[2025-08-31 10:18:51.361] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:18:51.367] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:18:51.373] [undefined] GET(/:id/history): successfully retrieved history of user 1 with status 200 +[2025-08-31 10:18:51.384] [undefined] GET(/user/:id): Playlists retrieved for user with id 1 with status 200 +[2025-08-31 10:18:55.307] [undefined] GET(/:id): try to get channel with id 1 +[2025-08-31 10:18:55.354] [undefined] GET(/:id/stats): try to get stats +[2025-08-31 10:18:55.360] [undefined] GET(/:id): Successfully get channel with id 1 with status 200 +[2025-08-31 10:18:55.371] [undefined] GET(/:id/stats): Successfully get stats with status 200 +[2025-08-31 10:19:10.594] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:19:10.599] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:22:07.050] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:22:07.056] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:22:30.580] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:22:30.586] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:22:48.827] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:22:48.834] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:22:56.007] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:22:56.012] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:23:10.939] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:23:10.945] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:23:11.668] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:23:11.673] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:23:47.510] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:23:47.516] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:23:53.769] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:23:53.775] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:25:15.205] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:25:15.210] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:25:35.308] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:25:35.313] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:25:52.991] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:25:52.997] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:26:48.298] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:26:48.304] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:26:55.482] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:26:55.488] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:27:21.463] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:27:21.469] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:28:55.696] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:28:55.701] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:29:12.334] [undefined] POST(/): try to upload video with status undefined +[2025-08-31 10:29:12.342] [undefined] POST(/): successfully uploaded video with status 200 +[2025-08-31 10:29:12.457] [undefined] POST(/thumbnail): try to add thumbnail to video 4 +[2025-08-31 10:29:12.464] [undefined] POST(/thumbnail): successfully uploaded thumbnail with status 200 +[2025-08-31 10:29:12.492] [undefined] PUT(/:id/tags): try to add tags to video 4 +[2025-08-31 10:29:12.505] [undefined] PUT(/:id/tags): successfully added tags to video 4 with status 200 +[2025-08-31 10:29:45.158] [undefined] GET(/:id/channel): try to retrieve channel of user 1 +[2025-08-31 10:29:45.164] [undefined] GET(/:id/channel): successfully retrieved channel of user 1 with status 200 +[2025-08-31 10:29:58.657] [undefined] POST(/): try to upload video with status undefined +[2025-08-31 10:29:58.663] [undefined] POST(/): successfully uploaded video with status 200 +[2025-08-31 10:29:58.774] [undefined] POST(/thumbnail): try to add thumbnail to video 5 +[2025-08-31 10:29:58.780] [undefined] POST(/thumbnail): successfully uploaded thumbnail with status 200 +[2025-08-31 10:29:58.805] [undefined] PUT(/:id/tags): try to add tags to video 5 +[2025-08-31 10:29:58.820] [undefined] PUT(/:id/tags): successfully added tags to video 5 with status 200 +[2025-08-31 10:29:58.856] [undefined] GET(/:id): try to get channel with id 1 +[2025-08-31 10:29:58.869] [undefined] GET(/:id/stats): try to get stats +[2025-08-31 10:29:58.875] [undefined] GET(/:id): Successfully get channel with id 1 with status 200 +[2025-08-31 10:29:58.885] [undefined] GET(/:id/stats): Successfully get stats with status 200 diff --git a/frontend/src/modals/LoadingVideoModal.jsx b/frontend/src/modals/LoadingVideoModal.jsx new file mode 100644 index 0000000..3416584 --- /dev/null +++ b/frontend/src/modals/LoadingVideoModal.jsx @@ -0,0 +1,17 @@ + + +export default function LoadingVideoModal({state, message}) { + return state === "loading" && ( +
+
+ {/* Spinner */} +
+
+
+
+

{message}

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