added animation when the order of stream changes in queue due to upvo…

…tes and downvotes

next-app/components/StreamView/Queue.tsx

@@ -12,6 +12,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 
 type Props = {
   queue: Video[];
@@ -23,6 +24,7 @@ type Props = {
 export default function Queue({ queue, isCreator, creatorId, userId }: Props) {
   const { sendMessage } = useSocket();
   const [isEmptyQueueDialogOpen, setIsEmptyQueueDialogOpen] = useState(false);
+  const [parent] = useAutoAnimate();
 
   function handleVote(id: string, isUpvote: boolean) {
     sendMessage("cast-vote", {
@@ -116,6 +118,7 @@ export default function Queue({ queue, isCreator, creatorId, userId }: Props) {
               </CardContent>
             </Card>
           )}
+          <div className="space-y-4" ref={parent}>
           {queue.map((video) => (
             <Card key={video.id} className="">
               <CardContent className="flex items-center space-x-4 p-4">
@@ -156,6 +159,7 @@ export default function Queue({ queue, isCreator, creatorId, userId }: Props) {
               </CardContent>
             </Card>
           ))}
+          </div>
         </div>
       </div>
       <Dialog

next-app/package.json

@@ -16,6 +16,7 @@
     "format:check": "prettier --check \"**/*.{ts,tsx,json}\""
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.2",
     "@prisma/client": "5.19.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",

ws/package.json

@@ -7,8 +7,7 @@
     "preinstall": "npx only-allow pnpm",
     "dev": "nodemon src/app.ts",
     "start": "node dist/app.js",
-    "build": "prisma generate && npx tsc -b",
-    "postinstall": "prisma generate"
+    "build": "prisma generate && npx tsc -b"
   },
   "keywords": [],
   "author": "",