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,7 @@ 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/AttachConverter.ts

@@ -9,7 +9,10 @@ import * as Peer from 'model/Peer'
 import { insertPeers } from 'actions'
 import { isNonEmptyArray } from 'misc/utils'
 
-export function fromApiAttaches(apiAttaches: MessagesMessageAttachment[]): Attach.Attaches {
+export function fromApiAttaches(
+  apiAttaches: MessagesMessageAttachment[],
+  wasVoiceMessageListened = false
+): Attach.Attaches {
   const attaches: Attach.Attaches = {}
 
   const addUnknown = (attach: MessagesMessageAttachment) => {
@@ -54,8 +57,9 @@ export function fromApiAttaches(apiAttaches: MessagesMessageAttachment[]): Attac
           linkOgg: apiAttach.audio_message.link_ogg,
           duration: apiAttach.audio_message.duration,
           waveform: apiAttach.audio_message.waveform,
-          transcript: apiAttach.audio_message.transcript,
-          transcriptState: apiAttach.audio_message.transcript_state
+          transcript: apiAttach.audio_message.transcript?.trim() ?? '',
+          transcriptState: apiAttach.audio_message.transcript_state,
+          wasListened: wasVoiceMessageListened ?? false
         }
         break
       }

src/converters/MessageConverter.ts

@@ -37,7 +37,7 @@ export function fromApiMessage(message: MessagesMessage): Message.Message {
   return {
     kind: 'Normal',
     text: message.text,
-    attaches: fromApiAttaches(message.attachments ?? []),
+    attaches: fromApiAttaches(message.attachments ?? [], message.was_listened),
     replyMessage: message.reply_message && fromApiForeignMessage(
       message.reply_message,
       baseMessage.peerId,
@@ -164,7 +164,7 @@ function fromApiForeignMessage(
     authorId: Peer.resolveOwnerId(foreignMessage.from_id),
     sentAt: foreignMessage.date * 1000,
     text: foreignMessage.text,
-    attaches: fromApiAttaches(foreignMessage.attachments ?? []),
+    attaches: fromApiAttaches(foreignMessage.attachments ?? [], foreignMessage.was_listened),
     replyMessage: foreignMessage.reply_message && fromApiForeignMessage(
       foreignMessage.reply_message,
       rootPeerId,
@@ -211,7 +211,7 @@ export function fromApiPinnedMessage(pinnedMessage: MessagesPinnedMessage): Mess
     authorId: Peer.resolveOwnerId(pinnedMessage.from_id),
     sentAt: pinnedMessage.date * 1000,
     text: pinnedMessage.text,
-    attaches: fromApiAttaches(pinnedMessage.attachments ?? []),
+    attaches: fromApiAttaches(pinnedMessage.attachments ?? [], pinnedMessage.was_listened),
     replyMessage: pinnedMessage.reply_message && fromApiForeignMessage(
       pinnedMessage.reply_message,
       peerId,

src/model/Attach.ts

@@ -47,7 +47,8 @@ export type Voice = {
   linkOgg: string
   duration: number
   waveform: number[]
-  transcript?: string
+  wasListened: boolean
+  transcript: string
   transcriptState: 'in_progress' | 'done' | 'error'
 }
 

src/model/api-types/objects/MessagesForeignMessage.ts

@@ -15,7 +15,7 @@ export type MessagesForeignMessage = {
   reply_message?: MessagesForeignMessage
   text: string
   update_time?: number
-  was_listened?: boolean
+  was_listened: boolean
   was_played?: boolean
   payload?: string
   is_expired?: boolean

src/model/api-types/objects/MessagesPinnedMessage.ts

@@ -14,6 +14,7 @@ export type MessagesPinnedMessage = {
   fwd_messages?: MessagesForeignMessage[]
   geo?: MessagesMessageAttachmentGeo
   peer_id: number
+  was_listened: boolean
   reply_message?: MessagesForeignMessage
   text: string
   keyboard?: MessagesKeyboard

src/ui/messenger/ConvoMessage/ConvoMessage.tsx

@@ -43,7 +43,9 @@ 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} />
+          )}
 
           {isEmpty && (
             <span class="ConvoMessage__empty">

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

@@ -20,18 +20,15 @@ export const AttachVoice = defineComponent<Props>((props) => {
   const isHiddenCollapse = shallowRef(true)
 
   const transcriptNotReady = computed(() => {
-    return !props.voice.transcript ||
-    props.voice.transcript.trim() === '' ||
-    props.voice.transcriptState === 'error' ||
-    props.voice.transcriptState === 'in_progress'
+    return (
+      props.voice.transcript === '' ||
+      props.voice.transcriptState === 'error' ||
+      props.voice.transcriptState === 'in_progress'
+    )
   })
 
   const text = computed(() => {
-    if (props.voice.transcript && props.voice.transcript.trim() === '') {
-      return lang.use('me_voice_transcription_empty')
-    }
-
-    if (props.voice.transcriptState === 'error') {
+    if (props.voice.transcriptState === 'error' || props.voice.transcript === '') {
       return lang.use('me_voice_transcription_empty')
     }
 
@@ -91,13 +88,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.voice.wasListened} />
+            : <Icon32PlayCircle withUnlistenedDot={!props.voice.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 +121,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>

src/ui/messenger/attaches/Attaches.tsx

@@ -23,7 +23,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} />
+      )}
       {props.attaches.unknown?.map((unknown) => (
         <div class="Attaches__unknown">
           {lang.use('me_unknown_attach')} ({unknown.type})

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);
 }