From f12c6db34f045b97bd035fb13c7e55fc1850f38e Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Fri, 19 Jul 2019 15:20:48 +0200
Subject: [PATCH] Added camera web panel

---
 .../source/webpanel/plugins/camera/index.scss | 39 +++++++++++++
 .../http/static/js/plugins/camera/index.js    | 58 +++++++++++++++++++
 platypush/backend/http/templates/nav.html     |  1 +
 .../http/templates/plugins/camera/index.html  | 23 ++++++++
 4 files changed, 121 insertions(+)
 create mode 100644 platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss
 create mode 100644 platypush/backend/http/static/js/plugins/camera/index.js
 create mode 100644 platypush/backend/http/templates/plugins/camera/index.html

diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss b/platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss
new file mode 100644
index 000000000..9b3693499
--- /dev/null
+++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss
@@ -0,0 +1,39 @@
+@import 'common/vars';
+
+.camera {
+    height: 90%;
+    margin-top: 7%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .camera-container {
+        min-width: 640px;
+        min-height: 480px;
+        position: relative;
+        background: black;
+        margin-bottom: 1em;
+
+        .frame, .no-frame {
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        .frame {
+            z-index: 1;
+        }
+
+        .no-frame {
+            display: flex;
+            background: rgba(0, 0, 0, 0.1);
+            color: white;
+            align-items: center;
+            justify-content: center;
+            z-index: 2;
+        }
+    }
+}
+
diff --git a/platypush/backend/http/static/js/plugins/camera/index.js b/platypush/backend/http/static/js/plugins/camera/index.js
new file mode 100644
index 000000000..6ce0edce2
--- /dev/null
+++ b/platypush/backend/http/static/js/plugins/camera/index.js
@@ -0,0 +1,58 @@
+Vue.component('camera', {
+    template: '#tmpl-camera',
+    props: ['config'],
+
+    data: function() {
+        return {
+            bus: new Vue({}),
+            streaming: false,
+            capturing: false,
+        };
+    },
+
+    computed: {
+        deviceId: function() {
+            return this.config.device_id || 0;
+        },
+    },
+
+    methods: {
+        startStreaming: function() {
+            if (this.streaming)
+                return;
+
+            this.streaming = true;
+            this.capturing = false;
+            this.$refs.frame.setAttribute('src', '/camera/' + this.deviceId + '/stream');
+        },
+
+        stopStreaming: function() {
+            if (!this.streaming)
+                return;
+
+            this.streaming = false;
+            this.capturing = false;
+            this.$refs.frame.removeAttribute('src');
+        },
+
+        capture: function() {
+            if (this.capturing)
+                return;
+
+            this.streaming = false;
+            this.capturing = true;
+            this.$refs.frame.setAttribute('src', '/camera/' + this.deviceId + '/frame');
+        },
+
+        onFrameLoaded: function(event) {
+            if (this.capturing) {
+                this.capturing = false;
+            }
+        },
+    },
+
+    mounted: function() {
+        this.$refs.frame.addEventListener('load', this.onFrameLoaded);
+    },
+});
+
diff --git a/platypush/backend/http/templates/nav.html b/platypush/backend/http/templates/nav.html
index 009d1de7f..950505205 100644
--- a/platypush/backend/http/templates/nav.html
+++ b/platypush/backend/http/templates/nav.html
@@ -1,5 +1,6 @@
 {%
     with pluginIcons = {
+        'camera': 'fas fa-camera',
         'light.hue': 'fa fa-lightbulb',
         'media.mplayer': 'fa fa-film',
         'media.mpv': 'fa fa-film',
diff --git a/platypush/backend/http/templates/plugins/camera/index.html b/platypush/backend/http/templates/plugins/camera/index.html
new file mode 100644
index 000000000..18d23b73a
--- /dev/null
+++ b/platypush/backend/http/templates/plugins/camera/index.html
@@ -0,0 +1,23 @@
+<script type="text/x-template" id="tmpl-camera">
+    <div class="camera">
+        <div class="camera-container">
+            <div class="no-frame" v-if="!streaming && !capturing">The camera is not active</div>
+            <img class="frame" ref="frame">
+        </div>
+
+        <div class="controls">
+            <button type="button" @click="startStreaming" :disabled="capturing" v-if="!streaming">
+                <i class="fa fa-play"></i>&nbsp; Start streaming
+            </button>
+
+            <button type="button" @click="stopStreaming" :disabled="capturing" v-else>
+                <i class="fa fa-stop"></i>&nbsp; Stop streaming
+            </button>
+
+            <button type="button" @click="capture" :disabled="streaming || capturing">
+                <i class="fas fa-camera"></i>&nbsp; Take snapshot
+            </button>
+        </div>
+    </div>
+</script>
+