add picture as snapshot
This commit is contained in:
parent
4bf10c0f11
commit
cb2b4321ad
|
@ -89,12 +89,14 @@ var CameraEvent = function() {
|
||||||
var SnapshotEvent = function() {
|
var SnapshotEvent = function() {
|
||||||
var links = document.querySelectorAll('.snapshot-link');
|
var links = document.querySelectorAll('.snapshot-link');
|
||||||
var view = document.querySelector('#snapshot-view');
|
var view = document.querySelector('#snapshot-view');
|
||||||
var template = document.querySelector('#snapshot-template');
|
|
||||||
var body = document.querySelector('body');
|
var body = document.querySelector('body');
|
||||||
|
|
||||||
forEach(links, function(i, link) {
|
forEach(links, function(i, link) {
|
||||||
link.addEventListener('click', function(e) {
|
link.addEventListener('click', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
|
var template = document.querySelector(link.getAttribute('data-template'));
|
||||||
|
|
||||||
body.classList.add('modal-open');
|
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'));
|
||||||
|
|
||||||
|
|
|
@ -13,6 +13,8 @@ class Snapshot
|
||||||
{
|
{
|
||||||
protected DateTime $date;
|
protected DateTime $date;
|
||||||
|
|
||||||
|
protected string $picture;
|
||||||
|
|
||||||
protected string $movie;
|
protected string $movie;
|
||||||
|
|
||||||
protected string $thumbnail;
|
protected string $thumbnail;
|
||||||
|
@ -29,6 +31,18 @@ class Snapshot
|
||||||
return $this->date;
|
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
|
public function setMovie(string $movie): self
|
||||||
{
|
{
|
||||||
$this->movie = $movie;
|
$this->movie = $movie;
|
||||||
|
|
|
@ -42,20 +42,33 @@ class SnapshotRepository
|
||||||
$files = $moviesFinder
|
$files = $moviesFinder
|
||||||
->files()
|
->files()
|
||||||
->in($directory->getPathName())
|
->in($directory->getPathName())
|
||||||
->name('*.mp4')
|
|
||||||
->sortByName();
|
->sortByName();
|
||||||
|
|
||||||
$date = $directory->getFilename();
|
$date = $directory->getFilename();
|
||||||
|
|
||||||
foreach ($files as $file) {
|
foreach ($files as $file) {
|
||||||
$time = str_replace(['.mp4', '-'], ['', ':'], $file->getBasename());
|
$time = str_replace(['.mp4', '.jpg', '-'], ['', '', ':'], $file->getBasename());
|
||||||
$thumbnail = str_replace('.mp4', '.jpg', $file->getPathName());
|
|
||||||
|
|
||||||
$snapshot = new Snapshot();
|
$snapshot = new Snapshot();
|
||||||
$snapshot
|
$snapshot->setDate(new \DateTime($date.' '.$time));
|
||||||
->setDate(new \DateTime($date.' '.$time))
|
|
||||||
->setMovie($file->getPathName())
|
if (substr($file->getFilename(), -3) === 'jpg') {
|
||||||
->setThumbnail($thumbnail);
|
$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;
|
$objects[] = $snapshot;
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
{% for snapshot in snapshots %}
|
{% for snapshot in snapshots %}
|
||||||
{% if date == snapshot.date.format('Y-m-d') %}
|
{% if date == snapshot.date.format('Y-m-d') %}
|
||||||
<div class="col-xs-1 col-sm-6 col-md-3 mb-4">
|
<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">
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -33,7 +33,20 @@
|
||||||
|
|
||||||
<div id="snapshot-view"></div>
|
<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 fade show" tabindex="-1" role="dialog" aria-hidden="true" style="display: block">
|
||||||
<div class="modal-dialog modal-xl">
|
<div class="modal-dialog modal-xl">
|
||||||
<div class="modal-content bg-dark">
|
<div class="modal-content bg-dark">
|
||||||
|
|
Loading…
Reference in a new issue