Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add skip forward/backward buttons #8147

Merged
merged 19 commits into from
Mar 6, 2023
Merged

feat: add skip forward/backward buttons #8147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
7201818
remove duplicate icons from icon example
usmanonazim Feb 13, 2023
02a0a23
create initial forward and back button classes
usmanonazim Feb 14, 2023
465ac8a
add logic for back/forward buttons on click
usmanonazim Feb 15, 2023
eaf8e42
change icon used based on option passed into player
usmanonazim Feb 15, 2023
ee6a2b0
move logic from forward and back buttons into one component
usmanonazim Feb 16, 2023
2614c36
add jsdoc comments for clarity
usmanonazim Feb 16, 2023
0e5b43f
create initial test file
usmanonazim Feb 16, 2023
d5b9651
refactor button logic into separate files
usmanonazim Feb 20, 2023
09cbe2a
update skip button example and add test files
usmanonazim Feb 20, 2023
d32de74
test both the forward and backward buttons
usmanonazim Feb 20, 2023
eeb0efd
test handleClick fns for both forward and backward btns
usmanonazim Feb 21, 2023
560ab73
update skip buttons example
usmanonazim Feb 21, 2023
5ba8cfd
update jsdocs for skip backward and forward buttons
usmanonazim Feb 21, 2023
d087fc7
make control text accessible and use seekableEnd/Start when skipping …
usmanonazim Feb 23, 2023
4c5aa13
update font version to use updated icons
usmanonazim Feb 27, 2023
6964f39
set control text only if config is valid
usmanonazim Feb 28, 2023
45bc81e
add link to sandbox page & use localization
usmanonazim Mar 1, 2023
c8a26f0
update translations needed
usmanonazim Mar 1, 2023
9a8d070
Merge branch 'main' into feat/forward-back-buttons
usmanonazim Mar 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 131 additions & 47 deletions docs/translations-needed.md
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ <h2>Navigation</h2>
<li><a href="sandbox/quality-levels.html">QualityLevels Demo</a></li>
<li><a href="sandbox/autoplay-tests.html">Autoplay Tests</a></li>
<li><a href="sandbox/noUITitleAttributes.html">noUITitleAttributes Demo</a></li>
<li><a href="sandbox/skip-buttons.html">Skip Buttons demo</a></li>
<li><a href="sandbox/debug.html">Videojs debug build test page</a></li>
</ul>

Expand Down
4 changes: 3 additions & 1 deletion lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,5 +90,7 @@
"Color": "Color",
"Opacity": "Opacity",
"Text Background": "Text Background",
"Caption Area Background": "Caption Area Background"
"Caption Area Background": "Caption Area Background",
"Skip backward {1} seconds": "Skip backward {1} seconds",
"Skip forward {1} seconds": "Skip forward {1} seconds"
}
121 changes: 80 additions & 41 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
"mux.js": "^6.2.0",
"safe-json-parse": "4.0.0",
"videojs-contrib-quality-levels": "3.0.0",
"videojs-font": "4.0.0",
"videojs-font": "4.1.0",
"videojs-vtt.js": "0.15.4"
},
"devDependencies": {
Expand Down
3 changes: 0 additions & 3 deletions sandbox/icons.html.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,6 @@
<li><span class="vjs-icon-forward-5"></span> <code>.vjs-icon-forward-5</code></li>
<li><span class="vjs-icon-forward-10"></span> <code>.vjs-icon-forward-10</code></li>
<li><span class="vjs-icon-forward-30"></span> <code>.vjs-icon-forward-30</code></li>
<li><span class="vjs-icon-forward-30"></span> <code>.vjs-icon-forward-30</code></li>
<li><span class="vjs-icon-forward-30"></span> <code>.vjs-icon-forward-30</code></li>
<li><span class="vjs-icon-forward-30"></span> <code>.vjs-icon-forward-30</code></li>
<li><span class="vjs-icon-audio"></span> <code>.vjs-icon-audio</code></li>
<li><span class="vjs-icon-next-item"></span> <code>.vjs-next-item</code></li>
<li><span class="vjs-icon-previous-item"></span> <code>.vjs-icon-previous-item</code></li>
Expand Down
114 changes: 114 additions & 0 deletions sandbox/skip-buttons.html.example
View file
Open in desktop
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>
40 changes: 40 additions & 0 deletions src/css/components/_skip-buttons.scss
View file
Open in desktop
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;
}
}
1 change: 1 addition & 0 deletions src/css/video-js.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
@import "components/adaptive";
@import "components/captions-settings";
@import "components/title-bar";
@import "components/skip-buttons";

@import "print";

Expand Down
4 changes: 4 additions & 0 deletions src/js/control-bar/control-bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import './progress-control/progress-control.js';
import './picture-in-picture-toggle.js';
import './fullscreen-toggle.js';
import './volume-panel.js';
import './skip-buttons/skip-forward.js';
import './skip-buttons/skip-backward.js';
import './text-track-controls/chapters-button.js';
import './text-track-controls/descriptions-button.js';
import './text-track-controls/subtitles-button.js';
Expand Down Expand Up @@ -55,6 +57,8 @@ class ControlBar extends Component {
ControlBar.prototype.options_ = {
children: [
'playToggle',
'skipBackward',
'skipForward',
'volumePanel',
'currentTimeDisplay',
'timeDivider',
Expand Down
Loading