| 230 | } |
| 231 | |
| 232 | buildValueForDisplay (valEl, data) { |
| 233 | let path |
| 234 | const mimetype = `audio/${this.keyForParent}` |
| 235 | const mimetypes = [mimetype] |
| 236 | if (mimetype === 'audio/mp3') { |
| 237 | // https://github.com/codecombat/codecombat/issues/445 |
| 238 | // http://stackoverflow.com/questions/10688588/which-mime-type-should-i-use-for-mp3 |
| 239 | mimetypes.push('audio/mpeg') |
| 240 | } else if (mimetype === 'audio/ogg') { |
| 241 | mimetypes.push('application/ogg') |
| 242 | mimetypes.push('video/ogg') // huh, that's what it took to be able to upload ogg sounds in Firefox |
| 243 | } |
| 244 | const pickButton = $('<a class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-upload"></span></a>') |
| 245 | .click(() => filepicker.pick({ mimetypes }, this.onFileChosen)) |
| 246 | const playButton = $('<a class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-play"></span></a>') |
| 247 | .click(this.playFile) |
| 248 | const stopButton = $('<a class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-stop"></span></a>') |
| 249 | .click(this.stopFile) |
| 250 | |
| 251 | const dropdown = $('<div class="btn-group dropdown"></div>') |
| 252 | |
| 253 | const dropdownButton = $('<a></a>') |
| 254 | .addClass('btn btn-primary btn-xs dropdown-toggle') |
| 255 | .attr('href', '#') |
| 256 | .append($('<span class="glyphicon glyphicon-chevron-down"></span>')) |
| 257 | .dropdown() |
| 258 | |
| 259 | dropdown.append(dropdownButton) |
| 260 | |
| 261 | const menu = $('<div class="dropdown-menu"></div>') |
| 262 | const files = this.getFiles() |
| 263 | const fileExtName = mimetype.replace('audio/', '') |
| 264 | for (const file of Array.from(files)) { |
| 265 | // contentType is no longer returned from the API due to s3 migration. |
| 266 | var needle |
| 267 | if ((needle = file.get('contentType'), !Array.from(mimetypes).includes(needle)) && !file.get('filename').endsWith(fileExtName)) { continue } |
| 268 | ({ |
| 269 | path, |
| 270 | } = file.get('metadata')) |
| 271 | const filename = file.get('filename') |
| 272 | const fullPath = [path, filename].join('/') |
| 273 | const li = $('<li></li>') |
| 274 | .data('fullPath', fullPath) |
| 275 | .text(filename) |
| 276 | menu.append(li) |
| 277 | } |
| 278 | menu.click(e => { |
| 279 | this.data = $(e.target).data('fullPath') || data |
| 280 | return this.reset() |
| 281 | }) |
| 282 | dropdown.append(menu) |
| 283 | |
| 284 | valEl.append(pickButton) |
| 285 | if (data) { |
| 286 | valEl.append(playButton) |
| 287 | valEl.append(stopButton) |
| 288 | } |
| 289 | valEl.append(dropdown) // if files.length and @canEdit() |