diff --git a/airtime_mvc/application/layouts/scripts/layout.phtml b/airtime_mvc/application/layouts/scripts/layout.phtml
index 930218b91..1cb0da978 100644
--- a/airtime_mvc/application/layouts/scripts/layout.phtml
+++ b/airtime_mvc/application/layouts/scripts/layout.phtml
@@ -67,9 +67,25 @@
Stop
- Select
+ Cursor
+ Fade In
+ Fade Out
Shift
+
diff --git a/airtime_mvc/public/css/playlist_builder.css b/airtime_mvc/public/css/playlist_builder.css
index 19c06b848..7d828bd31 100644
--- a/airtime_mvc/public/css/playlist_builder.css
+++ b/airtime_mvc/public/css/playlist_builder.css
@@ -603,4 +603,10 @@ li.spl_empty {
.playlist-tracks {
overflow-x: auto;
overflow-y: hidden;
+}
+
+.playlist-fade {
+ position: absolute;
+ background-color: rgba(0,0,0,0.1);
+ z-index: 1000;
}
\ No newline at end of file
diff --git a/airtime_mvc/public/js/airtime/library/spl.js b/airtime_mvc/public/js/airtime/library/spl.js
index 40be88922..2aecd99a3 100644
--- a/airtime_mvc/public/js/airtime/library/spl.js
+++ b/airtime_mvc/public/js/airtime/library/spl.js
@@ -1120,15 +1120,16 @@ var AIRTIME = (function(AIRTIME){
{
src: $parent.data("fadein")
}
- ];
+ ],
+ dim = AIRTIME.utilities.findViewportDimensions();
$html.dialog({
modal: true,
title: "Fade Editor",
show: 'clip',
hide: 'clip',
- width: 900,
- height: 300,
+ width: dim.width - 100,
+ height: dim.height - 100,
buttons: [
//{text: "Submit", click: function() {doSomething()}},
{text: "Cancel", click: function() {$(this).dialog("close");}}
@@ -1163,7 +1164,8 @@ var AIRTIME = (function(AIRTIME){
src: uri
}],
cueIn = $li.find('.spl_cue_in').data("cueIn"),
- cueOut = $li.find('.spl_cue_out').data("cueOut");
+ cueOut = $li.find('.spl_cue_out').data("cueOut"),
+ dim = AIRTIME.utilities.findViewportDimensions();
$html.find('.editor-cue-in').val(cueIn);
$html.find('.editor-cue-out').val(cueOut);
@@ -1185,8 +1187,8 @@ var AIRTIME = (function(AIRTIME){
title: "Cue Editor",
show: 'clip',
hide: 'clip',
- width: 900,
- height: 300,
+ width: dim.width - 100,
+ height: dim.height - 100,
buttons: [
{text: "Save", click: function() {
var cueIn = $html.find('.editor-cue-in').val(),
diff --git a/airtime_mvc/public/js/waveformplaylist/controls.js b/airtime_mvc/public/js/waveformplaylist/controls.js
index 097f2fba3..d83af02f0 100644
--- a/airtime_mvc/public/js/waveformplaylist/controls.js
+++ b/airtime_mvc/public/js/waveformplaylist/controls.js
@@ -28,6 +28,10 @@ AudioControls.prototype.events = {
click: "stopAudio"
},
+ "btn_cursor": {
+ click: "changeState"
+ },
+
"btn_select": {
click: "changeState"
},
@@ -36,6 +40,15 @@ AudioControls.prototype.events = {
click: "changeState"
},
+ "btn_fadein": {
+ click: "changeState"
+ },
+
+ "btn_fadeout": {
+ click: "changeState"
+ },
+
+
"btns_fade": {
click: "createFade"
},
@@ -400,15 +413,25 @@ AudioControls.prototype.stopAudio = function() {
AudioControls.prototype.activateButton = function(el) {
if (el) {
- el.classList.remove(this.classes["disabled"]);
el.classList.add(this.classes["active"]);
}
};
+AudioControls.prototype.deactivateButton = function(el) {
+ if (el) {
+ el.classList.remove(this.classes["active"]);
+ }
+};
+
+AudioControls.prototype.enableButton = function(el) {
+ if (el) {
+ el.classList.remove(this.classes["disabled"]);
+ }
+};
+
AudioControls.prototype.disableButton = function(el) {
if (el) {
el.classList.add(this.classes["disabled"]);
- el.classList.remove(this.classes["active"]);
}
};
@@ -417,7 +440,7 @@ AudioControls.prototype.changeState = function(e) {
prevEl = el.parentElement.getElementsByClassName('active')[0],
state = el.dataset.state;
- this.disableButton(prevEl);
+ this.deactivateButton(prevEl);
this.activateButton(el);
this.config.setState(state);
diff --git a/airtime_mvc/public/js/waveformplaylist/track.js b/airtime_mvc/public/js/waveformplaylist/track.js
index b583ae4cb..a3123d0d7 100644
--- a/airtime_mvc/public/js/waveformplaylist/track.js
+++ b/airtime_mvc/public/js/waveformplaylist/track.js
@@ -5,6 +5,16 @@ var TrackEditor = function() {
};
TrackEditor.prototype.states = {
+ cursor: {
+ events: {
+ mousedown: "selectCursorPos"
+ },
+
+ classes: [
+ "state-select"
+ ]
+ },
+
select: {
events: {
mousedown: "selectStart"
@@ -14,6 +24,26 @@ TrackEditor.prototype.states = {
"state-select"
]
},
+
+ fadein: {
+ events: {
+ mousedown: "selectFadeIn"
+ },
+
+ classes: [
+ "state-select"
+ ]
+ },
+
+ fadeout: {
+ events: {
+ mousedown: "selectFadeOut"
+ },
+
+ classes: [
+ "state-select"
+ ]
+ },
shift: {
events: {
@@ -218,7 +248,7 @@ TrackEditor.prototype.timeShift = function(e) {
scroll = this.config.getTrackScroll(),
scrollX = scroll.left;
- origX = editor.leftOffset/res;
+ origX = editor.leftOffset / res;
//dynamically put an event on the element.
el.onmousemove = function(e) {
@@ -232,7 +262,7 @@ TrackEditor.prototype.timeShift = function(e) {
el.onmouseup = function() {
var delta;
- el.onmousemove = document.body.onmouseup = null;
+ el.onmousemove = el.onmouseup = null;
editor.leftOffset = editor.pixelsToSamples(updatedX);
delta = editor.pixelsToSeconds(diffX);
@@ -299,7 +329,10 @@ TrackEditor.prototype.setSelectedArea = function(start, end, shiftKey) {
var left,
right,
currentStart,
- currentEnd;
+ currentEnd,
+ sampLeft,
+ sampRight,
+ buffer = this.getBuffer();
//extending selected area since shift is pressed.
if (shiftKey && (end - start === 0) && (this.prevSelectedArea !== undefined)) {
@@ -332,8 +365,11 @@ TrackEditor.prototype.setSelectedArea = function(start, end, shiftKey) {
right = end;
}
+ sampLeft = left === undefined ? 0 : this.pixelsToSamples(left);
+ sampRight = right === undefined ? buffer.length - 1 : this.pixelsToSamples(right);
+
this.prevSelectedArea = this.selectedArea;
- this.selectedArea = this.adjustSelectedArea(this.pixelsToSamples(left), this.pixelsToSamples(right));
+ this.selectedArea = this.adjustSelectedArea(sampLeft, sampRight);
};
TrackEditor.prototype.activateAudioSelection = function() {
@@ -398,9 +434,7 @@ TrackEditor.prototype.selectStart = function(e) {
};
el.onmouseup = function(e) {
var endX = e.layerX || e.offsetX,
- //endX = scrollX + (e.layerX || e.offsetX),
minX, maxX,
- cursorPos,
startTime, endTime;
minX = Math.min(startX, endX);
@@ -411,7 +445,7 @@ TrackEditor.prototype.selectStart = function(e) {
minX = editor.samplesToPixels(offset + editor.selectedArea.start);
maxX = editor.samplesToPixels(offset + editor.selectedArea.end);
- el.onmousemove = document.body.onmouseup = null;
+ el.onmousemove = el.onmouseup = null;
//if more than one pixel is selected, listen to possible fade events.
if (Math.abs(minX - maxX)) {
@@ -421,15 +455,79 @@ TrackEditor.prototype.selectStart = function(e) {
editor.deactivateAudioSelection();
}
- cursorPos = startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
+ startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
endTime = editor.samplesToSeconds(offset + editor.selectedArea.end);
editor.updateEditor(-1, undefined, undefined, true);
- editor.config.setCursorPos(cursorPos);
+ editor.config.setCursorPos(startTime);
editor.notifySelectUpdate(startTime, endTime);
};
};
+TrackEditor.prototype.selectCursorPos = function(e) {
+ var editor = this,
+ startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
+ offset = this.leftOffset,
+ startTime,
+ endTime;
+
+ if (e.target.tagName !== "CANVAS") {
+ return;
+ }
+
+ editor.setSelectedArea(startX, startX);
+ startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
+ endTime = editor.samplesToSeconds(offset + editor.selectedArea.end);
+
+ editor.updateEditor(-1, undefined, undefined, true);
+ editor.config.setCursorPos(startTime);
+ editor.notifySelectUpdate(startTime, endTime);
+
+ editor.deactivateAudioSelection();
+};
+
+TrackEditor.prototype.selectFadeIn = function(e) {
+ var editor = this,
+ startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
+ offset = this.leftOffset,
+ startTime,
+ endTime;
+
+ if (e.target.tagName !== "CANVAS") {
+ return;
+ }
+
+ editor.setSelectedArea(undefined, startX);
+ startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
+ endTime = editor.samplesToSeconds(offset + editor.selectedArea.end);
+
+ editor.updateEditor(-1, undefined, undefined, true);
+ editor.notifySelectUpdate(startTime, endTime);
+
+ editor.activateAudioSelection();
+};
+
+TrackEditor.prototype.selectFadeOut = function(e) {
+ var editor = this,
+ startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
+ offset = this.leftOffset,
+ startTime,
+ endTime;
+
+ if (e.target.tagName !== "CANVAS") {
+ return;
+ }
+
+ editor.setSelectedArea(startX, undefined);
+ startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
+ endTime = editor.samplesToSeconds(offset + editor.selectedArea.end);
+
+ editor.updateEditor(-1, undefined, undefined, true);
+ editor.notifySelectUpdate(startTime, endTime);
+
+ editor.activateAudioSelection();
+};
+
/* end of state methods */
TrackEditor.prototype.saveFade = function(id, type, shape, start, end) {