astria
/
3RESIT
1
0
Fork 0
Code Issues Pull Requests 1 Projects 1 Releases 6 Wiki Activity
Browse Source

Added upload video loading

pull/11/head
astria 4 months ago
parent
6b1c3227fb
commit
3ec09e404b
3 changed files with 88 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 59
      backend/logs/access.log
  2. 17
      frontend/src/modals/LoadingVideoModal.jsx
  3. 14
      frontend/src/pages/AddVideo.jsx

59
backend/logs/access.log
View File

@ -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

17
frontend/src/modals/LoadingVideoModal.jsx
View File

@ -0,0 +1,17 @@
export default function LoadingVideoModal({state, message}) {
return state === "loading" && (
<div className="fixed inset-0 bg-[rgba(0,0,0,0.5)] flex items-center justify-center z-50">
<div className="glassmorphism p-8 flex flex-col items-center space-y-4">
{/* Spinner */}
<div className="relative w-16 h-16">
<div className="absolute inset-0 border-4 border-gray-300 border-opacity-30 rounded-full"></div>
<div className="absolute inset-0 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
</div>
<p className="text-white text-lg font-medium">{message}</p>
</div>
</div>
);
}

14
frontend/src/pages/AddVideo.jsx
View File

@ -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() {
</div>
</main>
<LoadingVideoModal state={loadingState} message={loadingMessage} />
</div>
);

Write Preview
Loading…
Cancel
Save