v2: views (#278)

* config(sentry): instrumentation only in production

* chore: upgrade deps

* refactor: simplify and convert to ts

* refactor: composition and styles

* chore: remove deprecated deps

* ux: close menu on click outside

* style: small tweaks and clarifications

* refactor: retire PiP view

* ux: small tweaks

* style: cleanup deprecated styles

* chore: remove unused

* refactor: remove usages of deprecated fields and improve null timer presentation

* refactor: improve composition of countdown

* style: cleanup overridable styles

* ux: show event overtime status

* style: correct logic in paused timers

client/src/features/viewers/countdown/countdown.helpers.ts

@@ -0,0 +1,69 @@
+import { OntimeEvent } from '../../../common/models/EventTypes';
+import { TimeManagerType } from '../../../common/models/TimeManager.type';
+
+export enum TimerMessage {
+  toStart = 'Time to start',
+  waiting = 'Waiting for event start',
+  running = 'Event running',
+  ended = 'Event ended at',
+  unhandled = '',
+}
+
+/**
+ * Parses string as a title
+ */
+export const sanitiseTitle = (title: string | null) =>
+  title ? title : '{no title}';
+
+/**
+ * Returns a parsed timer and relevant status message
+ */
+export const fetchTimerData = (time: TimeManagerType, follow: OntimeEvent, selectedId: string): { message: TimerMessage, timer: number } => {
+  let message;
+  let timer;
+
+  if (selectedId === follow.id) {
+    // check that is not running
+    message = time.playback === 'pause' ? TimerMessage.waiting : TimerMessage.running;
+    timer = time.current ?? 0;
+
+  } else if (time.clock < follow.timeStart) {
+    // if it hasnt started, we count to start
+    message = TimerMessage.toStart;
+    timer = follow.timeStart - time.clock;
+
+  } else if (follow.timeStart <= time.clock && time.clock <= follow.timeEnd) {
+    // if it has started, we show running timer
+    message = TimerMessage.waiting;
+    timer = time.current ?? 0;
+
+  } else {
+    // running timer timer is not the one we are following
+
+    if (follow.timeStart > follow.timeEnd) {
+      // ends day after
+
+      if (follow.timeStart > time.clock) {
+        // if it hasnt started, we count to start
+        message = TimerMessage.toStart;
+        timer = follow.timeStart - time.clock;
+
+      } else if (follow.timeStart <= time.clock) {
+        // if it has started, we show running timer
+        message = TimerMessage.waiting;
+        timer = time.current ?? 0;
+
+      } else {
+        // if it has ended, we show how long ago
+        message = TimerMessage.ended;
+        timer = follow.timeEnd;
+      }
+
+    } else {
+      // if it has ended, we show how long ago
+      message = TimerMessage.ended;
+      timer = follow.timeEnd;
+    }
+  }
+  return { message, timer };
+};