Jannex
/
expo-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added action handling for ambilight

main
alex 2023-08-06 23:17:59 +00:00
parent 0c4db80d8c
commit 4a92df31b0
9 changed files with 350 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
App.js
View File

@ -21,10 +21,6 @@ import { createStackNavigator } from "@react-navigation/stack";
import { TouchableOpacity } from "react-native"; import { TouchableOpacity } from "react-native";
import MyIcon from "./src/Components/Icon"; import MyIcon from "./src/Components/Icon";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import {
LayersEditActionColorModeSelectionModalContent,
LightsEditActionModalContent,
} from "./src/Screens/Device/modals/EditActions/Lights";
import ChooseSceneModalContent from "./src/Screens/Device/modals/ChooseScene"; import ChooseSceneModalContent from "./src/Screens/Device/modals/ChooseScene";
import CreateSceneModalContent from "./src/Screens/Device/modals/ChooseScene/CreateScene"; import CreateSceneModalContent from "./src/Screens/Device/modals/ChooseScene/CreateScene";
import AddSceneActionModalContent from "./src/Screens/Device/modals/AddSceneAction"; import AddSceneActionModalContent from "./src/Screens/Device/modals/AddSceneAction";
@ -33,9 +29,12 @@ import {
SettingsAppColorSchemeModalContent, SettingsAppColorSchemeModalContent,
SettingsAppLanguageModalContent, SettingsAppLanguageModalContent,
} from "./src/Screens/Settings"; } from "./src/Screens/Settings";
import { EditActionAnimationSelectionModalContent } from "./src/Screens/Device/modals/EditActions";
import UpdateSceneNameModalContent from "./src/Screens/Device/modals/UpdateSceneName"; import UpdateSceneNameModalContent from "./src/Screens/Device/modals/UpdateSceneName";
import SettingsChangeDeviceDisplayNameModalContent from "./src/Screens/Device/modals/SettingsChangeDeviceDisplayName"; import SettingsChangeDeviceDisplayNameModalContent from "./src/Screens/Device/modals/SettingsChangeDeviceDisplayName";
import LightsEditActionModalContent, {
LightsEditActionColorModeSelectionModalContent,
} from "./src/Screens/Device/modals/EditActions/Lights";
import { EditActionAnimationSelectionModalContent } from "./src/Screens/Device/modals/EditActions";
const Drawer = createDrawerNavigator(); const Drawer = createDrawerNavigator();
const Stack = createStackNavigator(); const Stack = createStackNavigator();
@ -161,66 +160,47 @@ export function MyApp() {
/> />
<Stack.Screen <Stack.Screen
name="modalLayerSection" name="modalLayerSelection"
component={LayerSelectionModalContent} component={LayerSelectionModalContent}
options={({ navigation }) => options={({ navigation }) =>
options({ options({
navigation: navigation, navigation: navigation,
pageTitle: t( pageTitle: t(
"screens.device.scenes.modalLayerSection.pageTitle" "screens.device.scenes.modalLayerSelection.pageTitle"
), ),
}) })
} }
/> />
<Stack.Screen <Stack.Screen
name="modalLayersEditAction" name="modalLightsEditAction"
component={LightsEditActionModalContent} component={LightsEditActionModalContent}
options={({ navigation }) => options={({ navigation }) =>
options({ options({
navigation: navigation, navigation: navigation,
pageTitle: t(
"screens.device.scenes.modalLayersEditAction.pageTitle"
),
}) })
} }
/> />
<Stack.Screen <Stack.Screen
name="modalLayersEditActionColorModeSelection" name="modalLightsEditActionColorModeSelection"
component={LayersEditActionColorModeSelectionModalContent} component={LightsEditActionColorModeSelectionModalContent}
options={({ navigation }) => options={({ navigation }) =>
options({ options({
navigation: navigation, navigation: navigation,
pageTitle: t( pageTitle: t(
"screens.device.scenes.modalLayersEditActionColorModeSelection.pageTitle" "screens.device.scenes.editActions.modalLightsEditActionColorModeSelection.pageTitle"
), ),
}) })
} }
/> />
<Stack.Screen <Stack.Screen
name="modalEditActionAnimationInSelection" name="modalEditActionAnimationInOrOutSelection"
component={EditActionAnimationSelectionModalContent} component={EditActionAnimationSelectionModalContent}
options={({ navigation }) => options={({ navigation }) =>
options({ options({
navigation: navigation, navigation: navigation,
pageTitle: t(
"screens.device.scenes.modalEditActionAnimationInSelection.pageTitle"
),
})
}
/>
<Stack.Screen
name="modalEditActionAnimationOutSelection"
component={EditActionAnimationSelectionModalContent}
options={({ navigation }) =>
options({
navigation: navigation,
pageTitle: t(
"screens.device.scenes.modalEditActionAnimationOutSelection.pageTitle"
),
}) })
} }
/> />

66
locales/de.json
View File

@ -46,7 +46,8 @@
"oneLayer": "Ebene", "oneLayer": "Ebene",
"multipleLayers": "Ebenen" "multipleLayers": "Ebenen"
} }
} },
"ambilight": "Umgebungslicht setzen auf"
}, },
"modalChooseScene": { "modalChooseScene": {
"pageTitle": "Wähle eine Szene aus", "pageTitle": "Wähle eine Szene aus",
@ -75,42 +76,45 @@
"jumpToScene": "Springe zu Szene" "jumpToScene": "Springe zu Szene"
} }
}, },
"modalLayerSection": { "modalLayerSelection": {
"pageTitle": "Layer auswahl" "pageTitle": "Layer auswahl"
}, },
"modalLayersEditAction": { "editActions": {
"pageTitle": "Ebenen bearbeiten", "modalLightsEditAction": {
"dropdownColorModeSelection": { "layersPageTitle": "Ebenen bearbeiten",
"label": "Wähle einen Farbmodus", "ambilightPageTitle": "Ambilight bearbeiten",
"noColorModeSelected": "Kein Farbmodus ausgewählt" "dropdownColorModeSelection": {
"label": "Wähle einen Farbmodus",
"noColorModeSelected": "Kein Farbmodus ausgewählt"
},
"modeSpecificColors": "Modus spezifische Farben"
}, },
"modeSpecificColors": "Modus spezifische Farben" "modalDotsEditAction": {
}, "duplicateAction": "Aktion duplizieren",
"modalDotsEditAction": { "deleteAction": "Aktion löschen"
"duplicateAction": "Aktion duplizieren",
"deleteAction": "Aktion löschen"
},
"editActionAnimationsCardContent": {
"animationsIn": "Animations in",
"animationsOut": "Animations out",
"dropdownAnimationIn": {
"label": "Wähle eine Animation in"
}, },
"dropdownAnimationOut": { "editActionAnimationsCardContent": {
"label": "Wähle eine Animation out" "animationsIn": "Animations in",
"animationsOut": "Animations out",
"dropdownAnimationIn": {
"label": "Wähle eine Animation in"
},
"dropdownAnimationOut": {
"label": "Wähle eine Animation out"
}
},
"modalLightsEditActionColorModeSelection": {
"pageTitle": "Wähle einen Farbmodus"
},
"modalEditActionAnimationInSelection": {
"pageTitle": "Animation in auswählen",
"noResult": "Keine Animationen verfügbar"
},
"modalEditActionAnimationOutSelection": {
"pageTitle": "Animation out auswählen",
"noResult": "Keine Animationen verfügbar"
} }
}, },
"modalLayersEditActionColorModeSelection": {
"pageTitle": "Wähle einen Farbmodus"
},
"modalEditActionAnimationInSelection": {
"pageTitle": "Animation in auswählen",
"noResult": "Keine Animationen verfügbar"
},
"modalEditActionAnimationOutSelection": {
"pageTitle": "Animation out auswählen",
"noResult": "Keine Animationen verfügbar"
},
"modalUpdateSceneName": { "modalUpdateSceneName": {
"pageTitle": "Szenennamen ändern", "pageTitle": "Szenennamen ändern",
"textTitle": "Szenenname", "textTitle": "Szenenname",

66
locales/en.json
View File

@ -46,7 +46,8 @@
"oneLayer": "layer", "oneLayer": "layer",
"multipleLayers": "layers" "multipleLayers": "layers"
} }
} },
"ambilight": "Set ambilight to"
}, },
"modalChooseScene": { "modalChooseScene": {
"pageTitle": "Choose a scene", "pageTitle": "Choose a scene",
@ -75,42 +76,45 @@
"jumpToScene": "Jump to scene" "jumpToScene": "Jump to scene"
} }
}, },
"modalLayerSection": { "modalLayerSelection": {
"pageTitle": "Layer selection" "pageTitle": "Layer selection"
}, },
"modalLayersEditAction": { "editActions": {
"pageTitle": "Edit layers", "modalLightsEditAction": {
"dropdownColorModeSelection": { "layersPageTitle": "Edit layers",
"label": "Choose a color mode", "ambilightPageTitle": "Edit ambilight",
"noColorModeSelected": "No color mode selected" "dropdownColorModeSelection": {
"label": "Choose a color mode",
"noColorModeSelected": "No color mode selected"
},
"modeSpecificColors": "Mode specific colors"
}, },
"modeSpecificColors": "Mode specific colors" "modalDotsEditAction": {
}, "duplicateAction": "Duplicate action",
"modalDotsEditAction": { "deleteAction": "Delete action"
"duplicateAction": "Duplicate action",
"deleteAction": "Delete action"
},
"editActionAnimationsCardContent": {
"animationsIn": "Animations in",
"animationsOut": "Animations out",
"dropdownAnimationIn": {
"label": "Choose an animation in"
}, },
"dropdownAnimationOut": { "editActionAnimationsCardContent": {
"label": "Choose an animation out" "animationsIn": "Animations in",
"animationsOut": "Animations out",
"dropdownAnimationIn": {
"label": "Choose an animation in"
},
"dropdownAnimationOut": {
"label": "Choose an animation out"
}
},
"modalLightsEditActionColorModeSelection": {
"pageTitle": "Choose a color mode"
},
"modalEditActionAnimationInSelection": {
"pageTitle": "Choose animation in",
"noResult": "No animations available"
},
"modalEditActionAnimationOutSelection": {
"pageTitle": "Choose animation out",
"noResult": "No animations available"
} }
}, },
"modalLayersEditActionColorModeSelection": {
"pageTitle": "Choose a color mode"
},
"modalEditActionAnimationInSelection": {
"pageTitle": "Choose animation in",
"noResult": "No animations available"
},
"modalEditActionAnimationOutSelection": {
"pageTitle": "Choose animation out",
"noResult": "No animations available"
},
"modalUpdateSceneName": { "modalUpdateSceneName": {
"pageTitle": "Change scene name", "pageTitle": "Change scene name",
"textTitle": "Scene name", "textTitle": "Scene name",

2
src/Components/Dropdown/index.js
View File

@ -1,6 +1,6 @@
import { Text, View } from "react-native"; import { Text, View } from "react-native";
import { TouchableOpacity } from "react-native"; import { TouchableOpacity } from "react-native";
import { AppContext, AppStyles, IsPlatformIos } from "../../utils"; import { AppContext, AppStyles } from "../../utils";
import { useContext } from "react"; import { useContext } from "react";
import MyIcon from "../Icon"; import MyIcon from "../Icon";

5
src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js
View File

@ -96,7 +96,10 @@ export default function LayerSelectionModalContent({ navigation, route }) {
route.params["actionId"] = newAction.actionId; route.params["actionId"] = newAction.actionId;
navigation.navigate(AppSelectedUserDevice.current.routeName); navigation.navigate(AppSelectedUserDevice.current.routeName);
navigation.navigate("modalLayersEditAction", route.params); navigation.navigate("modalLightsEditAction", {
...route.params,
actionType: Constants.actionType.layers,
});
}} }}
/> />
</View> </View>

