mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-15 07:38:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
poke/html/poketube.ejs
ashley 4a55d5c92c awa
2024-09-24 19:37:44 +00:00

3571 lines
No EOL
144 KiB
Text
Raw Blame History

<% try { %>
<!-- PHTML START -->
<% if (!isMobile) { %>
<!--
HEYOOOOOOOOOO!!!!!!
poketube is the privacy first youtube front end ! fell free to pull request on codeberg.org!
if you want to host an instance, see README.md
license below:
This Source Code Form is subject to the terms of the GNU General Public License:
Copyright (C) 2021-2024 PokeTube, a part of poke project (https://codeberg.org/Ashley/poketube)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/.
-->
<!DOCTYPE html>
<% if(secure) { %><!-- HOSTNAME_IS_POKETUBE.FUN --><% } %><% if(!secure) { %><!-- HOSTNAME_IS_NOT_POKETUBE.FUN --><% } %>
<html class="poketube_desktop_player js events addEventListener hasVideoJS canPlayHD" style="background: #000000;" invidproxy="<%=u%>" universe_version="2" vid_id="<%=inv_vid.videoId%>" t="<%=btoa(Date.now())%>" version="browser_web_<%=Date.now()%>">
<head>
<% if (e === false) { %>
<!-- meta tags disabled by user -->
<% } %>
<% if (!e) { %>
<meta content="<%=inv_vid.title%>" name=title>
<meta content="<%=color%>" name="theme-color">
<meta content="{canplayhd: true, redesign_feburary_2023:true, poke-rebrand:true, universe:2, ImmersiveAmbientMode:true, november2023_poke_rebrand:true, faster_load:true, AudioSyncV2:false, AudioSyncV3:true }" name="flags">
<meta content="<%=k.Video.Channel.Name%>" name=twitter:author>
<meta content="https://poketube.fun/watch?v=<%=inv_vid.videoId%>" name=twitter:url>
<meta content="<%=inv_vid.title%> | Poke" name=twitter:title>
<meta content="Watch this <%- turntomins(inv_vid.lengthSeconds) || "LIVE"%> long video from <%=k.Video.Channel.Name%> On Poke!
👍 <%=convert(engagement.likes)%> | 👎 <%=convert(engagement.dislikes)%> | 📈 <%=convert(engagement.viewCount)%> Views 🗓️ <%= date.replace("Premiered", " ") %> 💬 <% if (!isNaN(inv.commentCount)) { %><%= inv.commentCount.toLocaleString() %>
<% } else { %>
0
<% } %>" property=twitter:description>
<meta content="https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg" property=og:image>
<meta content=summary_large_image name=twitter:card>
<link href="https://poketube.fun/watch?v=<%=inv_vid.videoId%>" itemprop=url>
<!-- closes the } --> <% } %>
<meta name="darkreader-lock"> <!-- tells dark reader that the site has a dark theme and to turn itself off -->
<link href="/css/yt-ukraine.svg?v=3" rel=icon>
<link rel="manifest" href="/manifest.json">
<title><%= inv_vid.title %> | <%= /^[A-Z]/.test(inv_vid.title) ? 'Watch' : 'watch' %></title>
<style>
.comments-area {
background: #f1f9ff;
padding: 50px 30px;
margin-top: 50px;
}
@media (max-width: 414px) {
.comments-area {
padding: 50px 8px;
}
}
.comments-area h4 {
text-align: center;
margin-bottom: 50px;
color: #002347;
font-size: 18px;
}
.comments-area h5 {
font-size: 16px;
margin-bottom: 0px;
}
.comments-area a {
color: #002347;
}
.comments-area .comment-list {
padding-bottom: 30px;
}
.popup {
display: none;
background-color: #000000DB;
position: absolute;
padding: 10px;
border: solid 1.5px gray;
border-radius: 10px;
}
@media (min-height: 1079px) {
.popup {
background-color: #241c1cab;
backdrop-filter: blur(31px);
}
}
.popup > div {
margin-bottom: 2px;
font-family: var(--text-font-primary);
font-weight: 1000;
font-stretch: ultra-expanded;
padding: 5px;
border-radius: 10px;
}
.popup > div:hover {
background-color: var(--chip-background-hover);
}
.comments-area .comment-list:last-child {
padding-bottom: 0px;
}
.comments-area .comment-list.left-padding {
padding-left: 25px;
}
.icon.ion.ion-md-checkmark-circle.loaded {
margin-left: 3px;
}
.icon.ion.ion-md-checkmark-circle {
margin-left: 3px;
}
@media (max-width: 413px) {
.comments-area .comment-list .single-comment h5 {
font-size: 12px;
}
.comments-area .comment-list .single-comment .date {
font-size: 11px;
}
.comments-area .comment-list .single-comment .comment {
font-size: 10px;
}
}
.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
z-index: 9999;
display:none;
background-color: #f2f2f2;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-image: linear-gradient(to right,
#55CDFC,
#F7A8B8,
#FFFFFF,
#F7A8B8,
#55CDFC
);
transition: width 0.5s ease-in-out;
}
.comments-area .thumb {
margin-right: 20px;
}
ptd-event-chunks {
display: none;
}
.comments-area .date {
font-size: 13px;
color: #777777;
margin-bottom: 13px;
}
.comments-area .comment {
color: #777777;
margin-bottom: 0px;
}
a[data-onclick="jump_to_time"] {
background: linear-gradient(to right, #8a2387, #e94057, #f27121);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.comments-area .btn-reply {
background-color: var(--text-color);
color: #002347;
border: 1px solid #eee;
padding: 2px 18px;
font-size: 12px;
display: block;
font-weight: 600;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.comments-area .btn-reply:hover {
background: #fdc632;
color: #002347;
}
.comment-form {
background: #f1f9ff;
text-align: center;
padding: 47px 30px 43px;
margin-top: 50px;
margin-bottom: 40px;
}
.comment-form h4 {
text-align: center;
margin-bottom: 50px;
font-size: 18px;
line-height: 22px;
color: #002347;
}
.comment-form .name {
padding-left: 0px;
}
@media (max-width: 767px) {
.comment-form .name {
padding-right: 0px;
margin-bottom: 1rem;
}
}
.comment-form .email {
padding-right: 0px;
}
@media (max-width: 991px) {
.comment-form .email {
padding-left: 0px;
}
}
.comment-form .form-control {
padding: 8px 20px;
background: var(--text-color);
border: none;
border-radius: 0px;
width: 100%;
font-size: 14px;
color: #777777;
border: 1px solid transparent;
}
.comment-form .form-control:focus {
box-shadow: none;
border: 1px solid #eee;
}
.comment-form textarea.form-control {
height: 140px;
resize: none;
}
.comment-form ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 15px;
color: #777;
}
.comment-form ::-moz-placeholder {
/* Firefox 19+ */
font-size: 15px;
color: #777;
}
.comment-form :-ms-input-placeholder {
/* IE 10+ */
font-size: 15px;
color: #777;
}
.dropdown__menu {
max-height: calc(100vh - 100px);
overflow: auto;
}
#loopedIndicator {
display: none;
position: fixed;
bottom: 10px;
left: 10px;
background-color: #fff;
color: #000;
padding: 14px;
border-radius: 14px;
opacity: 1.0;
z-index: 999;
width: 13em;
text-align: center;
font-family: var(--text-font-primary);
font-weight: 600;
font-stretch: ultra-expanded;
}
.comment-form :-moz-placeholder {
/* Firefox 18- */
font-size: 15px;
color: #777;
}
.description{
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}
#continue {
max-width: 14px;
max-height: 14px;
}
.desc {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}
.video{
margin-right: auto;
}
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.loading .spinner {
display: inline-block;
border: 5px solid rgba(255, 255, 255, 0.2);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s ease-in-out infinite;
width: 50px;
height: 50px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
<!-- css files -->
<!-- these files are cached for 24 hours -->
<link href="/css/app-cdn.min.css?v=9893448" rel=stylesheet>
<link href="/css/app.main.css?v=446008" rel=stylesheet>
<link href="/css/watch.main.css?v=9893448" rel=stylesheet>
<link href="/css/watch-util.css?v=9893448" rel=stylesheet>
<link href="/css/watch-navbar.css?v=9893448" rel=stylesheet>
<link href="/css/poketube.css?v=94648934774844" rel=stylesheet>
<!-- video.js -->
<link href="/css/videojs-v8.16.0.css?v=5949545" rel="stylesheet" />
<script src="/static/vjs.min.js?v=45959"></script>
<script src="/static/player-base.js?v=1648"> </script>
<!-- ICONS -->
<!-- Font awesome pro -->
<link href="<%- proxyurl %>/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" rel=stylesheet>
<link href="<%- proxyurl %>/https://cdn.jsdelivr.net/npm/ionicons@4.5.0-0/dist/css/ionicons.min.css" rel=stylesheet>
<!-- css files end -->
<% if (k.Video.Channel.Name == "7clouds") { %>
<style>
@font-face {
font-family: 'Edo SZ';
src: url('<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/edosz.ttf?v=1706644280493') format('truetype');
}
</style>
<% } %>
<noscript>
<style>
.auto-play{
display:none !important;
}
.theather {
display:none !important;
}
.progress-container {
display:none !important;
}
.fade-in {
opacity: 1 !important;
}
.fa-light.fa-circle-plus {
margin-top: 27px;
}
<% 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") { %>
<style>
.t {
color: #e6d140; !important;
font-family: Georgia,serif; !important;
font-size: 250%; !important;
font-variant: small-caps; !important;
font-weight: normal; !important;
text-shadow: 1px 1px #000,1px 1px 0.1px #000;!important;
font-size: 25px;
font-style: italic;
}
</style>
<% } %>
<% if(IsOldWindows) { %>
<style>
:root {
--text-font-primary: "Inter" !important;
}
.video-info-buttons.pill {
font-family:inherit !important;
}
.video-sub-info.description {
font-family:ubuntu !important;
}
canvas {
display:none;
}
<% 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 data-universe="2">
:root {
--div-gradient: linear-gradient(to bottom right, #9666F7, #B37C6B);
}
details[open] {
background: linear-gradient(to bottom, #1c1c1c, #101);
}
.account:hover {
background-color: #263850 !important;
}
.account > i {
margin-right: -3px;
}
.account {
height: 36px;
display: flex;
flex-direction: row;
gap: 8px;
color:#fff !important;
border: 1px solid var(--border-color);
justify-content: center;
align-items: center;
transition: background-color linear 100ms;
padding: 0 8px !important;
text-decoration: none;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
border-radius: 18px;
width: fit-content;
background-color: #0000;
margin-right: -1em;
}
.settings-icon{
margin-right: 5.5px;
height: 36px;
display: flex;
flex-direction: row;
gap: 8px;
text-decoration: none !important;
color: #fff !important;
border: 1px solid var(--border-color);
justify-content: center;
align-items: center;
transition: background-color linear 100ms;
padding: 0 8px !important;
text-decoration: none;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
border-radius: 18px;
width: 1.5em;
background-color: #0000;
}
.new-button {
border: 2.1px solid;
border-color: #cba6f7;
}
.new-button:hover {
border: 2.1px solid;
border-color: white;
box-shadow: 0 3px 14px #000;
}
.comment-list.left-padding {
border-radius: 1em !important;
}
.comment-list.left-padding:hover {
filter: drop-shadow(0 0 0.75rem #df00ff);
transition-duration: 150ms;
}
nav {
z-index: 1;
position: sticky;
background:#0009;
top: 0;
}
.rainbow-gradient {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
color: transparent;
}
</style>
<% if(dm) { %>
<style>
:root {
--div-gradient: linear-gradient(to bottom right, #33078c, #7a4d3f) !important;
}
.subscribe-button > a {
color: rgb(232, 230, 227) !important;
text-decoration-color: currentcolor;
}
.subscribe-button {
color: rgb(255, 26, 26);
background-color: rgb(24, 26, 27);
background-image: none;
}
.subscribe-button:hover {
background-color: rgb(24, 26, 27);
background-image: linear-gradient(90deg, rgb(166, 30, 99), rgb(111, 88, 0), rgb(166, 30, 99), rgb(111, 88, 0));
box-shadow: rgb(0, 0, 0) 0px 3px 14px;
}
* {
scrollbar-color: #454a4d #202324;
}
.new-button:hover {
border-color: rgb(48, 52, 54);
box-shadow: rgb(0, 0, 0) 0px 3px 14px;
}
.new-button.engagement:hover {
background-color: rgba(0, 0, 0, 0.6);
}
.new-button {
border-color: rgb(61, 11, 120);
}
</style>
<% } %>
</head>
<body>
<script>
<!--//--><![CDATA[//><!--
/**
* @licstart The following is the entire license notice for the JavaScript
* code in this page.
*
* Copyright (C) 2021-2024 PokeTube Project (https://codeberg.org/Ashley/poketube)
*
* The JavaScript code in this page is free software: you can redistribute
* it and/or modify it under the terms of the GNU General Public License
* (GNU GPL) as published by the Free Software Foundation, either version 3
* of the License, or (at your option) any later version. The code is
* distributed WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU GPL
* for more details.
*
* As additional permission under GNU GPL version 3 section 7, you may
* distribute non-source (e.g., minimized or compacted) forms of that code
* without the copy of the GNU GPL normally required by section 4, provided
* you include this license notice and a URL through which recipients can
* access the Corresponding Source.
*
* @licend The above is the entire license notice for the JavaScript code
* in this page.
*/
//--><!]]>
</script>
<ptd-app-iconfixer>
<script>
// Preload the icon image
var iconImage = new Image();
iconImage.src = "/css/yt-ukraine.svg";
// Wait for the icon image to load before showing it
iconImage.onload = function() {
var iconElement = document.querySelector('link[rel="icon"]');
iconElement.href = iconImage.src;
iconElement.type = "image/svg+xml";
};
</script>
</ptd-app-iconfixer>
<ptd-app-ejs>
<div class="app" id="secret-theme" canHaveAmbientMode="true" style="color:var(--text-color)">
<div id="loopedIndicator"></div>
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<nav>
<div class=left>
<% if (k.Video.Channel.Name !== "twenty one pilots") { %>
<a title="Poke 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>
<% if (secure) { %>
<i style="margin-left: 2em;" class="fa-light fa-lock"
title="This is a secure and/or offical instance!
you can trust this instance becuase:
- its a offical instance (offical instances have the max. privacy rules )
- logs are kept closed
if you see this lock icon, you can trust the instance!!
But Please note that unofficial instances can add the same lock icon, so please be careful about dad :D!
To verfiy u cab use this hashed code on SHA-265
d312fe1994124e29478
caaddefabec047746608
b8ef09b69b3ac2f63f4
e53a4a
if your domain matches this code you are probably in poketube.fun owo:3
"
></i>
<% } %>
<% } %>
<% if (k.Video.Channel.Name === "twenty one pilots") { %>
<a title="Poke Homepage" class="class" href="/143" style="font-family:Inter,sans-serif;color:var(--text-color);display: flex;"> <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">
<img src="/css/red-tape.png?v=5" style="opacity: 0.9;height: 41px;margin-left: -10em;"></a>
<% if (secure) { %>
<i style="margin-left: 9em;" class="fa-light fa-lock"
title="This is a secure and/or offical instance!
you can trust this instance becuase:
- its a offical instance (offical instances have the max. privacy rules )
- logs are kept closed
if you see this lock icon, you can trust the instance!!
But Please note that unofficial instances can add the same lock icon, so please be careful about dad :D!
To verfiy u cab use this hashed code on SHA-265
d312fe1994124e29478
caaddefabec047746608
b8ef09b69b3ac2f63f4
e53a4a
if your domain matches this code you are probably in poketube.fun owo:3
"
></i>
<% } %>
<% } %>
<% if (verify) { %>
<i style="margin-left: 2em;" class="fa-light fa-badge-check"
title="This is a veried instance!
this instance was verified to be fast and secure!"
></i>
<% } %>
</div>
<div class="middle">
<form action="/search"><input class="search-bar" autocomplete="on" id="fname" name="query" style="color:var(--text-color);font-family:poketube flex,sans-serif;border-radius: 2em;font-weight: 850;font-stretch: extra-expanded;" data-ddg-inputtype="identities.firstName">
<button class="btn btn-success" type="submit" style="transform: translate(21em, -1.25em);"><i class="fa-light fa-search"></i></button>
</form>
</div>
<div class="right">
<span style="margin-right: 8px;"><i class="fa-light fa-coin"></i> 0 </span>
<p id="fetch-count">
</p>
<a class="settings-icon" href="https://social.poketube.fun/share?text=watch+<%=inv_vid.title%>+by+<%=k.Video.Channel.Name%>+on+Poke!+%0Ahttps://<%= hostname %>/watch?v=<%=inv_vid.videoId%>"><i class="fa-brands fa-mastodon"></i>
</a>
<a class="settings-icon" href="/customize"><i class="fa-light fa-brush"></i>
</a>
<div class="icon-button dropdown settings-icon">
<input type="checkbox" id="loggedout-dropdown" autocomplete="off">
<label for="loggedout-dropdown">
<i style="display: block;margin-left: auto;margin-right: auto;" class="fa-light fa-grid-2"></i>
</label>
<div class="dropdown__menu" style="right: -1em;">
<a href="https://social.poketube.fun/share?text=watch+<%=inv_vid.title%>+by+<%=k.Video.Channel.Name%>+on+Poke!+%0Ahttps://<%= hostname %>/watch?v=<%=inv_vid.videoId%>" style="text-decoration: none;" class="dropdown__item">
<i class="fa-brands fa-mastodon"></i>
Share On PokeSocial!
</a>
<a href="/customize" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-brush"></i>
Customize Poke
</a>
<a href="/account-create" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-user"></i>
My Account
</a>
<a href="/discover" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-compass"></i>
Discover Poke
</a>
<a href="/maps" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-map"></i>
Poke Maps
</a>
<a href="/translate" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-language"></i>
Poke Translate
</a>
<a href="/apps" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-grid-2"></i>
Poke Apps </a>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;width: 16.5em;height: 0;">
<% if (!a) { %>
<a href="/watch?v=<%=inv_vid.videoId%>&a=false" title="Ambient light mode uses a very cool ahh effect to make watching videos more immersive by casting gentle colors from the video into your screen’s background! and it looks amazing :3 owo" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-lightbulb-on"></i>
Ambient Lights • on
</a>
<% } %>
<% if (a) { %>
<a title=title="Ambient light mode uses a very cool ahh effect to make watching videos more immersive by casting gentle colors from the video into your screen’s background! and it looks amazing :3 owo" href="/watch?v=<%=inv_vid.videoId%>" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-lightbulb" style="width: 1em;margin-left: 4px;"></i>
Ambient Lights • off
</a>
<% } %>
<% if (!dm) { %>
<a href="/watch?v=<%=inv_vid.videoId%>&dm=true" title="Enable dark video info panel" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-sun-bright"></i>
Dark Panel • off
</a>
<% } %>
<% if (dm) { %>
<a title="Enable Dark video info" href="/watch?v=<%=inv_vid.videoId%>" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-moon" style="width: 1em;margin-left: 4px;"></i>
Dark Panel • on
</a>
<% } %>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;width: 16.5em;height: 0;">
<% if (!universe) { %>
<a href="/watch?v=<%=inv_vid.videoId%>&universe=2" title="test out the new layout of poketube!" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-flask" style="width: 16px;height: 17px;margin-left: 2px;"></i>
Testing Mode
</a>
<% } %>
<% if (universe) { %>
<a title="test out the new layout of poketube!" href="/watch?v=<%=inv_vid.videoId%>" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-flask" style="width: 16px;height: 17px;margin-left: 2px;"></i>
Close testing mode
</a>
<% } %>
<a href="https://youtube.com/watch?v=<%=inv_vid.videoId%>"style="text-decoration: none;" class="dropdown__item">
<i class="fa-brands fa-youtube"></i>
Open on YouTube :3
</a>
<a title="Low Bandwidth? Is your Internet from ummhh 1999? Do u still use dial-in for some reason lol - u can try Lite!" href="/lite?v=<%=inv_vid.videoId%>" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-bolt" style="width: 16px;height: 17px;margin-left: 2px;"></i>
Go Lite!
</a>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;width: 16.5em;height: 0;">
<a href="/api/version.json" style="text-decoration: none;color:#fff;" class="dropdown__item">
<i class="fa-light fa-circle-info"></i>
Version
</a>
<a href="https://codeberg.org/ashley/poke" style="text-decoration: none;color:#fff;" class="dropdown__item">
<i style="width: 16px;height: 17px;margin-left: 2px;" class="fa-light fa-code-merge"></i>
Source Code
</a>
<a href="/privacy" style="text-decoration: none;color:#fff;" class="dropdown__item">
<i style="width: 16px;height: 17px;margin-left: -1px;" class="fa-light fa-shield"></i>
Privacy
</a>
<a href="https://discord.poketube.fun" style="text-decoration: none;color:#fff;" class="dropdown__item">
<i class="fa-brands fa-discord"></i>
Offical Discord Server! :3
</a>
</div>
</div>
<a href="/account-create" class="account"><i class="fa-light fa-user"></i>Account</a>
</div>
</nav>
<div class="watch-page">
<div class="primary">
<div id="popupMenu" class="popup">
<div >
<a href="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" style="color: #fff;">
<i class="fa-light fa-download"></i> Download Video (360p)</a>
</div>
<div id="loopOption">
<i class="fa-light fa-repeat"> </i> Loop Video
</div>
<div id="speedOption">
<i class="fa-light fa-gauge"></i> Speed: 1.00x
</div>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;/*! width: 4.5em; */height: 0;">
<div >
<a href="https://codeberg.org/ashley/poke/issues/new?template=issue_template%2fplayer-bug.yml" style="color: #fff;">
<i class="fa-light fa-flag"></i> Report a video player bug</a>
</div>
<div >
<a href="https://codeberg.org/ashley/poke/src/branch/main/fix-videoplayback-issues.md" style="color: #fff;">
<i class="fa-light fa-info-circle"></i> Having issues?</a>
</div>
<div >
<a href="https://discord.poketube.fun" style="color: #fff;">
<i class="fa-brands fa-discord"></i> Discord Server</a>
</div>
<p style="margin: 0px;font-family: &quot;poketube flex&quot;;color: gray;font-size: 11px;text-align: center;">PokeVideoPlayer v0.9-rev1 - licensed under gpl3-or-later</p>
</div>
<div id="<%=sha384(inv_vid.videoId)%>" class="video-player-container">
<%
let itag = null; // Default to null
inv_vid.adaptiveFormats.forEach(format => {
if (format.itag == '136' || format.itag == '298') {
itag = '140'; // Set itag to '140' if either '136' or '298' is found
}
});
%>
<% if (itag && !qua) { %>
<audio id="aud" preload>
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=<%=itag%>&local=true" type="video/mp4" onerror="showErrorCard(event)"/>
</audio>
<% } else { %>
<audio id="aud"></audio>
<% } %>
<noscript>
<% if (!qua) { %>
<div id="nojs-high-res-warning" class="error-card">
<p>Due to YouTube's recent changes on high resolution playback, it is sadly impossible to play high-resolution video with audio without client-side JavaScript enabled. Switch to SD quality or enable JavaScript to play your video with audio.</p>
</div>
<% } %>
</noscript>
<video poster="<%- media_proxy_url %>/proxy?url=https://i.ytimg.com/vi/<%= inv_vid.videoId %>/hqdefault.jpg" class="video-js player video-ambient-container" id="video" style="border-radius: 16px; box-sizing: border-box; min-width: 100%; display: block;" preload onerror="showErrorCard(event)">
<% if (isvidious) { %>
<% if (!qua) { %>
<%
let itag = '136'; // Default itag
inv_vid.adaptiveFormats.forEach(format => {
if (format.itag == '298') {
itag = '298';
}
});
%>
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=<%=itag%>&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true" onerror="showErrorCard(event)">
<% } %>
<% if (qua === "medium") { %>
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true" onerror="showErrorCard(event)">
<% } %>
<% } %>
<% if (!isSchoolProxy) { %>
<% if (!isvidious) { %>
<% if (!qua) { %>
<source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/22" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true" onerror="showErrorCard(event)">
<% } %>
<% if (qua === "medium") { %>
<source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true" onerror="showErrorCard(event)">
<% } %>
<% } %>
<% } %>
<% if (isSchoolProxy) { %>
<% if (!qua) { %>
<source src="https://tube-proxy.ashley0143.xyz/proxy/media/<%=inv_vid.videoId%>/22" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true" onerror="showErrorCard()">
<% } %>
<% if (qua === "medium") { %>
<source src="https://tube-proxy.ashley0143.xyz/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true" onerror="showErrorCard()">
<% } %>
<% } %>
<% if (Array.isArray( inv_vid.captions)) { %>
<% inv_vid.captions?.forEach(x => { %>
<track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= x.label %>" label="<%= x.label.replace("United States","Simplified - USA") %>" kind="subtitles">
<% }) %>
<% } %>
<% if (!Array.isArray( inv_vid.captions)) { %>
<track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= %>" label="<%= video.Subtitles.Subtitle.language.replace("United States","Simplified - USA") %>" kind="subtitles">
<% } %>
</video>
<% if (!a) { %>
<canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-1"></canvas>
<canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-2"></canvas>
<% } %>
<div class="pwp">
<% if (!qua) { %>
<a><i style="display: block;" title="High Definition [Current]" class="fa-solid fa-high-definition"></i> High Definition </a>
<a href="/watch?v=<%=inv_vid.videoId%>&quality=medium"><i style="display: block;" title="Standard Definition" class="fa-light fa-standard-definition"></i> Standard Definition</a>
<% } %>
<% if (qua) { %>
<a href="/watch?v=<%=inv_vid.videoId%>"> <i style="display: block;" title="High Definition" class="fa-light fa-high-definition"></i> High Definition </a>
<a><i style="display: block;" title="Standard Definition [Current]" class="fa-solid fa-standard-definition"></i> Standard Definition</a>
<% } %>
<input type="checkbox" class="v" id="box" style="display:none">
<label class="h" for="box">
<div class="fnt">
<% if (Math.floor(Math.random() * 50) === 0) { %>
<i title="Stats for nerdys" class="fa-light fa-bug"></i> Stats For Puppies
<% } else { %>
<i title="Stats for nerdys" class="fa-light fa-bug"></i> Stats For Nerds
<% } %>
</div>
</label>
<a onclick="toggleTheaterMode()" class="theather"><i class="fa-sharp fa-light fa-up-right-and-down-left-from-center"></i> Theater</a>
<% if (inv.comments) { %>
<input type="checkbox" class="hj" id="j" style="display:none">
<label class="hj" for="j">
<div class="fnt">
<i title="FLYING COMMENTS" class="fa-light fa-comments"></i> </div>
</label>
<% } %>
<!-- Stats for nerds -->
<div class="div_box">
Video id : <%=inv_vid.videoId%> <br>
ImmersiveAmbientModecolor: <% if (lightOrDark(color) == "light") { %><%=color%> (color 1)<% } %><% if (lightOrDark(color) == "dark") { %> <%=color2%> (color 2) <% } %> <br>
Video Format :<% if (!qua) { %> <%= itag_hd %> (720p) openh264 ( https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz <% } %>
<% if (qua === "medium") { %> 18 (320p) openh264 (https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz <% } %> <br>
<% if (inv_vid.genre === "Music") { %>
Audio Format: ALAC lossless (https://github.com/macosforge/alac) <br>
<% } %>
<% if (inv_vid.genre !== "Music") { %>
Audio Format: 140 ( High ) <br>
<% } %>
PokeTubeEncryptID: <%=sha384(inv_vid.videoId)%> <br>
<% if (isvidious) { %>
Proxy : <%= u.replace("https://","") %> - refresh the page to change the proxy location<br>
<% } %>
<% if (!isvidious) { %>
Proxy : tube-proxy.poketube.fun - refresh the page to change the proxy location<br>
<% } %>
Date : <%- Date.now() %> - <%- useragent.os.replace("Linux", "GNU/Linux") %> on <%- useragent.browser %> <br>
<% if (k.Video.Channel.id != "UCBQZwaNPFfJ1gZ1fLZpAEGw") { %>
<% if (isvidious) { %>
Mystery text : <%=btoa(inv_vid.videoId + " i " + " lov " + " u " + u.replace("https://","") ) %> <br>
<% } %>
<% if (!isvidious) { %>
Mystery text : <%=btoa(inv_vid.videoId + " i " + " lov " + " u " + "tube-proxy.poketube.fun" ) %> <br>
<% } %>
<% } %>
<% if (k.Video.Channel.id == "UCBQZwaNPFfJ1gZ1fLZpAEGw") { %>
Mystery text : <%=btoa(Date.now() + "dmaorg.info/found/15398642_14/clancy.html" + inv_vid.videoId) %> <br>
<% } %>
143 : true <br>
</div>
</div>
</div>
<div class="video-info" >
<% if (universe) { %>
<div class="video-info-panel gradient" style="display:none;">
<% } %>
<% if (!universe) { %>
<div class="video-info-panel gradient">
<% } %>
<% if (k.Video.Channel.Name == "7clouds") { %>
<div class="video-title t" style="font-family: 'Edo SZ', sans-serif !important;font-weight:bold;line-break: auto;max-width: max-content;margin: 0;margin-bottom: 0;padding: 0;"
<% } %>
<% if (k.Video.Channel.Name !== "7clouds") { %>
<div class="video-title t" style="font-family:inter;font-weight:bold;line-break: auto;max-width: max-content;margin: 0;margin-bottom: 0;padding: 0;"
<% } %>
<% if (inv_vid?.title !== k.Video.Title) { %>
title="Non-Translated title : <%=inv_vid.title%>"
<% } %>
> <%-k.Video.Title.replace(/\/channel\//g, "/channel?id=").replace(/https:\/\/youtube.com/g, ""); %>
</div>
<% if (inv_vid.genre === "Music") { %>
<div style="float: left;font-size: small;font-family: ubuntu;margin-bottom: 1em;"> <i title="hq audio" class="fa-light fa-waveform-lines"></i>&nbsp;High Quality Audio </div>
<% } %>
<%
let nonhditag = '136'; // Default itag
inv_vid.adaptiveFormats.forEach(format => {
if (format.itag == '298') {
nonhditag = '298';
}
});
%>
<% if (inv_vid.genre !== "Music" && nonhditag !== "298") { %>
<a href="#connections" style="font-weight: bolder;font-family: sans-serif;color: var(--text-color);font-size: small;"> Jump to Connections </a>
<% } %>
<% if (inv_vid.genre !== "Music" && nonhditag === "298") { %>
<div style="float: left;font-size: small;font-family: ubuntu;margin-bottom: 1em;"> <i title="60 FPS" class="fa-light fa-circle-waveform-lines"></i>&nbsp;60 FPS video </div>
<% } %>
<div class="video-chnl-info-pill" name="chnl">
<a name="chnl"></a>
<a href="/channel?id=<%=video?.Channel.id || k.Video.Channel.id%>@youtube.com" class="avatar">
<img loading="lazy" src="/avatars/<%= k.Video.Channel.Avatar[1].$t.replace("https://yt3.ggpht.com/", "") %>" %>">
</a>
<div class="name" >
<div style="display: flex;flex-direction: row;max-width: 119px;">
<a title="<%=k.Video.Channel.Name%> " href="/channel?id=<%=video?.Channel.id || k.Video.Channel.id%>@youtube.com" class="video-info-pill-channelname"> <%=k.Video.Channel.Name%>
</a>
<% if (inv_vid?.authorVerified) { %>
<div>
<a href="https://support.google.com/youtube/answer/3046484?hl=en">
<i class="icon ion ion-md-checkmark-circle" title="verified channel"></i></a>
</div>
<% } %>
</div>
<div class="subscriber-count" style="word-wrap: initial;word-break: break-all;display: block ruby;">
<%= k.Video.Channel.subscriberCount.replace("subscribers", "Subs") %>
</div>
</div>
<button class="subscribe-button"><a id="sub">Suscribe</a></button>
</div>
<div>
<div class="video-info-buttons pill" >
<div class="new-button engagement" style="max-height: 32px;gap: 2px;height: 33px;">
<div title="<%=engagement.likes.toLocaleString()%> Likes">
<div class="pill-button" style="margin-right: 5.5px;">
<i class="fa-light fa-thumbs-up"></i>
<%=convert(engagement.likes)%>
</div>
</div>
<div class = "vertical"></div>
<div style="margin-left: -7.5px;" title="<%=engagement.dislikes.toLocaleString()%> Dislikes">
<div class="pill-button">
<%=convert(engagement.dislikes)%> <i class="fa-light fa-thumbs-down" style="margin-left: 1.5px;"></i>
</div> </div>
</div>
<div style="display: flex;">
<a class="new-button" title="Download this Video :3" style="color:var(--text-color);text-decoration: none; " href="/download?v=<%=inv_vid.videoId%>">
<div class="pill-button" style="">
<i class="fa-light fa-download"></i>
Download
</div>
</a>
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('IGNORE_THIS_PLEASE)')) { %>
<% if (support != undefined && linkto == undefined) { %>
<div class="new-button button-encryption">
<a title="Support the Creator of the video!" style="color:var(--text-color);text-decoration: none;" href="https://www.patreon.com/join/<%- support.name %>">
<div class="pill-button">
<i class="fa-light fa-heart"></i>
Thanks!
</div>
</div>
</a>
<% }%> <% }%>
<% }%>
<% if (support == undefined && linkto == undefined) { %>
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('IGNORE_THIS_PLEASE)')) { %>
<div class="new-button button-encryption">
<a title="Switch PokeTube Instance :3" style="color:var(--text-color);text-decoration: none;" href="https://redirect.poketube.fun/watch?v=<%=inv_vid.videoId%>">
<div class="pill-button">
<i class="fa-light fa-rocket-launch"></i>
Redirect!
</div>
</div>
</a>
<% }%> <% }%>
<% }%>
<% if (support == undefined && linkto != undefined) { %>
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('IGNORE_THIS_PLEASE)')) { %>
<div class="new-button button-encryption">
<a title="Stream The Song :3" style="color:var(--text-color);text-decoration: none;" href="https://<%= linkto.subdomain %>.lnk.to/<%= linkto.path %>">
<div class="pill-button">
<i class="fa-light fa-music-note"></i>
Stream!
</div>
</div>
</a>
<% }%> <% }%>
<% }%>
<% if (video?.Channel.Name.endsWith(' - Topic') || inv_vid.title.endsWith('IGNORE_THIS_PLEASE)')) { %>
<a class="new-button" title="open this song in poketube music player :3" style="color:var(--text-color);text-decoration: none;" href="/">
<div class="pill-button">
<i class="fa-light fa-music"></i>
WIP! </a>
<% }%>
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('IGNORE_THIS_PLEASE)')) { %>
<% if (inv.comments) { %>
<div class="new-button button-lite" style=";margin-left: -4px;">
<a title="See videos comments" style="color:var(--text-color);text-decoration: none" href="#comments-container">
<div class="pill-button">
<i class="fa-light fa-message-lines"></i>
<% if (!isNaN(inv.commentCount)) { %>
<%= inv.commentCount.toLocaleString() %>
<% } else { %>
0
<% } %>
</div>
</a>
</div>
<% }%>
<% }%>
<% }%>
</div>
</div>
</div>
</div>
<div class="video-sub-info description">
<% if (inv_vid.descriptionHtml && inv_vid.descriptionHtml.trim() !== "" && inv_vid.descriptionHtml.trim() !== "<p></p>") { %>
<details open="true" class="description-new">
<% } else { %>
<details class="description-new">
<% } %>
<summary style="color:#fff;">
<%=engagement.viewCount.toLocaleString()%> Views • <%=date%> • Click to toggle off description</summary>
<% if (String(inv_vid.descriptionHtml) != "undefined") { %>
<% if (String(inv_vid.descriptionHtml) != " ") { %>
<% if (String(inv_vid.descriptionHtml) != "<p></p>") { %>
<div style="margin-top:1em;">
<%-String(channelurlfixer(inv_vid.descriptionHtml)).replace(/\n/g, " <br> ").replace(/x\.com/g, "twitter.com").replace(/reddit\.com/g, "redlib.matthew.science") %>
</div>
<% } %> <% } %> <% } %>
<% if (String(inv_vid.descriptionHtml) != "undefined") { %>
<% if (String(inv_vid.descriptionHtml) != " ") { %>
<% if (String(inv_vid.descriptionHtml) == "<p></p>") { %>
<div style="margin-top:1em;">
<%-String(linkify(inv_vid.description)).replace(/\n/g, " <br> ").replace(/twitter\.com/g, "twitter.com").replace(/reddit\.com/g, "redlib.matthew.science") %>
</div>
<% } %> <% } %> <% } %>
<% if (String(inv_vid.description) == " ") { %>
<p> No Description On this Video ( sad innit :c )</p>
<% } %>
<% if (wiki.extract_html) { %>
<div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">From da web</div>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<%-wiki.extract_html%>
<p style="margin-bottom: 10px;">
<a href=" <%-wiki.content_urls.desktop.page%>
">From wikipedia </a> under CC-BY-SA 3.0
</p>
</p>
<% } %>
<a id="metadata"></a>
<div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">Metadata And Engagement</div>
<p style="font-weight: bold;">
<span>Views : <%=engagement.viewCount.toLocaleString()%> <br>
Genre: <%-inv_vid.genre %> <br>
<% if (date.includes("Premiered")) { %>
Premiered <%= date.replace("Premiered", "at") %> ^^ <br>
<% } else { %>
Uploaded At <%= date %> ^^ <br>
<% } %>
<hr style="clear: both;display: none;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
warning: returnyoutubedislikes may not be accurate, this is just an estiment ehe :3 <br>
Rating : <%=engagement.rating.toLocaleString()%> (<%=engagement.dislikes.toLocaleString()%>/<%=engagement.likes.toLocaleString()%> <abbr title="Like To dislike ratio - the number to the left is dislike count and the one to the right is like count :3">LTDR</abbr>) <br>
<%
const likes = parseInt(engagement.likes) || 0;
const dislikes = parseInt(engagement.dislikes) || 0;
const total = likes + dislikes;
const likePercentage = total > 0 ? ((likes / total) * 100).toFixed(2) : 0;
const dislikePercentage = total > 0 ? ((dislikes / total) * 100).toFixed(2) : 0;
const getLikePercentageColor = (percentage) => {
if (percentage >= 80) {
return 'green';
} else if (percentage >= 50) {
return 'orange';
} else {
return 'red';
}
};
const getDislikePercentageColor = (percentage) => {
if (percentage >= 50) {
return 'red';
} else if (percentage >= 20) {
return 'orange';
} else {
return 'green';
}
};
const likeColor = getLikePercentageColor(likePercentage);
const dislikeColor = getDislikePercentageColor(dislikePercentage);
const userScore = (parseFloat(likePercentage) - parseFloat(dislikePercentage) / 2).toFixed(2);
const getUserScoreLabel = (score) => {
if (score >= 98) {
return 'Masterpiece Video';
} else if (score >= 80) {
return 'Overwhelmingly Positive';
} else if (score >= 60) {
return 'Positive';
} else if (score >= 40) {
return 'Mixed';
} else if (score >= 20) {
return 'Negative';
} else {
return 'Overwhelmingly Negative';
}
};
const userScoreLabel = getUserScoreLabel(userScore);
const userScoreColor = userScore >= 80 ? 'green' : userScore >= 50 ? 'orange' : 'red';
const userScoreClass = userScore >= 98.00 ? 'rainbow-gradient' : '';
%>
<br><span style="color: <%= likeColor %>;"><%= likePercentage %>%</span> of the users lieked the video!! <br>
<span style="color: <%= dislikeColor %>;"><%= dislikePercentage %>%</span> of the users dislieked the video!! <br>
User score: <span style="color: <%= userScoreColor %>;"><%= userScore %></span>- <span class="<%= userScoreClass %>"> <%= userScoreLabel %> </span><br><br>
RYD date created : <%=engagement.dateCreated.toLocaleString()%> <br>
<a href="/api/getEngagementData?v=<%=inv_vid.videoId%>">See in json</a>
<a id="nerdy"></a>
</span>
<% if (Array.isArray(inv_vid?.keywords)) { %>
<div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">Tags</div>
<div class="tags">
<% if (inv_vid?.keywords && inv_vid.keywords.length > 0) { %>
<% inv_vid?.keywords.forEach(x => { %>
<div class="tag">
<a href="/hashtag/<%=x %>" style="color:var(--text-color)">
<%=x %>
</a>
</div>
<% }) %>
<% } else { %>
<p style="margin:0">oh hey i think you lost your tags <a href="/search?query=where+to+find+a+tag">look how to find one</a></p>
<% } %>
</div>
<% } %>
</details>
<% if (inv_vid.genre === "Gaming") { %>
<div style="padding: 19px;background: #1f1f1f;border-radius: inherit;border: solid var(--div-border-color);margin-top: 13px;display: flex;flex-direction: row;">
<div class="video-title loaded" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: -15px;margin-bottom: 10px;">Poke! Games Hub</div>
<a href="/game-hub?game=snake" style="margin-left: -12em;margin-top: 10px;padding: 10px;border: 2px solid #fff;border-radius: 10px;background: rgba(255, 255, 255, 0.1);margin-bottom: -13px;text-decoration: none;" class="loaded"> Snake </a>
<a href="/game-hub?game=tic-tac-toe" style="margin-left: 9px;margin-top: 10px;padding: 10px;border: 2px solid #fff;border-radius: 10px;background: rgba(255, 255, 255, 0.1);margin-bottom: -13px;text-decoration: none;"> Tic Tac Toe </a>
<a href="/game-hub?game=sudoku" style="margin-left: 9px;margin-top: 10px;padding: 10px;border: 2px solid #fff;border-radius: 10px;background: rgba(255, 255, 255, 0.1);margin-bottom: -13px;text-decoration: none;"> Sudoku </a>
<a href="/game-hub?game=pong" style="margin-left: 9px;margin-top: 10px;padding: 10px;border: 2px solid #fff;border-radius: 10px;background: rgba(255, 255, 255, 0.1);margin-bottom: -13px;text-decoration: none;"> Ping Pong </a>
</div>
<% } %>
<div style="padding: 19px;background: #1f1f1f;border-radius: inherit;border: solid var(--div-border-color);margin-top: 13px;display: flex;flex-direction: row;">
<a id="connections"></a>
<div class="video-title loaded" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: -15px;margin-bottom: 10px;">Connections</div>
<% if (!twitter) { %>
<% if (!discord) { %>
<% if (!reddit) { %>
<% if (!twitch) { %>
<% if (!threads) { %>
<% if (!instagram) { %>
<div style="margin-left: -131px;margin-top: 10px;">
Nyo connections found on the description ;_; <a href="https://codeberg.org/ashley/poketube/issues/"> report an issue lol </a>
</div>
<% } %>
<% } %>
<% } %> <% } %>
<% } %> <% } %>
<div style="display: flex;margin-left: -134px;gap: 3px;margin-top: 8px;">
<% if (twitter) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="/static/twitter-logo.jpeg" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://twitter.com/<%- twitter.name %>"> @<%- twitter.name %></a>
</div>
<% } %>
<% if (discord) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/34e2accb-41ec-4b10-a1e8-a0d647ea6e76.image.png" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://discord.gg/<%- discord.name %>"> /<%- discord.name %></a>
</div>
<% } %>
<% if (twitch) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/d277ed96-59cd-44fe-a75a-56b3170fa634.image.png?v=1693429282139" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://twitch.tv/<%- twitch.name %>"> /<%- twitch.name %></a>
</div>
<% } %>
<% if (reddit) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/3bea1171-8723-4719-b0ee-d98d1abbd174.image.png?v=1693429333706" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://reddit.com/r/<%- reddit.name %>"> r/<%- reddit.name %></a>
</div>
<% } %>
<% if (instagram) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/52704940-684c-41e8-b0de-cca642fa39f8.image.png?v=1693429793193" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://instagram.com/<%- instagram.name %>"> <%- instagram.name %></a>
</div>
<% } %>
<% if (threads) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/302c6ee0-629f-453b-9024-bad1f8d7be36/threads.png?v=1723156164613" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://threads.net/<%- threads.name %>"> <%- threads.name %></a>
</div>
<% } %>
</div>
</div>
</p>
<div>
</div>
</div>
<div style="display:none;">
<div class="video-pill-buttons">
<div title="<%=engagement.likes.toLocaleString()%> Likes">
<i class="fa-light fa-thumbs-up"></i>
<%=convert(engagement.likes)%>
</div>
<div title="<%=engagement.dislikes.toLocaleString()%> Dislikes">
<i class="fa-light fa-thumbs-down"></i> <%=convert(engagement.dislikes)%>
</div>
<div>
<a title="Download this Video :3" style="color:var(--text-color);text-decoration: " href="/download?v=<%=inv_vid.videoId%>">
<i class="fa-light fa-download"></i>
Download
</a>
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('Audio)')) { %>
<a title="Encryption duh" style="color:var(--text-color);text-decoration: none;" href="/encryption?v=<%=inv_vid.videoId%>">
<i class="fa-light fa-shield"></i>
Encryption
</a>
<% }%><% }%>
<% if (video?.Channel.Name.endsWith(' - Topic') || inv_vid.title.endsWith('Audio)')) { %>
<% if (video?.Channel.Name.endsWith(' - Topic') || inv_vid.title.endsWith('Audio)')) { %>
<a title="open this song in poketube music player :3" style="color:var(--text-color);text-decoration: none;" href="/music?v=<%=inv_vid.videoId%>">
<i class="fa-light fa-music"></i>
Open In Music Player
</a>
<% }%>
<% }%>
</div>
</div>
</div>
</div>
<div style="display:none;">
</div>
<% if(inv.error) { %>
<p style="text-align: center">
<%- inv.error %>
<% if(inv.errorBacktrace) { %>
<br>Backtrace: <br>
<span class="description" style="background: red;display: flex;font-family: monospace, mono;font-size: 15px;margin-top: 3px;margin-bottom: 1em;border-radius: 1em;padding: 4px;">
<%- inv.errorBacktrace %>
</span>
<a href="https://github.com/iv-org/invidious/issues/new/choose">Report this issue</a>
</p>
<% } %>
<% } %>
<% if (inv.comments) { %>
<div class="comments">
<div class="comments-class-or-something-i-cant-find-a-name-lol">
<a id="comments-container"></a>
<div style="text-align: center;margin-bottom: .5em;">
<h5 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);white-space:yes;font-stretch: ultra-expanded;margin-bottom: 11px;margin-top: 6px;padding-top: 10px;">
YouTube Comments <span style="font-family: inter;font-weight: 900;text-transform: lowercase;margin: 1px;">- <% if (!isNaN(inv.commentCount)) { %> <%= inv.commentCount.toLocaleString() %> <% } else { %> 0 <% } %> Comments </span>
</h5>
<p style="padding: 0;margin: 0;font-family: 'PokeTube flex';margin-bottom: 10px;font-weight: 700;font-stretch: ultra-expanded;" class="loaded">
Top Comments of this video!! :3
</p>
</div>
<% inv.comments.forEach(x =>{ %><div class="fade-in<%- x.commentId %><%- btoa(x.commentId) %>"><div class="_ comment_<%- x.commentId %><%- btoa(btoa(x.commentId)) %>"style="padding:10px"><div class="comment-list left-padding"style="background:#333;padding-top:1px;padding:10px;border-radius:30px;padding-top:0"><div class="d-flex justify-content-between single-comment"style="padding-top:none"><div class="d-flex justify-content-between user"><div class="desc"><h5 style="display:flex;margin-top:7px;padding-top:10px"><div class="thumb"><a href="/channel?id=<%- x.authorId%>@youtube.com"style="width:40px;height:40px"class="avatar"><img loading="lazy"src="<%- media_proxy_url %>/proxy?url=<%= x.authorThumbnails[0].url.replace("https://yt3.ggpht.com/", "https://vid.puffyan.us/ggpht/") %>"></a></div><% if (!x.authorIsChannelOwner) { %><p class="comments-author"><a href="/channel?id=<%- x.authorId%>"style="color:var(--text-color);text-decoration:none"><%- x.author%><% if (x.verified) { %><i class="icon ion ion-md-checkmark-circle"></i><% } %><p class="date-publish"><%- x.publishedText %></p></a></p><% } %><% if (x.authorIsChannelOwner) { %><p class="comments-author owner"><a href="/channel?id=<%- x.authorId%>@youtube.com"style="color:var(--text-color);text-decoration:none"><%- x.author%><% if (x.verified) { %><i class="icon ion ion-md-checkmark-circle"></i><% } %><p class="date-publish"><%- x.publishedText %></p></a><% } %></h5><p class="comment"style="font-weight:700"><%- x.contentHtml.replace(/\n/g, "<br>"); %><br><br><% if (x.likeCount === 0) { %><i class="fa-light fa-thumbs-up"></i> | <i class="fa-light fa-thumbs-down"></i><% } else { %><i class="fa-light fa-thumbs-up"></i> <%= convert(x.likeCount) %> | <i class="fa-light fa-thumbs-down"></i><% } %><% if(x.creatorHeart) { %> <i class="icon creator-heart-small-container ion-ios-heart"style="color:#ffabcc"title="<%= x.creatorHeart.creatorName%> marked it with a ❤ owo"></i><% } %></div></div></div></div></div></div><% }) %>
<center>
<a href="#top">Go To Top</a>
</center>
</div>
</div>
<% } %>
<% if(!inv.comments) { %>
</div>
<% } %>
<% if(inv.comments) { %>
</div>
<% } %>
<div class="recommended-list" align="center">
<% if (universe) { %>
<% if (k.Video.Channel.Name == "7clouds") { %>
<div class="video-title t" style="font-family: 'Edo SZ', sans-serif !important;font-weight:bold;line-break: auto;max-width: max-content;margin: 0;margin-bottom: 0;padding: 0;"
<% } %>
<% if (k.Video.Channel.Name !== "7clouds") { %>
<div class="video-title t" style="font-family:inter;font-weight:bold;line-break: auto;max-width: max-content;margin: 0;margin-bottom: 0;padding: 0;"
<% } %>
<% if (inv_vid?.title !== k.Video.Title) { %>
title="Non-Translated title : <%=inv_vid.title%>"
<% } %>
> <%-k.Video.Title.replace(/\/channel\//g, "/channel?id=").replace(/https:\/\/youtube.com/g, ""); %>
</div>
<div> <i class="fa-light fa-thumbs-up"></i> <%=convert(engagement.likes)%> || <i class="fa-light fa-thumbs-down"></i> <%=convert(engagement.dislikes)%> </div>
<% } %>
<div style="text-align: left;" class="auto-play">
<label title="autoplay the next video" for="continue">AutoPlay:</label>
<input title="autoplay the next video" name="continue" id="continue" type="checkbox" >
</div>
<div style="text-align: right;margin-top: -2.2em;width: 1em; margin-left: auto; margin-right: 5px;" >
<a title="Upload content :3" href="/video/upload">
<i class="fa-light fa-circle-plus"></i>
</a>
</div>
<% if (!f) { %>
<div class="tags rec" style="margin-left:auto">
<div class="tag" style="background:none">
Recommended Videos
</div>
</div>
<% } %>
<% if (f) { %>
<div class="tags rec" >
<a style="color:#fff" class="tag" href="/watch?v=<%= inv_vid.videoId %>">
Recommended Videos
</a>
<div style="background:var(--chip-background-hover)" class="tag">
Uploaded by <%=k.Video.Channel.Name%>
</div>
</div>
<% } %>
<% if (!r) { %>
<% if (inv_vid.recommendedVideos.length > 1) { %>
<div>
</div>
<% } %>
<% if (!f) { %>
<% if (inv_vid.recommendedVideos) { %>
<%
const musicChannels = new Set();
inv_vid?.recommendedVideos.forEach(video => {
if (video.title.toLowerCase().includes("official video") || video.title.toLowerCase().includes("official music video") || video.title.toLowerCase().includes("official audio")) {
musicChannels.add(video.authorId);
}
});
%>
<% inv_vid?.recommendedVideos.forEach(x => { %>
<div class="fade-in video" data-channel="<%= x.authorId %>">
<% if (!optout) { %>
<a class="thumbnail" href="/watch?v=<%= x.videoId %>" style="background-image:url(<%- media_proxy_url %>/proxy?url=https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw);border-radius:9.5px" alt="<%= x.Title %>">
<span class="video-length"><%- turntomins(x.lengthSeconds) || "LIVE"%></span>
<% } %>
<% if (optout) { %>
<a class="thumbnail" href="/watch?v=<%= x.videoId %>&m=f" style="background-image:url(<%- media_proxy_url %>/proxy?url=https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw);border-radius:9.5px" alt="<%= x.Title %>">
<span class="video-length"><%- x.duration || "LIVE"%></span>
<% } %>
</a>
<div class="info">
<% if (!optout) { %>
<a class="max-lines-2 title" href="/watch?v=<%= x.videoId %>" style="font-stretch:ultra-expanded;font-weight:850" title="<%= x.title %>">
<%= x.title %>
</a>
<% } %>
<% if (optout) { %>
<a class="max-lines-2 title" href="/watch?v=<%= x.videoId %>&m=f" style="font-stretch:100%;font-weight:800" title="<%= x.title %>">
<%= x.title %>
</a>
<% } %>
<div>
<a class="max-lines-2" href="/channel?id=<%= x.authorId %>@youtube.com" style="-webkit-line-clamp:1;width:12em;word-wrap:break-word">
<span>
<%= x.author %>
<% if (x?.authorVerified) { %>
<% if (musicChannels.has(x.authorId)) { %>
<i class="fa-light fa-music-note" style="margin-left: 0em;" title="verified artist channel"></i>
<% } else { %>
<i class="icon ion ion-md-checkmark-circle" style="margin-left: 0em;" title="verified channel"></i>
<% } %>
<% } %>
</span>
</a>
<div class="video-views">
<%= convert(x.viewCount) %> views
</div>
</div>
</div>
</div>
<% }) %>
<% } %>
<% } %>
<% if (!inv_vid.recommendedVideos) { %>
<p> oops </p>
<% } %>
<% if (f) { %>
<% channel_uploads.latestVideos.forEach(x => { %>
<div class="fade-in video">
<% if (!optout) { %><a class="thumbnail" href="/watch?v=<%= x.videoId %>" style="background-image:url(<%- media_proxy_url %>/proxy?url=https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw);border-radius:9.5px" alt="<%= x.Title %>"><span class="video-length"><%- turntomins(x.lengthSeconds) || "LIVE"%></span><% } %><% if (optout) { %><a class="thumbnail"href="/watch?v=<%= x.videoId %>&m=f"style="background-image:url(<%- media_proxy_url %>/proxy?url=https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw);border-radius:9.5px"alt="<%= x.Title %>"><span class="video-length"><%- x.duration || "LIVE"%></span><% } %></a>
<div class="info">
<% if (!optout) { %>
<a class="max-lines-2 title" href="/watch?v=<%= x.videoId %>" style="font-stretch:ultra-expanded;font-weight:850" title="<%= x.Title %>">
<%= x.title %>
</a>
<% } %>
<% if (optout) { %>
<a class="max-lines-2 title" href="/watch?v=<%= x.videoId %>&m=f" style="font-stretch:100%;font-weight:800" title="<%= x.Title %>">
<%= x.title %>
</a>
<% } %>
<div>
<a class="max-lines-2" href="/channel?id=<%= x.authorId %>@youtube.com" style="-webkit-line-clamp:1;width:12em;word-wrap:break-word">
<%=x.author %>
</a>
<div class="video-views">
<%= convert(x.viewCount) %> views
</div>
</div>
</div>
</div>
<% }) %>
<% } %>
<% } %>
<% if (lyrics) { %>
<% if (r === "f") { %>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<div>
<a href="/watch?v=<%=inv_vid.videoId%>">See the Recommended videos instead</a> - <a href="https://codeberg.org/Ashley/poketube/issues">Report wrong lyrics qwq</a>
</div>
<div align="center"> <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<h1 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);;white-space:yes;" align="center">
Lyrics
</h1>
<p>
See how our lyrics search works:<a href="https://codeberg.org/Ashley/poketube/blob/main/src/lyrics.js">Here</a>
</p>
<p style="color: white;">
<p style=color:var(--text-color)>
<%-lyrics%>
</p>
<% } %>
<% } %>
<% if (lyrics && !r) { %>
<div style="font-family:Inter,sans-serif;;white-space:yes;" align="center">
<% if (optout) { %>
<a href="/watch?v=<%=inv_vid.videoId%>&r=f">Lyrics (Wow)</a>
<% } %>
<% if (!optout) { %>
<a href="/watch?v=<%=inv_vid.videoId%>&r=f">Lyrics (Wow)</a>
<% } %>
</div>
<% } %>
</div>
</div>
<!-- SCRIPTS -->
<!-- AUTOPLAY -->
<script>
function removeParam(paramName) {
let searchParams = new URLSearchParams(window.location.search);
searchParams.delete(paramName);
if (history.replaceState) {
let searchString = searchParams.toString().length > 0 ? '?' + searchParams.toString() : '';
let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + searchString + window.location.hash;
history.replaceState(null, '', newUrl);
}
}
<% if (Array.isArray(inv_vid.recommendedVideos) && inv_vid.recommendedVideos.length > 1) { %>
let checkbox = document.getElementById("continue");
checkbox.addEventListener('change', function(e) {
if (checkbox.checked) {
console.log("[AUTOPLAY] enabled");
document.getElementById('video').addEventListener('ended', autoplaynextvideo, false);
let url = window.location.hostname + "/watch?v=<%- inv_vid?.recommendedVideos[0]?.videoId %>";
function autoplaynextvideo(e) {
location.href = "/watch?v=<%- inv_vid?.recommendedVideos[0]?.videoId%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + inv_vid?.recommendedVideos[0].videoId) %>";
}
}
if (/[?&]autoplay=/.test(location.search)) {
if (!checkbox.checked) {
removeParam("autoplay");
}
}
if (/[?&]autoplay=/.test(location.search)) {
if (checkbox.checked) {
fetch("https://" + window.location.hostname + "/watch?v=<%- inv_vid?.recommendedVideos[0].videoId%>").then(() => {})
}
}
});
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for (let registration of registrations) {
registration.unregister();
}
});
if ('caches' in window) {
caches.keys().then(function(cacheNames) {
cacheNames.forEach(function(cacheName) {
caches.delete(cacheName);
});
});
}
}
if (/[?&]autoplay=/.test(location.search)) {
checkbox.checked = true;
console.log("[AUTOPLAY] enabled");
let url = window.location.hostname + "/watch?v=<%- inv_vid?.recommendedVideos[0].videoId%>";
document.body.style.cursor = "wait"; // set cursor to "wait" before the fetch request starts
fetch(url)
.then(response => response.json())
.then(data => {
// do something with the data
document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
})
.catch(error => {
console.error(error);
document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
});
document.getElementById('video').addEventListener('ended', autoplaynextvideo, false);
if (/[?&]autoplay=/.test(location.search)) {
if (checkbox.checked) {
fetch("https://" + window.location.hostname + "/watch?v=<%- inv_vid?.recommendedVideos[0].videoId%>").then(() => {})
}
}
function autoplaynextvideo(e) {
location.href = "/watch?v=<%- inv_vid?.recommendedVideos[0].videoId%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + inv_vid?.recommendedVideos[0].videoId) %>";
}
}
<% } %>
</script>
<script>
function toggleTheaterMode() {
var videoPlayerContainer = document.querySelector('.video-player-container');
if (videoPlayerContainer.classList.contains('theatermodeon')) {
videoPlayerContainer.classList.remove('theatermodeon');
} else {
videoPlayerContainer.classList.add('theatermodeon');
}
var watchPage = document.querySelector('.watch-page');
if (watchPage.style.display === 'grid') {
watchPage.style.display = 'flex';
} else {
watchPage.style.display = 'grid';
}
}
const languageCode = localStorage.getItem("Language");
const regionCode = localStorage.getItem("Region");
const currentURL = location.href;
const urlParams = new URLSearchParams(window.location.search);
if (!urlParams.has('hl') && !urlParams.has('region') && languageCode && regionCode) {
location.href = currentURL + `&region=${regionCode}&hl=${languageCode}`;
}
let isMiddleButtonPressed = false;
// Function to change video speed
function changeVideoSpeed() {
if (isMiddleButtonPressed) {
video.playbackRate = 2; // Set the video speed to 2x
} else {
video.playbackRate = 1; // Set the video speed to 1x
}
}
// Event listener for mouse button press
document.addEventListener('mousedown', function (event) {
if (event.button === 1) {
isMiddleButtonPressed = true;
changeVideoSpeed();
}
});
// Event listener for mouse button release
document.addEventListener('mouseup', function (event) {
if (event.button === 1) {
isMiddleButtonPressed = false;
changeVideoSpeed();
}
});
var anchor = document.getElementById("sub");
// Check if there's a user ID in localStorage
var userID = localStorage.getItem("UserID");
if (userID) {
// If user ID exists in localStorage, set the href attribute
anchor.href = `/api/set-channel-subs?ID=${userID}&channelName=<%=k.Video.Channel.Name%>&avatar=<%- media_proxy_url %>/proxy?url=<%= k.Video.Channel.Avatar[1].$t %>&channelID=<%=video?.Channel.id || k.Video.Channel.id %>`;
} else {
anchor.href = "/account-create"
}
</script>
<script id="video" type="application/json"><%- JSON.stringify(inv_vid) %></script><script id="comments" type="application/json"><%- JSON.stringify(inv.comments) %></script>
<!-- Ambient Mode, for Poke -->
<% if(IsOldWindows) { %>
<script>
console.error("[AMBIENT MODE] error_device_not_supported")
</script>
<% } %>
<% if(!IsOldWindows) { %>
<script>
const AMvideo = document.getElementById("video")
const oddCanvas = document.getElementById("ambient-canvas-1")
const evenCanvas = document.getElementById("ambient-canvas-2")
const oddCtx = oddCanvas.getContext("2d")
const evenCtx = evenCanvas.getContext("2d")
const frameIntervalMs = 998
const canvasOpacity = "0.4"
let intervalId
let oddFrame = true
let numWorkers = navigator.hardwareConcurrency || 4
let workers = []
const drawFrame = (workerId) => {
if (workers[workerId].oddFrame) {
workers[workerId].ctx.drawImage(AMvideo, 0, 0, workers[workerId].canvas.width, workers[workerId].canvas.height)
transitionToOddCanvas(workerId)
} else {
workers[workerId].ctx.drawImage(AMvideo, 0, 0, workers[workerId].canvas.width, workers[workerId].canvas.height)
transitionToEvenCanvas(workerId)
}
workers[workerId].oddFrame = !workers[workerId].oddFrame
};
const transitionToOddCanvas = (workerId) => {
workers[workerId].canvas.style.opacity = canvasOpacity
workers[(workerId + 1) % numWorkers].canvas.style.opacity = "0"
}
const transitionToEvenCanvas = (workerId) => {
workers[workerId].canvas.style.opacity = canvasOpacity
workers[(workerId - 1 + numWorkers) % numWorkers].canvas.style.opacity = "0"
}
const drawStart = () => {
for (let i = 0; i < numWorkers; i++) {
workers[i] = {
canvas: i % 2 === 0 ? oddCanvas : evenCanvas,
ctx: i % 2 === 0 ? oddCtx : evenCtx,
oddFrame: i % 2 === 0
}
workers[i].canvas.style.transition = `opacity ${frameIntervalMs / numWorkers}ms`
intervalId = window.setInterval(() => drawFrame(i), frameIntervalMs / numWorkers)
}
}
const drawPause = () => {
if (intervalId) window.clearInterval(intervalId)
}
const init = () => {
// Fixes an issue where Firefox/Chromium fails to load ambient mode and doesn't load it.
video.pause(); video.play();
// DO NOT REMOVE
// Check if ambient mode should load
if (numWorkers < 2 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
return;
}
AMvideo.addEventListener("play", drawStart, false)
AMvideo.addEventListener("pause", drawPause, false)
AMvideo.addEventListener("ended", drawPause, false)
}
const cleanup = () => {
AMvideo.removeEventListener("play", drawStart)
AMvideo.removeEventListener("pause", drawPause)
AMvideo.removeEventListener("ended", drawPause)
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;
transform: scale(1.1);
z-index: -1;
}
.ambient-canvas {
filter: blur(90px); /* its the default blur lol */
}
@media (min-height: 767px) {
.ambient-canvas {
filter: blur(110px);
}
}
@media (min-height: 1079px) {
.ambient-canvas {
filter: blur(120px);
}
}
@media (min-height: 1439px) {
.ambient-canvas {
filter: blur(150px);
}
}
@media (min-height: 2159px) {
.ambient-canvas {
filter: blur(200px);
}
}
</style>
<% } %>
<!-- BUNDLE VERSION 02.09.2024 -->
<!-- BUNDLE VERSION 02.09.2024 -->
<!-- BUNDLE VERSION 02.09.2024 -->
<!-- BUNDLE VERSION 02.09.2024 -->
<!-- BUNDLE --><script src="/static/app.bundle.js?version=02.09.2024&bundledate=020924_0143ab93_videojs81563605" > </script><!-- BUNDLE -->
<!-- BUNDLE VERSION 02.09.2024 -->
<!-- BUNDLE VERSION 02.09.2024 -->
<!-- BUNDLE VERSION 02.09.2024 -->
<!-- BUNDLE VERSION 02.09.2024 -->
<% if(secure) { %>
<% if(!dnt_val) { %>
<!-- matomo -->
<noscript><p><img src="//data.poketube.fun/matomo.php?idsite=2&amp;rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
<% } %> <% } %>
<style> img.emoji {height: 1em;width: 1em;margin: 0 .05em 0 .1em;vertical-align: -0.1em;}</style>
<script>
window.GLOBAL_ENV = {
API_ENDPOINT_INVID:"https://invid-api.poketube.fun/api/v1",
API_ENDPOINT_INNER:"https://inner-api.poketube.fun/api/",
METRICS_URL:"<%=t%>t",
PROXY_URL_VIDEO:"<%=u%>",
PROXY_URL:"<%- proxyurl %>",
YOUTUBEI_URL:"https://www.youtube.com/youtubei/v1",
POKETUBE_APIKEY:"AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8"
}
</script>
<!-- SCRIPTS END -->
</div>
</ptd-app-ejs>
</body>
</html>
<% } %>
<% if (isMobile) { %>
<% if (isMobile) { %>
<!--
This Source Code Form is subject to the terms of the GNU General Public License:
Copyright (C) 2021-2024 POKETUBE (https://codeberg.org/Ashley/poketube)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/.
-->
<!DOCTYPE html>
<html class="poketube_mobile_layout">
<% if (e === false) { %> <!-- if ?e=false,dont show up the meta tags -->
<% } %>
<% if (!e) { %>
<meta content="<%=inv_vid.title%>" name=title>
<meta content="<%=color%>" name="theme-color">
<meta content="<%= video?.Channel?.Name || k.Video.Channel.Name%>" name=twitter:author>
<meta content=@youtube name=twitter:site>
<meta content="https://poketube.fun/watch?v=<%=inv_vid.videoId%>" name=twitter:url>
<meta content="<%=inv_vid.title%> - PokeTube" name=twitter:title>
<meta content="mobile this video by <%= video?.Channel?.Name || k.Video.Channel.Name%> On PokeTube. The YouTube front-end that doesnt track you!" property=twitter:description>
<meta content="https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg" property=og:image>
<meta content=summary_large_image name=twitter:card>
<link href="https://poketube.fun/watch?v=<%=inv_vid.videoId%>" itemprop=url>
<% } %> <!-- close the } -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href=/css/yt-ukraine.svg?v=6 rel=icon>
<title> <%=inv_vid.title%> | PokeTube Mobile</title>
<link href="/css/mobile.css?v=2" rel=stylesheet>
<link href="/css/app.main.css?v=44600" rel=stylesheet>
<link href="<%- proxyurl %>/https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.css" rel=stylesheet>
<link href=<%- proxyurl %>/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css rel=stylesheet>
<style>
a[data-onclick="jump_to_time"] {
background: linear-gradient(to right, #8a2387, #e94057, #f27121);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
a.class:hover {
text-decoration:underline;
font-weight:bold
}
.video a {
text-decoration:none !important;
}
summary{
color:gray;
}
summary:hover{
color:white;
}
:visited {
color: var(--text-link-visited)
}
#continue {
max-width: 14px;
max-height: 14px;
}
a {
color: var(--text-link)
}
.comment-mini:hover {
background:#3f3f3f !important;
}
</style>
<% if (Array.isArray( !inv.comments)) { %>
<style>
#desc-container {
margin-top: -14.9em;
}
#more-button-container{
margin-top: -14.9em;
}
</style>
<% } %>
<style>
.video-player-container {
position: sticky;
z-index: 1;
}
.player {
border-radius: 6px;
}
.box-shadow-0em {
box-shadow: 0em;
}
<% if (lightOrDark(color) == "dark") { %>
#shadow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 6px;
box-shadow: 0 13em 14em <%=color2%>;
filter: blur(5px);
opacity: 1;
z-index: -1;
}
<% } %>
<% if (lightOrDark(color) == "light") { %>
#shadow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 6px;
box-shadow: 0 13em 14em <%=color2%>;
filter: blur(5px);
opacity: 1;
z-index: -1;
}
<% } %>
</style>
<style>body, html { margin: 0; padding: 0; } * { font-family: ubuntu; color:#fff } .player { background-color: #000 !important; display: grid; grid-template-columns: 1fr min-content; grid-template-rows: max-content 1fr max-content max-content max-content; gap: 0 0; width: 100%; /* height: 100%; */ aspect-ratio: 16 / 9; } .player * { color: #fff; } .player.embed, video.embed { position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .player * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .player > video { position: relative; width: 100%; height: 100%; z-index: 0; grid-area: 1 / 1 / 6 / 3; } .player.hide-controls > .player-title, .player.hide-controls > .player-controls, .player.hide-controls > .player-playback-bar-container, .player.hide-controls > .player-menu { display: none !important; } .player-controls { background-color: #0007; display: flex; justify-content: center; align-items: center; z-index: 1; grid-area: 1 / 1 / 6 / 3; } .player-button { width: 96px; height: 96px; font-size: 90px; text-align: center; line-height: 48px; } .player-tiny-button { width: 40px; font-size: 20px; text-align: center; } .player-tiny-button > i { color: #ddd; } .player-button, .player-button * { color: #dddddd !important; text-decoration: none; } .player-button > i { min-width: 48px; } .player-button:hover, .player-button:hover * { color: #fff !important; } .player-playback-bar { transition: width linear 100ms; } .player-playback-bar-container { grid-area: 4 / 1 / 5 / 3; display: flex; column-gap: 8px; justify-content: center; align-items: center; height: 8px; transition: height linear 100ms; width: 100%; z-index: 2; margin-bottom: 10px; } .player-playback-bar-bg { background-color: #fff3 !important; width: 100%; height: 100%; z-index: 2; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } .player-playback-bar-bg > * { grid-area: 1 / 1 / 2 / 2; } .player-playback-bar-buffer { background-color: #fffa !important; height: 100%; width: 0; z-index: 3; } .player-playback-bar-fg { background-color: #f00 !important; height: 100%; width: 0; z-index: 4; } .player-buffering { grid-area: 1 / 1 / 6 / 3; z-index: 1; display: flex; justify-content: center; align-items: center; } .player-buffering-spinner { width: 80px; height: 80px; }</style>
<body>
<div class="app" style="color:#fff;margin-top: 0;">
<nav>
<div class="left"><a class="class" href="/" style="font-family:Inter,sans-serif;color:#fff"> <img style="width: 8.5em;display: block;margin-left: -1.5em;margin-right: auto;" src="/css/logo-poke.svg"> </a>
</div>
<div class="middle">
</div>
<div class="right">
<a href="/app?tab=search" style="position: absolute;right: 0;margin: 2em;" ><i class="fa-light fa-search"></i></a>
</div>
<a name="top"></a>
</nav>
<div class="mobile-page">
<div class="primary" >
<div class="video-player-container" style="background-color:#000">
<video style="border-radius: 16px;" class="player" id="video" autoplay controls poster="<%- proxyurl %>/https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg?v=607ddcd4">
<% if (!qua) { %>
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
<% } %>
<% if (qua === "medium") { %>
<source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
<% } %>
<% if (Array.isArray( inv_vid.captions)) { %>
<% inv_vid.captions?.forEach(x => { %>
<track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= x.label %>" label="<%= x.label.replace("United States","Simplified - USA") %>" kind="subtitles">
<img src="https://t.poketube.fun/t/rep.gif?v=<%=btoa(inv_vid.videoId)%>&h=<%= x.label %>" id="subtitle_usage_rate" style="border:0;width: 0;visibility: hidden;">
<% }) %>
<% } %>
<% if (!Array.isArray( inv_vid.captions)) { %>
<track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= %>" label="<%= video.Subtitles.Subtitle.language.replace("United States","Simplified - USA") %>" kind="subtitles">
<img loading="lazy" src="https://t.poketube.fun/t/rep.gif?v=<%=btoa(inv_vid.videoId)%>&h=<%= video.Subtitles.Subtitle.language %>" id="subtitle_usage_rate" style="border:0;width: 0;visibility: hidden;">
<% } %>
</video>
<div id="shadow"></div>
</div>
<div class="video-info" style="position: sticky;z-index: 1;">
<div style="linear-gradient(135deg,#f97794 10%,#623aa2 100%,#8e6f7e 100%);border-radius: 10px;margin-bottom: 10px;padding-bottom: 1em;padding-top: 0.3em;">
<% if (inv_vid?.title.includes("voice training")) { %>
<% if (inv_vid?.title.includes("voice tutorial")) { %>
<a href="https://google.com">quick escape</a> <br>
<% } %>
<% } %>
<div class="video-title" style="padding: 10px;background: #0009;margin-bottom: 6px;margin-left: 6px;margin-right: 12px;border-radius: 15px;margin-top: 4px;font-family: poketube flex;font-weight: 800;font-stretch: ultra-expanded;"><%=inv_vid.title%> <br>
<a id="language-button" href="#desc-container" style="color: pink;
margin: 0;
font-size: 13px;margin:0;padding:0;white-space: nowrap;
" class="switch"><%=engagement.viewCount.toLocaleString()%> views <%=date%> <ptd-custom-more>...more</ptd-custom-more>
</a>
</div>
<div class="channel-info" style="border: none;padding: 10px;background: #0009;border-radius: 15px;margin-left: 6px;margin-right: 12px;" name="chnl">
<a class="avatar">
<img src=" <%- proxyurl %>/<%= k.Video.Channel.Avatar[1].$t %>">
</a>
<div class="name" style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);">
<div>
<a href="/channel?id=<%=k.Video.Channel.id%>" style="color:#fff;max-width: 7.8em;" class="max-lines-1">
<%=k.Video.Channel.Name%></a>
<div class="subscriber-count" style="write-space:nowraap">
<%= k.Video.Channel.subscriberCount.replace("subscribers", "Subs") %>
</div>
</div>
</div>
<button class="subscribe-button" ><a style="color:#fff" id="sub">Suscribe</a></button>
</div>
<div>
<div>
<div class="ptnewbuttons" style=" display: flex;
white-space: nowrap;
overflow: auto;
margin-bottom: 6px;
padding: 4px;
margin-right: 0.99em;
">
<div class="new-button" style="height: 2.3em">
<div class="pill-button" style="margin-right: 7.5px;">
<i class="fa-light fa-thumbs-up"></i>
<%=convert(engagement.likes)%>
</div>
<div class = "vertical"></div>
<div style="margin-left: -7.5px;" title="<%=engagement.dislikes.toLocaleString()%> Dislikes">
<div class="pill-button">
<i class="fa-light fa-thumbs-down"></i> <%=convert(engagement.dislikes)%>
</div> </div>
</div>
<% if (Array.isArray( inv.comments)) { %>
<a class="new-button" title="Comments " style="color:#fff;text-decoration: none;margin-right: 0; " href="#comments-container">
<div class="pill-button">
<i class="fa-light fa-comments"></i>
<%- convert(inv.commentCount) %> Comments
</div>
</a>
<% }%>
<a class="new-button" title="Download this Video :3" style="color:#fff;text-decoration: none;margin-right: 0; " href="/download?v=<%=inv_vid.videoId%>">
<div class="pill-button">
<i class="fa-light fa-download"></i>
Download
</div>
</a>
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('Audio)')) { %>
<% if (support != undefined) { %>
<a class="new-button" title="Support the Creator of the video!" style="color:#fff;text-decoration: none;margin-right: 0; " href="https://www.patreon.com/join/<%- support.name %>">
<div class="pill-button">
<i class="fa-light fa-badge-dollar"></i>
Support
</div>
</a>
<% }%> <% }%>
<% }%>
<a class="new-button" title="My Account" style="color:#fff;text-decoration: none;margin-right: 0; " href="/account-create">
<div class="pill-button">
<i class="fa-light fa-user"></i>
My Account
</div>
</a>
<a class="new-button" style="color:#fff" onclick="share()">
<div class="pill-button">
<i class="fa-light fa-share"></i>
Share
</div>
</a>
<a class="new-button" style="color:#fff" href="https://redirect.poketube.fun/watch?v=<%=inv_vid.videoId%>">
<div class="pill-button">
<i class="fa-light fa-rocket"></i>
Redirect
</div>
</a>
</a>
</div>
<div class="video-info-bar" style="font-family:'Inter';">
</div>
<div class="fromtheweb-inner" style="margin-left: 8px;margin-right: 12px;margin-bottom:6px;">
<div style="display: flex;gap: 3px;">
<% if (twitter) { %>
<div style="background: #000;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/8473b88f-36a4-437f-8c14-fb9e38a623d9.image.png?v=1693424579898" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://twitter.com/<%- twitter.name %>"> @<%- twitter.name %></a>
</div>
<% } %>
<% if (discord) { %>
<div style="background: #000;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/34e2accb-41ec-4b10-a1e8-a0d647ea6e76.image.png" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://discord.gg/<%- discord.name %>"> /<%- discord.name %></a>
</div>
<% } %>
<% if (twitch) { %>
<div style="background: #000;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/d277ed96-59cd-44fe-a75a-56b3170fa634.image.png?v=1693429282139" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://twitch.tv/<%- twitch.name %>"> /<%- twitch.name %></a>
</div>
<% } %>
<% if (reddit) { %>
<div style="background: #000;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/3bea1171-8723-4719-b0ee-d98d1abbd174.image.png?v=1693429333706" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://reddit.com/r/<%- reddit.name %>"> r/<%- reddit.name %></a>
</div>
<% } %>
<% if (instagram) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/52704940-684c-41e8-b0de-cca642fa39f8.image.png?v=1693429793193" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://instagram.com/<%- instagram.name %>"> <%- instagram.name %></a>
</div>
<% } %>
<% if (!twitter) { %>
<% if (!discord) { %>
<% if (!reddit) { %>
<% if (!twitch) { %>
<% if (!instagram) { %>
<div style="margin-top: 10px;">
Nyo connections found ;_;
</div>
<% } %>
<% } %>
<% } %>
<% } %> <% } %>
</div>
<div id="desc-container">
<div class="backtotop">
<hr class="no-display" />
<a href="#top"><b>&#9650;</b></a>
</div>
<div id="desc" class="rounded-corners">
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;"><hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;">
<div id="set-language" class="button">
</a>
</div>
<div id="descs" style="display: contents;">
<h3 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);;;white-space:yes"> Description
<a href="#top" class="close" style="color: #fff;"></a>
</h3>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<div> <div style="
display: flex;
flex-flow: column;
background: #272727;
padding: 5px;
height: 10em;
border-radius: 11px;
">
<div class="video-title" style="font-family: 'PokeTube Flex';margin-bottom: -5px;text-align:center;font-stretch: extra-expanded;font-weight: 1000;" ><%=inv_vid.title%></div>
<% if (inv_vid.genre === "Music") { %>
<span style="font-size: 13px;font-family: ubuntu;width:auto;text-align:center;"><i title="hq audio" class="fa-light fa-waveform-lines"></i>&nbsp;Lossless Audio </span>
<% } %>
</div>
<div style="display: flex;justify-content: center;margin-top: -5em;gap: 3em;">
<div style="text-align: center;font-size: x-large;margin: 9px;">
<p>
<%=convert(engagement.viewCount)%>
<br>
</p><p style="font-size: 17px;">Views</p>
</p>
</div>
<div style="text-align: center;font-size: x-large;margin: 9px;">
<p>
<%=convert(engagement.likes)%>
<br>
</p><p style="font-size: 17px;">Likes</p>
</p>
</div>
<div>
<div style="text-align: center;font-size: x-large;margin: 9px;">
<p>
<%=convert(engagement.dislikes)%>
<br>
</p><p style="font-size: 17px;">Dislikes</p>
</p>
</div>
</div>
</div>
<div>
<%
const likes = parseInt(engagement.likes) || 0;
const dislikes = parseInt(engagement.dislikes) || 0;
const total = likes + dislikes;
const likePercentage = total > 0 ? ((likes / total) * 100).toFixed(2) : 0;
const dislikePercentage = total > 0 ? ((dislikes / total) * 100).toFixed(2) : 0;
const getLikePercentageColor = (percentage) => {
if (percentage >= 80) {
return 'green';
} else if (percentage >= 50) {
return 'orange';
} else {
return 'red';
}
};
const getDislikePercentageColor = (percentage) => {
if (percentage >= 50) {
return 'red';
} else if (percentage >= 20) {
return 'orange';
} else {
return 'green';
}
};
const likeColor = getLikePercentageColor(likePercentage);
const dislikeColor = getDislikePercentageColor(dislikePercentage);
const userScore = (parseFloat(likePercentage) - parseFloat(dislikePercentage) / 2).toFixed(2);
const getUserScoreLabel = (score) => {
if (score >= 80) {
return 'Overwhelmingly Positive';
} else if (score >= 60) {
return 'Positive';
} else if (score >= 40) {
return 'Mixed';
} else if (score >= 20) {
return 'Negative';
} else {
return 'Overwhelmingly Negative';
}
};
const userScoreLabel = getUserScoreLabel(userScore);
const userScoreColor = userScore >= 80 ? 'green' : userScore >= 50 ? 'orange' : 'red';
%>
<div class="nerddd" style="background:#272727;padding: 5px;margin-top: 12px;border-radius: 11px;font-family: 'PokeTube Flex';font-stretch: extra-expanded;font-weight: 700;">
<%-String(channelurlfixer(inv_vid.descriptionHtml)).replace(/\n/g, " <br> ").replace(/twitter\.com/g, "twitter.com").replace(/reddit\.com/g, "redlib.matthew.science") %>
<div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">Rating! :3</div>
<br><span style="color: <%= likeColor %>;"><%= likePercentage %>%</span> of the users lieked the video!! <br>
<span style="color: <%= dislikeColor %>;"><%= dislikePercentage %>%</span> of the users dislieked the video!! <br>
User score: <span style="color: <%= userScoreColor %>;"><%= userScore %></span>- <%= userScoreLabel %><br><br>
</div>
<div style="background: #272727;margin-top:10px;border-radius: 11px;">
<div class="fromtheweb-outer" style="height: 7em;">
<div class="fromtheweb-inner" style="height: 2em;">
<div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">Connections</div>
<div style="display: flex;gap: 3px;">
<% if (twitter) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/8473b88f-36a4-437f-8c14-fb9e38a623d9.image.png?v=1693424579898" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://twitter.com/<%- twitter.name %>"> @<%- twitter.name %></a>
</div>
<% } %>
<% if (discord) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/34e2accb-41ec-4b10-a1e8-a0d647ea6e76.image.png" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://discord.gg/<%- discord.name %>"> /<%- discord.name %></a>
</div>
<% } %>
<% if (twitch) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/d277ed96-59cd-44fe-a75a-56b3170fa634.image.png?v=1693429282139" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://twitch.tv/<%- twitch.name %>"> /<%- twitch.name %></a>
</div>
<% } %>
<% if (reddit) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/3bea1171-8723-4719-b0ee-d98d1abbd174.image.png?v=1693429333706" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://reddit.com/r/<%- reddit.name %>"> r/<%- reddit.name %></a>
</div>
<% } %>
<% if (instagram) { %>
<div style="background: #0009;width: fit-content;padding: 5px;border-radius: 6px;margin-bottom: -15px;">
<img src="<%- proxyurl %>/https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/52704940-684c-41e8-b0de-cca642fa39f8.image.png?v=1693429793193" class="loaded" style="width: 22px;height: 23px;vertical-align: -7px;"><a style="margin: 1px;" href="https://instagram.com/<%- instagram.name %>"> <%- instagram.name %></a>
</div>
<% } %>
<% if (!twitter) { %>
<% if (!discord) { %>
<% if (!reddit) { %>
<% if (!twitch) { %>
<% if (!instagram) { %>
<div style="margin-top: 10px;">
Nyo connections found ;_;
</div>
<% } %>
<% } %>
<% } %>
<% } %> <% } %>
</div>
</div>
</div>
</div>
<div style="padding:10px;background: #272727;margin-top:10px;border-radius: 11px;">
<div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">Uploader</div>
<div class="channel-info" name="chnl" style="padding: 0;border: none;margin-bottom:8px">
<a href="/channel?id=<%=video?.Channel.id || k.Video.Channel.id%>" class="avatar">
<img src=" <%= k.Video.Channel.Avatar[1].$t %>">
</a>
<div class="name" style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);">
<div>
<a style="color:#fff" href="/channel?id=<%=k.Video.Channel.id%>" > <%=k.Video.Channel.Name%></a>
</div>
</div>
</div>
<div style="color:#fff;border:solid 0.5px gray;background: #0009;width: fit-content;padding: 5px;border-radius: 4px;height:2em">
<a href="/channel?id=<%=video?.Channel.id || k.Video.Channel.id%>" >
View Channel
</a> </div>
</div>
<% if (Array.isArray(inv_vid?.keywords)) { %>
<div class="video-title" style="background: #272727;color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: -10px;padding: 10px;border-top-left-radius: 11px;border-top-right-radius: 11px;">Tags</div>
<div class="tags" style="padding: 10px;background: #272727;margin-top: 10px;border-bottom-left-radius: 11px;border-bottom-right-radius:11px;">
<br>
<% inv_vid.keywords.forEach(x => { %>
<div class="tag">
<a href="/hashtag/<%=x %>" style="color:var(--text-color)">
<%=x %>
</a>
</div> <% }) %>
</div>
<% } %>
<style>
.nerddd {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* css-3 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
word-break: break-all;
white-space: normal;
}
</style>
<div class="nerddd" style="padding:10px;background: #272727;margin-top:10px;border-radius: 11px;">
<div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">Stats for 🤓 </div>
Video id : <%=inv_vid.videoId%> <br>
ImmersiveAmbientModecolor: <% if (lightOrDark(color) == "light") { %><%=color%> (color 1)<% } %><% if (lightOrDark(color) == "dark") { %> <%=color2%> (color 2) <% } %> <br>
Video Format :<% if (!qua) { %> 22 (720p) openh264 ( https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz <% } %>
<% if (qua === "medium") { %> 18 (320p) openh264 (https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz <% } %>
<% if (inv_vid.genre === "Music") { %>
<br> Audio Format: ALAC lossless (https://codeberg.org/Ashley/poke/src/branch/main/alac) Audio/ Flac<br>
<% } %>
<% if (inv_vid.genre !== "Music") { %>
<br> Audio Format: Opus - Normalized audio<br>
<% } %>
PokeTubeEncryptID: <%=sha384(inv_vid.videoId)%> <br>
<% if (isvidious) { %>
Proxy : <%= u.replace("https://","") %> - refresh the page to change the proxy location<br>
<% } %>
<% if (!isvidious) { %>
Proxy : tube-proxy.poketube.fun - refresh the page to change the proxy location<br>
<% } %>
Date : <%- Date.now() %> - <%- useragent.os.replace("Linux", "GNU/Linux") %> on <%- useragent.browser %> <br>
<% if (isvidious) { %>
Mystery text : <%=btoa(inv_vid.videoId + " i " + " lov " + " u " + "mobile "+ u.replace("https://","") ) %> <br>
<% } %>
<% if (!isvidious) { %>
Mystery text : <%=btoa(inv_vid.videoId + " i " + " lov " + " u " + "tube-proxy.poketube.fun" ) %> <br>
<% } %>
143 : true <br>
</div>
</div>
</div>
</div>
</div>
<div id="more-button-container">
<div class="backtotop">
<hr class="no-display" />
<a href="#top"><b>&#9650;</b></a>
</div>
<div id="more-button" class="rounded-corners">
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;"><hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;">
<div id="set-language" class="button">
</div>
<div id="more-buttons" style="display: contents;">
<h3 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);;;white-space:yes"> M O A R
<a href="#top" class="close" style="color: #fff;"></a> </h3>
<p style="padding: 0;margin: 0;font-family: Inter;">
More Epic options owo~
</p>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<div style="font-family:Inter,sans-serif;;white-space:yes;">
<a href="https://youtube.com/watch?v=<%=inv_vid.videoId%>">Open On YouTube</a> • <a href="/privacy">Privacy</a> • <a href="https://codeberg.org/Ashley/poketube/">Git</a>
<% if (optout) { %>
<% } %>
<% if (!optout) { %>
• <a href="/watch?v=<%=inv_vid.videoId%>&m=f">
Opt out of Metrics</a> (<a href="/privacy" style="color:#fff">Wut?</a>)
<% } %>
<% if (lyrics && !r) { %>
<% if (optout) { %>
<br> <br> <a href="/watch?v=<%=inv_vid.videoId%>&r=f"> Lyrics (Wow) </a>
<% } %>
<% if (!optout) { %>
<br> <br> <a href="/watch?v=<%=inv_vid.videoId%>&r=f" > Lyrics (Wow) </a>
<% } %>
<% } %>
<% } %>
<br> <br> <p><i class="fa-light fa-shield"></i> The Connection is secured with ECDSA with SHA-384 Signature Algorithm :3 <a href="/encryption?v=<%=inv_vid.videoId%>">Click here for encryption info</a><br>
</p>
</div> </div>
</div>
<% if (lyrics) { %>
<% if (r === "f") { %>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<p>
<a href="/watch?v=<%=inv_vid.videoId%>">See the Recommended videos instead</a> - <a href="https://codeberg.org/Ashley/poketube/issues">Report wrong lyrics qwq</a>
</p>
<div align="center"> <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<h1 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);;white-space:yes;" align="center">
Lyrics
</h1>
<p>
See how our lyrics search works:<a href="https://codeberg.org/Ashley/poketube/blob/main/src/lyrics.js">Here</a>
</p>
<p style="color: white;">
<p style=color:#fff>
<%-lyrics%>
</p>
<% } %>
<% } %>
</div>
</div>
<div id="comments-container">
<div class="backtotop">
<hr class="no-display" />
<a href="#top"><b>&#9650;</b></a>
</div>
<div id="comments" class="rounded-corners">
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;"><hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;">
<div id="set-language" class="button">
</a>
</div>
<div id="commentss" style="display: contents;">
<h3 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);;;white-space:yes"> Comments <a href="#top" class="close" style="color: #fff;"></a> </h3>
<p style="padding: 0;margin: 0;font-family: Inter;">
Top Comments :3
</p>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<% if (inv != "Disabled") { %>
<% if (!Array.isArray( inv.comments)) { %>
<p>
Comments couldnt load ;-; (<a href="https://codeberg.org/Ashley/poketube/issues/new">Report dis issue</a> or refresh the god damn page lol)
</p>
<% } %>
<% } %>
<% if (inv == "Disabled") { %>
<p>
Comments are disabled
</p>
<% } %>
<% if (Array.isArray( inv.comments)) { %>
<% inv.comments.forEach(x =>{ %>
<div class="<%- x.commentId %>" style="padding: 10px;">
<div class="comment-list left-padding" style="background: #333;padding-top: 1px;padding: 10px;border-radius: 30px;padding-top: 0;">
<div class="single-comment justify-content-between d-flex" style="padding-top: none;">
<div class="user justify-content-between d-flex">
<div class="desc">
<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;">
<img style="width: 50px;height: 50px;" loading="lazy" src="<%- media_proxy_url %>/proxy?url=<%= x.authorThumbnails[0].url.replace("https://yt3.ggpht.com/", "https://vid.puffyan.us/ggpht/") %>">
</a>
</div>
<% if (!x.authorIsChannelOwner) { %>
<p style="margin: 7px;font-family:inter;white-space: -moz-pre-wrap !important;white-space: -pre-wrap;white-space: -o-pre-wrap;white-space: pre-wrap;word-wrap: anywhere;white-space: -webkit-pre-wrap;word-break: break-all;white-space: normal;">
<a href="/channel?id=<%- x.authorId%>" style="color: #fff;text-decoration: none;" >
<%- x.author%> <% if (x.verified) { %>
<i class="icon ion ion-md-checkmark-circle"></i>
<% } %> <p style=" margin: 0;
margin-top: 12px; !important;
font-size: small; !important;
color: gray !important; white-space: nowrap;">
<%- x.publishedText %>
</p>
</a>
</p> <% } %>
<% if (x.authorIsChannelOwner) { %>
<p style="margin: 5px;font-family:inter;white-space: -moz-pre-wrap !important;white-space: -pre-wrap;white-space: -o-pre-wrap;white-space: pre-wrap;word-wrap: anywhere;white-space: -webkit-pre-wrap;word-break: break-all;white-space: normal;background: #4a4a4a;padding: 3px;border-radius: 6px;width: auto;height: 1.4em;justify-self: center; ">
<a href="/channel?id=<%- x.authorId%>" style="color: #fff;text-decoration: none;" >
<%- x.author%> <% if (x.verified) { %>
<i class="icon ion ion-md-checkmark-circle"></i>
<% } %> <p style=" margin: 0;
margin-top: 12px; !important;
font-size: small; !important;
color: gray !important; white-space: nowrap;">
<%- x.publishedText %>
</p>
</a>
<% } %>
</p>
</h5>
<p class="comment" style="font-weight: bold;">
<%- x.contentHtml %>
<span style=" white-space: nowrap;"> <i class="fa-light fa-thumbs-up"></i>
<%- convert(x.likeCount) %> | <i class="fa-light fa-thumbs-down"></i>
<% if(x.creatorHeart) { %>
<i class="icon ion-ios-heart creator-heart-small-container" title="<%= x.creatorHeart.creatorName%> marked it with a ❤ owo"></i>
</span>
<% } %>
</p>
</div>
</div>
</div>
</div>
</div>
<% }) %>
<% } %>
</div>
</div>
</div>
<div>
</div> </div>
<div class="secondary" style="padding-top: 0;">
<div class="recommended-list" style="color:#fff">
<div style="text-align: left;margin-top: 18px;" class="auto-play">
<label for="continue">AutoPlay:</label>
<input name="continue" id="continue" type="checkbox" >
<a href="https://codeberg.org/Ashley/poketube/issues/new">give feedback</a>
</div>
<% if (!r) { %>
<% if (!f) { %>
<% if (inv_vid.recommendedVideos) { %>
<% inv_vid?.recommendedVideos.forEach(x => { %>
<div class="fade-in video">
<% if (!optout) { %><a class="thumbnail" href="/watch?v=<%= x.videoId %>" style="background-image:url(<%- media_proxy_url %>/proxy?url=https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw);border-radius:9.5px" alt="<%= x.Title %>"><span class="video-length"><%- turntomins(x.lengthSeconds) || "LIVE"%></span><% } %><% if (optout) { %><a class="thumbnail"href="/watch?v=<%= x.videoId %>&m=f"style="background-image:url(<%- media_proxy_url %>/proxy?url=https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw);border-radius:9.5px"alt="<%= x.Title %>"><span class="video-length"><%- x.duration || "LIVE"%></span><% } %></a>
<div class="info">
<% if (!optout) { %>
<a class="max-lines-2 title" href="/watch?v=<%= x.videoId %>" style="font-stretch:ultra-expanded;font-weight:850" title="<%= x.Title %>">
<%= x.title %>
</a>
<% } %>
<% if (optout) { %>
<a class="max-lines-2 title" href="/watch?v=<%= x.videoId %>&m=f" style="font-stretch:100%;font-weight:800" title="<%= x.Title %>">
<%= x.title %>
</a>
<% } %>
<div>
<a class="max-lines-2" href="/channel?id=<%= x.authorId %>@youtube.com" style="-webkit-line-clamp:1;width:12em;word-wrap:break-word;color:#fff;">
<%=x.author %>
</a>
<div class="video-views">
</div>
</div>
</div>
</div>
<% }) %>
<% } %>
<% } %>
<% if (inv_vid.recommendedVideos.length < 1) { %>
<% channel_uploads.latestVideos.forEach(x => { %>
<div class="fade-in video">
<% if (!optout) { %><a class="thumbnail" href="/watch?v=<%= x.videoId %>" style="background-image:url(<%- media_proxy_url %>/proxy?url=https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw);border-radius:9.5px" alt="<%= x.Title %>"><span class="video-length"><%- turntomins(x.lengthSeconds) || "LIVE"%></span><% } %><% if (optout) { %><a class="thumbnail"href="/watch?v=<%= x.videoId %>&m=f"style="background-image:url(<%- media_proxy_url %>/proxy?url=https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw);border-radius:9.5px"alt="<%= x.Title %>"><span class="video-length"><%- x.duration || "LIVE"%></span><% } %></a>
<div class="info">
<% if (!optout) { %>
<a class="max-lines-2 title" href="/watch?v=<%= x.videoId %>" style="font-stretch:ultra-expanded;font-weight:850" title="<%= x.Title %>">
<%= x.title %>
</a>
<% } %>
<% if (optout) { %>
<a class="max-lines-2 title" href="/watch?v=<%= x.videoId %>&m=f" style="font-stretch:100%;font-weight:800" title="<%= x.Title %>">
<%= x.title %>
</a>
<% } %>
<div>
<a class="max-lines-2" href="/channel?id=<%= x.authorId %>@youtube.com" style="-webkit-line-clamp:1;width:12em;word-wrap:break-word;color:#fff">
<%=x.author %>
</a>
<div class="video-views">
</div>
</div>
</div>
</div>
<% }) %>
<% } %>
<% if (f) { %>
<% tj.Channel.Contents.ItemSection.ItemSection.Video.forEach(x => { %>
<div class="video">
<% if (!optout) { %>
<a href="/watch?v=<%= x.id %>" class="thumbnail" style="background-image: url('<%- proxyurl %>/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;" > <span class="video-length"><%=x.duration %></span>
<% } %>
<% if (optout) { %>
<a href="/watch?v=<%= x.id %>&m=f" class="thumbnail" style="background-image: url('<%- proxyurl %>/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;" > <span class="video-length"><%=x.duration %></span>
<% } %>
</a>
<div class="info">
<% if (!optout) { %>
<a href="/watch?v=<%= x.id %>" class="title max-lines-2"><%= x.Title %></a>
<% } %>
<% if (optout) { %>
<a href="/watch?v=<%= x.id %>&m=f" class="title max-lines-2"><%= x.Title %></a>
<% } %>
<div>
<a class="max-lines-2" style="color:#fff" href="/channel?id=<%= video?.Channel.id || k.Video.Channel.id%>"><%= video?.Channel?.Name || k.Video.Channel.Name %></a>
<div>
<%= x.uploadedAt %> </div>
</div>
</div>
</div>
<% }) %>
<% } %>
</div>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
/**
* @licstart The following is the entire license notice for the JavaScript
* code in this page.
*
* Copyright (C) 2021-2024 POKETUBE (https://codeberg.org/Ashley/poketube)
*
* The JavaScript code in this page is free software: you can redistribute
* it and/or modify it under the terms of the GNU General Public License
* (GNU GPL) as published by the Free Software Foundation, either version 3
* of the License, or (at your option) any later version. The code is
* distributed WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU GPL
* for more details.
*
* As additional permission under GNU GPL version 3 section 7, you may
* distribute non-source (e.g., minimized or compacted) forms of that code
* without the copy of the GNU GPL normally required by section 4, provided
* you include this license notice and a URL through which recipients can
* access the Corresponding Source.
*
* @licend The above is the entire license notice for the JavaScript code
* in this page.
*/
//--><!]]>
</script>
<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0-or-later
function share(){
if (navigator.share) {
navigator.share({
title: document.title,
text: "",
url: "https://" + window.location.hostname + "/<%=inv_vid.videoId%>?piwik_si=mobile_share"
})
.then(() => console.log('Successful share'))
.catch(error => console.log('Error sharing:', error));
}
}
// @license-end
</script>
<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0-or-later
function jumpToTime(e) {
e.preventDefault();
const link = e.target;
const video = document.getElementById('video');
const time = link.dataset.jumpTime;
video.currentTime = time;
window.location.hash = 'top'; // Add #video to the URL
setTimeout(() => {
history.replaceState(null, null, ' '); // Remove #video after 1 second
}, 250);
}
var cacheVersion = 1;
caches.delete('offline-cache' + cacheVersion)
// Handle click events for time-based links
const timeLinks = document.querySelectorAll('a[data-onclick="jump_to_time"]');
timeLinks.forEach(link => {
const href = link.getAttribute('href');
if (link.dataset.jumpTime && href && href.includes('&t=')) {
const params = new URLSearchParams(href.split('?')[1]);
const time = params.get('t');
if (time) {
link.dataset.jumpTime = time;
link.addEventListener('click', jumpToTime);
link.removeAttribute('href');
}
}
});
function removeParam(paramName) {
let searchParams = new URLSearchParams(window.location.search);
searchParams.delete(paramName);
if (history.replaceState) {
let searchString = searchParams.toString().length > 0 ? '?' + searchParams.toString() : '';
let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + searchString + window.location.hash;
history.replaceState(null, '', newUrl);
}
}
checkbox = document.getElementById("continue");
checkbox.addEventListener('change', function(e) {
if(checkbox.checked) {
console.log("[AUTOPLAY BETA] enabled")
document.getElementById('video').addEventListener('ended',autoplaynextvideo,false);
function autoplaynextvideo(e) {
location.href = "/watch?v=<%- inv_vid?.recommendedVideos[0].videoId%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + inv_vid?.recommendedVideos[0].videoId) %>"
}
}
if (/[?&]autoplay=/.test(location.search)) {
if(!checkbox.checked) {
removeParam("autoplay")
}
}
});
if (/[?&]autoplay=/.test(location.search)) {
checkbox.checked = true;
console.log("[AUTOPLAY BETA] enabled")
document.getElementById('video').addEventListener('ended',autoplaynextvideo,false);
function autoplaynextvideo(e) {
location.href = "/watch?v=<%- inv_vid?.recommendedVideos[0].videoId%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + inv_vid?.recommendedVideos[0].videoId) %>"
}
}
var anchor = document.getElementById("sub");
// Check if there's a user ID in localStorage
var userID = localStorage.getItem("UserID");
if (userID) {
// If user ID exists in localStorage, set the href attribute
anchor.href = `/api/set-channel-subs?ID=${userID}&channelName=<%=k.Video.Channel.Name%>&avatar=<%- proxyurl %>/<%= k.Video.Channel.Avatar[1].$t %>&channelID=<%=video?.Channel.id || k.Video.Channel.id %>`;
} else {
// If user ID doesn't exist in localStorage, you can handle it as needed
anchor.href = "/account-create"
// Optionally, you can set a default href or display an error message.
}
const aud = document.getElementById("aud");
const vid = document.getElementById("video");
// Save and resume video progress
const videoId = new URLSearchParams(window.location.search).get('v');
const localStorageKey = `progress-${videoId}`;
function saveProgress() {
console.log(`Saved progress @ ${video.currentTime}`)
localStorage.setItem(localStorageKey, video.currentTime);
}
function removeProgress() {
localStorage.removeItem(localStorageKey);
}
function resumeProgress() {
const progress = localStorage.getItem(localStorageKey);
if (progress) {
aud.currentTime = progress;
vid.currentTime = progress;
}
}
video.addEventListener('timeupdate', () => {
if (Math.floor(video.currentTime) % 1 === 0) {
saveProgress();
}
});
video.addEventListener('ended', () => {
removeProgress();
});
window.addEventListener('DOMContentLoaded', () => {
throw 1;
</script>
<noscript>
<style>
.auto-play{
display:none !important;
}
</style>
</noscript>
<% if (!optout) { %>
<script src="/static/data-mobile.js?v=506"></script>
<% } %>
</div>
</body>
</html>
</body>
<% } %>
<% } %>
<% } catch (error) { %>
<%- error %>
<% } %>
<!-- PHTML END -->
Reference in a new issue View git blame Copy permalink