test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: added play & pause icon

Browse Source
This commit is contained in:
Shariq Ansari 2024-07-18 12:24:55 +05:30
parent c5cc0e4820
commit 844128b1e8
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/Activities/AudioPlayer.vue
View File

@ -1,14 +1,13 @@
<template> <template>
<div class="player w-full text-sm text-gray-600"> <div class="w-full text-sm text-gray-600">
<div class="player-controls flex items-center gap-2"> <div class="flex items-center gap-2">
<Button variant="ghost" @click="playPause"> <Button variant="ghost" @click="playPause">
<template #icon> <template #icon>
<FeatherIcon class="size-4" :name="isPaused ? 'play' : 'pause'" /> <PlayIcon v-if="isPaused" class="size-4 text-gray-600" />
<PauseIcon v-else class="size-4 text-gray-600" />
</template> </template>
</Button> </Button>
<div <div class="flex gap-2 items-center justify-between flex-1">
class="player-timeline flex gap-2 items-center justify-between flex-1"
>
<input <input
class="w-full slider !h-[0.5] bg-gray-200 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]" class="w-full slider !h-[0.5] bg-gray-200 [&::-webkit-slider-thumb]:shadow [&::-webkit-slider-thumb:hover]:outline [&::-webkit-slider-thumb:hover]:outline-[0.5px]"
:style="{ :style="{
@ -83,6 +82,8 @@
</template> </template>
<script setup> <script setup>
import PlayIcon from '@/components/Icons/PlayIcon.vue'
import PauseIcon from '@/components/Icons/PauseIcon.vue'
import VolumnLowIcon from '@/components/Icons/VolumnLowIcon.vue' import VolumnLowIcon from '@/components/Icons/VolumnLowIcon.vue'
import VolumnHighIcon from '@/components/Icons/VolumnHighIcon.vue' import VolumnHighIcon from '@/components/Icons/VolumnHighIcon.vue'
import MuteIcon from '@/components/Icons/MuteIcon.vue' import MuteIcon from '@/components/Icons/MuteIcon.vue'

16
frontend/src/components/Icons/PauseIcon.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6 4.5V11.5C6 12.3284 5.32843 13 4.5 13C3.67157 13 3 12.3284 3 11.5V4.5C3 3.67157 3.67157 3 4.5 3C5.32843 3 6 3.67157 6 4.5ZM2 4.5C2 3.11929 3.11929 2 4.5 2C5.88071 2 7 3.11929 7 4.5V11.5C7 12.8807 5.88071 14 4.5 14C3.11929 14 2 12.8807 2 11.5V4.5ZM13 4.5V11.5C13 12.3284 12.3284 13 11.5 13C10.6716 13 10 12.3284 10 11.5V4.5C10 3.67157 10.6716 3 11.5 3C12.3284 3 13 3.67157 13 4.5ZM9 4.5C9 3.11929 10.1193 2 11.5 2C12.8807 2 14 3.11929 14 4.5V11.5C14 12.8807 12.8807 14 11.5 14C10.1193 14 9 12.8807 9 11.5V4.5Z"
fill="currentColor"
/>
</svg>
</template>