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>
</head>
<body>
<main></main>
<main style="text-align: center; font-family: sans-serif"></main>
<script src="./js/main.js"></script>
</body>

37
js/main.js
View file

@ -4,7 +4,7 @@ const main = () => {
// Video folder
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"]
const videos = {
@ -38,33 +38,27 @@ const main = () => {
currentVideo = document.createElement("video");
currentVideo.controls = true;
currentVideo.width = window.innerWidth - window.innerWidth / 4;
currentVideo.style = "\
display: block; \
margin: auto;";
// Init the page with the first video
const firstVideo = 1;
// Add the video container to the document
const source = document.createElement("source");
source.type = `video/${videos[firstVideo][1]}`;
currentVideo.appendChild(source);
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
// TODO: Add function who go to the next video (used by the button's listener)
// Add autoplay attributes for the next videos
currentVideo.autoplay = true;
};
/**
* 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 buttons = parentButtons.getElementsByTagName("button");
const removeButtons = (parentOfButtons) => {
const buttons = parentOfButtons.getElementsByTagName("button");
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 mainElement = source.parentElement.parentElement;
source.src = `${videoFolder}/${videosList[newVideoId][0]}.${videosList[newVideoId][1]}`;
source.type = `video/${videosList[newVideoId][1]}`;
if (tree[newVideoId]) {
tree[newVideoId].forEach((nextVideoId, counter) => {
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°";
button.textContent = textButton + counter;
button.style =
"\
font-size: 10vh; \
margin-top: 5%; \
margin-right: 5%;";
button.addEventListener("click", () => {
// Remove older buttons
@ -101,7 +101,8 @@ const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => {
});
} else {
removeButtons(mainElement);
const endText = document.createElement("h2");
const endText = document.createElement("h1");
endText.style = "font-size: 11vh;";
endText.innerText = "Merci d'avoir regardé !";
mainElement.appendChild(endText);
}