From 928a686cf5935feee7085c49ba23258ff5aff9c2 Mon Sep 17 00:00:00 2001
From: Ashley //// <iamashley@duck.com>
Date: Tue, 23 Apr 2024 14:06:02 +0000
Subject: [PATCH] bring back invidious comments

---
 html/poketube.ejs | 123 ++++++++++++++++------------------------------
 1 file changed, 43 insertions(+), 80 deletions(-)

diff --git a/html/poketube.ejs b/html/poketube.ejs
index f443445e..882d55d7 100644
--- a/html/poketube.ejs
+++ b/html/poketube.ejs
@@ -2,7 +2,7 @@
 <!-- PTHTML START -->
 <% if (!isMobile) { %> 
 <!--
-  HEYOOOOOOOOOO!!!!!!!
+  HEYOOOOOOOOOO!!!!!!
 
   poketube is the privacy first youtube front end ! fell free to pull request on codeberg.org!
 
@@ -61,6 +61,7 @@
   padding: 50px 30px;
   margin-top: 50px;
 }
+ 
 
 
   
@@ -1286,14 +1287,14 @@ WIP!                                                 </a>
                                                     
  <% if (!video?.Channel.Name.endsWith(' - Topic')) { %> 
     <% if (!inv_vid.title.endsWith('IGNORE_THIS_PLEASE)')) { %>            
-      <%  if (inv.contents) { %> 
+      <%  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>
-              <%- inv.header?.comments_count %>
+              <%- inv.commentCount.toLocaleString() %>
                                                       </div>       
         </a>
                                                                             </div>
@@ -1543,16 +1544,25 @@ WIP!                                                 </a>
                 
                              </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.contents) { %> 
+                                                                                                                                           <%  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;">- <%- inv.header?.comments_count %> Comments </span>
+                                                 YouTube Comments <span style="font-family: inter;font-weight: 900;text-transform: lowercase;margin: 1px;">- <%- inv.commentCount.toLocaleString() %> 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">
@@ -1560,55 +1570,8 @@ WIP!                                                 </a>
   </p>    
                                         
                                                    </div>
-<% for (const thread of inv.contents) { %>
-    <% const x = thread.comment; %>
-<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.author.id%>@youtube.com" style="width:40px;height:40px" class="avatar"><img loading="lazy"src="<%- media_proxy_url %>/proxy?url=<%= x.author.thumbnails[0].url.replace("https://yt3.ggpht.com/", "https://vid.puffyan.us/ggpht/") %>"></a></div>
-                            <%  if (!x.author_is_channel_owner) { %>
-                                <p class="comments-author">
-                                    <a href="/channel?id=<%- x.author.id%>" style="color:var(--text-color);text-decoration:none">
-                                        <%- x.author.name %>
-                                            <%  if (x.is_verified) { %><i class="icon ion ion-md-checkmark-circle"></i>
-                                                <% } %>
-                                                    <p class="date-publish">
-                                                        <%- x.published_time %>
-                                                    </p>
-                                    </a>
-                                </p>
-                                <% } %>
-                                    <%  if (x.author_is_channel_owner) { %>
-                                        <p class="comments-author owner">
-                                            <a href="/channel?id=<%- x.authorId%>@youtube.com" style="color:var(--text-color);text-decoration:none">
-                                                <%- x.author.name %>
-                                                    <%  if (x.verified) { %><i class="icon ion ion-md-checkmark-circle"></i>
-                                                        <% } %>
-                                                            <p class="date-publish">
-                                                                <%- x.published_time %>
-                                                            </p>
-                                            </a>
-                                            <% } %>
-                        </h5>
-                        <p class="comment" style="font-weight:700">
-                            <%- escapeHtml(x.content).replace("\n", "<br>") %><br><br>
-                                <% if (x.like_count === 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>
-                                        <%= x.like_count %> | <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>
+ <% 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[1].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>
@@ -1619,13 +1582,13 @@ WIP!                                                 </a>
                                                        <% } %>
 
                                 
-                 <% if(!inv.contents) { %>  
+                 <% if(!inv.comments) { %>  
                    </div>                                       
 
                                                          <% } %>
 
 
-                      <% if(inv.contents) { %>  
+                      <% if(inv.comments) { %>  
                    </div>                                       
 
                                                          <% } %>
@@ -2041,7 +2004,7 @@ window.addEventListener("unload", cleanup)
 <!-- BUNDLE -->
 <!-- BUNDLE -->
 <!-- BUNDLE -->
-<!-- BUNDLE --><script src="/static/app.bundle.js?version=21.04.2024&bundledate=210424_0616" > </script><!-- BUNDLE -->
+<!-- BUNDLE --><script src="/static/app.bundle.js?version=25.01.2024&bundledate=250124_1120" > </script><!-- BUNDLE -->
 <!-- BUNDLE -->
 <!-- BUNDLE -->
 <!-- BUNDLE -->
@@ -2208,7 +2171,7 @@ a {
 
 </style>
   
-             <%  if (Array.isArray( !inv.contents)) { %> 
+             <%  if (Array.isArray( !inv.comments)) { %> 
 
   <style>
 #desc-container {
@@ -2271,13 +2234,13 @@ a {
 
 
                      
-                                                <source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
+                                                <source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
 
                                                                              <% } %>                
 
       <% if (qua === "medium") { %>  
 
-                                                <source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
+                                                <source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
         
                                                                            <% } %>                
 
@@ -2374,12 +2337,12 @@ font-size: 13px;margin:0;padding:0;white-space: nowrap;
 
 
       </div>
-     <%  if (Array.isArray( inv.contents)) { %> 
+     <%  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>
-           <%- inv.header?.comments_count.toString() %> Comments
+           <%- convert(inv.commentCount) %> Comments
             </div>
 					</a>
                                                                                                              <% }%>      
@@ -2836,7 +2799,7 @@ More Epic options owo~
 
                                                                                                                                   <%  if (inv != "Disabled") { %> 
 
-                                                                             <%  if (!Array.isArray( inv.contents)) { %> 
+                                                                             <%  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>
@@ -2851,10 +2814,10 @@ More Epic options owo~
                               <% } %>
 
                                      
-                        <%  if (Array.isArray( inv.contents)) { %> 
+                        <%  if (Array.isArray( inv.comments)) { %> 
 
-<% for (const thread of inv.contents) { %>
-    <% const x = thread.comment; %> 
+                                 <% inv.comments.forEach(x =>{ %>
+ 
                                  
                                    <div class="<%- x.commentId %>" style="padding: 10px;">
 
@@ -2863,23 +2826,23 @@ More Epic options owo~
           <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.author.id%>" class="avatar" style="width: 40px;height: 40px;">
-					<img style="width: 50px;height: 50px;" loading="lazy" src="<%- media_proxy_url %>/proxy?url=<%= x.author.thumbnails[0].url.replace("https://yt3.ggpht.com/", "https://vid.puffyan.us/ggpht/") %>">
+				<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[1].url.replace("https://yt3.ggpht.com/", "https://vid.puffyan.us/ggpht/") %>">
                                </a>
             </div>
-                                                          <%  if (!x.author_is_channel_owner) { %> 
+                                                          <%  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.author.id%>" style="color: #fff;text-decoration: none;" >
+                  				<a href="/channel?id=<%- x.authorId%>" style="color: #fff;text-decoration: none;" >
 
-                <%- x.author.name %>    <%  if (x.author.is_verified) { %> 
+                <%- 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.published_time %>
+                  <%- x.publishedText %>
                   </p>
                   </a>
                             
@@ -2888,19 +2851,19 @@ More Epic options owo~
                   
                   </p>                                                                <% } %>   
 
-                                          <%  if (x.author_is_channel_owner) { %> 
+                                          <%  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.author.id%>" style="color: #fff;text-decoration: none;" >
+                  				<a href="/channel?id=<%- x.authorId%>" style="color: #fff;text-decoration: none;" >
 
-                                <%- x.author.name %>    <%  if (x.author.is_verified) { %> 
+                                <%- 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.published_time %>
+                  <%- x.publishedText %>
                   </p>
                   </a>
                                   
@@ -2913,9 +2876,9 @@ More Epic options owo~
 
               </h5>
               <p class="comment" style="font-weight: bold;">
-                <%- x.content %>
+                <%- x.contentHtml %>
               <span style="  white-space: nowrap;">   <i class="fa-light fa-thumbs-up"></i>
- <%- x.like_count %> | <i class="fa-light fa-thumbs-down"></i> 
+ <%- convert(x.likeCount) %> | <i class="fa-light fa-thumbs-down"></i> 
    
    <%   if(x.creatorHeart) { %> 
 
@@ -2931,7 +2894,7 @@ More Epic options owo~
                           
                                                </div>
 
-                                                                        <% } %>   
+                                                                        <% }) %>   
 
                                    <% } %>