client: remove search box in folder view

- add working ctrl f listener

Pipfile

@@ -1,11 +0,0 @@
-[[source]]
-url = "https://pypi.python.org/simple"
-verify_ssl = true
-name = "pypi"
-
-[packages]
-
-[dev-packages]
-
-[requires]
-python_version = "3.8"

src/App.vue

@@ -70,12 +70,10 @@ export default {
 
     const expandQueue = () => {
       up_next.value = !up_next.value;
-      search.value = false;
     };
 
     const expandSearch = () => {
       search.value = true;
-      up_next.value = false;
     };
 
     const collapseSearch = () => {

src/assets/css/global.scss

@@ -4,7 +4,6 @@
 }
 
 * {
-  user-select: none;
   box-sizing: border-box;
 }
 
@@ -51,6 +50,17 @@ a {
   display: none;
 }
 
+button {
+  border: none;
+  color: inherit;
+  font-size: 1rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgb(158, 58, 58) !important;
+  }
+}
+
 .l-container {
   display: grid;
   grid-template-columns: min-content 4fr min-content;
@@ -91,7 +101,6 @@ a {
   transition: all 0.3s ease;
 }
 
-
 .ellip {
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -172,7 +181,7 @@ a {
 /* Handle on hover */
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgb(163, 163, 163);
+  background: $blue;
 }
 
 @-webkit-keyframes similarAlbums {
@@ -237,5 +246,4 @@ a {
 .not_active {
   background-image: url(../../assets/icons/playing.webp);
   transition: all 0.3s ease-in-out;
-
+}
-}

src/components/FolderView/SearchBox.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="folder-top flex">
     <div class="fname">
-      <div>
+      <button class="play image">
-        <div class="ellip">{{ path.split("/").splice(-1) + "" }}</div>
+        <div class="icon"></div>
-      </div>
+        Play
-    </div>
+      </button>
-    <div class="fsearch">
+      <div class="ellip text">
-      <div>
+        <div class="icon image"></div>
-        <input type="search" placeholder="Search this directory" />
+        {{ path.split("/").splice(-1) + "" }}
       </div>
     </div>
   </div>
@@ -21,55 +21,51 @@ export default {
 
 <style lang="scss">
 .folder-top {
-  padding-bottom: 1rem;
-  margin-bottom: 1rem;
   border-bottom: 1px solid $separator;
-  width: calc(100% - 2rem);
+  width: calc(100% - 0.5rem);
-  margin-left: 1rem;
+  padding-bottom: $small;
+  height: 3rem;
 }
 
 .folder-top .fname {
   width: 50%;
-  color: rgba(255, 255, 255, 0.438);
-  text-transform: uppercase;
   display: flex;
   align-items: center;
-}
 
-.folder-top .fsearch {
+  .play {
-  position: relative;
+    height: 100%;
-  width: 50%;
+    width: 5em;
-  padding-right: 3rem;
+    background-color: rgb(5, 74, 131);
-}
+    border-radius: $small;
+    display: flex;
+    align-items: center;
+    padding-left: $small;
+    margin-right: $small;
 
-.folder-top .fsearch div {
+    .icon {
-  width: 100%;
+      height: 1.5rem;
-  display: flex;
+      width: 1.5rem;
-  justify-content: flex-end;
+      background-image: url(../../assets/icons/play.svg);
-}
+      background-size: 1.5rem;
+      background-position: 10%;
+      margin-right: $small;
+    }
+  }
 
-.folder-top .fsearch input {
+  .text {
-  width: 30rem;
+    display: flex;
-  border: none;
+    align-items: center;
-  border-radius: 0.5rem;
-  padding-left: 1rem;
-  background-color: #4645456c;
-  color: rgba(255, 255, 255, 0.521);
-  font-size: 1rem;
-  line-height: 3rem;
-  outline: none;
-}
 
-.folder-top .fsearch input::-webkit-search-cancel-button {
+    border-radius: $small;
-  position: relative;
+    background-color: rgb(24, 22, 22);
-  right: 20px;
+    padding: $small;
-  cursor: pointer;
-  width: 50px;
-  height: 50px;
-}
 
-.folder-top .fsearch input:focus {
+    .icon {
-  color: rgb(255, 255, 255);
+      height: 1.5rem;
-  outline: 1px solid #fafafa52;
+      width: 1.5rem;
+      background-image: url(../../assets/icons/folder.svg);
+      margin-right: $small;
+    }
+  }
 }
 </style>

src/components/FolderView/SongList.vue

@@ -210,13 +210,14 @@ export default {
 }
 td,
 th {
-  padding: $small;
+  padding: $small 0 $small $small;
   text-align: left;
 }
 
 th {
   text-transform: uppercase;
   font-weight: normal;
+  display: none;
 }
 
 td .artist {
@@ -227,7 +228,6 @@ td .artist {
   border-collapse: collapse;
   text-transform: capitalize;
   position: relative;
-  margin: 1rem;
 
   tbody tr {
     cursor: pointer;

src/components/RightSideBar/UpNext.vue

@@ -21,7 +21,10 @@
       </div>
     </div>
     <div>
-      <div :class="{ hr: is_expanded }" class="all-items">
+      <div
+        :class="{ hr: is_expanded, v0x: !is_expanded, v1x: is_expanded }"
+        class="all-items"
+      >
         <div :class="{ v0: !is_expanded, v1: is_expanded }" class="scrollable">
           <div
             class="song-item h-1"
@@ -114,15 +117,22 @@ export default {
 </script>
 
 <style lang="scss">
-.up-next .hr {
-  border-top: 1px solid var(--separator);
-}
 .up-next .v0 {
   max-height: 0em;
   overflow: hidden;
   transition: max-height 0.5s ease;
 }
 
+.up-next .v0x {
+  background-color: transparent !important;
+  transition: all 0.5s ease;
+}
+
+.up-next .v1x {
+  transition: all .5s ease;
+  background-color: rgb(218, 72, 96);
+}
+
 .up-next .v1 {
   max-height: 21em;
   transition: max-height 0.5s ease;
@@ -135,7 +145,7 @@ export default {
 
 .up-next {
   padding: 0.5rem;
-  margin-top: 1rem;
+  margin-top: $small;
   background-color: $card-dark;
   border-radius: 0.5rem;
 }
@@ -165,6 +175,10 @@ export default {
   border-radius: 0.5rem;
   cursor: pointer;
   margin-bottom: 0.5rem;
+
+  &:hover {
+    background-color: $blue;
+  }
 }
 
 .up-next .main-item .album-art {
@@ -189,17 +203,22 @@ export default {
   width: 20rem;
   margin: 0;
   font-size: small;
-  color: rgba(255, 255, 255, 0.61);
 }
 
 .up-next .all-items {
   padding-top: $small;
+  border-radius: 0.5rem;
+  padding: $small;
 }
 
 .up-next .all-items .scrollable {
   overflow-y: auto;
-  width: 100%;
+  background-color: $card-dark;
   border-radius: 0.5rem;
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
 }
 
 .up-next .all-items p {

src/components/Search.vue

@@ -47,12 +47,14 @@
     <div class="scrollable" :class="{ v0: !is_hidden, v1: is_hidden }">
       <div class="tracks-results">
         <div class="heading">TRACKS<span class="more">SEE ALL</span></div>
-        <div class="result-item" v-for="song in songs" :key="song">
+        <div class="items">
-          <div class="album-art image"></div>
+          <div class="result-item" v-for="song in songs" :key="song">
-          <div class="tags">
+            <div class="album-art image"></div>
-            <span class="title">{{ song.title }}</span>
+            <div class="tags">
-            <hr />
+              <span class="title">{{ song.title }}</span>
-            <span class="artist">{{ song.artist }}</span>
+              <hr />
+              <span class="artist">{{ song.artist }}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -252,7 +254,7 @@ export default {
 }
 
 .right-search .v1 {
-  max-height: 26rem;
+  max-height: 25rem;
   transition: max-height 0.5s ease;
 }
 
@@ -361,19 +363,20 @@ export default {
 .right-search .heading {
   font-size: small;
   position: relative;
-  padding: 1rem;
+  padding:  $small;
   display: flex;
   align-items: center;
+
   .more {
     position: absolute;
-    right: 1rem;
+    right: $small;
     padding: 0.5rem;
     user-select: none;
   }
 
   .more:hover {
-    background: $blue;
+    // background: $blue;
-    border-radius: 0.5rem;
+    // border-radius: 0.5rem;
     cursor: pointer;
   }
 }
@@ -398,20 +401,24 @@ export default {
   }
 }
 
-/*  */
+/* tracks */
 
 .right-search .tracks-results {
   border-radius: 0.5rem;
-  background: #1f0012;
+  background: #ca0377;
   margin-left: $small;
   padding: $small;
 
+  .items {
+    border-radius: $small;
+    background-color: $card-dark;
+  }
+
   .result-item {
     display: flex;
     align-items: center;
     height: 4.5rem;
     width: 100%;
-    background-color: rgba(20, 20, 20, 0.479);
 
     .album-art {
       width: 3.5rem;
@@ -419,7 +426,7 @@ export default {
       background-color: rgb(27, 150, 74);
       border-radius: 0.5rem;
       margin: 0 $small 0 $small;
-      background-image: url(../assets/images/thriller.jpg);
+      background-image: url(../assets/images/girl3.jpg);
     }
 
     .tags .artist {
@@ -427,10 +434,6 @@ export default {
       color: rgba(255, 255, 255, 0.63);
     }
 
-    &:nth-child(odd) {
-      background-color: transparent;
-    }
-
     &:hover {
       background-color: $blue;
       border-radius: $small;
@@ -443,7 +446,7 @@ export default {
   border: none;
 }
 
-/*  */
+/* albums */
 
 .right-search .albums-results {
   border-radius: 0.5rem;
@@ -487,7 +490,7 @@ export default {
   }
 }
 
-/*  */
+/* artits */
 
 .right-search .artists-results {
   border-radius: 0.5rem;

src/composables/perks.js

@@ -73,7 +73,7 @@ const readQueue = () => {
 
   if (prev_queue) {
     state.queue.value = prev_queue;
-    
+
     updateNext(state.current.value);
     updatePrev(state.current.value);
   }
@@ -107,9 +107,11 @@ setTimeout(() => {
   });
 }, 1000);
 
-window.addEventListener('keyup', (e) => {
+window.addEventListener("keyup", (e) => {
-  if (e.code) {
+  e.preventDefault();
-      console.log(e.code);
+  
+  if (e.ctrlKey && e.code == "KeyF") {
+    console.log('Ctrl F')
   }
 });
 

src/views/FolderView.vue

@@ -79,7 +79,7 @@ export default {
 #f-view-parent {
   position: relative;
   background-color: $card-dark;
-  padding: 5rem $small 0 $small;
+  padding: 4rem $small 0 $small;
   overflow: hidden;
   margin: $small 0 $small 0;
 }
@@ -87,17 +87,14 @@ export default {
 #f-view-parent .fixed {
   position: absolute;
   height: min-content;
-  width: calc(100% - 2rem);
+  width: calc(100% - 1rem);
   top: 0.5rem;
+
 }
 
 #scrollable {
   overflow-y: scroll;
-  height: calc(100% - 1rem);
+  height: calc(100% - $small);
   padding-right: $small;
-
-  .separator {
-    margin: 0 1rem 0 1rem;
-  }
 }
 </style>