add video title

composer.json

@@ -5,6 +5,7 @@
         "php": "^7.1.3",
         "ext-ctype": "*",
         "ext-iconv": "*",
+        "php-ffmpeg/php-ffmpeg": "^0.16.0",
         "sensio/framework-extra-bundle": "^5.1",
         "symfony/apache-pack": "^1.0",
         "symfony/asset": "4.4.*",

public/assets/css/app.css

@@ -23,3 +23,8 @@
 .modal-movie video {
     border: 2px solid #333;
 }
+
+.modal-header {
+    border-bottom: 0;
+    color: #fff;
+}

public/assets/js/app.js

@@ -98,7 +98,9 @@ var SnapshotEvent = function() {
             var template = document.querySelector(link.getAttribute('data-template'));
 
             body.classList.add('modal-open');
-            view.innerHTML = template.innerHTML.replace(/{src}/g, link.getAttribute('href'));
+            view.innerHTML = template.innerHTML
+                .replace(/{src}/g, link.getAttribute('href'))
+                .replace(/{title}/g, link.getAttribute('data-title'));
 
             view.querySelector('.modal').addEventListener('click', function() {
                 e.preventDefault();

src/Motion/Snapshot.php

@@ -21,6 +21,8 @@ class Snapshot
 
     protected string $thumbnailChecksum;
 
+    protected string $duration;
+
     public function setDate(DateTime $date): self
     {
         $this->date = $date;
@@ -80,4 +82,16 @@ class Snapshot
     {
         return $this->thumbnailChecksum;
     }
+
+    public function setDuration(string $duration): self
+    {
+        $this->duration = $duration;
+
+        return $this;
+    }
+
+    public function getDuration(): ? string
+    {
+        return $this->duration;
+    }
 }

src/Motion/SnapshotRepository.php

@@ -16,6 +16,8 @@ class SnapshotRepository
 {
     protected ParameterBagInterface $parameters;
 
+    protected FFProbe $ffprobe;
+
     public function __construct(ParameterBagInterface $parameters)
     {
         $this->parameters = $parameters;

symfony.lock

@@ -1,4 +1,7 @@
 {
+    "alchemy/binary-driver": {
+        "version": "v5.2.0"
+    },
     "doctrine/annotations": {
         "version": "1.0",
         "recipe": {
@@ -90,12 +93,18 @@
     "egulias/email-validator": {
         "version": "2.1.17"
     },
+    "evenement/evenement": {
+        "version": "v3.0.1"
+    },
     "jdorn/sql-formatter": {
         "version": "v1.2.17"
     },
     "monolog/monolog": {
         "version": "1.25.3"
     },
+    "neutron/temporary-filesystem": {
+        "version": "2.4"
+    },
     "nikic/php-parser": {
         "version": "v4.3.0"
     },
@@ -108,6 +117,9 @@
     "php": {
         "version": "7.4"
     },
+    "php-ffmpeg/php-ffmpeg": {
+        "version": "v0.16"
+    },
     "phpdocumentor/reflection-common": {
         "version": "2.0.0"
     },

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 ? snapshot.movie : snapshot.picture) }}" class="snapshot-link" data-template="{{ snapshot.movie ? '#snapshot-movie-template' : '#snapshot-picture-template' }}">
+                        <a href="{{ asset(snapshot.movie ? snapshot.movie : snapshot.picture) }}" data-title="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="snapshot-link" data-template="{{ snapshot.movie ? '#snapshot-movie-template' : '#snapshot-picture-template' }}">
                             <img src="{{ asset(snapshot.thumbnail) }}?v={{ snapshot.thumbnailChecksum }}" alt="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="img-fluid shadow-sm p-3 bg-light rounded">
                         </a>
                     </div>
@@ -37,6 +37,9 @@
         <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-header">
+                        <h5 class="modal-title">{title}</h5>
+                    </div>
                     <div class="modal-body">
                         <img src="{src}" class="img-fluid">
                     </div>
@@ -50,6 +53,9 @@
         <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-header">
+                        <h5 class="modal-title">{title}</h5>
+                    </div>
                     <div class="modal-body">
                         <video controls class="modal-movie border border-dark shadow-sm rounded-lg">
                             <source src="{src}" type="video/mp4" />