koel/resources/assets/js/components/meta/SupportKoel.vue

64 lines
1.6 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
2024-04-04 22:20:42 +00:00
<div
v-if="shown"
class="bg-k-bg-primary text-[0.9rem] px-6 py-4 flex text-k-text-secondary z-10 space-x-3"
data-testid="support-bar"
>
<p class="flex-1">
2022-04-15 14:24:30 +00:00
Loving Koel? Please consider supporting its development via
2022-04-24 08:29:14 +00:00
<a href="https://github.com/users/phanan/sponsorship" rel="noopener" target="_blank">GitHub Sponsors</a>
2022-04-15 14:24:30 +00:00
and/or
2022-04-24 08:29:14 +00:00
<a href="https://opencollective.com/koel" rel="noopener" target="_blank">OpenCollective</a>.
2022-04-15 14:24:30 +00:00
</p>
<button type="button" @click.prevent="close">Hide</button>
2024-04-04 22:20:42 +00:00
<span class="block after:content-['•'] after:block" />
<button type="button" @click.prevent="stopBugging">
Don't bug me again
</button>
2022-04-15 14:24:30 +00:00
</div>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2022-04-15 14:24:30 +00:00
import isMobile from 'ismobilejs'
import { ref, watch } from 'vue'
import { preferenceStore } from '@/stores'
2024-01-08 16:59:05 +00:00
import { useKoelPlus } from '@/composables'
2022-04-15 14:24:30 +00:00
const delayUntilShow = 30 * 60 * 1000 // 30 minutes
2022-04-15 14:24:30 +00:00
2022-04-15 17:00:08 +00:00
const shown = ref(false)
2022-04-15 14:24:30 +00:00
2024-01-08 16:59:05 +00:00
const { isPlus } = useKoelPlus()
const setUpShowBarTimeout = () => setTimeout(() => (shown.value = true), delayUntilShow)
const close = () => shown.value = false
2022-04-15 17:00:08 +00:00
const stopBugging = () => {
preferenceStore.set('support_bar_no_bugging', true)
2022-04-15 17:00:08 +00:00
close()
}
watch(preferenceStore.initialized, initialized => {
if (!initialized) {
return
}
if (preferenceStore.state.support_bar_no_bugging || isMobile.any) {
return
}
if (isPlus.value) {
return
}
setUpShowBarTimeout()
}, { immediate: true })
2022-04-15 14:24:30 +00:00
</script>
2024-04-04 20:13:35 +00:00
<style lang="postcss" scoped>
2024-04-04 22:20:42 +00:00
a {
@apply text-k-text-primary hover:text-k-accent;
}
2022-04-15 14:24:30 +00:00
2024-04-04 22:20:42 +00:00
button {
@apply text-k-text-primary text-[0.9rem] hover:text-k-accent;
2022-04-15 14:24:30 +00:00
}
</style>