<!-- PTHTML START -->
<% if (!isMobile) { %> 
<!--
  HEYOOOOOOOOOO!!!!!!

  poketube is the privacy first youtube front end ! fell free to pull request on codeberg.org!

  if you want to host an instance, see README.md 

  license below:

  This Source Code Form is subject to the terms of the GNU General Public License:

  Copyright (C) 2021-2023 POKETUBE (https://github.com/iamashley0/poketube)
    
    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/.

-->
<!DOCTYPE html>
<html class="poketube_desktop_player event" invidproxy="<%u%>" universe="2" vid_id="<%=inv_vid.videoId%>" t="<%=btoa(Date.now())%>" version="browser_web">
  <head>
  
    <% if (e === false) { %>  
    <!-- MetaTag disabled -->
 <% } %>
  <% if (!e) { %>

<meta content="<%=inv_vid.title%>" name=title>
<meta content="<%=color%>" name="theme-color">
<meta content="<%=k.Video.Channel.Name%>" name=twitter:author>
<meta content=@youtube name=twitter:site>
<meta content="https://poketube.fun/watch?v=<%=inv_vid.videoId%>" name=twitter:url>
<meta content="<%=inv_vid.title%> | PokeTube" name=twitter:title>
<meta content="Watch this video from <%=video?.Channel?.Name%> On PokeTube! The Libre YouTube Front end!1!" property=twitter:description>
<meta content="https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg" property=og:image>
<meta content=summary_large_image name=twitter:card>
<link href="https://poketube.fun/watch?v=<%=inv_vid.videoId%>" itemprop=url>
<link href="http://www.youtube.com/channel/<%=video?.Channel?.id%>" itemprop=url>
 <% } %> <!-- close the } -->
<link href="/css/yt-ukraine.svg?v=3" rel=icon>
<link href=/css/snow.css rel=stylesheet> 
<ptd-event-chunks>
  poketube.eventloader = this.eventloader
  load()
</ptd-event-chunks>
<title> <%=inv_vid.title%> | PokeTube </title>  
<style>
       <% if (!a) { %>  

     <% if (lightOrDark(color) == "light") { %>  
     .player.video-ambient-container  { 
         box-shadow: 0 0 2.4em <%=color%>; 
         }
        
                                                                                     <% } %>          
  
     <% if (lightOrDark(color) == "dark") { %>  
     .player.video-ambient-container  { 
         box-shadow: 0 0 2.4em <%=color2%>; 
        }
        
                                                                                     <% } %>     
                                                                                      <% } %>     
       <% if (a) { %>  

      .player.video-ambient-container  { 
         box-shadow: 0 0 0em <%=color%>; 
         }
        
                                                                                     <% } %>          
    
  .comments-area {
  background: #f1f9ff;
  padding: 50px 30px;
  margin-top: 50px;
}

  /* CSS */
.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.fade-in.fade-in-active {
  opacity: 1;
}


  
  @media (max-width: 414px) {
  .comments-area {
    padding: 50px 8px;
  }
}

.comments-area h4 {
  text-align: center;
  margin-bottom: 50px;
  color: #002347;
  font-size: 18px;
}

.comments-area h5 {
  font-size: 16px;
  margin-bottom: 0px;
}

.comments-area a {
  color: #002347;
}

.comments-area .comment-list {
  padding-bottom: 30px;
}

.comments-area .comment-list:last-child {
  padding-bottom: 0px;
}

.comments-area .comment-list.left-padding {
  padding-left: 25px;
}

@media (max-width: 413px) {
  .comments-area .comment-list .single-comment h5 {
    font-size: 12px;
  }
  .comments-area .comment-list .single-comment .date {
    font-size: 11px;
  }
  .comments-area .comment-list .single-comment .comment {
    font-size: 10px;
  }
}
  
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  display:none;
  background-color: #f2f2f2;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: purple;
  transition: width 0.5s ease-in-out;
}


.comments-area .thumb {
  margin-right: 20px;
}

ptd-event-chunks {
      display: none;
}
  
.comments-area .date {
  font-size: 13px;
  color: #777777;
  margin-bottom: 13px;
}

.comments-area .comment {
  color: #777777;
  margin-bottom: 0px;
}
  
a[data-onclick="jump_to_time"] {
  background: linear-gradient(to right, #8a2387, #e94057, #f27121);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.comments-area .btn-reply {
  background-color: var(--text-color);
  color: #002347;
  border: 1px solid #eee;
  padding: 2px 18px;
  font-size: 12px;
  display: block;
  font-weight: 600;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.comments-area .btn-reply:hover {
  background: #fdc632;
  color: #002347;
}

.comment-form {
  background: #f1f9ff;
  text-align: center;
  padding: 47px 30px 43px;
  margin-top: 50px;
  margin-bottom: 40px;
}

.comment-form h4 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 18px;
  line-height: 22px;
  color: #002347;
}

.comment-form .name {
  padding-left: 0px;
}

@media (max-width: 767px) {
  .comment-form .name {
    padding-right: 0px;
    margin-bottom: 1rem;
  }
}

.comment-form .email {
  padding-right: 0px;
}

@media (max-width: 991px) {
  .comment-form .email {
    padding-left: 0px;
  }
}
   
.comment-form .form-control {
  padding: 8px 20px;
  background: var(--text-color);
  border: none;
  border-radius: 0px;
  width: 100%;
  font-size: 14px;
  color: #777777;
  border: 1px solid transparent;
}

.comment-form .form-control:focus {
  box-shadow: none;
  border: 1px solid #eee;
}

.comment-form textarea.form-control {
  height: 140px;
  resize: none;
}

.comment-form ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  font-size: 15px;
  color: #777;
}

.comment-form ::-moz-placeholder {
  /* Firefox 19+ */
  font-size: 15px;
  color: #777;
}

.comment-form :-ms-input-placeholder {
  /* IE 10+ */
  font-size: 15px;
  color: #777;
}

.comment-form :-moz-placeholder {
  /* Firefox 18- */
  font-size: 15px;
  color: #777;
}
  .description{
      white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;

  }
  
  
