feat: show dropdown for download & playback speed control

frontend/src/components/Activities/Activities.vue

@@ -372,7 +372,6 @@
               class="flex items-center justify-between rounded border"
             >
               <AudioPlayer :src="call.recording_url" />
-              <audio class="audio-control" controls :src="call.recording_url" />
             </div>
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-1">

frontend/src/components/Activities/AudioPlayer.vue

@@ -61,11 +61,13 @@
             </template>
           </Button>
         </div>
-        <Button variant="ghost">
-          <template #icon>
-            <FeatherIcon class="size-4" name="more-horizontal" />
-          </template>
-        </Button>
+        <Dropdown :options="options">
+          <Button variant="ghost" @click="showPlaybackSpeed = false">
+            <template #icon>
+              <FeatherIcon class="size-4" name="more-horizontal" />
+            </template>
+          </Button>
+        </Dropdown>
       </div>
     </div>
 
@@ -84,7 +86,10 @@
 import VolumnLowIcon from '@/components/Icons/VolumnLowIcon.vue'
 import VolumnHighIcon from '@/components/Icons/VolumnHighIcon.vue'
 import MuteIcon from '@/components/Icons/MuteIcon.vue'
-import { computed, ref } from 'vue'
+import PlaybackSpeedIcon from '@/components/Icons/PlaybackSpeedIcon.vue'
+import PlaybackSpeedOption from '@/components/Activities/PlaybackSpeedOption.vue'
+import Dropdown from '@/components/frappe-ui/Dropdown.vue'
+import { computed, h, ref } from 'vue'
 
 const props = defineProps({
   src: String,
@@ -129,6 +134,55 @@ function updateVolumnProgress(value) {
   currentVolumn.value = value
   volumnProgress.value = value * 100
 }
+
+const showPlaybackSpeed = ref(false)
+const currentPlaybackSpeed = ref(1)
+
+const options = computed(() => {
+  let playbackSpeeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
+
+  let playbackSpeedOptions = playbackSpeeds.map((speed) => {
+    let label = `${speed}x`
+    if (speed === 1) {
+      label = __('Normal')
+    }
+    return {
+      component: () =>
+        h(PlaybackSpeedOption, {
+          label,
+          active: speed === currentPlaybackSpeed.value,
+          onClick: () => {
+            audio.value.playbackRate = speed
+            showPlaybackSpeed.value = false
+            currentPlaybackSpeed.value = speed
+          },
+        }),
+    }
+  })
+  let _options = [
+    {
+      icon: 'download',
+      label: __('Download'),
+      onClick: () => {
+        const a = document.createElement('a')
+        a.href = props.src
+        a.download = props.src.split('/').pop()
+        a.click()
+      },
+    },
+    {
+      icon: () => h(PlaybackSpeedIcon, { class: 'size-4' }),
+      label: __('Playback speed'),
+      onClick: (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        showPlaybackSpeed.value = true
+      },
+    },
+  ]
+
+  return showPlaybackSpeed.value ? playbackSpeedOptions : _options
+})
 </script>
 
 <style scoped>

frontend/src/components/Activities/PlaybackSpeedOption.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <Button
+      class="flex justify-between w-full rounded text-base"
+      variant="ghost"
+      :label="label"
+      @click="onClick"
+    >
+      <template v-if="active" #suffix>
+        <FeatherIcon class="size-4" name="check" />
+      </template>
+    </Button>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  label: String,
+  active: Boolean,
+  onClick: Array,
+})
+</script>

frontend/src/components/Icons/PlaybackSpeedIcon.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="8"
+      cy="8"
+      r="6.5"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-dasharray="1.9 1.9"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7.5 14.9824C7.66515 14.9941 7.83188 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C7.83188 1 7.66515 1.00593 7.5 1.01758V2.02054C7.66487 2.00694 7.83162 2 8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C7.83162 14 7.66487 13.9931 7.5 13.9795V14.9824Z"
+      fill="currentColor"
+    />
+    <path
+      d="M6.55133 5.06237L10.9174 8.09973L6.54669 10.7899L6.55133 5.06237Z"
+      stroke="currentColor"
+    />
+  </svg>
+</template>