Design: Account Settings option to select different notification sounds (sound files attached)

Description

Ticket for APR

Add the ability to choose between the 3 attached notification sound files from the account settings modal. These sounds are public domain (CC0: creative commons license).

UI
In Account Settings under Notifications > Desktop notification sounds,
1) Maintain the "on" and "off" radio buttons.
2) Add a drop-down selector between the "off" radio button and the help text.
a) The drop-down has the three sound selections of "Bing", "Drop", "Xylophone".
b) To the right of the drop down selector is a low priority "Preview" button (ie does not have a colored box around the button).
3) Update help text: "If on, the selected sound is played for any activity which fires a desktop notification. Desktop notification sounds are available on Firefox, Safari, Chrome, Internet Explorer, and Edge."
4) When in collapsed view, field value should indicate sound choice instead of on, e.g. instead of "On" display "Plays Bing sound",

Functionality
1) Clicking a sound in the drop-down list plays a single sample of the sound.
2) Clicking "Preview" will play a single sample of the sound.
3) If the "off" radio button is selected,
a) the drop-down list is greyed out and cannot be clicked
b) the preview button disappears

QA Test Steps

None

Status

Mana

2

Assignee

Andrew Brown

Reporter

Ian Tien

Epic Link

Fix versions

Mattermost Team

UX

Sprint

Labels

None

GitHub Issue

None