#continue {
  max-width: 14px;
  max-height: 14px;
}
  
  .desc {
       white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
  }   
  
  .video{
    margin-right: auto;
  }
  
  .loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading .spinner {
  display: inline-block;
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;
  width: 50px;
  height: 50px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

   </style>
 
  <!-- css files -->
  <link href="/css/app-cdn.min.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
  <link href="/css/app.main.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
  <link href="/css/watch.main.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
  <link href="/css/watch-util.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
  <link href="/css/watch-navbar.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
  <link href="/css/poketube.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
 
  <!-- ICONS -->
 <link href="https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" rel=stylesheet>
 <link href="https://p.poketube.fun/https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.css" rel=stylesheet>

  
  <noscript>
  <style>
    .auto-play{
      display:none !important;
    }  
    .progress-container {
            display:none !important;

    }
    .fade-in {
        opacity: 1  !important;

    }
  </style>
  </noscript>
                    <% if (inv_vid.videoId == "QrGrOK8oZG8") { %> 

                      <style>
              
                      .t {
  color: #e6d140; !important;
font-family: Georgia,serif; !important; 
font-size: 250%; !important;
font-variant: small-caps; !important;
font-weight: normal; !important; 
text-shadow: 1px 1px #000,1px 1px 0.1px #000;!important;
  font-size: 25px;
  font-style: italic;
}

</style>
                                            		 	               <% } %>   

 
 <style data-universe="2">
   :root {
       --div-gradient: linear-gradient(to bottom right, #9666F7, #B37C6B);
   }                                                       

   details[open]  {
   background: linear-gradient(to bottom, #1c1c1c, #101);
   }  
   
   .comment-list.left-padding {
  border-radius: 1em !important;
   }
  
   .comment-list.left-padding:hover {
  filter: drop-shadow(0 0 0.75rem #df00ff);
  transition-duration: 150ms;
   }
   
   nav {
   z-index: 1;
   position: sticky; 
   background:#0A0608 
   
}
        <% if (lightOrDark(color) == "light") { %>  
     .player.video-ambient-container  { 
         box-shadow: 0 -8px 5.9em <%=color%>; 
         }
        
                                                                                     <% } %>          
  
     <% if (lightOrDark(color) == "dark") { %>  
     .player.video-ambient-container  { 
         box-shadow: 0 -8px 5.9em <%=color2%>; 
        }
        
                                                                                     <% } %>     
        <% if (a) { %>  

      .player.video-ambient-container  { 
         box-shadow: 0 0 0em <%=color%>; 
         }
        
                                                                                     <% } %>     
</style>
        
                                      
    </head>
    
 
                      
  <body>
    
  <script>
<!--//--><![CDATA[//><!--
/**
 * @licstart The following is the entire license notice for the JavaScript
 * code in this page.
 *
 *  Copyright (C) 2021-2023 PokeTube Project (https://github.com/iamashley0/poketube)
 *
 * The JavaScript code in this page is free software: you can redistribute
 * it and/or modify it under the terms of the GNU General Public License
 * (GNU GPL) as published by the Free Software Foundation, either version 3
 * of the License, or (at your option) any later version.  The code is
 * distributed WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU GPL
 * for more details.
 *
 * As additional permission under GNU GPL version 3 section 7, you may
 * distribute non-source (e.g., minimized or compacted) forms of that code
 * without the copy of the GNU GPL normally required by section 4, provided
 * you include this license notice and a URL through which recipients can
 * access the Corresponding Source.
 *
 * @licend The above is the entire license notice for the JavaScript code
 * in this page.
 */

//--><!]]>
</script>
<ptd-app-iconfixer>
<script>
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/svg';
link.rel = 'shortcut icon';
link.href = '/css/yt-ukraine.svg';
document.getElementsByTagName('head')[0].appendChild(link);
</script>    
</ptd-app-iconfixer>
<ptd-app-ejs>
<div class="app" id="secret-theme" style="color:var(--text-color)">
 <div class="progress-container">
  <div class="progress-bar"></div>
</div>


    <nav>
                  <div class=left>

                  <% if (inv_vid.genre != "Music") { %> 

              <a title="PokeTube Homepage" class="class" href="/143" style=font-family:Inter,sans-serif;color:var(--text-color)>  <img loading="lazy" style="transform: scale(1.3);padding-left:0.9em;width: 8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo.svg?v=5"></a>
                      		 	               <% } %>   
     <% if (inv_vid.genre === "Music") { %> 

              <a title="PokeTube Homepage" class="class" href="/143" style=font-family:Inter,sans-serif;color:var(--text-color)>  <img loading="lazy" style="transform: scale(1.3);padding-left:0.9em;width: 7.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/music.svg?v=5"></a>
                      		 	               <% } %>   
                                             
                                             
     <% if (secure) { %> 
       
                 <i style="margin-left: 2em;" class="fa-light fa-lock"
                  title="This is a secure and/or offical instance!
you can trust this instance becuase:
------------                  
- its a offical instance (offical instances have the max. privacy rules )
- logs are kept closed
------------
if you see this lock icon, you can trust the instance!!
                         
But Please note that unofficial instances can add the same lock icon, so please be careful about dad :D!
"
                  ></i>

                              		 	               <% } %>   

                                                                          
     <% if (verify) { %> 
       
                 <i style="margin-left: 2em;" class="fa-light fa-badge-check"
                  title="This is a veried instance!
 this instance was verified to be fast and secure!"
                  ></i>

                              		 	               <% } %>   
                                             
            </div>               
       <div class="middle">
        <form action="/search"><input class="search-bar" autocomplete="on" id="fname" name="query" style="color:var(--text-color);font-family:poketube flex,sans-serif;border-radius: 2em;font-weight: 850;font-stretch: extra-expanded;" data-ddg-inputtype="identities.firstName">
<button class="btn btn-success" type="submit" style="transform: translate(21em, -1.25em);"><i class="fa-light fa-search"></i></button>             
         </form>
             
           <img src="https://t.poketube.fun/t/rep.gif"  style="border:0;width: 0;visibility: hidden;"> 

      </div>
      <div class="right">
                <a><i  style="display: block;margin-left: auto;margin-right: auto;visibility: collapse;" class="fa-light fa-server"></i>  </a>
              <a ><i class="fa-light fa-shield" style="visibility: collapse;margin-right: 1.5em;"></i></a>
              <a ><i class="fa-light fa-shield" style="visibility: collapse;margin-right: 1.5em;"></i></a>
<p id="fetch-count">
                  
                  </p>
          <div class="icon-button dropdown" style="margin-right: 4.5px;">
			<input type="checkbox" id="loggedout-dropdown" autocomplete="off">
			<label for="loggedout-dropdown">
                  <i style="display: block;margin-left: auto;margin-right: auto;" class="fa-light  fa-ellipsis-vertical"></i>
 			</label>
			<div class="dropdown__menu" style="right: -1em;">
        				<a href="/customize" style="text-decoration: none;" class="dropdown__item">
                            <i  class="fa-light fa-brush"></i>
                      Customize PokeTube
        </a>
    

        
           						<a href="/video/upload" style="text-decoration: none;" class="dropdown__item">
                            <i  class="fa-light fa-video"></i>
Upload
        </a>
        
 
         
 						<a href="/embed/<%=inv_vid.videoId%>?type=copy_code" style="text-decoration: none;" class="dropdown__item">
                            <i  class="fa-light fa-code"></i>
      View embed code
        </a>
                          <% if (!a) { %>  

        		<a href="/watch?v=<%=inv_vid.videoId%>&a=false" title="Ambient mode uses a lighting effect to make watching videos more immersive by casting gentle colors from the video into your screen’s background! owo" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-lightbulb-on"></i>
               Ambient mode • on
        </a>
        
                                                                                     <% } %>                
     <% if (a) { %>  


        		<a title="Ambient mode uses a lighting effect to make watching videos more immersive by casting gentle colors from the video into your screen’s background! owo" href="/watch?v=<%=inv_vid.videoId%>" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-lightbulb" style="width: 1em;margin-left: 4px;"></i>
             Ambient mode • off
        </a>
        
                                      
                                                                                     <% } %>    
                                                                                       
                                                                                           <% 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">
<i class="fa-light fa-flask" style="width: 16px;height: 17px;margin-left: 2px;"></i>
              Testing Mode
                                                                                             </a>
        
                                                                                     <% } %>                
     <% if (universe) { %>  


        		<a title="test out the new layout of poketube!" href="/watch?v=<%=inv_vid.videoId%>" style="text-decoration: none;" class="dropdown__item">
<i class="fa-light fa-flask" style="width: 16px;height: 17px;margin-left: 2px;"></i>
              Close testing mode
        </a>
        
                                      
                                                                                     <% } %>    
        <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #1a1111;width: 16.5em;height: 0;">
        
           
 					<a href="/api/version.json" style="text-decoration: none;color:#fff;" class="dropdown__item">
                            <i  class="fa-light fa-circle-info"></i>
Version 
        </a>
                      
			</div>
		</div>

      </div>
    </nav>

 
 <div class="watch-page">

 	<div class="primary">

		<div id="<%=sha384(inv_vid.videoId)%>" class="video-player-container">
 
 
<video class="player video-ambient-container" id="video" style="border-radius: 16px;
box-sizing: border-box;
min-width: 100%;
display: block; !important;" autoplay controls   
       
       poster="https://p.poketube.fun/https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg?v=607ddcd4">
        
      
              <% if (isvidious) { %>
                   <% 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">

                                                                             <% } %>                

      <% 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">
        
                                                                           <% } %>                
                                                                                                       <% } %>                     

              <% if (!isvidious) { %>
                
                   <% if (!qua) { %>                       
                                                <source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/22" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">

                                                                             <% } %>                

      <% if (qua === "medium") { %>  

                                                <source src="https://tube.kuylar.dev/proxy/media/<%=x.attachment.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
        
                                                                           <% } %>                
                                                                                                       <% } %>                     

                                      
                        
    <% if (  video?.Subtitles?.Subtitle) { %>  
      
     <%  if (Array.isArray( video.Subtitles.Subtitle)) { %> 
   <% video?.Subtitles?.Subtitle?.forEach(x => { %>
     <track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= x.language %>" label="<%= x.language.replace("United States","Simplified - USA") %>" kind="subtitles">      
     
        <img src="https://t.poketube.fun/t/rep.gif?v=<%=btoa(inv_vid.videoId)%>&h=<%= x.language %>" id="subtitle_usage_rate" style="border:0;width: 0;visibility: hidden;"> 
         <% }) %>   
                                                                                                       <% } %>                     
     <%  if (!Array.isArray( video.Subtitles.Subtitle)) { %> 
     <track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%=  video.Subtitles.Subtitle.language %>" label="<%=  video.Subtitles.Subtitle.language.replace("United States","Simplified - USA") %>" kind="subtitles">      
     
        <img loading="lazy" src="https://t.poketube.fun/t/rep.gif?v=<%=btoa(inv_vid.videoId)%>&h=<%= video.Subtitles.Subtitle.language %>" id="subtitle_usage_rate" style="border:0;width: 0;visibility: hidden;"> 
            
                                                           <% } %>         
                                                           <% } %>         
                                                                          
                                                             </video>
                                                             
                                                             <img loading="lazy" src="https://t.poketube.fun/t/rep.gif?video=<%=btoa(inv_vid.videoId)%>" style="border:0;width: 0;visibility: hidden;" id="video">
<div class="pwp" style="display: flex;justify-content: center;align-items: center;flex-direction: row; column-gap: 3px;margin-top: -1em;max-height: 16px;" align="center">
                                
  <% if (!qua) { %> 

                                 <i style="display: block;" title="High Definition [Current]" class="fa-solid fa-high-definition"></i> <a href="/watch?v=<%=inv_vid.videoId%>&quality=medium"><i style="display: block;" title="Standard Definition" class="fa-light fa-standard-definition"></i></a>
                                                                      <% } %>               
                               <% if (qua) { %> 
                                 <a href="/watch?v=<%=inv_vid.videoId%>">  <i style="display: block;"  title="High Definition" class="fa-light fa-high-definition"></i> </a>  <i style="display: block;" title="Standard Definition [Current]"  class="fa-solid fa-standard-definition"></i>

                                                                      <% } %>   
                                                                           <input type="checkbox" class="v" id="box" style="display:none">
                                                                        <label class="h" for="box">
                                                                          <div class="fnt">
                                                                            
<i title="Stats for nerdys" class="fa-light fa-bug" style="margin-left: 0.9em;display:block;"></i>
                                                                          </div>

                                                                        </label>
                                                                        
                                                                                                                                                                                                                    <%  if (inv.comments) { %> 
                <input type="checkbox" class="hj" id="j" style="display:none">
                                                                        <label class="hj" for="j">
                                                                          <div class="fnt">
                                                                            
                                                                         <i  title="FLYING COMMENTS" class="fa-light fa-comments"></i>                                                                          </div>

                                                                        </label>
                                                                      <% } %>   
                                                                        
                                                                   <a href="#video"  class="maxi"  id="maximize">  <i style="display: block;"  title="Maximise!" class="fa-light fa-maximize"></i> </a> 
                                                                           
                                                                       <!-- comments -->
                                                                                                                                                                                                                                                                                            <%  if (inv.comments) { %> 

                                                                          <%  if (inv.comments.length > 8 ) { %> 

                                                                             <div class="flying_cmnt">
                                                                                         <% inv.comments.slice(-8).forEach(x =>{ %>
 <marquee loop="INFINITY">
                 <%- x.contentHtml %>
                   </marquee>
            
                                                                        <% }) %>   
                            </div>
                                                                                                                       <% } %>                                                                         <% } %>   

                                                                                                                         
<!-- Stats for nerds -->
                                                                                                                         
           <div class="div_box">
         Video id : <%=inv_vid.videoId%> <br>
       ImmersiveAmbientModecolor: <% if (lightOrDark(color) == "light") { %><%=color%> (color 1)<% } %><% if (lightOrDark(color) == "dark") { %> <%=color2%> (color 2) <% } %> <br>  
        Video Format :<% if (!qua) { %>  22 (720p) openh264 ( https://github.com/cisco/openh264) mp4a.40.2  | 44100Hz  <% } %>
      <% if (qua === "medium") { %>  18 (320p)  openh264 (https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz  <% } %>       <br> 
       PokeTubeEncryptID: <%=sha384(inv_vid.videoId)%> <br>
                      <% if (isvidious) { %>

       Proxy : <%= u.replace("https://","") %> - refresh the page to change the proxy location<br>
                          <% } %>
                             <% if (!isvidious) { %>

       Proxy : tube.kuylar.dev - refresh the page to change the proxy location<br>
                          <% } %>   
       Date : <%- Date.now() %>  <br>
                                                  <% if (isvidious) { %>

       Mystery text :  <%=btoa(inv_vid.videoId + " i " + " lov " + " u " + u.replace("https://","") ) %> <br>
                                                                              <% } %>  
                                                                                                                                  <% if (!isvidious) { %>

       Mystery text :  <%=btoa(inv_vid.videoId + " i " + " lov " + " u " + "tube.kuylar.dev" ) %> <br>
                                                                              <% } %>   

       143 : true <br>
        </div>
        
                      
       </div>
       </div>
                                                            <br>
<div class="video-info" >           
        	<div class="video-info-panel gradient">  
            <div class="video-title t" style="font-family:Inter;font-weight:bold;line-break: auto;max-width: max-content;margin: 0;margin-bottom: 0;padding: 0;"
                 
                                <% if (video?.Title !== k.Video.Title) { %>
                 title="Non-Translated title : <%=video?.Title%>"
               <% } %> 
            > <%-k.Video.Title.replace(/\/channel\//g, "/channel?id=").replace(/https:\/\/youtube.com/g, ""); %> </div>
          
          <a  style="font-weight: bolder;font-family: sans-serif;color: var(--text-color);font-size: small;">content source : youtube.com </a>
         
               <div class="video-chnl-info-pill"  name="chnl">
  <a name="chnl"></a>

				<a href="/channel?id=<%=video?.Channel.id || k.Video.Channel.id%>" class="avatar">
					<img loading="lazy" src="https://p.poketube.fun/<%= k.Video.Channel.Avatar[1].$t %>">
				</a>
				<div class="name" >
         <div>
						<a title="<%=k.Video.Channel.Name%> " class="video-info-pill-channelname">  <%=k.Video.Channel.Name%> 
              </a>   
            
              <% if (!video?.Channel.Name.endsWith(' - Topic')) { %>  
               <% if (badges) { %> 
              <% if (badges.tooltip === "Verified") { %> 
<i class="fa-solid fa-badge-check" title="<%=badges.tooltip%>"></i>
            <% } %>  <% if (badges.tooltip === "Official Artist Channel") { %> 
<i class="fa-solid fa-music-note" title="<%=badges.tooltip%>"></i>  
             <% } %>             <% } %>  <% } %> 

               
              </div>
               
                              
<div class="subscriber-count" style="word-wrap: initial;word-break: break-all;display: block ruby;">
          <%= k.Video.Channel.subscriberCount.replace("subscribers", "Subs") %>
 				</div>
               

				</div>
	 
				<button class="subscribe-button"><a href="https://www.youtube.com/channel/<%=video?.Channel.id || k.Video.Channel.id%>?view_as=subscriber?sub_confirmation=1">Suscribe</a></button>
			</div>
               
                     <div>
<div class="video-info-buttons pill" >
  
<div class="new-button engagement" style="max-height: 32px;gap: 2px;height: 33px;">
    <div title="<%=engagement.likes.toLocaleString()%> Likes">
  
<div class="pill-button" style="margin-right: 5.5px;">
    <i class="fa-light fa-thumbs-up"></i>
     <%=convert(engagement.likes)%>
       </div>
      </div>
      
        <div class = "vertical"></div>
      
					<div style="margin-left: -7.5px;" title="<%=engagement.dislikes.toLocaleString()%> Dislikes">
                <div class="pill-button">

<i class="fa-light fa-thumbs-down"></i> <%=convert(engagement.dislikes)%> 
					</div>					</div>


      </div>
      
<div style="display: flex;">

<a class="new-button" title="Download this Video :3" style="color:var(--text-color);text-decoration: none; " href="/download?v=<%=inv_vid.videoId%>">
  <div class="pill-button">

            <i class="fa-light fa-download"></i>
            Download
            </div>
					</a>
  
   <% if (!video?.Channel.Name.endsWith(' - Topic')) { %> 
    <% if (!inv_vid.title.endsWith('Audio)')) { %> 
   <% if (support != undefined) { %> 

    <div class="new-button button-encryption">
					<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">

               <i class="fa-light fa-badge-dollar"></i>
                Support
            </div>
            
            </div>


   </a>
      
                                     <% }%>                                                                              <% }%>      
                         <% }%>   

      <% if (support == undefined) { %> 

 <% if (!video?.Channel.Name.endsWith(' - Topic')) { %> 
    <% if (!inv_vid.title.endsWith('Audio)')) { %> 

      <div class="new-button button-encryption">
					<a   title="Switch PokeTube Instance :3" style="color:var(--text-color);text-decoration: none;" href="https://redirect.poketube.fun/watch?v=<%=inv_vid.videoId%>">
                                        <div class="pill-button">

               <i class="fa-light fa-rocket-launch"></i>
                Switch Instance
            </div>
            
            </div>


   </a>
                                                                          <% }%>                                                                              <% }%>      
                                                                                                                   <% }%>                                                                                                                          <% if (video?.Channel.Name.endsWith(' - Topic') || inv_vid.title.endsWith('Audio)')) { %> 
                                                            
                            <% if (video?.Channel.Name.endsWith(' - Topic') || inv_vid.title.endsWith('Audio)'))  { %> 
                                                 					<a  class="new-button" title="open this song in poketube music player :3" style="color:var(--text-color);text-decoration: none;" href="/music?v=<%=inv_vid.videoId%>">
                                                                                                    <div class="pill-button">

          <i class="fa-light fa-music"></i>
                  Open In Music Player
                                                            </div>
                                                 </a>

                                                                       <% }%>                     
                                                                          <% }%>      
    
    
                                                    
 <% if (!video?.Channel.Name.endsWith(' - Topic')) { %> 
    <% if (!inv_vid.title.endsWith('Audio)')) { %>                         
      <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%>">
                                        <div class="pill-button">

               <i class="fa-light fa-bolt"></i>
               Go Lite!
                                                      </div>       
        </a>
                                                                            </div>
 <% }%>                     
                                                                          <% }%>      

 
				</div>

              			</div>
                  					</div>

               			</div>

                             
<div class="video-sub-info description">

		
                  <details open="true" class="description-new">
         	<summary style="color:#fff;">
                                <%=engagement.viewCount.toLocaleString()%> Views  •  <%=date%> • Click to toggle off description                                             </summary>
   
          <% if (String(inv_vid.descriptionHtml) != "undefined")  { %>
         <% if (String(inv_vid.descriptionHtml) != " ")  { %>
           <% if (String(inv_vid.descriptionHtml) != "<p></p>")  { %>

           <div style="margin-top:1em;">
             
        
              <%-String(inv_vid.descriptionHtml).replace(/\n/g, " <br> ").replace(/twitter\.com/g, "nitter.net").replace(/reddit\.com/g, "teddit.net") %>
                   </div> 
                          <% } %>                          <% } %>                                  <% } %>          
                             
          <% if (String(inv_vid.descriptionHtml) != "undefined")  { %>
         <% if (String(inv_vid.descriptionHtml) != " ")  { %>
           <% if (String(inv_vid.descriptionHtml) == "<p></p>")  { %>

           <div style="margin-top:1em;">
             
        
              <%-String(linkify(inv_vid.description)).replace(/\n/g, " <br> ").replace(/twitter\.com/g, "nitter.net").replace(/reddit\.com/g, "teddit.net") %>
                   </div> 
                          <% } %>                          <% } %>                                  <% } %>          
                             
  
                <% if (String(inv_vid.description) == " ")  { %>

      <p> No Description On this Video ( sad innit :c )</p>
                           <% } %>               

                            
                   <% if (wiki.extract_html) { %> 
<div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">From da web</div>
                     
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">

  <%-wiki.extract_html%>
   
<p style="margin-bottom: 10px;">

  <a href=" <%-wiki.content_urls.desktop.page%>
 ">From wikipedia </a> under CC-BY-SA 3.0
                     </p>
 
                 
                     </p>
                     <% } %> 
                       <a id="metadata"></a>
                           <div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">Metadata And Engagement</div>
 <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">

     <p  style="font-weight: bold;">
 
                    <span>Views : <%=engagement.viewCount.toLocaleString()%> <br>
                        Genre: <%-inv_vid.genre %>  <br>

                      Upload date:  <%=date%> ^^ <br>
                       <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
                   Rating  :  <%=engagement.rating.toLocaleString()%> (<%=engagement.dislikes.toLocaleString()%>/<%=engagement.likes.toLocaleString()%> LTDR) <br>
                      RYD date created : <%=engagement.dateCreated.toLocaleString()%>  <br>
                      <a href="https://returnyoutubedislikeapi.com/votes?videoId=<%=inv_vid.videoId%>">See in json</a>
                      
                  
                                                <a id="nerdy"></a>

                      </span>                              


                                                 <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
        
     <%  if (Array.isArray(video?.Tags.Tag)) { %> 

                            <div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">Tags</div>
                      <div class="tags">
        
 <% video?.Tags.Tag.forEach(x => { %>
 <div class="tag">
   <a href="/hashtag/<%=x %>" style="color:var(--text-color)">
   <%=x %>
     </a>
   </div>
   
         <% }) %>  
           </div>
   
   
           <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
            <% } %>  
              
  
                       
            		</details>




                       </p>
                   
 
                         <div>

                           
                           
                       </div>
                       

 				</div>
                     
                   
                     <div style="display:none;">
<div class="video-pill-buttons">
  
  
 					<div title="<%=engagement.likes.toLocaleString()%> Likes">
  <i class="fa-light fa-thumbs-up"></i>
     <%=convert(engagement.likes)%>
          </div>
					<div title="<%=engagement.dislikes.toLocaleString()%> Dislikes">
<i class="fa-light fa-thumbs-down"></i> <%=convert(engagement.dislikes)%>
					</div>

         
            <div>

					<a title="Download this Video :3" style="color:var(--text-color);text-decoration: none; " href="/download?v=<%=inv_vid.videoId%>">
            <i class="fa-light fa-download"></i>
            Download
					</a>
 
   
 <% if (!video?.Channel.Name.endsWith(' - Topic')) { %> 
    <% if (!inv_vid.title.endsWith('Audio)')) { %> 

					<a title="Encryption duh" style="color:var(--text-color);text-decoration: none;" href="/encryption?v=<%=inv_vid.videoId%>">
               <i class="fa-light fa-shield"></i>
                Encryption
   </a>
                                                                          <% }%>                                                                              <% }%>      
  
                                                                             <% if (video?.Channel.Name.endsWith(' - Topic') || inv_vid.title.endsWith('Audio)')) { %> 
                                                            
                            <% if (video?.Channel.Name.endsWith(' - Topic') || inv_vid.title.endsWith('Audio)'))  { %> 
                                                 					<a title="open this song in poketube music player :3" style="color:var(--text-color);text-decoration: none;" href="/music?v=<%=inv_vid.videoId%>">
          <i class="fa-light fa-music"></i>
                  Open In Music Player
                                                 </a>

                                                                       <% }%>                     
                                                                          <% }%>      
    
                  					</div>
    

 
				</div>

              			</div>
                          
			</div>

               <div style="display:none;">
                
                             </div>


 
 
                                                   <% if(!inv.comments) { %>  
<p style="text-align: center">
  no comments on this video (it may be disabled or theres just no comments lol)
                                                     
                                                     </p>
                                                     <% } %>                     

                                                     
                                                                                                                                           <%  if (inv.comments) { %> 
                                                                                                                                                                              <div class="comments">                                                                   

<div class="comments-class-or-something-i-cant-find-a-name-lol">
  
                                                 <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>
                                                   </h5> 
                                                     
                                            <p style="padding: 0;margin: 0;font-family: Inter;margin-bottom: 10px;">
     Top Comments are being randered rn :3 all comments are soon!
  </p>              
                                                                                       <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
                                                      
                                 <% inv.comments.forEach(x =>{ %>
 <div class="<%- x.commentId %>.<%- btoa(x.commentId) %> fade-in ">
                                   <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="single-comment justify-content-between d-flex" style="padding-top: none;">
          <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.authorId%>" class="avatar" style="width: 40px;height: 40px;">
					<img loading="lazy" src="https://p.poketube.fun/<%= x.authorThumbnails[1].url %>">
				</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%>" 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>

              </h5>
              <p class="comment" style="font-weight: bold;">
                <%- x.contentHtml %>
                <br> <br>
                  <span>   <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 ion-ios-heart creator-heart-small-container" title="<%= x.creatorHeart.creatorName%> marked it with a ❤ owo"></i>
        </span>   
  
                                                                <% } %>   
              </p>
            </div>
          </div>
        </div>
      </div>
                          
 
                                                              </div>
                              <!-- This is to see how much comments loaded in a video, i dont collect the comment metadata - its sha hashed (see /privacy ) -->
                                         <img loading="lazy" src="https://t.poketube.fun/t/rep.gif?v=<%=sha384(inv_vid.videoId)%>&pub_date=<%-sha384(x.publishedText)%>&content_comment_sha=<%- sha384(x.content)%>&id=<%- sha384(x.commentId) %>" id="comments_rate" style="border:0;width: 0;visibility: hidden;display:none;"> 

                            </div>

                                                                        <% }) %>   


          </div>
         </div>


                                                       <% } %>

                                
                 <% if(!inv.comments) { %>  
                   </div>                                       

                                                         <% } %>


                      <% if(inv.comments) { %>  
                   </div>                                       

                                                         <% } %>



                  
<div class="recommended-list" align="center">
      <div style="text-align: left;" class="auto-play">
                                <label title="autoplay the next video" for="continue">AutoPlay:</label> 
                                <input title="autoplay the next video" name="continue" id="continue" type="checkbox" >
          
                                      <a href="/encryption?v=<%=inv_vid.videoId%>"><i class="fa-duotone fa-shield-halved " style="margin-left: 13em;"></i></a>

                             </div>

   
  <div class="tags rec" >
        <div class="tag" style="background:var(--chip-background-hover)">
Recommended Videos
    </div>
               
             <a style="color:#fff" href="/channel?id=<%=video?.Channel.id || k.Video.Channel.id %>" class="tag">
               From <%=k.Video.Channel.Name%> 
               </a>
               
  </div>

    
                              <% if (!r) { %> 
 

 <div>
   
</div>   
                                
                                
                                <% if (!f) { %> 
     <% k.Video.Recommendations.Video.forEach(x => { %>       
 						<div class="video fade-in"  >
                    <% if (!optout) { %> 

      <a  href="/watch?v=<%= x.id %>"  alt="<%= x.Title %>" class="thumbnail " style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;"  >								<span class="video-length"><%- x.duration || "LIVE"%></span>
                           <% } %>
   <% if (optout) { %> 

      <a  href="/watch?v=<%= x.id %>&m=f"  alt="<%= x.Title %>" class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;"  >								<span class="video-length"><%- x.duration || "LIVE"%></span>
                           <% } %>
							</a>
							<div class="info">
                
      <% if (!optout) { %> 
								<a href="/watch?v=<%= x.id %>" class="title max-lines-2" title="<%= x.Title %>" style="font-stretch: 100%;font-weight: 800;"><%= x.Title %></a>
                   <% } %>
   <% if (optout) { %> 
								<a href="/watch?v=<%= x.id %>&m=f" class="title max-lines-2" title="<%= x.Title %>" style="font-stretch: 100%;font-weight: 800;"><%= x.Title %></a>
                   <% } %>
								<div>
               <a class="max-lines-2" href="/channel?id=<%= x.Channel.id %>" style="-webkit-line-clamp: 1;width: 12em;word-wrap: break-word;"><%=x.Channel.Name %></a>
									<div class="video-views">  <%= x.uploadedAt.replace("Streamed", "Live") %> • <%= convert(x.views) %> views </div>
								</div>
							</div>
						</div>
 
       <% }) %>   
                            <% } %>
 
     <% if (f) { %> 

     <% tj.forEach(x => { %>       
 						<div class="video">
                    <% if (!optout) { %> 

      <a  href="/watch?v=<%= x.id %>" class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;"  >								<span class="video-length"><%=x.duration %></span>
                           <% } %>
   <% if (optout) { %> 

      <a  href="/watch?v=<%= x.id %>&m=f" class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;"  >								<span class="video-length"><%=x.duration %></span>
                            <% } %>
							</a>
							<div class="info">
       <% if (!optout) { %> 
								<a href="/watch?v=<%= x.id %>" class="title max-lines-2" style="font-stretch: 100%;font-weight: 800;" title="<%= x.Title %>"><%= x.Title %></a>
                   <% } %>
   <% if (optout) { %> 
								<a href="/watch?v=<%= x.id %>&m=f" class="title max-lines-2" title="<%= x.Title %>" style="font-stretch: 100%;font-weight: 800;"><%= x.Title %></a>
                   <% } %>
								<div>
                                 <a class="max-lines-2" href="/channel?id=<%= video?.Channel?.Name || k.Video.Channel.Name %>" style="-webkit-line-clamp: 1;width: 12em;word-wrap: break-word;"><%= video?.Channel?.Name || k.Video.Channel.Name %></a>
									<div class="video-views">  <%= x.uploadedAt %> • <%= convert(x.views) %> views </div>

								</div>
							</div>
						</div>
 
       <% }) %>   
                            <% } %>
                                                          <% } %>

                                                            
      	           <% if (lyrics) { %>
                                                  <% if (r === "f") { %> 
                                <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=<%=inv_vid.videoId%>">See the Recommended videos instead</a> - <a href="https://github.com/iamashley0/poketube/issues">Report wrong lyrics qwq</a>
                                                    </div>
         <div align="center">                                <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">

                                                             <h1 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);;white-space:yes;" align="center">
 Lyrics 
                        </h1>  
           <p>
 See how our lyrics search works:<a href="https://github.com/iamashley0/poketube/blob/main/src/lyrics.js">Here</a>
           </p>
                        <p style="color: white;">
                                        <p style=color:var(--text-color)>
                                            <%-lyrics%>
                                        </p> 
                                                                      <% } %>

                                        <% } %>                                      </details>
    <div style="font-family:Inter,sans-serif;;white-space:yes;" align="center">
                                 <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<br>
       <a href="https://youtube.com/watch?v=<%=inv_vid.videoId%>">Open On YouTube</a> • <a href="/privacy">Privacy</a> • <a href="https://github.com/iamashley0/poketube/">Git</a> 
       </div> 
                                                                        
               
      <% if (optout) { %> 
        
 <% } %>
     
      <% if (!optout) { %> 
        
                  <div style="font-family:Inter,sans-serif;;white-space:yes;" align="center">

<a href="/watch?v=<%=inv_vid.videoId%>&m=f"> 
 Opt out of Metrics</a> (<a href="/privacy" style="color:var(--text-color)">Wut?</a>)
               
   </div>
     <% } %>
            

            	           <% if (lyrics && !r) { %>
                                             <div style="font-family:Inter,sans-serif;;white-space:yes;" align="center">

      <% if (optout) { %> 
     <a href="/watch?v=<%=inv_vid.videoId%>&r=f">Lyrics (Wow)</a>


  <% } %> 
         <% if (!optout) { %> 
                       <a href="/watch?v=<%=inv_vid.videoId%>&r=f">Lyrics (Wow)</a>
 <% } %>
                    </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>  
 
    

    
<script>
 function removeParam(paramName) {
  let searchParams = new URLSearchParams(window.location.search);
  searchParams.delete(paramName);
  if (history.replaceState) {
    let searchString = searchParams.toString().length > 0 ? '?' + searchParams.toString() : '';
    let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname +  searchString + window.location.hash;
    history.replaceState(null, '', newUrl);
  }
}

let checkbox = document.getElementById("continue");

checkbox.addEventListener('change', function(e) {
  if (checkbox.checked) {
    console.log("[AUTOPLAY] enabled");
    document.getElementById('video').addEventListener('ended', autoplaynextvideo, false);
    let url = window.location.hostname + "/watch?v=<%- k.Video.Recommendations.Video[0].id%>";
   
    function autoplaynextvideo(e) {
      location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>";
    }
  }
  if (/[?&]autoplay=/.test(location.search)) {
    if (!checkbox.checked) {
      removeParam("autoplay");
    }    
  }
  
  if (/[?&]autoplay=/.test(location.search)) {
    if (checkbox.checked) {
        fetch("https://" + window.location.hostname + "/watch?v=<%- k.Video.Recommendations.Video[0].id%>").then(() => {})
      }    
  }
});
  
if (/[?&]autoplay=/.test(location.search)) {
  checkbox.checked = true;
  console.log("[AUTOPLAY] enabled");
  let url = window.location.hostname + "/watch?v=<%- k.Video.Recommendations.Video[0].id%>";
  document.body.style.cursor = "wait"; // set cursor to "wait" before the fetch request starts
  fetch(url)
    .then(response => response.json())
    .then(data => {
      // do something with the data
      document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
    })
    .catch(error => {
      console.error(error);
      document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
    });
  document.getElementById('video').addEventListener('ended', autoplaynextvideo, false);
  if (/[?&]autoplay=/.test(location.search)) {
    if (checkbox.checked) {
        fetch("https://" + window.location.hostname + "/watch?v=<%- k.Video.Recommendations.Video[0].id%>").then(() => {})
      }    
  }
  function autoplaynextvideo(e) {
    location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>";
  }
}
</script>

<script data-api-endpoint="/api/">
  /*
  * Loads modules
  */
  try {
  const app_main = "/static/app.js?ver=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>";
  const script = document.createElement("script");
  script.src = app_main;
  document.head.appendChild(script);
  } catch(err) {
    console.error(`Error while loading module files: ${err}`)
  }
</script>
<script src="/static/custom-css.js"> </script>

  <% if (!optout) { %> 
          <!-- MORE INFO :https://poketube.fun/privacy -->
          <!-- MORE INFO :https://poketube.fun/privacy -->
       
          <!-- if you want to change the url - please see config in server.js  -->
        
         <!-- START <%=t%> -->  
   
        <!-- SESSION -->
        <img src="<%=t%>t/rep.gif?ID=<%=btoa(Date.now())%>" style="width: 0;visibility: hidden;" id="SesionID">
        <img src="<%=t%>t/rep.gif?piwik=t" style="width: 0;visibility: hidden;" id="piwik_noip_no_personal-info_collect">
   
        <!-- VIDEO -->
        <img src="<%=t%>t/rep.gif?video_id=<%=btoa(inv_vid.videoId)%>" style="width: 0;visibility: hidden;" id="videoID">
        <img src="<%=t%>t/rep.gif?channel_ID=<%=btoa(video?.Channel.id || k.Video.Channel.id)%>" style="width: 0;visibility: hidden;" id="channel">
   

        <!-- END <%=t%> -->  

 <% } %>
   
</div>
    </ptd-app-ejs>
</body>
</html>

  <% } %>

     <% if (isMobile) { %> 
     <% if (isMobile) { %> 
     <!--
    This Source Code Form is subject to the terms of the GNU General Public License:

    Copyright (C) 2021-2023 POKETUBE (https://github.com/iamashley0/poketube)
    
    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/.
-->
<!DOCTYPE html>
<html class="poketube_mobile_layout">
  
  <% if (e === false) { %> <!-- if ?e=false,dont show up the meta tags  -->
    
 <% } %>
  <% if (!e) { %>
<meta content="<%=inv_vid.title%>" name=title>
<meta content="<%=color%>" name="theme-color">
<meta content="<%= video?.Channel?.Name || k.Video.Channel.Name%>" name=twitter:author>
<meta content=@youtube name=twitter:site>
<meta content="https://poketube.fun/watch?v=<%=inv_vid.videoId%>" name=twitter:url>
<meta content="<%=inv_vid.title%> - PokeTube" name=twitter:title>
<meta content="mobile this video by <%= video?.Channel?.Name || k.Video.Channel.Name%> On PokeTube. The YouTube front-end that doesnt track you!" property=twitter:description>
<meta content="https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg" property=og:image>
<meta content=summary_large_image name=twitter:card>
<link href="https://poketube.fun/watch?v=<%=inv_vid.videoId%>" itemprop=url>
 <% } %> <!-- close the } -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href=/css/yt-ukraine.svg?v=6 rel=icon>
<title> <%=inv_vid.title%> - PokeTube Mobile</title>
 <link href="/css/mobile.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
 <link href="/css/app.main.css?v=<%=btoa(Date.now())%>" rel=stylesheet>
    <link href=https://p.poketube.fun/https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.css rel=stylesheet>
  <link href="https://fonts.poketube.fun/css/fonts.css" rel=stylesheet>

    <link href=https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css rel=stylesheet>
<style>
   a.class:hover {
    text-decoration:underline;
    font-weight:bold
}
  summary{
    color:gray;
}
summary:hover{
    color:white;
}
  :visited {
  color: var(--text-link-visited) 
}
 

#continue {
  max-width: 14px;
  max-height: 14px;
}
a {
  color: var(--text-link) 
}
 
</style>
  
             <%  if (Array.isArray( !inv.comments)) { %> 

  <style>
#desc-container {

  margin-top: -14.9em;
  
    }
    
    #more-button-container{
       margin-top: -14.9em;      
    }
  </style>
               
                                                                                                              <% } %>   

 
  
  <style>body, html { margin: 0; padding: 0; } * { font-family: ubuntu; color:#fff } .player { background-color: #000 !important; display: grid; grid-template-columns: 1fr min-content; grid-template-rows: max-content 1fr max-content max-content max-content; gap: 0 0; width: 100%; /* height: 100%; */ aspect-ratio: 16 / 9; } .player * { color: #fff; } .player.embed, video.embed { position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .player * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .player > video { position: relative; width: 100%; height: 100%; z-index: 0; grid-area: 1 / 1 / 6 / 3; } .player.hide-controls > .player-title, .player.hide-controls > .player-controls, .player.hide-controls > .player-playback-bar-container, .player.hide-controls > .player-menu { display: none !important; } .player-controls { background-color: #0007; display: flex; justify-content: center; align-items: center; z-index: 1; grid-area: 1 / 1 / 6 / 3; } .player-button { width: 96px; height: 96px; font-size: 90px; text-align: center; line-height: 48px; } .player-tiny-button { width: 40px; font-size: 20px; text-align: center; } .player-tiny-button > i { color: #ddd; } .player-button, .player-button * { color: #dddddd !important; text-decoration: none; } .player-button > i { min-width: 48px; } .player-button:hover, .player-button:hover * { color: #fff !important; } .player-playback-bar { transition: width linear 100ms; } .player-playback-bar-container { grid-area: 4 / 1 / 5 / 3; display: flex; column-gap: 8px; justify-content: center; align-items: center; height: 8px; transition: height linear 100ms; width: 100%; z-index: 2; margin-bottom: 10px; } .player-playback-bar-bg { background-color: #fff3 !important; width: 100%; height: 100%; z-index: 2; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } .player-playback-bar-bg > * { grid-area: 1 / 1 / 2 / 2; } .player-playback-bar-buffer { background-color: #fffa !important; height: 100%; width: 0; z-index: 3; } .player-playback-bar-fg { background-color: #f00 !important; height: 100%; width: 0; z-index: 4; } .player-buffering { grid-area: 1 / 1 / 6 / 3; z-index: 1; display: flex; justify-content: center; align-items: center; } .player-buffering-spinner { width: 80px; height: 80px; }</style>
  <body>
<div class="app" style="color:#fff;margin-top: 0;">
<nav>
       <div class="left"><a class="class" href="/" style="font-family:Inter,sans-serif;color:#fff"> <img style="width: 8.5em;display: block;margin-left: -1.5em;margin-right: auto;" src="/css/logo-mobile.svg">      </a>
             </div>
           
  <div class="middle">
    
  </div>
            <div class="right">
          
       <a href="/discover?tab=search" style="position: absolute;right: 0;margin: 2em;" ><i class="fa-light fa-search"></i></a> 

            </div>
     
              <a name="top"></a>
        </nav>
	   <div class="mobile-page">
	<div class="primary" >
		<div class="video-player-container" style="background-color:#000">
    <% if (lightOrDark(color) == "dark") { %>  

<video class="player" id="video" style="border-radius: 6px;box-shadow: 0 10em 7em  <%=color2
                                                        %>;" autoplay controls   
       
       poster="https://p.poketube.fun/https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg?v=607ddcd4">
        
                                                                                     <% } %>                
   <% if (lightOrDark(color) == "light") { %>  

<video class="player" id="video" style="border-radius: 6px;box-shadow: 0 10em 7em <%=color
                                                        %>;" autoplay controls   
       
       poster="https://p.poketube.fun/https://i.ytimg.com/vi/<%=inv_vid.videoId%>/maxresdefault.jpg?v=607ddcd4">
        
                                                                                     <% } %>                

  
        
                
           <% 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">

                                                                             <% } %>                

      <% 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">
        
                                                                           <% } %>                

                                      

            
                
            
               <%  if (Array.isArray( video?.Subtitles?.Subtitle)) { %> 

    <% if (  video?.Subtitles?.Subtitle) { %>  

   <% video.Subtitles?.Subtitle?.forEach(x => { %><track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= x.language %>" label="<%= x.language %>" kind="subtitles">                                                             
         <% }) %>   
                                                                                                       <% } %>               
                                                           <% } %>                
 					</video>
                                                 
 		</div>
<div class="video-info" >
        <div style="background-image: linear-gradient( 135deg, #F97794 10%, #623AA2 100%, #8e6f7e 100%);border-radius: 10px;margin-bottom: 10px;padding-bottom: 1em;padding-top: 0.3em;">
          
                                        <div style="display: flex;justify-content: center;align-items: center;flex-direction: row; column-gap: 3px;" align="center">
                                
  <% if (!qua) { %> 

                                 <i style="display: block;" title="High Definition [Current]" class="fa-solid fa-high-definition"></i> <a href="/watch?v=<%=inv_vid.videoId%>&quality=medium"><i style="display: block;" title="Standard Definition" class="fa-light fa-standard-definition"></i></a>
                                                                      <% } %>               
                               <% if (qua) { %> 
                                 <a href="/watch?v=<%=inv_vid.videoId%>">  <i style="display: block;"  title="High Definition" class="fa-light fa-high-definition"></i> </a>  <i style="display: block;" title="Standard Definition [Current]"  class="fa-solid fa-standard-definition"></i>

                                                                      <% } %>               

       </div>            
                  <div class="video-title" style="font-family:'Inter';;white-space:yes;padding: 10px;
"><%=inv_vid.title%><br>    
                    <a id="language-button" href="#desc-container" style="color: pink;
margin: 0;
font-size: 13px;margin:0;padding:0;white-space: nowrap;
" class="switch"><%=engagement.viewCount.toLocaleString()%> views <%=date%> <ptd-custom-more>...more</ptd-custom-more>
                    </a>
                    
                    </div>
                    
					<div class="channel-info" style="border: none;padding: 10px;background: #0009;border-radius: 15px;margin-left: 6px;margin-right: 12px;" name="chnl">
               
				<a class="avatar">
					<img src=" https://p.poketube.fun/<%= k.Video.Channel.Avatar[1].$t %>">
				</a>
              
				<div class="name" style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);">
		  <div>
             <a href="/channel?id=<%=k.Video.Channel.id%>" style="color:#fff;max-width: 9.8em;" class="max-lines-1">
               <%=k.Video.Channel.Name%></a>   
         
		<div class="subscriber-count" style="write-space:nowraap">
          <%= k.Video.Channel.subscriberCount %>
 				</div>
              </div>
				</div>
               
 
				<button class="subscribe-button" ><a style="color:#fff" href="https://www.youtube.com/channel/<%=k.Video.Channel.id%>?view_as=subscriber?sub_confirmation=1">Suscribe</a></button>
               
			</div>
            
                        <div>
                <div>
                    <div class="ptnewbuttons" style="  display: flex;
  white-space: nowrap;
  overflow: auto;
  margin-bottom: 6px;
  padding: 4px;
  margin-right: 0.99em;
                                                     ">

                  <div class="new-button" style="height: 2.3em">

