2022-06-25 11:01:40 +02:00
<!--
2022-03-05 08:53:15 +01:00
This Source Code Form is subject to the terms of the GNU General Public License:
2022-05-17 22:08:31 +02:00
Copyright (C) 2021-2022 POKETUBE (https://github.com/iamashley0/poketube)
2022-03-05 08:53:15 +01:00
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/.
-->
2022-02-13 17:34:25 +01:00
<!DOCTYPE html>
2022-06-26 07:03:24 +02:00
2022-05-18 18:46:36 +02:00
<% if (e === false) { %> <!-- if ?e=false,dont show up the meta tags -->
2022-06-23 14:45:59 +02:00
2022-03-02 21:11:35 +01:00
<% } %>
<% if (!e) { %>
2022-03-06 14:55:07 +01:00
<meta content="<%=video.Title%>" name=title>
2022-05-20 18:22:27 +02:00
<meta content="<%=color%>" name="theme-color">
2022-01-23 21:51:12 +01:00
<meta content=player name=twitter:card>
2022-06-24 09:45:33 +02:00
<meta content="<%=video.Channel.Name%>" name=twitter:author>
2022-01-23 21:51:12 +01:00
<meta content=@youtube name=twitter:site>
2022-06-04 18:36:54 +02:00
<meta content="https://poketube.fun/watch?v=<%=video.id%>" name=twitter:url>
2022-03-06 14:55:07 +01:00
<meta content="<%=video.Title%>" name=twitter:title>
2022-06-04 18:36:54 +02:00
<meta content="https://i.ytimg.com/vi/<%=video.id%>/maxresdefault.jpg" name=twitter:image>
<meta content="https://www.youtube.com/embed/<%=video.id%>" name=twitter:player>
2022-01-23 21:51:12 +01:00
<meta content=1280 name=twitter:player:width>
<meta content=720 name=twitter:player:height>
2022-06-04 21:01:29 +02:00
<link href="https://poketube.fun/watch?v=<%=video.id%>" itemprop=url>
2022-06-04 18:36:54 +02:00
<link href="http://www.youtube.com/channel/<%=video.Channel.id%>" itemprop=url>
2022-03-27 11:44:25 +02:00
<% } %> <!-- close the } -->
2022-06-25 11:01:40 +02:00
<link href=/css/yt-ukraine.svg?v=6 rel=icon>
2022-03-27 11:44:25 +02:00
<title> <%=video.Title%> - PokeTube</title>
2022-02-21 20:29:28 +01:00
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel=stylesheet>
2022-03-27 11:44:25 +02:00
<link href=/css/app-cdn.min.css rel=stylesheet>
2022-02-21 20:29:28 +01:00
<link href=/css/app.main.css rel=stylesheet>
2022-06-24 12:30:38 +02:00
<link href="/css/watch.main.css?v=56" rel=stylesheet>
2022-06-26 10:27:52 +02:00
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@900&family=Sigmar+One&display=swap" rel=stylesheet>
2022-06-22 11:53:57 +02:00
<link href=https://pro.fontawesome.com/releases/v5.15.3/css/all.css rel=stylesheet>
2022-03-05 08:53:15 +01:00
<style>
a.class:hover {
text-decoration:underline;
font-weight:bold
2022-05-18 20:16:55 +02:00
}
summary{
2022-06-08 18:05:47 +02:00
color:gray;
2022-05-18 20:16:55 +02:00
}
summary:hover{
2022-06-08 18:05:47 +02:00
color:white;
2022-03-05 08:53:15 +01:00
}
</style>
2022-05-17 22:08:31 +02:00
<!-- WIGGLE WIGGLE WIGGLE -->
<style>
body{
overflow-x: hidden; /* Hide horizontal scrollbar */
2022-06-24 09:45:33 +02:00
color:#111111
2022-05-17 22:08:31 +02:00
}
.animated {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
@-webkit-keyframes wiggle {
0% { -webkit-transform: skewX(9deg); }
10% { -webkit-transform: skewX(-8deg); }
20% { -webkit-transform: skewX(7deg); }
30% { -webkit-transform: skewX(-6deg); }
40% { -webkit-transform: skewX(5deg); }
50% { -webkit-transform: skewX(-4deg); }
60% { -webkit-transform: skewX(3deg); }
70% { -webkit-transform: skewX(-2deg); }
80% { -webkit-transform: skewX(1deg); }
90% { -webkit-transform: skewX(0deg); }
100% { -webkit-transform: skewX(0deg); }
}
@keyframes wiggle {
0% { transform: skewX(9deg); }
10% { transform: skewX(-8deg); }
20% { transform: skewX(7deg); }
30% { transform: skewX(-6deg); }
40% { transform: skewX(5deg); }
50% { transform: skewX(-4deg); }
60% { transform: skewX(3deg); }
70% { transform: skewX(-2deg); }
80% { transform: skewX(1deg); }
90% { transform: skewX(0deg); }
100% { transform: skewX(0deg); }
}
.wiggle {
-webkit-animation-name: wiggle;
animation-name: wiggle;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
.animated.wiggle {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
}
2022-06-22 11:53:57 +02:00
:root {
--text-primary: #fff;
--text-secondary: #fff;
--text-link: #3ea6ff;
2022-06-24 09:45:33 +02:00
--app-background: #111111;
2022-06-22 11:53:57 +02:00
--context-menu-background: #333;
--border-color: #444;
--item-hover-background: #373737;
--item-active-background: #383838;
--top-bar-background: #202020;
--guide-background: #212121;
--thumbnail-background: #252525;
--channel-info-background: #181818;
--channel-contents-background: #0f0f0f;
}
.alert {
padding: 20px;
background-color: #f44336;
color: white;
opacity: 1;
transition: opacity 0.6s;
margin-bottom: 15px;
}
.alert.success {background-color: #04AA6D;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
2022-05-17 22:08:31 +02:00
</style>
2022-03-02 21:11:35 +01:00
<body>
2022-06-22 11:53:57 +02:00
<div class="app">
<nav>
2022-06-26 07:03:24 +02:00
<div class=left><a class="class" href="/143" style=font-family:Inter,sans-serif;color:#fff> <img style="width: 6em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo.svg?v=5"> <a href="/domains"><i style="display: block;margin-left: auto;margin-right: auto;" class="fas fa-server"></i> </a></div>
2022-02-21 20:29:28 +01:00
<div class=middle>
2022-06-08 18:05:47 +02:00
<form action=/search><input class=search-bar autocomplete="on" id=fname name=query style="color:#fff;font-family:Inter,sans-serif;"> <button class="btn btn-success" type=submit><i class="fas fa-search"></i></button></form>
2022-02-13 16:32:10 +01:00
</div>
2022-05-18 20:16:55 +02:00
<div class=right><a href="/privacy"><i class="fas fa-shield"></i></a><a href="/video/upload?from="><i class="fas fa-video"></i></a> <a href="https://github.com/iamashley0/poketube/"><i class="fab fa-git-alt"></i></a><a href="https://github.com/iamashley0/poketube/issues"><i class="fas fa-bug"></i></a></a></div>
2022-06-22 11:53:57 +02:00
2022-02-13 16:32:10 +01:00
</nav>
2022-06-26 10:27:52 +02:00
2022-06-26 07:03:24 +02:00
2022-06-22 11:53:57 +02:00
<div class="watch-page">
<div class="primary">
<div class="video-player-container">
2022-06-24 12:30:38 +02:00
<video class="player" style="border-radius: 10px;" autoplay controls src="<%=url%>" poster="https://i.ytimg.com/vi/<%=video.id%>/sddefault.jpg?v=607ddcd4">
2022-06-26 07:03:24 +02:00
</video>
2022-06-24 12:30:38 +02:00
</div><br>
2022-06-22 11:53:57 +02:00
<div class="video-info">
<div class="video-title" style="font-family:Inter,sans-serif;font-weight:900;white-space:yes;"><%=video.Title%></div>
<p class="video-sub-info description">
2022-06-24 15:10:38 +02:00
<span><%=engagement.viewCount.toLocaleString()%> views - Uploaded on <%=date%> ^^
2022-06-23 17:38:07 +02:00
</span> <br><br> <%-String(video.Description).replace(/\n/g, " <br> ")%></center>
2022-06-22 11:53:57 +02:00
</p>
<div class="video-info-buttons">
<div>
<i class="fas fa-thumbs-up"></i>
<%=engagement.likes.toLocaleString()%>
</div>
<div>
<i class="fas fa-thumbs-down"></i> <%=engagement.dislikes.toLocaleString()%>
</div>
<div>
<a style="color:#fff" href="/api/video/download?v=<%=video.id%>">
<i class="fas fa-download"></i>
Download
</a>
2022-06-29 23:16:06 +02:00
2022-06-22 11:53:57 +02:00
<a style="color:#fff" href="/old/watch?v=<%=video.id%>">
<i class="fas fa-history"></i>
Watch in old UI
</a>
</div>
</div>
</div>
2022-06-24 15:10:38 +02:00
<div class="channel-info__bordered" name="chnl">
2022-06-23 17:38:07 +02:00
<a href="/channel?id=<%=video.Channel.id%>" class="avatar">
<img src=" <%= k.Video.Channel.Avatar[1].$t %>">
2022-06-22 11:53:57 +02:00
</a>
<div class="name">
2022-06-23 17:38:07 +02:00
<a href="/channel?id=<%=video.Channel.id%>" > <%=video.Channel.Name%></a>
2022-06-22 11:53:57 +02:00
</div>
<div class="subscriber-count">
2022-06-23 17:38:07 +02:00
<%= k.Video.Channel.subscriberCount %>
2022-06-22 11:53:57 +02:00
</div>
2022-06-24 15:10:38 +02:00
<button class="subscribe-button" ><a style="color:#fff" href="https://www.youtube.com/channel/<%=video.Channel.id%>?view_as=subscriber?sub_confirmation=1">Suscribe</a></button>
2022-06-22 11:53:57 +02:00
</div>
</div>
2022-06-26 07:03:24 +02:00
2022-06-23 17:38:07 +02:00
2022-06-22 11:53:57 +02:00
2022-06-24 12:55:31 +02:00
<div class="recommended-list" style="background-color:#1c1c1c;border-radius:25px;margin: 10px;">
2022-06-26 10:27:52 +02:00
2022-06-29 23:16:06 +02:00
<% if (optout) { %>
<% } %>
<% if (!optout) { %>
<!-- this allows us to see how much poketube users watched this video,we dont collect your ip or any of your personal information while making this. we dont collect or share your personal information as we said on our privacy policy:https://poketube.fun/privacy
2022-06-26 10:27:52 +02:00
this process does not use cookies,and it does not collect any information whatsoever execpt how many users watched this spesific video
we use something called matomo to do this,and since ip adreses are collected by def on matomo,we closed that on our instance. no infromation is collected from you.
we dont collect or share your personal infromation,period.
if you want to change the url - see config in server.js
-->
2022-06-29 23:16:06 +02:00
<img src="<%=t%>t/rep.gif?video_id=<%=video.id%>" style="width: 0;visibility: hidden;">
<% } %>
2022-06-26 07:03:24 +02:00
<div style="font-family:Inter,sans-serif;font-weight:900;white-space:yes;" align="center">
2022-06-26 10:27:52 +02:00
2022-06-29 23:16:06 +02:00
<a href="https://youtube.com/watch?v=<%=video.id%>">Open On YouTube</a> • <a href="/privacy">Privacy</a> • <a href="https://github.com/iamashley0/poketube/">Git</a>
2022-06-23 17:38:07 +02:00
</div>
2022-06-29 23:16:06 +02:00
<% if (optout) { %>
<% } %>
<% if (!optout) { %>
<div style="font-family:Inter,sans-serif;font-weight:900;white-space:yes;" align="center">
<a href="/watch?v=<%=video.id%>&t=f">
Opt out of stats </a> ( more info:<a href="/privacy">P.p</a>)
</div>
<% } %>
2022-06-22 15:34:25 +02:00
<% if (lyrics && !r) { %>
2022-06-29 23:16:06 +02:00
<% if (optout) { %>
Ayo u are lucy! this music video has lyrics! wanna see em? <a href="/watch?v=<%=video.id%>&r=f&t=f">Click this!</a>
<% } %>
<% if (!optout) { %>
Ayo u are lucy! this music video has lyrics! wanna see em? <a href="/watch?v=<%=video.id%>&r=f">Click this!</a>
<% } %>
2022-06-22 15:34:25 +02:00
<% } %>
<% if (!r) { %>
2022-06-24 15:10:38 +02:00
<p style="font-family:Inter,sans-serif;font-weight:900;white-space:yes;" align="center">
2022-06-22 15:34:25 +02:00
you migth also watch these... (ig?)
</p>
2022-06-26 07:03:24 +02:00
<% k.Video.Recommendations.Video.forEach(x => { %>
<div class="video">
2022-06-29 23:16:06 +02:00
<% if (!optout) { %>
2022-06-24 09:45:33 +02:00
<a href="/watch?v=<%= x.id %>" class="thumbnail" style="background-image: url('https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBmAOZV7CM3NdDKlEFxGX7PpI5UWQ');border-radius: 10px;" > <span class="video-length"><%=x.duration %></span>
2022-06-29 23:16:06 +02:00
<% } %>
<% if (optout) { %>
<a href="/watch?v=<%= x.id %>&t=f" class="thumbnail" style="background-image: url('https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBmAOZV7CM3NdDKlEFxGX7PpI5UWQ');border-radius: 10px;" > <span class="video-length"><%=x.duration %></span>
<% } %>
2022-06-22 15:34:25 +02:00
</a>
<div class="info">
2022-06-29 23:16:06 +02:00
<% if (!optout) { %>
2022-06-22 15:34:25 +02:00
<a href="/watch?v=<%= x.id %>" class="title max-lines-2"><%= x.Title %></a>
2022-06-29 23:16:06 +02:00
<% } %>
<% if (optout) { %>
<a href="/watch?v=<%= x.id %>&t=f" class="title max-lines-2"><%= x.Title %></a>
<% } %>
2022-06-22 15:34:25 +02:00
<div>
2022-06-26 07:03:24 +02:00
<a class="max-lines-2" href="/channel?id=<%= x.Channel.id %>"><%=x.Channel.Name %></a>
2022-06-22 15:34:25 +02:00
<div>
2022-06-24 15:10:38 +02:00
<%= x.uploadedAt %> </div>
2022-06-22 15:34:25 +02:00
</div>
</div>
</div>
<% }) %>
<% } %>
2022-06-22 11:53:57 +02:00
2022-03-11 21:42:31 +01:00
2022-06-22 11:53:57 +02:00
<% if (lyrics) { %>
2022-06-22 15:34:25 +02:00
<% if (r === "f") { %>
<a href="/watch?v=<%=video.id%>">See the Recommended videos instead</a>
2022-06-23 14:45:59 +02:00
<a href="https://github.com/iamashley0/poketube/issues">Report wrong lyrics!</a>
2022-06-22 11:53:57 +02:00
<div align="center">
<h1 style="color:#fff;font-family: 'Inter', sans-serif;font-weight: bold;white-space:yes;font-size:45;"> Lyrics
</h1>
<p>
See how our lyrics search works:<a href="https://github.com/iamashley0/poketube/blob/main/src/lyrics.js">Here</a>
</p>
2022-02-21 20:29:28 +01:00
<p style="color: white;">
<p style=color:#fff>
<%-lyrics%>
2022-06-08 18:05:47 +02:00
</p>
2022-06-22 15:34:25 +02:00
<% } %>
2022-06-08 18:05:47 +02:00
2022-06-22 15:34:25 +02:00
<% } %> </details>
</div>
2022-06-26 07:03:24 +02:00
</div>
2022-06-22 11:53:57 +02:00
</div>
2022-06-26 07:03:24 +02:00
2022-06-22 11:53:57 +02:00
</body>
</html>
2022-03-02 21:11:35 +01:00
</body>
