style improvements

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

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;
-}