MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Migrate a bunch o components to script setup

This commit is contained in:
wvffle 2022-07-01 15:50:28 +00:00 committed by Georg Krause
parent 4240396220
commit 02f8f37824
11 changed files with 185 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/package.json
View File

@ -56,6 +56,7 @@
"@types/jquery": "3.5.14",
"@types/lodash-es": "4.17.6",
"@types/qs": "6.9.7",
"@types/showdown": "^2.0.0",
"@typescript-eslint/eslint-plugin": "5.30.0",
"@vitejs/plugin-vue": "2.3.3",
"@vue/compiler-sfc": "3.2.37",

4
front/src/components/About.vue
View File

@ -39,7 +39,9 @@ const headerStyle = computed(() => {
return ''
}
return (`background-image: url(${store.getters['instance/absoluteUrl'](banner.value)})`)
return {
backgroundImage: `url(${store.getters['instance/absoluteUrl'](banner.value)})`
}
})
</script>

161
front/src/components/AboutPod.vue
View File

@ -1,3 +1,64 @@
<script setup lang="ts">
import { useStore } from '~/store'
import { get } from 'lodash-es'
import showdown from 'showdown'
import { humanSize } from '~/utils/filters'
import { computed } from 'vue'
import { useGettext } from 'vue3-gettext'
const markdown = new showdown.Converter()
const store = useStore()
const nodeinfo = computed(() => store.state.instance.nodeinfo)
const { $pgettext } = useGettext()
const labels = computed(() => ({
title: $pgettext('Head/About/Title', 'About')
}))
const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') || 'Funkwhale')
const banner = computed(() => get(nodeinfo.value, 'metadata.banner'))
const longDescription = computed(() => get(nodeinfo.value, 'metadata.longDescription'))
const rules = computed(() => get(nodeinfo.value, 'metadata.rules'))
const terms = computed(() => get(nodeinfo.value, 'metadata.terms'))
const contactEmail = computed(() => get(nodeinfo.value, 'metadata.contactEmail'))
const anonymousCanListen = computed(() => get(nodeinfo.value, 'metadata.library.anonymousCanListen'))
const allowListEnabled = computed(() => get(nodeinfo.value, 'metadata.allowList.enabled'))
const version = computed(() => get(nodeinfo.value, 'software.version'))
const openRegistrations = computed(() => get(nodeinfo.value, 'openRegistrations'))
const defaultUploadQuota = computed(() => get(nodeinfo.value, 'metadata.defaultUploadQuota'))
const federationEnabled = computed(() => get(nodeinfo.value, 'metadata.library.federationEnabled'))
const onDesktop = computed(() => window.innerWidth > 800)
const stats = computed(() => {
const data = {
users: get(nodeinfo.value, 'usage.users.activeMonth', null),
hours: get(nodeinfo.value, 'metadata.library.music.hours', null),
artists: get(nodeinfo.value, 'metadata.library.artists.total', null),
albums: get(nodeinfo.value, 'metadata.library.albums.total', null),
tracks: get(nodeinfo.value, 'metadata.library.tracks.total', null),
listenings: get(nodeinfo.value, 'metadata.usage.listenings.total', null)
}
if (data.users === null || data.artists === null) {
return
}
return data
})
const headerStyle = computed(() => {
if (!banner.value) {
return ''
}
return {
backgroundImage: `url(${store.getters['instance/absoluteUrl'](banner.value)})`
}
})
</script>
<template>
<main
v-title="labels.title"
@ -428,103 +489,3 @@
</div>
</main>
</template>
<script>
import { mapState } from 'vuex'
import { get } from 'lodash-es'
import showdown from 'showdown'
import { humanSize } from '~/utils/filters'
export default {
setup () {
return { humanSize }
},
data () {
return {
markdown: new showdown.Converter(),
showAllowedDomains: false
}
},
computed: {
...mapState({
nodeinfo: state => state.instance.nodeinfo
}),
labels () {
return {
title: this.$pgettext('Head/About/Title', 'About')
}
},
podName () {
return get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
},
banner () {
return get(this.nodeinfo, 'metadata.banner')
},
shortDescription () {
return get(this.nodeinfo, 'metadata.shortDescription')
},
longDescription () {
return get(this.nodeinfo, 'metadata.longDescription')
},
rules () {
return get(this.nodeinfo, 'metadata.rules')
},
terms () {
return get(this.nodeinfo, 'metadata.terms')
},
stats () {
const data = {
users: get(this.nodeinfo, 'usage.users.activeMonth', null),
hours: get(this.nodeinfo, 'metadata.library.music.hours', null),
artists: get(this.nodeinfo, 'metadata.library.artists.total', null),
albums: get(this.nodeinfo, 'metadata.library.albums.total', null),
tracks: get(this.nodeinfo, 'metadata.library.tracks.total', null),
listenings: get(this.nodeinfo, 'metadata.usage.listenings.total', null)
}
if (data.users === null || data.artists === null) {
return
}
return data
},
contactEmail () {
return get(this.nodeinfo, 'metadata.contactEmail')
},
anonymousCanListen () {
return get(this.nodeinfo, 'metadata.library.anonymousCanListen')
},
allowListEnabled () {
return get(this.nodeinfo, 'metadata.allowList.enabled')
},
allowListDomains () {
return get(this.nodeinfo, 'metadata.allowList.domains')
},
version () {
return get(this.nodeinfo, 'software.version')
},
openRegistrations () {
return get(this.nodeinfo, 'openRegistrations')
},
defaultUploadQuota () {
return get(this.nodeinfo, 'metadata.defaultUploadQuota')
},
federationEnabled () {
return get(this.nodeinfo, 'metadata.library.federationEnabled')
},
headerStyle () {
if (!this.banner) {
return ''
}
return (
'background-image: url(' +
this.$store.getters['instance/absoluteUrl'](this.banner) +
')'
)
},
onDesktop () {
if (window.innerWidth > 800) return true
return false
}
}
}
</script>

