Skip to content

Commit

Permalink
feat(MediaSettings): add component for audio test
Browse files Browse the repository at this point in the history
Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
  • Loading branch information
Antreesy committed Mar 5, 2024
1 parent 31d6f13 commit c699ada
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 0 deletions.
131 changes: 131 additions & 0 deletions src/components/MediaSettings/MediaDevicesSpeakerTest.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!--
- @copyright Copyright (c) 2024 Maksim Sukharev <antreesy.web@gmail.com>
-
- @author Maksim Sukharev <antreesy.web@gmail.com>
-
- @license AGPL-3.0-or-later
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->

<template>
<div class="media-devices-checker">
<div class="media-devices-checker__icon">
<VolumeHighIcon :size="16" />
</div>
<NcButton type="secondary" @click="playTestSound">
{{ buttonLabel }}
</NcButton>
<div v-if="isPlayingTestSound" class="equalizer">
<div v-for="bar in equalizerBars"
:key="bar.key"
class="equalizer__bar"
:style="bar.style" />
</div>
</div>
</template>

<script>
import VolumeHighIcon from 'vue-material-design-icons/VolumeHigh.vue'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
export default {
name: 'MediaDevicesSpeakerTest',
components: {
NcButton,
VolumeHighIcon,
},
data() {
return {
isPlayingTestSound: false,
}
},
computed: {
buttonLabel() {
return this.isPlayingTestSound
// TRANSLATORS Playing the test sound to check speakers
? t('spreed', 'Playing …')
: t('spreed', 'Test speakers')
},
equalizerBars() {
return Array.from(Array(4).keys()).map(item => ({
key: item,
style: {
height: Math.random() * 100 + '%',
animationDelay: Math.random() * -2 + 's',
},
}))
}
},
methods: {
playTestSound() {
if (this.isPlayingTestSound) {
this.$store.dispatch('pauseWaitAudio')
return
}
this.isPlayingTestSound = true
this.$store.dispatch('playWaitAudio').then((response) => {
response.addEventListener('ended', () => {
this.isPlayingTestSound = false
})
})
},
},
}
</script>

<style lang="scss" scoped>
.media-devices-checker {
display: flex;
margin: 16px 0;
&__icon {
display: flex;
justify-content: flex-start;
align-items: center;
width: 36px;
}
.equalizer {
margin-left: 8px;
height: var(--default-clickable-area);
display: flex;
align-items: center;
&__bar {
width: 8px;
height: 100%;
background: var(--color-primary-element);
border-radius: 4px;
margin: 0 2px;
will-change: height;
animation: equalizer 2s steps(15, end) infinite;
}
}
}
@keyframes equalizer {
@for $i from 0 through 15 {
#{4*$i}% { height: random(70) + 20%; }
}
}
</style>
3 changes: 3 additions & 0 deletions src/components/MediaSettings/MediaSettings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@
:devices="devices"
:device-id="videoInputId"
@update:deviceId="videoInputId = $event" />
<MediaDevicesSpeakerTest />
</div>

<!-- Background selection -->
Expand Down Expand Up @@ -222,6 +223,7 @@ import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
import MediaDevicesSelector from './MediaDevicesSelector.vue'
import MediaDevicesSpeakerTest from './MediaDevicesSpeakerTest.vue'
import VideoBackgroundEditor from './VideoBackgroundEditor.vue'
import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
import VideoBackground from '../CallView/shared/VideoBackground.vue'
Expand Down Expand Up @@ -260,6 +262,7 @@ export default {
NcModal,
NcNoteCard,
MediaDevicesSelector,
MediaDevicesSpeakerTest,
VideoBackground,
VideoIcon,
VideoOff,
Expand Down
2 changes: 2 additions & 0 deletions src/store/soundsStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,8 @@ const actions = {
audio.load()
audio.volume = 0.5
audio.play()

return audio
},

/**
Expand Down

0 comments on commit c699ada

Please sign in to comment.