Added audio review UI.

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

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.
Summary ID Author
Added review UI for audio files.
cb684a5f2f50025ad8121f29ce0574031b8134c4 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
Commits:
Summary ID Author
started on audio player
b9e3f1766232a3cb58ea71fe5fa9d062062ffa40 amalik2
started on audio player
b9e3f1766232a3cb58ea71fe5fa9d062062ffa40 amalik2
Added volume slider
5c993bb8f3c2dc3540dbdc7b6b8c663ad7ce9c0a amalik2

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 ID Author
started on audio player
b9e3f1766232a3cb58ea71fe5fa9d062062ffa40 amalik2
Added volume slider
5c993bb8f3c2dc3540dbdc7b6b8c663ad7ce9c0a amalik2
started on audio player
b9e3f1766232a3cb58ea71fe5fa9d062062ffa40 amalik2
Added volume slider
5c993bb8f3c2dc3540dbdc7b6b8c663ad7ce9c0a amalik2
more work on audio review ui
0f3cf9197eb8c45b607e02afaa3270e28ac9f7d6 amalik2

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 ID Author
started on audio player
b9e3f1766232a3cb58ea71fe5fa9d062062ffa40 amalik2
Added volume slider
5c993bb8f3c2dc3540dbdc7b6b8c663ad7ce9c0a amalik2
more work on audio review ui
0f3cf9197eb8c45b607e02afaa3270e28ac9f7d6 amalik2
Added review UI for audio files.
cf56460dbeacd08f3e852183b01bc0b39d1d2a1e amalik2
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 ID Author
Added review UI for audio files.
cf56460dbeacd08f3e852183b01bc0b39d1d2a1e amalik2
Added review UI for audio files.
ada1ddf9550498dc18b74134d8476c52746fd310 amalik2

Checks run (1 failed, 1 succeeded)

flake8 passed.
JSHint failed.

JSHint

amalik2
Review request changed
Commits:
Summary ID Author
Added review UI for audio files.
ada1ddf9550498dc18b74134d8476c52746fd310 amalik2
Added review UI for audio files.
cb684a5f2f50025ad8121f29ce0574031b8134c4 amalik2

Checks run (1 failed, 1 succeeded)

flake8 passed.
JSHint failed.

JSHint