Skip to content

Commit

Permalink
feat(foundation): add voice message input color set
Browse files Browse the repository at this point in the history
  • Loading branch information
@bang9
bang9 committed Nov 3, 2023
1 parent 1d6a8e2 commit b94d230
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 41 deletions.
26 changes: 26 additions & 0 deletions packages/uikit-react-native-foundation/src/theme/DarkUIKitTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,32 @@ const DarkUIKitTheme = createTheme({
},
},
},
voiceMessageInput: {
default: {
active: {
textCancel: palette.primary200,
textTime: palette.onBackgroundLight01,
background: palette.background600,
actionIcon: palette.onBackgroundDark01,
actionIconBackground: palette.background500,
sendIcon: palette.onBackgroundLight01,
sendIconBackground: palette.primary200,
progressTrack: palette.primary200,
recording: palette.error300,
},
inactive: {
textCancel: palette.primary200,
textTime: palette.onBackgroundDark03,
background: palette.background600,
actionIcon: palette.onBackgroundDark01,
actionIconBackground: palette.background500,
sendIcon: palette.onBackgroundDark04,
sendIconBackground: palette.background500,
progressTrack: palette.background400,
recording: palette.error200,
},
},
},
},
} satisfies UIKitColors;
},
Expand Down
26 changes: 26 additions & 0 deletions packages/uikit-react-native-foundation/src/theme/LightUIKitTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,32 @@ const LightUIKitTheme = createTheme({
},
},
},
voiceMessageInput: {
default: {
active: {
textCancel: palette.primary300,
textTime: palette.onBackgroundDark01,
background: palette.background50,
actionIcon: palette.onBackgroundLight01,
actionIconBackground: palette.background100,
sendIcon: palette.onBackgroundDark01,
sendIconBackground: palette.primary300,
progressTrack: palette.primary300,
recording: palette.error300,
},
inactive: {
textCancel: palette.primary300,
textTime: palette.onBackgroundLight03,
background: palette.background50,
actionIcon: palette.onBackgroundLight01,
actionIconBackground: palette.background100,
sendIcon: palette.onBackgroundLight04,
sendIconBackground: palette.background100,
progressTrack: palette.background100,
recording: palette.error300,
},
},
},
},
} satisfies UIKitColors;
},
Expand Down
16 changes: 15 additions & 1 deletion packages/uikit-react-native-foundation/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ export type Component =
| 'ProfileCard'
| 'Reaction'
| 'OpenChannelMessage'
| 'OpenChannelPreview';
| 'OpenChannelPreview'
| 'VoiceMessageInput';

