style improvements

- added empty state to list
- styled scrollbars
- progressbar shows time elapsed
- timers are monospace
- prevent overflow in titles

client/src/features/control/MessageControl.jsx

@@ -89,8 +89,8 @@ export default function MessageControl() {
             placeholder='only the presenter screens see this'
             className={style.inline}
           >
-            <EditablePreview />
-            <EditableInput className={style.editable13} />
+            <EditablePreview className={style.padleft} />
+            <EditableInput className={style.padleft} />
           </Editable>
           <VisibleIconBtn
             active={pres.visible}
@@ -109,8 +109,8 @@ export default function MessageControl() {
             placeholder='public screens will render this'
             className={style.inline}
           >
-            <EditablePreview />
-            <EditableInput className={style.editable13} />
+            <EditablePreview className={style.padleft} />
+            <EditableInput className={style.padleft} />
           </Editable>
           <VisibleIconBtn
             active={publ.visible}
@@ -129,8 +129,8 @@ export default function MessageControl() {
             placeholder='visible in lower third screen'
             className={style.inline}
           >
-            <EditablePreview />
-            <EditableInput />
+            <EditablePreview className={style.padleft} />
+            <EditableInput className={style.padleft} />
           </Editable>
 
           <VisibleIconBtn

client/src/features/control/MessageControl.module.css

@@ -27,8 +27,11 @@
 }
 
 .inline {
-  padding-left: 0.5em;
   border-radius: 4px;
   background-color: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.05);
 }
+
+.padleft {
+  padding-left: 0.5em;
+}

client/src/features/editors/Editor.jsx

@@ -1,6 +1,4 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiSettings } from 'react-icons/fi';
-import { Grid, GridItem, Heading } from '@chakra-ui/layout';
+import { Heading } from '@chakra-ui/layout';
 import { Box } from '@chakra-ui/layout';
 import NumberedText from '../../common/components/text/NumberedText';
 import PlaybackControl from '../control/PlaybackControl';
@@ -10,6 +8,7 @@ import styles from './Editor.module.css';
 import EventListWrapper from './list/EventListWrapper';
 import { useDisclosure } from '@chakra-ui/hooks';
 import SettingsModal from '../modals/SettingsModal';
+import SettingsIconBtn from '../../common/components/buttons/SettingsIconBtn';
 
 export default function Editor() {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -18,132 +17,112 @@ export default function Editor() {
     <>
       <SettingsModal isOpen={isOpen} onClose={onClose} />
 
-      <Grid
-        templateRows='1fr 1fr 1fr'
-        templateColumns='1fr 25vw 25vw 5vw'
-        gap={5}
-        className={styles.mainContainer}
-      >
-        <GridItem rowSpan={3}>
-          <Box className={styles.editor} borderRadius='0.5em'>
-            <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
-              Event List
-            </Heading>
-            <NumberedText number={1} text={'Manage and select event to run'} />
-            <div className={styles.content}>
-              <EventListWrapper />
-            </div>
-          </Box>
-        </GridItem>
+      <div className={styles.mainContainer}>
+        <Box className={styles.editor}>
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Event List
+          </Heading>
+          <NumberedText number={1} text={'Manage and select event to run'} />
+          <div className={styles.content}>
+            <EventListWrapper />
+          </div>
+        </Box>
 
-        <GridItem colStart={2} rowStart={2} rowSpan={2} colSpan={2}>
-          <Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
-            <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
-              Preview Displays
-            </Heading>
-            <NumberedText number={4} text={'Realtime screen preview'} />
-            <div className={styles.content}>
-              <PreviewContainer />
-            </div>
-          </Box>
-        </GridItem>
+        <Box className={styles.preview} borderRadius='0.5em' overflowX='auto'>
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Preview Displays
+          </Heading>
+          <NumberedText number={4} text={'Realtime screen preview'} />
+          <div className={styles.content}>
+            <PreviewContainer />
+          </div>
+        </Box>
 
-        <GridItem colStart={2} rowStart={1} rowSpan={1} colSpan={1}>
-          <Box className={styles.editor} borderRadius='0.5em'>
-            <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
-              Display Messages
-            </Heading>
-            <NumberedText
-              number={2}
-              text={'Show realtime messages on separate screen types'}
-            />
-            <div className={styles.content}>
-              <MessageControl />
-            </div>
-          </Box>
-        </GridItem>
+        <Box className={styles.messages}>
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Display Messages
+          </Heading>
+          <NumberedText
+            number={2}
+            text={'Show realtime messages on separate screen types'}
+          />
+          <div className={styles.content}>
+            <MessageControl />
+          </div>
+        </Box>
 
-        <GridItem colStart={3} rowStart={1}>
-          <Box className={styles.editor} borderRadius='0.5em'>
-            <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
-              Time Control
-            </Heading>
-            <NumberedText number={3} text={'Control Timer'} />
-            <div className={styles.content}>
-              <PlaybackControl />
-            </div>
-          </Box>
-        </GridItem>
+        <Box className={styles.playback}>
+          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+            Time Control
+          </Heading>
+          <NumberedText number={3} text={'Control Timer'} />
+          <div className={styles.content}>
+            <PlaybackControl />
+          </div>
+        </Box>
 
-        <GridItem colStart={4} rowSpan={3}>
-          <Box className={styles.editor} borderRadius='0.5em'>
+        <Box className={styles.settings}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '2em',
+              paddingTop: '3em',
+            }}
+          >
+            <SettingsIconBtn size='md' clickHandler={onOpen} />
             <div
               style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: '2em',
