# AN - FE improvements

## Improvements

### Improve Player volume control usability

**Issue:** In the video preview screen, if I want to mute the sound, I hover the volume icon. But then it moves to the left to reveal the volume bar and I have to follow it, being careful not to move the cursor outside the area or it will close and I have to start again. Please see the behavior on the Youtube player which is way more intuitive and friendly. If the user’s intention is to click on a button, then that button should’t change its place just when they’re about to do so.

**Solution**: Switch positions of the "Mute/Unmute" button and "Volume" slider, removing the need to move the mouse pointer to mute/unmute.

### Add new user password format validation

**Issue:** Setting initial password for a new user – system doesn’t show password requirements beforehand, just shows error if they’re not accomplished.

**Solution:** Display a validation error message beneath the "Password" field when requirements are not met, and disable the "Save" button.

**TODO:** @Silviu to supply error message.

### Dropdown focus improvements

**Issue 1:** Would be nice to be able to filter the results as I type. (eg.: open dropdown - hit “r” on the keyboard - the dropdown filters and shows only items containing “r”)

**Solution:** Simulate default browser behaviour of focusing the first option that begins with the letter pressed. When more than one option matches, use subsequent key presses to focus the best match.

---

**Issue 2:** Drop-down shows first value as hovered on by default

**Solution:** Prevent auto-focus of first option. Only focus first item when Down Arrow key is pressed.

---

**Issue 3:** Confusing dropdown option highlight colors.

**Solution:** Reverse styles for hover and selected highlights. Hovered/focused items should have a blue transparent background and white text. Selected items should have blue text over default dropdown background.

---

**Issue 4:** Cycling through dropdown options using Arrow keys when the dropdown has a scroll bar does not bring the focused option into view.

**Solution:** Fix list scrolling to always show the focused option. Pressing the down arrow key when the last visible option is focused should scroll the list down until the next item is visibile. Pressing the up arrow key when the first visible option is focused should scroll the list up until the previous item is visible.

### Active Display Area field order

**Issue:** Media Warp (Active display area) - Width and Height should be horizontally aligned, not vertically. Same for X Offset and Y Offset.

**Solution:** Reposition the ADA fields. They should use the same layout as "Crop Settings". Tabbing through the fields should follow the order: Width, Height, X, Y.

## Bugs (visual, functional)

### Single row selection controls use wrong UI element

**Issue:** Both single and multiple-selection tables use a Checkbox element to select rows. In interface design when only one item out of multiple can be selected, a Radio element is used instead

**Solution**: Replace Checkbox with Radio buttons in single selection tables.

### Shifting table backgrounds when expanding rows

~~**Issue:** Anywhere it is possible to expand a list, the theme of the site doesn’t clearly show what was expanded and the items contained by it. Expand a package inside an asset or expand a timeline when creating an IMF package and it will be clear that the way in which the list expands is confusing.~~

**Issue:** Alternating row background colors are shifted when expanding/collapsing a row. All rows beneath the one selected change their background color from dark to light and vcv.

**Solution:** Fix the alternating row background colors, so they are not affected by expanding/collapsing. Expanded row details should have the same background color as the row they relate to.

### Can't collapse some containers by clicking on their title

**Issue:** Some containers can only be expanded by clicking on the collapse/expand arrow icon.

**Solution:** Containers should expand when clicking anywhere on the header.

* Maros & Smart agents
* Batch jobs
* Workflow

### Bad number input +/- controls style

**Issue:** Number input field currently has 2 minuscule arrows on the right

**Solution:** Hide the default browser increment/decrement buttons, and add +/- icon buttons inside the input element (- on left edge before the number, + on right edge).

### "Add Media Item" modal can be closed while uploads are running

**Issue 1:** "Add Media Item" modal can be closed by clicking outside it, even if there are running uploads. There is no way to return to the list of active uploads after it is closed.

**Note:** Because of this issue, the "modal" option of popups has been used in places where the popup can be freely closed by the user by clicking a "Close" button inside it, with no other requirement. Applying a general fix now should be avoided. The solution should ONLY apply to "Add Media Item".

**Solution:** Add a new option for popups that duplicates the "modal" functionality (minus the bug), and use it for "Add Media Item", to prevent users from closing it while there are uploads in progress. No other popups should be affected.

---

**Issue 2:** There is an unnecessary and almost invisible Close button when opening a Dialog.

**Solution:** Remove it.

### Clickable CPL editor buttons have no effects

**Issue 1:** After removing all the segments of a CPL, clicking the "Add track" button does nothing.

**Solution:** Gray out the "Add track" button when there are no segments.

---

**Issue 2:** The CPL issues badge in the top right corner of the CPL editor page shows a hand cursor when hovered, indiciating that it is clickable, but clicking it does nothing.

**Solution:** If no issues are present, the button should not be clickable.

### Title details page shifts while loading

**Issue:** Opening a Title's details page for the first time causes content shifting to the right after the "Title Navigator" panel finishes loading. Clicking one of the tabs while this panel is loading will sometimes activate a different tab (the one that happened to share the same position on the screen).

**Solution:** Keep the "Title Navigator" panel always visible, and show a loading animation inside it while it's loading the hierarchy.