impl more settings state

app/components/SettingsItem.tsx

@@ -4,11 +4,13 @@ import React from 'react'
 import { StyleSheet, View, Text } from 'react-native'
 import PressableOpacity from './PressableOpacity'
 
-const SettingsItem: React.FC<{
+export type SettingsItemProps = {
   title: string
   subtitle?: string
   onPress?: () => void
-}> = ({ title, subtitle, onPress, children }) => {
+}
+
+const SettingsItem: React.FC<SettingsItemProps> = ({ title, subtitle, onPress, children }) => {
   return (
     <View style={styles.item}>
       <PressableOpacity style={styles.itemText} onPress={onPress}>
@@ -22,13 +24,13 @@ const SettingsItem: React.FC<{
 
 const styles = StyleSheet.create({
   item: {
-    height: 60,
     marginBottom: 10,
     alignItems: 'stretch',
     flexDirection: 'row',
   },
   itemText: {
     flex: 1,
+    paddingVertical: 10,
     alignSelf: 'stretch',
     alignItems: 'flex-start',
   },

app/components/SettingsSwitch.tsx

@@ -0,0 +1,36 @@
+import colors from '@app/styles/colors'
+import React from 'react'
+import { Switch, StyleSheet } from 'react-native'
+import SettingsItem, { SettingsItemProps } from './SettingsItem'
+
+export type SettingsSwitchProps = SettingsItemProps & {
+  value: boolean
+  setValue: (value: boolean) => void
+}
+
+const SettingsSwitch = React.memo<SettingsSwitchProps>(props => {
+  const { value, setValue } = props
+
+  return (
+    <SettingsItem onPress={() => setValue(!value)} {...props}>
+      <Switch
+        style={styles.switch}
+        trackColor={{
+          false: colors.accentLow,
+          true: colors.accent,
+        }}
+        thumbColor={colors.text.primary}
+        value={value}
+        onValueChange={setValue}
+      />
+    </SettingsItem>
+  )
+})
+
+const styles = StyleSheet.create({
+  switch: {
+    marginLeft: 20,
+  },
+})
+
+export default SettingsSwitch

app/models/settings.ts

@@ -4,7 +4,6 @@ export interface Server {
   username: string
   token: string
   salt: string
-  scrobble: boolean
 }
 
 export interface AppSettings {
@@ -13,4 +12,8 @@ export interface AppSettings {
     lists: string[]
   }
   activeServer?: string
+  scrobble: boolean
+  estimateContentLength: boolean
+  maxBitrateWifi: number
+  maxBitrateMobile: number
 }

app/screens/ServerView.tsx

@@ -1,6 +1,5 @@
 import Button from '@app/components/Button'
 import GradientScrollView from '@app/components/GradientScrollView'
-import SettingsItem from '@app/components/SettingsItem'
 import { Server } from '@app/models/settings'
 import { selectSettings } from '@app/state/settings'
 import { useStore } from '@app/state/store'
@@ -10,7 +9,6 @@ import { useNavigation } from '@react-navigation/native'
 import md5 from 'md5'
 import React, { useCallback, useState } from 'react'
 import { StyleSheet, Text, TextInput, View } from 'react-native'
-import { Switch } from 'react-native-gesture-handler'
 import { v4 as uuidv4 } from 'uuid'
 
 function replaceIndex<T>(array: T[], index: number, replacement: T): T[] {
@@ -32,7 +30,6 @@ const ServerView: React.FC<{
   const [address, setAddress] = useState(server?.address || '')
   const [username, setUsername] = useState(server?.username || '')
   const [password, setPassword] = useState(server?.token ? 'password' : '')
-  const [scrobble, setScrobble] = useState(server?.scrobble || false)
 
   const validate = useCallback(() => {
     return !!address && !!username && !!password
@@ -69,7 +66,6 @@ const ServerView: React.FC<{
       username,
       salt,
       token,
-      scrobble,
     }
 
     if (server) {
@@ -89,20 +85,7 @@ const ServerView: React.FC<{
     }
 
     exit()
-  }, [
+  }, [activeServer, address, exit, id, password, server, servers, setActiveServer, setServers, username, validate])
-    activeServer,
-    address,
-    exit,
-    id,
-    password,
-    scrobble,
-    server,
-    servers,
-    setActiveServer,
-    setServers,
-    username,
-    validate,
-  ])
 
   const remove = useCallback(() => {
     if (!canRemove()) {
@@ -155,19 +138,6 @@ const ServerView: React.FC<{
           value={password}
           onChangeText={setPassword}
         />
-        <SettingsItem
-          title="Scrobble plays"
-          subtitle={scrobble ? 'Scrobble play history' : "Don't scrobble play history"}>
-          <Switch
-            trackColor={{
-              false: colors.accentLow,
-              true: colors.accent,
-            }}
-            thumbColor={colors.text.primary}
-            value={scrobble}
-            onValueChange={setScrobble}
-          />
-        </SettingsItem>
         <Button
           disabled={!validate()}
           style={styles.button}

app/screens/Settings.tsx

@@ -3,14 +3,17 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import PressableOpacity from '@app/components/PressableOpacity'
 import SettingsItem from '@app/components/SettingsItem'
+import SettingsSwitch from '@app/components/SettingsSwitch'
 import { useSwitchActiveServer } from '@app/hooks/server'
 import { Server } from '@app/models/settings'
 import { selectSettings } from '@app/state/settings'
 import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
+import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/core'
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
-import { StatusBar, StyleSheet, View } from 'react-native'
+import { Modal, Pressable, StatusBar, StyleSheet, Text, View } from 'react-native'
+import { ScrollView } from 'react-native-gesture-handler'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const ServerItem = React.memo<{
@@ -40,8 +43,105 @@ const ServerItem = React.memo<{
   )
 })
 
+const ModalChoice = React.memo<{
+  text: string
+  value: any
+  setValue: (value: any) => void
+  current: boolean
+  closeModal?: () => void
+}>(({ text, value, setValue, current, closeModal }) => {
+  const onPress = useCallback(() => {
+    setValue(value)
+    if (closeModal) {
+      closeModal()
+    }
+  }, [closeModal, setValue, value])
+
+  return (
+    <PressableOpacity onPress={onPress} style={styles.modalChoice}>
+      <View style={styles.modalRadio}>
+        {current ? (
+          <Icon name="checkbox-marked-circle" size={30} color={colors.accent} />
+        ) : (
+          <Icon name="checkbox-blank-circle-outline" size={30} color={colors.text.secondary} />
+        )}
+      </View>
+      <Text style={styles.modalChoiceText}>{text}</Text>
+    </PressableOpacity>
+  )
+})
+
+function bitrateString(bitrate: number): string {
+  return bitrate === 0 ? 'Unlimited' : `${bitrate}kbps`
+}
+
+const BitrateModal = React.memo<{
+  title: string
+  bitrate: number
+  setBitrate: (bitrate: number) => void
+}>(({ title, bitrate, setBitrate }) => {
+  const [visible, setVisible] = useState(false)
+
+  const toggleModal = useCallback(() => setVisible(!visible), [visible])
+
+  const BitrateChoice: React.FC<{ value: number }> = useCallback(
+    ({ value }) => {
+      const text = bitrateString(value)
+      return (
+        <ModalChoice
+          text={text}
+          value={value}
+          setValue={setBitrate}
+          closeModal={toggleModal}
+          current={bitrate === value}
+        />
+      )
+    },
+    [bitrate, toggleModal, setBitrate],
+  )
+
+  return (
+    <>
+      <SettingsItem title={title} subtitle={bitrateString(bitrate)} onPress={toggleModal} />
+      <Modal animationType="fade" transparent={true} visible={visible} onRequestClose={toggleModal}>
+        <Pressable style={{ flex: 1 }} onPress={toggleModal}>
+          <View style={styles.centeredView}>
+            <Pressable style={styles.modalView}>
+              <Header style={styles.modalHeader}>{title}</Header>
+              <ScrollView style={styles.modalScroll}>
+                <BitrateChoice value={24} />
+                <BitrateChoice value={32} />
+                <BitrateChoice value={48} />
+                <BitrateChoice value={64} />
+                <BitrateChoice value={96} />
+                <BitrateChoice value={128} />
+                <BitrateChoice value={160} />
+                <BitrateChoice value={192} />
+                <BitrateChoice value={256} />
+                <BitrateChoice value={320} />
+                <BitrateChoice value={0} />
+              </ScrollView>
+            </Pressable>
+          </View>
+        </Pressable>
+      </Modal>
+    </>
+  )
+})
+
 const SettingsContent = React.memo(() => {
   const servers = useStore(selectSettings.servers)
+  const scrobble = useStore(selectSettings.scrobble)
+  const setScrobble = useStore(selectSettings.setScrobble)
+  const estimateContentLength = useStore(selectSettings.estimateContentLength)
+  const setEstimateContentLength = useStore(selectSettings.setEstimateContentLength)
+
+  const maxBitrateWifi = useStore(selectSettings.maxBitrateWifi)
+  const setMaxBitrateWifi = useStore(selectSettings.setMaxBitrateWifi)
+
+  const maxBitrateMobile = useStore(selectSettings.maxBitrateMobile)
+  const setMaxBitrateMobile = useStore(selectSettings.setMaxBitrateMobile)
+
   const navigation = useNavigation()
 
   return (
@@ -57,9 +157,23 @@ const SettingsContent = React.memo(() => {
         buttonStyle="hollow"
       />
       <Header style={styles.header}>Network</Header>
-      <SettingsItem title="Max bitrate (Wi-Fi)" subtitle="Unlimited" />
+      <BitrateModal title="Max bitrate (Wi-Fi)" bitrate={maxBitrateWifi} setBitrate={setMaxBitrateWifi} />
-      <SettingsItem title="Max bitrate (mobile)" subtitle="192kbps" />
+      <BitrateModal title="Max bitrate (mobile)" bitrate={maxBitrateMobile} setBitrate={setMaxBitrateMobile} />
+      <SettingsSwitch
+        title="Estimate content length"
+        subtitle='Send the "estimateContentLength" flag when streaming. Helps fix issues with seeking when the server is transcoding songs.'
+        value={estimateContentLength}
+        setValue={setEstimateContentLength}
+      />
+      <Header style={styles.header}>Music</Header>
+      <SettingsSwitch
+        title="Scrobble plays"
+        subtitle={scrobble ? 'Scrobble play history' : "Don't scrobble play history"}
+        value={scrobble}
+        setValue={setScrobble}
+      />
       <Header style={styles.header}>Reset</Header>
+      <Button style={styles.button} title="Clear image cache" onPress={() => {}} buttonStyle="hollow" />
       <Button style={styles.button} title="Reset everything to default" onPress={() => {}} buttonStyle="hollow" />
     </View>
   )
@@ -82,6 +196,7 @@ const styles = StyleSheet.create({
   },
   content: {
     paddingHorizontal: 20,
+    paddingBottom: 40,
   },
   text: {
     color: 'white',
@@ -93,7 +208,42 @@ const styles = StyleSheet.create({
     marginTop: 26,
   },
   button: {
-    marginVertical: 10,
+    marginTop: 16,
+  },
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalView: {
+    backgroundColor: colors.gradient.high,
+    elevation: 5,
+  },
+  modalChoice: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    paddingRight: 15,
+    flexDirection: 'row',
+    flex: 1,
+  },
+  modalChoiceText: {
+    fontFamily: font.regular,
+    fontSize: 18,
+    color: colors.text.primary,
+    textAlign: 'left',
+    flex: 1,
+  },
+  modalRadio: {
+    height: 30,
+    width: 30,
+    marginRight: 20,
+  },
+  modalHeader: {
+    marginVertical: 20,
+    marginHorizontal: 30,
+  },
+  modalScroll: {
+    maxHeight: 475,
   },
 })
 

app/state/settings.ts

@@ -23,9 +23,38 @@ async function mkdir(path: string): Promise<void> {
 export type SettingsSlice = {
   settings: AppSettings
   client?: SubsonicApiClient
+
   setActiveServer: (id: string | undefined, force?: boolean) => Promise<void>
   getActiveServer: () => Server | undefined
   setServers: (servers: Server[]) => void
+
+  setScrobble: (scrobble: boolean) => void
+  setEstimateContentLength: (estimateContentLength: boolean) => void
+  setMaxBitrateWifi: (maxBitrateWifi: number) => void
+  setMaxBitrateMobile: (maxBitrateMobile: number) => void
+}
+
+export const selectSettings = {
+  client: (state: SettingsSlice) => state.client,
+
+  activeServer: (state: SettingsSlice) => state.settings.servers.find(s => s.id === state.settings.activeServer),
+  setActiveServer: (state: SettingsSlice) => state.setActiveServer,
+
+  servers: (state: SettingsSlice) => state.settings.servers,
+  setServers: (state: SettingsSlice) => state.setServers,
+
+  homeLists: (state: SettingsSlice) => state.settings.home.lists,
+
+  scrobble: (state: SettingsSlice) => state.settings.scrobble,
+  setScrobble: (state: SettingsSlice) => state.setScrobble,
+
+  estimateContentLength: (state: SettingsSlice) => state.settings.estimateContentLength,
+  setEstimateContentLength: (state: SettingsSlice) => state.setEstimateContentLength,
+
+  maxBitrateWifi: (state: SettingsSlice) => state.settings.maxBitrateWifi,
+  setMaxBitrateWifi: (state: SettingsSlice) => state.setMaxBitrateWifi,
+  maxBitrateMobile: (state: SettingsSlice) => state.settings.maxBitrateMobile,
+  setMaxBitrateMobile: (state: SettingsSlice) => state.setMaxBitrateMobile,
 }
 
 export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>): SettingsSlice => ({
@@ -34,7 +63,12 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
     home: {
       lists: ['recent', 'random', 'frequent', 'starred'],
     },
+    scrobble: false,
+    estimateContentLength: true,
+    maxBitrateWifi: 0,
+    maxBitrateMobile: 192,
   },
+
   setActiveServer: async (id, force) => {
     const servers = get().settings.servers
     const currentActiveServerId = get().settings.activeServer
@@ -83,7 +117,9 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
       }),
     )
   },
+
   getActiveServer: () => get().settings.servers.find(s => s.id === get().settings.activeServer),
+
   setServers: servers => {
     set(
       produce<SettingsSlice>(state => {
@@ -93,13 +129,36 @@ export const createSettingsSlice = (set: SetState<Store>, get: GetState<Store>):
     const activeServer = servers.find(s => s.id === get().settings.activeServer)
     get().setActiveServer(activeServer?.id)
   },
-})
 
-export const selectSettings = {
+  setScrobble: scrobble => {
-  client: (state: SettingsSlice) => state.client,
+    set(
-  activeServer: (state: SettingsSlice) => state.settings.servers.find(s => s.id === state.settings.activeServer),
+      produce<SettingsSlice>(state => {
-  setActiveServer: (state: SettingsSlice) => state.setActiveServer,
+        state.settings.scrobble = scrobble
-  servers: (state: SettingsSlice) => state.settings.servers,
+      }),
-  setServers: (state: SettingsSlice) => state.setServers,
+    )
-  homeLists: (state: SettingsSlice) => state.settings.home.lists,
+  },
-}
+
+  setEstimateContentLength: estimateContentLength => {
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.estimateContentLength = estimateContentLength
+      }),
+    )
+  },
+
+  setMaxBitrateWifi: maxBitrateWifi => {
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.maxBitrateWifi = maxBitrateWifi
+      }),
+    )
+  },
+
+  setMaxBitrateMobile: maxBitrateMobile => {
+    set(
+      produce<SettingsSlice>(state => {
+        state.settings.maxBitrateMobile = maxBitrateMobile
+      }),
+    )
+  },
+})

app/state/trackplayer.ts

@@ -132,7 +132,7 @@ export const createTrackPlayerSlice = (set: SetState<Store>, get: GetState<Store
       return
     }
 
-    if (!get().getActiveServer()?.scrobble) {
+    if (!get().settings.scrobble) {
       return
     }