Index > Fix vidéos non prise en charges dans le slider
All checks were successful
Deploy / Deploy to Production (push) Successful in 5s
All checks were successful
Deploy / Deploy to Production (push) Successful in 5s
This commit is contained in:
parent
c92e492fbc
commit
9a615bd92d
7 changed files with 97 additions and 81 deletions
|
|
@ -31,7 +31,7 @@ body[data-template="index"] {
|
|||
|
||||
section.toggle {
|
||||
.project-slideshow {
|
||||
picture:not(.active) {
|
||||
.slide:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -26,16 +26,18 @@
|
|||
inset: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
picture {
|
||||
picture,
|
||||
video.slide {
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
img {
|
||||
}
|
||||
picture img,
|
||||
video.slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: var(--font-size-XL);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 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' => $image,
|
||||
'file' => $slide,
|
||||
'srcsetName' => 'project-slideshow',
|
||||
'sizes' => '(min-width: 1000px) 50vw, 100vw',
|
||||
'lazy' => $image->indexOf() !== 0,
|
||||
'class' => $image->indexOf() === 0 ? 'active' : null,
|
||||
'lazy' => $i !== 0,
|
||||
'class' => $i === 0 ? 'slide active' : 'slide',
|
||||
]) ?>
|
||||
<?php endif ?>
|
||||
<?php endforeach; ?>
|
||||
<button class="prev"></button>
|
||||
<button class="next"></button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue