diff --git a/html/poketube.ejs b/html/poketube.ejs
index 3c5ce8f5..258d6d04 100644
--- a/html/poketube.ejs
+++ b/html/poketube.ejs
@@ -864,7 +864,235 @@ summary:hover{
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
-
+ .v-chip:not(.v-chip--outlined).accent,
+.v-chip:not(.v-chip--outlined).error,
+.v-chip:not(.v-chip--outlined).info,
+.v-chip:not(.v-chip--outlined).primary,
+.v-chip:not(.v-chip--outlined).secondary,
+.v-chip:not(.v-chip--outlined).success,
+.v-chip:not(.v-chip--outlined).warning {
+ color:#fff
+}
+.theme--light.v-chip {
+ border-color:rgba(0,0,0,.12);
+ color:rgba(0,0,0,.87)
+}
+.theme--light.v-chip:not(.v-chip--active) {
+ background:#e0e0e0
+}
+.theme--light.v-chip:hover:before {
+ opacity:.04
+}
+.theme--light.v-chip--active:before,
+.theme--light.v-chip--active:hover:before,
+.theme--light.v-chip:focus:before {
+ opacity:.12
+}
+.theme--light.v-chip--active:focus:before {
+ opacity:.16
+}
+.theme--dark.v-chip {
+ border-color:hsla(0,0%,100%,.12);
+ color:#fff
+}
+.theme--dark.v-chip:not(.v-chip--active) {
+ background:#555
+}
+.theme--dark.v-chip:hover:before {
+ opacity:.08
+}
+.theme--dark.v-chip--active:before,
+.theme--dark.v-chip--active:hover:before,
+.theme--dark.v-chip:focus:before {
+ opacity:.24
+}
+.theme--dark.v-chip--active:focus:before {
+ opacity:.32
+}
+.v-chip {
+ align-items:center;
+ cursor:default;
+ display:inline-flex;
+ line-height:20px;
+ max-width:100%;
+ outline:none;
+ overflow:hidden;
+ padding:0 12px;
+ position:relative;
+ text-decoration:none;
+ transition-duration:.28s;
+ transition-property:box-shadow,opacity;
+ transition-timing-function:cubic-bezier(.4,0,.2,1);
+ vertical-align:middle;
+ white-space:nowrap
+}
+.v-chip:before {
+ background-color:currentColor;
+ bottom:0;
+ border-radius:inherit;
+ content:"";
+ left:0;
+ opacity:0;
+ position:absolute;
+ pointer-events:none;
+ right:0;
+ top:0
+}
+.v-chip .v-avatar {
+ height:24px!important;
+ min-width:24px!important;
+ width:24px!important
+}
+.v-chip .v-icon {
+ font-size:24px
+}
+.v-application--is-ltr .v-chip .v-avatar--left,
+.v-application--is-ltr .v-chip .v-icon--left {
+ margin-left:-6px;
+ margin-right:6px
+}
+.v-application--is-ltr .v-chip .v-avatar--right,
+.v-application--is-ltr .v-chip .v-icon--right,
+.v-application--is-rtl .v-chip .v-avatar--left,
+.v-application--is-rtl .v-chip .v-icon--left {
+ margin-left:6px;
+ margin-right:-6px
+}
+.v-application--is-rtl .v-chip .v-avatar--right,
+.v-application--is-rtl .v-chip .v-icon--right {
+ margin-left:-6px;
+ margin-right:6px
+}
+.v-chip:not(.v-chip--no-color) .v-icon {
+ color:inherit
+}
+.v-chip .v-chip__close.v-icon {
+ font-size:18px;
+ max-height:18px;
+ max-width:18px;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none
+}
+.v-application--is-ltr .v-chip .v-chip__close.v-icon.v-icon--right {
+ margin-right:-4px
+}
+.v-application--is-rtl .v-chip .v-chip__close.v-icon.v-icon--right {
+ margin-left:-4px
+}
+.v-chip .v-chip__close.v-icon:active,
+.v-chip .v-chip__close.v-icon:focus,
+.v-chip .v-chip__close.v-icon:hover {
+ opacity:.72
+}
+.v-chip .v-chip__content {
+ align-items:center;
+ display:inline-flex;
+ height:100%;
+ max-width:100%
+}
+.v-chip--active .v-icon {
+ color:inherit
+}
+.v-chip--link:before {
+ transition:opacity .3s cubic-bezier(.25,.8,.5,1)
+}
+.v-chip--link:focus:before {
+ opacity:.32
+}
+.v-chip--clickable {
+ cursor:pointer;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none
+}
+.v-chip--clickable:active {
+ box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
+}
+.v-chip--disabled {
+ opacity:.4;
+ pointer-events:none;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none
+}
+.v-chip__filter {
+ max-width:24px
+}
+.v-chip__filter.v-icon {
+ color:inherit
+}
+.v-chip__filter.expand-x-transition-enter,
+.v-chip__filter.expand-x-transition-leave-active {
+ margin:0
+}
+.v-chip--pill .v-chip__filter {
+ margin-right:0 16px 0 0
+}
+.v-chip--pill .v-avatar {
+ height:32px!important;
+ width:32px!important
+}
+.v-application--is-ltr .v-chip--pill .v-avatar--left {
+ margin-left:-12px
+}
+.v-application--is-ltr .v-chip--pill .v-avatar--right,
+.v-application--is-rtl .v-chip--pill .v-avatar--left {
+ margin-right:-12px
+}
+.v-application--is-rtl .v-chip--pill .v-avatar--right {
+ margin-left:-12px
+}
+.v-chip--label {
+ border-radius:4px!important
+}
+.v-chip.v-chip--outlined {
+ border-width:thin;
+ border-style:solid
+}
+.v-chip.v-chip--outlined.v-chip--active:before {
+ opacity:.08
+}
+.v-chip.v-chip--outlined .v-icon {
+ color:inherit
+}
+.v-chip.v-chip--outlined.v-chip.v-chip {
+ background-color:transparent!important
+}
+.v-chip.v-chip--selected {
+ background:transparent
+}
+.v-chip.v-chip--selected:after {
+ opacity:.28
+}
+.v-chip.v-size--x-small {
+ border-radius:8px;
+ font-size:10px;
+ height:16px
+}
+.v-chip.v-size--small {
+ border-radius:12px;
+ font-size:12px;
+ height:24px
+}
+.v-chip.v-size--default {
+ border-radius:16px;
+ font-size:14px;
+ height:32px
+}
+.v-chip.v-size--large {
+ border-radius:27px;
+ font-size:16px;
+ height:54px
+}
+.v-chip.v-size--x-large {
+ border-radius:33px;
+ font-size:18px;
+ height:66px
+}
@-webkit-keyframes wiggle {
0% { -webkit-transform: skewX(9deg); }
10% { -webkit-transform: skewX(-8deg); }
@@ -1057,16 +1285,56 @@ a{
</div>
</details>
- </div>
+
+ </div> <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
+ <div>
+ <div class="video-title" style="font-family:'Ginto Nord';font-weight:900;white-space:yes;">Comments </div>
+ <div style="padding:0">
+
+ <p>
+ theres <%=comments%> total comments rigth now on this video. view em on <a href="https://invidio.us/watch?v=<%=video.id%>">invidious</a>
+ </p>
+
+ </div>
+ <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
+ </div>
+
</div>
- <div class="secondary">
-
+ <div class="secondary" style="padding-top: 0;">
+
<div class="recommended-list" style="color:#fff">
-
+
<% if (!r) { %>
- <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=<%=video.id%>">Recommended videos</a> • <a href="/watch?v=<%=video.id%>&f=t"> Recent videos from this channel</a> </div>
+
+
+
+
+ <% if (!f) { %>
+<div style="display: flex;column-gap: 2.5px;align-self: center;" align="center">
+ <span tabindex="0" draggable="false" style="font-weight: bold;" class="v-chip v-chip--clickable v-chip--active v-chip--no-color theme--dark v-size--default"><a class="v-chip__content">
+ Recommendations
+ </span></a>
+ <span tabindex="0" draggable="false" class="v-chip v-chip--clickable v-chip--no-color theme--dark v-size--default"> <a style="color:#fff;text-decoration: none;" href="/watch?v=<%=video.id%>&f=t" class="v-chip__content">
+By <%=video.Channel.Name%> </span></a>
+ </a>
+
+
+ </div>
+ <% } %>
+ <% if (f) { %>
+
+<div style="display: flex;column-gap: 2.5px;align-self: center;" align="center">
+ <span tabindex="0" draggable="false" class="v-chip v-chip--clickable v-chip--active v-chip--no-color theme--dark v-size--default"><a href="/watch?v=<%=video.id%>" style="color:#fff;text-decoration:none;" class="v-chip__content">
+ Recommendations
+ </span></a>
+ <span tabindex="0" draggable="false" class="v-chip v-chip--clickable v-chip--no-color theme--dark v-size--default" style="font-weight: bold;" ><a style="color:#fff;text-decoration: none;" class="v-chip__content">
+By <%=video.Channel.Name%> </span></a>
+ </a>
+
+
+ </div>
+ <% } %>
+
<% if (!f) { %>
<% k.Video.Recommendations.Video.forEach(x => { %>
<div class="video">