Home > slideshow > videos verticales incluses dans paires

assets/css/src/_home.scss

@@ -24,7 +24,8 @@
       height: 100%;
     }
 
-    &.portrait-pair > picture {
+    &.portrait-pair > picture,
+    &.portrait-pair > video {
       width: 50%;
       height: 100%;
     }
@@ -37,19 +38,17 @@
     object-fit: cover;
   }
 
-  button{
+  button {
     position: absolute;
     width: 50%;
     height: 100%;
-    &.prev{
+    &.prev {
       left: 0;
       cursor: w-resize;
     }
-    &.next{
+    &.next {
       right: 0;
       cursor: e-resize;
     }
   }
-
-
 }

assets/css/style.css

@@ -314,7 +314,7 @@ button#mobile-menu-toggle {
   width: 100%;
   height: 100%;
 }
-#home-slideshow .slide.portrait-pair > picture {
+#home-slideshow .slide.portrait-pair > picture, #home-slideshow .slide.portrait-pair > video {
   width: 50%;
   height: 100%;
 }

assets/js/home-slideshow.js

@@ -26,15 +26,34 @@ if (slideshow) {
     return index;
   }
 
+  function updateVideos(index) {
+    const el = items[index];
+    const videos = el.querySelectorAll("video");
+    videos.forEach((video) => {
+      video.currentTime = 0;
+      video.play().catch(() => {});
+    });
+  }
+
+  function pauseAllVideos() {
+    items.forEach((el) => {
+      const videos = el.querySelectorAll("video");
+      videos.forEach((video) => video.pause());
+    });
+  }
+
   function goTo(index) {
     items[current].classList.remove("active");
+    pauseAllVideos();
     current = index;
     items[current].classList.add("active");
+    updateVideos(current);
   }
 
   const firstVisible = findNext(-1, 1);
   items[firstVisible]?.classList.add("active");
   current = firstVisible;
+  updateVideos(current);
 
   prev?.addEventListener("click", () => goTo(findNext(current, -1)));
   next?.addEventListener("click", () => goTo(findNext(current, 1)));
@@ -45,4 +64,4 @@ if (slideshow) {
       goTo(findNext(current, 1));
     }
   });
-}
+}

site/blueprints/files/slideshow-files.yml

@@ -7,3 +7,8 @@ fields:
     label: Masquer sur mobile
     type: toggle
     width: 1/6
+  isPortrait:
+    label: Vidéo portrait
+    help: À activer pour les vidéos verticales
+    type: toggle
+    width: 1/6

site/controllers/home.php

