diff --git a/airtime_mvc/application/views/scripts/playlist/set-fade.phtml b/airtime_mvc/application/views/scripts/playlist/set-fade.phtml index 6a300eeee..ed5c94876 100644 --- a/airtime_mvc/application/views/scripts/playlist/set-fade.phtml +++ b/airtime_mvc/application/views/scripts/playlist/set-fade.phtml @@ -5,7 +5,8 @@ item1Type == 0) {?>
+ data-cuein="cueIn1; ?>" data-cueout="cueOut1; ?>" data-length="fadeOut; ?>" + data-type="logarithmic"> fadeOut; ?>
@@ -13,7 +14,8 @@ if ($this->item2Type == 0) {?>
+ data-cuein="cueIn2; ?>" data-cueout="cueOut2; ?>" data-length="fadeIn; ?>" + data-type="logarithmic"> fadeIn; ?>
diff --git a/airtime_mvc/public/js/airtime/library/spl.js b/airtime_mvc/public/js/airtime/library/spl.js index 393571902..29c5549ba 100644 --- a/airtime_mvc/public/js/airtime/library/spl.js +++ b/airtime_mvc/public/js/airtime/library/spl.js @@ -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); } diff --git a/airtime_mvc/public/js/waveformplaylist/playlist.js b/airtime_mvc/public/js/waveformplaylist/playlist.js index 35927769e..0fa3a5284 100644 --- a/airtime_mvc/public/js/waveformplaylist/playlist.js +++ b/airtime_mvc/public/js/waveformplaylist/playlist.js @@ -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); + } } }; diff --git a/airtime_mvc/public/js/waveformplaylist/track.js b/airtime_mvc/public/js/waveformplaylist/track.js index f7140a0ee..edb221858 100644 --- a/airtime_mvc/public/js/waveformplaylist/track.js +++ b/airtime_mvc/public/js/waveformplaylist/track.js @@ -89,8 +89,14 @@ 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)