feat: LottiePlayer / NetworkLottiePlayer 추가

Author: MU-Software

apps/pyconkr-admin/src/components/layouts/admin_editor.tsx

@@ -105,7 +105,7 @@ const ReadOnlyValueField: React.FC<{
         )}
         {fieldState.blob.type.startsWith("application/json") && fieldState.blobText && (
           <Box sx={{ maxWidth: "600px", overflow: "auto" }}>
-            <Common.Components.LottieDebugPanel animationData={JSON.parse(fieldState.blobText)} />
+            <Common.Components.LottieDebugPanel data={JSON.parse(fieldState.blobText)} />
           </Box>
         )}
         <a href={value as string}>링크</a>

apps/pyconkr-admin/src/consts/mdx_components.ts

@@ -131,6 +131,8 @@ const MUIMDXComponents: MDXComponents = {
 };
 
 const PyConKRCommonMDXComponents: MDXComponents = {
+  Common__Components__Lottie: Common.Components.LottiePlayer,
+  Common__Components__NetworkLottie: Common.Components.NetworkLottiePlayer,
   Common__Components__MDX__PrimaryStyledDetails: Common.Components.MDX.PrimaryStyledDetails,
   Common__Components__MDX__SecondaryStyledDetails: Common.Components.MDX.SecondaryStyledDetails,
   Common__Components__MDX__Map: Common.Components.MDX.Map,

apps/pyconkr/src/consts/mdx_components.ts

@@ -131,6 +131,8 @@ const MUIMDXComponents: MDXComponents = {
 };
 
 const PyConKRCommonMDXComponents: MDXComponents = {
+  Common__Components__Lottie: Common.Components.LottiePlayer,
+  Common__Components__NetworkLottie: Common.Components.NetworkLottiePlayer,
   Common__Components__MDX__PrimaryStyledDetails: Common.Components.MDX.PrimaryStyledDetails,
   Common__Components__MDX__SecondaryStyledDetails: Common.Components.MDX.SecondaryStyledDetails,
   Common__Components__MDX__Map: Common.Components.MDX.Map,

packages/common/src/components/index.ts

@@ -6,7 +6,11 @@ import {
   RouteRenderer as RouteRendererComponent,
 } from "./dynamic_route";
 import { ErrorFallback as ErrorFallbackComponent } from "./error_handler";
-import { LottieDebugPanel as LottieDebugPanelComponent } from "./lottie";
+import {
+  LottieDebugPanel as LottieDebugPanelComponent,
+  LottiePlayer as LottiePlayerComponent,
+  NetworkLottiePlayer as NetworkLottiePlayerComponent,
+} from "./lottie";
 import { MDXRenderer as MDXRendererComponent } from "./mdx";
 import type { MapPropType as MapComponentPropType } from "./mdx_components/map";
 import { Map as MapComponent } from "./mdx_components/map";
@@ -27,6 +31,8 @@ namespace Components {
   export const MDXRenderer = MDXRendererComponent;
   export const PythonKorea = PythonKoreaComponent;
   export const LottieDebugPanel = LottieDebugPanelComponent;
+  export const LottiePlayer = LottiePlayerComponent;
+  export const NetworkLottiePlayer = NetworkLottiePlayerComponent;
   export const ErrorFallback = ErrorFallbackComponent;
 
   export namespace MDX {

packages/common/src/components/lottie.tsx

@@ -1,52 +1,120 @@
 import { Pause, PlayArrow, Stop } from "@mui/icons-material";
-import { Box, FormControlLabel, IconButton, Stack, Switch } from "@mui/material";
+import { Box, CircularProgress, FormControlLabel, IconButton, Stack, Switch } from "@mui/material";
+import { ErrorBoundary } from "@suspensive/react";
 import * as React from "react";
-import Lottie from "react-lottie";
+import Lottie, { Options } from "react-lottie";
+
+import { ErrorFallback } from "./error_handler";
+import { isValidHttpUrl } from "../utils/string";
 
 type PlayState = "playing" | "paused" | "stopped";
 
+type LottiePlayerProps = {
+  data: unknown;
+  playState?: PlayState;
+  disableLoop?: boolean;
+  renderSettings?: Options["rendererSettings"];
+  style?: React.CSSProperties;
+};
+
 type LottiePlayerStateType = {
+  playState: PlayState;
+};
+
+type LottieDebugPanelStateType = LottiePlayerStateType & {
   loop: boolean;
-  isStopped: boolean;
-  isPaused: boolean;
 };
 
-export const LottieDebugPanel: React.FC<{ animationData: unknown }> = ({ animationData }) => {
-  const [playerState, setPlayerState] = React.useState<LottiePlayerStateType>({
-    loop: true,
-    isStopped: false,
-    isPaused: false,
+const playStateToLottiePlayerState = (playState: PlayState): { isStopped: boolean; isPaused: boolean } => {
+  if (playState === "playing") return { isStopped: false, isPaused: false };
+  if (playState === "paused") return { isStopped: false, isPaused: true };
+  return { isStopped: true, isPaused: true };
+};
+
+export const LottieDebugPanel: React.FC<LottiePlayerProps> = ({
+  data,
+  playState = "playing",
+  disableLoop = false,
+  renderSettings = {},
+  style,
+}) => {
+  const [playerState, setPlayerState] = React.useState<LottieDebugPanelStateType>({
+    playState,
+    loop: !disableLoop,
   });
+  const isPlaying = playerState.playState === "playing";
 
   const toggleLoop = () => setPlayerState((ps) => ({ ...ps, loop: !ps.loop }));
-  const setPlayState = (playState: PlayState) => {
-    if (playState === "playing") setPlayerState((ps) => ({ ...ps, isStopped: false, isPaused: false }));
-    if (playState === "paused") setPlayerState((ps) => ({ ...ps, isStopped: false, isPaused: true }));
-    if (playState === "stopped") setPlayerState((ps) => ({ ...ps, isStopped: true, isPaused: true }));
-  };
+  const setPlayState = (playState: PlayState) => setPlayerState((ps) => ({ ...ps, playState }));
 
   const stop = () => setPlayState("stopped");
-  const togglePause = () => setPlayState(playerState.isPaused ? "playing" : "paused");
+  const togglePause = () => setPlayState(!isPlaying ? "playing" : "paused");
 
   return (
     <Stack direction="column">
       <Box>
         <Lottie
-          isStopped={playerState.isStopped}
-          isPaused={playerState.isPaused}
+          {...playStateToLottiePlayerState(playerState.playState)}
           options={{
-            animationData,
+            animationData: data,
             loop: playerState.loop,
             autoplay: true,
-            rendererSettings: { preserveAspectRatio: "xMidYMid slice" },
+            rendererSettings: { preserveAspectRatio: "xMidYMid slice", ...renderSettings },
           }}
+          style={style}
         />
       </Box>
       <Stack direction="row" spacing={2}>
-        <IconButton onClick={togglePause} children={playerState.isPaused ? <PlayArrow /> : <Pause />} />
+        <IconButton onClick={togglePause} children={!isPlaying ? <PlayArrow /> : <Pause />} />
         <IconButton onClick={stop} children={<Stop />} />
         <FormControlLabel control={<Switch checked={playerState.loop} onChange={toggleLoop} />} label="반복 재생" />
       </Stack>
     </Stack>
   );
 };
+
+export const LottiePlayer: React.FC<LottiePlayerProps> = ({
+  data,
+  playState = "playing",
+  disableLoop = false,
+  renderSettings = {},
+  style,
+}) => (
+  <Lottie
+    {...playStateToLottiePlayerState(playState)}
+    options={{
+      animationData: data,
+      loop: !disableLoop,
+      autoplay: playState === "playing",
+      rendererSettings: { preserveAspectRatio: "xMidYMid slice", ...renderSettings },
+    }}
+    style={style}
+  />
+);
+
+type NetworkLottiePlayerProps = Omit<LottiePlayerProps, "data"> & {
+  url: string;
+  fetchOptions?: RequestInit;
+};
+
+type NetworkLottiePlayerStateType = {
+  data?: unknown | null;
+};
+
+export const NetworkLottiePlayer: React.FC<NetworkLottiePlayerProps> = ErrorBoundary.with(
+  { fallback: ErrorFallback },
+  (props) => {
+    const [playerState, setPlayerState] = React.useState<NetworkLottiePlayerStateType>({});
+
+    React.useEffect(() => {
+      (async () => {
+        if (!isValidHttpUrl(props.url)) throw new Error("Invalid URL for NetworkLottiePlayer: " + props.url);
+
+        const data = JSON.parse(await (await fetch(props.url, props.fetchOptions)).text());
+        setPlayerState((ps) => ({ ...ps, data }));
+      })();
+    }, [props.url, props.fetchOptions]);
+
+    return playerState.data === undefined ? <CircularProgress /> : <LottiePlayer {...props} data={playerState.data} />;
+  }
+);