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

152 lines
3.3 KiB
Vue
Raw Normal View History

2022-04-15 14:24:30 +00:00
<template>
2022-04-21 22:58:32 +00:00
<div v-koel-focus class="about text-secondary" data-testid="about-modal" tabindex="0" @keydown.esc="close">
2022-04-15 14:24:30 +00:00
<header>
2022-07-15 07:23:55 +00:00
<h1 class="text-primary">About Koel</h1>
2022-04-15 14:24:30 +00:00
</header>
<main>
<div class="logo">
2022-04-21 22:58:32 +00:00
<img alt="Koel's logo" src="@/../img/logo.svg" width="128">
2022-04-15 14:24:30 +00:00
</div>
<p class="current-version">{{ currentVersion }}</p>
2022-04-15 14:24:30 +00:00
<p v-if="shouldNotifyNewVersion" data-testid="new-version-about">
<a :href="latestVersionReleaseUrl" target="_blank">
A new version of Koel is available ({{ latestVersion }})!
2022-04-15 14:24:30 +00:00
</a>
</p>
<p class="author">
2022-04-21 22:58:32 +00:00
Made with by
<a href="https://github.com/phanan" rel="noopener" target="_blank">Phan An</a>
2022-04-15 14:24:30 +00:00
and quite a few
<a href="https://github.com/koel/core/graphs/contributors" rel="noopener" target="_blank">awesome</a>&nbsp;<a
href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank">contributors</a>.
2022-04-15 14:24:30 +00:00
</p>
<div v-if="isDemo()" class="credit-wrapper" data-testid="demo-credits">
2022-08-04 08:34:13 +00:00
Music by
<ul class="credits">
<li v-for="credit in credits" :key="credit.name">
<a :href="credit.url" target="_blank">{{ credit.name }}</a>
</li>
</ul>
</div>
2022-04-15 14:24:30 +00:00
<p>
Loving Koel? Please consider supporting its development via
2022-04-21 22:58:32 +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-21 22:58:32 +00:00
<a href="https://opencollective.com/koel" rel="noopener" target="_blank">OpenCollective</a>.
2022-04-15 14:24:30 +00:00
</p>
</main>
<footer>
2022-05-03 16:51:59 +00:00
<Btn data-testid="close-modal-btn" red rounded @click.prevent="close">Close</Btn>
2022-04-15 14:24:30 +00:00
</footer>
</div>
</template>
2022-04-15 17:00:08 +00:00
<script lang="ts" setup>
2022-08-04 08:34:13 +00:00
import { orderBy } from 'lodash'
import { onMounted, ref } from 'vue'
2022-04-29 20:15:10 +00:00
import { isDemo } from '@/utils'
import { useNewVersionNotification } from '@/composables'
import { http } from '@/services'
2022-04-15 14:24:30 +00:00
import Btn from '@/components/ui/Btn.vue'
2022-04-15 14:24:30 +00:00
2022-08-04 08:34:13 +00:00
type DemoCredits = {
name: string
url: string
}
const credits = ref<DemoCredits[]>([])
const {
shouldNotifyNewVersion,
currentVersion,
latestVersion,
latestVersionReleaseUrl
} = useNewVersionNotification()
2022-04-15 17:00:08 +00:00
const emit = defineEmits(['close'])
const close = () => emit('close')
2022-08-04 08:34:13 +00:00
onMounted(async () => {
credits.value = isDemo() ? orderBy(await http.get<DemoCredits[]>('demo/credits'), 'name') : []
2022-08-04 08:34:13 +00:00
})
2022-04-15 14:24:30 +00:00
</script>
<style lang="scss" scoped>
.about {
text-align: center;
background: var(--color-bg-primary);
max-width: 480px;
width: 90%;
border-radius: .6rem;
overflow: hidden;
main {
padding: 2rem;
p {
margin: 1rem 0;
}
}
header, footer {
padding: 1rem;
background: rgba(255, 255, 255, .05);
}
header {
font-size: 1.2rem;
border-bottom: 1px solid rgba(255, 255, 255, .1);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
a {
color: var(--color-text-primary);
&:hover {
color: var(--color-highlight);
}
}
}
2022-08-04 08:34:13 +00:00
.credit-wrapper {
max-height: 9rem;
overflow: auto;
}
.credits, .credits li {
display: inline;
}
.credits {
display: inline;
li {
display: inline;
&:last-child {
&::before {
content: ', and '
}
&::after {
content: '.';
}
}
}
li + li {
&::before {
content: ', ';
}
}
}
2022-04-15 14:24:30 +00:00
</style>