diff --git a/package.json b/package.json index 0bc257e..1d65c77 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/public/_player/videojs/dist/video-js-skin.css b/public/_player/videojs/dist/video-js-skin.css index c6483c1..bc61efc 100644 --- a/public/_player/videojs/dist/video-js-skin.css +++ b/public/_player/videojs/dist/video-js-skin.css @@ -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; } - diff --git a/public/_player/videojs/dist/video-js-skin.min.css b/public/_player/videojs/dist/video-js-skin.min.css index 6b45a5a..5491f52 100644 --- a/public/_player/videojs/dist/video-js-skin.min.css +++ b/public/_player/videojs/dist/video-js-skin.min.css @@ -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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/src/misc/Player/video-js-skin-public.css b/src/misc/Player/video-js-skin-public.css index 3ce0bdd..44fd04d 100644 --- a/src/misc/Player/video-js-skin-public.css +++ b/src/misc/Player/video-js-skin-public.css @@ -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; } diff --git a/src/misc/Player/video-js-skin-public.min.css b/src/misc/Player/video-js-skin-public.min.css index 6b45a5a..dda82c1 100644 --- a/src/misc/Player/video-js-skin-public.min.css +++ b/src/misc/Player/video-js-skin-public.min.css @@ -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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/src/misc/Player/videojs.js b/src/misc/Player/videojs.js index 668f142..52b3d48 100644 --- a/src/misc/Player/videojs.js +++ b/src/misc/Player/videojs.js @@ -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 }} >
diff --git a/yarn.lock b/yarn.lock index 286c8be..e577b6c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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==