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

CC-2301 : creating different states for the fade editor: 

cursor, fadein, fadeout.
This commit is contained in:
Naomi 2013-04-23 16:36:35 -04:00
parent 04a0d9c54e
commit 956bcccd24
5 changed files with 164 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,9 +67,25 @@
<span class="btn_stop ui-state-default">Stop</span>
</div>
<div>
<span class="btn_select ui-state-default" data-state="select">Select</span>
<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>
<span class="btn_shift ui-state-default" data-state="shift">Shift</span>
</div>
<div id="btns_fade" class="btns_fade">
<div class="fade-in-ctrls">
<a class="disabled" data-type="FadeIn" data-shape="linear">Linear</a>
<a class="disabled" data-type="FadeIn" data-shape="logarithmic">Logarithmic</a>
<a class="disabled" data-type="FadeIn" data-shape="sCurve">S-Curve</a>
<a class="disabled" data-type="FadeIn" data-shape="exponential">Exponential</a>
</div>
<div class="fade-out-ctrls">
<a class="disabled" data-type="FadeOut" data-shape="linear">Linear</a>
<a class="disabled" data-type="FadeOut" data-shape="logarithmic">Logarithmic</a>
<a class="disabled" data-type="FadeOut" data-shape="sCurve">S-Curve</a>
<a class="disabled" data-type="FadeOut" data-shape="exponential">Exponential</a>
</div>
</div>
</div>
</script>
</body>

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

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

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

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

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

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

116
airtime_mvc/public/js/waveformplaylist/track.js
View File

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