<div class="pill-button" style="margin-right: 7.5px;">
    <i class="fa-light fa-thumbs-up"></i>
     <%=convert(engagement.likes)%>
       </div>
       
        <div class = "vertical"></div>
      
					<div style="margin-left: -7.5px;" title="<%=engagement.dislikes.toLocaleString()%> Dislikes">
                <div class="pill-button">

<i class="fa-light fa-thumbs-down"></i>  <%=convert(engagement.dislikes)%> 
					</div>					</div>
			
            


      </div>

  					<a class="new-button" title="Download this Video :3" style="color:#fff;text-decoration: none;margin-right: 0; " href="/download?v=<%=inv_vid.videoId%>">
                            <div class="pill-button">

            <i class="fa-light fa-download"></i>
            Download
            </div>
					</a>
 
  
              <a class="new-button" style="color:#fff" onclick="share()">   
                                            <div class="pill-button">

            <i class="fa-light fa-share"></i>
            Share
                </div>
                </a>

   	<a  class="new-button" style="color:#fff" href="#more-button-container"> 
                                                  <div class="pill-button">

                                                    <i style="color:#fff" class="fa-thin fa-circle-plus"></i> More.. 
      </div>
  
  </a>
      
  </div>
                    
 				<div class="video-info-bar" style="font-family:'Inter';">
  
      <!--
<div class="video-info-buttons" style="font-family:'Inter';;white-space:yes;background:#333;border-radius: 15px;margin: 6px;align-self: center;align-items: center;">
  <div>
   <i class="fa-light fa-thumbs-up"  style="font-size:x-large" ></i>
     <%=convert(engagement.likes)%>
       </div>
              <div>
 <i class="fa-light fa-thumbs-down"  style="font-size:x-large" ></i><%=convert(engagement.dislikes)%>
                </div>
					<a style="color:#fff" href="/download?v=<%=inv_vid.videoId%>&from=mobile">   
            <i style="font-size:x-large" class="fa-light fa-download"></i>
            Download
					</a>
            <a style="color:#fff" onclick="share()">   
            <i style="font-size:x-large" class="fa-light fa-share"></i>
            Share
					</a>
 	<a style="color:#fff" href="#more-button-container"> <i style="font-size:x-large;color:#fff" class="fa-thin fa-circle-plus"></i>More.. </a>
            </div>

-->
				</div>
       <%  if (Array.isArray( inv.comments)) { %> 
<div style="padding: 0em;background: #0009;border-radius: 16px;align-self: center;align-items: center;margin-left: 8px;margin-right: 12px;padding-bottom: 0;padding-top:1em">
            <div class="video-title" style="font-family:'PokeTube flex';font-weight:1000;white-space:yes;margin-top: -0.5em;margin-left: 0.4em;">Comments - <%- convert(inv.commentCount) %>
                    <a id="language-button" href="#comments-container" style="float: right;margin-right: 0.5em;" class="switch">
<i class="fa-thin fa-chevron-down"></i>
</a> 
                                                       </div> 
           <div class="" style="padding: 0em !important;margin-left: 0.3em;">

<div class="desc" style="display: flex;font-size: small;padding: 0;margin: -10px;margin-left: -0.5em">
                   <h5 style="display: flex;margin-top: 7px;padding-top: 10px;">
                     <div class="thumb">
                     
                     <div class="thumb">
				<a href="/channel?id=<%-  inv.comments[0].authorId%>" class="avatar" style="width: 40px;height: 40px;margin: 4px;">
					<img src="https://p.poketube.fun/<%=  inv.comments[0].authorThumbnails[1].url %>" style="width: 24px;height: 24px;margin-right: inherit;"  >
                     </a>
            </div>
                      
                           

              </h5>
              <p class="comment" style="font-weight: bold;color: #fff; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;  max-width: 50em;align-self:center;">
                <%-  inv.comments[0].contentHtml %>  
               </p>
            </div>
    
      </div>
                          
          </div>

 
 
                                                                                               <% } %>   
       
          </div>



<div id="desc-container">
  
 <div class="backtotop">
  <hr class="no-display" />
  <a href="#top"><b>&#9650;</b></a>
 </div>
 <div id="desc" class="rounded-corners">
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;"><hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;">

  <div id="set-language" class="button">

   </a>
  </div>
<div id="descs" style="display: contents;">
  <h3 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);;;white-space:yes"> Description  
   <a href="#top" class="close" style="color: #fff;"></a>
  </h3>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">

         <div class="video-title" style="font-family:'Inter';;white-space:yes;margin-bottom: 8px;"><%=inv_vid.title%></div>
                 <!--

<div class="channel-info" name="chnl" style="padding: 0;border: none;">
  <a href="/channel?id=<%=video?.Channel.id || k.Video.Channel.id%>" class="avatar">
					<img src=" <%= k.Video.Channel.Avatar[1].$t %>">
				</a>
				<div class="name" style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);">
		  <div>
						<a style="color:#fff" href="/channel?id=<%=k.Video.Channel.id%>" >  <%=k.Video.Channel.Name%></a>   
                          </div>
				</div>
		 
 			</div>
-->
                 
<div style="display: flex;justify-content: center;gap: 3em;">
    
 <div style="text-align: center;font-size: x-large;margin: 9px;">
    	<p>
        <%=convert(engagement.viewCount)%>  
      <br>
 </p><p style="font-size: 17px;">Views</p>

          </p>
  </div>
<div style="text-align: center;font-size: x-large;margin: 9px;">
    	<p>
        <%=convert(engagement.likes)%>  
      <br>
 </p><p style="font-size: 17px;">Likes</p>

          </p>
  </div>
           
             <div>
    <div style="text-align: center;font-size: x-large;margin: 9px;">
    	<p>
        <%=convert(engagement.dislikes)%>  
      <br>
 </p><p style="font-size: 17px;">Dislikes</p>

          </p>
  </div>
  </div>
    </div>

  
                                  <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;"> 
<p style="margin-top: 10px;margin-bottom: 10px;">
          </p>	
              
       <%-String(linkify(inv_vid.description)).replace(/\n/g, " <br> ").replace(/twitter\.com/g, "nitter.net").replace(/reddit\.com/g, "teddit.net") %>

  
                            
  <div style="margin: 10px;">
                    <div style="justify-content: center;display: flex;padding: 11px;font-family: Ginto nord;gap: 3px;background: #1f1f1f;border-top-left-radius: 10px;border-top-right-radius: 10px;">
More info about the video
    </div>  
 
                              

                              
                                                            <div style="background:#181818;" class="fromtheweb-outer">
                          <div class="fromtheweb-inner">
                             
                   <% if (wiki.extract_html) { %> 
<div class="video-title" style="color:#fff;font-family:Ginto Nord,sans-serif;font-weight:700;margin-top: 10px;margin-bottom: 10px;text-aligin:left;">From da web</div>
                     
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">

  <b><%-wiki.extract_html%>
   
<p style="margin-bottom: 10px;">

  <a href=" <%-wiki.content_urls.desktop.page%>
 ">From wikipedia </a> under CC-BY-SA 3.0
    </p></b>
 
                 
                      <% } %>  
                                 <% if (!wiki.extract_html) { %> 
                                                                    <% if (desc) { %> 

<div class="video-title" style="color:#fff;font-family:Ginto Nord,sans-serif;font-weight:700;margin-top: 10px;margin-bottom: 10px;text-aligin:left;">About This Channel</div>
                     
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">

<p><b><%-desc%></b></p>
 
                 
                      <% } %>                        <% } %>  

                        
                          </div>
                   
 			</div>
  
                                                   <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
     <%  if (Array.isArray(video?.Tags?.Tag)) { %> 

                            <div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 10px;margin-bottom: 10px;">Tags</div>
                      <div class="tags">
        
 <% video.Tags.Tag.forEach(x => { %>
 <div class="tag">
   <a href="/hashtag/<%=x %>" style="color:var(--text-color)">
   <%=x %>
     </a>
   </div>
   
         <% }) %>  
           
           </div>
   
   
           <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">
            <% } %>  


                      
 
                          </div>