178
front/src/components/Home.vue
View File

@ -1,3 +1,66 @@
<script setup lang="ts">
import { get } from 'lodash-es'
import showdown from 'showdown'
import AlbumWidget from '~/components/audio/album/Widget.vue'
import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
import LoginForm from '~/components/auth/LoginForm.vue'
import SignupForm from '~/components/auth/SignupForm.vue'
import { humanSize } from '~/utils/filters'
import { useStore } from '~/store'
import { computed } from 'vue'
import { whenever } from '@vueuse/core'
import { useGettext } from 'vue3-gettext'
import { useRouter } from 'vue-router'
const markdown = new showdown.Converter()
const { $pgettext } = useGettext()
const labels = computed(() => ({
title: $pgettext('Head/Home/Title', 'Home')
}))
const store = useStore()
const nodeinfo = computed(() => store.state.instance.nodeinfo)
const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') || 'Funkwhale')
const banner = computed(() => get(nodeinfo.value, 'metadata.banner'))
const shortDescription = computed(() => get(nodeinfo.value, 'metadata.shortDescription'))
const longDescription = computed(() => get(nodeinfo.value, 'metadata.longDescription'))
const rules = computed(() => get(nodeinfo.value, 'metadata.rules'))
const contactEmail = computed(() => get(nodeinfo.value, 'metadata.contactEmail'))
const anonymousCanListen = computed(() => get(nodeinfo.value, 'metadata.library.anonymousCanListen'))
const openRegistrations = computed(() => get(nodeinfo.value, 'openRegistrations'))
const defaultUploadQuota = computed(() => get(nodeinfo.value, 'metadata.defaultUploadQuota'))
const stats = computed(() => {
const users = get(nodeinfo.value, 'usage.users.activeMonth', null)
const hours = get(nodeinfo.value, 'metadata.library.music.hours', 0)
if (users === null) {
return null
}
return { users, hours }
})
const headerStyle = computed(() => {
if (!banner.value) {
return ''
}
return {
backgroundImage: `url(${store.getters['instance/absoluteUrl'](banner.value)})`
}
})
// TODO (wvffle): Check if needed
const router = useRouter()
whenever(() => store.state.auth.authenticated, () => {
console.log('Authenticated, redirecting to /library…')
router.push('/library')
})
</script>
<template>
<main
v-title="labels.title"
@ -39,24 +102,24 @@
>
<div class="ui stackable grid">
<div class="eight wide column">
<p v-if="!renderedDescription">
<p v-if="!longDescription">
<translate translate-context="Content/Home/Paragraph">
No description available.
</translate>
</p>
<template v-if="renderedDescription || rules">
<template v-if="longDescription || rules">
<sanitized-html
v-if="renderedDescription"
v-if="longDescription"
id="renderedDescription"
:html="renderedDescription"
:html="markdown.makeHtml(longDescription)"
/>
<div
v-if="renderedDescription"
v-if="longDescription"
class="ui hidden divider"
/>
<div class="ui relaxed list">
<div
v-if="renderedDescription"
v-if="longDescription"
class="item"
>
<i class="arrow right icon" />
@ -323,106 +386,3 @@
</section>
</main>
</template>
<script>
import { get } from 'lodash-es'
import { mapState } from 'vuex'
import showdown from 'showdown'
import AlbumWidget from '~/components/audio/album/Widget.vue'
import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
import LoginForm from '~/components/auth/LoginForm.vue'
import SignupForm from '~/components/auth/SignupForm.vue'
import { humanSize } from '~/utils/filters'
export default {
components: {
AlbumWidget,
ChannelsWidget,
LoginForm,
SignupForm
},
data () {
return {
markdown: new showdown.Converter(),
excerptLength: 2, // html nodes,
humanSize
}
},
computed: {
...mapState({
nodeinfo: state => state.instance.nodeinfo
}),
labels () {
return {
title: this.$pgettext('Head/Home/Title', 'Home')
}
},
podName () {
return get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
},
banner () {
return get(this.nodeinfo, 'metadata.banner')
},
shortDescription () {
return get(this.nodeinfo, 'metadata.shortDescription')
},
longDescription () {
return get(this.nodeinfo, 'metadata.longDescription')
},
rules () {
return get(this.nodeinfo, 'metadata.rules')
},
renderedDescription () {
if (!this.longDescription) {
return
}
const doc = this.markdown.makeHtml(this.longDescription)
return doc
},
stats () {
const data = {
users: get(this.nodeinfo, 'usage.users.activeMonth', null),
hours: get(this.nodeinfo, 'metadata.library.music.hours', null)
}
if (data.users === null || data.artists === null) {
return
}
return data
},
contactEmail () {
return get(this.nodeinfo, 'metadata.contactEmail')
},
defaultUploadQuota () {
return get(this.nodeinfo, 'metadata.defaultUploadQuota')
},
anonymousCanListen () {
return get(this.nodeinfo, 'metadata.library.anonymousCanListen')
},
openRegistrations () {
return get(this.nodeinfo, 'openRegistrations')
},
headerStyle () {
if (!this.banner) {
return ''
}
return (
'background-image: url(' +
this.$store.getters['instance/absoluteUrl'](this.banner) +
')'
)
}
},
watch: {
'$store.state.auth.authenticated': {
handler (v) {
if (v) {
console.log('Authenticated, redirecting to /library…')
this.$router.push('/library')
}
},
immediate: true
}
}
}
</script>

