studio-variable/hic-et-nunc
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Index > Fix vidéos non prise en charges dans le slider
All checks were successful
Deploy / Deploy to Production (push) Successful in 5s
Details

Browse source
This commit is contained in:
Camilledenoray 2026-06-17 12:25:23 +02:00
parent c92e492fbc
commit 9a615bd92d
7 changed files with 97 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/src/_index.scss
View file

@ -31,7 +31,7 @@ body[data-template="index"] {
section.toggle {
.project-slideshow {
picture:not(.active) {
.slide:not(.active) {
display: none;
}
}

3
assets/css/src/_main.scss
View file

@ -121,7 +121,8 @@ button#mobile-menu-toggle {
right: 0;
position: absolute;
picture img {
picture img,
video.slide {
max-width: 100%;
max-height: calc(100vh - var(--body-margin) * 2);
vertical-align: bottom;

14
assets/css/src/_mobile.scss
View file

@ -26,14 +26,16 @@
inset: 0;
width: auto;
height: auto;
picture {
picture,
video.slide {
inset: 0;
position: absolute;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
picture img,
video.slide {
width: 100%;
height: 100%;
object-fit: cover;
}
}

11
assets/css/style.css
View file

@ -121,7 +121,8 @@ button#mobile-menu-toggle {
right: 0;
position: absolute;
}
.project-slideshow picture img {
.project-slideshow picture img,
.project-slideshow video.slide {
max-width: 100%;
max-height: calc(100vh - var(--body-margin) * 2);
vertical-align: bottom;
@ -586,7 +587,7 @@ body[data-template=index] .filter-menu ul {
body[data-template=index] .projects-index li.filtered-out {
display: none;
}
body[data-template=index] .projects-index li section.toggle .project-slideshow picture:not(.active) {
body[data-template=index] .projects-index li section.toggle .project-slideshow .slide:not(.active) {
display: none;
}
body[data-template=index] ul.projects-index {
@ -621,11 +622,13 @@ body[data-template=index] ul.projects-index {
width: auto;
height: auto;
}
.project-slideshow picture {
.project-slideshow picture,
.project-slideshow video.slide {
inset: 0;
position: absolute;
}
.project-slideshow picture img {
.project-slideshow picture img,
.project-slideshow video.slide {
width: 100%;
height: 100%;
-o-object-fit: cover;

102
assets/js/project-slideshow.js
View file

@ -7,116 +7,104 @@ document.addEventListener("DOMContentLoaded", () => {
const firstProject = projects[0];
const lastProject = projects[projects.length - 1];
const firstPictureFirstProject = firstProject.querySelector(
".project-slideshow picture:first-of-type",
);
const firstPictureLastProject = lastProject.querySelector(
".project-slideshow picture:first-of-type",
);
const lastPictureLastProject = lastProject.querySelector(
".project-slideshow picture:last-of-type",
);
// Première / dernière slide d'un projet (image OU vidéo).
// On cible la classe « .slide » au lieu de la balise « picture »
// pour que les vidéos comptent comme des slides normales.
const firstSlide = (project) =>
project.querySelector(".project-slideshow > .slide");
const lastSlide = (project) => {
const slides = project.querySelectorAll(".project-slideshow > .slide");
return slides[slides.length - 1];
};
const firstSlideFirstProject = firstSlide(firstProject);
const firstSlideLastProject = firstSlide(lastProject);
const lastSlideLastProject = lastSlide(lastProject);
// Fonctions de navigation : les éléments « courants » sont re-requêtés
// à chaque appel pour refléter l'état actuel du DOM.
function goToNextPicture() {
const activePicture = document.querySelector(
".project.selected .project-slideshow > picture.active",
);
const lastPicture = document.querySelector(
".project.selected .project-slideshow > picture:last-of-type",
);
const selectedProject = document.querySelector(".project.selected");
const nextProject = selectedProject.nextElementSibling;
const firstPictureNextProject = nextProject?.querySelector(
".project-slideshow picture:first-of-type",
const activeSlide = selectedProject.querySelector(
".project-slideshow > .slide.active",
);
const lastSlideSelected = lastSlide(selectedProject);
const nextProject = selectedProject.nextElementSibling;
if (activePicture !== lastPicture) {
activePicture.classList.remove("active");
activePicture.nextElementSibling.classList.add("active");
if (activeSlide !== lastSlideSelected) {
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
selectedProject.classList.remove("selected");
activePicture.classList.remove("active");
activeSlide.classList.remove("active");
if (selectedProject !== lastProject) {
nextProject.classList.add("selected");
firstPictureNextProject.classList.add("active");
firstSlide(nextProject).classList.add("active");
} else {
firstProject.classList.add("selected");
firstPictureFirstProject.classList.add("active");
firstSlideFirstProject.classList.add("active");
}
}
}
function goToPrevPicture() {
const activePicture = document.querySelector(
".project.selected .project-slideshow > picture.active",
);
const firstPicture = document.querySelector(
".project.selected .project-slideshow > picture:first-of-type",
);
const selectedProject = document.querySelector(".project.selected");
const prevProject = selectedProject.previousElementSibling;
const lastPicturePrevProject = prevProject?.querySelector(
".project-slideshow picture:last-of-type",
const activeSlide = selectedProject.querySelector(
".project-slideshow > .slide.active",
);
const firstSlideSelected = firstSlide(selectedProject);
const prevProject = selectedProject.previousElementSibling;
if (activePicture !== firstPicture) {
activePicture.classList.remove("active");
activePicture.previousElementSibling.classList.add("active");
if (activeSlide !== firstSlideSelected) {
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
} else {
selectedProject.classList.remove("selected");
activePicture.classList.remove("active");
activeSlide.classList.remove("active");
if (selectedProject !== firstProject) {
prevProject.classList.add("selected");
lastPicturePrevProject.classList.add("active");
lastSlide(prevProject).classList.add("active");
} else {
lastProject.classList.add("selected");
lastPictureLastProject.classList.add("active");
lastSlideLastProject.classList.add("active");
}
}
}
function goToPrevProject() {
const activePicture = document.querySelector(
".project.selected .project-slideshow > picture.active",
);
const selectedProject = document.querySelector(".project.selected");
const prevProject = selectedProject.previousElementSibling;
const firstPicturePrevProject = prevProject?.querySelector(
".project-slideshow picture:first-of-type",
const activeSlide = selectedProject.querySelector(
".project-slideshow > .slide.active",
);
const prevProject = selectedProject.previousElementSibling;
activePicture.classList.remove("active");
activeSlide.classList.remove("active");
selectedProject.classList.remove("selected");
if (selectedProject !== firstProject) {
prevProject.classList.add("selected");
firstPicturePrevProject.classList.add("active");
firstSlide(prevProject).classList.add("active");
} else {
lastProject.classList.add("selected");
firstPictureLastProject.classList.add("active");
firstSlideLastProject.classList.add("active");
}
}
function goToNextProject() {
const activePicture = document.querySelector(
".project.selected .project-slideshow > picture.active",
);
const selectedProject = document.querySelector(".project.selected");
const nextProject = selectedProject.nextElementSibling;
const firstPictureNextProject = nextProject?.querySelector(
".project-slideshow picture:first-of-type",
const activeSlide = selectedProject.querySelector(
".project-slideshow > .slide.active",
);
const nextProject = selectedProject.nextElementSibling;
activePicture.classList.remove("active");
activeSlide.classList.remove("active");
selectedProject.classList.remove("selected");
if (selectedProject !== lastProject) {
nextProject.classList.add("selected");
firstPictureNextProject.classList.add("active");
firstSlide(nextProject).classList.add("active");
} else {
firstProject.classList.add("selected");
firstPictureFirstProject.classList.add("active");
firstSlideFirstProject.classList.add("active");
}
}

8
assets/js/project-toggle.js
View file

@ -22,9 +22,11 @@ allProjects.forEach((currentProject) => {
});
currentProject
.querySelectorAll("picture")
.forEach((picture) => picture.classList.remove("active"));
currentProject.querySelector("picture:first-child").classList.add("active");
.querySelectorAll(".project-slideshow > .slide")
.forEach((slide) => slide.classList.remove("active"));
currentProject
.querySelector(".project-slideshow > .slide")
.classList.add("active");
currentProject.classList.toggle("selected");
Router.setParam("project", currentProject.dataset.slug);

38
site/templates/index.php
View file

@ -14,6 +14,7 @@
</li>
<?php foreach ($page->children()->listed()->sortBy('date', 'desc') as $project): ?>
<?php $slides = $project->slideshow()->toFiles(); ?>
<li class="project" data-category="<?= Str::slug($project->category()) ?>" data-slug="<?= $project->slug() ?>">
<div class="fix">
<button class="project-toggler grid">
@ -21,20 +22,39 @@
<span> <?= $project->tags() ?> </span>
<span class="date"> <?= $project->date()->toDate('Y') ?> </span>
</button>
<span class="slide-number"><span class="current-image">1</span>/<?= $project->images()->count() ?></span>
<span class="slide-number"><span class="current-image">1</span>/<?= $slides->count() ?></span>
</div>
<section class="toggle">
<div class= "project-slideshow-container">
<button class="closer"></button>
<div class="project-slideshow">
<?php foreach ($project->images() as $image): ?>
<?php snippet('picture', [
'file' => $image,
'srcsetName' => 'project-slideshow',
'sizes' => '(min-width: 1000px) 50vw, 100vw',
'lazy' => $image->indexOf() !== 0,
'class' => $image->indexOf() === 0 ? 'active' : null,
]) ?>
<?php foreach ($slides->values() as $i => $slide): ?>
<?php if ($slide->type() === 'video'): ?>
<?php
// Type web fiable basé sur l'extension : le mime() de Kirby
// peut renvoyer video/quicktime pour un .mp4 (fichier .mov
// renommé), ce que Chrome/Firefox refusent de lire.
$videoTypes = [
'mp4' => 'video/mp4',
'm4v' => 'video/mp4',
'mov' => 'video/mp4',
'webm' => 'video/webm',
'ogv' => 'video/ogg',
];
$videoType = $videoTypes[strtolower($slide->extension())] ?? $slide->mime();
?>
<video class="slide<?= $i === 0 ? ' active' : '' ?>" autoplay muted loop playsinline data-id="<?= $slide->uuid() ?>">
<source src="<?= $slide->url() ?>" type="<?= $videoType ?>">
</video>
<?php else: ?>
<?php snippet('picture', [
'file' => $slide,
'srcsetName' => 'project-slideshow',
'sizes' => '(min-width: 1000px) 50vw, 100vw',
'lazy' => $i !== 0,
'class' => $i === 0 ? 'slide active' : 'slide',
]) ?>
<?php endif ?>
<?php endforeach; ?>
<button class="prev"></button>
<button class="next"></button>