mirrors/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-17 06:34:40 -05:00
Code Issues Activity
poke/html/poketube.ejs
Ashley d301c25daf fix a goofy ahh issue
2023-05-18 16:26:38 +00:00

2429 lines
103 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- PTHTML 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-2023 POKETUBE (https://github.com/iamashley0/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_desktop_player event" invidproxy="<%u%>" universe="2" vid_id="<%=inv_vid.videoId%>" t="<%=btoa(Date.now())%>" version="browser_web">
<head>
<% if (e === false) { %>
<!-- MetaTag disabled -->
<% } %>
<% if (!e) { %>
<meta content="<%=inv_vid.title%>" name=title>
<meta content="<%=color%>" name="theme-color">
<meta content="<%=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="Watch this video from <%=video?.Channel?.Name%> On PokeTube! The Libre YouTube Front end!1!" 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>
<link href="http://www.youtube.com/channel/<%=video?.Channel?.id%>" itemprop=url>
<% } %> <!-- close the } -->
<link href="/css/yt-ukraine.svg?v=3" rel=icon>
<link href=/css/snow.css rel=stylesheet>
<ptd-event-chunks>
poketube.eventloader = this.eventloader
load()
</ptd-event-chunks>
<title> <%=inv_vid.title%> | PokeTube </title>
<style>
<% if (!a) { %>
<% if (lightOrDark(color) == "light") { %>
.player.video-ambient-container {
box-shadow: 0 0 2.4em <%=color%>;
}
<% } %>
<% if (lightOrDark(color) == "dark") { %>
.player.video-ambient-container {
box-shadow: 0 0 2.4em <%=color2%>;
}
<% } %>
<% } %>
<% if (a) { %>
.player.video-ambient-container {
box-shadow: 0 0 0em <%=color%>;
}
<% } %>
.comments-area {
background: #f1f9ff;
padding: 50px 30px;
margin-top: 50px;
}
/* CSS */
.fade-in {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.fade-in.fade-in-active {
opacity: 1;
}
@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;
}
.comments-area .comment-list:last-child {
padding-bottom: 0px;
}
.comments-area .comment-list.left-padding {
padding-left: 25px;
}
@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-color: purple;
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;
}
.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 -->
<link href="/css/app-cdn.min.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
<link href="/css/app.main.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
<link href="/css/watch.main.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
<link href="/css/watch-util.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
<link href="/css/watch-navbar.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
<link href="/css/poketube.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
<!-- ICONS -->
<link href="https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" rel=stylesheet>
<link href="https://p.poketube.fun/https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.css" rel=stylesheet>
<noscript>
<style>
.auto-play{
display:none !important;
}
.progress-container {
display:none !important;
}
.fade-in {
opacity: 1 !important;
}
</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;
}
</style>
<% } %>
<style data-universe="2">
:root {
--div-gradient: linear-gradient(to bottom right, #9666F7, #B37C6B);
}
details[open] {
background: linear-gradient(to bottom, #1c1c1c, #101);
}
.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:#0A0608
}
<% if (lightOrDark(color) == "light") { %>
.player.video-ambient-container {
box-shadow: 0 -8px 5.9em <%=color%>;
}
<% } %>
<% if (lightOrDark(color) == "dark") { %>
.player.video-ambient-container {
box-shadow: 0 -8px 5.9em <%=color2%>;
}
<% } %>
<% if (a) { %>
.player.video-ambient-container {
box-shadow: 0 0 0em <%=color%>;
}
<% } %>
</style>
</head>
<body>
<script>
<!--//--><![CDATA[//><!--
/**
* @licstart The following is the entire license notice for the JavaScript
* code in this page.
*
* Copyright (C) 2021-2023 PokeTube Project (https://github.com/iamashley0/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>
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/svg';
link.rel = 'shortcut icon';
link.href = '/css/yt-ukraine.svg';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</ptd-app-iconfixer>
<ptd-app-ejs>
<div class="app" id="secret-theme" style="color:var(--text-color)">
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<nav>
<div class=left>
<% if (inv_vid.genre != "Music") { %>
<a title="PokeTube Homepage" class="class" href="/143" style=font-family:Inter,sans-serif;color:var(--text-color)> <img loading="lazy" style="transform: scale(1.3);padding-left:0.9em;width: 8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo.svg?v=5"></a>
<% } %>
<% if (inv_vid.genre === "Music") { %>
<a title="PokeTube Homepage" class="class" href="/143" style=font-family:Inter,sans-serif;color:var(--text-color)> <img loading="lazy" style="transform: scale(1.3);padding-left:0.9em;width: 7.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/music.svg?v=5"></a>
<% } %>
<% 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!
"
></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>
<img src="https://t.poketube.fun/t/rep.gif" style="border:0;width: 0;visibility: hidden;">
</div>
<div class="right">
<a><i style="display: block;margin-left: auto;margin-right: auto;visibility: collapse;" class="fa-light fa-server"></i> </a>
<a ><i class="fa-light fa-shield" style="visibility: collapse;margin-right: 1.5em;"></i></a>
<a ><i class="fa-light fa-shield" style="visibility: collapse;margin-right: 1.5em;"></i></a>
<p id="fetch-count">
</p>
<div class="icon-button dropdown" style="margin-right: 4.5px;">
<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-gear"></i>
</label>
<div class="dropdown__menu" style="right: -1em;">
<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: 0px;margin-bottom: -3px;font-size: larger;line-height: 20.7px;text-align: center;">Options</div>
<a href="/customize" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-brush"></i>
Customize PokeTube
</a>
<% if (!a) { %>
<a href="/watch?v=<%=inv_vid.videoId%>&a=false" title="Ambient mode uses a lighting effect to make watching videos more immersive by casting gentle colors from the video into your screen’s background! owo" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-lightbulb-on"></i>
Ambient mode • on
</a>
<% } %>
<% if (a) { %>
<a title="Ambient mode uses a lighting effect to make watching videos more immersive by casting gentle colors from the video into your screen’s background! 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 mode • off
</a>
<% } %>
<% 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>
<% } %>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;width: 16.5em;height: 0;">
<a href="/video/upload" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-video"></i>
Upload
</a>
<a href="/embed/<%=inv_vid.videoId%>?type=copy_code" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-code"></i>
View embed code
</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/poketube" style="text-decoration: none;color:#fff;" class="dropdown__item">
<i class="fa-light fa-circle-info"></i>
About
</a>
</div>
</div>
</div>
</nav>
<div class="watch-page">
<div class="primary">
<div id="<%=sha384(inv_vid.videoId)%>" class="video-player-container">
<video class="player video-ambient-container" id="video" style="border-radius: 16px;
box-sizing: border-box;
min-width: 100%;
display: block; !important;" autoplay controls
poster="https://p.poketube.fun/https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg?v=607ddcd4">
<% if (isvidious) { %>
<% if (!qua) { %>
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
<% } %>
<% 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">
<% } %>
<% } %>
<% 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">
<% } %>
<% 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">
<% } %>
<% } %>
<% if ( video?.Subtitles?.Subtitle) { %>
<% if (Array.isArray( video.Subtitles.Subtitle)) { %>
<% video?.Subtitles?.Subtitle?.forEach(x => { %>
<track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= x.language %>" label="<%= x.language.replace("United States","Simplified - USA") %>" kind="subtitles">
<img src="https://t.poketube.fun/t/rep.gif?v=<%=btoa(inv_vid.videoId)%>&h=<%= x.language %>" id="subtitle_usage_rate" style="border:0;width: 0;visibility: hidden;">
<% }) %>
<% } %>
<% if (!Array.isArray( video.Subtitles.Subtitle)) { %>
<track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= video.Subtitles.Subtitle.language %>" 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>
<img loading="lazy" src="https://t.poketube.fun/t/rep.gif?video=<%=btoa(inv_vid.videoId)%>" style="border:0;width: 0;visibility: hidden;" id="video">
<div class="pwp" style="display: flex;justify-content: center;align-items: center;flex-direction: row; column-gap: 3px;margin-top: -1em;max-height: 16px;" align="center">
<% if (!qua) { %>
<i style="display: block;" title="High Definition [Current]" class="fa-solid fa-high-definition"></i> <a href="/watch?v=<%=inv_vid.videoId%>&quality=medium"><i style="display: block;" title="Standard Definition" class="fa-light fa-standard-definition"></i></a>
<% } %>
<% if (qua) { %>
<a href="/watch?v=<%=inv_vid.videoId%>"> <i style="display: block;" title="High Definition" class="fa-light fa-high-definition"></i> </a> <i style="display: block;" title="Standard Definition [Current]" class="fa-solid fa-standard-definition"></i>
<% } %>
<input type="checkbox" class="v" id="box" style="display:none">
<label class="h" for="box">
<div class="fnt">
<i title="Stats for nerdys" class="fa-light fa-bug" style="margin-left: 0.9em;display:block;"></i>
</div>
</label>
<% 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>
<% } %>
<a href="#video" class="maxi" id="maximize"> <i style="display: block;" title="Maximise!" class="fa-light fa-maximize"></i> </a>
<!-- comments -->
<% if (inv.comments) { %>
<% if (inv.comments.length > 8 ) { %>
<div class="flying_cmnt">
<% inv.comments.slice(-8).forEach(x =>{ %>
<marquee loop="INFINITY">
<%- x.contentHtml %>
</marquee>
<% }) %>
</div>
<% } %> <% } %>
<!-- 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) { %> 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 <% } %> <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.kuylar.dev - refresh the page to change the proxy location<br>
<% } %>
Date : <%- Date.now() %> <br>
<% 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.kuylar.dev" ) %> <br>
<% } %>
143 : true <br>
</div>
</div>
</div>
<br>
<div class="video-info" >
<div class="video-info-panel gradient">
<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>
<a style="font-weight: bolder;font-family: sans-serif;color: var(--text-color);font-size: small;">content source : youtube.com </a>
<div class="video-chnl-info-pill" name="chnl">
<a name="chnl"></a>
<a href="/channel?id=<%=video?.Channel.id || k.Video.Channel.id%>" class="avatar">
<img loading="lazy" src="https://p.poketube.fun/<%= k.Video.Channel.Avatar[1].$t %>">
</a>
<div class="name" >
<div>
<a title="<%=k.Video.Channel.Name%> " class="video-info-pill-channelname"> <%=k.Video.Channel.Name%>
</a>
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (badges) { %>
<% if (badges.tooltip === "Verified") { %>
<i class="fa-solid fa-badge-check" title="<%=badges.tooltip%>"></i>
<% } %> <% if (badges.tooltip === "Official Artist Channel") { %>
<i class="fa-solid fa-music-note" title="<%=badges.tooltip%>"></i>
<% } %> <% } %> <% } %>
</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 href="https://www.youtube.com/channel/<%=video?.Channel.id || k.Video.Channel.id%>?view_as=subscriber?sub_confirmation=1">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('Audio)')) { %>
<% if (support != 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-badge-dollar"></i>
Support
</div>
</div>
</a>
<% }%> <% }%>
<% }%>
<% if (support == undefined) { %>
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('Audio)')) { %>
<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>
Switch Instance
</div>
</div>
</a>
<% }%> <% }%>
<% }%> <% if (video?.Channel.Name.endsWith(' - Topic') || inv_vid.title.endsWith('Audio)')) { %>
<% if (video?.Channel.Name.endsWith(' - Topic') || inv_vid.title.endsWith('Audio)')) { %>
<a class="new-button" title="open this song in poketube music player :3" style="color:var(--text-color);text-decoration: none;" href="/music?v=<%=inv_vid.videoId%>">
<div class="pill-button">
<i class="fa-light fa-music"></i>
Open In Music Player
</div>
</a>
<% }%>
<% }%>
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('Audio)')) { %>
<div class="new-button button-lite" style=";margin-left: -4px;">
<a title="Low Bandwidth? try PokeTube Lite!" style="color:var(--text-color);text-decoration: none" href="/lite?v=<%=inv_vid.videoId%>">
<div class="pill-button">
<i class="fa-light fa-bolt"></i>
Go Lite!
</div>
</a>
</div>
<% }%>
<% }%>
</div>
</div>
</div>
</div>
<div class="video-sub-info description">
<details open="true" 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(inv_vid.descriptionHtml).replace(/\n/g, " <br> ").replace(/twitter\.com/g, "nitter.net").replace(/reddit\.com/g, "teddit.net") %>
</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, "nitter.net").replace(/reddit\.com/g, "teddit.net") %>
</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>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<p style="font-weight: bold;">
<span>Views : <%=engagement.viewCount.toLocaleString()%> <br>
Genre: <%-inv_vid.genre %> <br>
Upload date: <%=date%> ^^ <br>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
Rating : <%=engagement.rating.toLocaleString()%> (<%=engagement.dislikes.toLocaleString()%>/<%=engagement.likes.toLocaleString()%> LTDR) <br>
RYD date created : <%=engagement.dateCreated.toLocaleString()%> <br>
<a href="https://returnyoutubedislikeapi.com/votes?videoId=<%=inv_vid.videoId%>">See in json</a>
<a id="nerdy"></a>
</span>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<% if (Array.isArray(video?.Tags.Tag)) { %>
<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">
<% video?.Tags.Tag.forEach(x => { %>
<div class="tag">
<a href="/hashtag/<%=x %>" style="color:var(--text-color)">
<%=x %>
</a>
</div>
<% }) %>
</div>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<% } %>
</details>
</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.comments) { %>
<p style="text-align: center">
no comments on this video (it may be disabled or theres just no comments lol)
</p>
<% } %>
<% if (inv.comments) { %>
<div class="comments">
<div class="comments-class-or-something-i-cant-find-a-name-lol">
<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;">
Comments <span style="font-family: inter;font-weight: 900;text-transform: lowercase;margin: 1px;">- <%- convert(inv.commentCount) %></span>
</h5>
<p style="padding: 0;margin: 0;font-family: Inter;margin-bottom: 10px;">
Top Comments are being randered rn :3 all comments are soon!
</p>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<% inv.comments.forEach(x =>{ %>
<div class="<%- x.commentId %>.<%- btoa(x.commentId) %> fade-in ">
<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="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 loading="lazy" src="https://p.poketube.fun/<%= x.authorThumbnails[1].url %>">
</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%>" 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>
</h5>
<p class="comment" style="font-weight: bold;">
<%- x.contentHtml %>
<br> <br>
<span> <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>
<!-- This is to see how much comments loaded in a video, i dont collect the comment metadata - its sha hashed (see /privacy ) -->
<img loading="lazy" src="https://t.poketube.fun/t/rep.gif?v=<%=sha384(inv_vid.videoId)%>&pub_date=<%-sha384(x.publishedText)%>&content_comment_sha=<%- sha384(x.content)%>&id=<%- sha384(x.commentId) %>" id="comments_rate" style="border:0;width: 0;visibility: hidden;display:none;">
</div>
<% }) %>
</div>
</div>
<% } %>
<% if(!inv.comments) { %>
</div>
<% } %>
<% if(inv.comments) { %>
</div>
<% } %>
<div class="recommended-list" align="center">
<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" >
<a href="/encryption?v=<%=inv_vid.videoId%>"><i class="fa-duotone fa-shield-halved " style="margin-left: 13em;"></i></a>
</div>
<div class="tags rec" >
<div class="tag" style="background:var(--chip-background-hover)">
Recommended Videos
</div>
<a style="color:#fff" href="/channel?id=<%=video?.Channel.id || k.Video.Channel.id %>" class="tag">
From <%=k.Video.Channel.Name%>
</a>
</div>
<% if (!r) { %>
<div>
</div>
<% if (!f) { %>
<% k.Video.Recommendations.Video.forEach(x => { %>
<div class="video fade-in" >
<% if (!optout) { %>
<a href="/watch?v=<%= x.id %>" alt="<%= x.Title %>" class="thumbnail " style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;" > <span class="video-length"><%- x.duration || "LIVE"%></span>
<% } %>
<% if (optout) { %>
<a href="/watch?v=<%= x.id %>&m=f" alt="<%= x.Title %>" class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;" > <span class="video-length"><%- x.duration || "LIVE"%></span>
<% } %>
</a>
<div class="info">
<% if (!optout) { %>
<a href="/watch?v=<%= x.id %>" class="title max-lines-2" title="<%= x.Title %>" style="font-stretch: 100%;font-weight: 800;"><%= x.Title %></a>
<% } %>
<% if (optout) { %>
<a href="/watch?v=<%= x.id %>&m=f" class="title max-lines-2" title="<%= x.Title %>" style="font-stretch: 100%;font-weight: 800;"><%= x.Title %></a>
<% } %>
<div>
<a class="max-lines-2" href="/channel?id=<%= x.Channel.id %>" style="-webkit-line-clamp: 1;width: 12em;word-wrap: break-word;"><%=x.Channel.Name %></a>
<div class="video-views"> <%= x.uploadedAt.replace("Streamed", "Live") %> • <%= convert(x.views) %> views </div>
</div>
</div>
</div>
<% }) %>
<% } %>
<% if (f) { %>
<% tj.forEach(x => { %>
<div class="video">
<% if (!optout) { %>
<a href="/watch?v=<%= x.id %>" class="thumbnail" style="background-image: url('https://p.poketube.fun/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('https://p.poketube.fun/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" style="font-stretch: 100%;font-weight: 800;" title="<%= x.Title %>"><%= x.Title %></a>
<% } %>
<% if (optout) { %>
<a href="/watch?v=<%= x.id %>&m=f" class="title max-lines-2" title="<%= x.Title %>" style="font-stretch: 100%;font-weight: 800;"><%= x.Title %></a>
<% } %>
<div>
<a class="max-lines-2" href="/channel?id=<%= video?.Channel?.Name || k.Video.Channel.Name %>" style="-webkit-line-clamp: 1;width: 12em;word-wrap: break-word;"><%= video?.Channel?.Name || k.Video.Channel.Name %></a>
<div class="video-views"> <%= x.uploadedAt %> • <%= convert(x.views) %> 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://github.com/iamashley0/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://github.com/iamashley0/poketube/blob/main/src/lyrics.js">Here</a>
</p>
<p style="color: white;">
<p style=color:var(--text-color)>
<%-lyrics%>
</p>
<% } %>
<% } %> </details>
<div style="font-family:Inter,sans-serif;;white-space:yes;" align="center">
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<br>
<a href="https://youtube.com/watch?v=<%=inv_vid.videoId%>">Open On YouTube</a> • <a href="/privacy">Privacy</a> • <a href="https://github.com/iamashley0/poketube/">Git</a>
</div>
<% if (optout) { %>
<% } %>
<% if (!optout) { %>
<div style="font-family:Inter,sans-serif;;white-space:yes;" align="center">
<a href="/watch?v=<%=inv_vid.videoId%>&m=f">
Opt out of Metrics</a> (<a href="/privacy" style="color:var(--text-color)">Wut?</a>)
</div>
<% } %>
<% 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>
<% } %>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
</div>
</div>
<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);
}
}
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=<%- k.Video.Recommendations.Video[0].id%>";
function autoplaynextvideo(e) {
location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>";
}
}
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=<%- k.Video.Recommendations.Video[0].id%>").then(() => {})
}
}
});
if (/[?&]autoplay=/.test(location.search)) {
checkbox.checked = true;
console.log("[AUTOPLAY] enabled");
let url = window.location.hostname + "/watch?v=<%- k.Video.Recommendations.Video[0].id%>";
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=<%- k.Video.Recommendations.Video[0].id%>").then(() => {})
}
}
function autoplaynextvideo(e) {
location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>";
}
}
</script>
<script data-api-endpoint="/api/">
/*
* Loads modules
*/
try {
const app_main = "/static/app.js?ver=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>";
const script = document.createElement("script");
script.src = app_main;
document.head.appendChild(script);
} catch(err) {
console.error(`Error while loading module files: ${err}`)
}
</script>
<script src="/static/custom-css.js"> </script>
<% if (!optout) { %>
<!-- MORE INFO :https://poketube.fun/privacy -->
<!-- MORE INFO :https://poketube.fun/privacy -->
<!-- if you want to change the url - please see config in server.js -->
<!-- START <%=t%> -->
<!-- SESSION -->
<img src="<%=t%>t/rep.gif?ID=<%=btoa(Date.now())%>" style="width: 0;visibility: hidden;" id="SesionID">
<img src="<%=t%>t/rep.gif?piwik=t" style="width: 0;visibility: hidden;" id="piwik_noip_no_personal-info_collect">
<!-- VIDEO -->
<img src="<%=t%>t/rep.gif?video_id=<%=btoa(inv_vid.videoId)%>" style="width: 0;visibility: hidden;" id="videoID">
<img src="<%=t%>t/rep.gif?channel_ID=<%=btoa(video?.Channel.id || k.Video.Channel.id)%>" style="width: 0;visibility: hidden;" id="channel">
<!-- END <%=t%> -->
<% } %>
</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-2023 POKETUBE (https://github.com/iamashley0/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=<%=btoa(Date.now())%>" rel=stylesheet>
<link href="/css/app.main.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
<link href=https://p.poketube.fun/https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.css rel=stylesheet>
<link href="https://fonts.poketube.fun/css/fonts.css" rel=stylesheet>
<link href=https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css rel=stylesheet>
<style>
a.class:hover {
text-decoration:underline;
font-weight:bold
}
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)
}
</style>
<% if (Array.isArray( !inv.comments)) { %>
<style>
#desc-container {
margin-top: -14.9em;
}
#more-button-container{
margin-top: -14.9em;
}
</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-mobile.svg"> </a>
</div>
<div class="middle">
</div>
<div class="right">
<a href="/discover?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">
<% if (lightOrDark(color) == "dark") { %>
<video class="player" id="video" style="border-radius: 6px;box-shadow: 0 10em 7em <%=color2
%>;" autoplay controls
poster="https://p.poketube.fun/https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg?v=607ddcd4">
<% } %>
<% if (lightOrDark(color) == "light") { %>
<video class="player" id="video" style="border-radius: 6px;box-shadow: 0 10em 7em <%=color
%>;" autoplay controls
poster="https://p.poketube.fun/https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg?v=607ddcd4">
<% } %>
<% if (!qua) { %>
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
<% } %>
<% 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">
<% } %>
<% if (Array.isArray( video?.Subtitles?.Subtitle)) { %>
<% if ( video?.Subtitles?.Subtitle) { %>
<% video.Subtitles?.Subtitle?.forEach(x => { %><track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= x.language %>" label="<%= x.language %>" kind="subtitles">
<% }) %>
<% } %>
<% } %>
</video>
</div>
<div class="video-info" >
<div style="background-image: linear-gradient( 135deg, #F97794 10%, #623AA2 100%, #8e6f7e 100%);border-radius: 10px;margin-bottom: 10px;padding-bottom: 1em;padding-top: 0.3em;">
<div style="display: flex;justify-content: center;align-items: center;flex-direction: row; column-gap: 3px;" align="center">
<% if (!qua) { %>
<i style="display: block;" title="High Definition [Current]" class="fa-solid fa-high-definition"></i> <a href="/watch?v=<%=inv_vid.videoId%>&quality=medium"><i style="display: block;" title="Standard Definition" class="fa-light fa-standard-definition"></i></a>
<% } %>
<% if (qua) { %>
<a href="/watch?v=<%=inv_vid.videoId%>"> <i style="display: block;" title="High Definition" class="fa-light fa-high-definition"></i> </a> <i style="display: block;" title="Standard Definition [Current]" class="fa-solid fa-standard-definition"></i>
<% } %>
</div>
<div class="video-title" style="font-family:'Inter';;white-space:yes;padding: 10px;
"><%=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=" https://p.poketube.fun/<%= 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: 9.8em;" class="max-lines-1">
<%=k.Video.Channel.Name%></a>
<div class="subscriber-count" style="write-space:nowraap">
<%= k.Video.Channel.subscriberCount %>
</div>
</div>
</div>
<button class="subscribe-button" ><a style="color:#fff" href="https://www.youtube.com/channel/<%=k.Video.Channel.id%>?view_as=subscriber?sub_confirmation=1">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>
<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>
<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="#more-button-container">
<div class="pill-button">
<i style="color:#fff" class="fa-thin fa-circle-plus"></i> More..
</div>
</a>
</div>
<div class="video-info-bar" style="font-family:'Inter';">
<!--
<div class="video-info-buttons" style="font-family:'Inter';;white-space:yes;background:#333;border-radius: 15px;margin: 6px;align-self: center;align-items: center;">
<div>
<i class="fa-light fa-thumbs-up" style="font-size:x-large" ></i>
<%=convert(engagement.likes)%>
</div>
<div>
<i class="fa-light fa-thumbs-down" style="font-size:x-large" ></i><%=convert(engagement.dislikes)%>
</div>
<a style="color:#fff" href="/download?v=<%=inv_vid.videoId%>&from=mobile">
<i style="font-size:x-large" class="fa-light fa-download"></i>
Download
</a>
<a style="color:#fff" onclick="share()">
<i style="font-size:x-large" class="fa-light fa-share"></i>
Share
</a>
<a style="color:#fff" href="#more-button-container"> <i style="font-size:x-large;color:#fff" class="fa-thin fa-circle-plus"></i>More.. </a>
</div>
-->
</div>
<% if (Array.isArray( inv.comments)) { %>
<div style="padding: 0em;background: #0009;border-radius: 16px;align-self: center;align-items: center;margin-left: 8px;margin-right: 12px;padding-bottom: 0;padding-top:1em">
<div class="video-title" style="font-family:'PokeTube flex';font-weight:1000;white-space:yes;margin-top: -0.5em;margin-left: 0.4em;">Comments - <%- convert(inv.commentCount) %>
<a id="language-button" href="#comments-container" style="float: right;margin-right: 0.5em;" class="switch">
<i class="fa-thin fa-chevron-down"></i>
</a>
</div>
<div class="" style="padding: 0em !important;margin-left: 0.3em;">
<div class="desc" style="display: flex;font-size: small;padding: 0;margin: -10px;margin-left: -0.5em">
<h5 style="display: flex;margin-top: 7px;padding-top: 10px;">
<div class="thumb">
<div class="thumb">
<a href="/channel?id=<%- inv.comments[0].authorId%>" class="avatar" style="width: 40px;height: 40px;margin: 4px;">
<img src="https://p.poketube.fun/<%= inv.comments[0].authorThumbnails[1].url %>" style="width: 24px;height: 24px;margin-right: inherit;" >
</a>
</div>
</h5>
<p class="comment" style="font-weight: bold;color: #fff; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; max-width: 50em;align-self:center;">
<%- inv.comments[0].contentHtml %>
</p>
</div>
</div>
</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 class="video-title" style="font-family:'Inter';;white-space:yes;margin-bottom: 8px;"><%=inv_vid.title%></div>
<!--
<div class="channel-info" name="chnl" style="padding: 0;border: none;">
<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="display: flex;justify-content: center;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>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<p style="margin-top: 10px;margin-bottom: 10px;">
</p>
<%-String(linkify(inv_vid.description)).replace(/\n/g, " <br> ").replace(/twitter\.com/g, "nitter.net").replace(/reddit\.com/g, "teddit.net") %>
<div style="margin: 10px;">
<div style="justify-content: center;display: flex;padding: 11px;font-family: Ginto nord;gap: 3px;background: #1f1f1f;border-top-left-radius: 10px;border-top-right-radius: 10px;">
More info about the video
</div>
<div style="background:#181818;" class="fromtheweb-outer">
<div class="fromtheweb-inner">
<% if (wiki.extract_html) { %>
<div class="video-title" style="color:#fff;font-family:Ginto Nord,sans-serif;font-weight:700;margin-top: 10px;margin-bottom: 10px;text-aligin:left;">From da web</div>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<b><%-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></b>
<% } %>
<% if (!wiki.extract_html) { %>
<% if (desc) { %>
<div class="video-title" style="color:#fff;font-family:Ginto Nord,sans-serif;font-weight:700;margin-top: 10px;margin-bottom: 10px;text-aligin:left;">About This Channel</div>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<p><b><%-desc%></b></p>
<% } %> <% } %>
</div>
</div>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<% if (Array.isArray(video?.Tags?.Tag)) { %>
<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">
<% video.Tags.Tag.forEach(x => { %>
<div class="tag">
<a href="/hashtag/<%=x %>" style="color:var(--text-color)">
<%=x %>
</a>
</div>
<% }) %>
</div>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
<% } %>
</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://github.com/iamashley0/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://github.com/iamashley0/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://github.com/iamashley0/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 src="https://p.poketube.fun/<%= x.authorThumbnails[1].url %>" style="width: 40px;height: 40px;">
</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;" 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) { %>
<% k.Video.Recommendations.Video.forEach(x => { %>
<div class="video">
<% if (!optout) { %>
<a href="/watch?v=<%= x.id %>" class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;border: 2px solid white;" > <span class="video-length"><%=x.duration %></span>
<% } %>
<% if (optout) { %>
<a href="/watch?v=<%= x.id %>&m=f" class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;border: 2px solid white;" > <span class="video-length"><%=x.duration %></span>
<% } %>
</a>
<div class="info">
<% if (!optout) { %>
<a href="/watch?v=<%= x.id %>" class="title max-lines-2" style="margin-top: 4px;"><%= x.Title %></a>
<% } %>
<% if (optout) { %>
<a href="/watch?v=<%= x.id %>&m=f" style="margin-top: 4px;" class="title max-lines-2"><%= x.Title %></a>
<% } %>
<div style="color:#fff" >
<a class="max-lines-2" style="color:#fff" href="/channel?id=<%= x.Channel.id %>"><%=x.Channel.Name %></a> • <div>
<%= x.uploadedAt %> </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('https://p.poketube.fun/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('https://p.poketube.fun/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-2023 POKETUBE (https://github.com/iamashley0/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%>"
})
.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 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=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>"
}
}
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=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>"
}
}
</script>
<noscript>
<style>
.auto-play{
display:none !important;
}
</style>
</noscript>
<% if (!optout) { %>
<!-- MORE INFO :https://poketube.fun/privacy -->
<!-- MORE INFO :https://poketube.fun/privacy -->
<!-- if you want to change the url - please see config in server.js -->
<!-- START <%=t%> -->
<!-- mobile only -->
<!-- dont use matomo.php, as its being blocked by ublock origin. -->
<img src="<%=t%>t/index.php?idsite=5&amp;rec=1" style="width: 0;visibility: hidden;border:0;" alt="" >
<!--- mobile only -->
<img src="<%=t%>t/rep.gif?ID=<%=btoa(Date.now())%>" style="width: 0;visibility: hidden;" id="SesionID">
<img src="<%=t%>t/rep.gif?video_id=<%=btoa(inv_vid.videoId)%>" style="width: 0;visibility: hidden;" id="videoID">
<img src="<%=t%>t/rep.gif?channel_ID=<%=btoa(video?.Channel.id || k.Video.Channel.id)%>" style="width: 0;visibility: hidden;" id="channel">
<img src="<%=t%>t/rep.gif?piwik=t" style="width: 0;visibility: hidden;" id="piwik_noip_no_personal-info_collect">
<!-- END <%=t%> -->
<% } %>
</div>
</body>
</html>
</body>
<% } %>
<% } %>
View git blame Copy permalink