Show "unplayed" dot on incoming audio messages

ts/components/conversation/MessageAudio.tsx

@@ -37,6 +37,7 @@ export type Props = {
   buttonRef: React.RefObject<HTMLButtonElement>;
   kickOffAttachmentDownload(): void;
   onCorrupted(): void;
+  onFirstPlayed(): void;
 
   computePeaks(url: string, barCount: number): Promise<ComputePeaksResult>;
   activeAudioID: string | undefined;
@@ -163,6 +164,7 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
     buttonRef,
     kickOffAttachmentDownload,
     onCorrupted,
+    onFirstPlayed,
 
     audio,
     computePeaks,
@@ -365,6 +367,12 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
     }
   };
 
+  useEffect(() => {
+    if (!played && isPlaying) {
+      onFirstPlayed();
+    }
+  }, [played, isPlaying, onFirstPlayed]);
+
   // Clicking waveform moves playback head position and starts playback.
   const onWaveformClick = (event: React.MouseEvent) => {
     event.preventDefault();