feat: has the message been listened to or not

src/assets/icons/Icon32PauseCircle.tsx

@@ -0,0 +1,24 @@
+import { defineComponent, useId } from 'vue'
+
+type Props = {
+  withUnlistenedDot?: boolean
+}
+
+export const Icon32PauseCircle = defineComponent<Props>((props) => {
+  const id = useId()
+
+  return () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+      {!props.withUnlistenedDot && (
+        <mask id={id}>
+          <rect width="100%" height="100%" fill="white" />
+          <circle cx="27" cy="27" r="5" />
+        </mask>
+      )}
+      <path mask={`url(#${id})`} d="M32 16a16 16 0 1 1-32 0 16 16 0 0 1 32 0zm-20.9-5.45c-.1.21-.1.49-.1 1.05v8.8c0 .56 0 .84.1 1.05a1 1 0 0 0 .45.44c.21.11.49.11 1.05.11h.8c.56 0 .84 0 1.05-.1a1 1 0 0 0 .44-.45c.11-.21.11-.49.11-1.05v-8.8c0-.56 0-.84-.1-1.05a1 1 0 0 0-.45-.44c-.21-.11-.49-.11-1.05-.11h-.8c-.56 0-.84 0-1.05.1a1 1 0 0 0-.44.45zm6 0c-.1.21-.1.49-.1 1.05v8.8c0 .56 0 .84.1 1.05a1 1 0 0 0 .45.44c.21.11.49.11 1.05.11h.8c.56 0 .84 0 1.05-.1a1 1 0 0 0 .44-.45c.11-.21.11-.49.11-1.05v-8.8c0-.56 0-.84-.1-1.05a1 1 0 0 0-.45-.44c-.21-.11-.49-.11-1.05-.11h-.8c-.56 0-.84 0-1.05.1a1 1 0 0 0-.44.45z" fill="currentColor" />
+      {!props.withUnlistenedDot && <circle cx="27" cy="27" r="3" fill="currentColor" />}
+    </svg>
+  )
+}, {
+  props: ['withUnlistenedDot']
+})

src/assets/icons/Icon32PlayCircle.tsx

@@ -0,0 +1,24 @@
+import { defineComponent, useId } from 'vue'
+
+type Props = {
+  withUnlistenedDot?: boolean
+}
+
+export const Icon32PlayCircle = defineComponent<Props>((props) => {
+  const id = useId()
+
+  return () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+      {!props.withUnlistenedDot && (
+        <mask id={id}>
+          <rect width="100%" height="100%" fill="white" />
+          <circle cx="27" cy="27" r="5" />
+        </mask>
+      )}
+      <path mask={`url(#${id})`} clip-rule="evenodd" d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16zm-9.851.874a1.005 1.005 0 0 0 0-1.739l-8.644-4.994a1.003 1.003 0 0 0-1.505.87v9.988c0 .773.836 1.256 1.505.87z" fill="currentColor" fill-rule="evenodd" />
+      {!props.withUnlistenedDot && <circle cx="27" cy="27" r="3" fill="currentColor" />}
+    </svg>
+  )
+}, {
+  props: ['withUnlistenedDot']
+})

src/assets/icons/index.ts

@@ -28,7 +28,9 @@ export { default as Icon24ViewOutline } from './Icon24ViewOutline.svg'
 export { default as Icon24VolumeOutline } from './Icon24VolumeOutline.svg'
 export { default as Icon28DeleteOutline } from './Icon28DeleteOutline.svg'
 export { default as Icon32DonutCircleFillYellow } from './Icon32DonutCircleFillYellow.svg'
-export { default as Icon32PauseCircle } from './Icon32PauseCircle.svg'
-export { default as Icon32PlayCircle } from './Icon32PlayCircle.svg'
+
+export { Icon32PauseCircle } from './Icon32PauseCircle'
+export { Icon32PlayCircle } from './Icon32PlayCircle'
+
 export { default as Icon32Spinner } from './Icon32Spinner.svg'
 export { default as Icon44Spinner } from './Icon44Spinner.svg'

src/converters/MessageConverter.ts

@@ -37,6 +37,7 @@ export function fromApiMessage(message: MessagesMessage): Message.Message {
   return {
     kind: 'Normal',
     text: message.text,
+    wasListened: message.was_listened ?? false,
     attaches: fromApiAttaches(message.attachments ?? []),
     replyMessage: message.reply_message && fromApiForeignMessage(
       message.reply_message,

src/model/Message.ts

@@ -20,6 +20,7 @@ export interface Normal extends BaseMessage {
   kind: 'Normal'
   text: string
   attaches: Attach.Attaches
+  wasListened: boolean
   replyMessage?: Foreign
   forwardedMessages?: NonEmptyArray<Foreign>
 }
@@ -33,7 +34,7 @@ export interface Expired extends BaseMessage {
   kind: 'Expired'
 }
 
-export interface Foreign extends Omit<Normal, 'kind' | 'peerId' | 'cmid' | 'isOut'> {
+export interface Foreign extends Omit<Normal, 'kind' | 'peerId' | 'cmid' | 'isOut' | 'wasListened'> {
   kind: 'Foreign'
   peerId?: Peer.Id
   cmid?: Cmid
@@ -42,7 +43,7 @@ export interface Foreign extends Omit<Normal, 'kind' | 'peerId' | 'cmid' | 'isOu
   isUnavailable: boolean
 }
 
-export interface Pinned extends Omit<Normal, 'kind' | 'isOut' | 'updatedAt'> {
+export interface Pinned extends Omit<Normal, 'kind' | 'isOut' | 'updatedAt' | 'wasListened'> {
   kind: 'Pinned'
   isUnavailable: boolean
 }

src/ui/messenger/ConvoMessage/ConvoMessage.tsx

@@ -43,7 +43,13 @@ export const ConvoMessage = defineComponent<Props>((props) => {
           )}
 
           {message.text && <span class="ConvoMessage__text">{message.text}</span>}
-          {hasAttaches && <Attaches class="ConvoMessage__attaches" attaches={message.attaches} />}
+          {hasAttaches && (
+            <Attaches
+              class="ConvoMessage__attaches"
+              attaches={message.attaches}
+              message={message}
+            />
+          )}
 
           {isEmpty && (
             <span class="ConvoMessage__empty">

src/ui/messenger/attaches/AttachVoice/AttachVoice.tsx

@@ -7,6 +7,7 @@ import './AttachVoice.css'
 
 type Props = {
   voice: Attach.Voice
+  wasListened?: boolean
 }
 
 export const AttachVoice = defineComponent<Props>((props) => {
@@ -27,7 +28,7 @@ export const AttachVoice = defineComponent<Props>((props) => {
   })
 
   const text = computed(() => {
-    if (props.voice.transcript && props.voice.transcript.trim() === '') {
+    if (!props.voice.transcript || props.voice.transcript.trim() === '') {
       return lang.use('me_voice_transcription_empty')
     }
 
@@ -91,13 +92,17 @@ export const AttachVoice = defineComponent<Props>((props) => {
       <div class="AttachVoice__player">
         <ButtonIcon
           onClick={toggleAudio}
-          icon={isPause.value ? <Icon32PauseCircle /> : <Icon32PlayCircle />}
+          icon={isPause.value
+            ? <Icon32PauseCircle withUnlistenedDot={props.wasListened} />
+            : <Icon32PlayCircle withUnlistenedDot={props.wasListened} />}
         />
+
         <div class="AttachVoice__track">
           <div class="AttachVoice__trackContent">
             <input
               class="AttachVoice__range"
               type="range"
+              step="0.1"
               id="track"
               name="track"
               value={range.value}
@@ -120,11 +125,12 @@ export const AttachVoice = defineComponent<Props>((props) => {
       </div>
       {!isHiddenCollapse.value && (
         <div class="AttachVoice__transcript">
-          <div class={['AttachVoice__collapse', {
-            'AttachVoice__collapse--open': !isHiddenCollapse.value,
-            'AttachVoice__collapse--close': isHiddenCollapse.value,
-            'AttachVoice__collapse--faded': transcriptNotReady.value
-          }]}
+          <div
+            class={['AttachVoice__collapse', {
+              'AttachVoice__collapse--open': !isHiddenCollapse.value,
+              'AttachVoice__collapse--close': isHiddenCollapse.value,
+              'AttachVoice__collapse--faded': transcriptNotReady.value
+            }]}
           >
             {text.value}
           </div>
@@ -133,5 +139,5 @@ export const AttachVoice = defineComponent<Props>((props) => {
     </div>
   )
 }, {
-  props: ['voice']
+  props: ['voice', 'wasListened']
 })

src/ui/messenger/attaches/Attaches.tsx

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue'
 import * as Attach from 'model/Attach'
+import * as Message from 'model/Message'
 import { useEnv } from 'hooks'
 import { ClassName } from 'misc/utils'
 import { AttachVoice } from './AttachVoice/AttachVoice'
@@ -11,6 +12,7 @@ import './Attaches.css'
 
 type Props = {
   attaches: Attach.Attaches
+  message?: Message.Normal
   class: ClassName
 }
 
@@ -23,7 +25,9 @@ export const Attaches = defineComponent<Props>((props) => {
       {props.attaches.photos && <AttachPhotos photos={props.attaches.photos} />}
       {props.attaches.links?.map((link) => <AttachLink link={link} />)}
       {props.attaches.wall && <AttachWall wall={props.attaches.wall} />}
-      {props.attaches.voice && <AttachVoice voice={props.attaches.voice} />}
+      {props.attaches.voice && (
+        <AttachVoice voice={props.attaches.voice} wasListened={props.message?.wasListened} />
+      )}
       {props.attaches.unknown?.map((unknown) => (
         <div class="Attaches__unknown">
           {lang.use('me_unknown_attach')} ({unknown.type})
@@ -32,5 +36,5 @@ export const Attaches = defineComponent<Props>((props) => {
     </div>
   )
 }, {
-  props: ['attaches', 'class']
+  props: ['attaches', 'class', 'message']
 })

src/ui/ui/ButtonIcon/ButtonIcon.css

@@ -5,6 +5,7 @@
   flex: none;
   position: relative;
   border-radius: 6px;
+  line-height: 0;
   transition: background-color var(--fastTransition), opacity var(--fastTransition);
 }