add picture as snapshot

public/assets/js/app.js

@@ -89,12 +89,14 @@ var CameraEvent = function() {
 var SnapshotEvent = function() {
     var links = document.querySelectorAll('.snapshot-link');
     var view = document.querySelector('#snapshot-view');
-    var template = document.querySelector('#snapshot-template');
     var body = document.querySelector('body');
 
     forEach(links, function(i, link) {
         link.addEventListener('click', function(e) {
             e.preventDefault();
+
+            var template = document.querySelector(link.getAttribute('data-template'));
+
             body.classList.add('modal-open');
             view.innerHTML = template.innerHTML.replace(/{src}/g, link.getAttribute('href'));
 

src/Motion/Snapshot.php

@@ -13,6 +13,8 @@ class Snapshot
 {
     protected DateTime $date;
 
+    protected string $picture;
+
     protected string $movie;
 
     protected string $thumbnail;
@@ -29,6 +31,18 @@ class Snapshot
         return $this->date;
     }
 
+    public function setPicture(string $picture): self
+    {
+        $this->picture = $picture;
+
+        return $this;
+    }
+
+    public function getPicture(): ? string
+    {
+        return $this->picture;
+    }
+
     public function setMovie(string $movie): self
     {
         $this->movie = $movie;

src/Motion/SnapshotRepository.php

@@ -42,20 +42,33 @@ class SnapshotRepository
             $files = $moviesFinder
                 ->files()
                 ->in($directory->getPathName())
-                ->name('*.mp4')
                 ->sortByName();
 
             $date = $directory->getFilename();
 
             foreach ($files as $file) {
-                $time = str_replace(['.mp4', '-'], ['', ':'], $file->getBasename());
-                $thumbnail = str_replace('.mp4', '.jpg', $file->getPathName());
+                $time = str_replace(['.mp4', '.jpg', '-'], ['', '', ':'], $file->getBasename());
 
                 $snapshot = new Snapshot();
-                $snapshot
-                    ->setDate(new \DateTime($date.' '.$time))
-                    ->setMovie($file->getPathName())
-                    ->setThumbnail($thumbnail);
+                $snapshot->setDate(new \DateTime($date.' '.$time));
+
+                if (substr($file->getFilename(), -3) === 'jpg') {
+                    $movie = str_replace('.jpg', '.mp4', $file->getPathName());
+
+                    if (file_exists($movie)) {
+                        continue;
+                    }
+
+                    $thumbnail = $file->getPathName();
+                    $snapshot->setPicture($file->getPathName());
+                    $snapshot->setMovie('');
+                } else {
+                    $thumbnail = str_replace('.mp4', '.jpg', $file->getPathName());
+                    $snapshot->setMovie($file->getPathName());
+                    $snapshot->setPicture('');
+                }
+
+                $snapshot->setThumbnail($thumbnail);
 
                 $objects[] = $snapshot;
             }

templates/events.html.twig

@@ -22,7 +22,7 @@
             {% for snapshot in snapshots %}
                 {% if date == snapshot.date.format('Y-m-d') %}
                     <div class="col-xs-1 col-sm-6 col-md-3 mb-4">
-                        <a href="{{ asset(snapshot.movie) }}" class="snapshot-link">
+                        <a href="{{ asset(snapshot.movie ? snapshot.movie : snapshot.picture) }}" class="snapshot-link" data-template="{{ snapshot.movie ? '#snapshot-movie-template' : '#snapshot-picture-template' }}">
                             <img src="{{ asset(snapshot.thumbnail) }}" alt="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="img-fluid shadow-sm p-3 bg-light rounded">
                         </a>
                     </div>
@@ -33,7 +33,20 @@
 
     <div id="snapshot-view"></div>
 
-    <template id="snapshot-template">
+    <template id="snapshot-picture-template">
+        <div class="modal fade show" tabindex="-1" role="dialog" aria-hidden="true" style="display: block">
+            <div class="modal-dialog modal-xl">
+                <div class="modal-content bg-dark">
+                    <div class="modal-body">
+                        <img src="{src}" class="img-fluid">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal-backdrop fade show"></div>
+    </template>
+
+    <template id="snapshot-movie-template">
         <div class="modal fade show" tabindex="-1" role="dialog" aria-hidden="true" style="display: block">
             <div class="modal-dialog modal-xl">
                 <div class="modal-content bg-dark">