From d2ce6f975ede92fff941dfb968be7dfb3992b391 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Jaussoin?= <edhelas@movim.eu>
Date: Wed, 19 Jun 2019 12:54:44 +0200
Subject: [PATCH] Add Snap widget to take quick photos Link it ti PublishBrief
 (Chat soon)

---
 app/views/news.tpl                            |   1 +
 .../_publishbrief_embed_default.tpl           |   7 +
 app/widgets/PublishBrief/locales.ini          |   1 +
 app/widgets/Snap/Snap.php                     |  12 ++
 app/widgets/Snap/snap.css                     |  78 +++++++++++
 app/widgets/Snap/snap.js                      | 129 ++++++++++++++++++
 app/widgets/Snap/snap.tpl                     |  24 ++++
 app/widgets/Upload/upload.js                  |  12 +-
 8 files changed, 260 insertions(+), 4 deletions(-)
 create mode 100644 app/widgets/Snap/Snap.php
 create mode 100644 app/widgets/Snap/snap.css
 create mode 100644 app/widgets/Snap/snap.js
 create mode 100644 app/widgets/Snap/snap.tpl

diff --git a/app/views/news.tpl b/app/views/news.tpl
index a60b586be..050de6652 100644
--- a/app/views/news.tpl
+++ b/app/views/news.tpl
@@ -8,6 +8,7 @@
 <?php $this->widget('SendTo');?>
 
 <?php $this->widget('PostActions');?>
+<?php $this->widget('Snap');?>
 
 <nav class="color dark">
     <?php $this->widget('Presence');?>
diff --git a/app/widgets/PublishBrief/_publishbrief_embed_default.tpl b/app/widgets/PublishBrief/_publishbrief_embed_default.tpl
index 5e9b28ead..7ddffe06a 100644
--- a/app/widgets/PublishBrief/_publishbrief_embed_default.tpl
+++ b/app/widgets/PublishBrief/_publishbrief_embed_default.tpl
@@ -1,3 +1,10 @@
+<a
+    class="button flat icon gray"
+    title="{$c->__('publishbrief.add_snap')}"
+    href="#"
+    onclick="Snap.init()">
+    <i class="material-icons">camera_alt</i>
+</a>
 <a
     class="button flat icon gray"
     title="{$c->__('publishbrief.add_link')}"
diff --git a/app/widgets/PublishBrief/locales.ini b/app/widgets/PublishBrief/locales.ini
index 645e6dd4d..cc0a3c78f 100644
--- a/app/widgets/PublishBrief/locales.ini
+++ b/app/widgets/PublishBrief/locales.ini
@@ -2,6 +2,7 @@
 placeholder = "What’s new?"
 post        = Write a post
 add_link    = Add a link
+add_snap    = Take a picture
 no_title    = Please provide a title
 preview     = Preview
 attach      = Add a file or a picture
