Finalized video.omxplayer FE plugin

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

View file

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

View file

@ -1,9 +1,10 @@
$(document).ready(function() { $(document).ready(function() {
var $container = $('#video-container'), var $container = $('#video-container'),
$form = $('#video-form'); $searchForm = $('#video-search'),
$ctrlForm = $('#video-ctrl');
var initBindings = function() { var initBindings = function() {
$form.on('submit', function(event) { $searchForm.on('submit', function(event) {
var formData = $(this).serializeArray().reduce(function(obj, item) { var formData = $(this).serializeArray().reduce(function(obj, item) {
var value = item.value.trim(); var value = item.value.trim();
if (value.length > 0) { if (value.length > 0) {
@ -32,6 +33,18 @@ $(document).ready(function() {
return false; 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() { var init = function() {

View file

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