Added audio review UI.

Review Request #10798 — Created Nov. 13, 2019 and updated — Latest diff uploaded

Information

Review Board
master

Reviewers

Review UI for audio files, with a waveform graph and a spectrogram that can be
toggled on or off.

When comparing two different revisions, the old revision will be rendered
first, and the new revision will be underneath it. Each revision has its own
set of controls as well, and both revisions can be concurrently played.

Comments can be added by dragging a region of the waveform graph, which will
pop up a dialog where the user can add in a comment. After creating the comment,
it will be added to the waveform graph.

Hovering over a comment region on the waveform graph will show details about it
in a tooltip, similar to other review UIs. When a comment region is clicked, it
will allow the user to edit or delete their comment if the shift key is not
pressed. If the shift key is pressed, then the audio player will play just the
selected region.

  1. Tested manually with Python2.7 and Python3.6 with a short audio file.
  2. Tested manually with Python2.7 with a long audio file.
  3. Tested the diff viewer manually with Python2.7 and Python3.6.
  4. Ran JavaScript unit tests with Python2.7.

Diff Revision 2

This is not the most recent revision of the diff. The latest diff is revision 6. See what's changed.

orig
1
2
3
4
5
6

Commits

First Last Summary ID Author
started on audio player
b9e3f1766232a3cb58ea71fe5fa9d062062ffa40 amalik2
Added volume slider
5c993bb8f3c2dc3540dbdc7b6b8c663ad7ce9c0a amalik2
reviewboard/staticbundles.py
reviewboard/reviews/ui/__init__.py
reviewboard/reviews/ui/audio.py
reviewboard/static/lib/js/wavesurferjs-3.2.0.min.js
reviewboard/static/lib/js/wavesurferjs-spectrogram-3.2.0.min.js
reviewboard/static/rb/css/pages/audio-review-ui.less
reviewboard/static/rb/js/models/audioReviewableModel.es6.js
reviewboard/static/rb/js/views/audioReviewableView.es6.js
Loading...