Congegni
/
sintonia
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CC-5108 Waveform Editor UI

This commit is contained in:
Naomi 2013-05-13 16:01:06 -04:00
parent 2ba743a436
commit 872f68505b
7 changed files with 113 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
airtime_mvc/application/controllers/LibraryController.php
View File

@ -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');

40
airtime_mvc/application/layouts/scripts/layout.phtml
View File

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

12
airtime_mvc/public/css/bootstrap.css vendored
View File

@ -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],

25
airtime_mvc/public/css/playlist_builder.css
View File

@ -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;
}

74
airtime_mvc/public/css/waveform.css Normal file
View File

@ -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;
}

20
airtime_mvc/public/js/airtime/library/spl.js
View File

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

2
airtime_mvc/public/js/waveformplaylist/controls.js vendored
View File

@ -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);
}
};