neoris/restreamer-ui-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix videojs skin

Browse Source
This commit is contained in:
Jan Stabenow 2023-10-16 16:06:48 +02:00
parent a7d2ac4ec7
commit 377acf12ff
7 changed files with 136 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -47,7 +47,7 @@
"url-parse": "^1.5.10",
"util": "^0.12.5",
"uuid": "^9.0.1",
"video.js": "8.6.0",
"video.js": "^8.5.3",
"videojs-overlay": "^3.1.0"
},
"scripts": {

33
public/_player/videojs/dist/video-js-skin.css vendored
View File

@ -95,7 +95,7 @@
/* volume-panel */
.vjs-public .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
padding-top: 1em;
padding-top: .9em;
}
.vjs-public .vjs-control .vjs-volume-panel {
@ -110,8 +110,8 @@
/* disable caps */
.vjs-internal .vjs-subs-caps-button {
display: none;
.vjs-public .vjs-subs-caps-button {
display: none!important;
}
/* spacer */
@ -123,29 +123,37 @@
/* overlay */
.vjs-public .vjs-overlay-no-background {
max-width: 25%!important;
}
.vjs-public .vjs-overlay-no-background > img, .vjs-public .vjs-overlay-no-background > a > img {
max-width: 100%!important;
max-height: calc(18vw);
height: auto!important;
}
.vjs-public .vjs-overlay-top-left {
top: 20px!important;
left: 30px!important;
top: 15px!important;
left: 20px!important;
text-align: right;
}
.vjs-public .vjs-overlay-top-right {
top: 20px!important;
right: 30px!important;
top: 15px!important;
right: 20px!important;
text-align: right;
}
.vjs-public .vjs-overlay-bottom-left {
bottom: 20px!important;
left: 30px!important;
bottom: 15px!important;
left: 20px!important;
text-align: left;
}
.vjs-public .vjs-overlay-bottom-right {
bottom: 20px!important;
right: 30px!important;
bottom: 15px!important;
right: 20px!important;
text-align: left;
}
/* context menu */
@ -162,4 +170,3 @@
.vjs-public .vjs-lock-open {
z-index: 1000;
}

2
public/_player/videojs/dist/video-js-skin.min.css vendored
View File

@ -1 +1 @@
.vjs-public{--video-js--primary:#EAEA05}.vjs-public .vjs-big-play-button{width:70px;height:70px;background:0 0;line-height:180px;font-size:180px;border:none;top:50%;left:50%;margin-top:-90px;margin-left:-90px;color:rgba(255,255,255,.65)}.vjs-public.vjs-big-play-button:focus,.vjs-public:hover .vjs-big-play-button{background-color:transparent;color:rgba(255,255,255,1)}.vjs-public .vjs-control-bar{height:70px;padding-top:20px;background:0 0;background-image:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}.vjs-public .vjs-time-tooltip{z-index:0}.vjs-public .vjs-button>.vjs-icon-placeholder:before{line-height:50px}.vjs-public .vjs-play-progress:before{display:none}.vjs-public .vjs-progress-control{position:absolute;top:0;right:0;left:15px;width:calc(100% - 30px);height:20px}.vjs-public .vjs-progress-control .vjs-progress-holder{position:absolute;top:20px;right:0;left:0;width:100%;margin:0}.vjs-public .vjs-play-progress{background-color:var(--video-js--primary)}.vjs-public .vjs-slider{background:rgba(255,255,255,.25)}.vjs-public .vjs-load-progress{background:rgba(255,255,255,.25)}.vjs-public .vjs-load-progress div{background:rgba(255,255,255,.25)}.vjs-public .vjs-remaining-time{order:0;line-height:50px;flex:3;text-align:left}.vjs-public .vjs-live-control{line-height:50px}.vjs-public .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{padding-top:1em}.vjs-public .vjs-control .vjs-volume-panel{width:4.5em}.vjs-public .vjs-live-display{margin-left:1.8em}.vjs-internal .vjs-subs-caps-button{display:none}.vjs-public .vjs-custom-control-spacer{display:block;width:100%}.vjs-public .vjs-overlay-no-background>a>img,.vjs-public .vjs-overlay-no-background>img{max-width:100%!important;max-height:calc(18vw)}.vjs-public .vjs-overlay-top-left{top:20px!important;left:30px!important}.vjs-public .vjs-overlay-top-right{top:20px!important;right:30px!important}.vjs-public .vjs-overlay-bottom-left{bottom:20px!important;left:30px!important}.vjs-public .vjs-overlay-bottom-right{bottom:20px!important;right:30px!important}.vjs-public .vjs-license .vjs-menu .vjs-menu-content{background:rgba(0,0,0,.8)}.vjs-public .vjs-license-top-level-header{background:unset!important;border-bottom:1px solid rgba(255,255,255,.25)}.vjs-public .vjs-lock-open{z-index:1000}
.vjs-public{--video-js--primary:#EAEA05}.vjs-public .vjs-big-play-button{width:70px;height:70px;background:none;line-height:180px;font-size:180px;border:0;top:50%;left:50%;margin-top:-90px;margin-left:-90px;color:rgba(255,255,255,.65)}.vjs-public:hover .vjs-big-play-button,.vjs-public.vjs-big-play-button:focus{background-color:transparent;color:rgba(255,255,255,1)}.vjs-public .vjs-control-bar{height:70px;padding-top:20px;background:none;background-image:linear-gradient(0,rgba(0,0,0,.85),transparent)}.vjs-public .vjs-time-tooltip{z-index:0}.vjs-public .vjs-button>.vjs-icon-placeholder:before{line-height:50px}.vjs-public .vjs-play-progress:before{display:none}.vjs-public .vjs-progress-control{position:absolute;top:0;right:0;left:15px;width:calc(100% - 30px);height:20px}.vjs-public .vjs-progress-control .vjs-progress-holder{position:absolute;top:20px;right:0;left:0;width:100%;margin:0}.vjs-public .vjs-play-progress{background-color:var(--video-js--primary)}.vjs-public .vjs-slider{background:rgba(255,255,255,.25)}.vjs-public .vjs-load-progress{background:rgba(255,255,255,.25)}.vjs-public .vjs-load-progress div{background:rgba(255,255,255,.25)}.vjs-public .vjs-remaining-time{order:0;line-height:50px;flex:3;text-align:left}.vjs-public .vjs-live-control{line-height:50px}.vjs-public .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{padding-top:.9em}.vjs-public .vjs-control .vjs-volume-panel{width:4.5em}.vjs-public .vjs-live-display{margin-left:1.8em}.vjs-public .vjs-subs-caps-button{display:none!important}.vjs-public .vjs-custom-control-spacer{display:block;width:100%}.vjs-public .vjs-overlay-no-background{max-width:25%!important}.vjs-public .vjs-overlay-no-background>img,.vjs-public .vjs-overlay-no-background>a>img{max-width:100%!important;height:auto!important}.vjs-public .vjs-overlay-top-left{top:15px!important;left:20px!important;text-align:right}.vjs-public .vjs-overlay-top-right{top:15px!important;right:20px!important;text-align:right}.vjs-public .vjs-overlay-bottom-left{bottom:15px!important;left:20px!important;text-align:left}.vjs-public .vjs-overlay-bottom-right{bottom:15px!important;right:20px!important;text-align:left}.vjs-public .vjs-license .vjs-menu .vjs-menu-content{background:rgba(0,0,0,.8)}.vjs-public .vjs-license-top-level-header{background:unset!important;border-bottom:1px solid rgba(255,255,255,.25)}.vjs-public .vjs-lock-open{z-index:1000}

143
src/misc/Player/video-js-skin-public.css
View File

@ -1,117 +1,117 @@
.vjs-public {
--video-js--primary: #eaea05;
--video-js--primary: #EAEA05;
}
/* play btn */
.vjs-public .vjs-big-play-button {
width: 70px;
height: 70px;
background: none;
line-height: 180px;
font-size: 180px;
border: none;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -90px;
color: rgba(255, 255, 255, 0.65);
}
width: 70px;
height: 70px;
background: none;
line-height: 180px;
font-size: 180px;
border: none;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -90px;
color: rgba(255,255,255,.65);
}
.vjs-public:hover .vjs-big-play-button,
.vjs-public.vjs-big-play-button:focus {
background-color: transparent;
color: rgba(255, 255, 255, 1);
}
.vjs-public:hover .vjs-big-play-button,
.vjs-public.vjs-big-play-button:focus {
background-color: transparent;
color: rgba(255,255,255,1);
}
/* controlbar */
.vjs-public .vjs-control-bar {
height: 70px;
padding-top: 20px;
background: none;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
height: 70px;
padding-top: 20px;
background: none;
background-image: linear-gradient(0deg, rgba(0,0,0,.85), transparent)
}
.vjs-public .vjs-time-tooltip {
z-index: 0;
}
.vjs-public .vjs-button > .vjs-icon-placeholder:before {
line-height: 50px;
.vjs-public .vjs-button>.vjs-icon-placeholder:before {
line-height: 50px
}
/* progressbar */
.vjs-public .vjs-play-progress:before {
display: none;
display: none
}
.vjs-public .vjs-progress-control {
position: absolute;
top: 0;
right: 0;
left: 15px;
width: calc(100% - 30px);
height: 20px;
position: absolute;
top: 0;
right: 0;
left: 15px;
width: calc(100% - 30px);
height: 20px
}
.vjs-public .vjs-progress-control .vjs-progress-holder {
position: absolute;
top: 20px;
right: 0;
left: 0;
width: 100%;
margin: 0;
position: absolute;
top: 20px;
right: 0;
left: 0;
width: 100%;
margin: 0
}
.vjs-public .vjs-play-progress {
background-color: var(--video-js--primary);
background-color: var(--video-js--primary);
}
.vjs-public .vjs-slider {
background: rgba(255, 255, 255, 0.25);
background: rgba(255,255,255,.25);
}
.vjs-public .vjs-load-progress {
background: rgba(255, 255, 255, 0.25);
background: rgba(255,255,255,.25);
}
.vjs-public .vjs-load-progress div {
background: rgba(255, 255, 255, 0.25);
background: rgba(255,255,255,.25);
}
.vjs-public .vjs-remaining-time {
order: 0;
line-height: 50px;
flex: 3;
text-align: left;
order: 0;
line-height: 50px;
flex: 3;
text-align: left;
}
.vjs-public .vjs-live-control {
line-height: 50px;
line-height: 50px;
}
/* volume-panel */
.vjs-public .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
padding-top: 1em;
padding-top: .95em;
}
.vjs-public .vjs-control .vjs-volume-panel {
width: 4.5em;
width: 4.5em;
}
/* live display */
.vjs-public .vjs-live-display {
margin-left: 1.8em;
margin-left: 1.8em;
}
/* disable caps */
.vjs-internal .vjs-subs-caps-button {
display: none;
.vjs-public .vjs-subs-caps-button {
display: none!important;
}
/* spacer */
@ -123,43 +123,52 @@
/* overlay */
.vjs-public .vjs-overlay-no-background > img,
.vjs-public .vjs-overlay-no-background > a > img {
max-width: 100% !important;
max-height: calc(18vw);
.vjs-public .vjs-overlay-no-background {
max-width: 25%!important;
}
.vjs-public .vjs-overlay-no-background > img, .vjs-public .vjs-overlay-no-background > a > img {
max-width: 100%!important;
height: auto!important;
}
.vjs-public .vjs-overlay-top-left {
top: 20px !important;
left: 30px !important;
top: 15px!important;
left: 20px!important;
text-align: right;
}
.vjs-public .vjs-overlay-top-right {
top: 20px !important;
right: 30px !important;
top: 15px!important;
right: 20px!important;
text-align: right;
}
.vjs-public .vjs-overlay-bottom-left {
bottom: 20px !important;
left: 30px !important;
bottom: 15px!important;
left: 20px!important;
text-align: left;
}
.vjs-public .vjs-overlay-bottom-right {
bottom: 20px !important;
right: 30px !important;
bottom: 15px!important;
right: 20px!important;
text-align: left;
}
/* context menu */
.vjs-public .vjs-license .vjs-menu .vjs-menu-content {
background: rgba(0, 0, 0, 0.8);
background: rgba(0,0,0,.8);
}
.vjs-public .vjs-license-top-level-header {
background: unset !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
background: unset!important;
border-bottom: 1px solid rgba(255,255,255,.25);
}
.vjs-public .vjs-lock-open {
z-index: 1000;
z-index: 1000;
}

2
src/misc/Player/video-js-skin-public.min.css vendored
View File

@ -1 +1 @@
.vjs-public{--video-js--primary:#EAEA05}.vjs-public .vjs-big-play-button{width:70px;height:70px;background:0 0;line-height:180px;font-size:180px;border:none;top:50%;left:50%;margin-top:-90px;margin-left:-90px;color:rgba(255,255,255,.65)}.vjs-public.vjs-big-play-button:focus,.vjs-public:hover .vjs-big-play-button{background-color:transparent;color:rgba(255,255,255,1)}.vjs-public .vjs-control-bar{height:70px;padding-top:20px;background:0 0;background-image:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}.vjs-public .vjs-time-tooltip{z-index:0}.vjs-public .vjs-button>.vjs-icon-placeholder:before{line-height:50px}.vjs-public .vjs-play-progress:before{display:none}.vjs-public .vjs-progress-control{position:absolute;top:0;right:0;left:15px;width:calc(100% - 30px);height:20px}.vjs-public .vjs-progress-control .vjs-progress-holder{position:absolute;top:20px;right:0;left:0;width:100%;margin:0}.vjs-public .vjs-play-progress{background-color:var(--video-js--primary)}.vjs-public .vjs-slider{background:rgba(255,255,255,.25)}.vjs-public .vjs-load-progress{background:rgba(255,255,255,.25)}.vjs-public .vjs-load-progress div{background:rgba(255,255,255,.25)}.vjs-public .vjs-remaining-time{order:0;line-height:50px;flex:3;text-align:left}.vjs-public .vjs-live-control{line-height:50px}.vjs-public .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{padding-top:1em}.vjs-public .vjs-control .vjs-volume-panel{width:4.5em}.vjs-public .vjs-live-display{margin-left:1.8em}.vjs-internal .vjs-subs-caps-button{display:none}.vjs-public .vjs-custom-control-spacer{display:block;width:100%}.vjs-public .vjs-overlay-no-background>a>img,.vjs-public .vjs-overlay-no-background>img{max-width:100%!important;max-height:calc(18vw)}.vjs-public .vjs-overlay-top-left{top:20px!important;left:30px!important}.vjs-public .vjs-overlay-top-right{top:20px!important;right:30px!important}.vjs-public .vjs-overlay-bottom-left{bottom:20px!important;left:30px!important}.vjs-public .vjs-overlay-bottom-right{bottom:20px!important;right:30px!important}.vjs-public .vjs-license .vjs-menu .vjs-menu-content{background:rgba(0,0,0,.8)}.vjs-public .vjs-license-top-level-header{background:unset!important;border-bottom:1px solid rgba(255,255,255,.25)}.vjs-public .vjs-lock-open{z-index:1000}
.vjs-public{--video-js--primary:#EAEA05}.vjs-public .vjs-big-play-button{width:70px;height:70px;background:none;line-height:180px;font-size:180px;border:0;top:50%;left:50%;margin-top:-90px;margin-left:-90px;color:rgba(255,255,255,.65)}.vjs-public:hover .vjs-big-play-button,.vjs-public.vjs-big-play-button:focus{background-color:transparent;color:rgba(255,255,255,1)}.vjs-public .vjs-control-bar{height:70px;padding-top:20px;background:none;background-image:linear-gradient(0,rgba(0,0,0,.85),transparent)}.vjs-public .vjs-time-tooltip{z-index:0}.vjs-public .vjs-button>.vjs-icon-placeholder:before{line-height:50px}.vjs-public .vjs-play-progress:before{display:none}.vjs-public .vjs-progress-control{position:absolute;top:0;right:0;left:15px;width:calc(100% - 30px);height:20px}.vjs-public .vjs-progress-control .vjs-progress-holder{position:absolute;top:20px;right:0;left:0;width:100%;margin:0}.vjs-public .vjs-play-progress{background-color:var(--video-js--primary)}.vjs-public .vjs-slider{background:rgba(255,255,255,.25)}.vjs-public .vjs-load-progress{background:rgba(255,255,255,.25)}.vjs-public .vjs-load-progress div{background:rgba(255,255,255,.25)}.vjs-public .vjs-remaining-time{order:0;line-height:50px;flex:3;text-align:left}.vjs-public .vjs-live-control{line-height:50px}.vjs-public .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{padding-top:.95em}.vjs-public .vjs-control .vjs-volume-panel{width:4.5em}.vjs-public .vjs-live-display{margin-left:1.8em}.vjs-public .vjs-subs-caps-button{display:none!important}.vjs-public .vjs-custom-control-spacer{display:block;width:100%}.vjs-public .vjs-overlay-no-background{max-width:25%!important}.vjs-public .vjs-overlay-no-background>img,.vjs-public .vjs-overlay-no-background>a>img{max-width:100%!important;height:auto!important}.vjs-public .vjs-overlay-top-left{top:15px!important;left:20px!important;text-align:right}.vjs-public .vjs-overlay-top-right{top:15px!important;right:20px!important;text-align:right}.vjs-public .vjs-overlay-bottom-left{bottom:15px!important;left:20px!important;text-align:left}.vjs-public .vjs-overlay-bottom-right{bottom:15px!important;right:20px!important;text-align:left}.vjs-public .vjs-license .vjs-menu .vjs-menu-content{background:rgba(0,0,0,.8)}.vjs-public .vjs-license-top-level-header{background:unset!important;border-bottom:1px solid rgba(255,255,255,.25)}.vjs-public .vjs-lock-open{z-index:1000}

2
src/misc/Player/videojs.js
View File

@ -58,7 +58,7 @@ export default function VideoJS(props) {
direction="column"
justifyContent="center"
alignItems="center"
spacing={1}
spacing={2}
style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0 }}
>
<div data-vjs-player>

38
yarn.lock
View File

@ -2887,6 +2887,20 @@
resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
"@videojs/http-streaming@3.5.3":
version "3.5.3"
resolved "https://registry.yarnpkg.com/@videojs/http-streaming/-/http-streaming-3.5.3.tgz#23106e1ef2fd9b9b62aa9b3dc2083bd36d99c963"
integrity sha512-dty8lsZk9QPc0i4It79tjWsmPiaC3FpgARFM0vJGko4k3yKNZIYkAk8kjiDRfkAQH/HZ3rYi5dDTriFNzwSsIg==
dependencies:
"@babel/runtime" "^7.12.5"
"@videojs/vhs-utils" "4.0.0"
aes-decrypter "4.0.1"
global "^4.4.0"
m3u8-parser "^7.1.0"
mpd-parser "^1.1.1"
mux.js "7.0.0"
video.js "^7 || ^8"
"@videojs/http-streaming@3.6.0":
version "3.6.0"
resolved "https://registry.yarnpkg.com/@videojs/http-streaming/-/http-streaming-3.6.0.tgz#60a22cd021d42df2ce92438f401335486520c5db"
@ -7952,7 +7966,7 @@ moo@^0.5.1:
resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.2.tgz#f9fe82473bc7c184b0d32e2215d3f6e67278733c"
integrity sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==
mpd-parser@^1.0.1, mpd-parser@^1.2.2:
mpd-parser@^1.0.1, mpd-parser@^1.1.1, mpd-parser@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/mpd-parser/-/mpd-parser-1.2.2.tgz#bf479cbb0bec605130075c0e904a853b29265973"
integrity sha512-QCfB1koOoZw6E5La1cx+W/Yd0EZlRhHMqMr4TAJez0eRTuPDzPM5FWoiOqjyo37W+ISPLzmfJACSbJFEBjbL4Q==
@ -11010,7 +11024,27 @@ vfile@^6.0.0:
unist-util-stringify-position "^4.0.0"
vfile-message "^4.0.0"
video.js@8.6.0, "video.js@^6 || ^7 || ^8", "video.js@^7 || ^8":
video.js@8.5.3:
version "8.5.3"
resolved "https://registry.yarnpkg.com/video.js/-/video.js-8.5.3.tgz#9ad7f9c9dbc87f35862ecb05f88e74348439a82e"
integrity sha512-P09Fl4mS13YGYCu4XkUtPoYOAPuRhCTMi34cQW+Xj9jEv8Gqi/Tf4mUl2jg9LTOib+N/hvcuH8XAWEJelilKxw==
dependencies:
"@babel/runtime" "^7.12.5"
"@videojs/http-streaming" "3.5.3"
"@videojs/vhs-utils" "^4.0.0"
"@videojs/xhr" "2.6.0"
aes-decrypter "^4.0.1"
global "4.4.0"
keycode "2.2.0"
m3u8-parser "^6.0.0"
mpd-parser "^1.0.1"
mux.js "^6.2.0"
safe-json-parse "4.0.0"
videojs-contrib-quality-levels "4.0.0"
videojs-font "4.1.0"
videojs-vtt.js "0.15.5"
"video.js@^6 || ^7 || ^8", "video.js@^7 || ^8":
version "8.6.0"
resolved "https://registry.yarnpkg.com/video.js/-/video.js-8.6.0.tgz#3ed095edee8db2dceaa11e915c6c20de241d9261"
integrity sha512-uoX0Me0UyJuW3cB8IT0VLpEim5HwUutrXTxuQqYxPeahVr5EfFOP2IjUAlnvACpb6eA/pbmO6d4TpZXuXD+blQ==