-
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.
Browse files
Browse the repository at this point in the history
https://user-images.githubusercontent.com/17685520/62209957-a58c7e80-b3a3-11e9-8b88-6854647aa73a.png * add 10-sec FF button and generic FF button for non-10 configured * reduce time-display padding to 12px in the MEDIUM player (480px-768px) * increase control-button-container margin to 3px in the X-SMALL/SMALL player (280px-480px)
- Loading branch information
Showing
16 changed files
with
232 additions
and
17 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| //@flow | ||
| import style from '../../styles/style.scss'; | ||
| import {h} from 'preact'; | ||
| import {Localizer, Text} from 'preact-i18n'; | ||
| import BaseComponent from '../base'; | ||
| import {default as Icon, IconType} from '../icon'; | ||
| import {KeyMap} from '../../utils/key-map'; | ||
|
|
||
| const COMPONENT_NAME = 'Forward'; | ||
|
|
||
| /** | ||
| * Default forward step | ||
| * @type {number} | ||
| * @const | ||
| */ | ||
| export const FORWARD_DEFAULT_STEP = 10; | ||
|
|
||
| /** | ||
| * Forward component | ||
| * | ||
| * @class Forward | ||
| * @example <Forward player={this.player} step={5} /> | ||
| * @extends {BaseComponent} | ||
| */ | ||
| class Forward extends BaseComponent { | ||
| /** | ||
| * Creates an instance of Forward. | ||
| * @param {Object} obj obj | ||
| * @memberof Forward | ||
| */ | ||
| constructor(obj: Object) { | ||
| super({name: COMPONENT_NAME, player: obj.player}); | ||
| } | ||
|
|
||
| /** | ||
| * forward click handler | ||
| * | ||
| * @returns {void} | ||
| * @memberof Forward | ||
| */ | ||
| onClick(): void { | ||
| this.animate(); | ||
| let to; | ||
| const step = this.props.step || FORWARD_DEFAULT_STEP; | ||
| const from = this.player.currentTime; | ||
| if (this.player.currentTime + step > this.player.duration) { | ||
| to = this.player.duration; | ||
| } else { | ||
| to = this.player.currentTime + step; | ||
| } | ||
| this.player.currentTime = to; | ||
| this.notifyClick({ | ||
| from: from, | ||
| to: to | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * toggles the animation state to activate the rotate animation | ||
| * | ||
| * @returns {void} | ||
| * @memberof Forward | ||
| */ | ||
| animate(): void { | ||
| this.setState({animation: false}); | ||
| this.forceUpdate(); | ||
| this.setState({animation: true}); | ||
| } | ||
|
|
||
| /** | ||
| * render component | ||
| * | ||
| * @param {*} props - component props | ||
| * @returns {React$Element} - component element | ||
| * @memberof Forward | ||
| */ | ||
| render(props: any): React$Element<any> | void { | ||
| return ( | ||
| <div className={[style.controlButtonContainer, style.noIdleControl].join(' ')}> | ||
| <Localizer> | ||
| <button | ||
| tabIndex="0" | ||
| aria-label={<Text id={'controls.forward'} />} | ||
| className={`${style.controlButton} ${this.state.animation ? style.reverseRotate : ''}`} | ||
| onClick={() => this.onClick()} | ||
| onKeyDown={e => { | ||
| if (e.keyCode === KeyMap.ENTER) { | ||
| this.onClick(); | ||
| } | ||
| }}> | ||
| <Icon type={!props.step || props.step === FORWARD_DEFAULT_STEP ? IconType.Forward10 : IconType.Forward} /> | ||
| </button> | ||
| </Localizer> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| Forward.displayName = COMPONENT_NAME; | ||
|
|
||
| export {Forward}; |
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 {Forward} from './forward'; |
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
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,26 @@ | ||
| // @flow | ||
| import {FakeEvent} from '../fake-event'; | ||
|
|
||
| /** | ||
| * ForwardClickedEvent event | ||
| * | ||
| * @class ForwardClickedEvent | ||
| * @extends {FakeEvent} | ||
| */ | ||
| class ForwardClickedEvent extends FakeEvent { | ||
| /** | ||
| * @constructor | ||
| * | ||
| * @param {number} from - The start seek time. | ||
| * @param {number} to - The target seek time. | ||
| */ | ||
| constructor(from: number, to: number) { | ||
| super(FakeEvent.Type.USER_CLICKED_FORWARD); | ||
| this.payload = { | ||
| from: from, | ||
| to: to | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| export {ForwardClickedEvent}; |
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
Oops, something went wrong.