@@ -11,8 +11,13 @@ return function($site) {
         $file     = $files->nth($i);
         $nextFile = $files->nth($i + 1);
 
-        $isPortrait     = $file->type() === 'image' && $file->orientation() === 'portrait';
+        dump($file->filename() . ' / type=' . $file->type());
-        $nextIsPortrait = $nextFile && $nextFile->type() === 'image' && $nextFile->orientation() === 'portrait';
+        dump($file->fileOrientation());
+
+        $isPortrait = in_array($file->type(), ['image', 'video'], true) 
+            && $file->fileOrientation() === 'portrait';
+        $nextIsPortrait = $nextFile
+            && in_array($nextFile->type(), ['image', 'video'], true) && $nextFile->fileOrientation() === 'portrait';
 
         if ($isPortrait && $nextIsPortrait) {
             $units[] = ['pair' => true, 'a' => $file, 'b' => $nextFile];

site/plugins/file-methods/index.php

@@ -0,0 +1,20 @@
+<?php
+
+Kirby::plugin('studio-variable/file-methods', [
+    'fileMethods' => [
+        // Orientation utilisable aussi pour les vidéos.
+        // Kirby ne sait pas lire les dimensions d'une vidéo nativement,
+        // on se base donc sur le toggle « isPortrait » du panel pour celles-ci.
+        'fileOrientation' => function () {
+            if ($this->type() === 'video') {
+                return $this->isPortrait()->isTrue() ? 'portrait' : 'landscape';
+            }
+
+            if ($this->type() === 'image') {
+                return $this->orientation();
+            }
+
+            return false;
+        }
+    ]
+]);

site/snippets/picture.php

@@ -6,7 +6,7 @@
         $spanAttr  = isset($span)  ? ' style="--span: ' . htmlspecialchars($span) . ';"' : '';
     ?>
     <?php if ($file->mime() === 'image/gif'): ?>
-    <picture<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->orientation() ?>" data-mime="<?= $file->mime() ?>">
+    <picture<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->fileOrientation() ?>" data-mime="<?= $file->mime() ?>">
         <img
             src="<?= $file->url() ?>"
             width="<?= $file->width() ?>"
@@ -43,7 +43,7 @@
         $width   = $resized ? $resized->width() : $file->width();
         $height  = $resized ? $resized->height() : $file->height();
     ?>
-    <picture<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->orientation() ?>" data-mime="<?= $file->mime() ?>">
+    <picture<?= $classAttr ?><?= $spanAttr ?> data-id="<?= $file->uuid() ?>" orientation="<?= $file->fileOrientation() ?>" data-mime="<?= $file->mime() ?>">
         <source srcset="<?= $webpSrcset ?>" sizes="<?= $sizesAttr ?>" type="image/webp">
         <img
             src="<?= $src ?>"

site/snippets/slide-media.php

@@ -0,0 +1,7 @@
+<?php if ($file->type() === 'video'): ?>
+<video autoplay muted loop playsinline data-id="<?= $file->uuid() ?>">
+<source src="<?= $file->url() ?>" type="<?= $file->mime() ?>">
+</video>
+<?php else: ?>
+<?php snippet('picture', ['file' => $file, 'srcsetName' => $srcsetName, 'sizes' => $sizes, 'lazy' => false]) ?>
+<?php endif ?>

site/templates/home.php

@@ -1,40 +1,27 @@
 <?php snippet('header') ?>
-
 <?php snippet('mobile-menu') ?>
-
 <div id="home-slideshow">
-
     <button class="prev"></button>
     <button class="next"></button>
-    
     <?php foreach ($slides as $slide): ?>
-    <?php if ($slide['pair']): ?>
+        <?php if ($slide['pair']): ?>
-    <div class="slide portrait-pair desktop-only">
+            <div class="slide portrait-pair desktop-only">
-        <?php snippet('picture', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?>
+                <?php snippet('slide-media', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw']) ?>
-        <?php snippet('picture', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw', 'lazy' => false]) ?>
+                <?php snippet('slide-media', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '50vw']) ?>
-    </div>
+            </div>
-    <div class="slide mobile-only">
+            <div class="slide mobile-only">
-        <?php snippet('picture', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?>
+                <?php snippet('slide-media', ['file' => $slide['a'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw']) ?>
-    </div>
+            </div>
-    <div class="slide mobile-only">
+            <div class="slide mobile-only">
-        <?php snippet('picture', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?>
+                <?php snippet('slide-media', ['file' => $slide['b'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw']) ?>
-    </div>
+            </div>
-    <?php elseif ($slide['file']->type() === 'video'): ?>
+        <?php else: ?>
-    <div class="slide">
+            <div class="slide<?= e($slide['isHiddenOnMobile'], ' desktop-only') ?>">
-        <video autoplay muted loop playsinline data-id="<?= $slide['file']->uuid() ?>">
+                <?php snippet('slide-media', ['file' => $slide['file'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw']) ?>
-            <source src="<?= $slide['file']->url() ?>" type="<?= $slide['file']->mime() ?>">
+            </div>
-        </video>
+        <?php endif ?>
-    </div>
-    <?php else: ?>
-    <div class="slide<?= e($slide['isHiddenOnMobile'], ' desktop-only') ?>">
-        <?php snippet('picture', ['file' => $slide['file'], 'srcsetName' => 'home-slideshow', 'sizes' => '100vw', 'lazy' => false]) ?>
-    </div>
-    <?php endif ?>
     <?php endforeach ?>
-
 </div>
-
-
 <script src="/assets/js/home-slideshow.js"></script>
 <script src="/assets/js/mobile-menu-toggle.js"></script>
-<?php snippet('footer') ?>
+<?php snippet('footer') ?>