From b5967f24e661e2086094649987d939b78138800d Mon Sep 17 00:00:00 2001 From: Jan Stabenow Date: Wed, 19 Oct 2022 18:37:07 +0200 Subject: [PATCH] Fix videojs-overlay logo size (datarhei/restreamer#431) --- CHANGELOG.md | 1 + public/_player/videojs/dist/video-js-skin.css | 10 +- .../videojs/dist/video-js-skin.min.css | 2 +- src/misc/Player/video-js-skin-public.css | 134 +++++++++--------- src/misc/Player/video-js-skin-public.min.css | 124 +--------------- 5 files changed, 71 insertions(+), 200 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a0be4c0..5ffe5f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ### v1.4.0 > v1.4.1 +- Fix videojs-overlay logo size (now responsive) - Fix use of TLS for input from local RTMP server - Fix Icecast publication service settings - Fix removes SRT bitstream on tee (OBS > RTMP > SRT is faulty) diff --git a/public/_player/videojs/dist/video-js-skin.css b/public/_player/videojs/dist/video-js-skin.css index c868bb8..c6483c1 100644 --- a/public/_player/videojs/dist/video-js-skin.css +++ b/public/_player/videojs/dist/video-js-skin.css @@ -123,13 +123,9 @@ /* overlay */ -.vjs-public .vjs-overlay > a > img { - width: 100%; -} - -.vjs-public .vjs-overlay-no-background { - max-width: 28%!important; - max-height: 28%!important; +.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-top-left { diff --git a/public/_player/videojs/dist/video-js-skin.min.css b/public/_player/videojs/dist/video-js-skin.min.css index c783614..6b45a5a 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>a>img{width:100%}.vjs-public .vjs-overlay-no-background{max-width:28%!important;max-height:28%!important}.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: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 diff --git a/src/misc/Player/video-js-skin-public.css b/src/misc/Player/video-js-skin-public.css index 29282cd..c6483c1 100644 --- a/src/misc/Player/video-js-skin-public.css +++ b/src/misc/Player/video-js-skin-public.css @@ -1,111 +1,111 @@ .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: 1em; } .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 */ @@ -123,47 +123,43 @@ /* overlay */ -.vjs-public .vjs-overlay > a > img { - width: 100%; -} - -.vjs-public .vjs-overlay-no-background { - max-width: 28% !important; - max-height: 28% !important; +.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-top-left { - top: 20px !important; - left: 30px !important; + top: 20px!important; + left: 30px!important; } .vjs-public .vjs-overlay-top-right { - top: 20px !important; - right: 30px !important; + top: 20px!important; + right: 30px!important; } .vjs-public .vjs-overlay-bottom-left { - bottom: 20px !important; - left: 30px !important; + bottom: 20px!important; + left: 30px!important; } .vjs-public .vjs-overlay-bottom-right { - bottom: 20px !important; - right: 30px !important; + bottom: 20px!important; + right: 30px!important; } /* 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); - min-width: 100px; + 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 4ebf0c2..6b45a5a 100644 --- a/src/misc/Player/video-js-skin-public.min.css +++ b/src/misc/Player/video-js-skin-public.min.css @@ -1,123 +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, 0.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, 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, 0.25); -} -.vjs-public .vjs-load-progress { - background: rgba(255, 255, 255, 0.25); -} -.vjs-public .vjs-load-progress div { - background: rgba(255, 255, 255, 0.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 > a > img { - width: 100%; -} -.vjs-public .vjs-overlay-no-background { - max-width: 28% !important; - max-height: 28% !important; -} -.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, 0.8); -} -.vjs-public .vjs-license-top-level-header { - background: unset !important; - border-bottom: 1px solid rgba(255, 255, 255, 0.25); - min-width: 100px; -} -.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: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