CC-5108 Waveform Editor UI
This commit is contained in:
parent
2ba743a436
commit
872f68505b
|
@ -49,6 +49,7 @@ class LibraryController extends Zend_Controller_Action
|
|||
$this->view->headLink()->appendStylesheet($baseUrl.'css/jquery.contextMenu.css?'.$CC_CONFIG['airtime_version']);
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'css/datatables/css/ColVis.css?'.$CC_CONFIG['airtime_version']);
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'css/datatables/css/ColReorder.css?'.$CC_CONFIG['airtime_version']);
|
||||
$this->view->headLink()->appendStylesheet($baseUrl.'css/waveform.css?'.$CC_CONFIG['airtime_version']);
|
||||
|
||||
$this->view->headScript()->appendFile($baseUrl.'js/airtime/library/spl.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
|
||||
$this->view->headScript()->appendFile($baseUrl.'js/airtime/playlist/smart_blockbuilder.js?'.$CC_CONFIG['airtime_version'], 'text/javascript');
|
||||
|
|
|
@ -38,22 +38,22 @@
|
|||
<div class="waveform-cues">
|
||||
<div class="playlist-tracks"></div>
|
||||
<div class="playlist-controls">
|
||||
<span class="btn_play ui-state-default">Play</span>
|
||||
<span class="btn_stop ui-state-default">Stop</span>
|
||||
<a class="btn btn-small btn_play"><i class="icon-play icon-white"></i>Play</a>
|
||||
<a class="btn btn-small btn_stop"><i class="icon-stop icon-white"></i>Stop</a>
|
||||
<label class="audio audio_pos">00:00:00.0</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" class="audio_start">
|
||||
<input type="button" class="set-cue-in" value="Set Cue In">
|
||||
<input type="text" class="audio_end">
|
||||
<input type="button" class="set-cue-out" value="Set Cue Out">
|
||||
<input type="text" class="audio_pos">
|
||||
</div>
|
||||
<div>
|
||||
<div class="set-cue">
|
||||
<label for="editor-cue-in">Cue In</label>
|
||||
<input type="text" id="editor-cue-in" class="editor-cue-in">
|
||||
<span style="display:none" class="cue-in-error"></span>
|
||||
<input type="text" class="audio_start">
|
||||
<input type="button" class="btn btn-small set-cue-in" value="Set Cue In">
|
||||
<label class="audio editor-cue-in">00:00:00.0</label>
|
||||
<span style="display:none" class="cue-in-error"></span>
|
||||
</div>
|
||||
<div class="set-cue">
|
||||
<label for="editor-cue-out">Cue Out</label>
|
||||
<input type="text" id="editor-cue-out" class="editor-cue-out">
|
||||
<input type="text" class="audio_end">
|
||||
<input type="button" class="btn btn-small set-cue-out" value="Set Cue Out">
|
||||
<label class="audio editor-cue-out">00:00:00.0</label>
|
||||
<span style="display:none" class="cue-out-error"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -62,14 +62,14 @@
|
|||
<script id="tmpl-pl-fades" type="text/template">
|
||||
<div class="waveform-fades">
|
||||
<div class="playlist-tracks"></div>
|
||||
<div>
|
||||
<span class="btn_play ui-state-default">Play</span>
|
||||
<span class="btn_stop ui-state-default">Stop</span>
|
||||
<div class="playlist-controls left-floated">
|
||||
<a class="btn btn-small btn_play"><i class="icon-play icon-white"></i>Play</a>
|
||||
<a class="btn btn-small btn_stop"><i class="icon-stop icon-white"></i>Stop</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="btn_select ui-state-default" data-state="cursor">Cursor</span>
|
||||
<span class="btn_fadein ui-state-default" data-state="fadein">Fade In</span>
|
||||
<span class="btn_fadeout ui-state-default" data-state="fadeout">Fade Out</span>
|
||||
<div class="set-fade left-floated">
|
||||
<a type="button" class="btn btn-small btn_cursor" data-state="cursor">Cursor</a>
|
||||
<a type="button" class="btn btn-small btn_fadein" data-state="fadein">Fade In</a>
|
||||
<a type="button" class="btn btn-small btn_fadeout" data-state="fadeout">Fade Out</a>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
@ -190,13 +190,15 @@ a.badge:hover {
|
|||
}
|
||||
.btn.active,
|
||||
.btn:active {
|
||||
background-color: #494949;
|
||||
background-color: #494949 \9;
|
||||
background-color: #434343;
|
||||
background-color: #434343 \9;
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
-webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,.25), 0 1px 0 rgba(200,200,200,1);
|
||||
-moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.25), 0 1px 0 rgba(200,200,200,1);
|
||||
box-shadow: inset 0 2px 3px rgba(0,0,0,.25), 0 1px 0 rgba(220,220,220,1);
|
||||
border: 1px solid #131313;
|
||||
color: #a5a5a5 !important ;
|
||||
}
|
||||
.btn.disabled,
|
||||
.btn[disabled],
|
||||
|
|
|
@ -584,29 +584,4 @@ li.spl_empty {
|
|||
}
|
||||
.expand-block-separate {
|
||||
border-top: 1px solid #5B5B5B;
|
||||
}
|
||||
|
||||
.channel-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.channel {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.state-select {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.playlist-tracks {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.playlist-fade {
|
||||
position: absolute;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
}
|
|
@ -0,0 +1,74 @@
|
|||
.ui-dialog .ui-dialog-content {
|
||||
padding: 0px;
|
||||
}
|
||||
.ui-dialog .ui-dialog-buttonpane {
|
||||
padding: 0.3em 0.2em 0 0.4em;
|
||||
margin: 0 -0.4em 0;
|
||||
}
|
||||
.btn-small [class^="icon-"] {
|
||||
margin: 1px 5px 0 -3px;
|
||||
}
|
||||
.btn {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.btn-small {
|
||||
/*line-height: 20px;*/
|
||||
}
|
||||
.playlist-tracks {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.playlist-controls {
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.channel-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.channel {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #3e3e3e;
|
||||
}
|
||||
|
||||
.state-select {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.playlist-tracks {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.playlist-fade {
|
||||
position: absolute;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
.set-cue {
|
||||
margin: 12px 0 16px 0;
|
||||
}
|
||||
.set-fade {
|
||||
margin: 0 0 0 30px;
|
||||
}
|
||||
.set-cue input[type="text"] {
|
||||
vertical-align: middle;
|
||||
padding: 5px 3px 4px 3px;
|
||||
}
|
||||
.set-cue input[type="button"] {
|
||||
min-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
label {
|
||||
color:#333;
|
||||
padding: 0 5px 0 6px;
|
||||
display: inline-block;
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
label.audio {
|
||||
font-weight:bold;
|
||||
vertical-align: middle;
|
||||
}
|
|
@ -1223,8 +1223,8 @@ var AIRTIME = (function(AIRTIME){
|
|||
width: dim.width - 100,
|
||||
height: dim.height - 100,
|
||||
buttons: [
|
||||
{text: "Cancel", click: removeDialog},
|
||||
{text: "Save", click: function() {
|
||||
{text: "Cancel", class: "btn btn-small", click: removeDialog},
|
||||
{text: "Save", class: "btn btn-small btn-inverse", click: function() {
|
||||
var json = playlistEditor.getJson(),
|
||||
offset,
|
||||
fadeIn, fadeOut,
|
||||
|
@ -1305,19 +1305,19 @@ var AIRTIME = (function(AIRTIME){
|
|||
$html.remove();
|
||||
}
|
||||
|
||||
$html.find('.editor-cue-in').val(cueIn);
|
||||
$html.find('.editor-cue-out').val(cueOut);
|
||||
$html.find('.editor-cue-in').html(cueIn);
|
||||
$html.find('.editor-cue-out').html(cueOut);
|
||||
|
||||
$html.on("click", ".set-cue-in", function(e) {
|
||||
var cueIn = $html.find('.audio_start').val();
|
||||
|
||||
$html.find('.editor-cue-in').val(cueIn);
|
||||
$html.find('.editor-cue-in').html(cueIn);
|
||||
});
|
||||
|
||||
$html.on("click", ".set-cue-out", function(e) {
|
||||
var cueOut = $html.find('.audio_end').val();
|
||||
|
||||
$html.find('.editor-cue-out').val(cueOut);
|
||||
$html.find('.editor-cue-out').html(cueOut);
|
||||
});
|
||||
|
||||
$html.dialog({
|
||||
|
@ -1328,10 +1328,10 @@ var AIRTIME = (function(AIRTIME){
|
|||
width: dim.width - 100,
|
||||
height: dim.height - 100,
|
||||
buttons: [
|
||||
{text: "Cancel", click: removeDialog},
|
||||
{text: "Save", click: function() {
|
||||
var cueIn = $html.find('.editor-cue-in').val(),
|
||||
cueOut = $html.find('.editor-cue-out').val();
|
||||
{text: "Cancel", class: "btn btn-small", click: removeDialog},
|
||||
{text: "Save", class: "btn btn-small btn-inverse", click: function() {
|
||||
var cueIn = $html.find('.editor-cue-in').html(),
|
||||
cueOut = $html.find('.editor-cue-out').html();
|
||||
|
||||
playlistEditor.stop();
|
||||
|
||||
|
|
|
@ -556,7 +556,7 @@ AudioControls.prototype.onCursorSelection = function(args) {
|
|||
*/
|
||||
AudioControls.prototype.onAudioUpdate = function(args) {
|
||||
if (this.ctrls["audio_pos"]) {
|
||||
this.ctrls["audio_pos"].value = this.cueFormatters(this.timeFormat)(args.seconds);
|
||||
this.ctrls["audio_pos"].innerHTML = this.cueFormatters(this.timeFormat)(args.seconds);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue