CC-2301 : automatically updating the fadein/fadeout for a track in the fadein/fadeout states.
Can enable states on a per track basis.
This commit is contained in:
Naomi
parent
628af95325
commit
a4731d4af2
6 changed files with 162 additions and 123 deletions
|
|
@ -72,20 +72,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -1126,7 +1126,10 @@ var AIRTIME = (function(AIRTIME){
|
|||
type: "FadeOut",
|
||||
end: $fadeOut.data("cueout") - $fadeOut.data("cuein"),
|
||||
start: $fadeOut.data("cueout") - $fadeOut.data("cuein") - $fadeOut.data("length")
|
||||
}]
|
||||
}],
|
||||
states: {
|
||||
'fadein': false
|
||||
}
|
||||
},
|
||||
{
|
||||
src: $fadeIn.data("fadein"),
|
||||
|
|
@ -1138,7 +1141,10 @@ var AIRTIME = (function(AIRTIME){
|
|||
type: "FadeIn",
|
||||
end: $fadeIn.data("length"),
|
||||
start: 0
|
||||
}]
|
||||
}],
|
||||
states: {
|
||||
'fadeout': false
|
||||
}
|
||||
}
|
||||
],
|
||||
dim = AIRTIME.utilities.findViewportDimensions(),
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ var Config = function(params) {
|
|||
resolution: 4096, //resolution - samples per pixel to draw.
|
||||
timeFormat: 'hh:mm:ss.uuu',
|
||||
mono: true, //whether to draw multiple channels or combine them.
|
||||
fadeType: 'logarithmic',
|
||||
|
||||
timescale: false, //whether or not to include the time measure.
|
||||
|
||||
|
|
@ -64,6 +65,10 @@ var Config = function(params) {
|
|||
return params.timescale;
|
||||
};
|
||||
|
||||
that.getFadeType = function getFadeType() {
|
||||
return params.fadeType;
|
||||
};
|
||||
|
||||
that.isDisplayMono = function isDisplayMono() {
|
||||
return params.mono;
|
||||
};
|
||||
|
|
@ -141,6 +146,10 @@ var Config = function(params) {
|
|||
params.timeFormat = format;
|
||||
};
|
||||
|
||||
that.setFadeType = function setFadeType(type) {
|
||||
params.fadeType = type;
|
||||
};
|
||||
|
||||
that.setDisplayMono = function setDisplayMono(bool) {
|
||||
params.mono = bool;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -49,7 +49,6 @@ PlaylistEditor.prototype.init = function(tracks) {
|
|||
this.trackEditors.push(trackEditor);
|
||||
fragment.appendChild(trackElem);
|
||||
|
||||
audioControls.on("changestate", "onStateChange", trackEditor);
|
||||
audioControls.on("trackedit", "onTrackEdit", trackEditor);
|
||||
audioControls.on("changeresolution", "onResolutionChange", trackEditor);
|
||||
|
||||
|
|
@ -127,10 +126,12 @@ PlaylistEditor.prototype.onStateChange = function() {
|
|||
editors = this.trackEditors,
|
||||
i,
|
||||
len,
|
||||
editor;
|
||||
editor,
|
||||
state = this.config.getState();
|
||||
|
||||
for(i = 0, len = editors.length; i < len; i++) {
|
||||
editors[i].deactivate();
|
||||
editors[i].setState(state);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,55 +4,55 @@ var TrackEditor = function() {
|
|||
|
||||
};
|
||||
|
||||
TrackEditor.prototype.states = {
|
||||
cursor: {
|
||||
events: {
|
||||
mousedown: "selectCursorPos"
|
||||
},
|
||||
|
||||
classes: [
|
||||
TrackEditor.prototype.classes = {
|
||||
"cursor": [
|
||||
"state-select"
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
select: {
|
||||
events: {
|
||||
mousedown: "selectStart"
|
||||
},
|
||||
|
||||
classes: [
|
||||
"select": [
|
||||
"state-select"
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
fadein: {
|
||||
events: {
|
||||
mousedown: "selectFadeIn"
|
||||
},
|
||||
|
||||
classes: [
|
||||
"fadein": [
|
||||
"state-select"
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
fadeout: {
|
||||
events: {
|
||||
mousedown: "selectFadeOut"
|
||||
},
|
||||
|
||||
classes: [
|
||||
"fadeout": [
|
||||
"state-select"
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
shift: {
|
||||
events: {
|
||||
mousedown: "timeShift"
|
||||
},
|
||||
|
||||
classes: [
|
||||
"shift": [
|
||||
"state-shift"
|
||||
],
|
||||
|
||||
"active": [
|
||||
"active"
|
||||
],
|
||||
|
||||
"disabled": [
|
||||
"disabled"
|
||||
]
|
||||
};
|
||||
|
||||
TrackEditor.prototype.events = {
|
||||
"cursor": {
|
||||
"mousedown": "selectCursorPos"
|
||||
},
|
||||
|
||||
"select": {
|
||||
"mousedown": "selectStart"
|
||||
},
|
||||
|
||||
"fadein": {
|
||||
"mousedown": "selectFadeIn"
|
||||
},
|
||||
|
||||
"fadeout": {
|
||||
"mousedown": "selectFadeOut"
|
||||
},
|
||||
|
||||
"shift": {
|
||||
"mousedown": "timeShift"
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -64,7 +64,22 @@ TrackEditor.prototype.setWidth = function(width) {
|
|||
this.width = width;
|
||||
};
|
||||
|
||||
TrackEditor.prototype.init = function(src, start, end, fades, cues, moveable) {
|
||||
TrackEditor.prototype.init = function(src, start, end, fades, cues, stateConfig) {
|
||||
|
||||
var statesEnabled = {
|
||||
'cursor': true,
|
||||
'fadein': true,
|
||||
'fadeout': true,
|
||||
'select': true,
|
||||
'shift': true
|
||||
};
|
||||
|
||||
//extend enabled states config.
|
||||
Object.keys(statesEnabled).forEach(function (key) {
|
||||
statesEnabled[key] = (key in stateConfig) ? stateConfig[key] : statesEnabled[key];
|
||||
});
|
||||
|
||||
this.enabledStates = statesEnabled;
|
||||
|
||||
makePublisher(this);
|
||||
|
||||
|
|
@ -103,7 +118,6 @@ TrackEditor.prototype.init = function(src, start, end, fades, cues, moveable) {
|
|||
|
||||
this.selectedArea = undefined; //selected area of track stored as inclusive buffer indices to the audio buffer.
|
||||
this.active = false;
|
||||
this.canShift = moveable !== undefined ? moveable : true;
|
||||
|
||||
this.container.classList.add("channel-wrapper");
|
||||
this.container.style.left = this.leftOffset;
|
||||
|
|
@ -140,7 +154,7 @@ TrackEditor.prototype.loadTrack = function(track) {
|
|||
cuein: track.cuein,
|
||||
cueout: track.cueout
|
||||
},
|
||||
track.moveable
|
||||
track.states
|
||||
);
|
||||
this.loadBuffer(track.src);
|
||||
|
||||
|
|
@ -244,7 +258,6 @@ TrackEditor.prototype.deactivate = function() {
|
|||
this.active = false;
|
||||
this.selectedArea = undefined;
|
||||
this.container.classList.remove("active");
|
||||
//this.drawer.draw(-1, this.getPixelOffset());
|
||||
this.updateEditor(-1, undefined, undefined, true);
|
||||
};
|
||||
|
||||
|
|
@ -261,10 +274,6 @@ TrackEditor.prototype.timeShift = function(e) {
|
|||
scroll = this.config.getTrackScroll(),
|
||||
scrollX = scroll.left;
|
||||
|
||||
if (this.canShift === false) {
|
||||
return; //setting the 'left' css property has no effect, but don't want internal variable leftOffset to update.
|
||||
}
|
||||
|
||||
origX = editor.leftOffset / res;
|
||||
|
||||
//dynamically put an event on the element.
|
||||
|
|
@ -530,12 +539,10 @@ TrackEditor.prototype.selectCursorPos = function(e) {
|
|||
};
|
||||
|
||||
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,
|
||||
layerOffset;
|
||||
var startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
|
||||
layerOffset,
|
||||
FADETYPE = "FadeIn",
|
||||
shape = this.config.getFadeType();
|
||||
|
||||
layerOffset = this.findLayerOffset(e);
|
||||
if (layerOffset < 0) {
|
||||
|
|
@ -543,23 +550,16 @@ TrackEditor.prototype.selectFadeIn = function(e) {
|
|||
}
|
||||
startX = startX + layerOffset;
|
||||
|
||||
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();
|
||||
this.setSelectedArea(undefined, startX);
|
||||
this.removeFadeType(FADETYPE);
|
||||
this.createFade(FADETYPE, shape);
|
||||
};
|
||||
|
||||
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,
|
||||
layerOffset;
|
||||
var startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
|
||||
layerOffset,
|
||||
FADETYPE = "FadeOut",
|
||||
shape = this.config.getFadeType();
|
||||
|
||||
layerOffset = this.findLayerOffset(e);
|
||||
if (layerOffset < 0) {
|
||||
|
|
@ -567,14 +567,9 @@ TrackEditor.prototype.selectFadeOut = function(e) {
|
|||
}
|
||||
startX = startX + layerOffset;
|
||||
|
||||
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();
|
||||
this.setSelectedArea(startX, undefined);
|
||||
this.removeFadeType(FADETYPE);
|
||||
this.createFade(FADETYPE, shape);
|
||||
};
|
||||
|
||||
/* end of state methods */
|
||||
|
|
@ -594,6 +589,21 @@ TrackEditor.prototype.saveFade = function(id, type, shape, start, end) {
|
|||
TrackEditor.prototype.removeFade = function(id) {
|
||||
|
||||
delete this.fades[id];
|
||||
this.drawer.removeFade(id);
|
||||
};
|
||||
|
||||
TrackEditor.prototype.removeFadeType = function(type) {
|
||||
var id,
|
||||
fades = this.fades,
|
||||
fade;
|
||||
|
||||
for (id in fades) {
|
||||
fade = fades[id];
|
||||
|
||||
if (fade.type === type) {
|
||||
this.removeFade(id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -645,9 +655,8 @@ TrackEditor.prototype.onTrackEdit = function(event) {
|
|||
}
|
||||
};
|
||||
|
||||
TrackEditor.prototype.onCreateFade = function(args) {
|
||||
TrackEditor.prototype.createFade = function(type, shape) {
|
||||
var selected = this.selectedArea,
|
||||
pixelOffset = this.getPixelOffset(),
|
||||
start = this.samplesToPixels(selected.start),
|
||||
end = this.samplesToPixels(selected.end),
|
||||
startTime = this.samplesToSeconds(selected.start),
|
||||
|
|
@ -655,10 +664,13 @@ TrackEditor.prototype.onCreateFade = function(args) {
|
|||
id = this.getFadeId();
|
||||
|
||||
this.resetCursor();
|
||||
this.saveFade(id, args.type, args.shape, startTime, endTime);
|
||||
this.drawer.draw(-1, pixelOffset);
|
||||
this.drawer.drawFade(id, args.type, args.shape, start, end);
|
||||
this.saveFade(id, type, shape, startTime, endTime);
|
||||
this.updateEditor(-1, undefined, undefined, true);
|
||||
this.drawer.drawFade(id, type, shape, start, end);
|
||||
};
|
||||
|
||||
TrackEditor.prototype.onCreateFade = function(args) {
|
||||
this.createFade(args.type, args.shape);
|
||||
this.deactivateAudioSelection();
|
||||
};
|
||||
|
||||
|
|
@ -692,8 +704,10 @@ TrackEditor.prototype.onRemoveAudio = function() {
|
|||
|
||||
TrackEditor.prototype.setState = function(state) {
|
||||
var that = this,
|
||||
stateEvents = this.states[state].events,
|
||||
stateClasses = this.states[state].classes,
|
||||
stateEvents = this.events[state],
|
||||
stateClasses = this.classes[state],
|
||||
disabledClasses = this.classes['disabled'],
|
||||
enabledStates = this.enabledStates,
|
||||
container = this.container,
|
||||
prevState = this.currentState,
|
||||
prevStateClasses,
|
||||
|
|
@ -702,8 +716,9 @@ TrackEditor.prototype.setState = function(state) {
|
|||
i, len;
|
||||
|
||||
if (prevState) {
|
||||
prevStateClasses = this.states[prevState].classes;
|
||||
prevStateClasses = this.classes[prevState];
|
||||
|
||||
if (enabledStates[prevState] === true) {
|
||||
for (event in prevStateEvents) {
|
||||
container.removeEventListener(event, prevStateEvents[event]);
|
||||
}
|
||||
|
|
@ -713,9 +728,15 @@ TrackEditor.prototype.setState = function(state) {
|
|||
container.classList.remove(prevStateClasses[i]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (i = 0, len = disabledClasses.length; i < len; i++) {
|
||||
container.classList.remove(disabledClasses[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (enabledStates[state] === true) {
|
||||
for (event in stateEvents) {
|
||||
|
||||
func = that[stateEvents[event]].bind(that);
|
||||
//need to keep track of the added events for later removal since a new function is returned after using "bind"
|
||||
this.prevStateEvents[event] = func;
|
||||
|
|
@ -724,16 +745,16 @@ TrackEditor.prototype.setState = function(state) {
|
|||
for (i = 0, len = stateClasses.length; i < len; i++) {
|
||||
container.classList.add(stateClasses[i]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (i = 0, len = disabledClasses.length; i < len; i++) {
|
||||
container.classList.add(disabledClasses[i]);
|
||||
}
|
||||
}
|
||||
|
||||
this.currentState = state;
|
||||
};
|
||||
|
||||
TrackEditor.prototype.onStateChange = function() {
|
||||
var state = this.config.getState();
|
||||
|
||||
this.setState(state);
|
||||
};
|
||||
|
||||
TrackEditor.prototype.onResolutionChange = function(res) {
|
||||
var selected = this.selectedArea;
|
||||
|
||||
|
|
|
|||
|
|
@ -367,6 +367,22 @@ WaveformDrawer.prototype.drawFadeCurve = function(ctx, shape, type, width) {
|
|||
ctx.stroke();
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.removeFade = function(id) {
|
||||
var fadeClass = "playlist-fade-"+id,
|
||||
el, els,
|
||||
i,len;
|
||||
|
||||
els = this.container.getElementsByClassName(fadeClass);
|
||||
len = els.length;
|
||||
|
||||
//DOM NodeList is live, use a decrementing counter.
|
||||
if (len > 0) {
|
||||
for (i = len-1; i >= 0; i--) {
|
||||
el = els[i];
|
||||
el.parentNode.removeChild(el);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
WaveformDrawer.prototype.drawFade = function(id, type, shape, start, end) {
|
||||
var div,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue