add ambient mode 2.0 and lazy loading image

This commit is contained in:
Ashley 2022-12-31 20:13:26 +00:00
parent c2ab97022c
commit 257dfaf184

View file

@ -43,17 +43,26 @@
<title> <%=video.Title%> | PokeTube </title> <title> <%=video.Title%> | PokeTube </title>
<style> <style>
<% if (!a) { %>
<% if (lightOrDark(color) == "light") { %> <% if (lightOrDark(color) == "light") { %>
.player.video-ambient-container { .player.video-ambient-container {
box-shadow: 0 0 20px <%=color%>; box-shadow: 0 0 2.4em <%=color%>;
} }
<% } %> <% } %>
<% if (lightOrDark(color) == "dark") { %> <% if (lightOrDark(color) == "dark") { %>
.player.video-ambient-container { .player.video-ambient-container {
box-shadow: 0 0 20px <%=color2%>; box-shadow: 0 0 2.4em <%=color2%>;
}
<% } %>
<% } %>
<% if (a) { %>
.player.video-ambient-container {
box-shadow: 0 0 0em <%=color%>;
} }
<% } %> <% } %>
@ -276,11 +285,11 @@
<% if (inv_vid.genre != "Music") { %> <% if (inv_vid.genre != "Music") { %>
<a title="PokeTube Homepage" class="class" href="/143" style=font-family:Inter,sans-serif;color:var(--text-color)> <img style="transform: scale(1.3);padding-left:0.9em;width: 8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo.svg?v=5"></a> <a title="PokeTube Homepage" class="class" href="/143" style=font-family:Inter,sans-serif;color:var(--text-color)> <img loading="lazy" style="transform: scale(1.3);padding-left:0.9em;width: 8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo.svg?v=5"></a>
<% } %> <% } %>
<% if (inv_vid.genre === "Music") { %> <% if (inv_vid.genre === "Music") { %>
<a title="PokeTube Homepage" class="class" href="/143" style=font-family:Inter,sans-serif;color:var(--text-color)> <img style="transform: scale(1.3);padding-left:0.9em;width: 7.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/music.svg?v=5"></a> <a title="PokeTube Homepage" class="class" href="/143" style=font-family:Inter,sans-serif;color:var(--text-color)> <img loading="lazy" style="transform: scale(1.3);padding-left:0.9em;width: 7.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/music.svg?v=5"></a>
<% } %> <% } %>
@ -308,7 +317,7 @@ But Please note that unofficial instances can add the same lock icon, so please
<button class="btn btn-success" type="submit" style="transform: translate(21em, -1.25em);"><i class="fa-light fa-search"></i></button> <button class="btn btn-success" type="submit" style="transform: translate(21em, -1.25em);"><i class="fa-light fa-search"></i></button>
</form> </form>
<img src="https://search-metrics.poketube.fun/t/rep.gif" style="border:0;width: 0;visibility: hidden;"> <img loading="lazy" src="https://search-metrics.poketube.fun/t/rep.gif" style="border:0;width: 0;visibility: hidden;">
</div> </div>
<div class="right"> <div class="right">
@ -335,7 +344,24 @@ But Please note that unofficial instances can add the same lock icon, so please
<i class="fa-light fa-code"></i> <i class="fa-light fa-code"></i>
View Embed View Embed
</a> </a>
<% if (!a) { %>
<a href="/watch?v=<%=video.id%>&a=false" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-lightbulb-on"></i>
Ambient mode • on
</a>
<% } %>
<% if (a) { %>
<a href="/watch?v=<%=video.id%>" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-lightbulb" style="width: 1em;margin-left: 4px;"></i>
Ambient mode • off
</a>
<% } %>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;width: 16.5em;height: 0;"> <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;width: 16.5em;height: 0;">
@ -389,20 +415,20 @@ display: block;" autoplay controls
<% video.Subtitles.Subtitle.forEach(x => { %> <% video.Subtitles.Subtitle.forEach(x => { %>
<track src="/api/subtitles?v=<%=video.id%>&h=<%= x.language %>" label="<%= x.language.replace("United States","Simplified - USA") %>" kind="subtitles"> <track src="/api/subtitles?v=<%=video.id%>&h=<%= x.language %>" label="<%= x.language.replace("United States","Simplified - USA") %>" kind="subtitles">
<img src="https://t.poketube.fun/t/rep.gif?v=<%=btoa(video.id)%>&h=<%= x.language %>" id="subtitle_usage_rate" style="border:0;width: 0;visibility: hidden;"> <img loading="lazy" src="https://t.poketube.fun/t/rep.gif?v=<%=btoa(video.id)%>&h=<%= x.language %>" id="subtitle_usage_rate" style="border:0;width: 0;visibility: hidden;">
<% }) %> <% }) %>
<% } %> <% } %>
<% if (!Array.isArray( video.Subtitles.Subtitle)) { %> <% if (!Array.isArray( video.Subtitles.Subtitle)) { %>
<track src="/api/subtitles?v=<%=video.id%>&h=<%= video.Subtitles.Subtitle.language %>" label="<%= video.Subtitles.Subtitle.language.replace("United States","Simplified - USA") %>" kind="subtitles"> <track src="/api/subtitles?v=<%=video.id%>&h=<%= video.Subtitles.Subtitle.language %>" label="<%= video.Subtitles.Subtitle.language.replace("United States","Simplified - USA") %>" kind="subtitles">
<img src="https://t.poketube.fun/t/rep.gif?v=<%=btoa(video.id)%>&h=<%= video.Subtitles.Subtitle.language %>" id="subtitle_usage_rate" style="border:0;width: 0;visibility: hidden;"> <img loading="lazy" src="https://t.poketube.fun/t/rep.gif?v=<%=btoa(video.id)%>&h=<%= video.Subtitles.Subtitle.language %>" id="subtitle_usage_rate" style="border:0;width: 0;visibility: hidden;">
<% } %> <% } %>
<% } %> <% } %>
</video> </video>
<img src="https://t.poketube.fun/t/rep.gif?video=<%=btoa(video.id)%>" style="border:0;width: 0;visibility: hidden;" id="video"> <img loading="lazy" src="https://t.poketube.fun/t/rep.gif?video=<%=btoa(video.id)%>" style="border:0;width: 0;visibility: hidden;" id="video">
<div style="display: flex;justify-content: center;align-items: center;flex-direction: row; column-gap: 3px;margin-top: -1em;" align="center"> <div style="display: flex;justify-content: center;align-items: center;flex-direction: row; column-gap: 3px;margin-top: -1em;" align="center">
<% if (!qua) { %> <% if (!qua) { %>
@ -427,7 +453,7 @@ display: block;" autoplay controls
<a name="chnl"></a> <a name="chnl"></a>
<a href="/channel?id=<%=video.Channel.id%>" class="avatar"> <a href="/channel?id=<%=video.Channel.id%>" class="avatar">
<img src="https://p.poketube.fun/<%= k.Video.Channel.Avatar[1].$t %>"> <img loading="lazy" src="https://p.poketube.fun/<%= k.Video.Channel.Avatar[1].$t %>">
</a> </a>
<div class="name" > <div class="name" >
@ -722,7 +748,7 @@ display: block;" autoplay controls
<div class="desc"> <div class="desc">
<h5 style="display: flex;margin-top: 7px;padding-top: 10px;"><div class="thumb"> <h5 style="display: flex;margin-top: 7px;padding-top: 10px;"><div class="thumb">
<a href="/channel?id=<%- x.authorId%>" class="avatar" style="width: 40px;height: 40px;"> <a href="/channel?id=<%- x.authorId%>" class="avatar" style="width: 40px;height: 40px;">
<img src="https://p.poketube.fun/<%= x.authorThumbnails[1].url %>"> <img loading="lazy" src="https://p.poketube.fun/<%= x.authorThumbnails[1].url %>">
</a> </a>
</div> </div>
<% if (!x.authorIsChannelOwner) { %> <% if (!x.authorIsChannelOwner) { %>
@ -785,7 +811,7 @@ display: block;" autoplay controls
</div> </div>
<!-- This is to see how much comments loaded in a video, i dont collect the comment metadata - its sha hashed (see /privacy ) --> <!-- This is to see how much comments loaded in a video, i dont collect the comment metadata - its sha hashed (see /privacy ) -->
<img src="https://t.poketube.fun/t/rep.gif?v=<%=sha384(video.id)%>&pub_date=<%-sha384(x.publishedText)%>&content_comment_sha=<%- sha384(x.content)%>&id=<%- sha384(x.commentId) %>" id="comments_rate" style="border:0;width: 0;visibility: hidden;display:none;"> <img loading="lazy" src="https://t.poketube.fun/t/rep.gif?v=<%=sha384(video.id)%>&pub_date=<%-sha384(x.publishedText)%>&content_comment_sha=<%- sha384(x.content)%>&id=<%- sha384(x.commentId) %>" id="comments_rate" style="border:0;width: 0;visibility: hidden;display:none;">
</div> </div>
@ -956,12 +982,12 @@ display: block;" autoplay controls
<!-- START <%=t%> --> <!-- START <%=t%> -->
<!-- SESSION --> <!-- SESSION -->
<img src="<%=t%>t/rep.gif?ID=<%=btoa(Date.now())%>" style="width: 0;visibility: hidden;" id="SesionID"> <img loading="lazy" src="<%=t%>t/rep.gif?ID=<%=btoa(Date.now())%>" style="width: 0;visibility: hidden;" id="SesionID">
<img src="<%=t%>t/rep.gif?piwik=t" style="width: 0;visibility: hidden;" id="piwik_noip_no_personal-info_collect"> <img loading="lazy" src="<%=t%>t/rep.gif?piwik=t" style="width: 0;visibility: hidden;" id="piwik_noip_no_personal-info_collect">
<!-- VIDEO --> <!-- VIDEO -->
<img src="<%=t%>t/rep.gif?video_id=<%=btoa(video.id)%>" style="width: 0;visibility: hidden;" id="videoID"> <img loading="lazy" src="<%=t%>t/rep.gif?video_id=<%=btoa(video.id)%>" style="width: 0;visibility: hidden;" id="videoID">
<img src="<%=t%>t/rep.gif?channel_ID=<%=btoa(video.Channel.id)%>" style="width: 0;visibility: hidden;" id="channel"> <img loading="lazy" src="<%=t%>t/rep.gif?channel_ID=<%=btoa(video.Channel.id)%>" style="width: 0;visibility: hidden;" id="channel">
<!-- END <%=t%> --> <!-- END <%=t%> -->