fix ui: fix note tags rendering, fix player note opening

frontend/app/components/Session/WebPlayer.tsx

@@ -112,34 +112,31 @@ function WebPlayer(props: any) {
   }, [session.events, session.errors, contextValue.player, messagesProcessed]);
 
   React.useEffect(() => {
-    if (noteItem !== undefined) {
-      contextValue.player.pause();
-    } else {
-      if (activeTab === '' && ready && contextValue.player && windowActive) {
+    if (noteItem === undefined) {
+      if (activeTab === '' && contextValue.player && windowActive) {
         const jumpToTime = props.query.get('jumpto');
         const shouldAdjustOffset = visualOffset !== 0 && !visuallyAdjusted;
 
         if (jumpToTime || shouldAdjustOffset) {
           if (jumpToTime > visualOffset) {
-            contextValue.player.jump(parseInt(String(jumpToTime - startedAt)));
+            const diff = startedAt < jumpToTime ? jumpToTime - startedAt : jumpToTime
+            contextValue.player.jump(Math.max(diff, 0));
           } else {
             contextValue.player.jump(visualOffset);
             setAdjusted(true);
           }
         }
-
-        contextValue.player.play();
       }
     }
-  }, [activeTab, noteItem, visualOffset, ready, windowActive]);
+  }, [activeTab, noteItem, visualOffset, windowActive]);
 
   useEffect(() => {
-    if (cssLoading) {
+    if (cssLoading || noteItem) {
       contextValue.player?.pause();
     } else if (ready) {
       contextValue.player?.play();
     }
-  }, [cssLoading, ready])
+  }, [cssLoading, ready, noteItem])
 
   React.useEffect(() => {
     if (activeTab === 'Click map') {
@@ -168,7 +165,6 @@ function WebPlayer(props: any) {
 
   const onNoteClose = () => {
     setNoteItem(undefined);
-    contextValue.player.play();
   };
 
   useEffect(() => {

frontend/app/components/Session_/EventsBlock/NoteEvent.tsx

@@ -12,6 +12,7 @@ import { toast } from 'react-toastify';
 import { session } from 'App/routes';
 import { confirm } from 'UI';
 import { TeamBadge } from 'Shared/SessionsTabOverview/components/Notes';
+import { Tag } from 'antd'
 
 interface Props {
   note: Note;
@@ -107,20 +108,11 @@ function NoteEvent(props: Props) {
         {props.note.message}
       </div>
       <div>
-        <div className="flex items-center gap-2 flex-wrap w-full">
+        <div className="flex items-center flex-wrap w-full">
           {props.note.tag ? (
-            <div
-              key={props.note.tag}
-              style={{
-                // @ts-ignore
-                background: tagProps[props.note.tag],
-                userSelect: 'none',
-                padding: '1px 6px',
-              }}
-              className="rounded-full text-white text-xs select-none w-fit"
-            >
+            <Tag color={tagProps[props.note.tag]}>
               {props.note.tag}
-            </div>
+            </Tag>
           ) : null}
           {!props.note.isPublic ? null : <TeamBadge />}
         </div>

frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx

@@ -5,6 +5,7 @@ import { formatTimeOrDate } from 'App/date';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { TeamBadge } from 'Shared/SessionsTabOverview/components/Notes';
+import { Tag } from 'antd'
 
 interface Props {
   note?: Note;
@@ -72,13 +73,11 @@ function ReadNote(props: Props) {
         <div className="w-full">
           <div className="flex items-center gap-2 flex-wrap w-full">
             {props.note.tag ? (
-              <div
-                // @ts-ignore
-                style={{ background: tagProps[props.note.tag], userSelect: 'none', fontSize: 11 }}
-                className="rounded-full text-sm px-2 py-1 text-white flex items-center justify-center"
+              <Tag
+                color={tagProps[props.note.tag]}
               >
                 {props.note.tag}
-              </div>
+              </Tag>
             ) : null}
             {!props.note.isPublic ? null : <TeamBadge />}
 

frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx

@@ -10,6 +10,7 @@ import copy from 'copy-to-clipboard';
 import { toast } from 'react-toastify';
 import { session } from 'App/routes';
 import TeamBadge from './TeamBadge';
+import { Tag } from 'antd'
 
 interface Props {
   note: Note;
@@ -53,18 +54,13 @@ function NoteItem(props: Props) {
       >
         <div className="flex flex-col gap-1 p-2 rounded cursor-pointer note-hover">
           <div className="py-1 capitalize-first text-lg">{safeStrMessage}</div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center">
             {props.note.tag ? (
-              <div
-                style={{
-                  // @ts-ignore
-                  background: tagProps[props.note.tag],
-                  padding: '1px 6px',
-                }}
-                className="rounded-full text-white text-xs select-none w-fit"
+              <Tag
+                color={tagProps[props.note.tag]}
               >
                 {props.note.tag}
-              </div>
+              </Tag>
             ) : null}
             <div className="text-disabled-text flex items-center text-sm">
               <span className="color-gray-darkest mr-1">By </span>

frontend/app/mstore/notesStore.ts

@@ -46,12 +46,16 @@ export default class NotesStore {
     }
   }
 
+  setSessionNotes(notes: Note[]) {
+    this.sessionNotes = notes
+  }
+
   async fetchSessionNotes(sessionId: string) {
     this.setLoading(true)
     try {
       const notes = await notesService.getNotesBySessionId(sessionId)
       notes.forEach(note => note.time = note.timestamp)
-      this.setNotes(notes)
+      this.setSessionNotes(notes)
       return notes;
     } catch (e) {
       console.error(e)

frontend/app/player/player/Animator.ts

@@ -196,7 +196,7 @@ export default class Animator {
 
   // jump by index?
   jump = (time: number) => {
-    if (this.store.get().playing) {
+    if (this.store.get().playing && this.store.get().ready) {
       cancelAnimationFrame(this.animationFrameRequestId)
       this.setTime(time)
       this.startAnimation()