Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-09-20 14:21:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: add new version notification to About icon (#1557)

Browse source
This commit is contained in:
Phan An 2022-10-26 22:44:44 +02:00 committed by GitHub
parent 65d5a5468a
commit 8bcc671ed1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 53 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/assets/js/components/auth/LoginForm.vue
View file

@ -22,8 +22,8 @@ const DEMO_ACCOUNT = {
}
const url = ref('')
const email = ref(isDemo ? DEMO_ACCOUNT.email : '')
const password = ref(isDemo ? DEMO_ACCOUNT.password : '')
const email = ref(isDemo() ? DEMO_ACCOUNT.email : '')
const password = ref(isDemo() ? DEMO_ACCOUNT.password : '')
const failed = ref(false)
const emit = defineEmits(['loggedin'])

8
resources/assets/js/components/layout/main-wrapper/ExtraPanel.spec.ts
View file

@ -61,6 +61,14 @@ new class extends UnitTestCase {
expect(emitMock).toHaveBeenCalledWith('MODAL_SHOW_ABOUT_KOEL')
})
it('notifies new version', async () => {
it('shows new version', () => {
commonStore.state.current_version = 'v1.0.0'
commonStore.state.latest_version = 'v1.0.1'
this.actingAsAdmin().renderComponent().getByTitle('New version available!')
})
})
it('logs out', async () => {
const emitMock = this.mock(eventBus, 'emit')
const { getByTitle } = this.renderComponent()

23
resources/assets/js/components/layout/main-wrapper/ExtraPanel.vue
View file

@ -7,8 +7,14 @@
</div>
<div class="bottom">
<button v-koel-tooltip.left title="About Koel" type="button" @click.prevent="openAboutKoelModal">
<button
v-koel-tooltip.left
:title="shouldNotifyNewVersion ? 'New version available!' : 'About Koel'"
type="button"
@click.prevent="openAboutKoelModal"
>
<icon :icon="faInfoCircle"/>
<span v-if="shouldNotifyNewVersion" class="new-version-notification"/>
</button>
<button v-koel-tooltip.left title="Log out" type="button" @click.prevent="logout">
@ -70,7 +76,7 @@ import isMobile from 'ismobilejs'
import { faArrowRightFromBracket, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
import { defineAsyncComponent, ref, watch } from 'vue'
import { albumStore, artistStore } from '@/stores'
import { useAuthorization, useThirdPartyServices } from '@/composables'
import { useAuthorization, useNewVersionNotification, useThirdPartyServices } from '@/composables'
import { eventBus, logger, requireInjection } from '@/utils'
import { CurrentSongKey } from '@/symbols'
@ -107,6 +113,8 @@ const fetchSongInfo = async (_song: Song) => {
}
}
const { shouldNotifyNewVersion } = useNewVersionNotification()
const openAboutKoelModal = () => eventBus.emit('MODAL_SHOW_ABOUT_KOEL')
const onProfileLinkClick = () => isMobile.any && (selectedTab.value = undefined)
const logout = () => eventBus.emit('LOG_OUT')
@ -187,6 +195,7 @@ const logout = () => eventBus.emit('LOG_OUT')
}
::v-deep(button) {
position: relative;
display: flex;
align-items: center;
justify-content: center;
@ -221,5 +230,15 @@ const logout = () => eventBus.emit('LOG_OUT')
}
}
}
.new-version-notification {
position: absolute;
width: 10px;
height: 10px;
background: var(--color-highlight);
right: 1px;
top: 1px;
border-radius: 50%;
}
}
</style>

4
resources/assets/js/components/layout/main-wrapper/__snapshots__/ExtraPanel.spec.ts.snap
View file