-                paddingTop: '3em',
+                width: 35,
+                height: 35,
+                backgroundColor: '#3b8cd8',
+                borderRadius: '50%',
               }}
-            >
-              <IconButton
-                icon={<FiSettings />}
-                isRound
-                variant='outline'
-                onClick={onOpen}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#3b8cd8',
-                  borderRadius: '50%',
-                }}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#3182ce',
-                  borderRadius: '50%',
-                }}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#2778c4',
-                  borderRadius: '50%',
-                }}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#1d6eba',
-                  borderRadius: '50%',
-                }}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#1364b0',
-                  borderRadius: '50%',
-                }}
-              />
-              <div
-                style={{
-                  width: 35,
-                  height: 35,
-                  backgroundColor: '#095aa6',
-                  borderRadius: '50%',
-                }}
-              />
-            </div>
-          </Box>
-        </GridItem>
-      </Grid>
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#3182ce',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#2778c4',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#1d6eba',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#1364b0',
+                borderRadius: '50%',
+              }}
+            />
+            <div
+              style={{
+                width: 35,
+                height: 35,
+                backgroundColor: '#095aa6',
+                borderRadius: '50%',
+              }}
+            />
+          </div>
+        </Box>
+      </div>
     </>
   );
 }

client/src/features/editors/Editor.module.css

@@ -1,12 +1,71 @@
 .mainContainer {
   background: linear-gradient(90deg, #202020 0%, #121212 100%);
   width: 100%;
+  height: 100%;
   margin: auto;
-  height: 95vh;
   color: #fffd;
+  padding: 2vh;
+
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 25vw 25vw 5vw;
+  grid-template-areas:
+    'even mess play sett'
+    'even prev prev sett'
+    'even prev prev sett';
+  gap: 2vh;
 }
 
-.editor {
+/* 2/3 window, hide previews */
+@media (max-width: 1250px) and (min-height: 700px) {
+  .mainContainer {
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-areas:
+      'even play sett'
+      'even mess sett';
+  }
+
+  .preview {
+    visibility: hidden;
+  }
+}
+
+/* 1/3 window, show control only */
+@media (max-width: 750px) and (min-height: 500px) {
+  .mainContainer {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 100%;
+    grid-template-areas:
+      'mess'
+      'play';
+  }
+
+  .editor,
+  .preview,
+  .settings {
+    visibility: hidden;
+  }
+}
+
+/* 1/3 corner window, playback only */
+@media (max-width: 900px) and (max-height: 500px) {
+  .mainContainer {
+    grid-template-rows: 1fr;
+    grid-template-columns: 1fr;
+    grid-template-areas: 'play';
+  }
+
+  .editor,
+  .messages,
+  .preview,
+  .settings {
+    visibility: hidden;
+  }
+}
+
+.mainContainer > div {
+  border-radius: 0.5em;
   height: 100%;
   margin-top: 1.5vh;
   background-color: rgba(255, 255, 255, 0.13);
@@ -16,6 +75,26 @@
   flex-direction: column;
 }
 
+.editor {
+  grid-area: even;
+}
+
+.preview {
+  grid-area: prev;
+}
+
+.messages {
+  grid-area: mess;
+}
+
+.playback {
+  grid-area: play;
+}
+
+.settings {
+  grid-area: sett;
+}
+
 .content {
   padding-top: 1.5em;
 }
@@ -32,3 +111,25 @@
   display: flex;
   justify-content: flex-end;
 }
+
+/* width */
+::-webkit-scrollbar {
+  width: 0.5em;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.01);
+  border-radius: 4px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.35);
+}

client/src/features/editors/list/Block.module.css

@@ -17,7 +17,6 @@
   padding: 0.2em 1em;
   box-sizing: border-box;
   display: flex;
-  margin: auto;
   gap: 1em;
 }
 
