@ledvance/ui-biz-bundle 1.1.67 → 1.1.69

package/src/modules/music/MusicPage.tsx

@@ -1,348 +1,348 @@
-import React, { useCallback, useEffect } from 'react'
-import { StyleSheet, View, Text, Image } from 'react-native'
-import { useRoute, useNavigation } from '@react-navigation/core'
-import Page from '@ledvance/base/src/components/Page'
-import { useDeviceId, useDeviceInfo } from '@ledvance/base/src/models/modules/NativePropsSlice'
-import Strings from '@ledvance/base/src/i18n'
-import Img from './res'
-import { useEnable, useWorkMode, useMixRgbcw, useMixScene, useMusicData, useDreamMusic, DreamLightMicMusicData, getRemoteDreamMusic, DreamLightMicMusicUIState, saveRemoteDreamMusic } from './MusicPageActions'
-import { useReactive, useUpdateEffect } from 'ahooks'
-import { NativeApi } from '@ledvance/base/src/api/native'
-import { AppleMusicDataType, musicDefalutDatasource, musicTabs } from './MusicDataBean'
-import { Dialog, SwitchButton, TabBar, Utils } from 'tuya-panel-kit'
-import * as MusicManager from './MusicManager'
-import { JudgeTimeScheduleProps } from "../timeSchedule/TimeScheduleBean"
-import Spacer from '@ledvance/base/src/components/Spacer'
-import LdvSlider from '@ledvance/base/src/components/ldvSlider'
-import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
-import { SelectPageParams } from '@ledvance/ui-biz-bundle/src/modules/select/SelectPage'
-import { ui_biz_routerKey } from '@ledvance/ui-biz-bundle/src/navigation/Routers'
-import { cloneDeep } from 'lodash'
-const { convertX: cx } = Utils.RatioUtils
-
-export interface MusicPageRouterParams extends JudgeTimeScheduleProps {
-  switch_led: string
-  work_mode: string
-  mix_rgbcw: string
-  mix_light_scene: string
-  music_data: string
-  dreamMusicDp?: string
-}
-
-const MusicPage = () => {
-  const deviceInfo = useDeviceInfo()
-  const deviceId = useDeviceId()
-  const navigation = useNavigation()
-  const props = useRoute().params as MusicPageRouterParams
-  const [workMode, setWorkMode] = useWorkMode(props.work_mode)
-  const [mixLight] = useMixRgbcw(props.mix_rgbcw, props.switch_led)
-  const [, setMixScene] = useMixScene(props.mix_light_scene, props.work_mode)
-  const [, setMusicData] = useMusicData(props.music_data)
-  const [dreamMusic, setDreamMusic] = props.dreamMusicDp ? useDreamMusic(props.dreamMusicDp) : []
-  const [switchLed, setSwitchLed] = useEnable(props.switch_led)
-
-  const state = useReactive({
-    musicEnable: false,
-    musicType: props.dreamMusicDp ? 0 : 1, // 0 设备麦克风, 1 手机麦克风
-    isColourExist: true,
-    isTempExist: true,
-    deviceGenreMode: dreamMusic ? dreamMusic.id : 0,
-    phoneGenreMode: 0,
-    genreMode: 0,
-    currentMusic: cloneDeep(dreamMusic) as DreamLightMicMusicData,
-    musicModeData: [] as DreamLightMicMusicUIState[],
-    musicSelect: 0
-  })
-
-  useEffect(() => {
-    if (props.dreamMusicDp) {
-      getRemoteDreamMusic(deviceId).then(res => {
-        if (res.success) {
-          state.musicModeData = res.data
-        }
-      })
-    }
-  }, [])
-
-  useUpdateEffect(() => {
-    // 设备麦克风
-    if (!state.musicEnable) return
-    if (props.dreamMusicDp && state.musicType === 0) {
-      openMusic()
-    } else {
-      changeMusic(state.phoneGenreMode)
-    }
-  }, [state.deviceGenreMode, state.phoneGenreMode, state.musicModeData])
-
-  useUpdateEffect(() => {
-    if (!state.musicEnable) return
-    if (state.musicType === 0) MusicManager.close()
-    openMusic()
-  }, [state.musicType])
-
-  const updateRemoteDreamMusic = useCallback(() => {
-    const newMusicData = cloneDeep(state.musicModeData).map(music => {
-      return music.id === state.currentMusic.id ? {
-        ...state.currentMusic,
-        title: music.title
-      } : music
-    })
-    setDreamMusic && setDreamMusic({
-      ...state.currentMusic,
-      power: true
-    }, {}).then()
-    saveRemoteDreamMusic(deviceId, newMusicData).then()
-  }, [state.currentMusic, state.musicModeData])
-
-  const openMusic = useCallback(async () => {
-    if (workMode !== 'music') {
-      savePreWorkmode().then()
-    }
-    const extraDp = {}
-    if (!switchLed) extraDp[props.switch_led] = true
-    if (workMode !== 'music') extraDp[props.work_mode] = 'music'
-    if (props.dreamMusicDp && state.musicType === 0) {
-      setDreamMusic && setDreamMusic({
-        ...state.currentMusic,
-        power: true
-      }, extraDp).then()
-    } else {
-      if (workMode !== 'music') await setWorkMode('music')
-      if (!switchLed) setSwitchLed(true)
-      await MusicManager.open(
-        musicDefalutDatasource[state.phoneGenreMode],
-        () => { },
-        (data) => {
-          putMusicDataFn(data, {})
-        },
-        { isColourExist: true, isTempExist: true }
-      )
-    }
-  }, [state.musicType, state.phoneGenreMode, props.dreamMusicDp, state.currentMusic, switchLed, workMode])
-
-  const closeMusic = useCallback(async () => {
-    await MusicManager.close()
-    const res: any = await NativeApi.getJson(deviceId, 'musicPreWorkMode')
-    const workMode = res?.data && JSON.parse(res?.data)?.workMode
-    if (state.musicType === 1) {
-      if (props.isMixRGBWLamp) {
-        const mixRes: any = await NativeApi.getJson(deviceId, 'musicPreMixLight')
-        const getLight = mixRes?.data && JSON.parse(mixRes?.data)?.mixLight
-        await setMixScene({
-          version: 0,
-          id: 0,
-          lamps: [
-            {
-              enable: getLight?.whiteLightSwitch,
-              nodes: [{
-                brightness: getLight?.brightness,
-                changeTime: 0,
-                changeType: 0,
-                colorTemp: getLight?.colorTempPercent,
-                intervalTime: 0,
-                hue: 0,
-                sat: 0,
-                lightness: 0
-              }],
-              type: 2
-            },
-            {
-              enable: getLight?.colorLightSwitch,
-              nodes: [{
-                intervalTime: 0,
-                changeTime: 0,
-                changeType: 0,
-                hue: getLight?.hue,
-                sat: getLight?.sat,
-                lightness: getLight?.lightness,
-                brightness: 0,
-                colorTemp: 0,
-              }],
-              type: 3
-            },
-          ]
-        })
-      }
-    }
-    await setWorkMode(workMode)
-  }, [state.musicType])
-
-  const saveSelect = async (id: string | number) => {
-    await NativeApi.putJson(deviceId, 'musicSelect', JSON.stringify({ type: id, musicType: state.musicType }));
-  }
-
-  const savePreWorkmode = async () => {
-    await NativeApi.putJson(deviceId, 'musicPreWorkMode', JSON.stringify({ workMode }));
-    if (props.isMixRGBWLamp) {
-      await NativeApi.putJson(deviceId, 'musicPreMixLight', JSON.stringify({ mixLight }));
-    }
-  }
-
-  const getSelect = async () => {
-    const res: any = await NativeApi.getJson(deviceId, 'musicSelect')
-    const type = res?.data ? (JSON.parse(res?.data)?.type || 0) : 0
-    state.musicType = res?.data ? JSON.parse(res?.data)?.musicType : props.dreamMusicDp ? 0 : 1
-    state.phoneGenreMode = musicDefalutDatasource[type]?.id
-    state.musicEnable = workMode === 'music' && !!switchLed
-    if (type !== '' && state.musicType === 1 && state.musicEnable) {
-      openMusic()
-    }
-  }
-
-  const changeMusic = async (id: number) => {
-    console.log(id, '< --- id')
-    if (workMode !== 'music') await setWorkMode('music')
-    if (!switchLed) setSwitchLed(true)
-    await saveSelect(id)
-    await MusicManager.close()
-    await MusicManager.open(
-      musicDefalutDatasource[id],
-      (_: AppleMusicDataType) => {
-      },
-      (data) => {
-        putMusicDataFn(data, {})
-      },
-      { isColourExist: true, isTempExist: true }
-    )
-  }
-
-  const putMusicDataFn = (data: any, extraDp = {}) => {
-    console.log(data, '< --- data')
-    setMusicData(data, extraDp).then()
-  }
-
-  useEffect(() => {
-    getSelect().then()
-  }, [])
-
-  const getSelectModeData = useCallback((): [string | undefined, any[]] => {
-    const genreModeData = props.dreamMusicDp && state.musicType === 0 ? state.musicModeData : musicDefalutDatasource
-    const genreMode = props.dreamMusicDp && state.musicType === 0 ? state.deviceGenreMode : state.phoneGenreMode
-    const title = genreModeData.find(mode => mode.id === genreMode)?.title
-    const selectModeData = genreModeData.map(music => {
-      return {
-        text: music.title,
-        selected: music.id === genreMode,
-        value: music.id,
-      }
-    })
-    return [title, selectModeData]
-  }, [state.deviceGenreMode, state.phoneGenreMode, state.musicModeData, state.musicType, props.dreamMusicDp])
-
-  return (
-    <Page
-      backText={deviceInfo.name}
-      headlineText={Strings.getLang('devicemusic_headline_text')}
-    >
-      <View style={styles.content}>
-        <SwitchButton
-          style={styles.headSwitch}
-          value={state.musicEnable}
-          thumbStyle={{ elevation: 0 }}
-          onValueChange={async v => {
-            if (!switchLed && v) {
-              Dialog.confirm({
-                title: Strings.getLang('feature_activate_dialog_text'),
-                subTitle: Strings.getLang('music_reactivate_dialog_text'),
-                cancelText: Strings.getLang('cancel_dialog_delete_item_sleepschedule_answer_no_text'),
-                confirmText: Strings.getLang('cancel_dialog_delete_item_sleepschedule_answer_yes_text'),
-                onConfirm: async (_, { close }) => {
-                  close()
-                  state.musicEnable = v
-                  await openMusic()
-                },
-              })
-            } else {
-              state.musicEnable = v
-              if (v) {
-                await openMusic()
-              } else {
-                await closeMusic()
-              }
-            }
-          }} />
-        {props.dreamMusicDp && <TabBar
-          type='radio'
-          tabs={musicTabs}
-          style={{ borderRadius: cx(8), backgroundColor: '#f6f6f6', height: cx(36) }}
-          tabTextStyle={{ color: '#000' }}
-          tabActiveTextStyle={{ color: '#000', fontWeight: 'bold' }}
-          activeKey={state.musicType}
-          onChange={async (v) => {
-            state.musicType = Number(v)
-            await saveSelect(state.phoneGenreMode)
-          }}
-        />}
-        <Spacer />
-        <Text style={styles.tiptext}>{Strings.getLang(state.musicType === 0 ? 'devicemusic_devicemic_description_text' : 'devicemusic_description_text')}</Text>
-        <View style={{ alignItems: 'center', marginVertical: cx(38) }}>
-          <Image
-            style={{ width: cx(200), height: cx(204) }}
-            source={state.musicEnable ? Img.app_music_center_on : Img.app_music_center_off}
-            resizeMode="contain"
-          />
-        </View>
-        {
-          state.musicEnable &&
-          <>
-            {props.dreamMusicDp && state.musicType === 0 &&
-              <LdvSlider
-                title={Strings.getLang('devicemusic_switch_tab_device_sensitivity')}
-                value={state.currentMusic?.sensitivity || 50}
-                min={1}
-                max={100}
-                onValueChange={() => { }}
-                onSlidingComplete={(v: number) => {
-                  if (state.currentMusic) {
-                    state.currentMusic.sensitivity = v
-                    updateRemoteDreamMusic()
-                  }
-                }}
-                subTitleStr={''} />
-            }
-            <TextFieldStyleButton
-              text={getSelectModeData()[0] || Strings.getLang('devicemusic_music_text')}
-              placeholder={Strings.getLang('devicemusic_subheadline_text')}
-              onPress={() => {
-                const paramsSelect: SelectPageParams<number> = {
-                  title: Strings.getLang('devicemusic_subheadline_text'),
-                  data: getSelectModeData()[1],
-                  onSelect: selectPageData => {
-                    if (props.dreamMusicDp && state.musicType === 0) {
-                      state.deviceGenreMode = selectPageData.value
-                      state.currentMusic = state.musicModeData.find(music => music.id === selectPageData.value) as DreamLightMicMusicData
-                    } else {
-                      state.phoneGenreMode = selectPageData.value
-                    }
-                  },
-                }
-                navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
-              }}
-            />
-          </>
-        }
-      </View>
-    </Page>
-  )
-}
-
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    marginHorizontal: cx(18)
-  },
-  headSwitch: {
-    position: 'absolute',
-    right: 0,
-    top: - cx(40),
-    zIndex: 2,
-    marginBottom: cx(24)
-  },
-  tiptext: {
-    color: '#000',
-    fontSize: cx(14),
-    lineHeight: cx(14),
-  }
-})
-
+import React, { useCallback, useEffect } from 'react'
+import { StyleSheet, View, Text, Image } from 'react-native'
+import { useRoute, useNavigation } from '@react-navigation/core'
+import Page from '@ledvance/base/src/components/Page'
+import { useDeviceId, useDeviceInfo } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import Strings from '@ledvance/base/src/i18n'
+import Img from './res'
+import { useEnable, useWorkMode, useMixRgbcw, useMixScene, useMusicData, useDreamMusic, DreamLightMicMusicData, getRemoteDreamMusic, DreamLightMicMusicUIState, saveRemoteDreamMusic } from './MusicPageActions'
+import { useReactive, useUpdateEffect } from 'ahooks'
+import { NativeApi } from '@ledvance/base/src/api/native'
+import { AppleMusicDataType, musicDefalutDatasource, musicTabs } from './MusicDataBean'
+import { Dialog, SwitchButton, TabBar, Utils } from 'tuya-panel-kit'
+import * as MusicManager from './MusicManager'
+import { JudgeTimeScheduleProps } from "../timeSchedule/TimeScheduleBean"
+import Spacer from '@ledvance/base/src/components/Spacer'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton'
+import { SelectPageParams } from '@ledvance/ui-biz-bundle/src/modules/select/SelectPage'
+import { ui_biz_routerKey } from '@ledvance/ui-biz-bundle/src/navigation/Routers'
+import { cloneDeep } from 'lodash'
+const { convertX: cx } = Utils.RatioUtils
+
+export interface MusicPageRouterParams extends JudgeTimeScheduleProps {
+  switch_led: string
+  work_mode: string
+  mix_rgbcw: string
+  mix_light_scene: string
+  music_data: string
+  dreamMusicDp?: string
+}
+
+const MusicPage = () => {
+  const deviceInfo = useDeviceInfo()
+  const deviceId = useDeviceId()
+  const navigation = useNavigation()
+  const props = useRoute().params as MusicPageRouterParams
+  const [workMode, setWorkMode] = useWorkMode(props.work_mode)
+  const [mixLight] = useMixRgbcw(props.mix_rgbcw, props.switch_led)
+  const [, setMixScene] = useMixScene(props.mix_light_scene, props.work_mode)
+  const [, setMusicData] = useMusicData(props.music_data)
+  const [dreamMusic, setDreamMusic] = props.dreamMusicDp ? useDreamMusic(props.dreamMusicDp) : []
+  const [switchLed, setSwitchLed] = useEnable(props.switch_led)
+
+  const state = useReactive({
+    musicEnable: false,
+    musicType: props.dreamMusicDp ? 0 : 1, // 0 设备麦克风, 1 手机麦克风
+    isColourExist: true,
+    isTempExist: true,
+    deviceGenreMode: dreamMusic ? dreamMusic.id : 0,
+    phoneGenreMode: 0,
+    genreMode: 0,
+    currentMusic: cloneDeep(dreamMusic) as DreamLightMicMusicData,
+    musicModeData: [] as DreamLightMicMusicUIState[],
+    musicSelect: 0
+  })
+
+  useEffect(() => {
+    if (props.dreamMusicDp) {
+      getRemoteDreamMusic(deviceId).then(res => {
+        if (res.success) {
+          state.musicModeData = res.data
+        }
+      })
+    }
+  }, [])
+
+  useUpdateEffect(() => {
+    // 设备麦克风
+    if (!state.musicEnable) return
+    if (props.dreamMusicDp && state.musicType === 0) {
+      openMusic()
+    } else {
+      changeMusic(state.phoneGenreMode)
+    }
+  }, [state.deviceGenreMode, state.phoneGenreMode, state.musicModeData])
+
+  useUpdateEffect(() => {
+    if (!state.musicEnable) return
+    if (state.musicType === 0) MusicManager.close()
+    openMusic()
+  }, [state.musicType])
+
+  const updateRemoteDreamMusic = useCallback(() => {
+    const newMusicData = cloneDeep(state.musicModeData).map(music => {
+      return music.id === state.currentMusic.id ? {
+        ...state.currentMusic,
+        title: music.title
+      } : music
+    })
+    setDreamMusic && setDreamMusic({
+      ...state.currentMusic,
+      power: true
+    }, {}).then()
+    saveRemoteDreamMusic(deviceId, newMusicData).then()
+  }, [state.currentMusic, state.musicModeData])
+
+  const openMusic = useCallback(async () => {
+    if (workMode !== 'music') {
+      savePreWorkmode().then()
+    }
+    const extraDp = {}
+    if (!switchLed) extraDp[props.switch_led] = true
+    if (workMode !== 'music') extraDp[props.work_mode] = 'music'
+    if (props.dreamMusicDp && state.musicType === 0) {
+      setDreamMusic && setDreamMusic({
+        ...state.currentMusic,
+        power: true
+      }, extraDp).then()
+    } else {
+      if (workMode !== 'music') await setWorkMode('music')
+      if (!switchLed) setSwitchLed(true)
+      await MusicManager.open(
+        musicDefalutDatasource[state.phoneGenreMode],
+        () => { },
+        (data) => {
+          putMusicDataFn(data, {})
+        },
+        { isColourExist: true, isTempExist: true }
+      )
+    }
+  }, [state.musicType, state.phoneGenreMode, props.dreamMusicDp, state.currentMusic, switchLed, workMode])
+
+  const closeMusic = useCallback(async () => {
+    await MusicManager.close()
+    const res: any = await NativeApi.getJson(deviceId, 'musicPreWorkMode')
+    const workMode = res?.data && JSON.parse(res?.data)?.workMode
+    if (state.musicType === 1) {
+      if (props.isMixRGBWLamp) {
+        const mixRes: any = await NativeApi.getJson(deviceId, 'musicPreMixLight')
+        const getLight = mixRes?.data && JSON.parse(mixRes?.data)?.mixLight
+        await setMixScene({
+          version: 0,
+          id: 0,
+          lamps: [
+            {
+              enable: getLight?.whiteLightSwitch,
+              nodes: [{
+                brightness: getLight?.brightness,
+                changeTime: 0,
+                changeType: 0,
+                colorTemp: getLight?.colorTempPercent,
+                intervalTime: 0,
+                hue: 0,
+                sat: 0,
+                lightness: 0
+              }],
+              type: 2
+            },
+            {
+              enable: getLight?.colorLightSwitch,
+              nodes: [{
+                intervalTime: 0,
+                changeTime: 0,
+                changeType: 0,
+                hue: getLight?.hue,
+                sat: getLight?.sat,
+                lightness: getLight?.lightness,
+                brightness: 0,
+                colorTemp: 0,
+              }],
+              type: 3
+            },
+          ]
+        })
+      }
+    }
+    await setWorkMode(workMode)
+  }, [state.musicType])
+
+  const saveSelect = async (id: string | number) => {
+    await NativeApi.putJson(deviceId, 'musicSelect', JSON.stringify({ type: id, musicType: state.musicType }));
+  }
+
+  const savePreWorkmode = async () => {
+    await NativeApi.putJson(deviceId, 'musicPreWorkMode', JSON.stringify({ workMode }));
+    if (props.isMixRGBWLamp) {
+      await NativeApi.putJson(deviceId, 'musicPreMixLight', JSON.stringify({ mixLight }));
+    }
+  }
+
+  const getSelect = async () => {
+    const res: any = await NativeApi.getJson(deviceId, 'musicSelect')
+    const type = res?.data ? (JSON.parse(res?.data)?.type || 0) : 0
+    state.musicType = res?.data ? JSON.parse(res?.data)?.musicType : props.dreamMusicDp ? 0 : 1
+    state.phoneGenreMode = musicDefalutDatasource[type]?.id
+    state.musicEnable = workMode === 'music' && !!switchLed
+    if (type !== '' && state.musicType === 1 && state.musicEnable) {
+      openMusic()
+    }
+  }
+
+  const changeMusic = async (id: number) => {
+    console.log(id, '< --- id')
+    if (workMode !== 'music') await setWorkMode('music')
+    if (!switchLed) setSwitchLed(true)
+    await saveSelect(id)
+    await MusicManager.close()
+    await MusicManager.open(
+      musicDefalutDatasource[id],
+      (_: AppleMusicDataType) => {
+      },
+      (data) => {
+        putMusicDataFn(data, {})
+      },
+      { isColourExist: true, isTempExist: true }
+    )
+  }
+
+  const putMusicDataFn = (data: any, extraDp = {}) => {
+    console.log(data, '< --- data')
+    setMusicData(data, extraDp).then()
+  }
+
+  useEffect(() => {
+    getSelect().then()
+  }, [])
+
+  const getSelectModeData = useCallback((): [string | undefined, any[]] => {
+    const genreModeData = props.dreamMusicDp && state.musicType === 0 ? state.musicModeData : musicDefalutDatasource
+    const genreMode = props.dreamMusicDp && state.musicType === 0 ? state.deviceGenreMode : state.phoneGenreMode
+    const title = genreModeData.find(mode => mode.id === genreMode)?.title
+    const selectModeData = genreModeData.map(music => {
+      return {
+        text: music.title,
+        selected: music.id === genreMode,
+        value: music.id,
+      }
+    })
+    return [title, selectModeData]
+  }, [state.deviceGenreMode, state.phoneGenreMode, state.musicModeData, state.musicType, props.dreamMusicDp])
+
+  return (
+    <Page
+      backText={deviceInfo.name}
+      headlineText={Strings.getLang('devicemusic_headline_text')}
+    >
+      <View style={styles.content}>
+        <SwitchButton
+          style={styles.headSwitch}
+          value={state.musicEnable}
+          thumbStyle={{ elevation: 0 }}
+          onValueChange={async v => {
+            if (!switchLed && v) {
+              Dialog.confirm({
+                title: Strings.getLang('feature_activate_dialog_text'),
+                subTitle: Strings.getLang('music_reactivate_dialog_text'),
+                cancelText: Strings.getLang('cancel_dialog_delete_item_sleepschedule_answer_no_text'),
+                confirmText: Strings.getLang('cancel_dialog_delete_item_sleepschedule_answer_yes_text'),
+                onConfirm: async (_, { close }) => {
+                  close()
+                  state.musicEnable = v
+                  await openMusic()
+                },
+              })
+            } else {
+              state.musicEnable = v
+              if (v) {
+                await openMusic()
+              } else {
+                await closeMusic()
+              }
+            }
+          }} />
+        {props.dreamMusicDp && <TabBar
+          type='radio'
+          tabs={musicTabs}
+          style={{ borderRadius: cx(8), backgroundColor: '#f6f6f6', height: cx(36) }}
+          tabTextStyle={{ color: '#000' }}
+          tabActiveTextStyle={{ color: '#000', fontWeight: 'bold' }}
+          activeKey={state.musicType}
+          onChange={async (v) => {
+            state.musicType = Number(v)
+            await saveSelect(state.phoneGenreMode)
+          }}
+        />}
+        <Spacer />
+        <Text style={styles.tiptext}>{Strings.getLang(state.musicType === 0 ? 'devicemusic_devicemic_description_text' : 'devicemusic_description_text')}</Text>
+        <View style={{ alignItems: 'center', marginVertical: cx(38) }}>
+          <Image
+            style={{ width: cx(200), height: cx(204) }}
+            source={state.musicEnable ? Img.app_music_center_on : Img.app_music_center_off}
+            resizeMode="contain"
+          />
+        </View>
+        {
+          state.musicEnable &&
+          <>
+            {props.dreamMusicDp && state.musicType === 0 &&
+              <LdvSlider
+                title={Strings.getLang('devicemusic_switch_tab_device_sensitivity')}
+                value={state.currentMusic?.sensitivity || 50}
+                min={1}
+                max={100}
+                onValueChange={() => { }}
+                onSlidingComplete={(v: number) => {
+                  if (state.currentMusic) {
+                    state.currentMusic.sensitivity = v
+                    updateRemoteDreamMusic()
+                  }
+                }}
+                subTitleStr={''} />
+            }
+            <TextFieldStyleButton
+              text={getSelectModeData()[0] || Strings.getLang('devicemusic_music_text')}
+              placeholder={Strings.getLang('devicemusic_subheadline_text')}
+              onPress={() => {
+                const paramsSelect: SelectPageParams<number> = {
+                  title: Strings.getLang('devicemusic_subheadline_text'),
+                  data: getSelectModeData()[1],
+                  onSelect: selectPageData => {
+                    if (props.dreamMusicDp && state.musicType === 0) {
+                      state.deviceGenreMode = selectPageData.value
+                      state.currentMusic = state.musicModeData.find(music => music.id === selectPageData.value) as DreamLightMicMusicData
+                    } else {
+                      state.phoneGenreMode = selectPageData.value
+                    }
+                  },
+                }
+                navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
+              }}
+            />
+          </>
+        }
+      </View>
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flex: 1,
+    marginHorizontal: cx(18)
+  },
+  headSwitch: {
+    position: 'absolute',
+    right: 0,
+    top: - cx(40),
+    zIndex: 2,
+    marginBottom: cx(24)
+  },
+  tiptext: {
+    color: '#000',
+    fontSize: cx(14),
+    lineHeight: cx(14),
+  }
+})
+
 export default MusicPage