CC-2301 : fade editor now loads currently set fades. Fixing some bugs in the waveform editor.
This commit is contained in:
parent
0deaee4d0e
commit
8fea97d580
4 changed files with 104 additions and 38 deletions
|
@ -5,7 +5,8 @@
|
|||
<?php if ($this->item1Type == 0) {?>
|
||||
<dt><? echo _("Fade out: "); ?><span class='spl_cue_hint'><? echo _("(ss.t)")?></span></dt>
|
||||
<dd id="spl_fade_out_<?php echo $this->item1; ?>" class="spl_fade_out" data-fadeout="<?php echo $this->item1Url; ?>"
|
||||
data-cuein="<?php echo $this->cueIn1; ?>" data-cueout="<?php echo $this->cueOut1; ?>">
|
||||
data-cuein="<?php echo $this->cueIn1; ?>" data-cueout="<?php echo $this->cueOut1; ?>" data-length="<?php echo $this->fadeOut; ?>"
|
||||
data-type="logarithmic">
|
||||
<span contenteditable="true" class="spl_text_input"><?php echo $this->fadeOut; ?></span>
|
||||
</dd>
|
||||
<dd class="edit-error"></dd>
|
||||
|
@ -13,7 +14,8 @@
|
|||
if ($this->item2Type == 0) {?>
|
||||
<dt><? echo _("Fade in: "); ?><span class='spl_cue_hint'><? echo _("(ss.t)")?></span></dt>
|
||||
<dd id="spl_fade_in_<?php echo $this->item2; ?>" class="spl_fade_in" data-fadein="<?php echo $this->item2Url; ?>" data-offset="<?php echo $this->offset; ?>"
|
||||
data-cuein="<?php echo $this->cueIn2; ?>" data-cueout="<?php echo $this->cueOut2; ?>">
|
||||
data-cuein="<?php echo $this->cueIn2; ?>" data-cueout="<?php echo $this->cueOut2; ?>" data-length="<?php echo $this->fadeIn; ?>"
|
||||
data-type="logarithmic">
|
||||
<span contenteditable="true" class="spl_text_input"><?php echo $this->fadeIn; ?></span>
|
||||
</dd>
|
||||
<dd class="edit-error"></dd>
|
||||
|
|
|
@ -1120,16 +1120,29 @@ var AIRTIME = (function(AIRTIME){
|
|||
src: $fadeOut.data("fadeout"),
|
||||
cuein: $fadeOut.data("cuein"),
|
||||
cueout: $fadeOut.data("cueout"),
|
||||
moveable: false
|
||||
moveable: false,
|
||||
fades: [{
|
||||
shape: $fadeOut.data("type"),
|
||||
type: "FadeOut",
|
||||
end: $fadeOut.data("cueout") - $fadeOut.data("cuein"),
|
||||
start: $fadeOut.data("cueout") - $fadeOut.data("cuein") - $fadeOut.data("length")
|
||||
}]
|
||||
},
|
||||
{
|
||||
src: $fadeIn.data("fadein"),
|
||||
start: $fadeIn.data("offset"),
|
||||
cuein: $fadeIn.data("cuein"),
|
||||
cueout: $fadeIn.data("cueout")
|
||||
cueout: $fadeIn.data("cueout"),
|
||||
fades: [{
|
||||
shape: $fadeIn.data("type"),
|
||||
type: "FadeIn",
|
||||
end: $fadeIn.data("length"),
|
||||
start: 0
|
||||
}]
|
||||
}
|
||||
],
|
||||
dim = AIRTIME.utilities.findViewportDimensions();
|
||||
dim = AIRTIME.utilities.findViewportDimensions(),
|
||||
playlistEditor;
|
||||
|
||||
$html.dialog({
|
||||
modal: true,
|
||||
|
@ -1139,8 +1152,14 @@ var AIRTIME = (function(AIRTIME){
|
|||
width: dim.width - 100,
|
||||
height: dim.height - 100,
|
||||
buttons: [
|
||||
//{text: "Submit", click: function() {doSomething()}},
|
||||
{text: "Cancel", click: function() {$(this).dialog("close");}}
|
||||
{text: "Save", click: function() {
|
||||
var json = playlistEditor.getJson();
|
||||
|
||||
var x;
|
||||
}},
|
||||
{text: "Cancel", click: function() {
|
||||
$(this).dialog("close");
|
||||
}}
|
||||
],
|
||||
open: function (event, ui) {
|
||||
|
||||
|
@ -1154,7 +1173,7 @@ var AIRTIME = (function(AIRTIME){
|
|||
timeFormat: 'hh:mm:ss.u'
|
||||
});
|
||||
|
||||
var playlistEditor = new PlaylistEditor();
|
||||
playlistEditor = new PlaylistEditor();
|
||||
playlistEditor.setConfig(config);
|
||||
playlistEditor.init(tracks);
|
||||
}
|
||||
|
|
|
@ -289,7 +289,7 @@ PlaylistEditor.prototype.updateEditor = function() {
|
|||
playbackSec = cursorPos + elapsed;
|
||||
cursorPixel = Math.ceil(playbackSec * this.sampleRate / res);
|
||||
|
||||
for(i = 0, len = editors.length; i < len; i++) {
|
||||
for (i = 0, len = editors.length; i < len; i++) {
|
||||
editors[i].updateEditor(cursorPixel, start, end, highlighted);
|
||||
}
|
||||
|
||||
|
@ -301,6 +301,10 @@ PlaylistEditor.prototype.updateEditor = function() {
|
|||
}
|
||||
else {
|
||||
clearInterval(this.interval);
|
||||
|
||||
for (i = 0, len = editors.length; i < len; i++) {
|
||||
editors[i].updateEditor(-1, undefined, undefined, true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -89,7 +89,13 @@ TrackEditor.prototype.init = function(src, start, end, fades, cues, moveable) {
|
|||
this.prevStateEvents = {};
|
||||
this.setState(this.config.getState());
|
||||
|
||||
this.fades = fades || {};
|
||||
this.fades = {};
|
||||
if (fades !== undefined && fades.length > 0) {
|
||||
|
||||
for (var i = 0; i < fades.length; i++) {
|
||||
this.fades[this.getFadeId()] = fades[i];
|
||||
}
|
||||
}
|
||||
|
||||
if (cues.cuein !== undefined) {
|
||||
this.setCuePoints(this.secondsToSamples(cues.cuein), this.secondsToSamples(cues.cueout));
|
||||
|
@ -102,10 +108,6 @@ TrackEditor.prototype.init = function(src, start, end, fades, cues, moveable) {
|
|||
this.container.classList.add("channel-wrapper");
|
||||
this.container.style.left = this.leftOffset;
|
||||
|
||||
if (this.canShift === false) {
|
||||
this.container.style.position = "static";
|
||||
}
|
||||
|
||||
this.drawer.drawLoading();
|
||||
|
||||
return this.container;
|
||||
|
@ -238,7 +240,8 @@ TrackEditor.prototype.deactivate = function() {
|
|||
this.active = false;
|
||||
this.selectedArea = undefined;
|
||||
this.container.classList.remove("active");
|
||||
this.drawer.draw(-1, this.getPixelOffset());
|
||||
//this.drawer.draw(-1, this.getPixelOffset());
|
||||
this.updateEditor(-1, undefined, undefined, true);
|
||||
};
|
||||
|
||||
/* start of state methods */
|
||||
|
@ -313,15 +316,20 @@ TrackEditor.prototype.getSelectedArea = function() {
|
|||
};
|
||||
|
||||
/*
|
||||
start, end in samples.
|
||||
start, end in samples. (relative to cuein/cueout)
|
||||
*/
|
||||
TrackEditor.prototype.adjustSelectedArea = function(start, end) {
|
||||
var buffer = this.getBuffer();
|
||||
var buffer = this.getBuffer(),
|
||||
cues = this.cues;
|
||||
|
||||
if (start < 0) {
|
||||
if (start === undefined || start < 0) {
|
||||
start = 0;
|
||||
}
|
||||
|
||||
if (end === undefined) {
|
||||
end = cues.cueout - cues.cuein;
|
||||
}
|
||||
|
||||
if (end > buffer.length - 1) {
|
||||
end = buffer.length - 1;
|
||||
}
|
||||
|
@ -375,8 +383,8 @@ 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);
|
||||
sampLeft = left === undefined ? undefined : this.pixelsToSamples(left);
|
||||
sampRight = right === undefined ? undefined : this.pixelsToSamples(right);
|
||||
|
||||
this.prevSelectedArea = this.selectedArea;
|
||||
this.selectedArea = this.adjustSelectedArea(sampLeft, sampRight);
|
||||
|
@ -392,21 +400,40 @@ TrackEditor.prototype.deactivateAudioSelection = function() {
|
|||
this.fire("deactivateSelection");
|
||||
};
|
||||
|
||||
TrackEditor.prototype.findLayerOffset = function(e) {
|
||||
var layerOffset = 0,
|
||||
parent;
|
||||
|
||||
if (e.target.tagName !== "CANVAS") {
|
||||
layerOffset = -1;
|
||||
}
|
||||
else {
|
||||
//have to check if a fade canvas was selected. (Must add left offset)
|
||||
parent = e.target.parentNode;
|
||||
|
||||
if (parent.classList.contains('playlist-fade')) {
|
||||
layerOffset = parent.offsetLeft;
|
||||
}
|
||||
}
|
||||
|
||||
return layerOffset;
|
||||
};
|
||||
|
||||
TrackEditor.prototype.selectStart = function(e) {
|
||||
var el = e.currentTarget, //want the events placed on the channel wrapper.
|
||||
editor = this,
|
||||
//scroll = this.config.getTrackScroll(),
|
||||
//scrollX = scroll.left,
|
||||
//startX = scrollX + (e.layerX || e.offsetX), //relative to e.target (want the canvas).
|
||||
//prevX = scrollX + (e.layerX || e.offsetX),
|
||||
startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
|
||||
prevX = e.layerX || e.offsetX,
|
||||
offset = this.leftOffset,
|
||||
startTime;
|
||||
startTime,
|
||||
layerOffset;
|
||||
|
||||
if (e.target.tagName !== "CANVAS") {
|
||||
layerOffset = this.findLayerOffset(e);
|
||||
if (layerOffset < 0) {
|
||||
return;
|
||||
}
|
||||
startX = startX + layerOffset;
|
||||
prevX = prevX + layerOffset;
|
||||
|
||||
editor.setSelectedArea(startX, startX);
|
||||
startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
|
||||
|
@ -416,8 +443,7 @@ TrackEditor.prototype.selectStart = function(e) {
|
|||
|
||||
//dynamically put an event on the element.
|
||||
el.onmousemove = function(e) {
|
||||
var currentX = e.layerX || e.offsetX,
|
||||
//currentX = scrollX + (e.layerX || e.offsetX),
|
||||
var currentX = layerOffset + (e.layerX || e.offsetX),
|
||||
delta = currentX - prevX,
|
||||
minX = Math.min(prevX, currentX, startX),
|
||||
maxX = Math.max(prevX, currentX, startX),
|
||||
|
@ -443,7 +469,7 @@ TrackEditor.prototype.selectStart = function(e) {
|
|||
prevX = currentX;
|
||||
};
|
||||
el.onmouseup = function(e) {
|
||||
var endX = e.layerX || e.offsetX,
|
||||
var endX = layerOffset + (e.layerX || e.offsetX),
|
||||
minX, maxX,
|
||||
startTime, endTime;
|
||||
|
||||
|
@ -479,11 +505,14 @@ TrackEditor.prototype.selectCursorPos = function(e) {
|
|||
startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
|
||||
offset = this.leftOffset,
|
||||
startTime,
|
||||
endTime;
|
||||
endTime,
|
||||
layerOffset;
|
||||
|
||||
if (e.target.tagName !== "CANVAS") {
|
||||
layerOffset = this.findLayerOffset(e);
|
||||
if (layerOffset < 0) {
|
||||
return;
|
||||
}
|
||||
startX = startX + layerOffset;
|
||||
|
||||
editor.setSelectedArea(startX, startX);
|
||||
startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
|
||||
|
@ -501,11 +530,14 @@ TrackEditor.prototype.selectFadeIn = function(e) {
|
|||
startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
|
||||
offset = this.leftOffset,
|
||||
startTime,
|
||||
endTime;
|
||||
endTime,
|
||||
layerOffset;
|
||||
|
||||
if (e.target.tagName !== "CANVAS") {
|
||||
layerOffset = this.findLayerOffset(e);
|
||||
if (layerOffset < 0) {
|
||||
return;
|
||||
}
|
||||
startX = startX + layerOffset;
|
||||
|
||||
editor.setSelectedArea(undefined, startX);
|
||||
startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
|
||||
|
@ -522,11 +554,14 @@ TrackEditor.prototype.selectFadeOut = function(e) {
|
|||
startX = e.layerX || e.offsetX, //relative to e.target (want the canvas).
|
||||
offset = this.leftOffset,
|
||||
startTime,
|
||||
endTime;
|
||||
endTime,
|
||||
layerOffset;
|
||||
|
||||
if (e.target.tagName !== "CANVAS") {
|
||||
layerOffset = this.findLayerOffset(e);
|
||||
if (layerOffset < 0) {
|
||||
return;
|
||||
}
|
||||
startX = startX + layerOffset;
|
||||
|
||||
editor.setSelectedArea(startX, undefined);
|
||||
startTime = editor.samplesToSeconds(offset + editor.selectedArea.start);
|
||||
|
@ -778,12 +813,18 @@ TrackEditor.prototype.updateEditor = function(cursorPos, start, end, highlighted
|
|||
|
||||
TrackEditor.prototype.getTrackDetails = function() {
|
||||
var d,
|
||||
cues = this.cues;
|
||||
cues = this.cues,
|
||||
fades = [],
|
||||
id;
|
||||
|
||||
for (id in this.fades) {
|
||||
fades.push(this.fades[id]);
|
||||
}
|
||||
|
||||
d = {
|
||||
start: this.startTime,
|
||||
end: this.endTime,
|
||||
fades: this.fades,
|
||||
fades: fades,
|
||||
src: this.src,
|
||||
cuein: this.samplesToSeconds(cues.cuein),
|
||||
cueout: this.samplesToSeconds(cues.cueout)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue