From 83d06e8584626f96a8061c6e9a8f99d81f617bb2 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.com>
Date: Wed, 1 May 2024 17:32:08 -0400
Subject: [PATCH 1/2] Clean up area under video and add Theater toggle

---
 css/poketube.css  |  19 +++++-
 html/poketube.ejs | 152 +++++++++++++++++++---------------------------
 2 files changed, 82 insertions(+), 89 deletions(-)

diff --git a/css/poketube.css b/css/poketube.css
index ef0fc5d7..9e31ad6f 100644
--- a/css/poketube.css
+++ b/css/poketube.css
@@ -783,6 +783,23 @@ a.new-button:hover {
   display: none;
 }
 
+.pwp {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 6px;
+  padding: 16px 0px;
+}
+.pwp a, .fnt {
+  background: #452f37;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px;
+  color: white;
+}
+
 .hj:checked ~ .flying_cmnt {
   display: grid;
   position: absolute;
@@ -814,7 +831,7 @@ marquee {
 }
 
 #video:target {
-object-fit:none;
+object-fit:contain;
 }
 
 #secret-theme:target{
diff --git a/html/poketube.ejs b/html/poketube.ejs
index aafbf42a..0c231df0 100644
--- a/html/poketube.ejs
+++ b/html/poketube.ejs
@@ -1001,95 +1001,71 @@ Privacy
     
     
 		<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>
-       
-              <% 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">
+      <video class="player video-ambient-container" id="video" style="border-radius: 16px; box-sizing: border-box; min-width: 100%; display: block;" autoplay controls>
+      <% 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 (!isSchoolProxy) { %>
+        <% 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/<%=inv_vid.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
+          <% } %>
+        <% } %>
+      <% } %>
 
-      <% if (qua === "medium") { %>  
+      <% if (isSchoolProxy) { %>
+        <% if (!qua) { %>
+          <source src="https://tube-proxy.ashley0143.xyz/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-proxy.ashley0143.xyz/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
+        <% } %>
+      <% } %>
 
-                                                <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 (!isSchoolProxy) { %>
+      <%  if (Array.isArray( inv_vid.captions)) { %> 
+        <% inv_vid.captions?.forEach(x => { %>
+          <track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= x.label %>" label="<%= x.label.replace("United States","Simplified - USA") %>" kind="subtitles">      
+        <% }) %>   
+      <% } %>                     
+      
+      <%  if (!Array.isArray( inv_vid.captions)) { %> 
+        <track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= %>" label="<%=  video.Subtitles.Subtitle.language.replace("United States","Simplified - USA") %>" kind="subtitles">      
+      <% } %>                                                       
+    </video>
+      
+    <% if (!a) { %>
+      <canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-1"></canvas>
+      <canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-2"></canvas>
+    <% } %>
+    
+    <div class="pwp">
+      <% if (!qua) { %> 
+        <a><i style="display: block;" title="High Definition [Current]" class="fa-solid fa-high-definition"></i> High Definition </a>
+        <a href="/watch?v=<%=inv_vid.videoId%>&quality=medium"><i style="display: block;" title="Standard Definition" class="fa-light fa-standard-definition"></i> Standard Definition</a>
+      <% } %>
 
-              <% 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) { %> 
+        <a href="/watch?v=<%=inv_vid.videoId%>">  <i style="display: block;"  title="High Definition" class="fa-light fa-high-definition"></i> High Definition </a>
+        <a><i style="display: block;" title="Standard Definition [Current]"  class="fa-solid fa-standard-definition"></i> Standard Definition</a>
+      <% } %>
 
-                                                                             <% } %>                
+      <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"></i> Stats
+        </div>
+      </label>
 
-      <% if (qua === "medium") { %>  
-
-                                                <source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
-                                                                                   <% } %>                
-
-        
-                                                                           <% } %>                
-                                                                                                       <% } %>                     
-              <% if (isSchoolProxy) { %>
-        <% if (!qua) { %>                       
-                                                <source src="https://tube-proxy.ashley0143.xyz/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-proxy.ashley0143.xyz/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
-        
-                                                                           <% } %>  
-                                      
-                                                                                                   <% } %>                
-
-       
-     <%  if (Array.isArray( inv_vid.captions)) { %> 
-   <% inv_vid.captions?.forEach(x => { %>
-     <track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= x.label %>" label="<%= x.label.replace("United States","Simplified - USA") %>" kind="subtitles">      
-     
-          <% }) %>   
-                                                                                                       <% } %>                     
-     <%  if (!Array.isArray( inv_vid.captions)) { %> 
-     <track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= %>" label="<%=  video.Subtitles.Subtitle.language.replace("United States","Simplified - USA") %>" kind="subtitles">      
-     
-             
-                                                           <% } %>         
-                                                                           
-                                                             </video>
-               <% if (!a) { %>  
-
-                                                             <canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-1"></canvas>
-                                                             <canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-2"></canvas>
-                        
-                 <% } %>         
-
- <div class="pwp" style="display: flex;justify-content: center;align-items: center;flex-direction: row; column-gap: 3px;margin-top: 2px;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>
+      <a onclick="if(document.querySelector('.watch-page').style.display === 'grid') {document.querySelector('.watch-page').style.display = 'flex'} else {document.querySelector('.watch-page').style.display = 'grid'}"><i class="fa-sharp fa-light fa-up-right-and-down-left-from-center"></i> Theater</a>
                                                                         
 <%  if (inv.comments) { %> 
                 <input type="checkbox" class="hj" id="j" style="display:none">
@@ -1101,7 +1077,7 @@ display: block; !important;" autoplay controls>
                                                                         </label>
                                                                       <% } %>   
                                                                         
-                                                                   <a href="#video"  class="maxi"  id="maximize">  <i style="display: block;"  title="Maximise!" class="fa-light fa-maximize"></i> </a> 
+                                                                   
                                                                            
                                                      
 <!-- Stats for nerds -->
@@ -1142,7 +1118,6 @@ display: block; !important;" autoplay controls>
                       
        </div>
        </div>
-                                                            <br>
 <div class="video-info" >           
         	<div class="video-info-panel gradient">  
             <% if (k.Video.Channel.Name == "7clouds") { %> 
@@ -3214,10 +3189,11 @@ video.addEventListener('ended', () => {
 window.addEventListener('load', () => {
   resumeProgress();
 });
-
-
 </script>
-           
+
+
+
+
   <noscript>
   <style>
     .auto-play{

From c46d95c1960c034b41ba0727cb6059163c40ee3e Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.com>
Date: Wed, 1 May 2024 17:32:37 -0400
Subject: [PATCH 2/2] Clean up area above searched videos

---
 css/search.main.css |  7 +++++++
 html/search.ejs     | 44 +++++++++++++++++++++++++++-----------------
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/css/search.main.css b/css/search.main.css
index 21d28de6..d76968e4 100644
--- a/css/search.main.css
+++ b/css/search.main.css
@@ -1035,3 +1035,10 @@ a.icon-button > img {
     width: 500px;
     padding: 8px;
 }
+.search-options {
+    display: flex;
+    justify-content: space-evenly;
+    width: 100%;
+    max-width: 855px;
+    margin: auto;
+  }
\ No newline at end of file
diff --git a/html/search.ejs b/html/search.ejs
index bebff2a4..13ca48b8 100644
--- a/html/search.ejs
+++ b/html/search.ejs
@@ -66,30 +66,27 @@ summary:hover{
   <style>
     
     
- .tags.rec {
-  font-weight: 600;
-  font-stretch: expanded;
-  overflow:hidden;
-  width: auto;
-  max-width: fit-content;
-  margin-right: auto;
-  padding-left: 1.5em;
-  margin-top: 7px;
+.search-options {
   display: flex;
-  gap: 3px;
-  margin-inline: auto;
-  margin-left: 8em;
- }
-
+  justify-content: space-between;
+  width: 100%;
+  max-width: 855px;
+  margin: auto;
+  padding: 24px 0px 12px 0px;
+}
     
 .tags.rec:hover{
   overflow-x:auto;
 }
-
+.tags.rec {
+  display: flex;
+  gap: 12px;
+  height: max-content;
+}
 .tags.rec > .tag {
   border-radius: 8px;
-  background:var(--chip-background-hover);
-
+  background: var(--chip-background-hover);
+  padding: 8px 16px;
 }
 
 .tag {
@@ -99,6 +96,19 @@ summary:hover{
   white-space: nowrap;
   font-family: ubuntu, sans-serif;
 } 
+
+#filters-collapse summary {
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+}
+.filter-options div {
+  padding: 6px 12px;
+}
+.filter-name.underlined {
+  padding: 12px 0px 12px 23px;
+  font-weight: bold;
+}
     
 .container {
       max-width: 800px;