export type GetColorTree<
Tree extends {
Expand Down Expand Up @@ -74,6 +75,7 @@ export type ComponentColorTree = GetColorTree<{
Reaction: 'default' | 'rounded';
OpenChannelMessage: 'default';
OpenChannelPreview: 'default';
VoiceMessageInput: 'default';
};
State: {
Header: 'none';
Expand All @@ -89,6 +91,7 @@ export type ComponentColorTree = GetColorTree<{
Reaction: 'enabled' | 'selected';
OpenChannelMessage: 'enabled' | 'pressed';
OpenChannelPreview: 'none';
VoiceMessageInput: 'active' | 'inactive';
};
ColorPart: {
Header: 'background' | 'borderBottom';
Expand Down Expand Up @@ -138,6 +141,16 @@ export type ComponentColorTree = GetColorTree<{
| 'background'
| 'coverBackground'
| 'separator';
VoiceMessageInput:
| 'textCancel'
| 'textTime'
| 'background'
| 'actionIcon'
| 'actionIconBackground'
| 'sendIcon'
| 'sendIconBackground'
| 'progressTrack'
| 'recording';
};
}>;
export type ComponentColors<T extends Component> = {
Expand Down Expand Up @@ -185,6 +198,7 @@ export interface UIKitColors {
reaction: ComponentColors<'Reaction'>;
openChannelMessage: ComponentColors<'OpenChannelMessage'>;
openChannelPreview: ComponentColors<'OpenChannelPreview'>;
voiceMessageInput: ComponentColors<'VoiceMessageInput'>;
};
}

Expand Down
59 changes: 19 additions & 40 deletions packages/uikit-react-native/src/components/ChannelInput/VoiceMessageInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ export type VoiceMessageInputProps = {

const VoiceMessageInput = ({ onClose, onSend }: VoiceMessageInputProps) => {
const { STRINGS } = useLocalization();
const { colors, palette, select } = useUIKitTheme();
const { colors } = useUIKitTheme();
const { actions, state } = useVoiceMessageInput((file, duration) => onSend({ file, duration }));

const uiColors = colors.ui.voiceMessageInput.default[state.status !== 'idle' ? 'active' : 'inactive'];

const onPressCancel = async () => {
actions.cancel();
onClose();
Expand Down Expand Up @@ -60,53 +62,32 @@ const VoiceMessageInput = ({ onClose, onSend }: VoiceMessageInputProps) => {
const renderActionIcon = () => {
switch (state.status) {
case 'idle':
return (
<Icon icon={'recording'} size={20} color={select({ light: palette.error300, dark: palette.error200 })} />
);
return <Icon icon={'recording'} size={20} color={uiColors.recording} />;
case 'recording':
return <Icon icon={'stop'} size={20} color={colors.onBackground01} />;
return <Icon icon={'stop'} size={20} color={uiColors.actionIcon} />;
case 'recording_completed':
case 'playing_paused':
return <Icon icon={'play'} size={20} color={colors.onBackground01} />;
return <Icon icon={'play'} size={20} color={uiColors.actionIcon} />;
case 'playing':
return <Icon icon={'pause'} size={20} color={colors.onBackground01} />;
return <Icon icon={'pause'} size={20} color={uiColors.actionIcon} />;
}
};

const recordingInActiveStyle = {
bar: select({ light: palette.background100, dark: palette.background400 }),
track: select({ light: palette.background100, dark: palette.background400 }),
overlayText: colors.onBackground01,
overlayTextOpacity: 0.38,
};
const recordingActiveStyle = {
bar: colors.onBackground01,
track: colors.primary,
overlayText: colors.onBackgroundReverse01,
overlayTextOpacity: 0.88,
};

const useRecorderProgress = state.status === 'recording' || state.status === 'recording_completed';
const recorderStyle = state.status !== 'idle' ? recordingActiveStyle : recordingInActiveStyle;
const lessThanMinimumDuration = state.recordingTime.currentTime < state.recordingTime.minDuration;

return (
<Box backgroundColor={colors.background} paddingVertical={24} paddingHorizontal={16} style={styles.container}>
<Box backgroundColor={uiColors.background} paddingVertical={24} paddingHorizontal={16} style={styles.container}>
{/** Progress bar **/}
<ProgressBar
style={styles.progressBar}
current={useRecorderProgress ? state.recordingTime.currentTime : state.playingTime.currentTime}
total={useRecorderProgress ? state.recordingTime.maxDuration : state.playingTime.duration || 1}
barColor={recorderStyle.bar}
trackColor={recorderStyle.track}
trackColor={uiColors.progressTrack}
overlay={
<Box flex={1} flexDirection={'row'} alignItems={'center'} justifyContent={'flex-end'} paddingRight={16}>
<RecordingLight visible={state.status === 'recording'} />
<Text
caption1
style={{ lineHeight: undefined, marginLeft: 6, opacity: recorderStyle.overlayTextOpacity }}
color={recorderStyle.overlayText}
>
<Text caption1 style={{ lineHeight: undefined, marginLeft: 6 }} color={uiColors.textTime}>
{millsToMMSS(useRecorderProgress ? state.recordingTime.currentTime : state.playingTime.currentTime)}
</Text>
</Box>
Expand All @@ -130,7 +111,7 @@ const VoiceMessageInput = ({ onClose, onSend }: VoiceMessageInputProps) => {
borderRadius={17}
alignItems={'center'}
justifyContent={'center'}
backgroundColor={select({ dark: palette.background500, light: palette.background100 })}
backgroundColor={uiColors.actionIconBackground}
>
{renderActionIcon()}
</Box>
Expand All @@ -142,7 +123,8 @@ const VoiceMessageInput = ({ onClose, onSend }: VoiceMessageInputProps) => {
};

const RecordingLight = (props: { visible: boolean }) => {
const { palette, select } = useUIKitTheme();
const { colors } = useUIKitTheme();

const value = useRef(new Animated.Value(0)).current;
const animation = useRef(
Animated.loop(
Expand All @@ -168,7 +150,7 @@ const RecordingLight = (props: { visible: boolean }) => {
height: 12,
borderRadius: 6,
opacity: value,
backgroundColor: select({ light: palette.error300, dark: palette.error200 }),
backgroundColor: colors.ui.voiceMessageInput.default.active.recording,
}}
/>
);
Expand All @@ -180,7 +162,7 @@ const CancelButton = (props: { onPress: () => void; label: string }) => {
return (
<PressBox activeOpacity={0.8} onPress={props.onPress}>
<Box paddingHorizontal={12} height={'100%'} alignItems={'center'} justifyContent={'center'}>
<Text button color={colors.ui.input.default.active.highlight} numberOfLines={1}>
<Text button color={colors.ui.voiceMessageInput.default.active.textCancel} numberOfLines={1}>
{props.label}
</Text>
</Box>
Expand All @@ -189,17 +171,14 @@ const CancelButton = (props: { onPress: () => void; label: string }) => {
};

const SendButton = (props: { onPress: () => void; disabled: boolean }) => {
const { colors, select, palette } = useUIKitTheme();
const { colors } = useUIKitTheme();

const backgroundColor = props.disabled
? select({ dark: palette.background500, light: palette.background100 })
: colors.primary;
const iconColor = props.disabled ? colors.onBackground04 : colors.onBackgroundReverse01;
const uiColors = colors.ui.voiceMessageInput.default[props.disabled ? 'inactive' : 'active'];

return (
<PressBox disabled={props.disabled} activeOpacity={0.8} onPress={props.onPress}>
<Box backgroundColor={backgroundColor} padding={7} borderRadius={40}>
<Icon icon={'send'} size={20} color={iconColor} />
<Box backgroundColor={uiColors.sendIconBackground} padding={7} borderRadius={40}>
<Icon icon={'send'} size={20} color={uiColors.sendIcon} />
</Box>
</PressBox>
);
Expand Down

0 comments on commit b94d230

Please sign in to comment.