@ -6,7 +6,9 @@ exports[`renders without a current song 1`] = `
<div class="top" data-v-10bd6447=""><button class="burger" data-v-10bd6447=""><br data-testid="icon" icon="[object Object]"></button>
<!--v-if-->
</div>
<div class="bottom" data-v-10bd6447=""><button title="About Koel" type="button" data-v-10bd6447=""><br data-testid="icon" icon="[object Object]" data-v-10bd6447=""></button><button title="Log out" type="button" data-v-10bd6447=""><br data-testid="icon" icon="[object Object]" data-v-10bd6447=""></button><br data-testid="stub" data-v-10bd6447=""></div>
<div class="bottom" data-v-10bd6447=""><button title="About Koel" type="button" data-v-10bd6447=""><br data-testid="icon" icon="[object Object]" data-v-10bd6447="">
<!--v-if-->
</button><button title="Log out" type="button" data-v-10bd6447=""><br data-testid="icon" icon="[object Object]" data-v-10bd6447=""></button><br data-testid="stub" data-v-10bd6447=""></div>
</div>
<!--v-if-->
</div>

15
resources/assets/js/components/meta/AboutKoelModal.spec.ts
View file

@ -1,6 +1,8 @@
import { expect, it } from 'vitest'
import { commonStore } from '@/stores'
import UnitTestCase from '@/__tests__/UnitTestCase'
import { http } from '@/services'
import { waitFor } from '@testing-library/vue'
import AboutKoelModel from './AboutKoelModal.vue'
new class extends UnitTestCase {
@ -15,13 +17,20 @@ new class extends UnitTestCase {
it('shows new version', () => {
commonStore.state.current_version = 'v1.0.0'
commonStore.state.latest_version = 'v1.0.1'
this.actingAsAdmin().render(AboutKoelModel).findByTestId('new-version-about')
this.actingAsAdmin().render(AboutKoelModel).getByTestId('new-version-about')
})
it('shows demo notation', () => {
it('shows demo notation', async () => {
const getMock = this.mock(http, 'get').mockResolvedValue([])
// @ts-ignore
import.meta.env.VITE_KOEL_ENV = 'demo'
this.render(AboutKoelModel).findByTestId('demo-credits')
const { getByTestId } = this.render(AboutKoelModel)
await waitFor(() => {
getByTestId('demo-credits')
expect(getMock).toHaveBeenCalledWith('demo/credits')
})
})
}
}

8
resources/assets/js/components/meta/AboutKoelModal.vue
View file

@ -21,11 +21,11 @@
Made with ❤️ by
<a href="https://github.com/phanan" rel="noopener" target="_blank">Phan An</a>
and quite a few
<a href="https://github.com/koel/core/graphs/contributors" rel="noopener" target="_blank">awesome</a>
<a href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank">contributors</a>.
<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>.
</p>
<div v-if="isDemo" class="credit-wrapper" data-testid="demo-credits">
<div v-if="isDemo()" class="credit-wrapper" data-testid="demo-credits">
Music by
<ul class="credits">
<li v-for="credit in credits" :key="credit.name">
@ -75,7 +75,7 @@ const emit = defineEmits(['close'])
const close = () => emit('close')
onMounted(async () => {
credits.value = isDemo ? orderBy(await http.get<DemoCredits[]>('demo/credits'), 'name') : []
credits.value = isDemo() ? orderBy(await http.get<DemoCredits[]>('demo/credits'), 'name') : []
})
</script>

2
resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
View file

@ -9,7 +9,7 @@ exports[`renders 1`] = `
<div class="logo" data-v-6b5b01a9=""><img alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="128" data-v-6b5b01a9=""></div>
<p class="current-version" data-v-6b5b01a9="">v0.0.0</p>
<!--v-if-->
<p class="author" data-v-6b5b01a9=""> Made with ❤️ by <a href="https://github.com/phanan" rel="noopener" target="_blank" data-v-6b5b01a9="">Phan An</a> and quite a few <a href="https://github.com/koel/core/graphs/contributors" rel="noopener" target="_blank" data-v-6b5b01a9="">awesome</a><a href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank" data-v-6b5b01a9="">contributors</a>. </p>
<p class="author" data-v-6b5b01a9=""> Made with ❤️ by <a href="https://github.com/phanan" rel="noopener" target="_blank" data-v-6b5b01a9="">Phan An</a> and quite a few <a href="https://github.com/koel/core/graphs/contributors" rel="noopener" target="_blank" data-v-6b5b01a9="">awesome</a>&nbsp;<a href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank" data-v-6b5b01a9="">contributors</a>. </p>
<!--v-if-->
<p data-v-6b5b01a9=""> Loving Koel? Please consider supporting its development via <a href="https://github.com/users/phanan/sponsorship" rel="noopener" target="_blank" data-v-6b5b01a9="">GitHub Sponsors</a> and/or <a href="https://opencollective.com/koel" rel="noopener" target="_blank" data-v-6b5b01a9="">OpenCollective</a>. </p>
</main>

2
resources/assets/js/components/profile-preferences/ProfileForm.vue
View file

@ -79,7 +79,7 @@ const update = async () => {
throw Error()
}
if (isDemo) {
if (isDemo()) {
toaster.value.success('Profile updated.')
return
}

2
resources/assets/js/utils/common.ts
View file

@ -40,4 +40,4 @@ export const copyText = (text: string): void => {
document.execCommand('copy')
}
export const isDemo = import.meta.env.VITE_KOEL_ENV === 'demo'
export const isDemo = () => import.meta.env.VITE_KOEL_ENV === 'demo'