forked from platypush/platypush
Finalized video.omxplayer FE plugin
This commit is contained in:
parent
b5b61f0442
commit
e310ef0a04
3 changed files with 56 additions and 9 deletions
|
@ -7,3 +7,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
form#video-ctrl {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -2,11 +2,15 @@
|
||||||
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="eleven columns">
|
||||||
<input type="text" name="resource" placeholder="Video URL">
|
<input type="text" name="resource" placeholder="Video URL">
|
||||||
</div>
|
</div>
|
||||||
<div class="one column">
|
<div class="one column">
|
||||||
|
@ -14,6 +18,32 @@
|
||||||
<i class="fa fa-podcast"></i>
|
<i class="fa fa-podcast"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue