Fix composables calling `useI18n` too early

front/src/composables/audio/usePlayOptions.ts

@@ -49,12 +49,12 @@ export default (props: PlayOptionsProps) => {
   const filterableArtist = computed(() => props.track?.artist ?? props.album?.artist ?? props.artist)
   const filterArtist = async () => store.dispatch('moderation/hide', { type: 'artist', target: filterableArtist.value })
 
-  const { t } = useI18n()
   const addMessage = (tracks: Track[]) => {
     if (!tracks.length) {
       return
     }
 
+    const { t } = useI18n()
     store.commit('ui/addMessage', {
       content: t('composables.audio.usePlayOptions.addToQueueMessage', tracks.length),
       date: new Date()

front/src/composables/moderation/useEditConfigs.ts

@@ -20,106 +20,109 @@ export type EditObject = (Partial<Artist> | Partial<Album> | Partial<Track>) & {
 export type EditObjectType = 'artist' | 'album' | 'track'
 type Configs = Record<EditObjectType, { fields: (EditableConfigField|ConfigField)[] }>
 
-const { t } = useI18n()
 const getContentValueRepr = (val: Content) => val.text
 
-const description: ConfigField = {
-  id: 'description',
-  type: 'content',
-  required: true,
-  label: t('composables.moderation.useEditConfigs.description.label'),
-  getValue: (obj) => obj.description ?? { text: '', content_type: 'text/markdown' },
-  getValueRepr: getContentValueRepr
-}
-
-const cover: ConfigField = {
-  id: 'cover',
-  type: 'attachment',
-  required: false,
-  label: t('composables.moderation.useEditConfigs.cover.label'),
-  getValue: (obj) => obj.cover?.uuid ?? null
-}
-
-const tags: ConfigField = {
-  id: 'tags',
-  type: 'tags',
-  required: true,
-  label: t('composables.moderation.useEditConfigs.tags.label'),
-  getValue: (obj) => { return obj.tags },
-  getValueRepr: (tags: string[]) => tags.slice().sort().join('\n')
-}
-
 // TODO: Get params from typescript type somehow?
-export default (): Configs => ({
+export default (): Configs => {
-  artist: {
+  const { t } = useI18n()
-    fields: [
+
-      {
+  const description: ConfigField = {
-        id: 'name',
+    id: 'description',
-        type: 'text',
+    type: 'content',
-        required: true,
+    required: true,
-        label: t('composables.moderation.useEditConfigs.artist.name'),
+    label: t('composables.moderation.useEditConfigs.description.label'),
-        getValue: (artist) => (artist as Artist).name
+    getValue: (obj) => obj.description ?? { text: '', content_type: 'text/markdown' },
-      },
+    getValueRepr: getContentValueRepr
-      description,
-      cover,
-      tags
-    ]
-  },
-  album: {
-    fields: [
-      {
-        id: 'title',
-        type: 'text',
-        required: true,
-        label: t('composables.moderation.useEditConfigs.album.title'),
-        getValue: (album) => (album as Album).title
-      },
-      description,
-      {
-        id: 'release_date',
-        type: 'text',
-        required: false,
-        label: t('composables.moderation.useEditConfigs.album.releaseDate'),
-        getValue: (album) => (album as Album).release_date
-      },
-      cover,
-      tags
-    ]
-  },
-  track: {
-    fields: [
-      {
-        id: 'title',
-        type: 'text',
-        required: true,
-        label: t('composables.moderation.useEditConfigs.track.title'),
-        getValue: (track) => (track as Track).title
-      },
-      description,
-      cover,
-      {
-        id: 'position',
-        type: 'text',
-        inputType: 'number',
-        required: false,
-        label: t('composables.moderation.useEditConfigs.track.position'),
-        getValue: (track) => (track as Track).position
-      },
-      {
-        id: 'copyright',
-        type: 'text',
-        required: false,
-        label: t('composables.moderation.useEditConfigs.track.copyright'),
-        getValue: (track) => (track as Track).copyright
-      },
-      {
-        id: 'license',
-        type: 'license',
-        required: false,
-        label: t('composables.moderation.useEditConfigs.track.license'),
-        getValue: (track) => (track as Track).license
-      },
-      tags
-    ]
   }
-})
+
+  const cover: ConfigField = {
+    id: 'cover',
+    type: 'attachment',
+    required: false,
+    label: t('composables.moderation.useEditConfigs.cover.label'),
+    getValue: (obj) => obj.cover?.uuid ?? null
+  }
+
+  const tags: ConfigField = {
+    id: 'tags',
+    type: 'tags',
+    required: true,
+    label: t('composables.moderation.useEditConfigs.tags.label'),
+    getValue: (obj) => { return obj.tags },
+    getValueRepr: (tags: string[]) => tags.slice().sort().join('\n')
+  }
+
+  return {
+    artist: {
+      fields: [
+        {
+          id: 'name',
+          type: 'text',
+          required: true,
+          label: t('composables.moderation.useEditConfigs.artist.name'),
+          getValue: (artist) => (artist as Artist).name
+        },
+        description,
+        cover,
+        tags
+      ]
+    },
+    album: {
+      fields: [
+        {
+          id: 'title',
+          type: 'text',
+          required: true,
+          label: t('composables.moderation.useEditConfigs.album.title'),
+          getValue: (album) => (album as Album).title
+        },
+        description,
+        {
+          id: 'release_date',
+          type: 'text',
+          required: false,
+          label: t('composables.moderation.useEditConfigs.album.releaseDate'),
+          getValue: (album) => (album as Album).release_date
+        },
+        cover,
+        tags
+      ]
+    },
+    track: {
+      fields: [
+        {
+          id: 'title',
+          type: 'text',
+          required: true,
+          label: t('composables.moderation.useEditConfigs.track.title'),
+          getValue: (track) => (track as Track).title
+        },
+        description,
+        cover,
+        {
+          id: 'position',
+          type: 'text',
+          inputType: 'number',
+          required: false,
+          label: t('composables.moderation.useEditConfigs.track.position'),
+          getValue: (track) => (track as Track).position
+        },
+        {
+          id: 'copyright',
+          type: 'text',
+          required: false,
+          label: t('composables.moderation.useEditConfigs.track.copyright'),
+          getValue: (track) => (track as Track).copyright
+        },
+        {
+          id: 'license',
+          type: 'license',
+          required: false,
+          label: t('composables.moderation.useEditConfigs.track.license'),
+          getValue: (track) => (track as Track).license
+        },
+        tags
+      ]
+    }
+  }
+}

front/src/composables/moderation/useReportConfigs.ts

@@ -22,163 +22,165 @@ export interface Entity {
 
 type Configs = Record<EntityObjectType, Entity>
 
-const { t } = useI18n()
+export default (): Configs => {
+  const { t } = useI18n()
 
-const tags: ModeratedField = {
+  const tags: ModeratedField = {
-  id: 'tags',
+    id: 'tags',
-  label: t('composables.moderation.useReportConfigs.tags.label'),
+    label: t('composables.moderation.useReportConfigs.tags.label'),
-  getValueRepr: (tags: string[]) => tags.slice().sort().join('\n')
+    getValueRepr: (tags: string[]) => tags.slice().sort().join('\n')
-}
-
-const name: ModeratedField = {
-  id: 'name',
-  label: t('composables.moderation.useReportConfigs.name.label')
-}
-
-const creationDate: ModeratedField = {
-  id: 'creation_date',
-  label: t('composables.moderation.useReportConfigs.creationDate.label')
-}
-
-const musicBrainzId: ModeratedField = {
-  id: 'mbid',
-  label: t('composables.moderation.useReportConfigs.musicbrainzId.label')
-}
-
-const visibility: ModeratedField = {
-  id: 'privacy_level',
-  label: t('composables.moderation.useReportConfigs.visibility.label')
-}
-
-export default (): Configs => ({
-  artist: {
-    label: t('composables.moderation.useReportConfigs.artist.label'),
-    icon: 'users',
-    getDeleteUrl: (obj) => {
-      return `manage/library/artists/${obj.id}/`
-    },
-    urls: {
-      getDetail: (obj) => ({ name: 'library.artists.detail', params: { id: obj.id } }),
-      getAdminDetail: (obj) => ({ name: 'manage.library.artists.detail', params: { id: obj.id } })
-    },
-    moderatedFields: [
-      name,
-      creationDate,
-      tags,
-      musicBrainzId
-    ]
-  },
-  album: {
-    label: t('composables.moderation.useReportConfigs.album.label'),
-    icon: 'play',
-    getDeleteUrl: (obj) => {
-      return `manage/library/albums/${obj.id}/`
-    },
-    urls: {
-      getDetail: (obj) => ({ name: 'library.albums.detail', params: { id: obj.id } }),
-      getAdminDetail: (obj) => ({ name: 'manage.library.albums.detail', params: { id: obj.id } })
-    },
-    moderatedFields: [
-      {
-        id: 'title',
-        label: t('composables.moderation.useReportConfigs.album.title')
-      },
-      creationDate,
-      {
-        id: 'release_date',
-        label: t('composables.moderation.useReportConfigs.album.releaseDate')
-      },
-      tags,
-      musicBrainzId
-    ]
-  },
-  track: {
-    label: t('composables.moderation.useReportConfigs.track.label'),
-    icon: 'music',
-    getDeleteUrl: (obj) => {
-      return `manage/library/tracks/${obj.id}/`
-    },
-    urls: {
-      getDetail: (obj) => ({ name: 'library.tracks.detail', params: { id: obj.id } }),
-      getAdminDetail: (obj) => ({ name: 'manage.library.tracks.detail', params: { id: obj.id } })
-    },
-    moderatedFields: [
-      {
-        id: 'title',
-        label: t('composables.moderation.useReportConfigs.track.title')
-      },
-      {
-        id: 'position',
-        label: t('composables.moderation.useReportConfigs.track.position')
-      },
-      {
-        id: 'copyright',
-        label: t('composables.moderation.useReportConfigs.track.copyright')
-      },
-      {
-        id: 'license',
-        label: t('composables.moderation.useReportConfigs.track.license')
-      },
-      tags,
-      musicBrainzId
-    ]
-  },
-  library: {
-    label: t('composables.moderation.useReportConfigs.library.label'),
-    icon: 'book',
-    getDeleteUrl: (obj) => {
-      return `manage/library/libraries/${obj.uuid}/`
-    },
-    urls: {
-      getAdminDetail: (obj) => ({ name: 'manage.library.libraries.detail', params: { id: obj.uuid } })
-    },
-    moderatedFields: [
-      name,
-      {
-        id: 'description',
-        label: t('composables.moderation.useReportConfigs.library.description')
-      },
-      visibility
-    ]
-  },
-  playlist: {
-    label: t('composables.moderation.useReportConfigs.playlist.label'),
-    icon: 'list',
-    urls: {
-      getDetail: (obj) => ({ name: 'library.playlists.detail', params: { id: obj.id } })
-      // getAdminDetail: (obj) => ({name: 'manage.playlists.detail', params: {id: obj.id}}}
-    },
-    moderatedFields: [
-      name,
-      visibility
-    ]
-  },
-  account: {
-    label: t('composables.moderation.useReportConfigs.account.label'),
-    icon: 'user',
-    urls: {
-      getDetail: (obj) => ({ name: 'profile.full.overview', params: { username: obj.preferred_username, domain: obj.domain } }),
-      getAdminDetail: (obj) => ({ name: 'manage.moderation.accounts.detail', params: { id: `${obj.preferred_username}@${obj.domain}` } })
-    },
-    moderatedFields: [
-      name,
-      {
-        id: 'summary',
-        label: t('composables.moderation.useReportConfigs.account.summary')
-      }
-    ]
-  },
-  channel: {
-    label: t('composables.moderation.useReportConfigs.channel.label'),
-    icon: 'stream',
-    urls: {
-      getDetail: (obj) => ({ name: 'channels.detail', params: { id: obj.uuid } }),
-      getAdminDetail: (obj) => ({ name: 'manage.channels.detail', params: { id: obj.uuid } })
-    },
-    moderatedFields: [
-      name,
-      creationDate,
-      tags
-    ]
   }
-})
+
+  const name: ModeratedField = {
+    id: 'name',
+    label: t('composables.moderation.useReportConfigs.name.label')
+  }
+
+  const creationDate: ModeratedField = {
+    id: 'creation_date',
+    label: t('composables.moderation.useReportConfigs.creationDate.label')
+  }
+
+  const musicBrainzId: ModeratedField = {
+    id: 'mbid',
+    label: t('composables.moderation.useReportConfigs.musicbrainzId.label')
+  }
+
+  const visibility: ModeratedField = {
+    id: 'privacy_level',
+    label: t('composables.moderation.useReportConfigs.visibility.label')
+  }
+
+  return {
+    artist: {
+      label: t('composables.moderation.useReportConfigs.artist.label'),
+      icon: 'users',
+      getDeleteUrl: (obj) => {
+        return `manage/library/artists/${obj.id}/`
+      },
+      urls: {
+        getDetail: (obj) => ({ name: 'library.artists.detail', params: { id: obj.id } }),
+        getAdminDetail: (obj) => ({ name: 'manage.library.artists.detail', params: { id: obj.id } })
+      },
+      moderatedFields: [
+        name,
+        creationDate,
+        tags,
+        musicBrainzId
+      ]
+    },
+    album: {
+      label: t('composables.moderation.useReportConfigs.album.label'),
+      icon: 'play',
+      getDeleteUrl: (obj) => {
+        return `manage/library/albums/${obj.id}/`
+      },
+      urls: {
+        getDetail: (obj) => ({ name: 'library.albums.detail', params: { id: obj.id } }),
+        getAdminDetail: (obj) => ({ name: 'manage.library.albums.detail', params: { id: obj.id } })
+      },
+      moderatedFields: [
+        {
+          id: 'title',
+          label: t('composables.moderation.useReportConfigs.album.title')
+        },
+        creationDate,
+        {
+          id: 'release_date',
+          label: t('composables.moderation.useReportConfigs.album.releaseDate')
+        },
+        tags,
+        musicBrainzId
+      ]
+    },
+    track: {
+      label: t('composables.moderation.useReportConfigs.track.label'),
+      icon: 'music',
+      getDeleteUrl: (obj) => {
+        return `manage/library/tracks/${obj.id}/`
+      },
+      urls: {
+        getDetail: (obj) => ({ name: 'library.tracks.detail', params: { id: obj.id } }),
+        getAdminDetail: (obj) => ({ name: 'manage.library.tracks.detail', params: { id: obj.id } })
+      },
+      moderatedFields: [
+        {
+          id: 'title',
+          label: t('composables.moderation.useReportConfigs.track.title')
+        },
+        {
+          id: 'position',
+          label: t('composables.moderation.useReportConfigs.track.position')
+        },
+        {
+          id: 'copyright',
+          label: t('composables.moderation.useReportConfigs.track.copyright')
+        },
+        {
+          id: 'license',
+          label: t('composables.moderation.useReportConfigs.track.license')
+        },
+        tags,
+        musicBrainzId
+      ]
+    },
+    library: {
+      label: t('composables.moderation.useReportConfigs.library.label'),
+      icon: 'book',
+      getDeleteUrl: (obj) => {
+        return `manage/library/libraries/${obj.uuid}/`
+      },
+      urls: {
+        getAdminDetail: (obj) => ({ name: 'manage.library.libraries.detail', params: { id: obj.uuid } })
+      },
+      moderatedFields: [
+        name,
+        {
+          id: 'description',
+          label: t('composables.moderation.useReportConfigs.library.description')
+        },
+        visibility
+      ]
+    },
+    playlist: {
+      label: t('composables.moderation.useReportConfigs.playlist.label'),
+      icon: 'list',
+      urls: {
+        getDetail: (obj) => ({ name: 'library.playlists.detail', params: { id: obj.id } })
+        // getAdminDetail: (obj) => ({name: 'manage.playlists.detail', params: {id: obj.id}}}
+      },
+      moderatedFields: [
+        name,
+        visibility
+      ]
+    },
+    account: {
+      label: t('composables.moderation.useReportConfigs.account.label'),
+      icon: 'user',
+      urls: {
+        getDetail: (obj) => ({ name: 'profile.full.overview', params: { username: obj.preferred_username, domain: obj.domain } }),
+        getAdminDetail: (obj) => ({ name: 'manage.moderation.accounts.detail', params: { id: `${obj.preferred_username}@${obj.domain}` } })
+      },
+      moderatedFields: [
+        name,
+        {
+          id: 'summary',
+          label: t('composables.moderation.useReportConfigs.account.summary')
+        }
+      ]
+    },
+    channel: {
+      label: t('composables.moderation.useReportConfigs.channel.label'),
+      icon: 'stream',
+      urls: {
+        getDetail: (obj) => ({ name: 'channels.detail', params: { id: obj.uuid } }),
+        getAdminDetail: (obj) => ({ name: 'manage.channels.detail', params: { id: obj.uuid } })
+      },
+      moderatedFields: [
+        name,
+        creationDate,
+        tags
+      ]
+    }
+  }
+}