handle both back and forward in emoji picker

UmungoBungo · Sep 30, 2024 · e2e740c · e2e740c
1 parent d1469e2
commit e2e740c
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 33 deletions.
diff --git a/packages/docs/src/components/Demo/action-row.module.css b/packages/docs/src/components/Demo/action-row.module.css
@@ -10,10 +10,6 @@
 	text-wrap: balance;
 }
 
-.action-title {
-	font-family: 'GT Planar';
-}
-
 @media screen and (max-width: 900px) {
 	.row {
 		flex-direction: column;

diff --git a/packages/docs/src/remotion/HomepageVideo/cards/Cards.tsx b/packages/docs/src/remotion/HomepageVideo/cards/Cards.tsx
@@ -10,7 +10,7 @@ import type {Trending} from '../Comp';
 import {CurrentCountry} from '../CurrentCountry';
 import {Temperature} from '../Temperature';
 import {TrendingRepos} from '../TrendingRepos';
-import {EmojiCard} from '../emoji/EmojiCard';
+import {EmojiCard, type EmojiPosition} from '../emoji/EmojiCard';
 import type {Location} from '../types';
 import {Card} from './Card';
 import {getInitialPositions} from './math';
@@ -34,7 +34,16 @@ export const Cards: React.FC<{
 }) => {
 	const container = useRef<HTMLDivElement>(null);
 
-	const [emojiPosition, setEmojiPosition] = useState(10000000 * 3);
+	const activeTranslationStyle =
+		'transform 0.2s ease-in, opacity 0.2s ease-in-out';
+
+	const [emojiPositions, setEmojiPositions] = useState<EmojiPosition>({
+		prev: 'melting',
+		current: 'partying-face',
+		next: 'fire',
+		translation: 0,
+		translationStyle: activeTranslationStyle,
+	});
 
 	const [refs] = useState(() => {
 		return new Array(4).fill(true).map(() => {
@@ -67,11 +76,46 @@ export const Cards: React.FC<{
 	}, [onToggle]);
 
 	const onLeft = useCallback(() => {
-		setEmojiPosition((i) => i + 1);
+		setEmojiPositions((c) => {
+			return {
+				...c,
+				translation: -33.3,
+				translationStyle: activeTranslationStyle,
+			};
+		});
+		// after the animation is done, we need to update the emoji contents
+		setTimeout(() => {
+			setEmojiPositions((c) => {
+				return {
+					prev: c.next,
+					current: c.prev,
+					next: c.current,
+					translation: 0,
+					translationStyle: undefined,
+				};
+			});
+		}, 200);
 	}, []);
 
 	const onRight = useCallback(() => {
-		setEmojiPosition((i) => i - 1);
+		setEmojiPositions((c) => {
+			return {
+				...c,
+				translation: 33.3,
+				translationStyle: 'transform 0.2s ease-in, opacity 0.2s ease-in-out',
+			};
+		});
+		setTimeout(() => {
+			setEmojiPositions((c) => {
+				return {
+					prev: c.current,
+					current: c.next,
+					next: c.prev,
+					translation: 0,
+					translationStyle: '',
+				};
+			});
+		}, 200);
 	}, []);
 
 	return (
@@ -90,7 +134,7 @@ export const Cards: React.FC<{
 					) : index === 2 ? (
 						<CurrentCountry location={location} theme={theme} />
 					) : (
-						<EmojiCard emojiPosition={emojiPosition} />
+						<EmojiCard emojiPositions={emojiPositions} />
 					);
 
 				return (

diff --git a/packages/docs/src/remotion/HomepageVideo/emoji/DisplayedEmoji.tsx b/packages/docs/src/remotion/HomepageVideo/emoji/DisplayedEmoji.tsx
@@ -2,13 +2,10 @@ import type {EmojiName} from '@remotion/animated-emoji';
 import {AnimatedEmoji, getAvailableEmojis} from '@remotion/animated-emoji';
 import React from 'react';
 import {useVideoConfig} from 'remotion';
-import styles from './emoji.module.css';
 
 export const DisplayedEmoji: React.FC<{
 	readonly emoji: EmojiName;
-	readonly isNext: boolean;
-	readonly isPrevious: boolean;
-}> = ({emoji, isNext, isPrevious}) => {
+}> = ({emoji}) => {
 	const partyDuration = getAvailableEmojis().find(
 		(e) => e.name === emoji,
 	).durationInSeconds;
@@ -22,8 +19,12 @@ export const DisplayedEmoji: React.FC<{
 		<AnimatedEmoji
 			style={{
 				height: 100,
-				position: 'absolute',
-				transition: 'transform 0.2s ease-in, opacity 0.2s ease-in-out',
+
+				width: '100%',
+				display: 'flex',
+				justifyContent: 'center',
+				// position: 'absolute',
+				// transition: 'transform 0.2s ease-in, opacity 0.2s ease-in-out',
 			}}
 			emoji={emoji}
 			scale="0.5"
@@ -35,7 +36,6 @@ export const DisplayedEmoji: React.FC<{
 
 				throw e;
 			}}
-			className={isNext ? styles.next : isPrevious ? styles.prev : undefined}
 		/>
 	);
 };
diff --git a/packages/docs/src/remotion/HomepageVideo/emoji/EmojiCard.tsx b/packages/docs/src/remotion/HomepageVideo/emoji/EmojiCard.tsx
@@ -2,9 +2,17 @@ import React from 'react';
 import {AbsoluteFill} from 'remotion';
 import {DisplayedEmoji} from './DisplayedEmoji';
 
+export type EmojiPosition = {
+	prev: 'melting' | 'partying-face' | 'fire';
+	current: 'melting' | 'partying-face' | 'fire';
+	next: 'melting' | 'partying-face' | 'fire';
+	translation: number;
+	translationStyle: string;
+};
+
 export const EmojiCard: React.FC<{
-	emojiPosition: number;
-}> = ({emojiPosition}) => {
+	emojiPositions: EmojiPosition;
+}> = ({emojiPositions}) => {
 	return (
 		<AbsoluteFill
 			style={{
@@ -26,21 +34,20 @@ export const EmojiCard: React.FC<{
 			>
 				Choose an emoji
 			</div>
-			<DisplayedEmoji
-				isNext={emojiPosition % 3 === 0}
-				isPrevious={emojiPosition % 3 === 1}
-				emoji={'fire'}
-			/>
-			<DisplayedEmoji
-				isNext={emojiPosition % 3 === 1}
-				isPrevious={emojiPosition % 3 === 2}
-				emoji={'partying-face'}
-			/>
-			<DisplayedEmoji
-				isNext={emojiPosition % 3 === 2}
-				isPrevious={emojiPosition % 3 === 0}
-				emoji={'melting'}
-			/>
+			<div
+				style={{
+					position: 'absolute',
+					width: '300%',
+					display: 'flex',
+					whiteSpace: 'nowrap',
+					transition: emojiPositions.translationStyle,
+					transform: `translateX(${-emojiPositions.translation}%)`,
+				}}
+			>
+				<DisplayedEmoji emoji={emojiPositions.prev} />
+				<DisplayedEmoji emoji={emojiPositions.current} />
+				<DisplayedEmoji emoji={emojiPositions.next} />
+			</div>
 		</AbsoluteFill>
 	);
 };