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

Embed: added ambilight ^_^

Browse source
This commit is contained in:
Cat 2021-07-28 12:05:22 +02:00 • committed by Thulinma
parent f4fd56f170
commit 124ae55037
5 changed files with 97 additions and 2 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

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

@ -90,6 +90,10 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
.mistvideo[data-show-submenu] .mistvideo-submenu{right:5px}
.mistvideo[data-hide-submenu] .mistvideo-submenu{right:-1000px!important}
.mistvideo[data-show-submenu] .mistvideo-controls{bottom:0}
.mistvideo-videobackground{position:absolute;width:100%;height:100%;z-index:-1;filter:blur(1cm)}
.mistvideo-videobackground *{position:absolute;filter:opacity(0);transition:filter 0s 2s;width:100%;height:100%}
.mistvideo-videobackground [data-front]{z-index:1;filter:opacity(1);transition:filter 2s}
.mistvideo-videocontainer{position:relative;overflow:hidden}
.mistvideo-error[data-passive]{bottom:auto;left:auto;height:auto;margin:.5em;padding:.5em}
.mistvideo-error[data-passive] .message{max-width:none}
.mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}

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

@ -90,6 +90,10 @@ svg.icon.timeout{display:inline-block;height:1em;width:1em;margin:0;margin-right
.mistvideo[data-show-submenu] .mistvideo-submenu{right:5px}
.mistvideo[data-hide-submenu] .mistvideo-submenu{right:-1000px!important}
.mistvideo[data-show-submenu] .mistvideo-controls{bottom:0}
.mistvideo-videobackground{position:absolute;width:100%;height:100%;z-index:-1;filter:blur(1cm)}
.mistvideo-videobackground *{position:absolute;filter:opacity(0);transition:filter 0s 2s;width:100%;height:100%}
.mistvideo-videobackground [data-front]{z-index:1;filter:opacity(1);transition:filter 2s}
.mistvideo-videocontainer{position:relative;overflow:hidden}
.mistvideo-error[data-passive]{bottom:auto;left:auto;height:auto;margin:.5em;padding:.5em}
.mistvideo-error[data-passive] .message{max-width:none}
.mistvideo-error .mistvideo-buttoncontainer{display:flex;flex-flow:row nowrap;justify-content:center}

66
embed/skins.js
View file

@ -55,7 +55,13 @@ MistSkins["default"] = {
],
}
},
videocontainer: {type: "video"},
videocontainer: {
type: "container",
children: [
{type: "videobackground", alwaysDisplay: false, delay: 5 },
{type: "video"}
]
},
controls: {
if: function(){
return !!(this.player && this.player.api && this.player.api.play)
@ -2122,6 +2128,64 @@ MistSkins["default"] = {
button.appendChild(document.createTextNode(options.label));
return button;
},
videobackground: function(options) {
/* options.alwaysDisplay : if true, always draw the video on the canvas */
/* options.delay : delay of the draw timeout in seconds */
if (!options) { options = {}; }
if (!options.delay) { options.delay = 5; }
var ele = document.createElement("div");
var MistVideo = this;
var canvasses = [];
for (var n = 0; n < 2; n++) {
var c = document.createElement("canvas");
c._context = c.getContext("2d");
ele.appendChild(c);
canvasses.push(c);
}
var index = 0;
var drawing = false;
function draw() {
//only draw if the element is visible, don't waste cpu
if (options.alwaysDisplay || (MistVideo.video.videoWidth/MistVideo.video.videoHeight != ele.clientWidth / ele.clientHeight)) {
canvasses[index].removeAttribute("data-front"); //put last one behind again
//console.log(new Date().toLocaleTimeString(),"draw");
index++;
if (index >= canvasses.length) { index = 0; }
var c = canvasses[index];
var ctx = c._context;
c.width = MistVideo.video.videoWidth;
c.height = MistVideo.video.videoHeight;
ctx.drawImage(MistVideo.video,0,0);
c.setAttribute("data-front","");
}
if (!MistVideo.player.api.paused) {
MistVideo.timers.start(function(){
draw();
},options.delay * 1e3);
}
else {
drawing = false;
}
}
MistUtil.event.addListener(MistVideo.video,"playing",function(){
if (!drawing) {
draw();
drawing = true;
}
});
return ele;
}
},

23
embed/skins/default.css
View file

@ -126,6 +126,29 @@ svg.icon.timeout {
.mistvideo[data-show-submenu] .mistvideo-controls {
bottom: 0;
}
.mistvideo-videobackground {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
filter: blur(1cm);
}
.mistvideo-videobackground * {
position: absolute;
filter: opacity(0);
transition: filter 0s 2s;
width: 100%;
height: 100%;
}
.mistvideo-videobackground [data-front] {
z-index: 1;
filter: opacity(1);
transition: filter 2s; /* the length/delay is intentionally less than the timer delay (5s): when it overlaps (even slightly), the transition is not shown which is fugly. */
}
.mistvideo-videocontainer { /* hide blur overflow from the videobackground */
position: relative;
overflow: hidden;
}
.mistvideo-error[data-passive] {
bottom: auto;
left: auto;