Added audio review UI.

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

amalik2
Review Board
master
reviewboard, students

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.
Summary Author
Added review UI for audio files.
amalik2

Description From Last Updated

F821 undefined name 'crop_image'

reviewbotreviewbot

F821 undefined name 'crop_image'

reviewbotreviewbot

Col: 26 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 52 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 97 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 159 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 212 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 213 Missing semicolon.

reviewbotreviewbot

Col: 44413 A leading decimal point can be confused with a dot: '.5'.

reviewbotreviewbot

Col: 284 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 395 Missing semicolon.

reviewbotreviewbot

Col: 492 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 493 Missing semicolon.

reviewbotreviewbot

Col: 524 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 667 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 668 Missing semicolon.

reviewbotreviewbot

Col: 709 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 736 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 762 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 881 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 890 Expected '{' and instead saw 'for'.

reviewbotreviewbot

Col: 905 Expected '{' and instead saw 'r'.

reviewbotreviewbot

Col: 936 Missing semicolon.

reviewbotreviewbot

Col: 913 Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (e)

reviewbotreviewbot

Col: 960 Missing semicolon.

reviewbotreviewbot

Col: 1027 Missing semicolon.

reviewbotreviewbot

Col: 1048 Missing semicolon.

reviewbotreviewbot

Col: 1071 Missing semicolon.

reviewbotreviewbot

Col: 1139 Missing semicolon.

reviewbotreviewbot

Col: 1156 Missing semicolon.

reviewbotreviewbot

Col: 1314 Missing semicolon.

reviewbotreviewbot

Col: 1396 Missing semicolon.

reviewbotreviewbot

F821 undefined name 'crop_image'

reviewbotreviewbot

F821 undefined name 'crop_image'

reviewbotreviewbot

Col: 26 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 52 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 97 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 159 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 212 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 213 Missing semicolon.

reviewbotreviewbot

Col: 44413 A leading decimal point can be confused with a dot: '.5'.

reviewbotreviewbot

Col: 284 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 395 Missing semicolon.

reviewbotreviewbot

Col: 492 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 493 Missing semicolon.

reviewbotreviewbot

Col: 524 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 667 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 668 Missing semicolon.

reviewbotreviewbot

Col: 709 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 736 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 762 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 881 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 890 Expected '{' and instead saw 'for'.

reviewbotreviewbot

Col: 905 Expected '{' and instead saw 'r'.

reviewbotreviewbot

Col: 936 Missing semicolon.

reviewbotreviewbot

Col: 913 Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (e)

reviewbotreviewbot

Col: 960 Missing semicolon.

reviewbotreviewbot

Col: 1027 Missing semicolon.

reviewbotreviewbot

Col: 1048 Missing semicolon.

reviewbotreviewbot

Col: 1071 Missing semicolon.

reviewbotreviewbot

Col: 1139 Missing semicolon.

reviewbotreviewbot

Col: 1156 Missing semicolon.

reviewbotreviewbot

Col: 1314 Missing semicolon.

reviewbotreviewbot

Col: 1396 Missing semicolon.

reviewbotreviewbot

F821 undefined name 'crop_image'

reviewbotreviewbot

F821 undefined name 'crop_image'

reviewbotreviewbot

Col: 26 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 52 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 97 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 159 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 212 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 213 Missing semicolon.

reviewbotreviewbot

Col: 44413 A leading decimal point can be confused with a dot: '.5'.

reviewbotreviewbot

Col: 284 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 395 Missing semicolon.

reviewbotreviewbot

Col: 492 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 493 Missing semicolon.

reviewbotreviewbot

Col: 524 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 667 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 668 Missing semicolon.

reviewbotreviewbot

Col: 709 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 736 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 762 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 881 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 890 Expected '{' and instead saw 'for'.

reviewbotreviewbot

Col: 905 Expected '{' and instead saw 'r'.

reviewbotreviewbot

Col: 936 Missing semicolon.

reviewbotreviewbot

Col: 913 Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (e)

reviewbotreviewbot

Col: 960 Missing semicolon.

reviewbotreviewbot

Col: 1027 Missing semicolon.

reviewbotreviewbot

Col: 1048 Missing semicolon.

reviewbotreviewbot

Col: 1071 Missing semicolon.

reviewbotreviewbot

Col: 1139 Missing semicolon.

reviewbotreviewbot

Col: 1156 Missing semicolon.

reviewbotreviewbot

Col: 1314 Missing semicolon.

reviewbotreviewbot

Col: 1396 Missing semicolon.

reviewbotreviewbot

Col: 26 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 52 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 97 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 159 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 212 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 213 Missing semicolon.

reviewbotreviewbot

Col: 44413 A leading decimal point can be confused with a dot: '.5'.

reviewbotreviewbot

Col: 284 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 395 Missing semicolon.

reviewbotreviewbot

Col: 492 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 493 Missing semicolon.

reviewbotreviewbot

Col: 524 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 667 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 668 Missing semicolon.

reviewbotreviewbot

Col: 709 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 736 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 762 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 881 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 890 Expected '{' and instead saw 'for'.

reviewbotreviewbot

Col: 905 Expected '{' and instead saw 'r'.

reviewbotreviewbot

Col: 936 Missing semicolon.

reviewbotreviewbot

Col: 913 Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (e)

reviewbotreviewbot

Col: 960 Missing semicolon.

reviewbotreviewbot

Col: 1027 Missing semicolon.

reviewbotreviewbot

Col: 1048 Missing semicolon.

