@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/newModules/lightMode/LightModePage.tsx

@@ -1,204 +1,204 @@
-import React, { PropsWithChildren } from 'react'
-import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, ViewProps } from 'react-native'
-import Page from '@ledvance/base/src/components/Page'
-import {useDeviceInfo, useDp} from '@ledvance/base/src/models/modules/NativePropsSlice'
-import I18n from '@ledvance/base/src/i18n'
-import { Utils } from 'tuya-panel-kit'
-import Spacer from '@ledvance/base/src/components/Spacer'
-import Card from '@ledvance/base/src/components/Card'
-import res from '@ledvance/base/src/res'
-import { useReactive, useUpdateEffect } from 'ahooks'
-import { useParams } from '@ledvance/base/src/hooks/Hooks'
-import {Result} from "@ledvance/base/src/models/modules/Result";
-
-const { convertX: cx } = Utils.RatioUtils
-
-const LIGHT_MODE_RELAY = 'relay'
-const LIGHT_MODE_POS = 'pos'
-const LIGHT_MODE_OFF = 'off'
-const LIGHT_MODE_ON = 'on'
-
-export interface LightModePageParams {
-  lightModeCode: string
-}
-
-type LightMode = 'relay' | 'pos' | 'off' | 'on'
-
-export const useLightMode = (code: string): [LightMode, (v: LightMode) => Promise<Result<any>>] => {
-  return useDp(code)
-}
-
-const LightModePage = () => {
-  const params = useParams<LightModePageParams>()
-  const deviceInfo = useDeviceInfo()
-  const [lightMode, setLightMode] = useLightMode(params.lightModeCode)
-
-  const state = useReactive({
-    lightMode: lightMode,
-    loading: false,
-  })
-
-  useUpdateEffect(() => {
-    state.lightMode = lightMode
-  }, [lightMode])
-
-  return (
-    <Page
-      backText={deviceInfo.name}
-      headlineText={I18n.getLang('matterplug_LED')}
-      loading={state.loading}>
-      <ScrollView style={styles.root} nestedScrollEnabled={true}>
-        <Text style={styles.desc}>
-          {I18n.getLang('matterplug_description')}
-        </Text>
-        <Spacer />
-        <View style={styles.modeSelectGroup}>
-          <Spacer height={cx(8)} />
-          <Text style={styles.modeTip}>
-            {I18n.getLang('matterplug_heading')}
-          </Text>
-          <Spacer height={cx(8)} />
-          <Card style={styles.modeSelectCard}>
-            <Spacer height={cx(12)} />
-            <LightModeItem
-              enable={state.lightMode === LIGHT_MODE_RELAY}
-              title={I18n.getLang('matterplug_option1title')}
-              content={I18n.getLang('matterplug_option1description')}
-              onPress={async () => {
-                state.lightMode = LIGHT_MODE_RELAY
-                await setLightMode(state.lightMode)
-              }} />
-            <View style={styles.line} />
-            <Spacer height={cx(8)} />
-            <LightModeItem
-              enable={state.lightMode === LIGHT_MODE_POS}
-              title={I18n.getLang('matterplug_option2title')}
-              content={I18n.getLang('matterplug_option2description')}
-              onPress={async () => {
-                state.lightMode = LIGHT_MODE_POS
-                await setLightMode(state.lightMode)
-              }} />
-            <View style={styles.line} />
-            <Spacer height={cx(8)} />
-            <LightModeItem
-              enable={state.lightMode === LIGHT_MODE_OFF}
-              title={I18n.getLang('matterplug_option3title')}
-              content={I18n.getLang('matterplug_option3description')}
-              onPress={async () => {
-                state.lightMode = LIGHT_MODE_OFF
-                await setLightMode(state.lightMode)
-              }} />
-            <Spacer height={cx(8)} />
-            <View style={styles.line} />
-            <LightModeItem
-              enable={state.lightMode === LIGHT_MODE_ON}
-              title={I18n.getLang('matterplug_option4title')}
-              content={I18n.getLang('matterplug_option4description')}
-              onPress={async () => {
-                state.lightMode = LIGHT_MODE_ON
-                await setLightMode(state.lightMode)
-              }} />
-            <Spacer height={cx(4)} />
-          </Card>
-          <Spacer height={cx(8)} />
-        </View>
-      </ScrollView>
-    </Page>
-  )
-}
-
-interface LightModeItemProps extends PropsWithChildren<ViewProps> {
-  onPress: () => void
-  title: string
-  content: string
-  enable: boolean
-}
-
-function LightModeItem(props: LightModeItemProps) {
-  return (
-    <TouchableOpacity onPress={props.onPress}>
-      <View style={styles.itemRoot}>
-        <View style={styles.itemTextGroup}>
-          <Text style={styles.itemTitle}>{props.title}</Text>
-          <Spacer height={cx(4)} />
-          <Text style={styles.itemContent}>{props.content}</Text>
-        </View>
-        <Image
-          source={{ uri: res.ic_check }}
-          style={[
-            styles.itemCheckedIcon,
-            {
-              display: props.enable ? 'flex' : 'none',
-            },
-          ]} />
-      </View>
-    </TouchableOpacity>
-  )
-}
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-  desc: {
-    marginHorizontal: cx(24),
-    color: '#000',
-    fontSize: cx(14),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  tipText: {
-    marginHorizontal: cx(24),
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  modeSelectGroup: {
-    marginHorizontal: cx(24),
-    backgroundColor: '#f6f6f6',
-    borderRadius: cx(4),
-  },
-  modeTip: {
-    marginHorizontal: cx(8),
-    color: '#000',
-    fontSize: cx(14),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  modeSelectCard: {
-    marginHorizontal: cx(8),
-  },
-  line: {
-    height: cx(1),
-    marginHorizontal: cx(12),
-    backgroundColor: '#3C3C435B',
-  },
-  itemRoot: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: cx(12),
-    paddingBottom: cx(8),
-  },
-  itemTextGroup: {
-    flex: 1,
-    marginEnd: cx(12),
-    justifyContent: 'center',
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  itemContent: {
-    color: '#666',
-    fontSize: cx(14),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  itemCheckedIcon: {
-    width: cx(32),
-    height: cx(32),
-    marginEnd: cx(4),
-  },
-})
-
-export default LightModePage
+import React, { PropsWithChildren } from 'react'
+import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, ViewProps } from 'react-native'
+import Page from '@ledvance/base/src/components/Page'
+import {useDeviceInfo, useDp} from '@ledvance/base/src/models/modules/NativePropsSlice'
+import I18n from '@ledvance/base/src/i18n'
+import { Utils } from 'tuya-panel-kit'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import Card from '@ledvance/base/src/components/Card'
+import res from '@ledvance/base/src/res'
+import { useReactive, useUpdateEffect } from 'ahooks'
+import { useParams } from '@ledvance/base/src/hooks/Hooks'
+import {Result} from "@ledvance/base/src/models/modules/Result";
+
+const { convertX: cx } = Utils.RatioUtils
+
+const LIGHT_MODE_RELAY = 'relay'
+const LIGHT_MODE_POS = 'pos'
+const LIGHT_MODE_OFF = 'off'
+const LIGHT_MODE_ON = 'on'
+
+export interface LightModePageParams {
+  lightModeCode: string
+}
+
+type LightMode = 'relay' | 'pos' | 'off' | 'on'
+
+export const useLightMode = (code: string): [LightMode, (v: LightMode) => Promise<Result<any>>] => {
+  return useDp(code)
+}
+
+const LightModePage = () => {
+  const params = useParams<LightModePageParams>()
+  const deviceInfo = useDeviceInfo()
+  const [lightMode, setLightMode] = useLightMode(params.lightModeCode)
+
+  const state = useReactive({
+    lightMode: lightMode,
+    loading: false,
+  })
+
+  useUpdateEffect(() => {
+    state.lightMode = lightMode
+  }, [lightMode])
+
+  return (
+    <Page
+      backText={deviceInfo.name}
+      headlineText={I18n.getLang('matterplug_LED')}
+      loading={state.loading}>
+      <ScrollView style={styles.root} nestedScrollEnabled={true}>
+        <Text style={styles.desc}>
+          {I18n.getLang('matterplug_description')}
+        </Text>
+        <Spacer />
+        <View style={styles.modeSelectGroup}>
+          <Spacer height={cx(8)} />
+          <Text style={styles.modeTip}>
+            {I18n.getLang('matterplug_heading')}
+          </Text>
+          <Spacer height={cx(8)} />
+          <Card style={styles.modeSelectCard}>
+            <Spacer height={cx(12)} />
+            <LightModeItem
+              enable={state.lightMode === LIGHT_MODE_RELAY}
+              title={I18n.getLang('matterplug_option1title')}
+              content={I18n.getLang('matterplug_option1description')}
+              onPress={async () => {
+                state.lightMode = LIGHT_MODE_RELAY
+                await setLightMode(state.lightMode)
+              }} />
+            <View style={styles.line} />
+            <Spacer height={cx(8)} />
+            <LightModeItem
+              enable={state.lightMode === LIGHT_MODE_POS}
+              title={I18n.getLang('matterplug_option2title')}
+              content={I18n.getLang('matterplug_option2description')}
+              onPress={async () => {
+                state.lightMode = LIGHT_MODE_POS
+                await setLightMode(state.lightMode)
+              }} />
+            <View style={styles.line} />
+            <Spacer height={cx(8)} />
+            <LightModeItem
+              enable={state.lightMode === LIGHT_MODE_OFF}
+              title={I18n.getLang('matterplug_option3title')}
+              content={I18n.getLang('matterplug_option3description')}
+              onPress={async () => {
+                state.lightMode = LIGHT_MODE_OFF
+                await setLightMode(state.lightMode)
+              }} />
+            <Spacer height={cx(8)} />
+            <View style={styles.line} />
+            <LightModeItem
+              enable={state.lightMode === LIGHT_MODE_ON}
+              title={I18n.getLang('matterplug_option4title')}
+              content={I18n.getLang('matterplug_option4description')}
+              onPress={async () => {
+                state.lightMode = LIGHT_MODE_ON
+                await setLightMode(state.lightMode)
+              }} />
+            <Spacer height={cx(4)} />
+          </Card>
+          <Spacer height={cx(8)} />
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+
+interface LightModeItemProps extends PropsWithChildren<ViewProps> {
+  onPress: () => void
+  title: string
+  content: string
+  enable: boolean
+}
+
+function LightModeItem(props: LightModeItemProps) {
+  return (
+    <TouchableOpacity onPress={props.onPress}>
+      <View style={styles.itemRoot}>
+        <View style={styles.itemTextGroup}>
+          <Text style={styles.itemTitle}>{props.title}</Text>
+          <Spacer height={cx(4)} />
+          <Text style={styles.itemContent}>{props.content}</Text>
+        </View>
+        <Image
+          source={{ uri: res.ic_check }}
+          style={[
+            styles.itemCheckedIcon,
+            {
+              display: props.enable ? 'flex' : 'none',
+            },
+          ]} />
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  desc: {
+    marginHorizontal: cx(24),
+    color: '#000',
+    fontSize: cx(14),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  tipText: {
+    marginHorizontal: cx(24),
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+  modeSelectGroup: {
+    marginHorizontal: cx(24),
+    backgroundColor: '#f6f6f6',
+    borderRadius: cx(4),
+  },
+  modeTip: {
+    marginHorizontal: cx(8),
+    color: '#000',
+    fontSize: cx(14),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  modeSelectCard: {
+    marginHorizontal: cx(8),
+  },
+  line: {
+    height: cx(1),
+    marginHorizontal: cx(12),
+    backgroundColor: '#3C3C435B',
+  },
+  itemRoot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: cx(12),
+    paddingBottom: cx(8),
+  },
+  itemTextGroup: {
+    flex: 1,
+    marginEnd: cx(12),
+    justifyContent: 'center',
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+  itemContent: {
+    color: '#666',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+  itemCheckedIcon: {
+    width: cx(32),
+    height: cx(32),
+    marginEnd: cx(4),
+  },
+})
+
+export default LightModePage

package/src/newModules/lightMode/Router.ts

@@ -1,16 +1,16 @@
-import {NavigationRoute} from "tuya-panel-kit";
-import LightModePage from "./LightModePage";
-import {ui_biz_routerKey} from "../../navigation/Routers";
-
-const LightModePageRouters: NavigationRoute[] = [
-  {
-    name: ui_biz_routerKey.ui_biz_light_mode,
-    component: LightModePage,
-    options:{
-      hideTopbar: true,
-      showOfflineView: false,
-    }
-  }
-]
-
-export default LightModePageRouters
+import {NavigationRoute} from "tuya-panel-kit";
+import LightModePage from "./LightModePage";
+import {ui_biz_routerKey} from "../../navigation/Routers";
+
+const LightModePageRouters: NavigationRoute[] = [
+  {
+    name: ui_biz_routerKey.ui_biz_light_mode,
+    component: LightModePage,
+    options:{
+      hideTopbar: true,
+      showOfflineView: false,
+    }
+  }
+]
+
+export default LightModePageRouters

package/src/newModules/mood/Interface.ts

@@ -148,6 +148,11 @@ export interface StripLightMoodMode {
   };
 }
 
+export const CeilingLightSceneMode: StripLightMoodMode = {
+  '1': { title: I18n.getLang('strip_lights_modes_flash_text'), mode: 1 },
+  '2': { title: I18n.getLang('strip_lights_modes_breath_text'), mode: 2 },
+}
+
 export const lightMoodMode = {
   '1': { title: I18n.getLang('other_lights_modes_jump_text'), mode: 1 },
   '2': { title: I18n.getLang('other_lights_modes_gradient_text'), mode: 2 },

package/src/newModules/mood/MixDynamicMoodEditor.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import { Utils } from 'tuya-panel-kit';
 import { useReactive } from 'ahooks';
-import { cloneDeep, find, isEqual } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 import Page from '@ledvance/base/src/components/Page';
 import Strings from '@ledvance/base/src/i18n';
 import { StaticMoodEditorPageParams, StaticMoodEditorPageState } from './StaticMoodEditorPage';
@@ -28,6 +28,7 @@ import {
   stripLightMoodMode,
   lightMoodMode,
   StripLightMoodMode,
+  CeilingLightSceneMode
 } from './Interface';
 import TextFieldStyleButton from '@ledvance/base/src/components/TextFieldStyleButton';
 import {ui_biz_routerKey} from '../../navigation/Routers'
@@ -47,6 +48,7 @@ interface MixDynamicMoodEditorPageState extends StaticMoodEditorPageState {
   mainNodeIdx: number;
   secondaryIdx: number;
   sceneMode: StripLightMoodMode;
+  mainSceneMode: any
 }
 const MixDynamicMoodEditorPage = () => {
   const navigation = useNavigation();
@@ -65,6 +67,7 @@ const MixDynamicMoodEditorPage = () => {
     secondaryBucketSelected: false,
     loading: false,
     sceneMode: moduleParams.isCeilingLight ? stripLightMoodMode : lightMoodMode,
+    mainSceneMode: moduleParams.isCeilingLight ? CeilingLightSceneMode : lightMoodMode
   });
   useEffect(() => {
     state.headline = Strings.getLang(
@@ -223,16 +226,16 @@ const MixDynamicMoodEditorPage = () => {
               }}
               showSwitch={!!moduleParams.isMixLight}
             />
-            {(!moduleParams.isMixLight || state.mood.mainLamp.enable) && (
+            {state.mood.mainLamp.enable && (
               <>
                 <TextFieldStyleButton
                   style={styles.transitionMode}
-                  text={lightMoodMode[state.mood.mainLamp.mode]?.title}
+                  text={state.mainSceneMode[state.mood.mainLamp.mode]?.title}
                   placeholder={I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline')}
                   onPress={() => {
                     const paramsSelect: SelectPageParams<number> = {
                       title: I18n.getLang('add_new_dynamic_mood_color_changing_mode_headline'),
-                      data: createSelectModeData(state.mood.mainLamp.mode, lightMoodMode),
+                      data: createSelectModeData(state.mood.mainLamp.mode, state.mainSceneMode),
                       onSelect: selectPageData => {
                         state.mood.mainLamp.mode = selectPageData.value;
                       },
@@ -417,7 +420,7 @@ const MixDynamicMoodEditorPage = () => {
               }}
               showSwitch={!!moduleParams.isMixLight}
             />
-            {(!moduleParams.isMixLight || state.mood.secondaryLamp.enable) && (
+            {state.mood.secondaryLamp.enable && (
               <>
                 <TextFieldStyleButton
                   style={styles.transitionMode}

package/src/newModules/mood/MoodActions.ts

@@ -32,6 +32,10 @@ export const useWorkMode = (dp: string): [WorkMode, (value: WorkMode) => Promise
   return useDp(dp);
 };
 
+export const useSwitchLed = (dp: string): [boolean, (value: boolean) => Promise<Result<any>>] => {
+  return useDp(dp);
+};
+
 export const setRemoteMoodList = async (
   devId: string,
   isFeature: boolean,
@@ -73,7 +77,7 @@ const getMoodDp = (moodInfo: MoodUIInfo, option: LightCategory) => {
 
 const remoteMoodInfo2MoodUIState = (
   remoteMoodInfo,
-  index: number,
+  _: number,
   option: DefMoodOption
 ): MoodUIInfo => {
   const moodInfo = option.isMixLight
@@ -96,7 +100,6 @@ export const getRemoteMoodList = async (
     const moodFeatureId = option.isMixLight ? MixLightSceneListFeatureId : SceneFeatureId;
     // await setRemoteMoodList(devId, isFeature, getDefMoodList(option), moodFeatureId);
     const res = await getFeature(devId, moodFeatureId);
-    console.log(res, '< --- res=====')
     if (!res.result) {
       return { success: false };
     }
@@ -121,6 +124,8 @@ export const getRemoteMoodList = async (
     };
   } else {
     const moodFeatureId = option.isCeilingLight ? SceneFeatureId : featureId;
+    // const defaultScene = getDefMoodList(option);
+    // await setRemoteMoodList(devId, isFeature, defaultScene, moodFeatureId);
     const res = await NativeApi.getJson(devId, moodFeatureId);
     const isNormalData = Array.isArray(parseJSON(res?.data));
     if (res.success && isNormalData) {
@@ -152,7 +157,8 @@ export const getRemoteMoodList = async (
 export const useMoodScene = (params: MoodPageParams): [MoodInfo, (moodInfo: MoodUIInfo) => Promise<Result<any>>] => {
   const [dps, setDps] = useDps();
   const main = dps[params.mainDp];
-  const secondary = params.secondaryDp ? dps[params.secondaryDp] : '';
+  const secondaryWorkMode = params.secondaryWorkMode ? dps[params.secondaryWorkMode] : ''
+  const secondary = params.secondaryDp && secondaryWorkMode === WorkMode.Scene ? dps[params.secondaryDp] : '';
   const [moodState, setMoodState] = useState(getMoodInfo(main, params, secondary));
 
   useUpdateEffect(() => {
@@ -160,30 +166,36 @@ export const useMoodScene = (params: MoodPageParams): [MoodInfo, (moodInfo: Mood
   }, [main, secondary]);
 
   const setMoodFn = (moodInfo: MoodUIInfo) => {
-    const beforeDps = {}
-    const afterDps = {}
+    const mainDps = {}
+    const secondaryDps = {}
     if (moodInfo) {
       const { mainLamp, secondaryLamp } = moodInfo
       if (mainLamp?.nodes?.length) {
         const mainHex = getMoodDp(params.isCeilingLight ? {...moodInfo, id: mainLamp.id!} : moodInfo, params);
-        beforeDps[params.mainDp] = mainHex
-        afterDps[params.mainWorkMode] = WorkMode.Scene;
-        afterDps[params.mainSwitch] = true;
+        mainDps[params.mainDp] = mainHex
+        mainDps[params.mainWorkMode] = WorkMode.Scene;
+        mainDps[params.mainSwitch] = true;
       }
-      if (params.isCeilingLight && secondaryLamp.nodes?.length && params.secondaryDp) {
-        const secondaryHex = stripObj2Dp({
-          ...moodInfo,
-          mainLamp: moodInfo.secondaryLamp,
-          id: secondaryLamp.id!
-        });
-        beforeDps[params.secondaryDp] = secondaryHex
-        afterDps[params.secondaryWorkMode!] = WorkMode.Scene
-        afterDps[params.secondarySwitch!] = true
+      if (params.isCeilingLight && params.secondaryDp) {
+        if (secondaryLamp.nodes?.length){
+          const secondaryHex = stripObj2Dp({
+            ...moodInfo,
+            mainLamp: secondaryLamp,
+            id: secondaryLamp.id!,
+            version: 1
+          });
+          console.log(secondaryHex, secondaryLamp, 'hexxxxx')
+          secondaryDps[params.secondaryDp] = secondaryHex
+          secondaryDps[params.secondaryWorkMode!] = WorkMode.Scene
+          secondaryDps[params.secondarySwitch!] = true
+        }else{
+          secondaryDps[params.secondaryWorkMode!] = WorkMode.Colour
+        }
+        setDps(secondaryDps).then()
       }
-      afterDps[params.switchLedDp] = true 
+      mainLamp[params.switchLedDp] = true 
     }
-    setDps(afterDps).then()
-    return setDps(beforeDps)
+    return setDps(mainDps)
   };
   return [moodState, setMoodFn];
 };

package/src/newModules/mood/MoodItem.tsx

@@ -37,7 +37,7 @@ const MoodItem = (props: MoodItemProps) => {
   }, [mood.mainLamp.nodes, mood.secondaryLamp.nodes]);
 
   const gradientMode = useMemo(() => (
-    deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : (deviceTypeOption?.isStripLight || deviceTypeOption?.isCeilingLight) ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
+    deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
  ), [MoodJumpGradientMode, deviceTypeOption])
 
   return (
@@ -53,11 +53,11 @@ const MoodItem = (props: MoodItemProps) => {
           />
         </View>
         <Spacer />
-        <MixMoodColorsLine mixSubLight={mood.mainLamp} isMix={isMix} type={mood.mainLamp.mode === gradientMode ? 'gradient' : 'separate'}/>
+        <MixMoodColorsLine mixSubLight={mood.mainLamp} isMix={isMix} type={(mood.mainLamp.mode === gradientMode && !deviceTypeOption?.isCeilingLight) ? 'gradient' : 'separate'}/>
         {(isMix && !!mood.secondaryLamp.nodes.length) &&  (
           <>
             <Spacer height={cx(7)} />
-            <MixMoodColorsLine mixSubLight={mood.secondaryLamp} isMix={isMix} type={mood.secondaryLamp.mode === gradientMode ? 'gradient' : 'separate'}/>
+            <MixMoodColorsLine mixSubLight={mood.secondaryLamp} isMix={isMix} type={mood.secondaryLamp.mode === (deviceTypeOption?.isMixLight ? MoodJumpGradientMode.SourceGradient : MoodJumpGradientMode.StripGradient) ? 'gradient' : 'separate'}/>
           </>
         )}
         <Spacer height={cx(12)} />