Paris8/vidarousel
Archived
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add some style

Browse source
This commit is contained in:
Mylloon 2022-11-21 21:44:47 +01:00
parent 3430e40871
commit acd5ee03e8
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
2 changed files with 20 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -7,7 +7,7 @@
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<main></main> <main style="text-align: center; font-family: sans-serif"></main>
<script src="./js/main.js"></script> <script src="./js/main.js"></script>
</body> </body>

37
js/main.js
View file

@ -4,7 +4,7 @@ const main = () => {
// Video folder // Video folder
const videoFolder = "./videos"; const videoFolder = "./videos";
// TODO: Use JSON instead of hardcoded objects // TODO(enhancement): Use JSON instead of hardcoded objects
// Video list, as a list of ["filename", "extension"] // Video list, as a list of ["filename", "extension"]
const videos = { const videos = {
@ -38,33 +38,27 @@ const main = () => {
currentVideo = document.createElement("video"); currentVideo = document.createElement("video");
currentVideo.controls = true; currentVideo.controls = true;
currentVideo.width = window.innerWidth - window.innerWidth / 4; currentVideo.width = window.innerWidth - window.innerWidth / 4;
currentVideo.style = "\
display: block; \
margin: auto;";
// Init the page with the first video // Add the video container to the document
const firstVideo = 1;
const source = document.createElement("source"); const source = document.createElement("source");
source.type = `video/${videos[firstVideo][1]}`;
currentVideo.appendChild(source); currentVideo.appendChild(source);
mainElement.appendChild(currentVideo); mainElement.appendChild(currentVideo);
updateVideo(videoFolder, videos, tree, source, firstVideo); // Add the first video
updateVideo(videoFolder, videos, tree, source, 1);
// TODO: Remove the current video and the buttons // Add autoplay attributes for the next videos
currentVideo.autoplay = true;
// TODO: Add function who go to the next video (used by the button's listener)
}; };
/** /**
* Remove all buttons from an HTMLElement * Remove all buttons from an HTMLElement
* @param {HTMLElement } parentButtons Parent element of the buttons * @param {HTMLElement} parentOfButtons Parent element of the buttons
*/ */
const removeButtons = (parentButtons) => { const removeButtons = (parentOfButtons) => {
const buttons = parentButtons.getElementsByTagName("button"); const buttons = parentOfButtons.getElementsByTagName("button");
for (let index = 0; index < buttons.length; index++) { for (let index = 0; index < buttons.length; index++) {
parentButtons.removeChild(buttons[index]); parentOfButtons.removeChild(buttons[index]);
} }
}; };
@ -79,15 +73,21 @@ const removeButtons = (parentButtons) => {
const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => { const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => {
const mainElement = source.parentElement.parentElement; const mainElement = source.parentElement.parentElement;
source.src = `${videoFolder}/${videosList[newVideoId][0]}.${videosList[newVideoId][1]}`; source.src = `${videoFolder}/${videosList[newVideoId][0]}.${videosList[newVideoId][1]}`;
source.type = `video/${videosList[newVideoId][1]}`;
if (tree[newVideoId]) { if (tree[newVideoId]) {
tree[newVideoId].forEach((nextVideoId, counter) => { tree[newVideoId].forEach((nextVideoId, counter) => {
const button = document.createElement("button"); const button = document.createElement("button");
// TODO: Add custom label for the button redirection // TODO(enhancement): Add custom label for the button redirection
const textButton = "Choix n°"; const textButton = "Choix n°";
button.textContent = textButton + counter; button.textContent = textButton + counter;
button.style =
"\
font-size: 10vh; \
margin-top: 5%; \
margin-right: 5%;";
button.addEventListener("click", () => { button.addEventListener("click", () => {
// Remove older buttons // Remove older buttons
@ -101,7 +101,8 @@ const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => {
}); });
} else { } else {
removeButtons(mainElement); removeButtons(mainElement);
const endText = document.createElement("h2"); const endText = document.createElement("h1");
endText.style = "font-size: 11vh;";
endText.innerText = "Merci d'avoir regardé !"; endText.innerText = "Merci d'avoir regardé !";
mainElement.appendChild(endText); mainElement.appendChild(endText);
} }