Finalized video.omxplayer FE plugin

platypush/backend/http/static/css/video.omxplayer.css

@@ -7,3 +7,7 @@
         width: 100%;
     }
 
+form#video-ctrl {
+    text-align: center;
+}
+

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() {

platypush/backend/http/templates/plugins/video.omxplayer.html

@@ -2,11 +2,15 @@
 <link rel="stylesheet" href="{{ url_for('static', filename='css/video.omxplayer.css') }}"></script>
 
 <div class="row" id="video-container">
-    <form action="#" id="video-form">
+    <form action="#" id="video-search">
-        <div class="eleven columns">
+        <div class="row">
             <label for="resource">
                 Supported formats: <tt>file://[path]</tt>, <tt>https://www.youtube.com/?v=[video_id]</tt>
             </label>
+        </div>
+
+        <div class="row">
+            <div class="eleven columns">
                 <input type="text" name="resource" placeholder="Video URL">
             </div>
             <div class="one column">
@@ -14,6 +18,32 @@
                     <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>