</div>
 </div>
</div>
 
                            </div> 
                         <div id="more-button-container">
  
 <div class="backtotop">
  <hr class="no-display" />
  <a href="#top"><b>&#9650;</b></a>
 </div>
 <div id="more-button" class="rounded-corners">
   <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;"><hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;">
 
  <div id="set-language" class="button">

  </div>
<div id="more-buttons" style="display: contents;">
  <h3 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);;;white-space:yes"> M O A R
    <a href="#top" class="close" style="color: #fff;"></a> </h3>
  <p style="padding: 0;margin: 0;font-family: Inter;">
More Epic options owo~
  </p>
  <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">

           <div style="font-family:Inter,sans-serif;;white-space:yes;">
     <a href="https://youtube.com/watch?v=<%=inv_vid.videoId%>">Open On YouTube</a>  •  <a href="/privacy">Privacy</a>    • <a href="https://github.com/iamashley0/poketube/">Git</a> 
                                <% if (optout) { %> 
 <% } %>
      <% if (!optout) { %> 
   • <a href="/watch?v=<%=inv_vid.videoId%>&m=f"> 
 Opt out of Metrics</a> (<a href="/privacy" style="color:#fff">Wut?</a>) 
     <% } %>
                        <% if (lyrics && !r) { %>                      
      <% if (optout) { %> 
                 <br>    <br>     <a href="/watch?v=<%=inv_vid.videoId%>&r=f">  Lyrics (Wow) </a> 
  <% } %>
         <% if (!optout) { %> 
             <br>   <br>          <a href="/watch?v=<%=inv_vid.videoId%>&r=f" >  Lyrics (Wow) </a> 
 <% } %>
                            <% } %> 
                          
            <% } %>                                     
                     <br>    <br>   <p><i class="fa-light fa-shield"></i> The Connection is secured with ECDSA with SHA-384 Signature Algorithm :3 <a href="/encryption?v=<%=inv_vid.videoId%>">Click here for encryption info</a><br> 
                                             
                    </p> 


 


				</div>				</div>
				</div>
                                    
               
                              
      	           <% if (lyrics) { %>
                                                  <% if (r === "f") { %> 
                                <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
                                                    <p>
            <a href="/watch?v=<%=inv_vid.videoId%>">See the Recommended videos instead</a> - <a href="https://github.com/iamashley0/poketube/issues">Report wrong lyrics qwq</a>
                                                    </p>
         <div align="center">                                <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
                                                              <h1 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);;white-space:yes;" align="center">
 Lyrics 
                        </h1>  
           <p>
 See how our lyrics search works:<a href="https://github.com/iamashley0/poketube/blob/main/src/lyrics.js">Here</a>
           </p>
                        <p style="color: white;">
                                        <p style=color:#fff>
                                            <%-lyrics%>
                                        </p> 
                           
                                          <% } %>
 
                                        <% } %>         
                                  
 		</div>
 </div>         
<div id="comments-container">
  
 <div class="backtotop">
  <hr class="no-display" />
  <a href="#top"><b>&#9650;</b></a>
 </div>
 <div id="comments" class="rounded-corners">
   <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;"><hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 11em;/*! width: 4.5em; */height: 0;">
  <div id="set-language" class="button">

   </a>
  </div>
