Update documentation

Summary: This diff updates the docusaurus documentation for vrsplayer to reflect the recent UI changes made to the app. Updated docusaurus components as required by the tooling.

Reviewed By: robz

Differential Revision: D56739724

fbshipit-source-id: f246b40313e0628c0718f9aa84f4925107b78408

website/docs/vrsplayer.md

@@ -17,14 +17,18 @@ To play/pause/stop playback, use the following controls.
 
 ![Playback Controls](img/Controls.png)
 
-The Previous and Next Frame buttons will play at most one frame backward or forward for each visible stream. The Speed controls let you chose to play slower or faster. Obviously, if there is too much data to process for your system, frames will be dropped.
+The Previous and Next Frame buttons will play at most one frame backward or forward for each visible stream. The Speed controls let you choose to play slower or faster. Obviously, if there is too much data to process for your system, frames will be dropped.
 
 ## Overlay Selection
 
-The overlay selector lets you chose what information to display over the frames. Chose "Hide" to show nothing, chose "Tags" to show streams tags, chose "Configuration", "State" or "Data" to show the metadata found in the last record of that type.
+The overlay selector lets you choose what information to display over the frames. Choose "Hide" to show nothing, "Tags" to show streams tags, and "Configuration", "State" or "Data" to show the metadata found in the last record of that type.
 
 ![Overlay Control](img/OverlayPopup.png)
 
+Use the Text Overlay menubar options to control the color of the text, its font size, and whether the text is drawn on a solid background or not.
+
+![Text Overlay Menu](img/TextOverlayMenu.png)
+
 The `vrsplayer` app is improved regularly, so it's important to be able to discover functionality directly from the app's user interface. The following sections show less obvious features and controls.
 
 ## Tooltips
@@ -41,17 +45,41 @@ The tooltip shown over frames shows the stream's ID ("214-1"), the `RecordableTy
 
 ## Menu Bar Commands
 
-The Menu Bar offers functionality available only there, don't forget to look there!
-
-The `Layout` menu's top section let you save and manage presets. Save your favorite stream display configurations, including stream orientation, stream order, which streams are visible or hidden, using the `Save Preset` command. To arrange streams, see the Context Menu section below.
+The Menu Bar offers functionality that's easy to ignore, don't forget to look for more options there!
 
-The commands in the lower section let you control in how many row of how many views the streams will be arranged. `Layout Frames 4x2` means using 2 rows with up to 4 streams each. The layout configurations offered depend on the number of image streams visible.
+### Layout
 
 ![Layout Menu, default](img/LayoutMenuDefault.png)
 
-Once at least one preset has been saved, you can recall or delete presets, which automatically get a keyboard shortcut for quick access.
+The `Layout` menu lets you control the number rows and the number of streams shown per row. `Layout Frames 4x2` means using 2 rows with up to 4 streams each. The layout configurations offered depend on the number of image streams visible.
+
+### Audio
+
+If your file contains a VRS stream with audio data that contains more than one audio channel, the Audio menu will let you control which audio channel(s) to play. For instance, with an Aria file containing 7 audio channels, the audio menu might look like so:
+
+![Audio Menu, mono](img/AudioMenu-Mono.png)
+
+In this situation, the Mono playback option was selected, so you can choose to play any of the 7 audio channels. If your system supports stereo playback (as most systems do), that channel will be played on both output channels. Use this option to listen to audio channels individually.
+
+Assuming your system supports stereo playback, you can choose one of two stereo channel pairing modes: Auto Channel Pairing, and Manual Channel Pairing.
 
-![Layout Menu, with presets](img/LayoutMenuWithPreset.png)
+![Audio Menu, stereo - auto-pairing](img/AudioMenu-Stereo-AutoPairing.png)
+
+Auto Channel Pairing lets you select a first audio channel ("left"), and the next audio channel will automatically be used as the "right" channel. If that automatic selection is not what you need, use the Manual Channel Pairing option:
+
+![Audio Menu, stereo - manual-pairing](img/AudioMenu-Stereo-ManualPairing.png)
+
+In this mode, you can select arbitrary channels for the "left" and "right" channel of your stereo playback.
+
+### Presets
+
+![Presets Menu, save](img/PresetsMenuSave.png)
+
+The `Presets` menu's top section lets you save and manage presets. Use the `Save Preset` command to save your favorite stream display and audio configurations, including stream orientation, stream order, and which streams are visible or hidden. To arrange the image streams, you can also use the options presented in the Context Menu section below.
+
+![Presets Menu, delete](img/PresetsMenu.png)
+
+Once at least one preset has been saved, you can recall or delete presets, which automatically get a keyboard shortcut for quick access.
 
 ## Context Menu
 
@@ -70,7 +98,7 @@ Normal playback tries to flow at timestamp speed, and frames will be dropped eas
 ![fps display](img/FpsDisplay.png)
 
 - the first number (16) is the count of records read from disk per second. During playback, it should be the highest of all the counters. That step includes reading data from storage, lossless decompression, data interpretation and `StreamPlayer` callbacks processing. Reading files is a single threaded operation (as file APIs typically are), so this work is done by same thread for all streams, which is no decoding or conversion work is done on that thread.
-- the second number (4) is count of frames "decoded" per second. If images are encoded (jpg/png) they will be decoded. Then if the frames needs to be transcoded to a different pixel format for display, they'll be converted to a Qt friendly pixel format. If processing is too expensive, frames might be skipped at that stage. That second number can only be equal or lower than the first. This processing is happening on a dedicated thread for each stream.
+- the second number (4) is the count of frames "decoded" per second. If images are encoded (jpg/png) they will be decoded. Then if the frames need to be transcoded to a different pixel format for display, they'll be converted to a Qt friendly pixel format. If processing is too expensive, frames might be skipped at that stage. That second number can only be equal or lower than the first. This processing is happening on a dedicated thread for each stream.
 - the last number (2) is the "display" fps ("frames per second"), which is the number of times the code that draws the frame in the Qt widget is called each second. During playback, the number should be equal or lower than the second, but if you resize the windows, that number can go way up, as even if playback is paused and the two first are frozen, this counter will be updated as the window is updated. All draw operations happen in the app's single UI thread.
 
 Putting it all together, for replay, one thread reads the files and extracts the raw image data, one thread draws the processed images in the user interface, but each stream has its own thread to do its image processing independently.