diff --git a/app/widgets/Snap/Snap.php b/app/widgets/Snap/Snap.php
new file mode 100644
index 000000000..467580176
--- /dev/null
+++ b/app/widgets/Snap/Snap.php
@@ -0,0 +1,12 @@
+<?php
+
+use Movim\Widget\Base;
+
+class Snap extends Base
+{
+    public function load()
+    {
+        $this->addjs('snap.js');
+        $this->addcss('snap.css');
+    }
+}
diff --git a/app/widgets/Snap/snap.css b/app/widgets/Snap/snap.css
new file mode 100644
index 000000000..1d93227e8
--- /dev/null
+++ b/app/widgets/Snap/snap.css
@@ -0,0 +1,78 @@
+#snap {
+    top: 0;
+    left: 0;
+    background-color: #111;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    display: none;
+}
+
+#snap canvas {
+    border: 1rem #333 solid;
+    box-sizing: border-box;
+}
+
+#snap canvas,
+#snap video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+#snap select#snapsource {
+    display: none;
+}
+
+#snap canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#snap button#snapshoot,
+#snap button#snapupload {
+    right: calc(50% - 3.5rem);
+    position: absolute;
+    bottom: 2rem;
+}
+
+#snap button#snapswitch {
+    left: 2rem;
+}
+
+/* Controls */
+#snap ul.controls.list {
+    position: absolute;
+    width: 100%;
+    top: 0;
+}
+
+#snap ul.controls.list > li {
+    padding: 3rem;
+}
+
+#snap ul.controls.list > li span {
+    padding: 2rem;
+}
+
+#snap ul.controls.list > li span.primary {
+    left: 0;
+}
+
+/* States */
+#snap.shoot,
+#snap.upload {
+    display: block;
+}
+
+#snap.shoot ul.controls.list > li#snapback,
+#snap.shoot #snapupload,
+#snap.shoot #snapclose,
+#snap.shoot canvas,
+#snap.upload ul.controls.list > li#snapclose,
+#snap.upload #snapshoot,
+#snap.upload #snapback,
+#snap.upload #snapswitch {
+    display: none;
+}
diff --git a/app/widgets/Snap/snap.js b/app/widgets/Snap/snap.js
new file mode 100644
index 000000000..7894ea6ea
--- /dev/null
+++ b/app/widgets/Snap/snap.js
@@ -0,0 +1,129 @@
+var Snap = {
+    snap: undefined,
+    video: undefined,
+    videoSelect: undefined,
+    canvas: undefined,
+
+    gotStream: function() {
+        const constraints = {
+            video: {
+                deviceId: Snap.videoSelect.value,
+                width: {ideal: 1280},
+                height: {ideal: 720}
+            }
+        };
+
+        if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+            navigator.mediaDevices.getUserMedia(constraints)
+                .then(stream => {
+                    Snap.video.srcObject = stream;
+                });
+        }
+    },
+    gotDevices: function(deviceInfos) {
+        Snap.videoSelect.innerText = '';
+
+        const ids = [];
+
+        for (let i = 0; i !== deviceInfos.length; ++i) {
+            const deviceInfo = deviceInfos[i];
+
+            if (deviceInfo.kind === 'videoinput' && !ids.includes(deviceInfo.deviceId)) {
+                const option = document.createElement('option');
+                option.value = deviceInfo.deviceId;
+                option.text = deviceInfo.label;
+                Snap.videoSelect.add(option);
+                ids.push(deviceInfo.deviceId);
+            }
+        }
+
+        Snap.videoSelect.addEventListener('change', e => Snap.gotStream() );
+        Snap.gotStream();
+
+        snap.classList = 'shoot';
+    },
+    shoot: function() {
+        Snap.canvas.width = Snap.video.videoWidth;
+        Snap.canvas.height = Snap.video.videoHeight;
+        var context = Snap.canvas.getContext('2d');
+        context.drawImage(Snap.video, 0, 0, Snap.video.videoWidth, Snap.video.videoHeight);
+        Snap.video.pause();
+
+        Upload.name = 'snapshot.jpg';
+
+        Snap.canvas.toBlob(
+            function (blob) {
+                Upload.prepare(blob);
+            },
+            'image/jpeg',
+            0.85
+        );
+
+        Snap.snap.classList = 'upload';
+    },
+    clear: function() {
+        Snap.video.play();
+        var context = Snap.canvas.getContext('2d');
+        context.clearRect(0, 0, Snap.canvas.width, Snap.canvas.height);
+    },
+    close: function() {
+        let stream = Snap.video.srcObject;
+
+        if (stream) {
+            stream.getTracks().forEach(function(track) {
+                track.stop();
+            });
+        }
+
+        Snap.video.srcObject = null;
+    },
+    init : function() {
+
+        Snap.snap = document.querySelector('#snap');
+        Snap.video = document.querySelector('#snap video');
+        Snap.videoSelect = document.querySelector('#snap select#snapsource');
+        Snap.canvas = document.querySelector('#snap canvas');
+
+        Snap.close(); // Just in case
+
+        navigator.mediaDevices.enumerateDevices().then(devices => Snap.gotDevices(devices));
+
+        document.querySelector("#snap #snapshoot").addEventListener('click', function() {
+            Snap.shoot();
+        });
+
+        document.querySelector("#snap #snapupload").addEventListener('click', function() {
+            Upload.init();
+        });
+
+        document.querySelector("#snap #snapback").addEventListener('click', function() {
+            Snap.snap.classList = '';
+            Snap.close();
+        });
+
+        document.querySelector("#snap #snapclose").addEventListener('click', function() {
+            Snap.snap.classList = 'shoot';
+            Snap.video.play();
+        });
+
+        document.querySelector("#snap #snapswitch").addEventListener('click', function() {
+            Snap.videoSelect.selectedIndex++;
+
+            // No empty selection
+            if (Snap.videoSelect.selectedIndex == -1) {
+                Snap.videoSelect.selectedIndex++;
+            }
+
+            Snap.close();
+            Snap.gotStream();
+        });
+
+        Upload.attach(function(file) {
+            document.querySelector('input[name=embed]').value = file.uri;
+            PublishBrief.checkEmbed();
+
+            Snap.snap.classList = '';
+            Snap.close();
+        });
+    }
+}
\ No newline at end of file
diff --git a/app/widgets/Snap/snap.tpl b/app/widgets/Snap/snap.tpl
new file mode 100644
index 000000000..0da136c95
--- /dev/null
+++ b/app/widgets/Snap/snap.tpl
@@ -0,0 +1,24 @@
+<div id="snap">
+    <video autoplay></video>
+    <canvas id="snapcanvas"></canvas>
+    <select id="snapsource"></select>
+    <button id="snapshoot" class="button action color green">
+        <i class="material-icons">camera</i>
+    </button>
+    <button id="snapupload" class="button action color blue">
+        <i class="material-icons">publish</i>
+    </button>
+    <button id="snapswitch" class="button action color">
+        <i class="material-icons">switch_camera</i>
+    </button>
+    <ul class="list controls">
+        <li>
+            <span id="snapback" class="primary icon color transparent active">
+                <i class="material-icons">arrow_back</i>
+            </span>
+            <span id="snapclose" class="control icon color transparent active">
+                <i class="material-icons">close</i>
+            </span>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/app/widgets/Upload/upload.js b/app/widgets/Upload/upload.js
index 1f043f39d..76a0d94da 100644
--- a/app/widgets/Upload/upload.js
+++ b/app/widgets/Upload/upload.js
@@ -123,10 +123,14 @@ var Upload = {
         Upload.file = file;
 
         var preview = document.querySelector('#upload img.preview_picture');
-        if (Upload.file.type.match(/image.*/)) {
-            preview.src = URL.createObjectURL(Upload.file);
-        } else {
-            preview.src = '';
+
+        // If the preview system is there
+        if (preview) {
+            if (Upload.file.type.match(/image.*/)) {
+                preview.src = URL.createObjectURL(Upload.file);
+            } else {
+                preview.src = '';
+            }
         }
     },