use fetched SVGs for country paths

UmungoBungo · Oct 14, 2024 · 085efe3 · 085efe3
1 parent 5266bc4
commit 085efe3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 2,110 deletions.
diff --git a/packages/docs/src/components/Demo/Demo.tsx b/packages/docs/src/components/Demo/Demo.tsx
@@ -129,7 +129,6 @@ export const Demo: React.FC = () => {
 	};
 
 	const updateAudioMute = (isMuted: boolean) => {
-		console.log(audioState);
 		setAudioState((v) => ({
 			volume: v.volume === 0 ? 0.5 : v.volume, // if volume was previously 0, set it to 0.75
 			isMuted,

diff --git a/packages/docs/src/remotion/HomepageVideo/Comp.tsx b/packages/docs/src/remotion/HomepageVideo/Comp.tsx
@@ -16,6 +16,11 @@ export type Trending = {
 	repos: string[];
 	date: string;
 	temperatureInCelsius: number;
+	countryLabel: string;
+	countryPaths: {
+		d: string;
+		class: string;
+	}[];
 };
 
 export type LocationAndTrending = {
@@ -33,11 +38,12 @@ export const getDataAndProps = async () => {
 	)
 		.then((res) => res.json())
 		.then((data) => {
-			console.log('trending data', data);
 			return {
 				repos: data.trending.repos.slice(0, 3),
 				date: data.trending.dateFetched,
 				temperatureInCelsius: Math.round(data.temperature),
+				countryLabel: data.countryLabel,
+				countryPaths: data.countryPaths,
 			};
 		});
 

diff --git a/packages/docs/src/remotion/HomepageVideo/CurrentCountry.tsx b/packages/docs/src/remotion/HomepageVideo/CurrentCountry.tsx
@@ -1,15 +1,16 @@
 import {getBoundingBox, resetPath} from '@remotion/paths';
 import React from 'react';
 import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';
-import {ISO_3166_ALPHA_2_MAPPINGS, countriesPaths} from './paths';
-import type {Location} from './types';
 
 export const CurrentCountry: React.FC<{
 	readonly theme: 'dark' | 'light';
-	readonly location: Location;
-}> = ({theme, location}) => {
-	const paths = countriesPaths.filter((c) => c.class === location.country);
-	const joined = paths.map((p) => p.d).join(' ');
+	readonly countryPaths: {
+		d: string;
+		class: string;
+	}[];
+	readonly countryLabel: string;
+}> = ({theme, countryPaths, countryLabel}) => {
+	const joined = countryPaths.map((p) => p.d).join(' ');
 	const reset = resetPath(joined);
 	const boundingBox = getBoundingBox(reset);
 
@@ -75,7 +76,7 @@ export const CurrentCountry: React.FC<{
 						color: theme === 'dark' ? 'white' : 'black',
 					}}
 				>
-					{ISO_3166_ALPHA_2_MAPPINGS[location.country]}
+					{countryLabel}
 				</div>
 			</AbsoluteFill>
 		</AbsoluteFill>

diff --git a/packages/docs/src/remotion/HomepageVideo/cards/Cards.tsx b/packages/docs/src/remotion/HomepageVideo/cards/Cards.tsx
@@ -79,7 +79,11 @@ export const Cards: React.FC<{
 							temperatureInCelsius={temperatureInCelsius}
 						/>
 					) : index === 2 ? (
-						<CurrentCountry location={location} theme={theme} />
+						<CurrentCountry
+							countryPaths={trending.countryPaths}
+							countryLabel={trending.countryLabel}
+							theme={theme}
+						/>
 					) : (
 						<EmojiCard emojiPositions={emojiPositions} />
 					);