@@ -68,10 +67,8 @@
   background-color: rgba(255, 255, 255, 0.36);
   background: linear-gradient(
     180deg,
-    #4bffabcc 0%,
-    #227c52aa 09%,
-    #4bffab11 10%,
-    #4bffab11 89%,
+    #00000000 10%,
+    #4bffab10 89%,
     #227c52aa 90%,
     #4bffabcc 100%
   );

client/src/features/editors/list/EventList.jsx

@@ -4,6 +4,8 @@ import BlockBlock from './BlockBlock';
 import EventBlock from './EventBlock';
 import { useEffect, useState } from 'react';
 import { useSocket } from '../../../app/context/socketContext';
+import Empty from '../../../common/state/Empty';
+
 
 export default function EventList(props) {
   const { events, eventsHandler } = props;
@@ -28,6 +30,12 @@ export default function EventList(props) {
     };
   }, [socket]);
 
+  if (events.length < 1) {
+    return (
+        <Empty text='No Events' />
+    );
+  }
+
   console.log('EventList: events in event list', events);
   let cumulativeDelay = 0;
   let eventCount = -1;

client/src/features/editors/list/List.module.css

@@ -7,4 +7,11 @@
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 4px;
   padding: 8px;
+  overflow-y: scroll;
+  height: 71vh;
+}
+
+.empty {
+  opacity: 0.3;
+  align-self: center;
 }

client/src/features/menu/EventListMenu.jsx

