-
Notifications
You must be signed in to change notification settings - Fork 1
/
video.html
112 lines (97 loc) · 5 KB
/
video.html
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Détails de la vidéo</title>
<link rel="icon" type="image/png" href="./assets/images/petflix-logo.png">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/app.css">
</head>
<body class="bg-gray-900 text-white">
<header class="bg-black p-4">
<div class="container mx-auto">
<a href="index.html" class="text-white underline">Revenir à l'accueil</a>
</div>
</header>
<main>
<div id="video-player" class="mx-auto"></div>
<div id="iframe-container" class="video-cover hidden"></div>
<div class="container mx-auto ">
<div id="video-details " class="mt-8 w-full ">
<h1 id="video-title" class="text-3xl my-8 font-bold"></h1>
<p id="video-description" class="mt-2"></p>
<span id="animal-status" class="mt-4 inline-block"></span>
<div id="animal-details" class="mt-4"></div>
<div id="member-details" class="mt-4"></div>
</div>
</div>
</main>
<footer class="bg-black p-4 mt-8">
<div class="container mx-auto text-center">
<p>2024 - Petflix</p>
</div>
</footer>
<script>
document.addEventListener("DOMContentLoaded", function () {
const params = new URLSearchParams(window.location.search);
const videoId = params.get("id");
fetchVideoDetails(videoId);
});
async function fetchVideoDetails(videoId) {
try {
const response = await fetch(`http://localhost:8000/videos/${videoId}/details`);
if (!response.ok) {
throw new Error(`Erreur lors de la récupération des détails de la vidéo : ${response.status}`);
}
const data = await response.json();
displayVideoDetails(data);
} catch (error) {
console.error("Erreur lors de la récupération des détails de la vidéo :", error);
}
}
function displayVideoDetails(data) {
const videoPlayer = document.getElementById("video-player");
const videoTitle = document.getElementById("video-title");
const videoDescription = document.getElementById("video-description");
videoTitle.textContent = data.video.titre;
const iframeContainer = document.getElementById("iframe-container");
const iframeHtml = `
<iframe width="680" height="400"
src="https://www.youtube.com/embed/${data.video.url}?autoplay=1&modestbranding=1&mute=1&loop=1&playlist=${data.video.url}" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
reibollo="strict-origin-when-cross-origin" allowfullscreen>
</iframe>`;
iframeContainer.innerHTML = iframeHtml;
iframeContainer.classList.remove("hidden");
videoPlayer.classList.add("hidden");
videoDescription.textContent = data.video.description;
const animalDetails = document.getElementById("animal-details");
animalDetails.innerHTML = "";
data.animaux_associés.forEach(animal => {
const animalDetailsHtml = `
<h2 class='my-2 text-l font-bold'>Détails de l'animal :</h2>
<li>Type : ${animal.type}</li>
<li>Nom : ${animal.nom}</li>
<li>Age : ${animal.age}</li>
<li>Date d'arrivée : ${animal.date_arrive}</li>
<li class='my-2'>Date d'adoption : ${animal.date_adoption ? animal.date_adoption : `<span class='bg-red-700 text-white px-2 py-1 rounded-full'>Non adopté</span>`}</li>`;
const animalDiv = document.createElement("div");
animalDiv.innerHTML = animalDetailsHtml;
animalDetails.appendChild(animalDiv);
const memberDetailsHtml = `
<h2 class='my-4 text-l font-bold'>Détails du membre de l'association :</h2>
<li>Nom : ${animal.membre_associé.nom}</li>
<li>Prénom : ${animal.membre_associé.prenom}</li>
<li>Ville : ${animal.membre_associé.ville}</li>
<li>Email : ${animal.membre_associé.email}</li>
<li>Téléphone : ${animal.membre_associé.telephone}</li>`;
const memberDiv = document.createElement("div");
memberDiv.innerHTML = memberDetailsHtml;
animalDetails.appendChild(memberDiv);
});
}
</script>
</body>
</html>