mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-22 20:57:48 +01:00
add dynamic ambient
This commit is contained in:
parent
0bc2e1c77f
commit
bc8fcc2fc1
1 changed files with 99 additions and 46 deletions
|
@ -58,31 +58,7 @@
|
||||||
<title> <%=inv_vid.title%> | PokeTube </title>
|
<title> <%=inv_vid.title%> | PokeTube </title>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
<% if (!a) { %>
|
|
||||||
|
|
||||||
<% if (lightOrDark(color) == "light") { %>
|
|
||||||
.player.video-ambient-container {
|
|
||||||
box-shadow: 0 0 2.4em <%=color%>;
|
|
||||||
}
|
|
||||||
|
|
||||||
<% } %>
|
|
||||||
|
|
||||||
<% if (lightOrDark(color) == "dark") { %>
|
|
||||||
.player.video-ambient-container {
|
|
||||||
box-shadow: 0 0 2.4em <%=color2%>;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
<% } %>
|
|
||||||
<% } %>
|
|
||||||
<% if (a) { %>
|
|
||||||
|
|
||||||
.player.video-ambient-container {
|
|
||||||
box-shadow: 0 0 0em <%=color%>;
|
|
||||||
}
|
|
||||||
|
|
||||||
<% } %>
|
|
||||||
|
|
||||||
.comments-area {
|
.comments-area {
|
||||||
background: #f1f9ff;
|
background: #f1f9ff;
|
||||||
padding: 50px 30px;
|
padding: 50px 30px;
|
||||||
|
@ -402,6 +378,27 @@ a[data-onclick="jump_to_time"] {
|
||||||
.fade-in {
|
.fade-in {
|
||||||
opacity: 1 !important;
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
|
<% if (lightOrDark(color) == "light") { %>
|
||||||
|
.player.video-ambient-container {
|
||||||
|
box-shadow: 0 -8px 5.9em <%=color%>;
|
||||||
|
}
|
||||||
|
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
<% if (lightOrDark(color) == "dark") { %>
|
||||||
|
.player.video-ambient-container {
|
||||||
|
box-shadow: 0 -8px 5.9em <%=color2%>;
|
||||||
|
}
|
||||||
|
|
||||||
|
<% } %>
|
||||||
|
<% if (a) { %>
|
||||||
|
|
||||||
|
.player.video-ambient-container {
|
||||||
|
box-shadow: 0 0 0em <%=color%>;
|
||||||
|
}
|
||||||
|
|
||||||
|
<% } %>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</noscript>
|
</noscript>
|
||||||
<% if (inv_vid.videoId == "QrGrOK8oZG8") { %>
|
<% if (inv_vid.videoId == "QrGrOK8oZG8") { %>
|
||||||
|
@ -478,26 +475,7 @@ text-shadow: 1px 1px #000,1px 1px 0.1px #000;!important;
|
||||||
background:#0A0608
|
background:#0A0608
|
||||||
|
|
||||||
}
|
}
|
||||||
<% if (lightOrDark(color) == "light") { %>
|
|
||||||
.player.video-ambient-container {
|
|
||||||
box-shadow: 0 -8px 5.9em <%=color%>;
|
|
||||||
}
|
|
||||||
|
|
||||||
<% } %>
|
|
||||||
|
|
||||||
<% if (lightOrDark(color) == "dark") { %>
|
|
||||||
.player.video-ambient-container {
|
|
||||||
box-shadow: 0 -8px 5.9em <%=color2%>;
|
|
||||||
}
|
|
||||||
|
|
||||||
<% } %>
|
|
||||||
<% if (a) { %>
|
|
||||||
|
|
||||||
.player.video-ambient-container {
|
|
||||||
box-shadow: 0 0 0em <%=color%>;
|
|
||||||
}
|
|
||||||
|
|
||||||
<% } %>
|
|
||||||
</style>
|
</style>
|
||||||
<% if(dm) { %>
|
<% if(dm) { %>
|
||||||
<style>
|
<style>
|
||||||
|
@ -877,7 +855,11 @@ display: block; !important;" autoplay controls
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
</video>
|
</video>
|
||||||
|
<% if (!a) { %>
|
||||||
|
|
||||||
|
<canvas width="150" height="150" id="ambient-canvas"></canvas>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
<img loading="lazy" src="https://t.poketube.fun/t/rep.gif?video=<%=btoa(inv_vid.videoId)%>" style="border:0;width: 0;visibility: hidden;" id="video">
|
<img loading="lazy" src="https://t.poketube.fun/t/rep.gif?video=<%=btoa(inv_vid.videoId)%>" style="border:0;width: 0;visibility: hidden;" id="video">
|
||||||
<div class="pwp" style="display: flex;justify-content: center;align-items: center;flex-direction: row; column-gap: 3px;margin-top: -1em;max-height: 16px;" align="center">
|
<div class="pwp" style="display: flex;justify-content: center;align-items: center;flex-direction: row; column-gap: 3px;margin-top: -1em;max-height: 16px;" align="center">
|
||||||
|
|
||||||
|
@ -1790,6 +1772,77 @@ if (userID) {
|
||||||
<!-- app.js -->
|
<!-- app.js -->
|
||||||
<!-- app.js -->
|
<!-- app.js -->
|
||||||
|
|
||||||
|
<!-- Ambient Mode, for PokeTube -->
|
||||||
|
<script>
|
||||||
|
let requestId;
|
||||||
|
|
||||||
|
const loopStart = () => {
|
||||||
|
requestId = window.requestAnimationFrame(loopStart)
|
||||||
|
}
|
||||||
|
|
||||||
|
const loopCancel = () => {
|
||||||
|
window.cancelAnimationFrame(requestId)
|
||||||
|
requestId = undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const AMvideo = document.getElementById("video")
|
||||||
|
const canvas = document.getElementById("ambient-canvas")
|
||||||
|
const ctx = canvas.getContext("2d")
|
||||||
|
|
||||||
|
let step
|
||||||
|
|
||||||
|
const draw = () => {
|
||||||
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const drawLoop = () => {
|
||||||
|
draw()
|
||||||
|
step = window.requestAnimationFrame(drawLoop)
|
||||||
|
}
|
||||||
|
|
||||||
|
const drawPause = () => {
|
||||||
|
window.cancelAnimationFrame(step)
|
||||||
|
step = undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
AMvideo.addEventListener("loadeddata", draw, false)
|
||||||
|
AMvideo.addEventListener("seeked", draw, false)
|
||||||
|
AMvideo.addEventListener("play", drawLoop, false)
|
||||||
|
AMvideo.addEventListener("pause", drawPause, false)
|
||||||
|
AMvideo.addEventListener("ended", drawPause, false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const cleanup = () => {
|
||||||
|
AMvideo.removeEventListener("loadeddata", draw)
|
||||||
|
AMvideo.removeEventListener("seeked", draw)
|
||||||
|
AMvideo.removeEventListener("play", drawLoop)
|
||||||
|
AMvideo.removeEventListener("pause", drawPause)
|
||||||
|
AMvideo.removeEventListener("ended", drawPause)
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("load", init)
|
||||||
|
window.addEventListener("unload", cleanup)
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.video-player-container, #video {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.popup {z-index: 1}
|
||||||
|
#ambient-canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 18px);
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
border-radius: 18px;
|
||||||
|
filter: blur(20px);
|
||||||
|
transform: scale(1.1);
|
||||||
|
opacity: 0.3;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<script src="/static/app.bundle.js?ver=<%-btoa("1f739d93") %>&bundledat=<%- Date.now() %>"></script>
|
<script src="/static/app.bundle.js?ver=<%-btoa("1f739d93") %>&bundledat=<%- Date.now() %>"></script>
|
||||||
|
|
||||||
<style> img.emoji {height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;}</style>
|
<style> img.emoji {height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;}</style>
|
||||||
|
|
Loading…
Reference in a new issue