new ui for comments and the new thanks button!

This commit is contained in:
Ashley 2023-11-13 08:21:38 +00:00
parent a53855ff29
commit 786ae5ca3d

View file

@ -119,7 +119,7 @@ font-stretch: ultra-expanded;
padding: 5px; padding: 5px;
border-radius: 10px; border-radius: 10px;
} }
.popup > div:hover { .popup > div:hover {
background-color: var(--chip-background-hover); background-color: var(--chip-background-hover);
} }
@ -727,6 +727,7 @@ Account
<a href="/settings" style="text-decoration: none;" class="dropdown__item"> <a href="/settings" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-globe"></i> <i class="fa-light fa-globe"></i>
Region settings </a> Region settings </a>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;width: 16.5em;height: 0;">
<% if (!a) { %> <% if (!a) { %>
@ -767,7 +768,8 @@ Region settings </a>
<% } %> <% } %>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;width: 16.5em;height: 0;">
<% if (!universe) { %> <% 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"> <a href="/watch?v=<%=inv_vid.videoId%>&universe=2" title="test out the new layout of poketube!" style="text-decoration: none;" class="dropdown__item">
@ -786,7 +788,10 @@ Region settings </a>
<% } %> <% } %>
<a title="Low Bandwidth? try PokeTube 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;"> <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;width: 16.5em;height: 0;">
<a href="/video/upload" style="text-decoration: none;" class="dropdown__item"> <a href="/video/upload" style="text-decoration: none;" class="dropdown__item">
@ -821,7 +826,7 @@ About
<div id="popupMenu" class="popup"> <div id="popupMenu" class="popup">
<div > <div >
<a href="/download?v=<%=inv_vid.videoId%>" style="color: #fff;"> <a href="/download?v=<%=inv_vid.videoId%>" style="color: #fff;">
Save Video</a> <i class="fa-light fa-download"></i> Download Video</a>
</div> </div>
<div> <div>
@ -829,7 +834,7 @@ About
<% if (isvidious) { %> <% if (isvidious) { %>
<% if (!qua) { %> <% if (!qua) { %>
<a href="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" style="color: #fff;" target="_blank"> <a href="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" style="color: #fff;" target="_blank">
Open video in new tab <i class="fa-light fa-arrow-up-right-from-square"></i> Open video in new tab
</a> </a>
<% } %> <% } %>
@ -837,7 +842,7 @@ About
<% if (qua === "medium") { %> <% if (qua === "medium") { %>
<a href="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" target="_blank" style="color: #fff;"> <a href="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" target="_blank" style="color: #fff;">
Open video in new tab <i class="fa-light fa-arrow-up-right-from-square"></i> Open video in new tab
</a> </a>
<% } %> <% } %>
@ -847,7 +852,7 @@ About
<% if (!qua) { %> <% if (!qua) { %>
<a href="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/22 " target="_blank" style="color: #fff;"> <a href="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/22 " target="_blank" style="color: #fff;">
Open video in new tab <i class="fa-light fa-arrow-up-right-from-square"></i> Open video in new tab
</a> </a>
@ -856,7 +861,7 @@ About
<% if (qua === "medium") { %> <% if (qua === "medium") { %>
<a href="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/18 " target="_blank" style="color: #fff;"> <a href="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/18 " target="_blank" style="color: #fff;">
Open video in new tab <i class="fa-light fa-arrow-up-right-from-square"></i> Open video in new tab
</a> </a>
@ -864,15 +869,15 @@ About
<% } %> <% } %>
</div> </div>
<div id="loopOption"> <div id="loopOption">
Loop Video <i class="fa-light fa-repeat"> </i> Loop Video
</div> </div>
<div id="speedOption"> <div id="speedOption">
Speed: 1x <i class="fa-light fa-gauge"></i> Speed: 1.00x
</div> </div>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;/*! width: 4.5em; */height: 0;"> <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;/*! width: 4.5em; */height: 0;">
<div > <div >
<a href="https://codeberg.org/Ashley/poketube/issues/new" style="color: #fff;"> <a href="https://codeberg.org/Ashley/poketube/issues/new" style="color: #fff;">
Report broken proxy/video</a> <i class="fa-light fa-flag"></i> Report broken proxy/video</a>
</div> </div>
</div> </div>
@ -885,10 +890,8 @@ Speed: 1x
box-sizing: border-box; box-sizing: border-box;
min-width: 100%; min-width: 100%;
display: block; !important;" autoplay controls display: block; !important;" autoplay controls
poster="https://p.poketube.fun/https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg?v=607ddcd4"> poster="https://p.poketube.fun/https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg?v=607ddcd4">
<% if (isvidious) { %> <% if (isvidious) { %>
<% if (!qua) { %> <% if (!qua) { %>
<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true"> <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">
@ -1118,8 +1121,8 @@ display: block; !important;" autoplay controls
<a title="Support the Creator of the video!" style="color:var(--text-color);text-decoration: none;" href="https://www.patreon.com/join/<%- support.name %>"> <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"> <div class="pill-button">
<i class="fa-light fa-badge-dollar"></i> <i class="fa-light fa-heart"></i>
Support Thanks!
</div> </div>
</div> </div>
@ -1167,11 +1170,11 @@ display: block; !important;" autoplay controls
<% if (!video?.Channel.Name.endsWith(' - Topic')) { %> <% if (!video?.Channel.Name.endsWith(' - Topic')) { %>
<% if (!inv_vid.title.endsWith('Audio)')) { %> <% if (!inv_vid.title.endsWith('Audio)')) { %>
<div class="new-button button-lite" style=";margin-left: -4px;"> <div class="new-button button-lite" style=";margin-left: -4px;">
<a title="Low Bandwidth? try PokeTube Lite!" style="color:var(--text-color);text-decoration: none" href="/lite?v=<%=inv_vid.videoId%>"> <a title="See videos comments" style="color:var(--text-color);text-decoration: none" href="#comments-container">
<div class="pill-button"> <div class="pill-button">
<i class="fa-light fa-bolt"></i> <i class="fa-light fa-comments"></i>
Go Lite! Comments
</div> </div>
</a> </a>
</div> </div>
@ -1431,13 +1434,14 @@ display: block; !important;" autoplay controls
<div class="comments"> <div class="comments">
<div class="comments-class-or-something-i-cant-find-a-name-lol"> <div class="comments-class-or-something-i-cant-find-a-name-lol">
<a id="comments-container"></a>
<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;"> <h5 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);white-space:yes;font-stretch: ultra-expanded;margin-bottom: 11px;margin-top: 6px;padding-top: 10px;">
Comments <span style="font-family: inter;font-weight: 900;text-transform: lowercase;margin: 1px;">- <%- convert(inv.commentCount) %></span> Comments <span style="font-family: inter;font-weight: 900;text-transform: lowercase;margin: 1px;">- <%- convert(inv.commentCount) %></span>
</h5> </h5>
<p style="padding: 0;margin: 0;font-family: Inter;margin-bottom: 10px;"> <p style="padding: 0;margin: 0;font-family: Inter;margin-bottom: 10px;">
Top Comments are being randered rn :3 all comments are soon! Top Comments of this video!! :3
</p> </p>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;"> <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
@ -1501,7 +1505,7 @@ display: block; !important;" autoplay controls
<span> <i class="fa-light fa-thumbs-up"></i> <span> <i class="fa-light fa-thumbs-up"></i>
<%- convert(x.likeCount) %> | <i class="fa-light fa-thumbs-down"></i> <% if(x.creatorHeart) { %> <%- 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> <i class="icon ion-ios-heart creator-heart-small-container " style="color:#ffabcc" title="<%= x.creatorHeart.creatorName%> marked it with a ❤ owo"></i>
</span> </span>
<% } %> <% } %>
@ -1849,8 +1853,7 @@ if (userID) {
// Now, all the selected video links should have the parameters added to their href attributes // Now, all the selected video links should have the parameters added to their href attributes
// Now, all the selected links should have the parameters appended // Now, all the selected links should have the parameters appended
</script>
</script>
<!-- app.js --> <!-- app.js -->
<!-- app.js --> <!-- app.js -->
<!-- app.js --> <!-- app.js -->