Commit 41f77c8d authored by Meg Ford's avatar Meg Ford

add record UI

parent 8d9bd6a0
......@@ -25,18 +25,13 @@
.view .toolbarEnd {
background-color: #86A0F1;
border-right: rgba(255,255,255,0.45) 1px solid;
border-right: rgba(255,255,255,1.0) 1px solid;
border-radius: 0px;
}
.topbar {
background-image: linear-gradient(to bottom,
@button_gradient_color_a,
@button_gradient_color_b 40%,
@button_gradient_color_c
);
}
.header .button {
border-radius: 0px;
background-color: rgba(204,0,0,0.75);
background-image: none;
border: none;
}
......@@ -47,10 +47,9 @@ let selectable = null;
let view = null;
let wave = null;
const ActivePage = {
RECORD: 'recorderPage',
PLAY: 'playerPage',
LISTVIEW: 'listviewPage'
const ActiveArea = {
RECORD: 0,
PLAY: 1
};
const ListColumns = {
......@@ -96,8 +95,16 @@ const Application = new Lang.Class({
header.set_show_close_button(true);
this.set_titlebar(header);
let recordToolbar = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
spacing: 0 });
recordToolbar.get_style_context().add_class(Gtk.STYLE_CLASS_LINKED);
header.pack_start(recordToolbar);
let recordButton = new RecordButton({label: "Record"});
header.pack_start(recordButton);
recordToolbar.pack_end(recordButton, false, true, 0);
recordToolbar.get_style_context().add_class('header');
recordToolbar.show();
recordButton.show();
//header.pack_start(recordButton);
let preferencesButton = new Gtk.Button();
let preferencesImage = Gtk.Image.new_from_icon_name("emblem-system-symbolic", Gtk.IconSize.BUTTON);
......@@ -167,7 +174,7 @@ const MainView = new Lang.Class({
this._comboBoxText = new EncoderComboBox();
//recordGrid.attach(this._comboBoxText, 20, 1, 3, 1);
this.recordTimeLabel = new Gtk.Label();
// this.recordTimeLabel = new Gtk.Label();
//recordGrid.attach(this.recordTimeLabel, 20, 2, 3, 1);
this.recordVolume = new Gtk.VolumeButton();
......@@ -252,40 +259,6 @@ const MainView = new Lang.Class({
this._record.stopRecording();
},
setVisibleID: function() {
let activePage = this.get_visible_child_name();
return activePage;
},
setLabel: function(time, duration) {
this.time = time
this.duration = duration;
this.playPipeState = play.getPipeStates();
if (this.playPipeState != PipelineStates.STOPPED) { //test this
if (this.playDurationLabel.label == "0:00" && duration != 0)
this.durationString = this._formatTime(duration);
} else {
this.durationString = this._formatTime(duration);
}
this.timeLabelString = this._formatTime(time);
if (this.setVisibleID() == ActivePage.RECORD ) {
this.recordTimeLabel.label = this.timeLabelString;
} else if (this.setVisibleID() == ActivePage.PLAY) {
this.playTimeLabel.label = this.timeLabelString;
if (this.playDurationLabel.label == "0:00" || this.playPipeState == PipelineStates.STOPPED) {
this.playDurationLabel.label = this.durationString;
this.setProgressScaleSensitive();
this.progressScale.set_range(0.0, duration);
}
this.progressScale.set_value(this.time);
}
},
setProgressScaleSensitive: function() {
this.progressScale.sensitive = true;
},
......@@ -325,10 +298,10 @@ const MainView = new Lang.Class({
setVolume: function() {
let volumeValue;
if (this.setVisibleID() == ActivePage.PLAY) {
if (this.setVisibleID == ActiveArea.PLAY) {
volumeValue = this.playVolume.get_value();
Application.play.setVolume(volumeValue);
} else if (this.setVisibleID() == ActivePage.RECORD) {
} else if (this.setVisibleID == ActiveArea.RECORD) {
volumeValue = this.recordVolume.get_value();
this._record.setVolume(volumeValue);
}
......@@ -346,23 +319,51 @@ const MainView = new Lang.Class({
this.recordGrid = new Gtk.Grid({ orientation: Gtk.Orientation.VERTICAL,
height_request: 36,
width_request: 400,
name: "recordGrid" });
height_request: 36,
width_request: 400,
name: "recordGrid" });
this.recordGrid.set_orientation(Gtk.Orientation.HORIZONTAL);
this.groupGrid.add(this.recordGrid);
this.widgetRecord = new Gtk.Toolbar({ show_arrow: false,
halign: Gtk.Align.START,
valign: Gtk.Align.FILL,
icon_size: Gtk.IconSize.BUTTON,
opacity: 1 });
this.widgetRecord.get_style_context().add_class('toolbarEnd');
this.recordGrid.attach(this.widgetRecord, 0, 0, 2, 2);
this._boxRecord = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
this._groupRecord = new Gtk.ToolItem({ child: this._boxRecord });
this.widgetRecord.insert(this._groupRecord, -1);
this.recordTextLabel = new Gtk.Label({ margin_bottom: 4,
margin_top: 6,
margin_left: 6,
margin_right: 6 });
this.recordTextLabel.label = "Recording...";
this._boxRecord.pack_start(this.recordTextLabel, false, true, 0);
this.recordTimeLabel = new Gtk.Label({ margin_bottom: 4,
margin_top: 6,
margin_left: 6,
margin_right: 6 });
this._boxRecord.pack_start(this.recordTimeLabel, false, true, 0);
this.toolbarStart = new Gtk.Box({ orientation: Gtk.Orientation.HORIZONTAL,
spacing: 0 });
spacing: 0 });
this.toolbarStart.get_style_context().add_class(Gtk.STYLE_CLASS_LINKED);
this.recordGrid.attach(this.toolbarStart, 1, 0, 1, 1);
let stopRecord = new Gtk.Button();
this.stopRecImage = Gtk.Image.new_from_icon_name("media-playback-stop-symbolic", Gtk.IconSize.BUTTON);
stopRecord.set_image(this.stopRecImage);
let stopRecord = new Gtk.Button({ label: "Finish",
margin_bottom: 4,
margin_top: 6,
margin_left: 6,
margin_right: 6 });
stopRecord.connect("clicked", Lang.bind(this, this.onRecordStopClicked));
this.toolbarStart.pack_start(stopRecord, false, true, 0);
this.toolbarStart.show_all();
this.toolbarStart.pack_end(stopRecord, true, true, 0);
this.recordGrid.attach(this.toolbarStart, 5, 0, 2, 2);
this._scrolledWin = new Gtk.ScrolledWindow({ shadow_type: Gtk.ShadowType.IN,
margin_bottom: 3,
......@@ -613,7 +614,35 @@ const MainView = new Lang.Class({
function(widget, response) {
infoDialog.widget.destroy();
}));
}
},
setLabel: function(time, duration) {
this.time = time
this.duration = duration;
this.playPipeState = play.getPipeStates();
if (this.playPipeState != PipelineStates.STOPPED) { //test this
if (this.playDurationLabel.label == "0:00" && duration != 0)
this.durationString = this._formatTime(duration);
} else {
this.durationString = this._formatTime(duration);
}
this.timeLabelString = this._formatTime(time);
if (this.setVisibleID == ActiveArea.RECORD) {
this.recordTimeLabel.label = this.timeLabelString;
} else if (this.setVisibleID == ActiveArea.PLAY) {
this.playTimeLabel.label = this.timeLabelString;
if (this.playDurationLabel.label == "0:00" || this.playPipeState == PipelineStates.STOPPED) {
this.playDurationLabel.label = this.durationString;
this.setProgressScaleSensitive();
this.progressScale.set_range(0.0, duration);
}
this.progressScale.set_value(this.time);
}
},
});
const RecordButton = new Lang.Class({
......@@ -622,16 +651,14 @@ const RecordButton = new Lang.Class({
_init: function(activeProfile) {
this._activeProfile = activeProfile;
//this.recordImage = Gtk.Image.new_from_icon_name("media-record-symbolic", Gtk.IconSize.BUTTON);
//this.pauseImage = Gtk.Image.new_from_icon_name("media-playback-pause-symbolic", Gtk.IconSize.BUTTON);
this.parent();
this.set_label("Record");
//this.set_image(this.recordImage);
this.connect("clicked", Lang.bind(this, this._onRecord));
},
_onRecord: function() {
view.recordGrid.show();
view.setVisibleID = ActiveArea.RECORD;
view.recordGrid.show_all();
audioProfile.assignProfile();
view._record.startRecording();
wave = new Waveform.WaveForm(view.recordGrid);
......
......@@ -59,10 +59,18 @@ const WaveForm = new Lang.Class({
this.count = 0;
this.tick = 0;
this.drawing = Gtk.DrawingArea.new();
this.drawing.set_size_request(200, 36);
grid.attach(this.drawing, 2, 0, 1, 1);
if (this.waveType == WaveType.RECORD) {
let gridWidth = Application.groupGrid.get_allocated_width();
log("gridWidth " + gridWidth);
let drawingWidth = gridWidth * 0.625;
this.drawing.set_size_request(drawingWidth, 36);
grid.attach(this.drawing, 2, 0, 3, 2);
} else {
this.drawing.set_size_request(200, 36);
grid.add(this.drawing);
}
this.drawing.connect("draw", Lang.bind(this, this.fillSurface));
this.drawing.show_all();
grid.show_all();
......@@ -155,7 +163,7 @@ const WaveForm = new Lang.Class({
fillSurface: function(drawing, cr) {
if (this.waveType == WaveType.PLAY) {
log("fill surface error" + this.waveType);
if (peaks.length == this.playTime - 7) {
if (peaks.length == this.playTime - 7) { //this needs to be generalized somehow.
this.pipeline.set_state(Gst.State.PLAYING);
log("continue drawing " + peaks.length);
}
......@@ -165,7 +173,9 @@ const WaveForm = new Lang.Class({
let h = this.drawing.get_allocated_height();
let length = this.nSamples;
let idx;
let gradient = new Cairo.LinearGradient(0, 0, this.tick * pixelsPerSample, peaks[idx] * waveheight);
gradient.addColorStopRGBA(0.0, 0.0, 0.72, 0.64, 0.35);
gradient.addColorStopRGBA(0.75, 0.2, 0.54, 0.47, 0.22);
cr.setLineWidth(1);
cr.setSourceRGBA(0.0, 185, 161, 255);
let pixelsPerSample = w/peaks.length;
......@@ -173,6 +183,7 @@ const WaveForm = new Lang.Class({
cr.moveTo(0, h);
for(let i = 0; i <= this.tick; i++) {
if (this.tick >= 40 && peaks[idx] != null) {
idx = this.count + i + 1;
......@@ -181,20 +192,32 @@ const WaveForm = new Lang.Class({
idx = i;
}
if (peaks[idx] != null) {
if (peaks[idx] != null) {
cr.lineTo(i * pixelsPerSample, peaks[idx] * waveheight);
log("current base value for x co-ordinate " + this.tick);
log("peak height " + peaks[idx]);
log("array length " + peaks.length);
log("array index value " + idx);
/* let gradient = new Cairo.LinearGradient(0, 0, i * pixelsPerSample, peaks[idx] * waveheight);
cr.setSource(gradient)
gradient.addColorStopRGBA(0.0, 1.0, 0.0, 0.0, 1.0);
gradient.addColorStopRGBA(1.0, 0.0, 0.0, 1.0, 0.5);
cr.paint();
/*cr.lineTo(i*5, 0);
cr.closePath();
log(this.tick);
log(peaks[this.tick]*h);
cr.fillPreserve();*/
}
}
}
cr.lineTo(this.tick * pixelsPerSample, h);
cr.closePath();
cr.strokePreserve();
cr.setSource(gradient);
cr.fillPreserve();
},
_drawEvent: function(playTime, recPeaks) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment