feat: add skip forward/backward buttons #8147
+725
−93
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Video.js Sandbox</title> | ||
| <link href="../dist/video-js.css" rel="stylesheet" type="text/css" /> | ||
| <script src="../dist/video.js"></script> | ||
| </head> | ||
| <body> | ||
| <div> | ||
| <h2>Forward: 5, Backward: 10</h2> | ||
| <video-js | ||
| id="vid1" | ||
| controls | ||
| preload="auto" | ||
| width="640" | ||
| height="264" | ||
| poster="https://vjs.zencdn.net/v/oceans.png" | ||
| > | ||
| <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> | ||
| <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> | ||
| <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" /> | ||
| <track | ||
| kind="captions" | ||
| src="../docs/examples/shared/example-captions.vtt" | ||
| srclang="en" | ||
| label="English" | ||
| /> | ||
| <p class="vjs-no-js"> | ||
| To view this video please enable JavaScript, and consider upgrading to | ||
| a web browser that | ||
| <a href="https://videojs.com/html5-video-support/" target="_blank" | ||
| >supports HTML5 video</a | ||
| > | ||
| </p> | ||
| </video-js> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2>Forward: 10, Backward: 30</h2> | ||
| <video-js | ||
| id="vid2" | ||
| controls | ||
| preload="auto" | ||
| width="640" | ||
| height="264" | ||
| poster="https://vjs.zencdn.net/v/oceans.png" | ||
| > | ||
| <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> | ||
| <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> | ||
| <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" /> | ||
| <track | ||
| kind="captions" | ||
| src="../docs/examples/shared/example-captions.vtt" | ||
| srclang="en" | ||
| label="English" | ||
| /> | ||
| <p class="vjs-no-js"> | ||
| To view this video please enable JavaScript, and consider upgrading to | ||
| a web browser that | ||
| <a href="https://videojs.com/html5-video-support/" target="_blank" | ||
| >supports HTML5 video</a | ||
| > | ||
| </p> | ||
| </video-js> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2>Forward: 10</h2> | ||
| <video-js | ||
| id="vid3" | ||
| controls | ||
| preload="auto" | ||
| width="640" | ||
| height="264" | ||
| poster="https://vjs.zencdn.net/v/oceans.png" | ||
| > | ||
| <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" /> | ||
| <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" /> | ||
| <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" /> | ||
| <track | ||
| kind="captions" | ||
| src="../docs/examples/shared/example-captions.vtt" | ||
| srclang="en" | ||
| label="English" | ||
| /> | ||
| <p class="vjs-no-js"> | ||
| To view this video please enable JavaScript, and consider upgrading to | ||
| a web browser that | ||
| <a href="https://videojs.com/html5-video-support/" target="_blank" | ||
| >supports HTML5 video</a | ||
| > | ||
| </p> | ||
| </video-js> | ||
| </div> | ||
|
|
||
| <script> | ||
| var vid1 = document.getElementById("vid1"); | ||
| var options = { | ||
| muted: true, | ||
| controlBar: { skipButtons: { forward: 5, backward: 10 } }, | ||
| }; | ||
| videojs(vid1, options); | ||
|
|
||
| var vid2 = document.getElementById("vid2"); | ||
| options.controlBar.skipButtons = { forward: 10, backward: 30 }; | ||
| videojs(vid2, options); | ||
|
|
||
| var vid3 = document.getElementById("vid3"); | ||
| options.controlBar.skipButtons = {forward: 10} | ||
| videojs(vid3, options); | ||
| </script> | ||
| </body> | ||
| </html> |
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,40 @@ | ||
| .video-js .vjs-skip-forward-5 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-forward-5; | ||
| } | ||
| } | ||
|
|
||
| .video-js .vjs-skip-forward-10 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-forward-10; | ||
| } | ||
| } | ||
| .video-js .vjs-skip-forward-30 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-forward-30; | ||
| } | ||
| } | ||
|
|
||
| .video-js .vjs-skip-backward-5 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-replay-5; | ||
| } | ||
| } | ||
|
|
||
| .video-js .vjs-skip-backward-10 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-replay-10; | ||
| } | ||
| } | ||
|
|
||
| .video-js .vjs-skip-backward-30 { | ||
| cursor: pointer; | ||
| & .vjs-icon-placeholder { | ||
| @extend .vjs-icon-replay-30; | ||
| } | ||
| } |
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,69 @@ | ||
| import Button from '../../button'; | ||
| import Component from '../../component'; | ||
|
|
||
| /** | ||
| * Button to skip backward a configurable amount of time | ||
| * through a video. Renders in the control bar. | ||
| * | ||
| * * e.g. options: {controlBar: {skipButtons: backward: 5}} | ||
| * | ||
| * @extends Button | ||
| */ | ||
| class SkipBackward extends Button { | ||
| constructor(player, options) { | ||
| super(player, options); | ||
|
|
||
| this.validOptions = [5, 10, 30]; | ||
| this.skipTime = this.getSkipBackwardTime(); | ||
|
|
||
| if (this.skipTime && this.validOptions.includes(this.skipTime)) { | ||
| this.controlText(`Skip backward ${this.skipTime} seconds`); | ||
| this.show(); | ||
| } else { | ||
| this.hide(); | ||
| } | ||
| } | ||
|
|
||
| getSkipBackwardTime() { | ||
| const playerOptions = this.options_.playerOptions; | ||
|
|
||
| return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.backward; | ||
| } | ||
|
|
||
| buildCSSClass() { | ||
| return `vjs-skip-backward-${this.getSkipBackwardTime()} ${super.buildCSSClass()}`; | ||
| } | ||
|
|
||
| /** | ||
| * On click, skips backward in the video by a configurable amount of seconds. | ||
| * If the current time in the video is less than the configured 'skip backward' time, | ||
| * skips to beginning of video or seekable range. | ||
| * | ||
| * Handle a click on a `SkipBackward` button | ||
| * | ||
| * @param {EventTarget~Event} event | ||
| * The `click` event that caused this function | ||
| * to be called | ||
| */ | ||
| handleClick(event) { | ||
| const currentVideoTime = this.player_.currentTime(); | ||
| const liveTracker = this.player_.liveTracker; | ||
| const seekableStart = liveTracker && liveTracker.isLive() && liveTracker.seekableStart(); | ||
| let newTime; | ||
|
|
||
| if (seekableStart && (currentVideoTime - this.skipTime <= seekableStart)) { | ||
| newTime = seekableStart; | ||
| } else if (currentVideoTime >= this.skipTime) { | ||
| newTime = currentVideoTime - this.skipTime; | ||
| } else { | ||
| newTime = 0; | ||
| } | ||
| this.player_.currentTime(newTime); | ||
| } | ||
| } | ||
|
|
||
| SkipBackward.prototype.controlText_ = 'Skip Backward'; | ||
|
|
||
| Component.registerComponent('SkipBackward', SkipBackward); | ||
|
|
||
| export default SkipBackward; | ||
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,66 @@ | ||
| import Button from '../../button'; | ||
| import Component from '../../component'; | ||
|
|
||
| /** | ||
| * Button to skip forward a configurable amount of time | ||
| * through a video. Renders in the control bar. | ||
| * | ||
| * e.g. options: {controlBar: {skipButtons: forward: 5}} | ||
| * | ||
| * @extends Button | ||
| */ | ||
| class SkipForward extends Button { | ||
| constructor(player, options) { | ||
| super(player, options); | ||
|
|
||
| this.validOptions = [5, 10, 30]; | ||
| this.skipTime = this.getSkipForwardTime(); | ||
|
|
||
| if (this.skipTime && this.validOptions.includes(this.skipTime)) { | ||
| this.controlText(`Skip forward ${this.skipTime} seconds`); | ||
|
There was a problem hiding this comment. Same comment here about localization. There was a problem hiding this comment. I've now moved the control text strings from |
||
| this.show(); | ||
| } else { | ||
| this.hide(); | ||
| } | ||
| } | ||
|
|
||
| getSkipForwardTime() { | ||
| const playerOptions = this.options_.playerOptions; | ||
|
|
||
| return playerOptions.controlBar && playerOptions.controlBar.skipButtons && playerOptions.controlBar.skipButtons.forward; | ||
| } | ||
|
|
||
| buildCSSClass() { | ||
| return `vjs-skip-forward-${this.getSkipForwardTime()} ${super.buildCSSClass()}`; | ||
| } | ||
|
|
||
| /** | ||
| * On click, skips forward in the duration/seekable range by a configurable amount of seconds. | ||
| * If the time left in the duration/seekable range is less than the configured 'skip forward' time, | ||
| * skips to end of duration/seekable range. | ||
| * | ||
| * Handle a click on a `SkipForward` button | ||
| * | ||
| * @param {EventTarget~Event} event | ||
| * The `click` event that caused this function | ||
| * to be called | ||
| */ | ||
| handleClick(event) { | ||
| const currentVideoTime = this.player_.currentTime(); | ||
| const liveTracker = this.player_.liveTracker; | ||
| const duration = (liveTracker && liveTracker.isLive()) ? liveTracker.seekableEnd() : this.player_.duration(); | ||
| let newTime; | ||
|
|
||
| if (currentVideoTime + this.skipTime <= duration) { | ||
misteroneill marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| newTime = currentVideoTime + this.skipTime; | ||
| } else { | ||
| newTime = duration; | ||
| } | ||
|
|
||
| this.player_.currentTime(newTime); | ||
| } | ||
| } | ||
|
|
||
| Component.registerComponent('SkipForward', SkipForward); | ||
|
|
||
| export default SkipForward; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This way means the translation file need a translation for each allowed increment. It's relatively manageable with 3 permitted values, but it is possible to use a variable in these translations:
this.localize('Skip backward {seconds} seconds', [this.skipTime])Either way there should be at least an entry for each string in en.json, so there's a template to translate from.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree.
It should be safe to pass a pre-localized string to
controlText, like:The reason for this is that translators will want a tokenized static string. The
{seconds}token tells them what sort of value to expect in that position.Then the
en.jsonshould have a new entry:The reason to include these in
en.jsonis that is used as a reference by the script that parses out missing translations.EDIT: adding a bit more context here...
The
controlTextmethod will pass the string throughlocalizeagain, but this will be a pass-thru because the replacement of{seconds}will have already happened. It's unlikely there would be a matching localization key for something likeSkip backward 1 seconds.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh ok thank you for the explanation! How does translation normally work - am I only expected to add this to
en.jsonand then translators can add the translations to the otherjsonfiles?