fixed folder path for MAC and added fallback font

TomAndril · Aug 25, 2021 · 498e140 · 498e140
1 parent c7d7988
commit 498e140
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 7 deletions.
diff --git a/src/components/Folder.tsx b/src/components/Folder.tsx
@@ -5,12 +5,17 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
+import getFolderName from '../utils/getFolderName';
 import { setSelectedSubFolder } from '../store/slices/projectsSlice';
 import { colors } from '../styles/Constants';
 import { SubFolder } from '../types';
 
 const Container = styled.div`
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
   width: 13vw;
   height: 13vw;
   border: 1px solid lightgray;
@@ -36,6 +41,12 @@ const VideosWatchedContainer = styled.div`
   font-size: 0.75em;
 `;
 
+const FolderName = styled.p`
+  letter-spacing: 1px;
+  text-align: center;
+  font-size: 0.875em;
+`;
+
 type Props = {
   element: SubFolder;
   dragEnabled: boolean;
@@ -62,9 +73,12 @@ const Folder: React.FC<Props> = ({ dragEnabled, element }) => {
       style={{ cursor: dragEnabled ? 'all-scroll' : 'pointer' }}
       onClick={handleClick}
     >
-      <p>{element.folderName.split('/')[1]}</p>
+      <FolderName>{getFolderName(element.folderName)}</FolderName>
       <VideosWatchedContainer>
-        Viewed: {videosWatched} / {element.videos.length}
+        Viewed:{' '}
+        <span style={{ fontWeight: 'bold' }}>
+          {videosWatched} / {element.videos.length}
+        </span>
       </VideosWatchedContainer>
     </Container>
   );

diff --git a/src/components/SidePlaylist.tsx b/src/components/SidePlaylist.tsx
@@ -4,6 +4,7 @@ import { ImCheckboxUnchecked, ImCheckboxChecked } from 'react-icons/im';
 import styled from 'styled-components';
 import { RootState } from '../store';
 import { colors } from '../styles/Constants';
+import getFolderName from '../utils/getFolderName';
 
 const Container = styled.div`
   width: 20%;
@@ -54,7 +55,9 @@ const SidePlaylist = () => {
 
   return (
     <Container>
-      <PlaylistTitle>{videos?.folderName.split('/')[1]}</PlaylistTitle>
+      <PlaylistTitle>
+        {getFolderName(videos?.folderName || 'No Name')}
+      </PlaylistTitle>
       {videos?.videos.map((elem) => (
         <a
           href={`#${elem.id}`}

diff --git a/src/package.json b/src/package.json
@@ -1,7 +1,7 @@
 {
   "name": "local-video-tracker",
   "productName": "local-video-tracker",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Keep track of your local video files",
   "main": "./main.prod.js",
   "author": {

diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx
@@ -28,8 +28,6 @@ const Main: React.FC = () => {
         ?.rootFolder.folders.videos.length > 0
   );
 
-  console.log(selectedProjectHasRootVideos);
-
   return (
     <>
       <MainLayoutContainer>

diff --git a/src/styles/Global.tsx b/src/styles/Global.tsx
@@ -11,7 +11,7 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     background: #eff0f3;
-    font-family: workSans;
+    font-family: workSans, sans-serif;
     user-select: none;
     margin: 0;
 	  vertical-align: baseline;

diff --git a/src/utils/getFolderName.ts b/src/utils/getFolderName.ts
@@ -0,0 +1,6 @@
+const getFolderName = (folderName: string) => {
+  const splittedPath = folderName.split('/');
+  return splittedPath[splittedPath.length - 1];
+};
+
+export default getFolderName;