reviewbotreviewbot

Col: 1071 Missing semicolon.

reviewbotreviewbot

Col: 1139 Missing semicolon.

reviewbotreviewbot

Col: 1156 Missing semicolon.

reviewbotreviewbot

Col: 1314 Missing semicolon.

reviewbotreviewbot

Col: 1396 Missing semicolon.

reviewbotreviewbot

Col: 26 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 52 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 97 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 159 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 212 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 213 Missing semicolon.

reviewbotreviewbot

Col: 44413 A leading decimal point can be confused with a dot: '.5'.

reviewbotreviewbot

Col: 284 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 395 Missing semicolon.

reviewbotreviewbot

Col: 492 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 493 Missing semicolon.

reviewbotreviewbot

Col: 524 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 667 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 668 Missing semicolon.

reviewbotreviewbot

Col: 709 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 736 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 762 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 881 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 890 Expected '{' and instead saw 'for'.

reviewbotreviewbot

Col: 905 Expected '{' and instead saw 'r'.

reviewbotreviewbot

Col: 936 Missing semicolon.

reviewbotreviewbot

Col: 913 Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (e)

reviewbotreviewbot

Col: 960 Missing semicolon.

reviewbotreviewbot

Col: 1027 Missing semicolon.

reviewbotreviewbot

Col: 1048 Missing semicolon.

reviewbotreviewbot

Col: 1071 Missing semicolon.

reviewbotreviewbot

Col: 1139 Missing semicolon.

reviewbotreviewbot

Col: 1156 Missing semicolon.

reviewbotreviewbot

Col: 1314 Missing semicolon.

reviewbotreviewbot

Col: 1396 Missing semicolon.

reviewbotreviewbot

Col: 26 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 52 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 97 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 159 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 212 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 213 Missing semicolon.

reviewbotreviewbot

Col: 44413 A leading decimal point can be confused with a dot: '.5'.

reviewbotreviewbot

Col: 284 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 395 Missing semicolon.

reviewbotreviewbot

Col: 492 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 493 Missing semicolon.

reviewbotreviewbot

Col: 524 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 667 Expected an assignment or function call and instead saw an expression.

reviewbotreviewbot

Col: 668 Missing semicolon.

reviewbotreviewbot

Col: 709 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 736 Expected '===' and instead saw '=='.

reviewbotreviewbot

Col: 762 Expected '{' and instead saw 'return'.

reviewbotreviewbot

Col: 881 Expected '!==' and instead saw '!='.

reviewbotreviewbot

Col: 890 Expected '{' and instead saw 'for'.

reviewbotreviewbot

Col: 905 Expected '{' and instead saw 'r'.

reviewbotreviewbot

Col: 936 Missing semicolon.

reviewbotreviewbot

Col: 913 Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (e)

reviewbotreviewbot

Col: 960 Missing semicolon.

reviewbotreviewbot

Col: 1027 Missing semicolon.

reviewbotreviewbot

Col: 1048 Missing semicolon.

reviewbotreviewbot

Col: 1071 Missing semicolon.

reviewbotreviewbot

Col: 1139 Missing semicolon.

reviewbotreviewbot

Col: 1156 Missing semicolon.

reviewbotreviewbot

Col: 1314 Missing semicolon.

reviewbotreviewbot

Col: 1396 Missing semicolon.

reviewbotreviewbot
Checks run (2 failed)
flake8 failed.
JSHint failed.

flake8

JSHint

amalik2
Review request changed

Checks run (2 failed)

flake8 failed.
JSHint failed.

flake8

JSHint

amalik2
Review request changed

Description:

~  

Review UI for audio files, with a waveform graph and a spectrogram.

  ~

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.

Commits:

Summary Author
-
started on audio player
amalik2
-
Added volume slider
amalik2
+
started on audio player
amalik2
+
Added volume slider
amalik2
+
more work on audio review ui
amalik2

Diff:

Revision 3 (+2402 -534)

Show changes

Checks run (2 failed)

flake8 failed.
JSHint failed.

flake8

JSHint

amalik2
Review request changed

Summary:

-WIP: Added audio review UI.
+Added audio review UI.

Description:

   

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.

  ~ 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.

  +
  +

As of now, there are unit tests, but I can't get them to run due to the

  + javascript unit test runner seemingly being broken.

Testing Done:

  +
  1. Tested manually with Python2.7 and Python3.6 with a short audio file.
  +
  1. Tested manually with Python2.7 with a long audio file.
  +
  1. Tested the diff viewer manually with Python2.7 and Python3.6.

Commits:

Summary Author
-
started on audio player
amalik2
-
Added volume slider
amalik2
-
more work on audio review ui
amalik2
+
Added review UI for audio files.
amalik2

Diff:

Revision 4 (+3014 -2)

Show changes

Added Files:

Checks run (1 failed, 1 succeeded)

flake8 passed.
JSHint failed.

JSHint

amalik2
Review request changed

Description:

   

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.

-  
-  

As of now, there are unit tests, but I can't get them to run due to the

-   javascript unit test runner seemingly being broken.

Testing Done:

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

Commits:

Summary Author
-
Added review UI for audio files.
amalik2
+
Added review UI for audio files.
amalik2

Diff:

Revision 5 (+3172 -2)

Show changes

Checks run (1 failed, 1 succeeded)

flake8 passed.
JSHint failed.

JSHint

amalik2
Review request changed

Checks run (1 failed, 1 succeeded)

flake8 passed.
JSHint failed.

JSHint

Loading...