@@ -16,7 +16,12 @@ export default function EventListMenu(props) {
     size: 'sm',
     variant: 'outline',
     colorScheme: 'whiteAlpha',
-    backgroundColor: '#ffffff05'
+    backgroundColor: '#ffffff05',
+  };
+
+  const menuStyle = {
+    color: 'initial',
+    backgroundColor: 'rgba(255,255,255,0.67)',
   };
 
   const addHandler = () => {
@@ -25,16 +30,14 @@ export default function EventListMenu(props) {
 
   return (
     <div className={style.headerButtons}>
-      <Menu>
+      <Menu className={style.menu}>
         <ButtonGroup isAttached>
-          <Button {...buttonProps}>
-            Upload
-          </Button>
+          <Button {...buttonProps}>Upload</Button>
           <MenuButton as={Button} {...buttonProps}>
             <FiChevronDown />
           </MenuButton>
         </ButtonGroup>
-        <MenuList>
+        <MenuList style={menuStyle}>
           <MenuItem>Upload Excel</MenuItem>
           <MenuItem>Upload CSV</MenuItem>
         </MenuList>
@@ -42,11 +45,11 @@ export default function EventListMenu(props) {
       <Menu>
         <ButtonGroup isAttached>
           <Button {...buttonProps}>Save</Button>
-          <MenuButton as={Button} {...buttonProps} >
+          <MenuButton as={Button} {...buttonProps}>
             <FiChevronDown />
           </MenuButton>
         </ButtonGroup>
-        <MenuList>
+        <MenuList style={menuStyle}>
           <MenuItem>Download Excel</MenuItem>
           <MenuItem>Download CSV</MenuItem>
         </MenuList>

client/src/features/menu/EventListMenu.module.css

@@ -3,4 +3,9 @@
   gap: 0.5em;
   align-content: center;
   justify-content: flex-end;
-}
+}
+
+.menu {
+  color: #000;
+  background-color: rgba(255, 255, 255, 0.67);
+}

client/src/features/viewers/PreviewContainer.jsx

@@ -20,7 +20,10 @@ export default function PreviewContainer() {
         <div className={styles.label}>Stage Manager</div>
       </div>
       <div className={styles.previewItem}>
-        <IFrameLoader title='Lower third' src='http://localhost:3000/lower' />
+        <IFrameLoader
+          title='Lower third'
+          src='http://localhost:3000/lower?key=242424'
+        />
         <div className={styles.label}>Lower third</div>
       </div>
     </div>

client/src/features/viewers/ViewWrapper.jsx

@@ -115,7 +115,10 @@ const withSocket = (Component) => {
     // Filter events only to pass down
     useEffect(() => {
       if (eventsData == null) return;
-      const e = eventsData.filter((d) => d.type === 'event');
+
+      // filter just events with title
+      const e = eventsData.filter((d) => d.type === 'event' && d.title !== '');
+
       setEvents(e);
     }, [eventsData]);
 

client/src/features/viewers/backstage/Paginator.jsx

@@ -5,7 +5,7 @@ import { useInterval } from '../../../app/hooks/useInterval';
 
 export default function Paginator(props) {
   const { events, selectedId } = props;
-  const LIMIT_PER_PAGE = 3;
+  const LIMIT_PER_PAGE = 7;
   const SCROLL_TIME = 5000;
   const SCROLL_PAST = false;
   const [numEvents, setNumEvents] = useState(0);
@@ -49,14 +49,16 @@ export default function Paginator(props) {
 
   return (
     <>
-      <div className={style.nav}>
-        {[...Array(pages)].map((p, i) => (
-          <div
-            key={i}
-            className={i === selPage ? style.navItemSelected : style.navItem}
-          />
-        ))}
-      </div>
+      {pages > 1 && (
+        <div className={style.nav}>
+          {[...Array(pages)].map((p, i) => (
+            <div
+              key={i}
+              className={i === selPage ? style.navItemSelected : style.navItem}
+            />
+          ))}
+        </div>
+      )}
 
       <div className={style.entries}>
         {page.map((e) => {

client/src/features/viewers/backstage/Paginator.module.css

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   gap: 1.5vh;
-  padding-top: 2vh;
 }
 
 .navItem,

client/src/features/viewers/backstage/StageManager.module.css

@@ -41,6 +41,17 @@
 
 /* =================== TITLES ===================*/
 
+.infoContainer > div {
+  overflow:hidden;
+}
+
+.nextContainer > div,
+.nowContainer > div {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .nowContainer,
 .nextContainer,
 .todayContainer {
@@ -157,8 +168,10 @@
 .entryStart,
 .entryEnd {
   font-size: 1.5vw;
+  min-width: 3.5vw;
 }
 
+
 .entryTitle {
   align-self: center;
 }
@@ -183,7 +196,7 @@
 .entryNow {
   font-size: 1.3vw;
   color: #fff;
-  line-height: 7vh;
+  line-height: 4vh;
   background-color: rgba(255, 255, 255, 0.09);
   border-bottom: 0.5vh solid #ff7597aa;
   margin-left: -0.5vw;
@@ -212,6 +225,7 @@
 .infoMessages {
   grid-area: binf;
   font-size: 1.5vw;
+  line-height: 2vw;
   white-space: pre-line;
 }
 

client/src/features/viewers/backstage/TodayItem.jsx

@@ -4,8 +4,8 @@ export default function TodayItem(props) {
   const { selected, timeStart, timeEnd, title } = props;
 
   // Format timers
-  const start = timeStart ? stringFromMillis(timeStart, false) : '';
-  const end = timeEnd ? stringFromMillis(timeEnd, false) : '';
+  const start = stringFromMillis(timeStart, false) || '';
+  const end = stringFromMillis(timeEnd, false) || '';
 
   // select styling
   let selectStyle = style.entryPast;

client/src/features/viewers/lower/Lower.module.css

@@ -1,8 +1,12 @@
 .lowerThird {
+  margin: 0;
+  box-sizing: border-box; /* reset */
+  overflow: hidden;
+  width: 100%; /* restrict the page width to viewport */
+  height: 100%;
+
   color: #fffffa;
   font-size: 4vh;
-  width: 100%;
-  height: 100%;
 }
 
 .lowerContainer {
@@ -36,6 +40,13 @@
   position: relative;
 }
 
+.titleContainer,
+.subtitleContainer {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .titleDecor,
 .subDecor {
   grid-area: decor;

client/src/features/viewers/presenter/PresenterView.jsx

@@ -41,6 +41,7 @@ export default function PresenterView(props) {
           <MyProgressBar
             now={time.currentSeconds}
             complete={time.durationSeconds}
+            showElapsed
           />
         </div>
       )}

client/src/features/viewers/presenter/PresenterView.module.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
+
 .container__gray,
 .container__grayFinished {
   margin: 0;
@@ -55,9 +57,18 @@
   grid-area: next;
 }
 
+.title,
+.subtitle,
+.presenter {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .title {
   color: #ddd;
   font-size: 2.5vw;
+  flex: 1;
 }
 
 .subtitle,
@@ -147,6 +158,7 @@
 }
 
 .clock {
+  font-family: 'Open Sans', sans-serif;
   font-size: 4vw;
   letter-spacing: 0.4vw;
   color: #ddd;

client/src/features/viewers/viewers.css

@@ -1,41 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
-
-.presenter {
-  font-size: 1vh;
-  height: 100%;
-  color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  padding-left: 4vh;
-}
-
-.presentationTitle {
-  font-size: 5vw;
-  text-align: left;
-}
-
-.presentationSub {
-  font-size: 3vw;
-  text-align: left;
-}
-
-.userMessage {
-  font-size: 10vw;
-  text-align: center;
-}
-
-.hidden {
-  display: none;
-}
-
-.extra {
-  width: 100%;
-  position: absolute;
-  bottom: 3vh;
-  left: 0;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-around;
-}