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

Fix videojs-overlay logo size (datarhei/restreamer#431)

Browse Source
This commit is contained in:
Jan Stabenow 2022-10-19 18:37:07 +02:00
parent 9d3fdb5c41
commit b5967f24e6
No known key found for this signature in database
GPG Key ID: 9C22DD65A9AAF133
5 changed files with 71 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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)

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

@ -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 {

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>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}
.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}

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

@ -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;
}

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

@ -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}