hydrar/mistserver
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Embed: CSS parsing compatible with multiline @{} blocks, taking into account nested brackets

Browse source
This commit is contained in:
Cat 2019-02-12 12:59:57 +01:00 • committed by Thulinma
parent 6db9a9ad17
commit b5750a5de7
6 changed files with 42 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
embed/min/player.js
View file

File diff suppressed because one or more lines are too long

10
embed/min/skins/default.css
View file

@ -17,7 +17,7 @@ button:hover{opacity:1}
select{background-color:transparent;color:$stroke;border:none;margin:0 .5em;font-size:inherit;cursor:pointer;-ms-background-color:red}
select>option{background-color:$background}
.browser-edge select,.browser-safari select{border:1px solid $semiFill;border-top:none;border-left:none;margin-top:2px}
@keyframes spin{
@keyframes mistvideo-spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
@ -50,8 +50,8 @@ a{color:$accent}
.mistvideo-placeholder{max-width:100%;max-height:100%}
.mistvideo-topright{position:absolute;top:0;right:0}
.mistvideo-topleft{position:absolute;top:0;left:0}
.mistvideo-delay-display{animation:appear 1s;animation-iteration-count:1;animation-timing-function:steps(1,end)}
@keyframes appear{
.mistvideo-delay-display{animation:mistvideo-appear 1s;animation-iteration-count:1;animation-timing-function:steps(1,end)}
@keyframes mistvideo-appear{
from{opacity:0}
to{opacity:1}
}
@ -60,7 +60,7 @@ svg.icon .fill,svg.icon.fill{fill:$fill}
svg.icon .semiFill,svg.icon.semiFill{fill:$semiFill}
svg.icon .stroke,svg.icon.stroke{stroke:$stroke;vector-effect:non-scaling-stroke}
svg.icon.off .toggle .fill,svg.icon.off .toggle .semiFill,svg.icon.off .toggle.fill,svg.icon.off .toggle.semiFill{fill:none}
svg.icon .spin,svg.icon.spin{animation:spin 1.5s infinite linear;transform-origin:50% 50%}
svg.icon .spin,svg.icon.spin{animation:mistvideo-spin 1.5s infinite linear;transform-origin:50% 50%}
.vjs-text-track-display{pointer-events:none}
.mistvideo{line-height:1.2;font-size:14.5px}
.mistvideo svg{margin:2.5px}
@ -89,5 +89,5 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
.mistvideo-error[data-passive] .message{max-width:none}
.mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}
.mistvideo-error .mistvideo-buttoncontainer .mistvideo-button{white-space:nowrap}
.browser-ie .mist.icon.loading{animation:spin 1.5s infinite linear;transform-origin:50% 50%}
.browser-ie .mist.icon.loading{animation:mistvideo-spin 1.5s infinite linear;transform-origin:50% 50%}
.browser-ie .mist.icon.loading .spin{animation:none}

10
embed/min/skins/dev.css
View file

@ -17,7 +17,7 @@ button:hover{opacity:1}
select{background-color:transparent;color:$stroke;border:none;margin:0 .5em;font-size:inherit;cursor:pointer;-ms-background-color:red}
select>option{background-color:$background}
.browser-edge select,.browser-safari select{border:1px solid $semiFill;border-top:none;border-left:none;margin-top:2px}
@keyframes spin{
@keyframes mistvideo-spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
@ -50,8 +50,8 @@ a{color:$accent}
.mistvideo-placeholder{max-width:100%;max-height:100%}
.mistvideo-topright{position:absolute;top:0;right:0}
.mistvideo-topleft{position:absolute;top:0;left:0}
.mistvideo-delay-display{animation:appear 1s;animation-iteration-count:1;animation-timing-function:steps(1,end)}
@keyframes appear{
.mistvideo-delay-display{animation:mistvideo-appear 1s;animation-iteration-count:1;animation-timing-function:steps(1,end)}
@keyframes mistvideo-appear{
from{opacity:0}
to{opacity:1}
}
@ -60,7 +60,7 @@ svg.icon .fill,svg.icon.fill{fill:$fill}
svg.icon .semiFill,svg.icon.semiFill{fill:$semiFill}
svg.icon .stroke,svg.icon.stroke{stroke:$stroke;vector-effect:non-scaling-stroke}
svg.icon.off .toggle .fill,svg.icon.off .toggle .semiFill,svg.icon.off .toggle.fill,svg.icon.off .toggle.semiFill{fill:none}
svg.icon .spin,svg.icon.spin{animation:spin 1.5s infinite linear;transform-origin:50% 50%}
svg.icon .spin,svg.icon.spin{animation:mistvideo-spin 1.5s infinite linear;transform-origin:50% 50%}
.vjs-text-track-display{pointer-events:none}
.mistvideo{line-height:1.2;font-size:14.5px}
.mistvideo svg{margin:2.5px}
@ -89,7 +89,7 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
.mistvideo-error[data-passive] .message{max-width:none}
.mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}
.mistvideo-error .mistvideo-buttoncontainer .mistvideo-button{white-space:nowrap}
.browser-ie .mist.icon.loading{animation:spin 1.5s infinite linear;transform-origin:50% 50%}
.browser-ie .mist.icon.loading{animation:mistvideo-spin 1.5s infinite linear;transform-origin:50% 50%}
.browser-ie .mist.icon.loading .spin{animation:none}
.mistvideo-log{margin:.5em 0}
.mistvideo-log .logs{max-height:10em;min-height:5em;width:100%;padding:.2em 0;padding-right:1em;overflow-y:auto;overflow-x:hidden;font-size:.9em}

2
embed/skins/default.css
View file

@ -130,7 +130,7 @@ svg.icon.timeout {
white-space: nowrap;
}
.browser-ie .mist.icon.loading {
animation: spin 1.5s infinite linear;
animation: mistvideo-spin 1.5s infinite linear;
transform-origin: 50% 50%;
}
.browser-ie .mist.icon.loading .spin { animation: none; }

8
embed/skins/general.css
View file

@ -102,7 +102,7 @@ select > option {
margin-top: 2px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes mistvideo-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
[data-fullscreen] {
position: fixed;
top: 0;
@ -200,11 +200,11 @@ a {
left: 0;
}
.mistvideo-delay-display {
animation: appear 1s;
animation: mistvideo-appear 1s;
animation-iteration-count: 1;
animation-timing-function: steps(1,end);
}
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes mistvideo-appear { from { opacity: 0; } to { opacity: 1; } }
svg.icon {
display: block;
@ -220,7 +220,7 @@ svg.icon.off .toggle.semiFill,
svg.icon.off .toggle .fill,
svg.icon.off .toggle .semiFill { fill: none; }
svg.icon.spin, svg.icon .spin {
animation: spin 1.5s infinite linear;
animation: mistvideo-spin 1.5s infinite linear;
transform-origin: 50% 50%;
}
.vjs-text-track-display {

29
embed/util.js
View file

@ -495,10 +495,33 @@ var MistUtil = {
//remove all block comments
css = css.replace(/\/\*.*?\*\//g,"");
//save all @{} blocks
var save = css.match(/@.*?{.*}/g);
//remove all @ {} blocks (media, keyframes, screen etc) and save it to re-insert them after class prepending
//match anything starting with @ something {, until the first }
var save = css.match(/@[^}]*}/g);
for (var i in save) {
css = css.replace(save[i],"@@@@");
//add a placeholder for unfinished replace
css = css.replace(save[i],"@@#@@");
var replacecount = 1;
//while the amount of }s we've replaced is smaller than the amount of {'s in the match
while (replacecount < (save[i].match(/{/g).length)) {
//find the next } and save it in a group
var match = css.match(/@@#@@([^}]*})/); //match anything starting with @@#@@ until the first }
//replace the full match with the unfinished placeholder
css = css.replace(match[0],"@@#@@");
//add the group (the code untill the next }) to the save
save[i] += match[1];
//increase the counter
replacecount++;
}
//after the edits, @@@@ will be replaced with the contents of save[i]
css = css.replace("@@#@@","@@@@");
}
//find and replace selectors