lukmangrd/platypush
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Finalized video.omxplayer FE plugin

Browse source
This commit is contained in:
Fabio Manganiello 2018-04-24 01:23:06 +02:00
parent b5b61f0442
commit e310ef0a04
3 changed files with 56 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
platypush/backend/http/static/css/video.omxplayer.css
View file

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

17
platypush/backend/http/static/js/video.omxplayer.js
View file

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

34
platypush/backend/http/templates/plugins/video.omxplayer.html
View file

@ -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">
<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>
</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>