Chore/qol (#41)

* style: prevent timer from resizing container

* style: review half and third screens

* style: prevent delay time from resizing blocks

* style: show now / next titles when container is collapsed

* docs: link to documentation in readme

* Update README.md

* Update README.md

* Update README.md

* style: new image assets

* cleanup

* style: prevent long titles from overflowing containers

* fix: send titles on change

fixed issue that prevented the next title from being broadcast on change

README.md

@@ -1,4 +1,5 @@
-[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0)
+[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0) [![Documentation in Gitbook](https://badges.aleen42.com/src/gitbook_2.svg)](https://cpvalente.gitbook.io/ontime/)
+
 
 Download the latest releases here
 - [Windows](https://gitreleases.dev/gh/cpvalente/ontime/latest/ontime-win64.exe)

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

@@ -20,13 +20,15 @@
     'ind clk clk btn'
     '... sta fin btn';
   grid-template-rows: 1fr auto;
-  grid-template-columns: 1.5em 2fr 2fr 22%;
+  grid-template-columns: 1.5em 2fr 2fr 6em;
   gap: 5px;
   justify-items: start;
 }
 
 .timer {
   grid-area: clk;
+  white-space: nowrap;
+  max-width: 300px;
 }
 
 .indicators {

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

@@ -8,7 +8,7 @@
 
   display: grid;
   grid-template-rows: auto 1fr;
-  grid-template-columns: 40px 48em auto 1fr;
+  grid-template-columns: 40px 48em auto auto;
   grid-template-areas:
     'sett even play info'
     'sett even mess info';
@@ -31,6 +31,24 @@
   }
 }
 
+/* 1/2 window, event list only */
+@media (max-width: 1100px) {
+  .mainContainer {
+    height: 100%;
+    grid-template-rows: 1fr auto;
+    grid-template-columns: 40px 48em;
+    /* grid-template-areas:
+      'sett even '
+      'sett play '; */
+  }
+
+  .info,
+  .messages,
+  .playback {
+    visibility: hidden;
+  }
+}
+
 /* 1/3 window, show control only */
 @media (max-width: 850px) and (min-height: 500px) {
   .mainContainer {
@@ -42,6 +60,11 @@
       'mess';
   }
 
+  .playback,
+  .messages {
+    visibility: visible;
+  }
+
   .editor,
   .info,
   .settings {
@@ -50,12 +73,15 @@
 }
 
 /* 1/3 corner window, playback only */
-@media (max-width: 900px) and (max-height: 500px) {
+@media (max-width: 850px) and (max-height: 500px) {
   .mainContainer {
     grid-template-rows: 100%;
     grid-template-columns: 100%;
     grid-template-areas: 'play';
-    max-height: 325px;
+  }
+
+  .playback {
+    visibility: visible;
   }
 
   .editor,
@@ -88,6 +114,8 @@ h1 {
 
 .info {
   grid-area: info;
+  min-width: 17em;
+  max-width: 32em;
 }
 
 .messages {
@@ -96,6 +124,8 @@ h1 {
 
 .playback {
   grid-area: play;
+  min-height: 320px;
+  max-height: 320px;
 }
 
 .messages,

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

@@ -30,6 +30,7 @@
   grid-template-columns: 2em 2em auto auto 1fr auto 3.7em;
   grid-template-areas: 'drag indi time time text more btns';
   justify-content: center;
+  align-items: center;
 }
 
 .expanded {
@@ -59,6 +60,7 @@
   align-self: flex-start;
   font-size: 0.75em;
   overflow: hidden;
+  min-height: 3em;
   min-width: 0;
   justify-content: center;
 }
@@ -95,6 +97,7 @@
 
 .time {
   grid-area: time;
+  align-self: center;
 }
 
 .start {
@@ -136,7 +139,6 @@
 
 .titleContainer {
   grid-area: text;
-  height: 100%;
 
   background-color: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.05);
@@ -148,6 +150,13 @@
   overflow: hidden;
 }
 
+.collapsed .titleContasiner {
+  height: fit-content;
+}
+.expanded .titleContainer {
+  height: 100%;
+}
+
 .oscLabel {
   color: #4bffabcc;
   font-size: 0.8em;
@@ -165,6 +174,7 @@
   color: #fff;
   grid-area: more;
   margin-top: 0.2em;
+  align-self: baseline;
 }
 
 .moreExpanded {

client/src/features/info/Info.module.css

@@ -33,6 +33,15 @@
   color: #2b6cb0;
 }
 
+.collapsedTitle {
+  font-size: inherit;
+
+  padding-left: 1em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .labelContainer {
   white-space: nowrap;
   overflow: hidden;

client/src/features/info/InfoTitle.jsx

@@ -17,6 +17,9 @@ export default function InfoTitle(props) {
     <div className={style.container}>
       <div className={roll ? style.headerRoll : style.header}>
         {title}
+        {collapsed && (
+          <span className={style.collapsedTitle}>{data.title}</span>
+        )}
         <Icon
           className={collapsed ? style.moreCollapsed : style.moreExpanded}
           as={FiChevronUp}

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

@@ -22,8 +22,6 @@ export default function StageManager(props) {
 
     let events = [...backstageEvents];
 
-    console.log({ backstageEvents }, { events });
-
     // Add running delay
     let delay = 0;
     for (const e of events) {

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

@@ -46,6 +46,7 @@
   background-color: rgba(255, 255, 255, 0.05);
   padding: 1vh 2vw;
   border-radius: 1vw;
+  max-width: 100%;
 }
 
 .nowContainer {

client/src/features/viewers/production/Pip.module.css

@@ -55,7 +55,6 @@
   font-size: 4vh;
 }
 
-
 /* =================== TITLES ===================*/
 
 .infoContainer > div {
@@ -111,6 +110,8 @@
   display: grid;
   grid-template-rows: 5vh 1fr 3vh;
   height: 100%;
+  overflow: hidden;
+  max-width: 100%;
 }
 
 /* =================== MAIN ===================*/

server/main.js

@@ -93,7 +93,7 @@ function createWindow() {
     width: 1920,
     height: 1000,
     minWidth: 575,
-    minHeight: 385,
+    minHeight: 405,
     maxWidth: 1920,
     maxHeight: 1440,
     backgroundColor: '#202020',

server/src/classes/EventTimer.js

@@ -608,7 +608,10 @@ export class EventTimer extends Timer {
         if (this.state === 'roll') {
           this.rollLoad();
         }
-      } else if ('title' in e || 'subtitle' in e || 'presenter') {
+      }
+
+      // load titles
+      if ('title' in e || 'subtitle' in e || 'presenter' in e) {
         // TODO: should be more selective on the need to load titles
         this._loadTitlesNext();
         this._loadTitlesNow();