feat(ChordDisplay): added overlay mode + printable

src/main/websockets.ts

@@ -6,7 +6,13 @@ import { Socket } from 'net';
 
 const debug = makeDebug('app:ws');
 
-const WS_NAMESPACES = ['settings', 'chord-display', 'chord-quiz', 'circle-of-fifths'];
+const WS_NAMESPACES = [
+  'settings',
+  'chord-display',
+  'chord-quiz',
+  'circle-of-fifths',
+  'chord-dictionary',
+];
 
 export type WebsocketMessageReply = (eventType: string, payload: any) => void;
 

src/overlay/App.scss

@@ -26,6 +26,7 @@ $font-path: '../assets/fonts';
     width: 100%;
     height: 100%;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
   }
@@ -51,3 +52,20 @@ $font-path: '../assets/fonts';
     height: 15vw;
   }
 }
+
+
+@media print {
+  html,
+  body {
+    position: relative;
+    height: auto;
+    width: 100%;
+    margin: 0;
+    padding: 16px;
+    overflow: visible;
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}

src/overlay/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import MidiMessageManagerProvider from 'renderer/contexts/MidiMessageManager';
 import SettingsProvider from 'renderer/contexts/Settings';
 import SettingsManagerProvider from 'renderer/contexts/SettingsManager';
+import ChordDictionaryProvider from 'renderer/contexts/ChordDictionary';
 
 import { ThemeProvider } from '@la-jarre-a-son/ui';
 
@@ -12,37 +13,52 @@ import CircleOfFifths from 'renderer/views/CircleOfFifths';
 
 import './App.scss';
 
+import ChordDictionary from 'renderer/views/ChordDictionary';
+import ChordDictionaryDetail from 'renderer/views/ChordDictionary/Detail';
 import Home from './Home';
 
 export default function App() {
   return (
     <ThemeProvider theme="jar" variant="dark">
       <SettingsManagerProvider source="websocket">
         <SettingsProvider>
-          <Router>
-            <Routes>
-              <Route path="/">
-                <Route index element={<Home />} />
-                <Route path="chords/:moduleId" element={<ChordDisplay source="websocket" />} />
-                <Route
-                  path="quiz"
-                  element={
-                    <MidiMessageManagerProvider namespace="chord-quiz" source="websocket">
-                      <ChordQuiz />
-                    </MidiMessageManagerProvider>
-                  }
-                />
-                <Route
-                  path="circle-of-fifths"
-                  element={
-                    <MidiMessageManagerProvider namespace="circle-of-fifths" source="websocket">
-                      <CircleOfFifths disableUpdate />
-                    </MidiMessageManagerProvider>
-                  }
-                />
-              </Route>
-            </Routes>
-          </Router>
+          <ChordDictionaryProvider>
+            <Router>
+              <Routes>
+                <Route path="/">
+                  <Route index element={<Home />} />
+                  <Route path="chords/:moduleId" element={<ChordDisplay source="websocket" />} />
+                  <Route
+                    path="quiz"
+                    element={
+                      <MidiMessageManagerProvider namespace="chord-quiz" source="websocket">
+                        <ChordQuiz />
+                      </MidiMessageManagerProvider>
+                    }
+                  />
+                  <Route
+                    path="circle-of-fifths"
+                    element={
+                      <MidiMessageManagerProvider namespace="circle-of-fifths" source="websocket">
+                        <CircleOfFifths disableUpdate />
+                      </MidiMessageManagerProvider>
+                    }
+                  />
+                  <Route
+                    path="chord-dictionary"
+                    element={
+                      <MidiMessageManagerProvider namespace="chord-dictionary" source="websocket">
+                        <ChordDictionary disableUpdate />
+                      </MidiMessageManagerProvider>
+                    }
+                  >
+                    <Route index element={<ChordDictionaryDetail />} />
+                    <Route path=":chordName" element={<ChordDictionaryDetail />} />
+                  </Route>
+                </Route>
+              </Routes>
+            </Router>
+          </ChordDictionaryProvider>
         </SettingsProvider>
       </SettingsManagerProvider>
     </ThemeProvider>

src/overlay/Home.tsx

@@ -15,6 +15,7 @@ import { Icon } from 'renderer/components';
 import ThumbnaildChordDisplay from 'renderer/assets/thumbnails/chord-display.jpg';
 import ThumbnaildChordQuiz from 'renderer/assets/thumbnails/chord-quiz.jpg';
 import ThumbnaildCircleOfFifths from 'renderer/assets/thumbnails/circle-of-fifths.jpg';
+import ThumbnaildChordDictionary from 'renderer/assets/thumbnails/chord-dictionary.jpg';
 import { useSettings } from 'renderer/contexts/Settings';
 
 const Home: React.FC = () => {
@@ -50,6 +51,12 @@ const Home: React.FC = () => {
           </CardThumbnail>
           <CardHeader left={<Icon name="circle-of-fifths" />}>Circle of Fifths</CardHeader>
         </Card>
+        <Card outlined elevation={1}>
+          <CardThumbnail alt="Chord Dictionary preview" src={ThumbnaildChordDictionary}>
+            <CardThumbnailOverlay as={NavLink} to="/chord-dictionary" interactive />
+          </CardThumbnail>
+          <CardHeader left={<Icon name="dictionary" />}>Chord Dictionary</CardHeader>
+        </Card>
       </Grid>
     </Container>
   );

src/renderer/components/Icon/Icon.module.scss

@@ -50,3 +50,33 @@
 .icon--loading {
   animation: spin 2s infinite linear;
 }
+
+// Intents
+
+.base--neutral {
+  color: $color-neutral-normal;
+}
+.base--primary {
+  color: $color-primary-normal;
+}
+.base--danger {
+  color: $color-danger-normal;
+}
+.base--warning {
+  color: $color-warning-normal;
+}
+.base--success {
+  color: $color-success-normal;
+}
+.base--default {
+  color: $color-white;
+}
+.base--subtle {
+  color: $color-neutral-lighter;
+}
+.base--contrast {
+  color: $color-neutral-darker;
+}
+.base--inherit {
+  color: currentColor;
+}

src/renderer/components/Icon/Icon.tsx

@@ -8,7 +8,7 @@ import styles from './Icon.module.scss';
 
 const cx = classnames.bind(styles);
 
-export const Icon: React.FC<IconProps> = ({ className, name, spin, hover }) => {
+export const Icon: React.FC<IconProps> = ({ className, name, intent, spin, hover }) => {
   const IconSvg = ICONS[name];
 
   if (!IconSvg) return null;
@@ -21,6 +21,7 @@ export const Icon: React.FC<IconProps> = ({ className, name, spin, hover }) => {
           'base--spin': spin,
           'base--hover': !!hover,
         },
+        intent && `base--${intent}`,
         `icon--${name}`,
         className
       )}
@@ -30,6 +31,7 @@ export const Icon: React.FC<IconProps> = ({ className, name, spin, hover }) => {
 
 Icon.defaultProps = {
   className: undefined,
+  intent: 'inherit',
   spin: false,
   hover: false,
 };

src/renderer/components/Icon/types.ts

@@ -2,12 +2,32 @@ import { ICON_NAMES } from './icons';
 
 export type IconName = (typeof ICON_NAMES)[number];
 
+export const IconIntents = [
+  'default',
+  'subtle',
+  'contrast',
+  'neutral',
+  'primary',
+  'danger',
+  'warning',
+  'success',
+  'inherit',
+] as const;
+
+export type IconIntent = (typeof IconIntents)[number];
+
 export type IconProps = {
   className?: string;
   /**
    * Name of the svg icon file
    */
   name: IconName;
+
+  /**
+   * The Icon semantic intent
+   */
+  intent?: IconIntent;
+
   /**
    * A flag to add a spinning animatation to icon
    */

src/renderer/contexts/Settings.tsx

@@ -9,9 +9,9 @@ import { useSettingsManager } from './SettingsManager';
 
 interface SettingsContextInterface {
   settings: Settings;
-  updateSetting: (key: string, value: unknown) => Promise<void>;
-  updateSettings: (value: Settings) => Promise<void>;
-  resetSettings: (key: keyof Settings) => Promise<void>;
+  updateSetting: (key: string, value: unknown) => Promise<unknown>;
+  updateSettings: (value: Settings) => Promise<unknown>;
+  resetSettings: (key: keyof Settings) => Promise<unknown>;
 }
 
 const SettingsContext = React.createContext<SettingsContextInterface | null>(null);
@@ -37,16 +37,24 @@ const SettingsProvider: React.FC<Props> = ({ children }) => {
   );
 
   const updateSetting = useCallback(
-    (key: string, value: unknown) => window.app.settings.updateSetting(key, value),
-    []
+    (key: string, value: unknown) =>
+      manager
+        ? manager.updateSetting(key, value)
+        : Promise.reject(new Error('no settings manager')),
+    [manager]
   );
 
   const updateSettings = useCallback(
-    (value: Settings) => window.app.settings.updateSettings(value),
-    []
+    (value: Settings) =>
+      manager ? manager.updateSettings(value) : Promise.reject(new Error('no settings manager')),
+    [manager]
   );
 
-  const resetSettings = useCallback((key: keyof Settings) => window.app.settings.reset(key), []);
+  const resetSettings = useCallback(
+    (key: keyof Settings) =>
+      manager ? manager.resetSetting(key) : Promise.reject(new Error('no settings manager')),
+    [manager]
+  );
 
   useEffect(() => {
     if (manager) {

src/renderer/managers/InternalSettings.ts

@@ -25,5 +25,17 @@ class InternalSettings extends SettingsManager {
   public getSettings() {
     window.app.settings.getSettings();
   }
+
+  public updateSetting(key: string, value: unknown) {
+    return window.app.settings.updateSetting(key, value);
+  }
+
+  public updateSettings(value: Settings) {
+    return window.app.settings.updateSettings(value);
+  }
+
+  public resetSettings(key: keyof Settings) {
+    return window.app.settings.reset(key);
+  }
 }
 export default InternalSettings;

src/renderer/managers/SettingsManager.ts

@@ -34,6 +34,9 @@ interface SettingsManager extends EventTarget {
   ): void;
   dispose(): void;
   getSettings(): void;
+  updateSetting(key: string, value: unknown): Promise<unknown>;
+  updateSettings(value: Settings): Promise<unknown>;
+  resetSetting(key: keyof Settings): Promise<unknown>;
 }
 
 class SettingsManager extends EventTarget {}

src/renderer/managers/WebsocketSettings.ts

@@ -62,5 +62,17 @@ class WebsocketSettings extends SettingsManager {
       this.ws.send('settings:get');
     }
   }
+
+  public updateSetting(_key: string, _value: unknown) {
+    return Promise.reject();
+  }
+
+  public updateSettings(_value: Settings) {
+    return Promise.reject();
+  }
+
+  public resetSettings(_key: keyof Settings) {
+    return Promise.reject();
+  }
 }
 export default WebsocketSettings;

src/renderer/views/ChordDictionary/ChordDictionary.module.scss

@@ -45,3 +45,28 @@
   padding-left: 12px;
   width: auto;
 }
+
+@media print {
+  .container {
+    display: block !important;
+    flex-direction: column;
+    justify-content: center;
+    height: auto;
+    overflow: visible;
+
+    .content {
+      width: 100%;
+    }
+
+    section {
+      page-break-inside: avoid;
+    }
+  }
+
+  .header,
+  .pitchbar,
+  .chordbar {
+    display: none!important;
+  }
+
+}