Merge remote-tracking branch 'origin/master' into v1

client/src/App.jsx

@@ -8,6 +8,7 @@ import { AppContextProvider } from 'common/context/AppContext';
 import { LoggingProvider } from 'common/context/LoggingContext';
 
 import { ontimeQueryClient } from './common/queryClient';
+import useElectronEvent from './common/hooks/useElectronEvent';
 import theme from './theme/theme';
 import AppRouter from './AppRouter';
 
@@ -15,30 +16,28 @@ import AppRouter from './AppRouter';
 import('typeface-open-sans');
 
 function App() {
+  const { isElectron, sendToElectron } = useElectronEvent();
 
-  // Handle keyboard shortcuts
-  const handleKeyPress = useCallback((e) => {
-    // handle held key
-    if (e.repeat) return;
-    // check if the alt key is pressed
-    if (e.altKey) {
-      if (e.key === 't' || e.key === 'T') {
-        // if we are in electron
-        if (window.process?.type === 'renderer') {
+  const handleKeyPress = useCallback((event) => {
+      // handle held key
+      if (event.repeat) return;
+      // check if the alt key is pressed
+      if (event.altKey) {
+        if (event.code === 'KeyT') {
           // ask to see debug
-          window.ipcRenderer.send('set-window', 'show-dev');
+          sendToElectron('set-window', 'show-dev');
         }
       }
-    }
-  }, []);
+    },[]);
 
   useEffect(() => {
-    // attach the event listener
-    document.addEventListener('keydown', handleKeyPress);
-
-    // remove the event listener
+    if (isElectron) {
+      document.addEventListener('keydown', handleKeyPress);
+    }
     return () => {
-      document.removeEventListener('keydown', handleKeyPress);
+      if (isElectron) {
+        document.removeEventListener('keydown', handleKeyPress);
+      }
     };
   }, [handleKeyPress]);
 

client/src/common/components/title-card/TitleCard.jsx

@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types';
-
-import style from './TitleCard.module.scss';
-
-export default function TitleCard(props) {
-  const { label, title, subtitle, presenter } = props;
-
-  return (
-    <>
-      <div className={style.label}>{label}</div>
-      <div className={style.title}>{title}</div>
-      <div className={style.presenter}>{presenter}</div>
-      <div className={style.subtitle}>{subtitle}</div>
-    </>
-  );
-}
-
-TitleCard.propTypes = {
-  label: PropTypes.string,
-  title: PropTypes.string,
-  subtitle: PropTypes.string,
-  presenter: PropTypes.string,
-}

client/src/common/components/title-card/TitleCard.scss

@@ -1,24 +1,27 @@
-@use '../../../theme/main' as *;
+@use '../../../theme/main';
+@use '../../../theme/viewerDefs' as *;
 
 .label {
-  @include card-label;
+  font-size: 1.3vw;
+  color: var(--accent-color-override, $accent-color);
 }
 
 .title,
 .subtitle,
 .presenter {
-  @include ellipsis;
+  @include main.ellipsis;
 }
 
 .title {
-  @include card-title;
+  color: $title-color;
+  font-weight: 600;
   font-size: 2.5vw;
   flex: 1;
 }
 
 .subtitle,
 .presenter {
-  color: $subtitle-gray;
+  color: $subtitle-color;
 }
 
 .subtitle {

client/src/common/components/title-card/TitleCard.tsx

@@ -0,0 +1,21 @@
+import './TitleCard.scss';
+
+interface TitleCardProps {
+  label: string;
+  title: string;
+  subtitle: string;
+  presenter: string;
+}
+
+export default function TitleCard(props: TitleCardProps) {
+  const { label, title, subtitle, presenter } = props;
+
+  return (
+    <>
+      <div className='label'>{label}</div>
+      <div className='title'>{title}</div>
+      <div className='presenter'>{presenter}</div>
+      <div className='subtitle'>{subtitle}</div>
+    </>
+  );
+}

client/src/features/menu/MenuBar.tsx

@@ -63,29 +63,29 @@ export default function MenuBar(props: MenuBarProps) {
   // Handle keyboard shortcuts
   const handleKeyPress = useCallback(
     (event: KeyboardEvent) => {
-      // skip if not electron
-      if (!isElectron) return;
       // handle held key
       if (event.repeat) return;
 
       // check if the ctrl key is pressed
-      if (event.ctrlKey) {
+      if (event.ctrlKey || event.metaKey) {
         // ctrl + , (settings)
         if (event.key === ',') {
-          if (isElectron) {
-            // open if not open
-            isSettingsOpen ? onSettingsClose() : onSettingsOpen();
-          }
+          // open if not open
+          isSettingsOpen ? onSettingsClose() : onSettingsOpen();
         }
       }
     },
-    [isElectron, isSettingsOpen, onSettingsClose, onSettingsOpen]
+    [isElectron, isSettingsOpen, onSettingsClose, onSettingsOpen],
   );
 
   useEffect(() => {
-    document.addEventListener('keydown', handleKeyPress);
+    if (isElectron) {
+      document.addEventListener('keydown', handleKeyPress);
+    }
     return () => {
-      document.removeEventListener('keydown', handleKeyPress);
+      if (isElectron) {
+        document.removeEventListener('keydown', handleKeyPress);
+      }
     };
   }, [handleKeyPress]);
 

client/src/features/rundown/Rundown.jsx

@@ -70,35 +70,34 @@ export default function Rundown(props) {
 
   // Handle keyboard shortcuts
   const handleKeyPress = useCallback(
-    (e) => {
+    (event) => {
       // handle held key
-      // handle held key
-      if (e.repeat) return;
+      if (event.repeat) return;
       // Check if the alt key is pressed
-      if (e.altKey && (!e.ctrlKey || !e.shiftKey)) {
+      if (event.altKey && (!event.ctrlKey || !event.shiftKey)) {
         // Arrow down
-        if (e.keyCode === 40) {
+        if (event.keyCode === 40) {
           if (cursor < entries.length - 1) moveCursorDown();
         }
         // Arrow up
-        if (e.keyCode === 38) {
+        if (event.keyCode === 38) {
           if (cursor > 0) moveCursorUp();
         }
         // E
-        if (e.key === 'e' || e.key === 'E') {
-          e.preventDefault();
+        if (event.code === "KeyE") {
+          event.preventDefault();
           if (cursor == null) return;
           insertAtCursor('event', cursor);
         }
         // D
-        if (e.key === 'd' || e.key === 'D') {
-          e.preventDefault();
+        if (event.code === "KeyD") {
+          event.preventDefault();
           if (cursor == null) return;
           insertAtCursor('delay', cursor);
         }
         // B
-        if (e.key === 'b' || e.key === 'B') {
-          e.preventDefault();
+        if (event.code === "KeyB") {
+          event.preventDefault();
           if (cursor == null) return;
           insertAtCursor('block', cursor);
         }

client/src/theme/_main.scss

@@ -63,8 +63,6 @@ $error-red: #e53e3e;
 
 //////////////////////////////////// viewers
 $title-white: #fffd;
-$title-gray: #ddd;
-$subtitle-gray: #aaa;
 
 //////////////////////////////////// block elements
 $bg-container-over: #0b1521;
@@ -81,17 +79,6 @@ $block-delay-border: #d69e2e55;
 $block-block-color: #7347AD;
 $block-border: 1px solid $bg-gray-1100;
 
-//////////////////////////////////// viewer cards
-@mixin card-title {
-  color: $title-gray;
-  font-weight: 600;
-}
-
-@mixin card-label {
-  font-size: 1.3vw;
-  color: $ontime-pink;
-}
-
 //////////////////////////////////// utils
 
 @mixin ellipsis {