diff --git a/platypush/backend/http/static/css/video.omxplayer.css b/platypush/backend/http/static/css/video.omxplayer.css index 694bc0c32..aba2fd50c 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 eeb7b6744..493d20127 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 32dae5824..6e97464db 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>