Localization support (#99)

* basic i18n poc * translate home, filters, tabs support dot notation in backend for namespaces * i18n context menu, artist filters, list controls also nothings here fix backend not caching fallback * i18n queue, artist view, search/results * i18n settings and server view * Added translation using Weblate (Norwegian Bokmål) * Translated using Weblate (Norwegian Bokmål) Currently translated at 100.0% (6 of 6 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/nb_NO/ * Update translation files Updated by "Cleanup translation files" hook in Weblate. Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/ * Update translation files Updated by "Cleanup translation files" hook in Weblate. Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/ * Update translation files Updated by "Cleanup translation files" hook in Weblate. Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/ * fix url escaping * added some mostly naive text overflow fixes rewrote filter context menu as a slide in because the old one apparently can't handle dynamic width * Added translation using Weblate (French) * Translated using Weblate (French) Currently translated at 17.4% (11 of 63 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * Translated using Weblate (French) Currently translated at 19.0% (12 of 63 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * Translated using Weblate (French) Currently translated at 40.0% (26 of 65 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * add weblate and some pretty badges to readme * fix link * Translated using Weblate (French) Currently translated at 50.7% (33 of 65 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * Translated using Weblate (English) Currently translated at 100.0% (65 of 65 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/en/ * Translated using Weblate (French) Currently translated at 90.7% (59 of 65 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * i18n now playing context type fix overscroll on new filter menu fix getting default namespace from the i18n backend * Translated using Weblate (French) Currently translated at 96.9% (63 of 65 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * Translated using Weblate (French) Currently translated at 100.0% (66 of 66 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/fr/ * Translated using Weblate (Japanese) (#98) Currently translated at 7.5% (5 of 66 strings) Translation: Subtracks/subtracks Translate-URL: https://hosted.weblate.org/projects/subtracks/subtracks/ja/ Co-authored-by: Austin Riedhammer <austinried@functionkey.xyz> * little note to remind me why that's there * update licenses Co-authored-by: Allan Nordhøy <epost@anotheragency.no> Co-authored-by: Hosted Weblate <hosted@weblate.org> Co-authored-by: Clyhtsuriva <aimeric@adjutor.xyz>
2026-02-10 15:02:42 +01:00 · 2022-04-15 12:11:00 +09:00
parent 4905f75564
commit 860a4cec16
35 changed files with 1186 additions and 316 deletions
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -16,7 +16,13 @@ const Button: React.FC<{
      onPress={onPress}
      disabled={disabled}
      style={[styles.container, buttonStyle !== undefined ? styles[buttonStyle] : {}, style]}>
-      {title ? <Text style={styles.text}>{title}</Text> : children}
+      {title ? (
+        <Text style={styles.text} numberOfLines={2} adjustsFontSizeToFit={true}>
+          {title}
+        </Text>
+      ) : (
+        children
+      )}
    </PressableOpacity>
  )
 }
@@ -26,6 +32,7 @@ const styles = StyleSheet.create({
    backgroundColor: colors.accent,
    paddingHorizontal: 10,
    minHeight: 42,
+    maxHeight: 42,
    justifyContent: 'center',
    borderRadius: 1000,
  },
@@ -43,6 +50,7 @@ const styles = StyleSheet.create({
    fontFamily: font.bold,
    color: colors.text.primary,
    paddingHorizontal: 14,
+    textAlign: 'center',
  },
 })

--- a/app/components/ContextMenu.tsx
+++ b/app/components/ContextMenu.tsx
@@ -6,12 +6,14 @@ import font from '@app/styles/font'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { ReactComponentLike } from 'prop-types'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { ScrollView, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { Menu, MenuOption, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu'
 import IconFA from 'react-native-vector-icons/FontAwesome'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 import CoverArt from './CoverArt'
 import { Star } from './Star'
+import { withSuspenseMemo } from './withSuspense'

 const { SlideInMenu } = renderers

@@ -106,7 +108,9 @@ const ContextMenuIconTextOption = React.memo<ContextMenuIconTextOptionProps>(
    return (
      <ContextMenuOption onSelect={onSelect}>
        <View style={styles.icon}>{Icon}</View>
-        <Text style={styles.optionText}>{text}</Text>
+        <Text style={styles.optionText} numberOfLines={1} adjustsFontSizeToFit={true} minimumFontScale={0.6}>
+          {text}
+        </Text>
      </ContextMenuOption>
    )
  },
@@ -154,27 +158,30 @@ const MenuHeader = React.memo<{
  </View>
 ))

-const OptionStar = React.memo<{
+const OptionStar = withSuspenseMemo<{
  id: string
  type: StarrableItemType
  additionalText?: string
 }>(({ id, type, additionalText: text }) => {
  const { query, toggle } = useStar(id, type)
+  const { t } = useTranslation('context.actions')

  return (
    <ContextMenuIconTextOption
      IconComponentRaw={<Star starred={!!query.data} size={26} />}
-      text={(query.data ? 'Unstar' : 'Star') + (text ? ` ${text}` : '')}
+      text={(query.data ? t('unstar') : t('star')) + (text ? ` ${text}` : '')}
      onSelect={() => toggle.mutate()}
    />
  )
 })

-const OptionViewArtist = React.memo<{
+const OptionViewArtist = withSuspenseMemo<{
  navigation: NavigationProp<any>
  artist?: string
  artistId?: string
 }>(({ navigation, artist, artistId }) => {
+  const { t } = useTranslation('resources.artist.actions')
+
  if (!artist || !artistId) {
    return <></>
  }
@@ -184,17 +191,19 @@ const OptionViewArtist = React.memo<{
      IconComponent={IconFA}
      name="microphone"
      size={26}
-      text="View Artist"
+      text={t('view')}
      onSelect={() => navigation.navigate('artist', { id: artistId, title: artist })}
    />
  )
 })

-const OptionViewAlbum = React.memo<{
+const OptionViewAlbum = withSuspenseMemo<{
  navigation: NavigationProp<any>
  album?: string
  albumId?: string
 }>(({ navigation, album, albumId }) => {
+  const { t } = useTranslation('resources.album.actions')
+
  if (!album || !albumId) {
    return <></>
  }
@@ -204,7 +213,7 @@ const OptionViewAlbum = React.memo<{
      IconComponent={IconFA5}
      name="compact-disc"
      size={26}
-      text="View Album"
+      text={t('view')}
      onSelect={() => navigation.navigate('album', { id: albumId, title: album })}
    />
  )
@@ -318,6 +327,8 @@ const styles = StyleSheet.create({
  },
  optionsWrapper: {
    // marginBottom: 10,
+    paddingHorizontal: 20,
+    // backgroundColor: 'purple',
  },
  menuHeader: {
    paddingTop: 14,
@@ -348,9 +359,11 @@ const styles = StyleSheet.create({
  },
  option: {
    paddingVertical: 8,
-    paddingHorizontal: 20,
+    // paddingHorizontal: 100,
    flexDirection: 'row',
    alignItems: 'center',
+    // backgroundColor: 'blue',
+    overflow: 'hidden',
  },
  icon: {
    marginRight: 10,
--- a/app/components/FilterButton.tsx
+++ b/app/components/FilterButton.tsx
@@ -1,10 +1,13 @@
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import React from 'react'
-import { Text, StyleSheet } from 'react-native'
-import { MenuOption, Menu, MenuTrigger, MenuOptions } from 'react-native-popup-menu'
+import { Text, StyleSheet, View } from 'react-native'
+import { MenuOption, Menu, MenuTrigger, MenuOptions, renderers } from 'react-native-popup-menu'
 import PressableOpacity from './PressableOpacity'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { ScrollView } from 'react-native-gesture-handler'
+
+const { SlideInMenu } = renderers

 export type OptionData = {
  value: string
@@ -17,12 +20,14 @@ const Option = React.memo<{
  selected?: boolean
 }>(({ text, value, selected }) => (
  <MenuOption style={styles.option} value={value}>
-    <Text style={styles.optionText}>{text}</Text>
    {selected ? (
-      <Icon name="checkbox-marked-circle" size={26} color={colors.accent} />
+      <Icon name="checkbox-marked-circle" size={32} color={colors.accent} style={styles.icon} />
    ) : (
-      <Icon name="checkbox-blank-circle-outline" size={26} color={colors.text.secondary} />
+      <Icon name="checkbox-blank-circle-outline" size={32} color={colors.text.secondary} style={styles.icon} />
    )}
+    <Text style={styles.optionText} numberOfLines={1} adjustsFontSizeToFit={true} minimumFontScale={0.6}>
+      {text}
+    </Text>
  </MenuOption>
 ))

@@ -30,9 +35,10 @@ const FilterButton = React.memo<{
  value?: string
  data: OptionData[]
  onSelect?: (selection: string) => void
-}>(({ value, data, onSelect }) => {
+  title: string
+}>(({ value, data, onSelect, title }) => {
  return (
-    <Menu onSelect={onSelect}>
+    <Menu onSelect={onSelect} renderer={SlideInMenu}>
      <MenuTrigger
        customStyles={{
          triggerOuterWrapper: styles.filterOuterWrapper,
@@ -40,16 +46,23 @@ const FilterButton = React.memo<{
          triggerTouchable: { style: styles.filter },
          TriggerTouchableComponent: PressableOpacity,
        }}>
-        <Icon name="filter-variant" color="white" size={30} style={styles.filterIcon} />
+        <Icon name="filter-variant" color="white" size={30} />
      </MenuTrigger>
      <MenuOptions
        customStyles={{
          optionsWrapper: styles.optionsWrapper,
          optionsContainer: styles.optionsContainer,
        }}>
-        {data.map(o => (
-          <Option key={o.value} text={o.text} value={o.value} selected={o.value === value} />
-        ))}
+        <ScrollView style={styles.optionsScroll} overScrollMode="never">
+          <View style={styles.header}>
+            <Text style={styles.headerText} numberOfLines={2} ellipsizeMode="clip">
+              {title}
+            </Text>
+          </View>
+          {data.map(o => (
+            <Option key={o.value} text={o.text} value={o.value} selected={o.value === value} />
+          ))}
+        </ScrollView>
      </MenuOptions>
    </Menu>
  )
@@ -71,28 +84,45 @@ const styles = StyleSheet.create({
    alignItems: 'center',
    backgroundColor: colors.accent,
  },
-  filterIcon: {
-    // top: 4,
+  optionsScroll: {
+    maxHeight: 260,
  },
  optionsWrapper: {
-    maxWidth: 145,
+    overflow: 'hidden',
  },
  optionsContainer: {
-    backgroundColor: colors.gradient.high,
-    maxWidth: 145,
+    backgroundColor: 'rgba(45, 45, 45, 0.95)',
+  },
+  header: {
+    paddingHorizontal: 20,
+    // paddingVertical: 10,
+    marginTop: 16,
+    marginBottom: 6,
+  },
+  headerText: {
+    fontFamily: font.bold,
+    fontSize: 20,
+    color: colors.text.primary,
  },
  option: {
-    flexDirection: 'row',
-    paddingHorizontal: 12,
    paddingVertical: 8,
-    justifyContent: 'center',
+    paddingHorizontal: 20,
+    flexDirection: 'row',
    alignItems: 'center',
+    justifyContent: 'flex-start',
  },
  optionText: {
-    color: colors.text.primary,
    fontFamily: font.semiBold,
    fontSize: 16,
-    flex: 1,
+    color: colors.text.primary,
+  },
+  icon: {
+    marginRight: 14,
+    width: 32,
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // backgroundColor: 'red',
  },
 })

--- a/app/components/ListPlayerControls.tsx
+++ b/app/components/ListPlayerControls.tsx
@@ -2,19 +2,22 @@ import Button from '@app/components/Button'
 import { Song } from '@app/models/library'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import Icon from 'react-native-vector-icons/Ionicons'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
+import { withSuspenseMemo } from './withSuspense'

-const ListPlayerControls = React.memo<{
+const ListPlayerControls = withSuspenseMemo<{
  songs: Song[]
-  typeName: string
+  listType: 'album' | 'playlist'
  style?: StyleProp<ViewStyle>
  play: () => void
  shuffle: () => void
  disabled?: boolean
-}>(({ typeName, style, play, shuffle, disabled }) => {
+}>(({ listType, style, play, shuffle, disabled }) => {
  const [downloaded, setDownloaded] = useState(false)
+  const { t } = useTranslation('resources')

  return (
    <View style={[styles.controls, style]}>
@@ -31,7 +34,7 @@ const ListPlayerControls = React.memo<{
        </Button>
      </View>
      <View style={styles.controlsCenter}>
-        <Button title={`Play ${typeName}`} disabled={disabled} onPress={play} />
+        <Button title={t(`${listType}.actions.play`)} disabled={disabled} onPress={play} />
      </View>
      <View style={styles.controlsSide}>
        <Button disabled={disabled} onPress={shuffle}>
@@ -55,6 +58,7 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
+    maxWidth: '65%',
  },
 })

--- a/app/components/NothingHere.tsx
+++ b/app/components/NothingHere.tsx
@@ -1,20 +1,25 @@
 import font from '@app/styles/font'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import { Text, View, StyleSheet, ViewStyle } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { withSuspenseMemo } from './withSuspense'

-const NothingHere = React.memo<{
+const NothingHere = withSuspenseMemo<{
  height?: number
  width?: number
  style?: ViewStyle
 }>(({ height, width, style }) => {
+  const { t } = useTranslation('messages')
  height = height || 200
  width = width || 200

  return (
    <View style={[styles.container, { height, width }, style]}>
      <Icon name="music-rest-quarter" color={styles.text.color} size={width / 2} />
-      <Text style={[styles.text, { fontSize: width / 8 }]}>Nothing here...</Text>
+      <Text style={[styles.text, { fontSize: width / 8 }]} numberOfLines={3}>
+        {t('nothingHere')}
+      </Text>
    </View>
  )
 })
--- a/app/components/withSuspense.tsx
+++ b/app/components/withSuspense.tsx
@@ -0,0 +1,32 @@
+import React, { ComponentType, FunctionComponent, Suspense, SuspenseProps } from 'react'
+
+export function withSuspense<P extends string | number | object>(
+  WrappedComponent: ComponentType<P>,
+  fallback: SuspenseProps['fallback'] = null,
+): FunctionComponent<P> {
+  function ComponentWithSuspense(props: P) {
+    return (
+      <Suspense fallback={fallback}>
+        <WrappedComponent {...props} />
+      </Suspense>
+    )
+  }
+
+  return ComponentWithSuspense
+}
+
+export function withSuspenseMemo<P extends string | number | object>(
+  WrappedComponent: ComponentType<P>,
+  fallback: SuspenseProps['fallback'] = null,
+  propsAreEqual?: Parameters<typeof React.memo>['1'],
+) {
+  function ComponentWithSuspense(props: P) {
+    return (
+      <Suspense fallback={fallback}>
+        <WrappedComponent {...props} />
+      </Suspense>
+    )
+  }
+
+  return React.memo(ComponentWithSuspense, propsAreEqual)
+}