From fed79718159973127d2b3b4e553bfb363c08ef20 Mon Sep 17 00:00:00 2001
From: Ashley <iamashley@tuta.io>
Date: Mon, 21 Feb 2022 22:29:28 +0300
Subject: [PATCH] add lyrics summary
---
html/youtube.ejs | 126 +++++++++++++++++------------------------------
1 file changed, 45 insertions(+), 81 deletions(-)
diff --git a/html/youtube.ejs b/html/youtube.ejs
index f881017b..28d3d0a1 100644
--- a/html/youtube.ejs
+++ b/html/youtube.ejs
@@ -1,8 +1,8 @@
<!DOCTYPE html>
-<html>
-<noscript><title><%=video.title%> - PokeTube</title></noscript>
+<title>
+ <%=video.title%> - PokeTube</title>
<meta content="<%=video.title%>" name=title>
-<link rel="icon" href="https://poketalebot.com/youtube/icons/dark.svg">
+<link href=https://poketalebot.com/youtube/icons/dark.svg rel=icon>
<meta content=player name=twitter:card>
<meta content="<%=title.channelTitle%>" name=twitter:description>
<meta content=@youtube name=twitter:site>
@@ -11,112 +11,76 @@
<meta content="https://i.ytimg.com/vi/<%=title.id%>/maxresdefault.jpg" name=twitter:image>
<meta content="https://www.youtube.com/embed/<%=title.id%>" name=twitter:player>
<meta content=1280 name=twitter:player:width>
-<meta property="twitter:description" content="Poketube is a private youtube player thats focusted on privacy. No javascript needed!">
+<meta content="Poketube is a private youtube player thats focusted on privacy. No javascript needed!" property=twitter:description>
<meta content=720 name=twitter:player:height>
<link href="https://poketalebot.com/youtube/watch?v=<%=title.id%>" itemprop=url>
<link href="http://www.youtube.com/channel/<%=title.channelId%>" itemprop=url>
<link itemprop=name content=" <%=title.channelTitle%> ">
-<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel=stylesheet>
<link href=https://cdn.poketalebot.com/404/v2.css rel=stylesheet>
+<link href=/css/app.main.css rel=stylesheet>
<center>
-
- <style>
- ::-webkit-scrollbar{width:8.5px;background-color:#36363E}::-webkit-scrollbar-thumb{background-color:#7C7C84;border-radius:8.75px}::-webkit-scrollbar-thumb:hover{background-color:#909098}body{background-color:#23272A}p{color:#fff}h1{font-size:50px;margin:0;color:#fff}h5{display:block;font-size:0.83em;margin:1.67em 0;font-weight:700;color:#fff}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]){color:inherit;text-decoration:none}a:not([href]):hover{color:inherit;text-decoration:none}.page-footer-section a,.page-footer-section p{color:#B2B4BF}p{margin-top:0;margin-bottom:1rem}p{display:block;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0;margin-inline-end:0}.mb-3,.my-3{margin-bottom:1rem!important}.h5,h5{font-size:1.3125rem}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{line-height:1.25}.h5,h5{font-size:1.25rem}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:0.5rem;font-weight:500;line-height:1.2;color#fff}.page-footer-section{position:relative;padding-top:100px;padding-bottom:20px;background-color:#F0EEF5}.page-footer-section.bg-dark .caption{color:rgba(255,255,255,.6)}.page-footer-section.bg-dark hr{border-color:#4d4853}.menu-link{position:relative;padding-left:0;list-style:none}.menu-link li{display:block;margin:10px 0}.mea:hover{color:#526bf5;text-decoration:none}.page-footer-section a,.page-footer-section p{color:#B2B4BF}.page-footer-section a:hover{color:#526bf5;text-decoration:none}.client-img > img{width:auto;max-width:100%;height:auto;max-height:100px}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.fa-icon{align-items:center;background-color:transparent;border:0;display:inline-flex;justify-content:center;margin:0;padding:0 0.1em;position:relative;user-select:none;vertical-align:text-bottom;-webkit-user-select:none}.fa-icon > *{pointer-events:none}.fa-icon.disabled,.fa-icon[disabled]{color:var(--button-disabled-ink);fill:var(--button-disabled-ink);filter: var(--button-disabled-filter);stroke:var(--button-disabled-ink);pointer-events:none}.fa-icon > .fa-icon-badge,.fa-icon.disabled > .fa-icon-badge{visibility:hidden}.fa-icon.fa-icon-badged > .fa-icon-badge{bottom:-20%;display:inline-block;font:60% sans-serif;left:calc(100% - 0.2em);position:absolute;visibility:visible}.fa-icon.fa-icon-hflipped > svg{transform:scale(-1, 1)}.fa-icon.fa-icon-vflipped > svg{transform:scale(1, -1)}.fa-icon > svg{height:1em;overflow:visible;width:1em}.fa-icon > .fa-icon_bar-chart{width:calc(1em * 2048 / 1792)}.fa-icon > .fa-icon_cloud-download,.fa-icon > .fa-icon_cloud-upload,.fa-icon > .fa-icon_cogs,.fa-icon > .fa-icon_eraser,.fa-icon > .fa-icon_film{width:calc(1em * 1920 / 1792)}.fa-icon > .fa-icon_code{width:calc(1em * 1830 / 1792)}.fa-icon > .fa-icon_exclamation-triangle{width:calc(1em * 1794 / 1792)}.fa-icon > .fa-icon_clipboard,.fa-icon > .fa-icon_comment-alt,.fa-icon > .fa-icon_external-link,.fa-icon > .fa-icon_eye-dropper,.fa-icon > .fa-icon_eye-open,.fa-icon > .fa-icon_eye-slash,.fa-icon > .fa-icon_files-o,.fa-icon > .fa-icon_list-alt{width:calc(1em * 1792 / 1792)}.fa-icon > .fa-icon_download-alt,.fa-icon > .fa-icon_font,.fa-icon > .fa-icon_search,.fa-icon > .fa-icon_spinner,.fa-icon > .fa-icon_unlink,.fa-icon > .fa-icon_upload-alt,.fa-icon > .fa-icon_zoom-in,.fa-icon > .fa-icon_zoom-out{width:calc(1em * 1664 / 1792)}.fa-icon > .fa-icon_home{width:calc(1em * 1612 / 1792)}.fa-icon > .fa-icon_check{width:calc(1em * 1550 / 1792)}.fa-icon > .fa-icon_clock-o,.fa-icon > .fa-icon_cog,.fa-icon > .fa-icon_floppy-o,.fa-icon > .fa-icon_info-circle,.fa-icon > .fa-icon_pause-circle-o,.fa-icon > .fa-icon_play-circle-o,.fa-icon > .fa-icon_power-off,.fa-icon > .fa-icon_question-circle,.fa-icon > .fa-icon_refresh,.fa-icon > .fa-icon_save,.fa-icon > .fa-icon_sliders,.fa-icon > .fa-icon_undo{width:calc(1em * 1536 / 1792)}.fa-icon > .fa-icon_arrow-right{width:calc(1em * 1472 / 1792)}.fa-icon > .fa-icon_filter{width:calc(1em * 1410 / 1792)}.fa-icon > .fa-icon_plus,.fa-icon > .fa-icon_trash-o{width:calc(1em * 1408 / 1792)}.fa-icon > .fa-icon_times{width:calc(1em * 1188 / 1792)}.fa-icon > .fa-icon_angle-up,.fa-icon > .fa-icon_double-angle-up,.fa-icon > .fa-icon_lock,.fa-icon > .fa-icon_unlock-alt{width:calc(1em * 1152 / 1792)}.fa-icon > .fa-icon_double-angle-left{width:calc(1em * 966 / 1792)}.fa-icon > .fa-icon_bolt{width:calc(1em * 896 / 1792)}body{background:#121212}nav{background:#232323;font-family:Roboto;height:60px;display:grid;grid-template-columns:20% 60% 20%}nav a{color:#fff;text-decoration:none;font-weight:700}nav a span{color:red}nav .left{display:flex;justify-content:flex-start;align-items:center}nav .left a{margin-left:30px}nav .left a i{font-size:20px;padding-right:4px}nav .middle{display:flex;justify-content:center;align-items:center}nav .middle .search-bar{background:#222;border:1px solid #444;width:420px;height:30px}nav .middle button{background:#454545;color:#999;padding:7px 25px}nav .middle input{background:#454545;color:#999;padding:2px 25px}nav .right{display:flex;justify-content:center;align-items:center;margin-left:20px;padding-left:30px}nav .right a{padding-left:30px}nav .right img{height:30px;width:30px;border-radius:50%}
- </style>
-
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@900&family=Sigmar+One&display=swap" rel="stylesheet">
- <link href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@900&family=Sigmar+One&display=swap" rel=stylesheet>
+ <link href=https://pro.fontawesome.com/releases/v5.15.3/css/all.css rel=stylesheet>
<center>
-
<nav>
- <div class="left">
- <a href="#"><i class="fas fa-bars"></i></a>
- <a href="#" style="font-family: 'Inter', sans-serif;"><span><i class="fab fa-youtube" style="color:#fff"></i></span>PokeTube</a>
- </div>
- <div class="middle">
- <form action=/youtube/ara>
- <input style="color:#fff;font-family: 'Roboto', sans-serif;" id=fname name=query class="search-bar">
- <button type="submit" class="btn btn-success">
- <i class="fas fa-search"></i>
-</button>
-
- </form>
- </i>
- </div>
- <div class="right">
- <a href="#"><i class="fas fa-video"></i></a>
- <a href="#"><i class="fas fa-th"></i></a>
- <a href="#"><i class="fas fa-comment"></i></a>
- <a href="#"><i class="fas fa-bell"></i></a>
+ <div class=left><a href=#><i class="fas fa-bars"></i></a> <a href=# style=font-family:Inter,sans-serif><span><i class="fa-youtube fab"style=color:#fff></i></span>PokeTube</a></div>
+ <div class=middle>
+ <form action=/youtube/ara><input class=search-bar id=fname name=query style=color:#fff;font-family:Roboto,sans-serif> <button class="btn btn-success" type=submit><i class="fas fa-search"></i></button></form>
</div>
+ <div class=right><a href=#><i class="fas fa-video"></i></a> <a href=#><i class="fas fa-th"></i></a> <a href=#><i class="fas fa-comment"></i></a> <a href=#><i class="fas fa-bell"></i></a></div>
</nav>
-
- <section class="youtube-video">
- <div class="screen">
+ <section class=youtube-video>
+ <div class=screen>
<div class=videoOuterContainer-3x2_n9>
<style>
.video {
- text-align: center;
+ text-align:center
}
</style>
- <div class=videoMiddleContainer-2yUOUz>
+ <div class=videoMiddleContainer-2yUOUz>
<div class=videoInnerContainer-2IHZcN>
- <video autoplay class=video-3DYbjh controls name=media>
-<source src="<%=url%>" type=video/mp4>
-</video> </center>
- </div>
- </div>
- </div><br> </div>
-</center>
-
+ <video autoplay class=video-3DYbjh controls name=media>
+ <source src="<%=url%>" type=video/mp4>
+ </video>
+ <br></center>
<center>
- <h1 style="font-family: 'Inter', sans-serif;font-weight: bold;white-space:yes;font-size:45;">
- <b>
- <%=video.title%>
- </b>
- </h1>
- <a style="color:#fff" href="https://youtube.com/channel/<%=title.channel.id%>">
+ <h1 style=font-family:Inter,sans-serif;font-weight:700;white-space:yes;font-size:45><b> <%=video.title%> </b></h1>
+ <a href="https://youtube.com/channel/<%=title.channel.id%>" style=color:#fff>
<%=title.channel.name%>
</a>
</center>
<hr>
-
<center>
<center>
<center>
-
<center>
<p><i class="fas fa-calendar-alt"></i>
<%=date%>|<i class="fas fa-chart-bar"></i>
<%=video.engagement.views.toLocaleString()%> Views| <i class="fas fa-thumbs-up"></i>
<%=video.engagement.likes.toLocaleString()%> <i class="fas fa-thumbs-down"></i>
- <%=video.engagement.dislikes.toLocaleString()%><br></p>
- <p><i class="fas fa-shield-alt"></i> Youtube wont know you are whatching this video (also your fbi guy wont know too)</p>
- <hr>
-
- <% if (lyrics) { %>
- <h1 style="font-family: 'Inter', sans-serif;font-weight: bold;white-space:yes;font-size:45;"> Lyrics </h1>
- <p style="color: white;">
- <%-lyrics%>
- </p>
- <% } %>
- <% if (!lyrics) { %>
- <h3 style="color:#fff;font-family: 'Inter', sans-serif;font-weight: bold;white-space:yes;"> Description</h3>
-
- <center>
- <p>
- <%-title.description.replace(/\n/g, " <br> ")%></p>
- </center>
- <% } %>
- <br><br><noscript><p><i class="fas fa-code"></i> Hey,you are on no script mode rn. Yes,Poketube does not require billion lame scripts to run :P</p></noscript>
-
- <script>
- var VideoTitle = "<%=title.title%>"
- var ChannelTitle = "<%=title.channelTitle%> "
- document.title = "<%=video.title%> - PokeTube"
- </script>
+ <%=video.engagement.dislikes.toLocaleString()%><br>
+ <p><i class="fas fa-shield-alt"></i> Youtube wont know you are whatching this video (also your fbi guy wont know too)</p><noscript><p><i class="fas fa-code"></i> Hey,you are on no script mode rn. Yes,Poketube does not require billion lame scripts to run :P</p></noscript>
+ <hr>
+ <h3 style=color:#fff;font-family:Inter,sans-serif;font-weight:700;white-space:yes>Description</h3>
+ <center>
+ <p>
+ <%-title.description.replace(/\n/g, " <br> ")%></center>
+ <% if (lyrics) { %>
+ <hr><br>
+
+ <details>
+ <summary><h1 style="font-family: 'Inter', sans-serif;font-weight: bold;white-space:yes;font-size:45;"> Lyrics
+ </h1><p style="color: blue;">See Lyrics by clicking here</p></summary>
+ <p style="color: white;">
+ <p style=color:#fff>
+ <%-lyrics%>
+ </p> </details>
+ <% } %>
+ <script>
+ var VideoTitle = "<%=title.title%>"
+ var ChannelTitle = "<%=title.channel.name%> "
+ document.title = "<%=video.title%> - PokeTube"
+ </script>
</center>
-
</center>
- </div>
- </section>