From 2da6d7d86670e4df449cab07d3d5b3c661b774b8 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Sat, 22 Jun 2019 14:41:42 +0200
Subject: [PATCH] New media webplugin WIP

---
 .../http/static/js/plugins/media/index.js     | 26 +++++++++++++++++--
 .../templates/plugins/media/controls.html     |  2 +-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/platypush/backend/http/static/js/plugins/media/index.js b/platypush/backend/http/static/js/plugins/media/index.js
index f9ae99e6c..4745c90cf 100644
--- a/platypush/backend/http/static/js/plugins/media/index.js
+++ b/platypush/backend/http/static/js/plugins/media/index.js
@@ -129,9 +129,17 @@ Vue.component('media', {
             this.selectedDevice = device;
         },
 
+        syncPosition: function(status) {
+            status._syncTime = {
+                timestamp: new Date(),
+                position: status.position,
+            };
+        },
+
         onStatusUpdate: function(event) {
             const dev = event.device;
             const status = event.status;
+            this.syncPosition(status);
 
             if (!this.status[dev.type])
                 Vue.set(this.status, dev.type, {});
@@ -140,6 +148,7 @@ Vue.component('media', {
 
         onMediaEvent: async function(event) {
             let status = await request(event.plugin + '.status');
+            this.syncPosition(status);
 
             if (event.resource) {
                 event.url = event.resource;
@@ -150,9 +159,20 @@ Vue.component('media', {
                 event.plugin = event.plugin.substr(6);
 
             if (this.status[event.player] && this.status[event.player][event.plugin])
-                this.status[event.player][event.plugin] = status;
+                Vue.set(this.status[event.player], event.plugin, status);
             else if (this.status[event.plugin] && this.status[event.plugin][event.player])
-                this.status[event.plugin][event.player] = status;
+                Vue.set(this.status[event.plugin], event.player, status);
+        },
+
+        timerFunc: function() {
+            for (const [playerType, players] of Object.entries(this.status)) {
+                for (const [playerName, status] of Object.entries(players)) {
+                    if (status.state === 'play' && !isNaN(status.position) && status._syncTime) {
+                        status.position = status._syncTime.position +
+                            ((new Date()).getTime()/1000) - (status._syncTime.timestamp.getTime()/1000);
+                    }
+                }
+            }
         },
     },
 
@@ -181,6 +201,8 @@ Vue.component('media', {
         this.bus.$on('results-loading', this.onResultsLoading);
         this.bus.$on('results-ready', this.onResultsReady);
         this.bus.$on('status-update', this.onStatusUpdate);
+
+        setInterval(this.timerFunc, 1000);
     },
 });
 
diff --git a/platypush/backend/http/templates/plugins/media/controls.html b/platypush/backend/http/templates/plugins/media/controls.html
index 74e1c9191..1e5f76c70 100644
--- a/platypush/backend/http/templates/plugins/media/controls.html
+++ b/platypush/backend/http/templates/plugins/media/controls.html
@@ -27,7 +27,7 @@
                        v-model="status.position"
                        @input="bus.$emit('seek', $event.target.value)"
                        class="slider seek-slider"
-                       :disabled="!status.seekable || !status.duration"
+                       :disabled="!status.seekable"
                        min="0"
                        :max="status.duration || 0">
                 <span class="total-time" v-text="status.duration ? convertTime(status.duration) : '-:--'"></span>