refactor: use component for conditional rendering of particle

js/src/features/playback/particle-renderer.tsx

@@ -36,24 +36,12 @@ export function ParticleRenderer({
     else if (x > 0.7) next();
   };
 
-  const renderContent = () => {
-    switch (particle.type) {
-      case "media":
-        {/* NOTE: it's more robust to re-mount the MediaParticleView when the particle changes, to ensure playback state is well-behaved */ }
-        return <MediaParticleView key={particle.id} particle={particle} />;
-      case "text":
-        return <TextParticleView particle={particle} />;
-      default:
-        return <FallbackParticleView particle={particle} />;
-    }
-  };
-
   return (
     <div
       className="relative flex h-full w-full cursor-pointer items-center justify-center"
       onClick={handleClick}
     >
-      {renderContent()}
+      <ParticleContent particle={particle} />
       <div className="absolute right-4 bottom-16">
         <AckButton particleId={particle.id} acks={particle.acks} />
       </div>
@@ -61,10 +49,11 @@ export function ParticleRenderer({
   );
 }
 
-function RenderParticle({ particle }: { particle: StreamParticle }) {
+function ParticleContent({ particle }: { particle: StreamParticle }) {
   switch (particle.type) {
     case "media":
-      return <MediaParticleView particle={particle} />;
+      {/* NOTE: it's more robust to re-mount the MediaParticleView when the particle changes, to ensure playback state is well-behaved */ }
+      return <MediaParticleView key={particle.id} particle={particle} />;
     case "text":
       return <TextParticleView particle={particle} />;
     default: