koel/resources/assets/js/components/layout/app-footer/FooterExtraControls.vue

78 lines
1.6 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
2022-10-13 15:18:47 +00:00
<div class="extra-controls" data-testid="other-controls">
2022-11-02 19:25:22 +00:00
<div class="wrapper">
2022-11-06 17:09:06 +00:00
<a
v-koel-tooltip.top
2022-10-13 15:18:47 +00:00
class="visualizer-btn"
2022-04-15 14:24:30 +00:00
data-testid="toggle-visualizer-btn"
2022-11-06 17:09:06 +00:00
href="/#/visualizer"
title="Show the visualizer"
2022-04-15 14:24:30 +00:00
>
2022-12-02 16:17:37 +00:00
<icon :icon="faBolt" />
2022-11-06 17:09:06 +00:00
</a>
2022-04-15 14:24:30 +00:00
<button
v-if="useEqualizer"
v-koel-tooltip.top
2022-04-15 14:24:30 +00:00
:class="{ active: showEqualizer }"
2022-10-13 15:18:47 +00:00
class="equalizer"
2022-11-02 19:25:22 +00:00
title="Show equalizer"
2022-04-20 15:57:53 +00:00
type="button"
2022-11-02 19:25:22 +00:00
@click.prevent="showEqualizer"
2022-04-15 14:24:30 +00:00
>
2022-12-02 16:17:37 +00:00
<icon :icon="faSliders" />
2022-04-15 14:24:30 +00:00
</button>
2022-12-02 16:17:37 +00:00
<Volume />
2022-04-15 14:24:30 +00:00
</div>
</div>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2022-10-13 15:18:47 +00:00
import { faBolt, faSliders } from '@fortawesome/free-solid-svg-icons'
import { ref } from 'vue'
import { eventBus, isAudioContextSupported as useEqualizer, requireInjection } from '@/utils'
2022-10-13 15:18:47 +00:00
import { CurrentSongKey } from '@/symbols'
2022-04-15 14:24:30 +00:00
2022-06-10 10:47:46 +00:00
import Volume from '@/components/ui/Volume.vue'
2022-04-15 17:00:08 +00:00
2022-10-13 15:18:47 +00:00
const song = requireInjection(CurrentSongKey, ref(null))
2022-04-15 17:00:08 +00:00
2022-11-02 19:25:22 +00:00
const showEqualizer = () => eventBus.emit('MODAL_SHOW_EQUALIZER')
2022-04-15 14:24:30 +00:00
</script>
<style lang="scss" scoped>
2022-10-13 15:18:47 +00:00
.extra-controls {
display: flex;
justify-content: flex-end;
2022-04-15 14:24:30 +00:00
position: relative;
2022-10-13 15:18:47 +00:00
width: 320px;
2022-04-15 14:24:30 +00:00
color: var(--color-text-secondary);
2022-10-13 15:18:47 +00:00
padding: 0 2rem;
2022-04-15 14:24:30 +00:00
.wrapper {
2022-10-13 15:18:47 +00:00
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1.5rem;
2022-04-15 14:24:30 +00:00
}
2022-10-13 15:18:47 +00:00
button {
color: currentColor;
transition: color 0.2s ease-in-out;
2022-04-15 14:24:30 +00:00
2022-10-13 15:18:47 +00:00
&:hover {
color: var(--color-text-primary);
2022-04-15 14:24:30 +00:00
}
}
@media only screen and (max-width: 768px) {
2022-10-13 15:18:47 +00:00
width: auto;
2022-04-15 14:24:30 +00:00
2022-10-13 15:18:47 +00:00
.visualizer-btn {
2022-04-15 14:24:30 +00:00
display: none;
}
}
}
</style>