<div id="commentss" style="display: contents;">
   <h3 style="font-family:var(--text-font-primary);font-weight:var(--text-header-weight);;;white-space:yes"> Comments <a href="#top" class="close" style="color: #fff;"></a> </h3>
  <p style="padding: 0;margin: 0;font-family: Inter;">
    Top Comments :3
  </p>
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;/*! width: 4.5em; */height: 0;">

                                                                                                                                  <%  if (inv != "Disabled") { %> 

                                                                             <%  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>
                             <% } %>
                             <% } %>

                                                                                                                                          <%  if (inv == "Disabled") { %> 

                                                                                <p>
                                                                                  Comments are disabled
                                                                               </p>
                              <% } %>

                                     
                        <%  if (Array.isArray( inv.comments)) { %> 

                                 <% inv.comments.forEach(x =>{ %>
 
                                 
                                   <div class="<%- 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="single-comment justify-content-between d-flex" style="padding-top: none;">
          <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.authorId%>" class="avatar" style="width: 40px;height: 40px;">
					<img src="https://p.poketube.fun/<%= x.authorThumbnails[1].url %>" style="width: 40px;height: 40px;">
                     </a>
            </div>
                                                          <%  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.authorId%>" style="color: #fff;text-decoration: none;" >

                <%- 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.publishedText %>
                  </p>
                  </a>
                            
                                

                  
                  </p>                                                                <% } %>   

                                          <%  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.authorId%>" style="color: #fff;text-decoration: none;" >

                                <%- 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.publishedText %>
                  </p>
                  </a>
                                  
                                                         
                                                                                                  
                                                                                                <% } %>   

                  
                  </p>

              </h5>
              <p class="comment" style="font-weight: bold;">
                <%- x.contentHtml %>
              <span style="  white-space: nowrap;">   <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 ion-ios-heart creator-heart-small-container" title="<%= x.creatorHeart.creatorName%> marked it with a ❤ owo"></i>
        </span>   
  
                                                                <% } %>   
              </p>
            </div>
          </div>
        </div>
      </div>
                          
                                               </div>

                                                                        <% }) %>   

                                   <% } %>   
                                     

                                                                              </div>

 



              </div>
				</div>
                   
            
                   
                           <div>
 
                                                   
                 
 	</div> 	</div>

                 
  	 <div class="secondary" style="padding-top: 0;">

	<div class="recommended-list" style="color:#fff">
    
       <div style="text-align: left;" class="auto-play">
                                <label for="continue">AutoPlay:</label> 
                                <input name="continue" id="continue" type="checkbox" >
                                <a href="https://codeberg.org/Ashley/poketube/issues/new">give feedback</a>
                             </div>
    
                              <% if (!r) { %> 
                                 
                                
                              
                              
                              <% if (!f) { %> 
     <% k.Video.Recommendations.Video.forEach(x => { %>       
 						<div class="video">
                    <% if (!optout) { %> 

      <a  href="/watch?v=<%= x.id %>" class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;border: 2px solid white;"  >								<span class="video-length"><%=x.duration %></span>
                           <% } %>
   <% if (optout) { %> 

      <a  href="/watch?v=<%= x.id %>&m=f" class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;border: 2px solid white;"  >								<span class="video-length"><%=x.duration %></span>
                           <% } %>
							</a>
							<div class="info">
                
      <% if (!optout) { %> 
								<a href="/watch?v=<%= x.id %>" class="title max-lines-2" style="margin-top: 4px;"><%= x.Title %></a>
                   <% } %>
   <% if (optout) { %> 
								<a href="/watch?v=<%= x.id %>&m=f" style="margin-top: 4px;" class="title max-lines-2"><%= x.Title %></a>
                   <% } %>
								<div  style="color:#fff" >
               <a class="max-lines-2" style="color:#fff" href="/channel?id=<%= x.Channel.id %>"><%=x.Channel.Name %></a> • <div>
  <%= x.uploadedAt %>  </div>
								</div>
							</div>
						</div>
 
       <% }) %>   
                            <% } %>
 
     <% if (f) { %> 

     <% tj.Channel.Contents.ItemSection.ItemSection.Video.forEach(x => { %>       
 						<div class="video">
                    <% if (!optout) { %> 

      <a  href="/watch?v=<%= x.id %>" class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;"  >								<span class="video-length"><%=x.duration %></span>
                           <% } %>
   <% if (optout) { %> 

      <a  href="/watch?v=<%= x.id %>&m=f" class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 9.5px;"  >								<span class="video-length"><%=x.duration %></span>
                           <% } %>
							</a>
							<div class="info">
       <% if (!optout) { %> 
								<a href="/watch?v=<%= x.id %>" class="title max-lines-2"><%= x.Title %></a>
                   <% } %>
   <% if (optout) { %> 
								<a href="/watch?v=<%= x.id %>&m=f" class="title max-lines-2"><%= x.Title %></a>
                   <% } %>
								<div>
               <a class="max-lines-2" style="color:#fff"  href="/channel?id=<%= video?.Channel.id || k.Video.Channel.id%>"><%= video?.Channel?.Name || k.Video.Channel.Name %></a>
									<div>  
 <%= x.uploadedAt %>  </div>
								</div>
							</div>
						</div>
 
       <% }) %>   
                            <% } %>
                                      
                               

              </div>
                           
                   
                                

  <script type="text/javascript">
<!--//--><![CDATA[//><!--
/**
 * @licstart The following is the entire license notice for the JavaScript
 * code in this page.
 *
 *  Copyright (C) 2021-2023 POKETUBE (https://github.com/iamashley0/poketube)
 *
 * The JavaScript code in this page is free software: you can redistribute
 * it and/or modify it under the terms of the GNU General Public License
 * (GNU GPL) as published by the Free Software Foundation, either version 3
 * of the License, or (at your option) any later version.  The code is
 * distributed WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU GPL
 * for more details.
 *
 * As additional permission under GNU GPL version 3 section 7, you may
 * distribute non-source (e.g., minimized or compacted) forms of that code
 * without the copy of the GNU GPL normally required by section 4, provided
 * you include this license notice and a URL through which recipients can
 * access the Corresponding Source.
 *
 * @licend The above is the entire license notice for the JavaScript code
 * in this page.
 */

//--><!]]>
</script>
 <script>  
   // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0-or-later
 function share(){
   if (navigator.share) {
  navigator.share({
    title: document.title,
    text: "",
    url: "https://" + window.location.hostname + "/<%=inv_vid.videoId%>"
  })
  .then(() => console.log('Successful share'))
  .catch(error => console.log('Error sharing:', error));
}
 }
     // @license-end
                                          </script>
         
             
<script>
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0-or-later  
function removeParam(paramName) {
  
  let searchParams = new URLSearchParams(window.location.search);
  searchParams.delete(paramName);

  if (history.replaceState) {
        let searchString = searchParams.toString().length > 0 ? '?' + searchParams.toString() : '';
        let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname +  searchString + window.location.hash;
        history.replaceState(null, '', newUrl);
    }
}

checkbox = document.getElementById("continue");

checkbox.addEventListener('change', function(e) {
  if(checkbox.checked) {
    
    console.log("[AUTOPLAY BETA] enabled")
    
    document.getElementById('video').addEventListener('ended',autoplaynextvideo,false);
      
    function autoplaynextvideo(e) {
    location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>"
    }
  }
  
  if (/[?&]autoplay=/.test(location.search)) {
   if(!checkbox.checked) {
   removeParam("autoplay")
   }    
  }
  
});
  
if (/[?&]autoplay=/.test(location.search)) {
  checkbox.checked = true;
  
    console.log("[AUTOPLAY BETA] enabled")
    
    document.getElementById('video').addEventListener('ended',autoplaynextvideo,false);
      
    function autoplaynextvideo(e) {
        location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>"
    }
}
</script>
           
  <noscript>
  <style>
    .auto-play{
      display:none !important;
    }  
  </style>
  </noscript>
         
 <% if (!optout) { %> 
          <!-- MORE INFO :https://poketube.fun/privacy -->
          <!-- MORE INFO :https://poketube.fun/privacy -->
   
          <!-- if you  want to change the url - please see config in server.js  -->
   
         <!-- START <%=t%> -->  
  <!-- mobile only -->
   <!-- dont use matomo.php, as its being blocked by ublock origin. -->
        <img src="<%=t%>t/index.php?idsite=5&amp;rec=1" style="width: 0;visibility: hidden;border:0;"  alt="" >
  <!--- mobile only -->
   
        <img src="<%=t%>t/rep.gif?ID=<%=btoa(Date.now())%>" style="width: 0;visibility: hidden;" id="SesionID">
        <img src="<%=t%>t/rep.gif?video_id=<%=btoa(inv_vid.videoId)%>" style="width: 0;visibility: hidden;" id="videoID">
        <img src="<%=t%>t/rep.gif?channel_ID=<%=btoa(video?.Channel.id || k.Video.Channel.id)%>" style="width: 0;visibility: hidden;" id="channel">
        <img src="<%=t%>t/rep.gif?piwik=t" style="width: 0;visibility: hidden;" id="piwik_noip_no_personal-info_collect">
        <!-- END <%=t%> -->  
 <% } %>
</div>
 
</body>
</html>
  </body>
  <% } %>

  <% } %>