19
front/src/components/Logo.vue
View File

@ -1,3 +1,13 @@
<script setup lang="ts">
interface Props {
fill?: string
}
withDefaults(defineProps<Props>(), {
fill: '#222222'
})
</script>
<template>
<svg
id="layer_1"
@ -39,12 +49,3 @@
</g>
</svg>
</template>
<script>
export default {
props: {
fill: { type: String, default: '#222222' }
}
}
</script>

24
front/src/components/LogoText.vue
View File

@ -1,3 +1,17 @@
<script setup lang="ts">
interface Props {
primary?: string
secondary?: string
text?: string
}
withDefaults(defineProps<Props>(), {
primary: '#009fe3',
secondary: 'var(--text-color)',
text: 'var(--text-color)'
})
</script>
<template>
<svg
viewBox="0 0 271.66678 53.49133"
@ -36,13 +50,3 @@
</g>
</svg>
</template>
<script>
export default {
props: {
primary: { type: String, default: '#009fe3' },
secondary: { type: String, default: 'var(--text-color)' },
text: { type: String, default: 'var(--text-color)' }
}
}
</script>

29
front/src/components/PageNotFound.vue
View File

@ -1,3 +1,15 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useGettext } from 'vue3-gettext'
const path = window.location.href
const { $pgettext } = useGettext()
const labels = computed(() => ({
title: $pgettext('Head/*/Title', 'Page Not Found')
}))
</script>
<template>
<main
class="main pusher"
@ -33,20 +45,3 @@
</section>
</main>
</template>
<script>
export default {
data: function () {
return {
path: window.location.href
}
},
computed: {
labels () {
return {
title: this.$pgettext('Head/*/Title', 'Page Not Found')
}
}
}
}
</script>

5
front/src/components/ServiceMessages.vue
View File

@ -8,8 +8,3 @@
<slot />
</div>
</template>
<script>
export default {}
</script>

7
front/src/router/routes/index.ts
View File

@ -3,6 +3,7 @@ import settings from './settings'
import library from './library'
import content from './content'
import manage from './manage'
import store from '~/store'
import auth from './auth'
import user from './user'
@ -10,7 +11,11 @@ export default [
{
path: '/',
name: 'index',
component: () => import('~/components/Home.vue')
component: () => import('~/components/Home.vue'),
beforeEnter (to, from, next) {
if (store.state.auth.authenticated) return next('/library')
return next()
}
},
{
path: '/index.html',

11
front/src/store/auth.ts
View File

@ -4,7 +4,7 @@ import { Module } from 'vuex'
import { RootState } from '~/store/index'
import useFormData from '~/composables/useFormData'
export type Permission = 'settings' | 'library' | 'moderation' | 'admin'
export type Permission = 'settings' | 'library' | 'moderation'
export interface State {
authenticated: boolean
username: string
@ -73,8 +73,7 @@ const store: Module<State, RootState> = {
availablePermissions: {
settings: false,
library: false,
moderation: false,
admin: false
moderation: false
},
profile: null,
oauth: getDefaultOauth(),
@ -98,8 +97,7 @@ const store: Module<State, RootState> = {
state.availablePermissions = {
settings: false,
library: false,
moderation: false,
admin: false
moderation: false
}
},
profile: (state, value) => {
@ -115,8 +113,7 @@ const store: Module<State, RootState> = {
state.availablePermissions = {
settings: false,
library: false,
moderation: false,
admin: false
moderation: false
}
}
},

5
front/yarn.lock
View File

@ -1483,6 +1483,11 @@
dependencies:
"@types/node" "*"
"@types/showdown@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@types/showdown/-/showdown-2.0.0.tgz#3e800eca8573848cac4e5555f4377ba3a0e7b1f2"
integrity sha512-70xBJoLv+oXjB5PhtA8vo7erjLDp9/qqI63SRHm4REKrwuPOLs8HhXwlZJBJaB4kC18cCZ1UUZ6Fb/PLFW4TCA==
"@types/sizzle@*":
version "2.3.3"
resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"