New @remotion/animated-emoji package

.prettierignore

@@ -1,3 +1,3 @@
 # Prettier for docs is temporarily disabled:
 # https://github.com/prettier/prettier/issues/12209
-packages/docs/docs
+packages/docs/docs/**.mdx

packages/animated-emoji/.eslintrc

@@ -0,0 +1,3 @@
+{
+	"extends": ["@jonny/eslint-config/react"],
+}

packages/animated-emoji/bundle.ts

@@ -0,0 +1,18 @@
+import {build} from 'bun';
+
+if (process.env.NODE_ENV !== 'production') {
+	throw new Error('This script must be run using NODE_ENV=production');
+}
+
+const output = await build({
+	entrypoints: ['src/index.ts'],
+	naming: '[name].mjs',
+	external: ['remotion', 'remotion/no-react', 'react'],
+});
+
+const [file] = output.outputs;
+const text = await file.text();
+
+await Bun.write('dist/esm/index.mjs', text);
+
+export {};

packages/animated-emoji/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "@remotion/animated-emoji",
+	"version": "4.0.186",
+	"main": "dist/cjs/index.js",
+	"types": "dist/cjs/index.d.ts",
+	"module": "dist/esm/index.mjs",
+	"sideEffects": false,
+	"scripts": {
+		"formatting": "prettier src --check",
+		"lint": "eslint src --ext ts,tsx",
+		"build": "bun --env-file=../.env.bundle bundle.ts",
+		"test": "bun test src"
+	},
+	"exports": {
+		"./package.json": "./package.json",
+		".": {
+			"types": "./dist/cjs/index.d.ts",
+			"module": "./dist/esm/index.mjs",
+			"import": "./dist/esm/index.mjs",
+			"require": "./dist/cjs/index.js"
+		}
+	},
+	"author": "Yehor Misiats (https://github.com/satelllte)",
+	"maintainers": [
+		"Jonny Burger <[email protected]>"
+	],
+	"contributors": [],
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
+	"dependencies": {
+		"remotion": "workspace:*"
+	},
+	"keywords": [],
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/animated-emoji/src/AnimatedEmoji.tsx

@@ -0,0 +1,38 @@
+import type {RemotionOffthreadVideoProps} from 'remotion';
+import {Loop, OffthreadVideo, useVideoConfig} from 'remotion';
+import type {CalculateEmojiSrc, Scale} from './calculate-emoji-src';
+import {defaultCalculateEmojiSrc} from './calculate-emoji-src';
+import {emojis} from './emoji-data';
+import type {EmojiName} from './get-available-emoji';
+import {isWebkit} from './is-webkit';
+
+export type AnimatedEmojiProps = Omit<RemotionOffthreadVideoProps, 'src'> & {
+	readonly emoji: EmojiName;
+	readonly scale?: Scale;
+	readonly calculateSrc?: CalculateEmojiSrc;
+};
+
+export const AnimatedEmoji = ({
+	emoji,
+	scale = '1',
+	calculateSrc = defaultCalculateEmojiSrc,
+	...props
+}: AnimatedEmojiProps) => {
+	const {fps} = useVideoConfig();
+
+	const emojiData = emojis.find((e) => e.name === emoji);
+	if (!emojiData) {
+		throw new Error(
+			`Emoji ${emoji} not found. Available emojis: ${emojis.map((e) => e.name).join(', ')}`,
+		);
+	}
+
+	return (
+		<Loop durationInFrames={Math.floor(emojiData.durationInSeconds * fps)}>
+			<OffthreadVideo
+				{...props}
+				src={calculateSrc({emoji, scale, format: isWebkit() ? 'hevc' : 'webm'})}
+			/>
+		</Loop>
+	);
+};

packages/animated-emoji/src/calculate-emoji-src.ts

@@ -0,0 +1,21 @@
+import {staticFile} from 'remotion';
+import type {EmojiName} from './get-available-emoji';
+
+export type Format = 'hevc' | 'webm';
+export type Scale = '0.5' | '1' | '2';
+
+export type CalculateEmojiSrc = (options: {
+	emoji: EmojiName;
+	scale: Scale;
+	format: Format;
+}) => string;
+
+export const defaultCalculateEmojiSrc: CalculateEmojiSrc = ({
+	emoji,
+	scale,
+	format,
+}) => {
+	const extension = format === 'hevc' ? 'mp4' : 'webm';
+
+	return staticFile(`${emoji}-${scale}x.${extension}`);
+};