Mirror/filesafe
1
0
Fork 0
mirror of https://github.com/BobbyWibowo/lolisafe.git synced 2025-01-18 17:21:33 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: use fontello for video.js seek buttons

Browse Source
This commit is contained in:
Bobby 2022-05-27 13:44:22 +07:00
parent 0d6323053f
commit 7d2e2d97e0
No known key found for this signature in database
GPG Key ID: 941839794CBF5A09
4 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/libs/videojs-seek-buttons/videojs-seek-buttons.min.css vendored
View File

@ -1,2 +0,0 @@
/*! @name videojs-seek-buttons @version 2.2.0 @license Apache-2.0 */
.video-js .vjs-seek-button{font-family:'VideoJS';cursor:pointer;font-weight:400;font-style:normal}.video-js .vjs-seek-button.skip-back::before,.video-js.vjs-v6 .vjs-seek-button.skip-back .vjs-icon-placeholder::before,.video-js.vjs-v7 .vjs-seek-button.skip-back .vjs-icon-placeholder::before{transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);content:'\f116'}.video-js .vjs-seek-button.skip-forward::before{transform:rotateY(180deg) rotate(-45deg);-ms-transform:rotateY(180deg) rotate(-45deg);-webkit-transform:rotateY(180deg) rotate(-45deg);content:'\f116'}.video-js.vjs-v6 .vjs-seek-button.skip-back::before,.video-js.vjs-v6 .vjs-seek-button.skip-forward::before,.video-js.vjs-v7 .vjs-seek-button.skip-back::before,.video-js.vjs-v7 .vjs-seek-button.skip-forward::before{content:none}.video-js.vjs-v6 .vjs-seek-button.skip-forward .vjs-icon-placeholder::before,.video-js.vjs-v7 .vjs-seek-button.skip-forward .vjs-icon-placeholder::before{transform:scale(-1,1) rotate(-45deg);-ms-transform:scale(-1,1) rotate(-45deg);-webkit-transform:scale(-1,1) rotate(-45deg);content:'\f116'}

27
src/css/player.scss
View File

@ -17,4 +17,31 @@
height: calc(100% - 30px) !important
}
}
.vjs-seek-button {
.vjs-icon-placeholder {
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
font-family: fontello;
font-weight: normal;
font-style: normal;
cursor: pointer;
&::before {
font-size: 1.5em;
line-height: 1.97
}
}
}
.vjs-seek-button {
&.skip-back .vjs-icon-placeholder::before {
content: "\e81e";
transform: none
}
&.skip-forward .vjs-icon-placeholder::before {
content: "\e818";
transform: none
}
}
}

7
src/js/player.js
View File

@ -108,16 +108,15 @@ page.reloadVideo = () => {
const options = {
language: 'en',
playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
responsive: true
responsive: true,
plugins: {}
}
if (isaudio) {
options.plugins = {
wavesurfer: {
options.plugins.wavesurfer = {
responsive: true
}
}
}
page.player = videojs('video-js', options, () => {
let message = `Using video.js ${videojs.VERSION}`

1
views/player.njk
View File

@ -11,7 +11,6 @@
<!-- Libs stylesheets -->
<link rel="stylesheet" href="../libs/fontello/fontello.css{{ versions[1] }}">
<link rel="stylesheet" href="../libs/video-js/video-js.min.css{{ versions[3] }}">
<link rel="stylesheet" href="../libs/videojs-seek-buttons/videojs-seek-buttons.min.css{{ versions[3] }}">
<link rel="stylesheet" href="../libs/videojs-wavesurfer/videojs.wavesurfer.min.css{{ versions[3] }}">
<!-- Stylesheets -->
<link rel="stylesheet" href="../css/style.css{{ versions[1] }}">