From 7860f03db74100337ff809d1fdb93ea5314bd894 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Wed, 29 Apr 2020 20:14:23 +0200
Subject: [PATCH] add video title

---
 composer.json                     |  1 +
 public/assets/css/app.css         |  5 +++++
 public/assets/js/app.js           |  4 +++-
 src/Motion/Snapshot.php           | 14 ++++++++++++++
 src/Motion/SnapshotRepository.php |  2 ++
 symfony.lock                      | 12 ++++++++++++
 templates/events.html.twig        |  8 +++++++-
 7 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/composer.json b/composer.json
index 4e66108..10b080f 100644
--- a/composer.json
+++ b/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.*",
diff --git a/public/assets/css/app.css b/public/assets/css/app.css
index e0d17d5..e885cfb 100644
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -23,3 +23,8 @@
 .modal-movie video {
     border: 2px solid #333;
 }
+
+.modal-header {
+    border-bottom: 0;
+    color: #fff;
+}
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 295a891..2e83b0d 100644
--- a/public/assets/js/app.js
+++ b/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();
diff --git a/src/Motion/Snapshot.php b/src/Motion/Snapshot.php
index 5d3a7b8..eb57331 100644
--- a/src/Motion/Snapshot.php
+++ b/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;
+    }
 }
diff --git a/src/Motion/SnapshotRepository.php b/src/Motion/SnapshotRepository.php
index 3488450..ea3d7c2 100644
--- a/src/Motion/SnapshotRepository.php
+++ b/src/Motion/SnapshotRepository.php
@@ -16,6 +16,8 @@ class SnapshotRepository
 {
     protected ParameterBagInterface $parameters;
 
+    protected FFProbe $ffprobe;
+
     public function __construct(ParameterBagInterface $parameters)
     {
         $this->parameters = $parameters;
diff --git a/symfony.lock b/symfony.lock
index f9e87a5..29a5d49 100644
--- a/symfony.lock
+++ b/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"
     },
diff --git a/templates/events.html.twig b/templates/events.html.twig
index 206c726..4a6267e 100644
--- a/templates/events.html.twig
+++ b/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" />