Refactor playlist controls and explorer sort type

dev-pengi · Feb 10, 2024 · 5f7a1fc · 5f7a1fc
1 parent 2d9edca
commit 5f7a1fc
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git a/src/components/controllers/Buttons/PlaylistControls.tsx b/src/components/controllers/Buttons/PlaylistControls.tsx
@@ -96,7 +96,7 @@ const PlaylistControls: FC = () => {
               </div>
             </Popover.Trigger>
             <Popover.Content>
-              <div className="overflow-auto p-2 w-full min-scrollbar max-h-[min(85vh,500px)] max-w-[min(85vw,600px)] flex flex-col gap-1">
+              <div className="overflow-auto p-2 min-scrollbar max-h-[min(85vh,500px)] w-[min(85vw,600px)] flex flex-col gap-1">
                 {playlistInfo !== null ? (
                   playlistInfo.map((item, index: number) => (
                     <div
@@ -126,7 +126,7 @@ const PlaylistControls: FC = () => {
                       <div className="max-w-[calc(100%-180px)]">
                         <h3
                           title={item.name}
-                          className="text-[14px] w-full break-words font-bold opacity-80 line-clamp-1"
+                          className="text-[14px] bg-green-3 w-max max-w-[100%] break-words font-bold opacity-80 truncate"
                         >
                           {item.name}
                         </h3>

diff --git a/src/hooks/useExplorer.tsx b/src/hooks/useExplorer.tsx
@@ -14,7 +14,7 @@ import { Dir } from "../types";
 const useExplorer = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
-  const { currentDir, dirs, isSearching } = useAppSelector(
+  const { currentDir, dirs, isSearching, sortType } = useAppSelector(
     (state) => state.explorer
   );
 
@@ -50,7 +50,7 @@ const useExplorer = () => {
       }
     }
 
-    newDirs = sortFiles(newDirs);
+    newDirs = sortFiles(newDirs, sortType);
 
     const chain: string[] = [];
     let isFinished = false;

diff --git a/src/store/slices/explorerSlice.ts b/src/store/slices/explorerSlice.ts
@@ -9,7 +9,7 @@ const initialState = {
     currentDir: extractLocalStorage("last-dir", os.homedir(), "string"),
     currentDirData: null,
     keyPressed: '',
-    sortType: "newest" as SortType,
+    sortType: "name" as SortType,
     selectedDirs: [],
     dirs: [] as Dir[],
     dirsChain: [],

diff --git a/src/utils/files.util.ts b/src/utils/files.util.ts
@@ -86,15 +86,14 @@ const extractVideos = (dirs: any[], extractPath = false, isSearching = false) =>
     return videos;
 }
 
-const sortFiles = (files: Dir[], sortType: SortType = 'newest', foldersFirst = true) => {
+const sortFiles = (files: Dir[], sortType: SortType = 'name', foldersFirst = true) => {
     const sortedFiles = files.sort((a, b) => {
         if (a.dir && !b.dir) return foldersFirst ? -1 : 1
         if (!a.dir && b.dir) return foldersFirst ? 1 : -1
-        if (sortType === 'newest') {return b.creationDate - a.creationDate}
+        if (sortType === 'newest') { return b.creationDate - a.creationDate }
         if (sortType === 'oldest') return a.creationDate - b.creationDate
         if (sortType === 'name') return a.name.localeCompare(b.name)
         if (sortType === 'size') return 0
-
     })
 
     return sortedFiles;