small QOL improvements (#37)

* feat: selected event if is first

* style: fix wrap

- remove wrap tag (broken in firefox)

* feat: add more text to notes

this is a quick fix and does not replace the real deal.
using a text input makes it difficult to edit, this should be revised with a textarea on note field

* upgrade electron

* Stage timer in /sm has placeholder when not running

* fix style issue where clock would move depending on whether there are events selected

* ensure ontime logo and text have a minimum readable size

* fix scrollbar styling

* clean debugging logs

* link to latest release

using gitreleases.dev service for this.
this is a temporary fix until we have a release (in opposition to pre-release) so we can use githubs latest link

* scale gracefully

* fixed error with naming of maxChar

README.md

@@ -1,7 +1,7 @@
 [![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0)
 
 Download the latest releases here
-- [Windows](https://github.com/cpvalente/ontime/releases/download/v0.2.0-beta/ontime-win64.exe)
+- [Windows](https://gitreleases.dev/gh/cpvalente/ontime/latest/ontime-win64.exe)
 
 # Ontime
 Ontime is an application for managing event rundowns and running stage timers.

client/src/App.css

@@ -1,6 +1,8 @@
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.01);
+  scrollbar-width: thin;
 }
 
 body,
@@ -18,3 +20,25 @@ html,
 option {
   color: black;
 }
+
+/* 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/common/components/nav/NavLogo.module.css

@@ -4,12 +4,12 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  font-size: 1vw;
+  font-size: max(1vw, 16px);
   z-index: 10;
 }
 
 .logo {
-  width: 3vw;
+  width: max(3vw, 32px);
   opacity: 0.5;
 }
 

client/src/common/input/EditableText.jsx

@@ -5,6 +5,7 @@ import style from './EditableText.module.css';
 export default function EditableText(props) {
   const { label, defaultValue, placeholder, submitHandler, ...rest } = props;
   const [text, setText] = useState(defaultValue || '');
+  const maxchar = props.maxchar || 40;
 
   useEffect(() => {
     if (defaultValue == null) setText('');
@@ -18,7 +19,7 @@ export default function EditableText(props) {
   };
 
   const handleChange = (val) => {
-    if (val.length < 40) setText(val);
+    if (val.length < maxchar) setText(val);
   };
 
   return (

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

@@ -4,23 +4,23 @@
   height: 100%;
   margin: auto;
   color: #fffd;
-  padding: 2vh;
+  padding: max(16px, 2vh);
 
   display: grid;
-  grid-template-rows: 38vh 1fr;
+  grid-template-rows: auto 1fr;
-  grid-template-columns: 40px 48em 27vw 1fr;
+  grid-template-columns: 40px 48em auto 1fr;
   grid-template-areas:
     'sett even play info'
     'sett even mess info';
-  gap: 2vh;
+  gap: max(16px, 2vh);
 }
 
-/* 2/3 window, hide previews */
+/* 2/3 window, hide info */
-@media (max-width: 1250px) and (min-height: 700px) {
+@media (max-width: 1450px) and (min-height: 700px) {
   .mainContainer {
     height: 100%;
-    grid-template-rows: 1fr 1fr;
+    grid-template-rows: auto 1fr;
-    grid-template-columns: 40px 48em 1fr 1fr;
+    grid-template-columns: 40px 48em auto;
     /* grid-template-areas:
       'even play sett'
       'even mess sett'; */
@@ -32,7 +32,7 @@
 }
 
 /* 1/3 window, show control only */
-@media (max-width: 750px) and (min-height: 500px) {
+@media (max-width: 850px) and (min-height: 500px) {
   .mainContainer {
     grid-template-rows: auto 1fr;
     grid-template-columns: 100%;
@@ -67,7 +67,7 @@
 }
 
 h1 {
-  font-size: 1.5em;
+  font-size: max(1.5em, 16px);
   color: rgba(255, 255, 255, 0.63);
   padding-bottom: 0.25em;
 }
@@ -98,6 +98,11 @@ h1 {
   grid-area: play;
 }
 
+.messages,
+.playback {
+  min-width: 31em;
+}
+
 .mainContainer > .settings {
   grid-area: sett;
   background-color: transparent;
@@ -126,25 +131,3 @@ h1 {
   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/EventBlock.jsx

@@ -78,6 +78,7 @@ const ExpandedBlock = (props) => {
           defaultValue={data.note}
           placeholder='Add Note'
           style={{ color: '#d69e2e' }}
+          maxchar={160}
           submitHandler={(v) =>
             actionHandler('update', { field: 'note', value: v })
           }
@@ -162,7 +163,6 @@ export default function EventBlock(props) {
   const delayValue = delay > 0 ? millisToMinutes(delay) : null;
 
   const handleCollapse = (isCollapsed) => {
-    console.log('setting collapsed', isCollapsed);
     setCollapsed({ [data.id]: isCollapsed });
   };
 

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

@@ -113,7 +113,6 @@
   grid-area: time;
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
   align-items: flex-start;
   justify-items: flex-start;
 

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

@@ -42,9 +42,16 @@ export default function StageManager(props) {
   }, [backstageEvents]);
 
   // Format messages
+
   const showPubl = publ.text !== '' && publ.visible;
-  let stageTimer = formatDisplay(Math.abs(time.running), true);
+
-  if (time.running < 0) stageTimer = `-${stageTimer}`;
+  let stageTimer;
+  if (time.running === null) {
+    stageTimer = '- - : - -';
+  } else {
+    stageTimer = formatDisplay(Math.abs(time.running), true);
+    if (time.running < 0) stageTimer = `-${stageTimer}`;
+  }
 
   // motion
   const titleVariants = {

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

@@ -10,7 +10,7 @@
   color: #fffd;
   display: grid;
   grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
-  grid-template-rows: auto 1fr auto auto;
+  grid-template-rows: auto 1fr auto minmax(25vh, auto);
   grid-template-areas:
     ' clck .... .... .... ....'
     ' timr timr timr timr timr'

server/package.json

@@ -12,7 +12,7 @@
   "license": "AGPL-3.0-only",
   "main": "main.js",
   "devDependencies": {
-    "electron": "^13.1.2",
+    "electron": "^13.6.1",
     "electron-builder": "^22.11.3",
     "eslint": "^7.26.0",
     "eslint-config-airbnb": "^18.2.1",

server/src/classes/EventTimer.js

@@ -546,6 +546,9 @@ export class EventTimer extends Timer {
     const events = eventlist.filter((e) => e.type === 'event');
     const numEvents = events.length;
 
+    // is this the first event
+    let first = this.numEvents === 0;
+
     // set general
     this._eventlist = events;
     this.numEvents = numEvents;
@@ -556,8 +559,11 @@ export class EventTimer extends Timer {
       return;
     }
 
-    // handle reload selected
+    // auto load if is the only event
-    if (this.selectedEventId != null) {
+    if (first) {
+      this.loadEvent(0);
+    } else if (this.selectedEventId != null) {
+      // handle reload selected
       // Look for event (order might have changed)
       const eventIndex = this._eventlist.findIndex(
         (e) => e.id === this.selectedEventId
@@ -574,6 +580,7 @@ export class EventTimer extends Timer {
       const type = this._startedAt != null ? 'reload' : 'load';
       this.loadEvent(eventIndex, type);
     }
+
     this.broadcastState();
   }
 

server/yarn.lock

@@ -1757,7 +1757,7 @@ electron-to-chromium@^1.3.878:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.884.tgz#0cd8c3a80271fd84a81f284c60fb3c9ecb33c166"
   integrity sha512-kOaCAa+biA98PwH5BpCkeUeTL6mCeg8p3Q3OhqzPyqhu/5QUnWAN2wr/3IK8xMQxIV76kfoQpP+Bn/wij/jXrg==
 
-electron@^13.1.2:
+electron@^13.6.1:
   version "13.6.1"
   resolved "https://registry.yarnpkg.com/electron/-/electron-13.6.1.tgz#f61c4f269b57c7dc27e0d5476216a988caa9c752"
   integrity sha512-rZ6Y7RberigruefQpWOiI4bA9ppyT88GQF8htY6N1MrAgal5RrBc+Mh92CcGU7zT9QO+XO3DarSgZafNTepffQ==