36
src/Screens/Device/modals/AddSceneAction/index.js
View File

@ -1,10 +1,12 @@
import { useContext } from "react";
import { Image, ScrollView, Text, View } from "react-native"; import { Image, ScrollView, Text, View } from "react-native";
import { import {
AppContext, AppContext,
AppSelectedUserDevice,
AppStyles, AppStyles,
Constants, Constants,
GetDevice,
ModalContainer, ModalContainer,
NewAction,
} from "../../../../utils"; } from "../../../../utils";
import MyIcon from "../../../../Components/Icon"; import MyIcon from "../../../../Components/Icon";
import { Divider } from "../../../../Components/Divider"; import { Divider } from "../../../../Components/Divider";
@ -12,6 +14,7 @@ import { useTranslation } from "react-i18next";
import MyTag from "../../../../Components/Tag"; import MyTag from "../../../../Components/Tag";
import MyPressable from "../../../../Components/Pressable"; import MyPressable from "../../../../Components/Pressable";
import { ActionTypeIconName } from "../../scene"; import { ActionTypeIconName } from "../../scene";
import { useContext } from "react";
function Action({ function Action({
text, text,
@ -74,12 +77,33 @@ function Action({
} }
export default function AddSceneActionModalContent({ navigation, route }) { export default function AddSceneActionModalContent({ navigation, route }) {
const appContext = useContext(AppContext);
const { t } = useTranslation(); const { t } = useTranslation();
const deviceFirmwareVersion = route.params.deviceFirmwareVersion; const deviceFirmwareVersion = route.params.deviceFirmwareVersion;
// TODO: show only actions by device model // TODO: show only actions by device model
// this code is also in ./LayerSelection/index.js
const handleCreateAction = (actionType, modeAdjustments, navigateTo) => {
const newAction = NewAction(
GetDevice(appContext.devices).selectedScene,
actionType,
modeAdjustments
);
appContext.setDeviceSceneActions((arr) => [...arr, newAction]);
route.params["actionId"] = newAction.actionId;
if (actionType === Constants.actionType.ambilight) {
route.params["actionType"] = Constants.actionType.ambilight;
}
navigation.navigate(AppSelectedUserDevice.current.routeName);
navigation.navigate(navigateTo, route.params);
};
return ( return (
<ScrollView> <ScrollView>
<ModalContainer withoutPadding> <ModalContainer withoutPadding>
@ -87,7 +111,7 @@ export default function AddSceneActionModalContent({ navigation, route }) {
text={t("screens.device.scenes.modalAddSceneAction.actions.layers")} text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
iconName={ActionTypeIconName(Constants.actionType.layers)} iconName={ActionTypeIconName(Constants.actionType.layers)}
imageSource={require("../../../../../assets/layers.gif")} imageSource={require("../../../../../assets/layers.gif")}
onPress={() => navigation.navigate("modalLayerSection", route.params)} onPress={() => navigation.navigate("modalLayerSelection", route.params)}
deviceFirmwareVersion={deviceFirmwareVersion} deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.1"]} supportedFirmwareVersions={["1.0.1"]}
/> />
@ -98,7 +122,13 @@ export default function AddSceneActionModalContent({ navigation, route }) {
)} )}
iconName={ActionTypeIconName(Constants.actionType.ambilight)} iconName={ActionTypeIconName(Constants.actionType.ambilight)}
imageSource={require("../../../../../assets/ambilight.gif")} imageSource={require("../../../../../assets/ambilight.gif")}
onPress={() => console.log("pressed action")} onPress={() => {
handleCreateAction(
Constants.actionType.ambilight,
{},
"modalLightsEditAction"
);
}}
deviceFirmwareVersion={deviceFirmwareVersion} deviceFirmwareVersion={deviceFirmwareVersion}
supportedFirmwareVersions={["1.0.1"]} supportedFirmwareVersions={["1.0.1"]}
/> />

189
src/Screens/Device/modals/EditActions/Lights/index.js
View File

@ -5,75 +5,40 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native"; } from "react-native";
import {
MyDeviceTabButton,
MyDeviceTabButtonContainer,
topFirst,
topSecond,
} from "../../../deviceTabButton";
import Card from "../../../../../Components/Card";
import MyDropdown from "../../../../../Components/Dropdown";
import { useCallback, useContext, useEffect, useRef, useState } from "react"; import { useCallback, useContext, useEffect, useRef, useState } from "react";
import { AppContext, AppStyles, ModalContainer } from "../../../../../utils"; import { useTranslation } from "react-i18next";
import { ColorPickerRef } from "reanimated-color-picker"; // used
import { import {
MyDotsModal, AppContext,
MyPickerModalListItem, AppStyles,
} from "../../../../../Components/Modal"; Constants,
import { MyColorPickerV2 } from "../../../../../Components/ColorPicker"; ModalContainer,
} from "../../../../../utils";
import Animated, { import Animated, {
useAnimatedStyle, useAnimatedStyle,
useSharedValue, useSharedValue,
} from "react-native-reanimated"; } from "react-native-reanimated";
import { MyIconButton } from "../../../../../Components/Button";
import { ColorPickerRef } from "reanimated-color-picker"; // used
import EditActionAnimationsCardContent, {
EditActionAdjustmentsContent,
} from "..";
import { useTranslation } from "react-i18next";
import { useFocusEffect } from "@react-navigation/native"; import { useFocusEffect } from "@react-navigation/native";
import { DeviceLivePreview } from "../../.."; import { DeviceLivePreview } from "../../..";
import {
MyDeviceTabButton,
MyDeviceTabButtonContainer,
} from "../../../deviceTabButton";
import Card from "../../../../../Components/Card";
import MyDropdown from "../../../../../Components/Dropdown";
import { MyIconButton } from "../../../../../Components/Button";
import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";
import {
EditActionAdjustmentsContent,
EditActionAnimationsCardContent,
} from "..";
import {
MyDotsModal,
MyPickerModalListItem,
} from "../../../../../Components/Modal";
function LightModeDefaultColor({ // This component is used by layers and ambilight
sharedColor, export default function LightsEditActionModalContent({ navigation, route }) {
index,
backgroundColor,
selected,
}) {
const backgroundColorStyle = useAnimatedStyle(() => {
return {
backgroundColor: sharedColor.value[index],
};
});
return (
<Animated.View
style={[
{
width: 32,
height: 32,
borderRadius: 10,
justifyContent: "center",
alignItems: "center",
},
backgroundColorStyle,
]}
>
<Animated.View
style={[
{
width: 28,
height: 28,
borderRadius: 8,
},
backgroundColorStyle,
selected && { borderWidth: 2, borderColor: backgroundColor },
]}
/>
</Animated.View>
);
}
export function LightsEditActionModalContent({ navigation, route }) {
const appContext = useContext(AppContext); const appContext = useContext(AppContext);
const sharedLightModeDefaultColors = useSharedValue([]); const sharedLightModeDefaultColors = useSharedValue([]);
@ -82,43 +47,53 @@ export function LightsEditActionModalContent({ navigation, route }) {
const colorPickerRef = useRef(ColorPickerRef); const colorPickerRef = useRef(ColorPickerRef);
const { t } = useTranslation(); const { t } = useTranslation();
const { actionId, deviceFirmwareVersion } = route.params; const { actionType, actionId, deviceFirmwareVersion } = route.params;
console.log("actionType", actionType);
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
navigation.setOptions({ navigation.setOptions({
title:
actionType === Constants.actionType.layers
? t(
"screens.device.scenes.editActions.modalLightsEditAction.layersPageTitle"
)
: t(
"screens.device.scenes.editActions.modalLightsEditAction.ambilightPageTitle"
),
headerRight: () => ( headerRight: () => (
<MyDotsModal <MyDotsModal
modalData={[ modalData={[
/*{ /*{
Duplicated item as references to the old action -> if the color is changed it will apply on both actions bug: Duplicated item as references to the old action -> if the color is changed it will apply on both actions
icon: "content-duplicate", icon: "content-duplicate",
label: t( label: t(
"screens.device.scenes.modalDotsEditAction.duplicateAction" "screens.device.scenes.modalDotsEditAction.duplicateAction"
), ),
onPress: () => { onPress: () => {
const currentSelectedAction = const currentSelectedAction =
appContext.deviceSceneActions.find( appContext.deviceSceneActions.find(
(a) => a.actionId === actionId (a) => a.actionId === actionId
); );
appContext.setDeviceSceneActions((arr) => { appContext.setDeviceSceneActions((arr) => {
const duplicatedAction = { const duplicatedAction = {
...currentSelectedAction, ...currentSelectedAction,
actionId: GetUuid(), actionId: GetUuid(),
}; };
return [...arr, duplicatedAction]; return [...arr, duplicatedAction];
}); });
navigation.goBack(); navigation.goBack();
}, },
},*/ },*/
{ {
icon: "trash-can", icon: "trash-can",
label: t( label: t(
"screens.device.scenes.modalDotsEditAction.deleteAction" "screens.device.scenes.editActions.modalDotsEditAction.deleteAction"
), ),
onPress: () => { onPress: () => {
appContext.setDeviceSceneActions((actions) => appContext.setDeviceSceneActions((actions) =>
@ -212,17 +187,17 @@ export function LightsEditActionModalContent({ navigation, route }) {
<MyDropdown <MyDropdown
style={{ marginBottom: 2 }} style={{ marginBottom: 2 }}
label={t( label={t(
"screens.device.scenes.modalLayersEditAction.dropdownColorModeSelection.label" "screens.device.scenes.editActions.modalLightsEditAction.dropdownColorModeSelection.label"
)} )}
selectedItemLabel={ selectedItemLabel={
selectedSceneAction.modeId === "" selectedSceneAction.modeId === ""
? t( ? t(
"screens.device.scenes.modalLayersEditAction.dropdownColorModeSelection.noColorModeSelected" "screens.device.scenes.editActions.modalLightsEditAction.dropdownColorModeSelection.noColorModeSelected"
) )
: selectedLightMode.name[appContext.appLanguage] : selectedLightMode.name[appContext.appLanguage]
} }
onPress={() => onPress={() =>
navigation.navigate("modalLayersEditActionColorModeSelection", { navigation.navigate("modalLightsEditActionColorModeSelection", {
supportedDeviceLightModes: supportedDeviceLightModes, supportedDeviceLightModes: supportedDeviceLightModes,
action: selectedSceneAction, action: selectedSceneAction,
}) })
@ -252,7 +227,7 @@ export function LightsEditActionModalContent({ navigation, route }) {
]} ]}
> >
{t( {t(
"screens.device.scenes.modalLayersEditAction.modeSpecificColors" "screens.device.scenes.editActions.modalLightsEditAction.modeSpecificColors"
)} )}
</Text> </Text>
@ -329,7 +304,47 @@ export function LightsEditActionModalContent({ navigation, route }) {
); );
} }
export function LayersEditActionColorModeSelectionModalContent({ function LightModeDefaultColor({
sharedColor,
index,
backgroundColor,
selected,
}) {
const backgroundColorStyle = useAnimatedStyle(() => {
return {
backgroundColor: sharedColor.value[index],
};
});
return (
<Animated.View
style={[
{
width: 32,
height: 32,
borderRadius: 10,
justifyContent: "center",
alignItems: "center",
},
backgroundColorStyle,
]}
>
<Animated.View
style={[
{
width: 28,
height: 28,
borderRadius: 8,
},
backgroundColorStyle,
selected && { borderWidth: 2, borderColor: backgroundColor },
]}
/>
</Animated.View>
);
}
export function LightsEditActionColorModeSelectionModalContent({
navigation, navigation,
route, route,
}) { }) {

43
src/Screens/Device/modals/EditActions/index.js
View File

@ -1,20 +1,21 @@
import { FlatList, Text, View } from "react-native"; import { FlatList, Text, View } from "react-native";
import Card from "../../../../Components/Card";
import { import {
AppContext, AppContext,
AppStyles, AppStyles,
IsPlatformIos, IsPlatformIos,
ModalContainer, ModalContainer,
} from "../../../../utils"; } from "../../../../utils";
import { useCallback, useContext, useState } from "react";
import { useTranslation } from "react-i18next";
import Card from "../../../../Components/Card";
import MyDropdown from "../../../../Components/Dropdown"; import MyDropdown from "../../../../Components/Dropdown";
import { useContext, useState } from "react";
import MyResult from "../../../../Components/Result"; import MyResult from "../../../../Components/Result";
import { MyPickerModalListItem } from "../../../../Components/Modal"; import { MyPickerModalListItem } from "../../../../Components/Modal";
import MyIcon from "../../../../Components/Icon";
import MySlider from "../../../../Components/Slider"; import MySlider from "../../../../Components/Slider";
import { useTranslation } from "react-i18next"; import MyIcon from "../../../../Components/Icon";
import { useFocusEffect } from "@react-navigation/native";
export default function EditActionAnimationsCardContent({ export function EditActionAnimationsCardContent({
disabled, disabled,
navigation, navigation,
deviceFirmwareVersion, deviceFirmwareVersion,
@ -43,7 +44,7 @@ export default function EditActionAnimationsCardContent({
]} ]}
> >
{t( {t(
"screens.device.scenes.editActionAnimationsCardContent.animationsIn" "screens.device.scenes.editActions.editActionAnimationsCardContent.animationsIn"
)} )}
</Text> </Text>
@ -51,13 +52,13 @@ export default function EditActionAnimationsCardContent({
disabled={disabled} disabled={disabled}
style={{ marginTop: 2 }} style={{ marginTop: 2 }}
label={t( label={t(
"screens.device.scenes.editActionAnimationsCardContent.dropdownAnimationIn.label" "screens.device.scenes.editActions.editActionAnimationsCardContent.dropdownAnimationIn.label"
)} )}
selectedItemLabel={ selectedItemLabel={
selectedLightAnimationIn.name[appContext.appLanguage] selectedLightAnimationIn.name[appContext.appLanguage]
} }
onPress={() => onPress={() =>
navigation.navigate("modalEditActionAnimationInSelection", { navigation.navigate("modalEditActionAnimationInOrOutSelection", {
animationType: "animationIn", animationType: "animationIn",
deviceFirmwareVersion: deviceFirmwareVersion, deviceFirmwareVersion: deviceFirmwareVersion,
action: action, action: action,
@ -82,7 +83,7 @@ export default function EditActionAnimationsCardContent({
]} ]}
> >
{t( {t(
"screens.device.scenes.editActionAnimationsCardContent.animationsOut" "screens.device.scenes.editActions.editActionAnimationsCardContent.animationsOut"
)} )}
</Text> </Text>
@ -90,13 +91,13 @@ export default function EditActionAnimationsCardContent({
disabled={disabled} disabled={disabled}
style={{ marginTop: 2 }} style={{ marginTop: 2 }}
label={t( label={t(
"screens.device.scenes.editActionAnimationsCardContent.dropdownAnimationOut.label" "screens.device.scenes.editActions.editActionAnimationsCardContent.dropdownAnimationOut.label"
)} )}
selectedItemLabel={ selectedItemLabel={
selectedLightAnimationOut.name[appContext.appLanguage] selectedLightAnimationOut.name[appContext.appLanguage]
} }
onPress={() => onPress={() =>
navigation.navigate("modalEditActionAnimationOutSelection", { navigation.navigate("modalEditActionAnimationInOrOutSelection", {
animationType: "animationOut", animationType: "animationOut",
deviceFirmwareVersion: deviceFirmwareVersion, deviceFirmwareVersion: deviceFirmwareVersion,
action: action, action: action,
@ -119,6 +120,7 @@ export function EditActionAnimationSelectionModalContent({
route, route,
}) { }) {
const appContext = useContext(AppContext); const appContext = useContext(AppContext);
const { t } = useTranslation();
let { animationType, deviceFirmwareVersion, action } = route.params; let { animationType, deviceFirmwareVersion, action } = route.params;
@ -140,6 +142,21 @@ export function EditActionAnimationSelectionModalContent({
animationType = animationType =
animationType === "animationIn" ? "animationInId" : "animationOutId"; animationType === "animationIn" ? "animationInId" : "animationOutId";
useFocusEffect(
useCallback(() => {
navigation.setOptions({
title:
animationType === "animationInId"
? t(
"screens.device.scenes.editActions.modalEditActionAnimationInSelection.pageTitle"
)
: t(
"screens.device.scenes.editActions.modalEditActionAnimationOutSelection.pageTitle"
),
});
}, [])
);
return ( return (
<ModalContainer withoutPadding> <ModalContainer withoutPadding>
{supportedLightAnimations.length === 0 ? ( {supportedLightAnimations.length === 0 ? (
@ -147,10 +164,10 @@ export function EditActionAnimationSelectionModalContent({
text={ text={
animationType === "animationInId" animationType === "animationInId"
? t( ? t(
"screens.device.scenes.modalEditActionAnimationInSelection.noResult" "screens.device.scenes.editActions.modalEditActionAnimationInSelection.noResult"
) )
: t( : t(
"screens.device.scenes.modalEditActionAnimationOutSelection.noResult" "screens.device.scenes.editActions.modalEditActionAnimationOutSelection.noResult"
) )
} }
iconName="select-search" iconName="select-search"

144
src/Screens/Device/scene.js
View File

@ -239,53 +239,82 @@ function ActionListItem({ drag, navigation, device, item }) {
const ListItemAdjustments = () => { const ListItemAdjustments = () => {
let adjustments = []; let adjustments = [];
if ( switch (item.type) {
item.type === Constants.actionType.layers && case Constants.actionType.layers:
item.modeAdjustments.layers !== undefined if (item.modeAdjustments.layers !== undefined) {
) { const layerGrammarForm =
const layerGrammarForm = item.modeAdjustments.layers.length > 1
item.modeAdjustments.layers.length > 1 ? t(
? t( "screens.device.scenes.sceneActionsListItems.layers.layer_grammar_form.multipleLayers"
"screens.device.scenes.sceneActionsListItems.layers.layer_grammar_form.multipleLayers" )
) : t(
: t( "screens.device.scenes.sceneActionsListItems.layers.layer_grammar_form.oneLayer"
"screens.device.scenes.sceneActionsListItems.layers.layer_grammar_form.oneLayer" );
); const affectedLayers = item.modeAdjustments.layers.join(", ");
const affectedLayers = item.modeAdjustments.layers.join(", ");
adjustments.push( adjustments.push(
<View style={{ flexDirection: "row", alignItems: "center" }}> <View style={{ flexDirection: "row", alignItems: "center" }}>
<Text style={{ color: appContext.appTheme.textSecondary }}> <Text style={{ color: appContext.appTheme.textSecondary }}>
{appContext.deviceFirmwareModes.lightModes.find( {appContext.deviceFirmwareModes.lightModes.find(
(lM) => lM.id === item.modeId (lM) => lM.id === item.modeId
).defaults.length === 0 ).defaults.length === 0
? `${t( ? `${t(
"screens.device.scenes.sceneActionsListItems.layers.applyToLayers", "screens.device.scenes.sceneActionsListItems.layers.applyToLayers",
{ {
LAYER_GRAMMAR_FORM: layerGrammarForm, LAYER_GRAMMAR_FORM: layerGrammarForm,
AFFECTED_LAYERS: affectedLayers, AFFECTED_LAYERS: affectedLayers,
} }
)} ` )} `
: `${t( : `${t(
"screens.device.scenes.sceneActionsListItems.layers.setLayersTo", "screens.device.scenes.sceneActionsListItems.layers.setLayersTo",
{ {
LAYER_GRAMMAR_FORM: layerGrammarForm, LAYER_GRAMMAR_FORM: layerGrammarForm,
AFFECTED_LAYERS: affectedLayers, AFFECTED_LAYERS: affectedLayers,
} }
)} ${item.modeAdjustments.colors.length === 0 ? "???" : ""}`} )} ${
</Text> item.modeAdjustments.colors.length === 0 ? "???" : ""
}`}
</Text>
{item.modeAdjustments.colors !== undefined && {item.modeAdjustments.colors !== undefined &&
item.modeAdjustments.colors.map((color, index) => ( item.modeAdjustments.colors.map((color, index) => (
<MyColorSwatch <MyColorSwatch
key={index} key={index}
backgroundColor={color} backgroundColor={color}
size={16} size={16}
style={{ marginRight: -2 }} style={{ marginRight: -2 }}
/> />
))} ))}
</View> </View>
); );
}
break;
case Constants.actionType.ambilight:
console.log("item", item);
adjustments.push(
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Text style={{ color: appContext.appTheme.textSecondary }}>
{t("screens.device.scenes.sceneActionsListItems.ambilight")}{" "}
</Text>
{item.modeAdjustments.colors !== undefined &&
item.modeAdjustments.colors.map((color, index) => (
<MyColorSwatch
key={index}
backgroundColor={color}
size={16}
style={{ marginRight: -2 }}
/>
))}
</View>
);
break;
default:
console.log(
`item type ${item.type} not found in to display ListItemAdjustments`
);
break;
} }
if ( if (
@ -334,12 +363,29 @@ function ActionListItem({ drag, navigation, device, item }) {
return ( return (
<View style={{ marginLeft: 15, marginRight: 15 }}> <View style={{ marginLeft: 15, marginRight: 15 }}>
<TouchableOpacity <TouchableOpacity
onPress={() => onPress={() => {
navigation.navigate("modalLayersEditAction", { let navigateTo;
let options = {
actionId: item.actionId, actionId: item.actionId,
deviceFirmwareVersion: device.firmware.version, deviceFirmwareVersion: device.firmware.version,
}) };
}
switch (item.type) {
case Constants.actionType.layers:
navigateTo = "modalLightsEditAction";
options.actionType = Constants.actionType.layers;
break;
case Constants.actionType.ambilight:
navigateTo = "modalLightsEditAction";
options.actionType = Constants.actionType.ambilight;
break;
default:
console.log("no navigation defined for item type " + item.type);
return;
}
navigation.navigate(navigateTo, options);
}}
> >
<View <View
style={{ style={{