-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(FEC-13040): Add an 'Advanced Audio Descriptions' settings option…
… to the (“Gear”) settings (#752) Add an 'Advanced Audio Descriptions' configurable settings option to the (“Gear”) settings solves FEC-1304
- Loading branch information
1 parent
9a20e54
commit 2149d98
Showing
15 changed files
with
214 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export {ToggleSwitch} from './toggle-switch'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| //@flow | ||
| import {h, Component} from 'preact'; | ||
| import {KeyMap} from 'utils'; | ||
| import style from '../../styles/style.scss'; | ||
|
|
||
| const COMPONENT_NAME = 'ToggleSwitch'; | ||
|
|
||
| /** | ||
| * Toggle Switch component | ||
| * | ||
| * @class ToggleSwitch | ||
| * @example <ToggleSwitch /> | ||
| * @extends {Component} | ||
| */ | ||
| class ToggleSwitch extends Component { | ||
| /** | ||
| * render Toggle Switch component | ||
| * | ||
| * @param {boolean} isChecked - - Whether the input is checked or not | ||
| * @returns {void} | ||
| * @member ToggleSwitch | ||
| */ | ||
| onChange = (isChecked: boolean) => { | ||
| this.props.onMenuChosen(isChecked); | ||
| }; | ||
|
|
||
| /** | ||
| * render Toggle Switch component | ||
| * | ||
| * @param {KeyboardEvent} event - - Keyboard Event | ||
| * @returns {void} | ||
| * @member ToggleSwitch | ||
| */ | ||
| handleOnKeyDown = (event: KeyboardEvent) => { | ||
| if (event.keyCode === KeyMap.ENTER || event.keyCode === KeyMap.SPACE) { | ||
| event.preventDefault(); | ||
| this.onChange(!this.props.isChecked); | ||
| } | ||
| }; | ||
|
|
||
| /** | ||
| * render Toggle Switch component | ||
| * | ||
| * @param {*} props - component props | ||
| * @returns {React$Element} component element | ||
| * @memberof ToggleSwitch | ||
| */ | ||
| render(props: any): React$Element<any> { | ||
| return ( | ||
| <label | ||
| onKeyDown={event => this.handleOnKeyDown(event)} | ||
| className={style.switch} | ||
| ref={el => { | ||
| if (props.pushRef) { | ||
| props.pushRef(el); | ||
| } | ||
| }} | ||
| aria-label={props.name} | ||
| role="switch" | ||
| aria-checked={props.isChecked} | ||
| tabIndex="-1"> | ||
| <input | ||
| name={props.name} | ||
| className={style.toggleInput} | ||
| type="checkbox" | ||
| checked={props.isChecked} | ||
| onChange={e => this.onChange(e.target.checked)} | ||
| /> | ||
| <span className={style.slider} /> | ||
| </label> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ToggleSwitch.displayName = COMPONENT_NAME; | ||
| export {ToggleSwitch}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| .switch { | ||
| position: relative; | ||
| display: inline-block; | ||
| width: 32px; | ||
| height: 16px; | ||
|
|
||
| .toggle-input { | ||
| opacity: 0; | ||
| width: 0; | ||
| height: 0; | ||
|
|
||
| &:checked + .slider { | ||
| background-color: #2196f3; | ||
| } | ||
|
|
||
| &:focus + .slider { | ||
| box-shadow: 0 0 1px #2196f3; | ||
| } | ||
|
|
||
| &:checked + .slider:before { | ||
| transform: translateX(14px); | ||
| -webkit-transform: translateX(14px); | ||
| -ms-transform: translateX(14px); | ||
| } | ||
| } | ||
|
|
||
| .slider { | ||
| height: 100%; | ||
| position: absolute; | ||
| cursor: pointer; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background-color: #ccc; | ||
| -webkit-transition: 0.4s; | ||
| transition: 0.4s; | ||
| border-radius: 34px; | ||
|
|
||
| &:before { | ||
| position: absolute; | ||
| content: ''; | ||
| height: 12px; | ||
| width: 12px; | ||
| left: 3px; | ||
| top: 2px; | ||
| background-color: white; | ||
| -webkit-transition: 0.3s; | ||
| transition: 0.3s; | ||
| border-radius: 50%; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters