Feature: Browser UX (#32)

* Add toggl'able and resizable Browser view
* make some minor fixes and adjustments to usability
* Fix drag region messing with Menus
* create a window height and width provider, then use it everywhere but LibraryList

src/main/menu.ts

@@ -229,6 +229,14 @@ export default class MenuBuilder {
             this.mainWindow.webContents.toggleDevTools();
           },
         },
+        { type: 'separator' },
+        {
+          label: 'Toggle Browser View',
+          accelerator: 'Command+B',
+          click: () => {
+            this.mainWindow.webContents.send('menu-toggle-browser');
+          },
+        },
       ],
     };
     const subMenuViewProd: MenuItemConstructorOptions = {
@@ -241,6 +249,14 @@ export default class MenuBuilder {
             this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
           },
         },
+        { type: 'separator' },
+        {
+          label: 'Toggle Browser View',
+          accelerator: 'Command+B',
+          click: () => {
+            this.mainWindow.webContents.send('menu-toggle-browser');
+          },
+        },
       ],
     };
     const subMenuWindow: DarwinMenuItemConstructorOptions = {

src/main/preload.ts

@@ -25,6 +25,7 @@ export type Channels =
   | 'hide-song'
   | 'delete-song'
   | 'delete-album'
+  | 'menu-toggle-browser'
   // TODO: use this way more for replies
   | 'update-store';
 
@@ -35,6 +36,7 @@ export interface SendMessageArgs extends ArgsBase {
     rescan: boolean;
   };
   'add-to-library': undefined;
+  'menu-toggle-browser': undefined;
   'get-album-art': string;
   'set-last-played-song': string;
   'modify-tag-of-file': {

src/renderer/App.scss

@@ -39,11 +39,6 @@ button:focus {
   outline: none;
 }
 
-.nodrag {
-  -webkit-app-region: no-drag;
-  overflow: hidden;
-}
-
 .drag {
   -webkit-app-region: drag;
 
@@ -52,6 +47,10 @@ button:focus {
   }
 }
 
+.nodrag {
+  -webkit-app-region: no-drag !important;
+}
+
 .ReactVirtualized__List {
   overflow-y: scroll !important;
 }
@@ -145,3 +144,28 @@ button:focus {
 ::-webkit-scrollbar-thumb:hover {
   border: 1px solid white;
 }
+
+
+.resize::after {
+  pointer-events: none;
+  content: " ";
+  font-size: 14px;
+  position: absolute;
+  height: 13px;
+  width: 13px;
+  text-align: center;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  background-color: #0d0d0d;
+}
+
+.resize-handle-sw {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 15px;
+  height: 15px;
+  cursor: sw-resize;
+  z-index: 3;
+}

src/renderer/components/AlbumArt.tsx

@@ -3,20 +3,19 @@ import Draggable from 'react-draggable';
 import { TinyText } from './SimpleStyledMaterialUIComponents';
 import AlbumArtRightClickMenu from './AlbumArtRightClickMenu';
 import usePlayerStore from '../store/player';
+import { useWindowDimensions } from '../hooks/useWindowDimensions';
 
 interface AlbumArtProps {
   setShowAlbumArtMenu: (menu: any) => void;
   showAlbumArtMenu: any;
-  width: number | null;
-  height: number | null;
 }
 
 export default function AlbumArt({
   setShowAlbumArtMenu,
   showAlbumArtMenu,
-  width,
-  height,
 }: AlbumArtProps) {
+  const { width, height } = useWindowDimensions();
+
   /**
    * @dev global store hooks
    */

src/renderer/components/AlbumArtRightClickMenu.tsx

@@ -28,6 +28,11 @@ export default function AlbumArtRightClickMenu(
     onClose();
   };
 
+  const toggleBrowserView = () => {
+    window.dispatchEvent(new Event('toggle-browser-view'));
+    onClose();
+  };
+
   return (
     <Menu
       anchorEl={anchorEl}
@@ -37,6 +42,7 @@ export default function AlbumArtRightClickMenu(
       }}
       anchorPosition={{ top: mouseY, left: mouseX }}
       anchorReference="anchorPosition"
+      className="nodrag"
       id="basic-menu"
       MenuListProps={{
         'aria-labelledby': 'basic-button',
@@ -60,6 +66,14 @@ export default function AlbumArtRightClickMenu(
       >
         Download Artwork
       </MenuItem>
+      <MenuItem
+        onClick={toggleBrowserView}
+        sx={{
+          fontSize: '11px',
+        }}
+      >
+        Toggle Browser View
+      </MenuItem>
     </Menu>
   );
 }