mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-10 06:28:35 +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>
|
||||
<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 {
|
||||
background: #f1f9ff;
|
||||
padding: 50px 30px;
|
||||
|
@ -402,6 +378,27 @@ a[data-onclick="jump_to_time"] {
|
|||
.fade-in {
|
||||
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>
|
||||
</noscript>
|
||||
<% if (inv_vid.videoId == "QrGrOK8oZG8") { %>
|
||||
|
@ -478,26 +475,7 @@ text-shadow: 1px 1px #000,1px 1px 0.1px #000;!important;
|
|||
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>
|
||||
<% if(dm) { %>
|
||||
<style>
|
||||
|
@ -877,7 +855,11 @@ display: block; !important;" autoplay controls
|
|||
<% } %>
|
||||
|
||||
</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">
|
||||
<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 -->
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<style> img.emoji {height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;}</style>
|
||||
|
|
Loading…
Reference in a new issue