Skip to content

Commit

Permalink
feat: adding rewind control button (#128)
Browse files Browse the repository at this point in the history
  • Loading branch information
Dvir Hazout committed Nov 7, 2017
1 parent 4468e7c commit 1bef5d6
Show file tree
Hide file tree
Showing 7 changed files with 100 additions and 10 deletions.
14 changes: 7 additions & 7 deletions src/components/bottom-bar/_bottom-bar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,22 @@
float: left;
text-align: left;

&:first-child {
.control-button-container:first-child {
margin-left: 0px;
}
}
.right-controls {
float: right;
text-align: left;

.control-button-container {
margin: 0 6px;

&:last-child {
margin-right: 0;
}
.control-button-container:last-child {
margin-right: 0px;
}
}

.control-button-container {
margin: 0 6px;
}
}

.player.hover .bottom-bar,
Expand Down
10 changes: 9 additions & 1 deletion src/components/icon/icon.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ const IconType = {
Embed: 'embed',
Link: 'link',
ArrowDown: 'arrow-down',
StartOver: 'start-over'
StartOver: 'start-over',
Rewind: 'rewind',
Rewind10: 'rewind10'
}
/**
* Icon component
Expand Down Expand Up @@ -125,6 +127,12 @@ class Icon extends Component {
case IconType.StartOver:
return (<i className={[style.icon, style.iconStartOver].join(' ')} />)

case IconType.Rewind:
return (<i className={[style.icon, style.iconRewind].join(' ')} />)

case IconType.Rewind10:
return (<i className={[style.icon, style.iconRewind10].join(' ')} />)

default:
break;
}
Expand Down
6 changes: 5 additions & 1 deletion src/components/icon/icon.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@
embed: '<path fill="#{$color}" d="M377.989 579.335c12.669 12.904 12.669 33.777 0 46.68-12.733 12.969-33.427 12.969-46.16 0l-104.727-106.667c-12.669-12.904-12.669-33.777 0-46.68l104.727-106.667c12.733-12.969 33.427-12.969 46.16 0 12.669 12.904 12.669 33.777 0 46.68l-81.812 83.327 81.812 83.327zM646.011 412.68c-12.669-12.904-12.669-33.777 0-46.68 12.733-12.969 33.427-12.969 46.16 0l104.727 106.667c12.669 12.904 12.669 33.777 0 46.68l-104.727 106.667c-12.733 12.969-33.427 12.969-46.16 0-12.669-12.904-12.669-33.777 0-46.68l81.812-83.327-81.812-83.327zM572.293 250.6c17.455 4.445 28.025 22.388 23.686 40.066l-104.727 426.669c-4.349 17.719-22.048 28.535-39.545 24.079-17.455-4.445-28.025-22.388-23.686-40.066l104.727-426.669c4.349-17.719 22.048-28.535 39.545-24.079z" />',
link: '<path fill="#{$color}" d="M355.028 445.537c12.497 12.497 12.497 32.758 0 45.255s-32.758 12.497-45.255 0l-24.141-24.141c-49.92-49.92-49.832-130.999 0.094-180.925 49.984-49.984 130.995-50.025 180.955-0.064l113.266 113.266c49.964 49.964 49.935 130.955-0.064 180.955-12.497 12.497-32.758 12.497-45.255 0s-12.497-32.758 0-45.255c25.013-25.013 25.027-65.482 0.064-90.445l-113.266-113.266c-24.957-24.957-65.445-24.936-90.445 0.064-24.955 24.955-24.998 65.511-0.094 90.416l24.141 24.141zM668.972 578.463c-12.497-12.497-12.497-32.758 0-45.255s32.758-12.497 45.255 0l24.141 24.141c49.92 49.92 49.832 130.999-0.094 180.925-49.984 49.984-130.995 50.025-180.955 0.064l-113.266-113.266c-49.964-49.964-49.935-130.955 0.064-180.955 12.497-12.497 32.758-12.497 45.255 0s12.497 32.758 0 45.255c-25.013 25.013-25.027 65.482-0.064 90.445l113.266 113.266c24.957 24.957 65.445 24.936 90.445-0.064 24.955-24.955 24.998-65.511 0.094-90.416l-24.141-24.141z" />',
arrowDown: '<path fill="#{$color}" d="M301.255 338.745c-24.994-24.994-65.516-24.994-90.51 0s-24.994 65.516 0 90.51l256 256c24.994 24.994 65.516 24.994 90.51 0l256-256c24.994-24.994 24.994-65.516 0-90.51s-65.516-24.994-90.51 0l-210.745 210.745-210.745-210.745z" />',
startOver: '<path fill="#{$color}" d="M255.271 339.053c94.182-126.513 270.298-165.203 410.222-84.418 150.758 87.040 202.411 279.813 115.371 430.571s-279.813 202.411-430.571 115.371c-61.424-35.463-107.948-89.4-134.169-153.673-7.677-18.818-29.156-27.85-47.974-20.173s-27.85 29.156-20.173 47.974c32.339 79.269 89.818 145.906 165.517 189.611 185.96 107.364 423.747 43.649 531.111-142.311s43.649-423.747-142.311-531.111c-172.433-99.554-389.428-52.014-505.682 103.69l-27.226-78.49c-6.66-19.202-27.626-29.368-46.828-22.708s-29.368 27.626-22.708 46.828l52.434 151.164c5.36 15.452 20.275 25.513 36.61 24.694l159.799-8.011c20.299-1.018 35.929-18.298 34.911-38.596s-18.298-35.929-38.596-34.911l-89.738 4.499z" />'
startOver: '<path fill="#{$color}" d="M255.271 339.053c94.182-126.513 270.298-165.203 410.222-84.418 150.758 87.040 202.411 279.813 115.371 430.571s-279.813 202.411-430.571 115.371c-61.424-35.463-107.948-89.4-134.169-153.673-7.677-18.818-29.156-27.85-47.974-20.173s-27.85 29.156-20.173 47.974c32.339 79.269 89.818 145.906 165.517 189.611 185.96 107.364 423.747 43.649 531.111-142.311s43.649-423.747-142.311-531.111c-172.433-99.554-389.428-52.014-505.682 103.69l-27.226-78.49c-6.66-19.202-27.626-29.368-46.828-22.708s-29.368 27.626-22.708 46.828l52.434 151.164c5.36 15.452 20.275 25.513 36.61 24.694l159.799-8.011c20.299-1.018 35.929-18.298 34.911-38.596s-18.298-35.929-38.596-34.911l-89.738 4.499z" />',
rewind: '<path fill="#{$color}" opacity="0.5" d="M258.471 323.053c94.182-126.513 270.298-165.203 410.222-84.418 150.758 87.040 202.411 279.813 115.371 430.571s-279.813 202.411-430.571 115.371c-61.424-35.463-107.948-89.4-134.169-153.673-7.677-18.818-29.156-27.85-47.974-20.173s-27.85 29.156-20.173 47.974c32.339 79.269 89.818 145.906 165.517 189.611 185.96 107.364 423.747 43.649 531.111-142.311s43.649-423.747-142.311-531.111c-172.433-99.554-389.428-52.014-505.682 103.69l-27.226-78.49c-6.66-19.202-27.626-29.368-46.828-22.708s-29.368 27.626-22.708 46.828l52.434 151.164c5.36 15.452 20.275 25.513 36.61 24.694l159.799-8.011c20.299-1.018 35.929-18.298 34.911-38.596s-18.298-35.929-38.596-34.911l-89.738 4.499z"></path><path fill="#{$color}" d="M816.068 431.974c-20.553-78.699-71.369-149.456-147.375-193.338-139.923-80.785-316.040-42.095-410.222 84.418l89.738-4.499c20.299-1.018 37.579 14.613 38.596 34.911s-14.613 37.579-34.911 38.596l-159.799 8.011c-16.335 0.819-31.25-9.242-36.61-24.694l-52.434-151.164c-6.66-19.202 3.506-40.167 22.708-46.828s40.167 3.506 46.828 22.708l27.226 78.49c116.254-155.703 333.248-203.244 505.682-103.69 91.184 52.645 152.976 136.648 179.618 230.523l-69.044 26.555z"></path>',
rewind10: '<path fill="#{$color}" d="M258.471 323.053c94.182-126.513 270.298-165.203 410.222-84.418 150.758 87.040 202.411 279.813 115.371 430.571s-279.813 202.411-430.571 115.371c-61.424-35.463-107.948-89.4-134.169-153.673-7.677-18.818-29.156-27.85-47.974-20.173s-27.85 29.156-20.173 47.974c32.339 79.269 89.818 145.906 165.517 189.611 185.96 107.364 423.747 43.649 531.111-142.311s43.649-423.747-142.311-531.111c-172.433-99.554-389.428-52.014-505.682 103.69l-27.226-78.49c-6.66-19.202-27.626-29.368-46.828-22.708s-29.368 27.626-22.708 46.828l52.434 151.164c5.36 15.452 20.275 25.513 36.61 24.694l159.799-8.011c20.299-1.018 35.929-18.298 34.911-38.596s-18.298-35.929-38.596-34.911l-89.738 4.499z"></path><path fill="#{$color}" d="M413.327 636.083h67.358v-252.083h-48.527c-2.173 7.358-4.949 13.589-8.329 18.693s-7.726 9.139-13.037 12.106c-5.311 2.967-11.709 5.103-19.193 6.409s-16.417 1.958-26.798 1.958v41.302h48.527v171.616zM596.807 554.192c0 17.803 1.569 29.849 4.708 36.139s8.208 9.435 15.21 9.435c7.001 0 12.071-3.145 15.21-9.435s4.708-18.336 4.708-36.139v-83.316c0-17.803-1.569-29.849-4.708-36.139s-8.208-9.435-15.21-9.435c-7.001 0-12.071 3.145-15.21 9.435s-4.708 18.336-4.708 36.139v83.316zM529.449 512.534c0-25.398 1.75-46.405 5.251-63.021s8.812-29.789 15.934-39.522c7.122-9.732 16.176-16.497 27.16-20.295s23.962-5.697 38.93-5.697c14.969 0 27.945 1.899 38.93 5.697s20.038 10.563 27.16 20.295c7.122 9.732 12.433 22.906 15.934 39.522s5.251 37.622 5.251 63.021c0 25.636-1.75 46.702-5.251 63.199s-8.812 29.552-15.934 39.166c-7.122 9.613-16.176 16.2-27.16 19.761s-23.962 5.341-38.93 5.341c-14.969 0-27.945-1.78-38.93-5.341s-20.038-10.147-27.16-19.761c-7.122-9.613-12.433-22.668-15.934-39.166s-5.251-37.563-5.251-63.199z"></path>'
);
$icon: map-get($icons, $icon-name);
$svg-encoded-icon: svg-url($icon);
Expand Down Expand Up @@ -102,3 +104,5 @@
.icon-link { background-image: icon(link, '#fff'); }
.icon-arrow-down { background-image: icon(arrowDown, '#fff'); }
.icon-start-over { background-image: icon(startOver, '#fff'); }
.icon-rewind { background-image: icon(rewind, '#fff'); }
.icon-rewind-10 { background-image: icon(rewind10, '#fff') }
1 change: 1 addition & 0 deletions src/components/rewind/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default from './rewind';
74 changes: 74 additions & 0 deletions src/components/rewind/rewind.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
//@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';

/**
* Default rewind step
* @type {number} number of seconds
* @const
*/
const DEFAULT_STEP = 10;

/**
* RewindControl component
*
* @class RewindControl
* @example <RewindControl player={this.player} step={5} />
* @extends {BaseComponent}
*/
class RewindControl extends BaseComponent {

/**
* Creates an instance of RewindControl.
* @param {Object} obj obj
* @memberof RewindControl
*/
constructor(obj: Object) {
super({name: 'Rewind', player: obj.player});
}

/**
* rewind click handler
*
* @returns {void}
* @memberof RewindControl
*/
onClick(): void {
let step = this.props.step || DEFAULT_STEP;

if (this.player.currentTime - step < 0) {
this.player.currentTime = 0;
}
else {
this.player.currentTime = this.player.currentTime - step;
}
}

/**
* render component
*
* @param {*} props - component props
* @returns {React$Element} - component element
* @memberof RewindControl
*/
render(props: any): React$Element<any> | void {
return (
<div className={[style.controlButtonContainer, style.controlRewind].join(' ')}>
<Localizer>
<button
aria-label={<Text id={'controls.rewind'} />}
className={style.controlButton}
onClick={() => this.onClick()}
>
<Icon type={(!props.step || props.step === 10) ? IconType.Rewind10 : IconType.Rewind} />
</button>
</Localizer>
</div>
)
}
}

export default RewindControl;
3 changes: 2 additions & 1 deletion src/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"share": "Share",
"language": "Language",
"settings": "Settings",
"fullscreen": "Fullscreen"
"fullscreen": "Fullscreen",
"rewind": "Rewind"
},
"settings": {
"quality": "Quality",
Expand Down
2 changes: 2 additions & 0 deletions src/ui-presets/playback.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import OverlayPlay from '../components/overlay-play';
import PrePlaybackPlayOverlay from '../components/pre-playback-play-overlay';
import Loading from '../components/loading';
import PlayPauseControl from '../components/play-pause';
import RewindControl from '../components/rewind';
import SeekBarPlaybackContainer from '../components/seekbar-playback-container';
import VolumeControl from '../components/volume';
import SettingsControl from '../components/settings';
Expand Down Expand Up @@ -36,6 +37,7 @@ export default function playbackUI(props: any): React$Element<any> {
<SeekBarPlaybackContainer showFramePreview showTimeBubble player={props.player} config={props.config} />
<div className={style.leftControls}>
<PlayPauseControl player={props.player} />
<RewindControl player={props.player} step={10} />
<TimeDisplayPlaybackContainer format='current / total' />
</div>
<div className={style.rightControls}>
Expand Down

0 comments on commit 1bef5d6

Please sign in to comment.