-
Notifications
You must be signed in to change notification settings - Fork 184
/
record.js
309 lines (277 loc) · 11.5 KB
/
record.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
/* Manages the audio chunks as we build up this recording. */
window.ScratchpadAudioChunks = Backbone.Model.extend({
initialize: function(options) {
// The saved audio chunks
this.audioChunks = [];
// The current chunk we have not yet saved or discarded
this.currentChunk = null;
},
setCurrentChunk: function(recording) {
this.currentChunk = recording;
},
currentChunkExists: function() {
return !_.isNull(this.currentChunk);
},
startNewChunk: function() {
this.currentChunk = null;
},
discardCurrentChunk: function() {
this.currentChunk = null;
},
saveCurrentChunk: function() {
if (!this.currentChunk) {
return;
}
this.audioChunks.push(this.currentChunk);
this.currentChunk = null;
},
/* Return the array of audio chunks, not yet stitched together. */
getAllChunks: function() {
return this.audioChunks;
}
});
/* Builds up audio and the command chunks for our recording, coordinates
* the process.
*
* Heads-up that bugs with recording in chunks sometimes occur due to
* buggy playback with the Record object, which also occurs when playing
* normal talkies. Recording in chunks depends on Record playback to
* restore state after a discard, and so any Record bugs also cause bugs in
* recording in chunks.
*/
window.ScratchpadRecordView = Backbone.View.extend({
initialize: function(options) {
this.render();
this.$recordButton = options.recordButton;
this.$finalSaveButton = options.saveButton;
this.editor = options.editor;
this.record = options.record;
this.config = options.config;
this.drawCanvas = options.drawCanvas;
this.workersDir = options.workersDir;
this.transloaditTemplate = options.transloaditTemplate;
this.transloaditAuthKey = options.transloaditAuthKey;
this.audioChunks = new ScratchpadAudioChunks();
this.recordInProgress = false;
this.commandChunks = [];
this.startingCode = "";
this.lastSavedCode = this.editor.text();
this.$lastAudioChunkElem = this.$el.find(".last-audio-chunk");
// Note: $savedAudioChunksElem HAS to be displayed in order for us to
// get the duration. Hack -- look at other ways to get the duration.
this.$savedAudioChunksElem = this.$el.find(".saved-audio-chunks");
this.initializeButtons();
},
render: function() {
this.$el.html(Handlebars.templates["dev-record"]({})).show();
},
initializeButtons: function() {
// Set up the buttons
this.$newChunkButton = this.$el.find(".scratchpad-dev-new-chunk");
this.$discardChunkButton =
this.$el.find(".scratchpad-dev-discard-chunk");
this.$saveChunkButton = this.$el.find(".scratchpad-dev-save-chunk");
this.$refreshEditorButton =
this.$el.find(".scratchpad-dev-refresh-editor-state");
// Disable chunk buttons to start
this.disableChunkButtons(true, true, true, true, false);
// Bind event listeners
this.$newChunkButton.on("click", _.bind(this.newChunk, this));
this.$discardChunkButton.on("click", _.bind(this.discardChunk, this));
this.$saveChunkButton.on("click", _.bind(this.saveChunk, this));
this.$refreshEditorButton.on("click", _.bind(this.refreshEditor, this));
},
/* Set up everything and get permission for recording. */
initializeRecordingAudio: function() {
// Start recording the presenter's audio
this.multirecorder = new MultiRecorder({
workerPath: this.workersDir + "shared/multirecorder-worker.js"
});
this.$recordButton.text("Use the chunks (and give permission)");
this.setButtonDisableStatus(this.$recordButton, true);
this.disableChunkButtons(false, true, true, true, true);
},
/* Start recording audio after a brief countdown for preparation.
* Leads to startRecordingCommands() being called,
* so no need to call startRecordingCommands manually.
*/
startRecordingAudio: function() {
var self = this;
this.lastSavedCode = this.editor.text();
this.multirecorder.startRecording(1)
.progress(_.bind(function(seconds) {
this.$newChunkButton.text(seconds + "...");
}, this))
.done(_.bind(function() {
this.disableChunkButtons(false, true, true, true, true);
self.record.recordingAudio = true;
this.$newChunkButton.html("Stop recording chunk");
this.startRecordingCommands();
}, this));
},
/* Stop recording audio. Called from ScratchpadUI as a result of the
* call to stopRecordingCommands. */
stopRecordingAudio: function() {
this.multirecorder.stopRecording()
.done(_.bind(function(recording) {
this.audioChunks.setCurrentChunk(recording);
this.$lastAudioChunkElem.html(recording.createAudioPlayer());
}, this));
},
/* Display a sound player with all the saved audio chunks. */
showSavedAudioChunks: function() {
this.getFinalAudioRecording(_.bind(function(saved) {
this.$savedAudioChunksElem.html(saved.createAudioPlayer());
}, this));
},
/* Hack to return the duration of the saved audio, if it exists.
*
* Depends on the savedAudioChunkElem always being updated when we
* add a new saved audio chunk. Note that we do not set the duration
* right after creating the savedAudioChunkElem because the elem has
* to load and become ready first. Between creating the elem and calling
* this function, the hacky assumption is that it has been "long enough"
* for the audio elem to load. This is pretty gross.
*/
getDurationMsOfSavedAudio: function() {
var durationMs = 0;
var audioElem = $(this.$savedAudioChunksElem).find("audio");
if (audioElem && audioElem.length > 0) {
durationMs = audioElem[0].duration * 1000;
}
return durationMs;
},
/* Start recording user commands. Should only be called from
* startRecordingAudio. */
startRecordingCommands: function() {
if (this.record.hasNoChunks()) {
// Save the initial code state
//this.scratchpad.get("revision")
// .set("code", this.editor.text());
this.startingCode = this.editor.text();
var newVersion = this.config.curVersion();
// Make sure we record using the scratchpad version
this.config.switchVersion(newVersion);
this.record.setActualInitData({
configVersion: newVersion,
code: this.startingCode
});
}
// Focus on the editor
this.editor.focus();
// Start recording
this.record.startRecordChunk(this.getDurationMsOfSavedAudio());
// Every chunk should start the cursor at 0, 0 and log the event.
this.record.log("select", 0, 0);
this.editor.setCursor({row: 0, column: 0});
},
/* Stop recording commands. This will trigger an event sequence that
* will lead to stopRecordingAudio being called as well.
*
* Currently assumes that when we stop recording commands, we want
* to upload the recording.
*/
stopRecordingCommands: function() {
this.record.stopRecordChunk();
},
/* Return the final audio recording, with all the audio chunks stitched
* together. */
getFinalAudioRecording: function(callback) {
this.multirecorder.combineRecordings(this.audioChunks.getAllChunks())
.done(callback);
},
/* Return the final commands recording, with all the command chunks
* stitched together. */
getFinalCommandRecording: function() {
return this.record.dumpRecording();
},
/* Start recording a new chunk, or stop recording the current chunk
* (the button toggles) */
newChunk: function() {
if (this.audioChunks.currentChunkExists()) {
return;
}
if (!this.recordInProgress) {
// Start recording an new chunk
this.editor.editor.setReadOnly(false);
this.recordInProgress = true;
this.startRecordingAudio();
} else {
// Stop recording the current chunk
this.recordInProgress = false;
this.stopRecordingCommands(); // Leads to stopRecordingAudio
this.disableChunkButtons(true, false, false, true, true);
this.$newChunkButton.html("Start new chunk");
}
},
/* Discard the chunk we just recorded.
* Requires replaying all of the existing commands again to get the
* code + canvas back into the right state.
* Unfortunately, this is the biggest source of bugs right now since
* Record playback is separately buggy :/
*/
discardChunk: function(evt) {
if (!this.audioChunks.currentChunkExists()) {
return;
}
this.audioChunks.discardCurrentChunk();
this.record.discardRecordChunk();
this.$lastAudioChunkElem.empty();
this.refreshEditor();
},
/* Save the chunk we just recorded. */
saveChunk: function(evt) {
if (!this.audioChunks.currentChunkExists()) {
return;
}
this.audioChunks.saveCurrentChunk();
this.record.saveRecordChunk();
this.lastSavedCode = this.editor.text();
this.disableChunkButtons(false, true, true, false, false);
this.showSavedAudioChunks();
this.$lastAudioChunkElem.empty();
},
/* Play back all the saved chunks to get back to the last
* saved state. */
refreshEditor: function(evt) {
this.record.loadRecording(this.record.dumpRecording());
this.editor.editor.setReadOnly(false);
this.record.initData = this.record.actualInitData;
// Add an empty command to force the Record playback to
// keep playing until the audio track finishes playing
if (this.record.commands) {
this.record.commands.push([
this.getDurationMsOfSavedAudio(), "seek"
]);
}
// Start the play head at 0
this.record.time = 0;
// Reset the editor
this.editor.text(this.startingCode);
// Clear and hide the drawing area
this.drawCanvas.clear(true);
this.drawCanvas.endDraw();
this.record.seekTo(this.getDurationMsOfSavedAudio());
// Set a timeout just to wait for all the commands to finish..
setTimeout(_.bind(function() {
this.disableChunkButtons(false, true, true, false, false);
}, this), 1000);
},
/*
* Quick way to set the disabled state for lots of recording-related
* buttons at once.
*/
disableChunkButtons: function(newBool, discardBool, saveBool, refreshBool, finalBool) {
this.setButtonDisableStatus(this.$newChunkButton, newBool);
this.setButtonDisableStatus(this.$discardChunkButton, discardBool);
this.setButtonDisableStatus(this.$saveChunkButton, saveBool);
this.setButtonDisableStatus(this.$refreshEditorButton, refreshBool);
this.setButtonDisableStatus(this.$finalSaveButton, finalBool);
},
/* Updated the button to the disabledStatus, if defined. */
setButtonDisableStatus: function($button, disabledStatus) {
if (!_.isUndefined(disabledStatus)) {
$button.prop("disabled", disabledStatus);
}
}
});