refactor: use component for conditional rendering of particle

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

@@ -36,7 +36,20 @@ export function ParticleRenderer({
     else if (x > 0.7) next();
   };
 
-  const renderContent = () => {
+  return (
+    <div
+      className="relative flex h-full w-full cursor-pointer items-center justify-center"
+      onClick={handleClick}
+    >
+      <ParticleContent particle={particle} />
+      <div className="absolute right-4 bottom-16">
+        <AckButton particleId={particle.id} acks={particle.acks} />
+      </div>
+    </div>
+  );
+}
+
+function ParticleContent({ particle }: { particle: StreamParticle }) {
   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 */ }
@@ -46,28 +59,4 @@ export function ParticleRenderer({
     default:
       return <FallbackParticleView particle={particle} />;
   }
-  };
-
-  return (
-    <div
-      className="relative flex h-full w-full cursor-pointer items-center justify-center"
-      onClick={handleClick}
-    >
-      {renderContent()}
-      <div className="absolute right-4 bottom-16">
-        <AckButton particleId={particle.id} acks={particle.acks} />
-      </div>
-    </div>
-  );
-}
-
-function RenderParticle({ particle }: { particle: StreamParticle }) {
-  switch (particle.type) {
-    case "media":
-      return <MediaParticleView particle={particle} />;
-    case "text":
-      return <TextParticleView particle={particle} />;
-    default:
-      return <FallbackParticleView particle={particle} />;
-  }
 }