From e310ef0a04d4be5119f4a43fad0142d127980b2d Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Tue, 24 Apr 2018 01:23:06 +0200
Subject: [PATCH] Finalized video.omxplayer FE plugin

---
 .../http/static/css/video.omxplayer.css       |  4 ++
 .../backend/http/static/js/video.omxplayer.js | 17 ++++++-
 .../templates/plugins/video.omxplayer.html    | 44 ++++++++++++++++---
 3 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/platypush/backend/http/static/css/video.omxplayer.css b/platypush/backend/http/static/css/video.omxplayer.css
index 694bc0c3..aba2fd50 100644
--- a/platypush/backend/http/static/css/video.omxplayer.css
+++ b/platypush/backend/http/static/css/video.omxplayer.css
@@ -7,3 +7,7 @@
         width: 100%;
     }
 
+form#video-ctrl {
+    text-align: center;
+}
+
diff --git a/platypush/backend/http/static/js/video.omxplayer.js b/platypush/backend/http/static/js/video.omxplayer.js
index eeb7b674..493d2012 100644
--- a/platypush/backend/http/static/js/video.omxplayer.js
+++ b/platypush/backend/http/static/js/video.omxplayer.js
@@ -1,9 +1,10 @@
 $(document).ready(function() {
     var $container = $('#video-container'),
-        $form = $('#video-form');
+        $searchForm = $('#video-search'),
+        $ctrlForm = $('#video-ctrl');
 
     var initBindings = function() {
-        $form.on('submit', function(event) {
+        $searchForm.on('submit', function(event) {
             var formData = $(this).serializeArray().reduce(function(obj, item) {
                 var value = item.value.trim();
                 if (value.length > 0) {
@@ -32,6 +33,18 @@ $(document).ready(function() {
 
             return false;
         });
+
+        $searchForm.find('button[data-action]').on('click', function(evt) {
+            var action = $(this).data('action');
+            var $btn = $(this);
+
+            execute(
+                {
+                    type: 'request',
+                    action: 'video.omxplayer.' + action,
+                }
+            );
+        });
     };
 
     var init = function() {
diff --git a/platypush/backend/http/templates/plugins/video.omxplayer.html b/platypush/backend/http/templates/plugins/video.omxplayer.html
index 32dae582..6e97464d 100644
--- a/platypush/backend/http/templates/plugins/video.omxplayer.html
+++ b/platypush/backend/http/templates/plugins/video.omxplayer.html
@@ -2,18 +2,48 @@
 <link rel="stylesheet" href="{{ url_for('static', filename='css/video.omxplayer.css') }}"></script>
 
 <div class="row" id="video-container">
-    <form action="#" id="video-form">
-        <div class="eleven columns">
+    <form action="#" id="video-search">
+        <div class="row">
             <label for="resource">
                 Supported formats: <tt>file://[path]</tt>, <tt>https://www.youtube.com/?v=[video_id]</tt>
             </label>
-            <input type="text" name="resource" placeholder="Video URL">
         </div>
-        <div class="one column">
-            <button type="submit">
-                <i class="fa fa-podcast"></i>
-            </button>
+
+        <div class="row">
+            <div class="eleven columns">
+                <input type="text" name="resource" placeholder="Video URL">
+            </div>
+            <div class="one column">
+                <button type="submit">
+                    <i class="fa fa-podcast"></i>
+                </button>
+            </div>
         </div>
     </form>
+
+    <form action="#" id="video-ctrl">
+        <div class="row">
+            <div class="ten columns offset-by-one">
+                <button data-action="previous">
+                    <i class="fa fa-step-backward"></i>
+                </button>
+
+                <button data-action="play">
+                    <i class="fa fa-play"></i>
+                </button>
+
+                <button data-action="pause">
+                    <i class="fa fa-pause"></i>
+                </button>
+
+                <button data-action="stop">
+                    <i class="fa fa-stop"></i>
+                </button>
+
+                <button data-action="next">
+                    <i class="fa fa-step-forward"></i>
+                </button>
+            </div>
+    </form>
 </div>