2024-06-26 16:59:19 +02:00
<% try { %>
<!-- PTHTML START -->
2024-05-10 21:59:34 +02:00
<% if (!isMobile) { %>
2022-08-06 19:07:06 +02:00
<!--
2024-05-10 21:59:34 +02:00
HEYOOOOOOOOOO!!!!!!
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
poketube is the privacy first youtube front end ! fell free to pull request on codeberg.org!
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
if you want to host an instance, see README.md
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
license below:
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
This Source Code Form is subject to the terms of the GNU General Public License:
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
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.
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
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.
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/.
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
-->
2024-05-10 21:37:49 +02:00
<!DOCTYPE html>
2024-05-10 21:59:34 +02:00
<% if(secure) { %><!-- HOSTNAME_IS_POKETUBE.FUN --><% } %><% if(!secure) { %><!-- HOSTNAME_IS_NOT_POKETUBE.FUN --><% } %>
2024-01-30 21:14:34 +01:00
2024-05-10 21:59:34 +02:00
<html class="poketube_desktop_player js events addEventListener" style="background: #000000;" invidproxy="<%=u%>" universe_version="2" vid_id="<%=inv_vid.videoId%>" t="<%=btoa(Date.now())%>" version="browser_web_<%=Date.now()%>">
<head>
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
<% if (e === false) { %>
<!-- meta tags disabled by user -->
<% } %>
<% if (!e) { %>
2023-03-10 14:45:36 +01:00
<meta content="<%=inv_vid.title%>" name=title>
2022-05-20 18:22:27 +02:00
<meta content="<%=color%>" name="theme-color">
2024-05-10 21:59:34 +02:00
<meta content="<%=k.Video.Channel.Name%>" name=twitter:author>
2023-03-07 19:08:15 +01:00
<meta content="https://poketube.fun/watch?v=<%=inv_vid.videoId%>" name=twitter:url>
2024-05-10 21:59:34 +02:00
<meta content="<%=inv_vid.title%> | Poke" name=twitter:title>
<meta content="Watch this video from <%=k.Video.Channel.Name%> On Poke!
2024-07-28 16:07:38 +02:00
👍 <%=convert(engagement.likes)%> | 👎 <%=convert(engagement.dislikes)%> | 📈 <%=convert(engagement.viewCount)%> Views 🗓️ <%= date %>" property=twitter:description>
2023-03-07 19:08:15 +01:00
<meta content="https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg" property=og:image>
2024-04-05 23:43:11 +02:00
<meta content=summary_large_image name=twitter:card>
2023-03-07 19:08:15 +01:00
<link href="https://poketube.fun/watch?v=<%=inv_vid.videoId%>" itemprop=url>
2024-05-10 21:59:34 +02:00
<!-- 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">
<link href=/css/snow.css rel=stylesheet>
2024-05-31 13:16:44 +02:00
<title> <%=inv_vid.title%> | Watch </title>
2024-05-10 21:59:34 +02:00
<style>
.comments-area {
background: #f1f9ff;
padding: 50px 30px;
margin-top: 50px;
}
2022-10-12 17:02:18 +02:00
2023-03-10 21:58:17 +01:00
2024-05-10 21:59:34 +02:00
@media (max-width: 414px) {
.comments-area {
padding: 50px 8px;
2022-10-12 17:02:18 +02:00
}
2024-05-10 21:59:34 +02:00
}
.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;
2024-07-24 16:39:26 +02:00
background-color: #241c1cab;
backdrop-filter: blur(31px);
2024-05-10 21:59:34 +02:00
position: absolute;
2024-07-24 16:41:12 +02:00
padding: 10px;
2024-05-10 21:59:34 +02:00
border: solid 1.5px gray;
border-radius: 10px;
}
.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);
2023-06-18 18:22:11 +02:00
}
2024-05-10 21:59:34 +02:00
.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;
2022-10-12 17:02:18 +02:00
}
2024-05-10 21:59:34 +02:00
.comments-area .comment-list .single-comment .date {
font-size: 11px;
2022-10-12 17:02:18 +02:00
}
2024-05-10 21:59:34 +02:00
.comments-area .comment-list .single-comment .comment {
font-size: 10px;
2022-10-12 17:02:18 +02:00
}
2024-05-10 21:59:34 +02:00
}
.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;
2022-10-12 17:02:18 +02:00
}
2024-05-10 21:59:34 +02:00
}
2022-10-12 17:02:18 +02:00
2024-05-10 21:59:34 +02:00
.comment-form .email {
padding-right: 0px;
}
2022-10-12 17:02:18 +02:00
2024-05-10 21:59:34 +02:00
@media (max-width: 991px) {
.comment-form .email {
padding-left: 0px;
2022-10-12 17:02:18 +02:00
}
2024-05-10 21:59:34 +02:00
}
.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;
}
2023-12-20 17:20:08 +01:00
2024-05-10 21:59:34 +02:00
#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;
2022-10-09 15:11:28 +02:00
2022-10-12 20:38:29 +02:00
}
2024-05-10 21:59:34 +02:00
#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;
2023-01-02 18:17:41 +01:00
}
2024-05-10 21:59:34 +02:00
.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);
2023-03-05 21:36:20 +01:00
}
2024-05-10 21:59:34 +02:00
}
2023-03-05 21:36:20 +01:00
2024-05-10 21:59:34 +02:00
</style>
<!-- css files -->
2024-07-10 14:23:12 +02:00
<!-- these files are cached for 10 days -->
2024-05-10 21:59:34 +02:00
<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>
2024-07-24 12:42:55 +02:00
<link href="/css/poketube.css?v=948934774844" rel=stylesheet>
2024-07-10 14:23:12 +02:00
<!-- css files end -->
2024-01-30 21:14:34 +01:00
2024-05-10 21:59:34 +02:00
<% 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>
<% } %>
<!-- ICONS -->
2024-07-10 14:23:12 +02:00
<!-- Fake Font awsome pro -->
2024-05-10 21:59:34 +02:00
<link href="<%- proxyurl %>/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" rel=stylesheet>
2024-07-10 14:23:12 +02:00
2024-05-10 21:59:34 +02:00
<link href="<%- proxyurl %>/https://cdn.jsdelivr.net/npm/ionicons@4.5.0-0/dist/css/ionicons.min.css" rel=stylesheet>
2022-10-12 22:17:28 +02:00
2024-05-10 21:59:34 +02:00
<noscript>
<style>
.auto-play{
display:none !important;
}
2024-05-02 04:00:23 +02:00
2024-05-10 21:59:34 +02:00
.theather {
display:none !important;
}
2024-05-02 04:00:23 +02:00
2024-05-10 21:59:34 +02:00
.progress-container {
display:none !important;
}
.fade-in {
opacity: 1 !important;
}
2024-03-08 05:07:49 +01:00
2024-05-10 21:59:34 +02:00
.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") { %>
2023-01-09 22:16:26 +01:00
2024-05-10 21:59:34 +02:00
<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;
}
2023-01-09 22:16:26 +01:00
</style>
2024-05-10 21:59:34 +02:00
<% } %>
<% 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;
2024-07-03 00:09:19 +02:00
2024-05-10 21:59:34 +02:00
}
2024-07-03 00:09:19 +02:00
#controls {
display: flex;
visibility: hidden;
position: absolute;
bottom: 0;
margin-bottom: 70px !important;
margin: 0 20px;
width: 100%;
align-items:flex-end;
}
video:hover~#controls, #controls:hover {
visibility: visible;
}
.control-button {
width: 40px;
border-radius: 5px;
margin-bottom: 6px;
padding: 3px
}
.video-player-container {
position: relative;
}
.control-button svg {
fill: #c59cd0;
width: 40px;
margin-bottom: -6px;
}
#seekbar {
display: flex;
margin-left: 20px;
margin-right: 20px;
width: 100%;
}
input[id*="-slider"] {
flex-grow: 1;
-webkit-appearance: none;
appearance: none;
background: #ffffff;
border: 1px solid #000000;
margin-bottom: 23px;
cursor: pointer;
width: 0.5rem;
height: 5px !important;
display: block;
border-radius: 50px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 21px;
width: 21px;
border-radius: 20px;
background: var(--div-gradient);
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-moz-range-thumb {
border: 1px solid #000000;
height: 21px;
width: 21px;
border-radius: 20px;
background: var(--div-gradient);
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
#timestamps {
margin-right: 40px;
2024-07-06 18:31:21 +02:00
text-shadow: 1px 1px 2px black;
2024-07-03 00:09:19 +02:00
}
html:fullscreen video {
display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 999999 !important;
}
html:fullscreen *:not(html, video, body, ptd-app-ejs, .app, .watch-page, .primary, .video-player-container, #popupMenu, #popupMenu *) {
visibility: hidden !important;
}
2024-07-05 15:59:13 +02:00
.error-card {
2024-07-03 15:15:09 +02:00
background-color: #823434aa;
margin: 30px;
padding: 5px 20px;
border: 2px solid red;
border-radius: 10px;
}
2024-07-05 15:59:13 +02:00
#buffer-failed-warning {
display: none;
}
2024-07-04 01:11:22 +02:00
.rainbow-gradient {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
color: transparent;
}
2024-05-10 21:59:34 +02:00
</style>
2024-07-03 00:09:19 +02:00
<noscript>
<style>
#controls {
display: none !important;
}
</style>
</noscript>
<script>
2024-07-20 17:36:47 +02:00
const qua = new URLSearchParams(new URL(window.location.href).search).get("quality") || "";
const playSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-circle-outline</title><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>'
const pauseSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pause-circle-outline</title><path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>'
function csts(seconds) {
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds - (hours * 3600)) / 60);
var secs = Math.floor(seconds - (hours * 3600) - (minutes * 60));
if (hours === 0) {
var timeString = minutes.toString().padStart(2, '0') + ':' +
secs.toString().padStart(2, '0');
} else {
var timeString = hours.toString().padStart(2, '0') + ':' +
minutes.toString().padStart(2, '0') + ':' +
secs.toString().padStart(2, '0');
}
return timeString;
2024-07-16 14:40:42 +02:00
}
function cstsRemaining(totalTimeInSeconds, elapsedTimeInSeconds) {
2024-07-20 17:36:47 +02:00
var remainingSeconds = totalTimeInSeconds - elapsedTimeInSeconds;
var hours = Math.floor(remainingSeconds / 3600);
var minutes = Math.floor((remainingSeconds % 3600) / 60);
var secs = Math.floor(remainingSeconds % 60);
var timeString;
if (hours === 0) {
timeString = minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
} else {
timeString = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
}
2024-07-16 14:40:42 +02:00
2024-07-20 17:36:47 +02:00
return '-' + timeString;
2024-07-03 00:09:19 +02:00
}
2024-07-20 17:36:47 +02:00
function showErrorCard(e) {
try {
switch (e.target.error.code) {
2024-07-05 15:59:13 +02:00
case e.target.error.MEDIA_ERR_ABORTED:
return;
2024-07-20 17:36:47 +02:00
break;
2024-07-05 15:59:13 +02:00
case e.target.error.MEDIA_ERR_NETWORK:
2024-07-20 17:36:47 +02:00
document.querySelector("div p span").innerText = "(Network error)"
2024-07-05 15:59:13 +02:00
break;
case e.target.error.MEDIA_ERR_DECODE:
2024-07-20 17:36:47 +02:00
document.querySelector("div p span").innerText = "(Decode error/lack of browser support)"
2024-07-05 15:59:13 +02:00
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
2024-07-20 17:36:47 +02:00
document.querySelector("div p span").innerText = "(Network error or format not supported)"
2024-07-05 15:59:13 +02:00
break;
default:
2024-07-20 17:36:47 +02:00
document.querySelector("div p span").innerText = "(Unknown error)"
2024-07-05 15:59:13 +02:00
break;
2024-07-20 17:36:47 +02:00
}
2024-07-06 15:44:53 +02:00
}
2024-07-20 17:36:47 +02:00
catch {
document.querySelector("div p span").innerText = "(Network error)"
2024-07-20 16:02:06 +02:00
}
2024-07-20 17:36:47 +02:00
document.getElementById("buffer-failed-warning").style.display = "block";
}
let canPlayPause = true;
let didFirstTimePlay = false;
document.addEventListener("DOMContentLoaded", () => {
2024-07-25 22:54:19 +02:00
setInterval(()=>{
if(!document.getElementById("video").paused) {
document.getElementById("play-pause").innerHTML = pauseSVG;
2024-07-26 22:40:10 +02:00
}
else {
aud.pause()
document.getElementById("play-pause").innerHTML = playSVG;
2024-07-25 22:54:19 +02:00
}
}, 100);
2024-07-20 17:36:47 +02:00
//FIXME: saved playback intentionally overwritten
localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0);
// Controls and high-res playback
//TODO - a
let setTime = false
const seekbar = document.getElementById("duration-slider")
const video = document.getElementById("video");
let shouldUseRemaining = false;
const timestamps = document.getElementById("timestamps");
video.addEventListener("timeupdate", (event) => {
seekbar.value = event.target.currentTime;
timestamps.innerText = shouldUseRemaining ? `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}` : `${csts(video.currentTime)}/${csts(video.duration)}`;
});
timestamps.addEventListener("mouseover", () => {
shouldUseRemaining = true;
timestamps.innerText = `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}`;
});
timestamps.addEventListener("mouseout", () => {
shouldUseRemaining = false;
timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
});
// test
seekbar.addEventListener("input", (event) => {
video.pause()
canPlayPause = false;
if(qua != "medium") {
aud.pause()
aud.currentTime = event.target.value
2024-07-05 20:59:54 +02:00
}
2024-07-20 17:36:47 +02:00
video.currentTime = event.target.value
canPlayPause = true;
setTimeout(()=>{
video.play();
2024-07-07 22:49:24 +02:00
aud.play();
2024-07-20 17:36:47 +02:00
}, 200)
});
// Play/Pause
const playPauseButton = document.getElementById("play-pause");
playPauseButton.innerHTML = pauseSVG;
function toggleVideo() {
if(!canPlayPause) return;
if(document.getElementById("popupMenu").style.display == "none") {
if(!document.fullscreen) {
if(!video.paused) {
video.pause(); if(qua != "medium") { aud.pause(); } playPauseButton.innerHTML = playSVG;
}
else {
video.play(); if(qua != "medium") { aud.play(); } playPauseButton.innerHTML = pauseSVG;
}
}
2024-07-03 00:09:19 +02:00
}
2024-07-20 17:36:47 +02:00
else {
document.getElementById("popupMenu").style.display = "none"
}
2024-07-12 17:37:07 +02:00
}
2024-07-20 17:36:47 +02:00
playPauseButton.addEventListener("click", () => {
toggleVideo()
2024-07-03 00:09:19 +02:00
});
2024-07-20 17:36:47 +02:00
video.addEventListener("pause", ()=>{if(qua != "medium") {aud.pause()}});
video.addEventListener("play", ()=>{if(qua != "medium") {aud.play()}})
video.addEventListener("click", toggleVideo);
video.addEventListener("dblclick", () => {
document.documentElement.requestFullscreen();
2024-07-03 00:09:19 +02:00
});
2024-07-20 17:36:47 +02:00
function handleVolumeChange(element) {
switch (element.volume) {
case 1:
element.volume = 0;
document.querySelector("#muteOption #new").innerText = "25%"
document.querySelector("#muteOption #current").innerText = "0%"
break;
case 0:
element.volume = 0.25;
document.querySelector("#muteOption #new").innerText = "50%"
document.querySelector("#muteOption #current").innerText = "25%"
break;
case 0.25:
element.volume = 0.5;
document.querySelector("#muteOption #new").innerText = "75%"
document.querySelector("#muteOption #current").innerText = "50%"
break;
case 0.5:
element.volume = 0.75;
document.querySelector("#muteOption #new").innerText = "100%"
document.querySelector("#muteOption #current").innerText = "75%"
break;
case 0.75:
element.volume = 1;
document.querySelector("#muteOption #new").innerText = "0%"
document.querySelector("#muteOption #current").innerText = "100%"
break;
default:
element.volume = 1;
document.querySelector("#muteOption #new").innerText = "0%"
document.querySelector("#muteOption #current").innerText = "100%"
break;
}
2024-07-06 16:14:54 +02:00
}
2024-07-20 17:36:47 +02:00
document.getElementById("muteOption").addEventListener("click", () => {
if(qua != "medium") {
handleVolumeChange(aud)
}
else {
handleVolumeChange(video)
2024-07-20 16:02:06 +02:00
}
});
2024-07-20 17:36:47 +02:00
document.getElementById("syncOption").addEventListener("click", () => {
aud.pause(); video.pause(); playPauseButton.innerHTML = playSVG;
video.currentTime > aud.currentTime ? aud.currentTime = video.currentTime : video.currentTime = aud.currentTime;
playPauseButton.innerHTML = pauseSVG;
});
setTimeout(()=>{
if(!didFirstTimePlay) {
video.addEventListener("seeked", (event) => {
setTimeout(()=>{
canPlayPause = true;
if(video.currentTime==0||aud.currentTime==0) return;
video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
},1)
});
aud.addEventListener("seeked", (event) => {
setTimeout(()=>{
if(video.currentTime==0||aud.currentTime==0) return;
video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
},1)
});
didFirstTimePlay = true;
}
},100)
document.addEventListener("fullscreenchange", function() {
if(document.fullscreen) {
video.controlsList = "noplaybackrate nodownload"
window.onscroll = function () { window.scrollTo(0, 0); };
document.documentElement.style.overflow = "hidden"
video.controls = true;
}
if(!document.fullscreen) {
video.controlsList = ""
window.onscroll = null;
document.documentElement.style.overflow = null
video.controls = false;
}
});
video.addEventListener("fullscreenchange", () => {
video.fullscreen = false;
document.exitFullscreen();
});
video.addEventListener("contextmenu", (event) => {
if(document.fullscreen) {
event.preventDefault()
const popupMenu = document.getElementById('popupMenu');
if (popupMenu) {
const xPosition = event.clientX + window.pageXOffset;
const yPosition = event.clientY + window.pageYOffset;
popupMenu.style.left = `${xPosition}px`;
popupMenu.style.top = `${yPosition}px`;
}
popupMenu.style.display = "block"
}
});
function startPlayback() {
// Final prepare
seekbar.max = video.duration
const timestamps = document.getElementById("timestamps");
timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
// Show controls
try {
playPauseButton.innerHTML = pauseSVG;
vid.play();
aud.play();
didFirstTimePlay = true;
}
catch {}
if(!setTime) {
//FIXME: saved playback intentionally overwritten
aud.currentTime = 0
vid.currentTime = 0
seekbar.value = 0
setTime = true
}
setTimeout(()=>{
video.addEventListener("seeking", (event) => {
if(!didFirstTimePlay) return;
if(qua != "medium") {
video.pause()
canPlayPause = false;
aud.pause()
aud.currentTime = event.target.currentTime
}
});
}, 500)
2024-07-20 16:02:06 +02:00
}
2024-07-20 17:36:47 +02:00
const aud = document.getElementById("aud");
const vid = document.getElementById("video");
function shouldPlay() {
2024-07-26 22:40:10 +02:00
if(vid.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) {
2024-07-20 17:36:47 +02:00
startPlayback();
}
}
aud.addEventListener("canplaythrough", shouldPlay);
2024-07-27 13:23:38 +02:00
vid.addEventListener("canplaythrough", shouldPlay);
2024-07-20 17:36:47 +02:00
})
2024-07-03 00:09:19 +02:00
</script>
2024-05-10 21:59:34 +02:00
<% if(shortsui) { %>
<script>
// Function to apply styles after DOM has loaded
function applyStyles() {
const styles = `
.player {
width: fit-content;
margin-left: auto;
margin-right: auto;
height: fit-content;
}
.video-player-container {
max-width: fit-content;
min-width: fit-content;
margin-left: auto;
margin-right: auto;
aspect-ratio: var(--ptd-watch-width-ratio) / var(--ptd-watch-height-ratio);
}
`;
// Create a style element and set its content
const styleElement = document.createElement('style');
styleElement.innerHTML = styles;
// Append the style element to the document head
document.head.appendChild(styleElement);
}
2023-12-07 20:50:18 +01:00
2024-05-10 21:59:34 +02:00
// Event listener to call applyStyles after DOM has loaded
window.onload = applyStyles;
</script>
<% } %>
<% if (inv_vid.author.endsWith(' - Topic')) { %>
<script>
// Function to apply styles after DOM has loaded
function applyStyles() {
const styles = `
.player {
width: fit-content;
margin-left: auto;
margin-right: auto;
height: fit-content;
}
.video-player-container {
max-width: fit-content;
min-width: fit-content;
margin-left: auto;
margin-right: auto;
aspect-ratio: var(--ptd-watch-width-ratio) / var(--ptd-watch-height-ratio);
}
`;
// Create a style element and set its content
const styleElement = document.createElement('style');
styleElement.innerHTML = styles;
// Append the style element to the document head
document.head.appendChild(styleElement);
}
// Event listener to call applyStyles after DOM has loaded
window.onload = applyStyles;
</script>
<% } %>
<% 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>
2023-02-26 12:20:43 +01:00
2022-12-08 19:15:37 +01:00
2024-05-10 21:59:34 +02:00
<nav>
<div class=left>
2024-07-15 12:19:35 +02:00
<% if (k.Video.Channel.Name !== "twenty one pilots") { %>
2024-05-10 21:59:34 +02:00
<a title="PokeTube Homepage" class="class" href="/143" style=font-family:Inter,sans-serif;color:var(--text-color)> <img style="transform: scale(1.3);padding-left:0.9em;width: 8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo.svg?v=5"></a>
2024-07-15 12:19:35 +02:00
2024-05-10 21:59:34 +02:00
<% 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>
2024-07-15 12:19:35 +02:00
<% } %>
<% } %>
<% if (k.Video.Channel.Name === "twenty one pilots") { %>
<a title="PokeTube 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>
<% } %>
2024-05-10 21:59:34 +02:00
<% } %>
<% 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>
2022-08-09 01:39:07 +02:00
</div>
2022-08-09 23:42:18 +02:00
<div class="right">
2024-05-10 21:59:34 +02:00
<p id="fetch-count">
</p>
<a class="settings-icon" href="/game-hub"><i class="fa-light fa-gamepad-modern"></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-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>
<a href="/account-create" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-user"></i>
Account
</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 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 mode • on
</a>
<% } %>
<% if (a) { %>
<a title=title="Ambient 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 mode • 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/poketube" 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
2024-06-14 00:46:49 +02:00
</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
2024-05-10 21:59:34 +02:00
</a>
</div>
</div>
<a href="/account-create" class="account"><i class="fa-light fa-user"></i>Account</a>
2022-12-30 17:19:26 +01:00
2022-08-09 23:42:18 +02:00
</div>
</nav>
2022-06-22 11:53:57 +02:00
2024-05-10 21:59:34 +02:00
<div class="watch-page">
2023-06-18 18:22:11 +02:00
2024-05-10 21:59:34 +02:00
<div class="primary">
<div id="popupMenu" class="popup">
<div >
<a href="/download?v=<%=inv_vid.videoId%>" style="color: #fff;">
<i class="fa-light fa-download"></i> Download Video</a>
</div>
2024-07-03 10:05:43 +02:00
2024-05-10 21:59:34 +02:00
<div id="loopOption">
<i class="fa-light fa-repeat"> </i> Loop Video
2024-07-03 00:09:19 +02:00
</div>
<div id="muteOption">
2024-07-12 17:37:07 +02:00
<i class="fa-light fa-volume-xmark"> </i> Set volume to <span id="new">0%</span> (currently <span id="current">100%</span>)
2024-07-03 00:09:19 +02:00
</div>
<div id="syncOption">
<i class="fa-light fa-rotate"> </i> Sync Audio/Video
2024-07-08 17:06:33 +02:00
autoplay </div>
2024-05-10 21:59:34 +02:00
<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/poketube/issues/new" style="color: #fff;">
<i class="fa-light fa-flag"></i> Report broken proxy/video</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>
2024-06-09 10:40:00 +02:00
<div >
<a href="https://discord.poketube.fun" style="color: #fff;">
<i class="fa-brands fa-discord"></i> Discord Server</a>
</div>
2024-07-13 14:23:30 +02:00
<p style="margin: 0px;font-family: "poketube flex";color: gray;font-size: 11px;text-align: center;">PokeVideoPlayer v0.9-rev1 - licensed under gpl3-or-later</p>
2024-06-09 10:40:00 +02:00
2024-05-10 21:59:34 +02:00
</div>
2024-06-26 16:58:25 +02:00
<div id="<%=sha384(inv_vid.videoId)%>" class="video-player-container">
2024-07-03 00:09:19 +02:00
<% if (!qua) { //TODO - a %>
2024-07-19 14:43:48 +02:00
<audio id="aud" preload>
2024-07-05 15:59:13 +02:00
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=140&local=true" type="video/mp4" onerror="showErrorCard(event)"/>
2024-07-03 00:09:19 +02:00
</audio>
<% } else { %>
<audio id="aud"></audio>
<% } %>
2024-07-03 15:15:09 +02:00
<noscript>
<% if (!qua) { %>
2024-07-05 15:59:13 +02:00
<div id="nojs-high-res-warning" class="error-card">
2024-07-03 15:15:09 +02:00
<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>
2024-07-05 15:59:13 +02:00
<div id="buffer-failed-warning" class="error-card">
<p>
Oh no, the video couldn't be loaded :(
<br/>
You can try refreshing the page!
<br/>
<span></span>
</p>
</div>
2024-07-08 17:06:33 +02:00
<video class="player video-ambient-container" id="video" style="border-radius: 16px; box-sizing: border-box; min-width: 100%; display: block;" autoplay preload onerror="showErrorCard(event)">
2024-06-26 16:58:25 +02:00
<% if (isvidious) { %>
<% if (!qua) { %>
2024-07-03 12:47:56 +02:00
<%
let itag = '136'; // Default itag
2024-07-03 12:49:12 +02:00
inv_vid.adaptiveFormats.forEach(format => {
2024-07-03 12:47:56 +02:00
if (format.itag == '298') {
itag = '298';
}
});
%>
2024-07-05 15:59:13 +02:00
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=<%=itag%>&local=true" type="video/mp4; codecs="avc1.64001F, mp4a.40.2"" label="hd720" selected="true" onerror="showErrorCard(event)">
2024-05-10 21:59:34 +02:00
<% } %>
2024-06-26 16:58:25 +02:00
<% if (qua === "medium") { %>
2024-07-05 15:59:13 +02:00
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs="avc1.64001F, mp4a.40.2"" label="sd360" selected="true" onerror="showErrorCard(event)">
2024-06-26 16:58:25 +02:00
<% } %>
<% } %>
2022-08-09 01:39:07 +02:00
2024-06-26 16:58:25 +02:00
<% if (!isSchoolProxy) { %>
<% if (!isvidious) { %>
<% if (!qua) { %>
2024-07-05 15:59:13 +02:00
<source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/22" type="video/mp4; codecs="avc1.64001F, mp4a.40.2"" label="hd720" selected="true" onerror="showErrorCard(event)">
2024-06-26 16:58:25 +02:00
<% } %>
<% if (qua === "medium") { %>
2024-07-05 15:59:13 +02:00
<source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs="avc1.64001F, mp4a.40.2"" label="sd360" selected="true" onerror="showErrorCard(event)">
2024-06-26 16:58:25 +02:00
<% } %>
2024-05-10 21:59:34 +02:00
<% } %>
2024-06-26 16:58:25 +02:00
<% } %>
2022-08-09 01:39:07 +02:00
2024-06-26 16:58:25 +02:00
<% if (isSchoolProxy) { %>
<% if (!qua) { %>
2024-07-05 15:59:13 +02:00
<source src="https://tube-proxy.ashley0143.xyz/proxy/media/<%=inv_vid.videoId%>/22" type="video/mp4; codecs="avc1.64001F, mp4a.40.2"" label="hd720" selected="true" onerror="showErrorCard()">
2024-05-10 21:59:34 +02:00
<% } %>
2024-06-26 16:58:25 +02:00
<% if (qua === "medium") { %>
2024-07-05 15:59:13 +02:00
<source src="https://tube-proxy.ashley0143.xyz/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs="avc1.64001F, mp4a.40.2"" label="sd360" selected="true" onerror="showErrorCard()">
2024-06-26 16:58:25 +02:00
<% } %>
<% } %>
2023-05-08 18:24:44 +02:00
2024-06-26 16:58:25 +02:00
<% 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">
<% }) %>
<% } %>
2024-05-10 21:59:34 +02:00
2024-06-26 16:58:25 +02:00
<% 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">
<% } %>
2024-05-10 21:59:34 +02:00
</video>
2024-07-03 00:09:19 +02:00
<div id="controls"> <!-- TODO: CONTROLS -->
<button id="play-pause" class="control-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-circle-outline</title><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>
</button>
<div id="seekbar">
<input type="range" min="0" step="any" value="0" id="duration-slider">
</div>
<p id="timestamps">...</p>
<!--
<div>
<span>volume</span>
<input type="range" min="0" max="1" step="any" value="1" id="volume-slider">
</div>
-->
2024-06-26 16:58:25 +02:00
2024-07-03 00:09:19 +02:00
</div>
2024-05-10 21:59:34 +02:00
<% 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>
<% } %>
2023-05-08 18:24:44 +02:00
2024-05-10 21:59:34 +02:00
<% 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>
<% } %>
2023-05-08 18:24:44 +02:00
2024-05-10 21:59:34 +02:00
<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>
2024-05-13 18:04:04 +02:00
<a onclick="toggleTheaterMode()"" class="theather"><i class="fa-sharp fa-light fa-up-right-and-down-left-from-center"></i> Theater</a>
2024-07-03 00:09:19 +02:00
<a onclick="document.documentElement.requestFullscreen()" class="theather"><i class="fa-sharp fa-light fa-up-right-and-down-left-from-center"></i> Full screen</a>
2024-05-10 21:59:34 +02:00
<% 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>
2024-07-03 12:22:46 +02:00
Video Format :<% if (!qua) { %> <%= itag_hd %> (720p) openh264 ( https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz <% } %>
2024-05-10 21:59:34 +02:00
<% 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") { %>
2024-07-03 12:22:46 +02:00
Audio Format: 140 ( High ) <br>
2024-05-10 21:59:34 +02:00
<% } %>
PokeTubeEncryptID: <%=sha384(inv_vid.videoId)%> <br>
<% if (isvidious) { %>
Proxy : <%= u.replace("https://","") %> - refresh the page to change the proxy location<br>
<% } %>
<% if (!isvidious) { %>
2023-05-08 18:24:44 +02:00
2024-05-10 21:59:34 +02:00
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>
2024-05-11 18:00:06 +02:00
<% if (k.Video.Channel.id != "UCBQZwaNPFfJ1gZ1fLZpAEGw") { %>
2024-05-10 21:59:34 +02:00
<% if (isvidious) { %>
2022-11-24 21:29:18 +01:00
2024-05-10 21:59:34 +02:00
Mystery text : <%=btoa(inv_vid.videoId + " i " + " lov " + " u " + u.replace("https://","") ) %> <br>
<% } %>
<% if (!isvidious) { %>
2022-11-01 21:29:36 +01:00
2024-05-10 21:59:34 +02:00
Mystery text : <%=btoa(inv_vid.videoId + " i " + " lov " + " u " + "tube-proxy.poketube.fun" ) %> <br>
<% } %>
2024-05-11 18:00:06 +02:00
<% } %>
<% if (k.Video.Channel.id == "UCBQZwaNPFfJ1gZ1fLZpAEGw") { %>
2024-05-11 18:02:12 +02:00
Mystery text : <%=btoa(Date.now() + "dmaorg.info/found/15398642_14/clancy.html" + inv_vid.videoId) %> <br>
2024-05-11 18:00:06 +02:00
<% } %>
2022-11-01 21:29:36 +01:00
2024-05-10 21:59:34 +02:00
143 : true <br>
2024-05-10 21:37:49 +02:00
</div>
2024-05-10 21:59:34 +02:00
</div>
</div>
<div class="video-info" >
2024-06-14 00:22:13 +02:00
<% if (universe) { %>
<div class="video-info-panel gradient" style="display:none;">
<% } %>
<% if (!universe) { %>
2024-05-10 21:59:34 +02:00
<div class="video-info-panel gradient">
2024-06-14 00:22:13 +02:00
<% } %>
2024-05-10 21:59:34 +02:00
<% 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") { %>
2024-07-13 14:02:19 +02:00
<div style="float: left;font-size: small;font-family: ubuntu;margin-bottom: 1em;"> <i title="hq audio" class="fa-light fa-waveform-lines"></i> High Quality Audio </div>
2024-05-10 21:59:34 +02:00
<% } %>
2024-07-13 14:02:19 +02:00
<%
let nonhditag = '136'; // Default itag
inv_vid.adaptiveFormats.forEach(format => {
if (format.itag == '298') {
nonhditag = '298';
}
});
%>
<% if (inv_vid.genre !== "Music" && nonhditag !== "298") { %>
2024-05-10 21:59:34 +02:00
<a href="#connections" style="font-weight: bolder;font-family: sans-serif;color: var(--text-color);font-size: small;"> Jump to Connections </a>
2024-07-13 14:02:19 +02:00
<% } %>
<% 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> 60 FPS video </div>
2024-05-10 21:59:34 +02:00
<% } %>
<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%> " 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">
2022-11-24 21:29:18 +01:00
2024-05-10 21:59:34 +02:00
<%=convert(engagement.dislikes)%> <i class="fa-light fa-thumbs-down" style="margin-left: 1.5px;"></i>
</div> </div>
2023-02-20 16:28:52 +01:00
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
</div>
<div style="display: flex;">
2023-02-20 16:28:52 +01:00
2024-05-10 21:59:34 +02:00
<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="">
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
<i class="fa-light fa-download"></i>
Download
2023-02-20 16:28:52 +01:00
</div>
2024-05-10 21:59:34 +02:00
</a>
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('IGNORE_THIS_PLEASE)')) { %>
2024-07-18 16:10:36 +02:00
<% if (support != undefined && linkto == undefined) { %>
2023-02-20 16:28:52 +01:00
2024-05-10 21:59:34 +02:00
<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">
2022-11-24 21:29:18 +01:00
2024-05-10 21:59:34 +02:00
<i class="fa-light fa-heart"></i>
Thanks!
</div>
2023-01-18 12:26:48 +01:00
</div>
2022-11-24 21:29:18 +01:00
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
</a>
<% }%> <% }%>
2024-07-16 21:52:03 +02:00
<% }%>
2024-05-10 21:37:49 +02:00
2024-07-18 16:10:36 +02:00
<% if (support == undefined && linkto == undefined) { %>
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('IGNORE_THIS_PLEASE)')) { %>
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
<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">
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
<i class="fa-light fa-rocket-launch"></i>
Redirect!
</div>
</div>
2024-07-16 21:45:55 +02:00
2024-05-10 21:59:34 +02:00
</a>
2024-07-16 22:31:42 +02:00
<% }%> <% }%>
2024-07-18 15:59:27 +02:00
<% }%>
2024-07-18 15:56:59 +02:00
<% if (support == undefined && linkto != undefined) { %>
2024-07-17 12:22:23 +02:00
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('IGNORE_THIS_PLEASE)')) { %>
<div class="new-button button-encryption">
2024-07-18 15:46:11 +02:00
<a title="Stream The Song :3" style="color:var(--text-color);text-decoration: none;" href="https://<%= linkto.subdomain %>.lnk.to/<%= linkto.path %>">
2024-07-17 12:22:23 +02:00
<div class="pill-button">
2024-07-18 15:40:26 +02:00
<i class="fa-light fa-music-note"></i>
Stream!
2024-07-17 12:22:23 +02:00
</div>
</div>
</a>
<% }%> <% }%>
<% }%>
2024-05-10 21:59:34 +02:00
<% 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>
<% }%>
2024-07-16 21:52:03 +02:00
2024-05-10 21:59:34 +02:00
<% 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">
<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(channelurlfixer(inv_vid.descriptionHtml)).replace(/\n/g, " <br> ").replace(/twitter\.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) == " ") { %>
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
<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>
Date of upload: <%=date%> ^^ <br>
<hr style="clear: both;display: none;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
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>
2024-06-10 23:29:10 +02:00
2024-06-11 00:24:47 +02:00
<%
2024-07-04 01:11:22 +02:00
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';
2024-06-11 00:24:47 +02:00
2024-07-04 01:11:22 +02:00
const userScoreClass = userScore >= 98.00 ? 'rainbow-gradient' : '';
2024-06-10 23:29:10 +02:00
%>
2024-06-11 00:20:12 +02:00
2024-06-11 00:24:47 +02:00
2024-06-11 00:27:48 +02:00
<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>
2024-07-04 01:14:01 +02:00
User score: <span style="color: <%= userScoreColor %>;"><%= userScore %></span>- <span class="<%= userScoreClass %>"> <%= userScoreLabel %> </span><br><br>
2024-05-10 21:59:34 +02:00
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>
<% 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">
<% inv_vid?.keywords.forEach(x => { %>
<div class="tag">
<a href="/hashtag/<%=x %>" style="color:var(--text-color)">
<%=x %>
</a>
</div>
<% }) %>
</div>
<% } %>
</details>
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
<% if (inv_vid.genre === "Gaming") { %>
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
<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>
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
</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 (!instagram) { %>
<div style="margin-left: -131px;margin-top: 10px;">
Nyo connections found on the description ;_; <a href="https://codeberg.org/ashley/poketube/issues/"> report a 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="<%- 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>
<% } %>
</div>
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
</div>
2023-06-18 18:22:11 +02:00
2024-05-10 21:59:34 +02:00
</p>
<div>
2022-10-12 17:02:18 +02:00
2024-05-10 21:59:34 +02:00
</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>
2022-10-12 17:02:18 +02:00
2024-05-10 21:59:34 +02:00
<div>
2022-09-25 14:58:02 +02:00
2024-05-10 21:59:34 +02:00
<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 %> <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: -1em;">
<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 %><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>
2022-09-26 17:22:02 +02:00
2024-05-10 21:59:34 +02:00
</div>
2022-09-26 17:22:02 +02:00
2022-09-25 14:58:02 +02:00
2024-05-10 21:59:34 +02:00
<% } %>
2022-10-27 17:28:50 +02:00
2024-05-10 21:59:34 +02:00
<% if(!inv.comments) { %>
</div>
2022-10-27 17:28:50 +02:00
2024-05-10 21:59:34 +02:00
<% } %>
2022-10-27 17:28:50 +02:00
2024-05-10 21:59:34 +02:00
<% if(inv.comments) { %>
</div>
2023-04-14 23:08:06 +02:00
2024-05-10 21:59:34 +02:00
<% } %>
2024-01-12 08:46:20 +01:00
2024-02-01 12:28:44 +01:00
2024-05-10 21:59:34 +02:00
<div class="recommended-list" align="center">
2024-06-14 00:22:13 +02:00
<% if (universe) { %>
2024-06-14 00:25:08 +02:00
<% if (k.Video.Channel.Name == "7clouds") { %>
2024-06-14 00:22:13 +02:00
<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;"
<% } %>
2024-06-14 00:25:08 +02:00
<% 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>
2024-06-14 00:22:13 +02:00
<% } %>
2024-05-10 21:59:34 +02:00
<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>
2024-02-01 12:28:44 +01:00
2024-05-10 21:59:34 +02:00
<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>
2024-02-01 12:28:44 +01:00
2024-05-10 21:59:34 +02:00
</a>
</div>
2024-02-01 12:28:44 +01:00
2024-05-10 21:59:34 +02:00
<% if (!f) { %>
2024-02-02 11:07:41 +01:00
2024-05-10 21:59:34 +02:00
<div class="tags rec" >
2024-05-10 21:37:49 +02:00
2024-05-10 21:59:34 +02:00
<div class="tag" style="background:var(--chip-background-hover)">
Recommended Videos
</div>
<a style="color:#fff" href="/watch?v=<%= inv_vid.videoId %>&f=true" class="tag">
Uploaded by <%=k.Video.Channel.Name%>
</a>
</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) { %>
2024-05-31 13:16:44 +02:00
<%
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);
}
});
%>
2022-06-08 18:05:47 +02:00
2024-05-10 21:59:34 +02:00
<% inv_vid?.recommendedVideos.forEach(x => { %>
2024-07-10 14:23:12 +02:00
<div class="fade-in video" data-channel="<%= x.authorId %>">
2024-05-31 13:16:44 +02:00
<% if (!optout) { %>
2024-07-25 19:02:44 +02:00
<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 %>">
2024-05-31 13:16:44 +02:00
<span class="video-length"><%- turntomins(x.lengthSeconds) || "LIVE"%></span>
<% } %>
<% if (optout) { %>
2024-07-25 19:02:44 +02:00
<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 %>">
2024-05-31 13:16:44 +02:00
<span class="video-length"><%- x.duration || "LIVE"%></span>
<% } %>
</a>
2024-05-10 21:59:34 +02:00
<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>
2024-05-31 13:16:44 +02:00
<% } %>
<% 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)) { %>
2024-05-31 13:20:43 +02:00
<i class="fa-light fa-music-note" style="margin-left: 0em;" title="verified artist channel"></i>
2024-05-31 13:16:44 +02:00
<% } else { %>
<i class="icon ion ion-md-checkmark-circle" style="margin-left: 0em;" title="verified channel"></i>
<% } %>
2024-05-10 21:37:49 +02:00
<% } %>
2024-05-31 13:16:44 +02:00
</span>
</a>
<div class="video-views">
<%= convert(x.viewCount) %> views
</div>
</div>
2024-05-10 21:59:34 +02:00
</div>
2024-05-31 13:16:44 +02:00
</div>
<% }) %>
2024-05-10 21:59:34 +02:00
<% } %>
<% } %>
2023-09-13 21:13:00 +02:00
2024-05-10 21:59:34 +02:00
2023-09-13 21:13:00 +02:00
2024-05-10 21:59:34 +02:00
<% if (f) { %>
<% channel_uploads.latestVideos.forEach(x => { %>
<div class="fade-in video">
2024-07-25 19:02:44 +02:00
<% 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>
2024-05-10 21:59:34 +02:00
<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>
<% } %>
2022-07-09 09:06:53 +02:00
2024-05-10 21:59:34 +02:00
<% } %> </details>
2023-11-16 18:26:48 +01:00
2024-05-10 21:59:34 +02:00
<% if (lyrics && !r) { %>
<div style="font-family:Inter,sans-serif;;white-space:yes;" align="center">
2022-07-31 11:41:20 +02:00
2024-05-10 21:59:34 +02:00
<% if (optout) { %>
<a href="/watch?v=<%=inv_vid.videoId%>&r=f">Lyrics (Wow)</a>
2022-08-06 19:07:06 +02:00
2024-05-10 21:59:34 +02:00
<% } %>
<% if (!optout) { %>
<a href="/watch?v=<%=inv_vid.videoId%>&r=f">Lyrics (Wow)</a>
<% } %>
2024-05-10 21:37:49 +02:00
</div>
2024-05-10 21:59:34 +02:00
<% } %>
<div style="font-family:poketube flex,sans-serif;font-weight: 500;font-stretch: extra-expanded;" align="center">
<div>Options got Moved to the <i class="fa-light fa-gear loaded"></i> icon :3 </div>
</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);
}
}
2024-05-13 18:04:04 +02:00
2024-05-10 21:59:34 +02:00
<% 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>
2024-05-13 18:04:04 +02:00
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';
}
}
2024-05-10 21:59:34 +02:00
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 + `®ion=${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 PokeTube -->
<% 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 = 200
const canvasOpacity = "0.4"
let intervalId
let oddFrame = true
const drawFrame = () => {
if (oddFrame) {
oddCtx.drawImage(AMvideo, 0, 0, oddCanvas.width, oddCanvas.height)
transitionToOddCanvas()
} else {
evenCtx.drawImage(AMvideo, 0, 0, evenCanvas.width, evenCanvas.height)
transitionToEvenCanvas()
}
oddFrame = !oddFrame
};
const transitionToOddCanvas = () => {
oddCanvas.style.opacity = canvasOpacity
evenCanvas.style.opacity = "0"
}
const transitionToEvenCanvas = () => {
evenCanvas.style.opacity = canvasOpacity
oddCanvas.style.opacity = "0"
}
const drawStart = () => {
intervalId = window.setInterval(drawFrame, frameIntervalMs)
}
const drawPause = () => {
if (intervalId) window.clearInterval(intervalId)
}
const init = () => {
2024-07-06 11:20:55 +02:00
//fixes a issue where firefox/chromium fails to load the ambinet mode and doesnt load it. - please dont remove this line lmao
video.pause();video.play();
// DO NOT REMOVE
2024-05-10 21:59:34 +02:00
AMvideo.addEventListener("play", drawStart, false)
AMvideo.addEventListener("pause", drawPause, false)
AMvideo.addEventListener("ended", drawPause, false)
2024-07-06 11:20:55 +02:00
2024-05-10 21:59:34 +02:00
oddCanvas.style.transition = evenCanvas.style.transition = `opacity ${frameIntervalMs}ms`
}
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;
filter: blur(200px);
transform: scale(1.1);
z-index: -1;
}
</style>
<% } %>
<!-- BUNDLE -->
<!-- BUNDLE -->
<!-- BUNDLE -->
2024-07-03 00:09:19 +02:00
<!-- BUNDLE --><script src="/static/app.bundle.js?version=08.05.2024&bundledate=080524_1657a" > </script><!-- BUNDLE -->
2024-05-10 21:59:34 +02:00
<!-- BUNDLE -->
<!-- BUNDLE -->
<!-- BUNDLE -->
2024-07-03 00:09:19 +02:00
2024-05-10 21:59:34 +02:00
<% if(secure) { %>
<% if(!dnt_val) { %>
<!-- matomo -->
<noscript><p><img src="//data.poketube.fun/matomo.php?idsite=2&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>
2024-07-22 12:43:48 +02:00
2024-05-10 21:59:34 +02:00
</ptd-app-ejs>
</body>
2024-02-17 20:06:42 +01:00
2024-05-10 21:59:34 +02:00
</html>
2024-01-22 15:16:02 +01:00
2024-05-10 21:59:34 +02:00
<% } %>
2022-12-23 12:37:01 +01:00
2024-06-26 16:59:19 +02:00
<% 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) { %>
2024-07-13 13:03:26 +02:00
<source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs="avc1.64001F, mp4a.40.2"" label="hd720" selected="true">
2024-06-26 16:59:19 +02:00
<% } %>
<% if (qua === "medium") { %>
<source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs="avc1.64001F, mp4a.40.2"" 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;">
2024-07-13 13:03:26 +02:00
2024-06-26 16:59:19 +02:00
<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>▲</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> 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>▲</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>▲</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">
2024-07-25 19:02:44 +02:00
<% 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>
2024-06-26 16:59:19 +02:00
<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">
2024-07-25 19:02:44 +02:00
<% 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>
2024-06-26 16:59:19 +02:00
<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.
}
2024-07-03 00:09:19 +02:00
const aud = document.getElementById("aud");
const vid = document.getElementById("video");
2024-06-26 16:59:19 +02:00
// Save and resume video progress
const videoId = new URLSearchParams(window.location.search).get('v');
const localStorageKey = `progress-${videoId}`;
2024-07-03 00:09:19 +02:00
2024-06-26 16:59:19 +02:00
function saveProgress() {
2024-07-03 00:09:19 +02:00
console.log(`Saved progress @ ${video.currentTime}`)
2024-06-26 16:59:19 +02:00
localStorage.setItem(localStorageKey, video.currentTime);
}
function removeProgress() {
localStorage.removeItem(localStorageKey);
}
function resumeProgress() {
const progress = localStorage.getItem(localStorageKey);
if (progress) {
2024-07-03 00:09:19 +02:00
aud.currentTime = progress;
vid.currentTime = progress;
2024-06-26 16:59:19 +02:00
}
}
video.addEventListener('timeupdate', () => {
if (Math.floor(video.currentTime) % 1 === 0) {
2024-07-03 00:09:19 +02:00
2024-06-26 16:59:19 +02:00
saveProgress();
}
});
video.addEventListener('ended', () => {
removeProgress();
});
2024-07-03 00:09:19 +02:00
window.addEventListener('DOMContentLoaded', () => {
throw 1;
2024-06-26 16:59:19 +02:00
</script>
<noscript>
<style>
.auto-play{
display:none !important;
}
</style>
</noscript>
<% if (!optout) { %>
<script src="/static/data-mobile.js"></script>
<% } %>
2024-07-03 00:09:19 +02:00
2024-06-26 16:59:19 +02:00
</div>
</body>
</html>
</body>
<% } %>
<% } %>
<% } catch (error) { %>
<%- error %>
<% } %>
