├── .github
    └── workflows
    │   └── build.yml
├── .gitignore
├── CONTRIBUTING.md
├── README.md
├── docker-compose.yml
├── next-app
    ├── .dockerignore
    ├── .env.example
    ├── .eslintrc.json
    ├── .gitignore
    ├── .prettierrc
    ├── Dockerfile
    ├── Dockerfile.dev
    ├── Dockerfile.prod
    ├── README.md
    ├── app
    │   ├── api
    │   │   ├── auth
    │   │   │   └── [...nextauth]
    │   │   │   │   └── route.ts
    │   │   ├── spaces
    │   │   │   └── route.ts
    │   │   ├── streams
    │   │   │   ├── downvote
    │   │   │   │   └── route.ts
    │   │   │   ├── empty-queue
    │   │   │   │   └── route.ts
    │   │   │   ├── my
    │   │   │   │   └── route.ts
    │   │   │   ├── next
    │   │   │   │   └── route.ts
    │   │   │   ├── remove
    │   │   │   │   └── route.ts
    │   │   │   ├── route.ts
    │   │   │   └── upvote
    │   │   │   │   └── route.ts
    │   │   └── user
    │   │   │   └── route.ts
    │   ├── auth
    │   │   └── page.tsx
    │   ├── dashboard
    │   │   └── [spaceId]
    │   │   │   └── page.tsx
    │   ├── favicon.ico
    │   ├── globals.css
    │   ├── home
    │   │   └── page.tsx
    │   ├── layout.tsx
    │   ├── opengraph-image.png
    │   ├── page.tsx
    │   └── spaces
    │   │   └── [spaceId]
    │   │       └── page.tsx
    ├── components.json
    ├── components
    │   ├── Appbar.tsx
    │   ├── ErrorScreen.tsx
    │   ├── HomeView.tsx
    │   ├── LoadingScreen.tsx
    │   ├── OldStreamView.tsx
    │   ├── SpacesCard.tsx
    │   ├── StreamView
    │   │   ├── AddSongForm.tsx
    │   │   ├── NowPlaying.tsx
    │   │   ├── Queue.tsx
    │   │   └── index.tsx
    │   ├── ThemeSwitcher.tsx
    │   ├── auth
    │   │   ├── auth-screen.tsx
    │   │   ├── sign-in-card.tsx
    │   │   └── sign-up-card.tsx
    │   ├── provider.tsx
    │   └── ui
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── cardSkeleton.tsx
    │   │   ├── dialog.tsx
    │   │   ├── dropdown-menu.tsx
    │   │   ├── input.tsx
    │   │   ├── separator.tsx
    │   │   ├── skeleton.tsx
    │   │   └── sonner.tsx
    ├── context
    │   └── socket-context.tsx
    ├── docker-compose.yaml
    ├── hooks
    │   └── useRedirect.ts
    ├── lib
    │   ├── auth-options.ts
    │   ├── db.ts
    │   └── utils.ts
    ├── middleware.ts
    ├── next-env.d.ts
    ├── next.config.mjs
    ├── package.json
    ├── pnpm-lock.yaml
    ├── postcss.config.mjs
    ├── prisma
    │   ├── migrations
    │   │   ├── 20240828211233_init
    │   │   │   └── migration.sql
    │   │   ├── 20240828212629_added_ids
    │   │   │   └── migration.sql
    │   │   ├── 20240828214340_add_unique_constraint
    │   │   │   └── migration.sql
    │   │   ├── 20240828215837_add_video_metadata
    │   │   │   └── migration.sql
    │   │   ├── 20240829004903_added_current_stream
    │   │   │   └── migration.sql
    │   │   ├── 20240829011327_add_cascade
    │   │   │   └── migration.sql
    │   │   ├── 20240829012157_added_played_field
    │   │   │   └── migration.sql
    │   │   ├── 20240829012523_optional
    │   │   │   └── migration.sql
    │   │   ├── 20240829023538_added_user_guard
    │   │   │   └── migration.sql
    │   │   ├── 20240829030120_remove_added
    │   │   │   └── migration.sql
    │   │   ├── 20240830172435_add_added_by_to_stream
    │   │   │   └── migration.sql
    │   │   ├── 20240914062749_added_spaces
    │   │   │   └── migration.sql
    │   │   ├── 20240914070128_on_delete_cascade_for_spaces
    │   │   │   └── migration.sql
    │   │   └── migration_lock.toml
    │   └── schema.prisma
    ├── public
    │   ├── google.png
    │   ├── next.svg
    │   ├── opengraph-image.png
    │   └── vercel.svg
    ├── schema
    │   └── credentials-schema.ts
    ├── tailwind.config.ts
    ├── tsconfig.json
    └── types
    │   ├── auth-types.ts
    │   ├── index.d.ts
    │   └── next-auth.d.ts
└── ws
    ├── .dockerignore
    ├── .env.example
    ├── .gitignore
    ├── Dockerfile
    ├── Dockerfile.dev
    ├── package.json
    ├── pnpm-lock.yaml
    ├── prisma
        └── schema.prisma
    ├── src
        ├── StreamManager.ts
        ├── app.ts
        └── utils.ts
    ├── tsconfig.json
    └── tsconfig.tsbuildinfo


/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Build on PR
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches:
 6 |       - main
 7 | 
 8 | jobs:
 9 |   build:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v3
13 | 
14 |       - name: Use Node.js
15 |         uses: actions/setup-node@v3
16 |         with:
17 |           node-version: "20"
18 | 
19 |       - name: Install pnpm
20 |         run: npm install -g pnpm
21 | 
22 |       - name: Install Dependencies
23 |         working-directory: next-app
24 |         run: pnpm install
25 | 
26 |       - name: Generate Prisma client
27 |         working-directory: next-app
28 |         run: pnpm run postinstall
29 | 
30 |       - name: Run Build
31 |         working-directory: next-app
32 |         run: pnpm run build
33 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | */node_modules
2 | */.env
3 | */.next
4 | */dist
5 | */package-lock.json
6 | .DS_Store
7 | */.DS_Store.DS_Store
8 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | Thank you for your interest in contributing to this repository. To ensure a smooth and collaborative environment, please follow these guidelines. Before contributing, set up the project locally using the steps outlined in [README.md](./README.md).
 4 | 
 5 | ## Why these guidelines ?
 6 | 
 7 | Our goal is to create a healthy and inclusive space for contributions. Remember that open-source contribution is a collaborative effort, not a competition.
 8 | 
 9 | ## General guidelines
10 | 
11 | - Work only on one issue at a time since it will provide an opportunity for others to contribute as well.
12 | 
13 | - Note that each open-source repository generally has its own guidelines, similar to these. Always read them before starting your contributions.
14 | 
15 | ## How to get an issue assigned
16 | 
17 | - To get an issue assigned, provide a small description as to how you are planning to tackle this issue.
18 | 
19 | > Ex - If the issue is about UI changes, you should create a design showing how you want it to look on the UI (make it using figma, paint, etc)
20 | 
21 | - This will allow multiple contributors to discuss their approach to tackle the issue. The maintainer will then assign the issue.
22 | 
23 | ## After getting the issue assigned
24 | 
25 | - Create your own branch instead of working directly on the main branch.
26 | 
27 | - Provide feedback every 24-48 hours if an issue is assigned to you. Otherwise, it may be reassigned.
28 | 
29 | - When submitting a pull request, please provide a screenshot or a screen-recording showcasing your work.
30 | 
31 | ## Don't while contributing
32 | 
33 | - Avoid comments like "Please assign this issue to me" or "can i work on this issue ?"
34 | 
35 | - Refrain from tagging the maintainer to assign issues or review pull requests.
36 | 
37 | - Don't make any pull request for issues you are not assigned to. It will be closed without merging.
38 | 
39 | Happy Contributing!
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align='center'>Muzer - 100xDevs</h1>
  2 | 
  3 | ## Table of Contents
  4 | 
  5 | - [Table of Contents](#table-of-contents)
  6 | - [Installation](#installation)
  7 |   - [With Docker](#with-docker)
  8 |   - [Without Docker](#without-docker)
  9 | - [Usage](#usage)
 10 | - [Contributing](#contributing)
 11 | - [Contributors](#contributors)
 12 | 
 13 | ## Installation
 14 | 
 15 | ### With Docker
 16 | 
 17 | 1. Clone the repository:
 18 |    ```bash
 19 |    git clone https://github.com/code100x/muzer.git
 20 |    ```
 21 | 
 22 | 2. Navigate to the project directory:
 23 |    ```bash
 24 |    cd muzer
 25 |    ```
 26 | 
 27 | 3. Create a `.env` file based on the `.env.example` file and configure everything in both the `next-app` and `ws` folders.
 28 | 
 29 | 4. Run the following command to start the application:
 30 |    ```bash
 31 |    docker compose up -d   
 32 |    ```
 33 | 
 34 | ### Without Docker
 35 | 
 36 | 1. Clone the repository:
 37 |    ```bash
 38 |    git clone https://github.com/code100x/muzer.git
 39 |    ```
 40 | 
 41 | 2. Navigate to the project directory:
 42 |    ```bash
 43 |    cd muzer
 44 |    ```
 45 | 
 46 | 3. Now Install the dependencies:
 47 |    ```bash
 48 |    cd next-app
 49 |    pnpm install
 50 |    cd ..
 51 |    cd ws 
 52 |    pnpm install
 53 |    ```
 54 | 4. Create a `.env` file based on the `.env.example` file and configure everything in both the `next-app` and `ws` folders.
 55 | 
 56 | 5. For postgres, you need to run the following command:
 57 |    ```bash
 58 |    docker run -d \
 59 |    --name muzer-db \
 60 |    -e POSTGRES_USER=myuser \
 61 |    -e POSTGRES_PASSWORD=mypassword \
 62 |    -e POSTGRES_DB=mydatabase \
 63 |    -p 5432:5432 \
 64 |    postgres
 65 |    ```
 66 | 
 67 | 6. For redis, you need to run the following command:
 68 |    ```bash
 69 |    docker run -d \
 70 |    --name muzer-redis \
 71 |    -e REDIS_USERNAME=admin \
 72 |    -e REDIS_PASSWORD=root \
 73 |    -e REDIS_PORT=6379 \
 74 |    -e REDIS_HOST="127.0.0.1" \
 75 |    -e REDIS_BROWSER_STACK_PORT=8001 \
 76 |    redis/redis-stack:latest 
 77 |    ```
 78 | 
 79 | 7. Now do the following:
 80 |    ```bash
 81 |    cd next-app
 82 |    pnpm postinstall
 83 |    cd ..
 84 |    cd ws 
 85 |    pnpm postinstall
 86 |    ```
 87 | 
 88 | 8. Run the following command to start the application:
 89 |    ```bash
 90 |     cd next-app
 91 |     pnpm dev
 92 |     cd ..
 93 |     cd ws
 94 |     pnpm dev
 95 |    ```
 96 | 
 97 | 9. To access the prisma studio, run the following command:
 98 |    ```bash
 99 |    cd next-app
100 |    pnpm run prisma:studio
101 |    ```
102 | 
103 | ## Usage 
104 | 
105 | 1. Access the application in your browser at http://localhost:3000
106 | 2. Access the redis stack at http://localhost:8001/redis-stack/browser
107 | 3. Access the prisma studio at http://localhost:5555
108 | 
109 | ## Contributing
110 | 
111 | We welcome contributions from the community! To contribute to Muzer, follow these steps:
112 | 
113 | 1. Fork the repository.
114 | 
115 | 2. Create a new branch (`git checkout -b feature/fooBar`).
116 | 
117 | 3. Make your changes and commit them (`git commit -am 'Add some fooBar'`).
118 | 
119 | 4. Push to the branch (`git push origin -u feature/fooBar`).
120 | 
121 | 5. Create a new Pull Request.
122 | 
123 | For major changes, please open an issue first to discuss what you would like to change.
124 | 
125 | Read our [contribution guidelines](./CONTRIBUTING.md) for more details.
126 | 
127 | ## Contributors
128 | 
129 | <a href="https://github.com/code100x/muzer/graphs/contributors">
130 |   <img src="https://contrib.rocks/image?repo=code100x/muzer" />
131 | </a>
132 | 
133 | If you continue to face issues, please open a GitHub issue with details about the problem you're experiencing.
134 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | services:
 2 |   app:
 3 |     container_name: muzer-docker
 4 |     build:
 5 |       context: ./next-app
 6 |       dockerfile: Dockerfile.dev
 7 |     env_file:
 8 |       - ./next-app/.env
 9 |     ports:
10 |       - "3000:3000"
11 |       - "5555:5555"
12 |     depends_on:
13 |       postgres:
14 |         condition: service_healthy
15 |       redis:
16 |         condition: service_healthy
17 |     volumes:
18 |       - ./next-app:/usr/src/app
19 |       - /usr/src/app/node_modules
20 | 
21 |   postgres:
22 |     container_name: prisma-postgres
23 |     image: postgres:alpine
24 |     restart: always
25 |     env_file:
26 |       - ./next-app/.env
27 |     ports:
28 |       - "5432:5432"
29 |     volumes:
30 |       - postgres-data:/var/lib/postgresql/data
31 |     healthcheck:
32 |       test: ["CMD-SHELL", "pg_isready -U postgres"]
33 |       interval: 10s
34 |       timeout: 5s
35 |       retries: 5
36 |       
37 |   redis:
38 |     container_name: redis-server
39 |     image: redis/redis-stack:latest
40 |     restart: always
41 |     env_file:
42 |       - ./ws/.env
43 |     ports:
44 |       - "6379:6379"
45 |       - "8001:8001"
46 |     environment:
47 |       REDIS_ARGS: "--requirepass root --user admin on >root ~* allcommands --user default off nopass nocommands"
48 |     volumes:
49 |       - redis-data:/data
50 |     healthcheck:
51 |       test: ["CMD", "redis-cli", "ping"]
52 |       interval: 10s
53 |       timeout: 5s
54 |       retries: 5
55 | 
56 |   websockets:
57 |     container_name: websockets
58 |     restart: always
59 |     build:
60 |       context: ./ws
61 |       dockerfile: Dockerfile.dev
62 |     env_file:
63 |       - ./ws/.env
64 |     ports:
65 |       - "8080:8080"
66 |     depends_on:
67 |       postgres:
68 |         condition: service_healthy
69 |       redis:
70 |         condition: service_healthy
71 |     volumes:
72 |       - ./ws:/usr/src/app
73 |       - /usr/src/app/node_modules
74 | 
75 | volumes:
76 |   postgres-data:
77 |     external: false
78 |   redis-data:
79 |     external: false


--------------------------------------------------------------------------------
/next-app/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .git
3 | .gitignore
4 | .env.example


--------------------------------------------------------------------------------
/next-app/.env.example:
--------------------------------------------------------------------------------
 1 | # Without Docker Local Setup
 2 | GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID
 3 | GOOGLE_CLIENT_SECRET=YOUR_GOOGLE_CLIENT_SECRET
 4 | NEXTAUTH_URL=http://localhost:3000
 5 | NEXTAUTH_SECRET=YOUR_NEXTAUTH_SECRET
 6 | DATABASE_URL=postgresql://postgres:postgres@postgres:5432/postgres
 7 | NEXT_PUBLIC_SECRET=YOUR_NEXTAUTH_SECRET
 8 | NEXT_PUBLIC_WSS_URL="ws://localhost:8080"
 9 | 
10 | # With Docker 
11 | 
12 | # APP
13 | APP_PORT=3000
14 | GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID
15 | GOOGLE_CLIENT_SECRET=YOUR_GOOGLE_CLIENT_SECRET
16 | NEXTAUTH_SECRET="YOUR_NEXTAUTH_SECRET"
17 | NEXT_PUBLIC_SECRET="YOUR_NEXTAUTH_SECRET"
18 | NEXT_PUBLIC_WSS_URL="ws://localhost:3000"
19 | NEXT_PUBLIC_PUBLICKEY="YOUR_PUBLIC_KEY"
20 | NEXT_PUBLIC_SOL_PER_PAYMENT="YOUR_SOL_PER_PAYMENT"
21 | 
22 | # Postgres DB
23 | DATABASE_URL=postgresql://postgres:postgres@postgres:5432/postgres
24 | POSTGRES_PORT=5432
25 | 
26 | # Prisma-Studio
27 | POSTGRES_URL=postgresql://postgres:postgres@postgres:5432/postgres
28 | POSTGRES_HOST=postgres
29 | POSTGRES_USERNAME=postgres
30 | POSTGRES_PASSWORD=postgres


--------------------------------------------------------------------------------
/next-app/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals",
3 |   "rules": {
4 |     "react-hooks/exhaustive-deps": "off"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/next-app/.gitignore:
--------------------------------------------------------------------------------
1 | .next
2 | node_modules
3 | dist
4 | .env
5 | 


--------------------------------------------------------------------------------
/next-app/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": ["prettier-plugin-tailwindcss"]
3 | }
4 | 


--------------------------------------------------------------------------------
/next-app/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:22-alpine
 2 | 
 3 | WORKDIR /app
 4 | 
 5 | COPY package.json .
 6 | 
 7 | RUN npm install pnpm -g --ignore-scripts
 8 | 
 9 | RUN pnpm install --ignore-scripts
10 | 
11 | COPY . .
12 | 
13 | RUN DATABASE_URL=$DATABASE_URL npx prisma generate
14 | RUN DATABASE_URL=$DATABASE_URL pnpm run build
15 | 
16 | EXPOSE 3000
17 | 
18 | CMD ["pnpm", "run", "start"]
19 | 


--------------------------------------------------------------------------------
/next-app/Dockerfile.dev:
--------------------------------------------------------------------------------
 1 | # Stage 1: Install dependencies
 2 | FROM node:22-alpine AS installer
 3 | 
 4 | WORKDIR /usr/src/app
 5 | RUN corepack enable pnpm
 6 | COPY package.json pnpm-lock.yaml ./
 7 | RUN pnpm install --frozen-lockfile --ignore-scripts
 8 | COPY . .
 9 | RUN pnpm postinstall
10 | 
11 | # Stage 2: Development server
12 | FROM node:22-alpine AS dev
13 | 
14 | WORKDIR /usr/src/app
15 | RUN corepack enable pnpm
16 | COPY --from=installer /usr/src/app/ ./
17 | CMD [ "pnpm", "dev:docker" ]


--------------------------------------------------------------------------------
/next-app/Dockerfile.prod:
--------------------------------------------------------------------------------
 1 | # Stage 1: Install dependencies
 2 | FROM node:22-alpine AS installer
 3 | 
 4 | WORKDIR /usr/src/app
 5 | RUN apk add --no-cache libc6-compat
 6 | COPY package.json pnpm-lock.yaml ./
 7 | COPY prisma ./prisma
 8 | 
 9 | RUN \
10 |     if [ -f pnpm-lock.yaml ]; then \
11 |     corepack enable pnpm && pnpm install --frozen-lockfile --ignore-scripts; \
12 |     else \
13 |     echo "pnpm-lock.yaml not found" && exit 1; \
14 |     fi
15 | 
16 | # Stage 2: Build stage
17 | FROM node:22-alpine AS builder
18 | WORKDIR /usr/src/app
19 | 
20 | COPY --from=installer /usr/src/app/node_modules ./node_modules
21 | COPY --from=installer /usr/src/app/prisma ./prisma
22 | 
23 | RUN DATABASE_URL=$DATABASE_URL npx prisma generate
24 | 
25 | COPY . .
26 | 
27 | RUN \
28 |     if [ -f pnpm-lock.yaml ]; then \
29 |     corepack enable pnpm && pnpm run build; \
30 |     else \
31 |     echo "pnpm-lock.yaml not found" && exit 1; \
32 |     fi
33 | 
34 | # Stage 3: Run stage 
35 | FROM node:22-alpine AS runner
36 | WORKDIR /usr/src/app
37 | 
38 | ENV NODE_ENV production
39 | 
40 | RUN addgroup --system --gid 1001 nodejs
41 | RUN adduser --system --uid 1001 nextjs
42 | 
43 | COPY --from=builder usr/src/app/public ./public
44 | 
45 | RUN mkdir .next
46 | RUN chown nextjs:nodejs .next
47 | 
48 | COPY --from=builder --chown=nextjs:nodejs  usr/src/app/.next/standalone ./
49 | COPY --from=builder --chown=nextjs:nodejs usr/src/app/.next/static ./.next/static
50 | 
51 | USER nextjs
52 | 
53 | EXPOSE 3000
54 | 
55 | # For Standalone build
56 | ENV PORT 3000 
57 | ENV HOSTNAME "0.0.0.0"
58 | 
59 | CMD [ "node", "server.js" ]
60 | 


--------------------------------------------------------------------------------
/next-app/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align='center'>Muzer</h1>
 2 | 
 3 | ## Table of contents
 4 | 
 5 | 
 6 | 1. Clone the repository:
 7 |    ```bash
 8 |    git clone https://github.com/code100x/muzer
 9 |    ```
10 | 2. Navigate to the project directory:
11 |    ```bash
12 |    cd muzer
13 |    ```
14 | 3. Run the following command to start the application:
15 |    ```bash
16 |    docker volume create postgres-data # (optional) run this command if you face any mount volume / volume not exist error
17 |    docker-compose up -d
18 |    ```
19 | 
20 | ### Without Docker
21 | 
22 | 1. clone the repository:
23 |    ```bash
24 |    git clone https://github.com/code100x/muzer
25 |    ```
26 | 2. Navigate to the project directory:
27 |    ```bash
28 |    cd muzer
29 |    ```
30 | 3. (optional) Start a PostgreSQL database using Docker:
31 |    ```bash
32 |    docker run -d \
33 |        --name muzer-db \
34 |        -e POSTGRES_USER=myuser \
35 |        -e POSTGRES_PASSWORD=mypassword \
36 |        -e POSTGRES_DB=mydatabase \
37 |        -p 5432:5432 \
38 |        postgres
39 |    ```
40 |    based on this command the connection url will be
41 |    ```
42 |    DATABASE_URL=postgresql://myuser:mypassword@localhost:5432/mydatabase?schema=public
43 |    ```
44 | 4. Create a `.env` file based on the `.env.example` file and configure the `DATABASE_URL` with your postgreSQL connection string.
45 | 5. Install dependencies:
46 |    ```bash
47 |    pnpm install
48 |    ```
49 | 6. Run database migrations:
50 |    ```bash
51 |    pnpm run prisma:migrate
52 |    ```
53 | 7. Start the development server:
54 |    ```bash
55 |    pnpm run dev
56 |    ```
57 | ## Usage
58 | 
59 | 1. Access the aplication in your browser at `http://localhost:3000`
60 | 


--------------------------------------------------------------------------------
/next-app/app/api/auth/[...nextauth]/route.ts:
--------------------------------------------------------------------------------
1 | import NextAuth from "next-auth";
2 | 
3 | import { authOptions } from "@/lib/auth-options";
4 | 
5 | const handler = NextAuth(authOptions);
6 | 
7 | export { handler as GET, handler as POST };


--------------------------------------------------------------------------------
/next-app/app/api/spaces/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextRequest, NextResponse } from "next/server";
  2 | import prisma from "@/lib/db";
  3 | import { authOptions } from "@/lib/auth-options";
  4 | import { getServerSession } from "next-auth";
  5 | 
  6 | export async function POST(req: NextRequest) {
  7 |   try {
  8 |     
  9 |     const session = await getServerSession(authOptions);
 10 |     
 11 |     
 12 |     if (!session?.user?.id) {
 13 |       return NextResponse.json(
 14 |         { success: false, message: "You must be logged in to create a space" },
 15 |         { status: 401 }
 16 |       );
 17 |     }
 18 | 
 19 |    
 20 |     const data = await req.json();
 21 |     
 22 |     
 23 |     if (!data.spaceName) {
 24 |       return NextResponse.json(
 25 |         { success: false, message: "Space name is required" },
 26 |         { status: 400 }
 27 |       );
 28 |     }
 29 | 
 30 |     
 31 |     const space = await prisma.space.create({
 32 |       data: {
 33 |         name: data.spaceName,
 34 |         hostId: session.user.id,
 35 |       },
 36 |     });
 37 | 
 38 |     
 39 |     return NextResponse.json(
 40 |       { success: true, message: "Space created successfully", space },
 41 |       { status: 201 }
 42 |     );
 43 |   } catch (error: any) {
 44 |     
 45 |     if (error.message === "Unauthenticated Request") {
 46 |       return NextResponse.json(
 47 |         { success: false, message: "You must be logged in to create a space" },
 48 |         { status: 401 }
 49 |       );
 50 |     }
 51 | 
 52 |     
 53 |     return NextResponse.json(
 54 |       { success: false, message: `An unexpected error occurred: ${error.message}` },
 55 |       { status: 500 }
 56 |     );
 57 |   }
 58 | }
 59 | 
 60 | 
 61 | 
 62 | export async function DELETE(req:NextRequest) {
 63 |     try {
 64 |         const spaceId = req.nextUrl.searchParams.get("spaceId");
 65 |         const session = await getServerSession(authOptions);
 66 |         if (!session?.user?.id) {
 67 |           return NextResponse.json(
 68 |             { success: false, message: "You must be logged in to delete a space" },
 69 |             { status: 401 }
 70 |           );
 71 |         }
 72 | 
 73 |        if(!spaceId){
 74 |         return NextResponse.json(
 75 |             { success: false, message: "Space Id is required" },
 76 |             { status: 401 }
 77 |           );
 78 |        }
 79 |        console.log(spaceId)
 80 |         const space = await prisma.space.findUnique({
 81 |           where: { id: spaceId },
 82 |         });
 83 |     
 84 |         if (!space) {
 85 |           return NextResponse.json(
 86 |             { success: false, message: "Space not found" },
 87 |             { status: 404 }
 88 |           );
 89 |         }
 90 |     
 91 |         
 92 |         if (space.hostId !== session.user.id) {
 93 |           return NextResponse.json(
 94 |             { success: false, message: "You are not authorized to delete this space" },
 95 |             { status: 403 }
 96 |           );
 97 |         }
 98 |     
 99 |         
100 |         await prisma.space.delete({
101 |           where: { id: spaceId },
102 |         });
103 |     
104 |         
105 |         return NextResponse.json(
106 |           { success: true, message: "Space deleted successfully" },
107 |           { status: 200 }
108 |         );
109 |       } catch (error: any) {
110 |         
111 |         console.error("Error deleting space:", error);
112 |         return NextResponse.json(
113 |           { success: false, message: `Error deleting space: ${error.message}` },
114 |           { status: 500 }
115 |         );
116 |       }
117 | }
118 | 
119 | export async function GET(req:NextRequest) {
120 |     try {
121 |         const session = await getServerSession(authOptions);
122 |         if (!session?.user?.id) {
123 |             return NextResponse.json(
124 |               { success: false, message: "You must be logged in to retrieve space information" },
125 |               { status: 401 }
126 |             );
127 |           }
128 |           const spaceId = req.nextUrl.searchParams.get("spaceId");
129 | 
130 |             // If spaceId exist return the hostId
131 |           if (spaceId) {
132 |             const space = await prisma.space.findUnique({
133 |               where: { id: spaceId },
134 |               select: { hostId: true },
135 |             });
136 |       
137 |             if (!space) {
138 |               return NextResponse.json(
139 |                 { success: false, message: "Space not found" },
140 |                 { status: 404 }
141 |               );
142 |             }
143 |       
144 |             return NextResponse.json(
145 |               { success: true, message: "Host ID retrieved successfully", hostId: space.hostId },
146 |               { status: 200 }
147 |             );
148 |           }
149 |       
150 |           // If no spaceId is provided, retrieve all spaces
151 |         const spaces=await prisma.space.findMany({
152 |             where:{
153 |                 hostId:session.user.id
154 |             }
155 |         })
156 |         return NextResponse.json(
157 |             { success: true, message: "Spaces retrieved successfully", spaces },
158 |             { status: 200 })
159 |       
160 |     } catch (error:any) {
161 |         console.error("Error retrieving space:", error);
162 |     return NextResponse.json(
163 |       { success: false, message: `Error retrieving space: ${error.message}` },
164 |       { status: 500 }
165 |     );
166 |         
167 |     }
168 | }
169 | 


--------------------------------------------------------------------------------
/next-app/app/api/streams/downvote/route.ts:
--------------------------------------------------------------------------------
 1 | import { authOptions } from "@/lib/auth-options";
 2 | import db from "@/lib/db";
 3 | import { getServerSession } from "next-auth";
 4 | import { NextRequest, NextResponse } from "next/server";
 5 | import { z } from "zod";
 6 | 
 7 | const UpvoteSchema = z.object({
 8 |   streamId: z.string(),
 9 | });
10 | 
11 | export async function POST(req: NextRequest) {
12 |   const session = await getServerSession(authOptions);
13 | 
14 |   if (!session?.user.id) {
15 |     return NextResponse.json(
16 |       {
17 |         message: "Unauthenticated",
18 |       },
19 |       {
20 |         status: 403,
21 |       },
22 |     );
23 |   }
24 |   const user = session.user;
25 | 
26 |   try {
27 |     const data = UpvoteSchema.parse(await req.json());
28 |     await db.upvote.delete({
29 |       where: {
30 |         userId_streamId: {
31 |           userId: user.id,
32 |           streamId: data.streamId,
33 |         },
34 |       },
35 |     });
36 | 
37 |     return NextResponse.json({
38 |       message: "Done!",
39 |     });
40 |   } catch (e) {
41 |     return NextResponse.json(
42 |       {
43 |         message: "Error while upvoting",
44 |       },
45 |       {
46 |         status: 403,
47 |       },
48 |     );
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/next-app/app/api/streams/empty-queue/route.ts:
--------------------------------------------------------------------------------
 1 | import { authOptions } from "@/lib/auth-options";
 2 | import db from "@/lib/db";
 3 | import { getServerSession } from "next-auth";
 4 | import { NextRequest, NextResponse } from "next/server";
 5 | 
 6 | export async function POST(req:NextRequest) {
 7 |   const session = await getServerSession(authOptions);
 8 | 
 9 |   if (!session?.user) {
10 |     return NextResponse.json(
11 |       {
12 |         message: "Unauthenticated",
13 |       },
14 |       {
15 |         status: 403,
16 |       },
17 |     );
18 |   }
19 |   const user = session.user;
20 |   const data = await req.json()
21 | 
22 |   try {
23 |     await db.stream.updateMany({
24 |       where: {
25 |         userId: user.id,
26 |         played: false,
27 |         spaceId:data.spaceId
28 |       },
29 |       data: {
30 |         played: true,
31 |         playedTs: new Date(),
32 |       },
33 |     });
34 | 
35 |     return NextResponse.json({
36 |       message: "Queue emptied successfully",
37 |     });
38 |   } catch (error) {
39 |     console.error("Error emptying queue:", error);
40 |     return NextResponse.json(
41 |       {
42 |         message: "Error while emptying the queue",
43 |       },
44 |       {
45 |         status: 500,
46 |       },
47 |     );
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/next-app/app/api/streams/my/route.ts:
--------------------------------------------------------------------------------
 1 | import db from "@/lib/db";
 2 | import { authOptions } from "@/lib/auth-options";
 3 | import { getServerSession } from "next-auth";
 4 | import { NextRequest, NextResponse } from "next/server";
 5 | 
 6 | export async function GET(req: NextRequest) {
 7 |   const session = await getServerSession(authOptions);
 8 | 
 9 |   if (!session?.user) {
10 |     return NextResponse.json(
11 |       {
12 |         message: "Unauthenticated",
13 |       },
14 |       {
15 |         status: 403,
16 |       },
17 |     );
18 |   }
19 |   const user = session.user;
20 | 
21 |   const streams = await db.stream.findMany({
22 |     where: {
23 |       userId: user.id,
24 |     },
25 |     include: {
26 |       _count: {
27 |         select: {
28 |           upvotes: true,
29 |         },
30 |       },
31 |       upvotes: {
32 |         where: {
33 |           userId: user.id,
34 |         },
35 |       },
36 |     },
37 |   });
38 | 
39 |   return NextResponse.json({
40 |     streams: streams.map(({ _count, ...rest }) => ({
41 |       ...rest,
42 |       upvotes: _count.upvotes,
43 |       haveUpvoted: rest.upvotes.length ? true : false,
44 |     })),
45 |   });
46 | }
47 | 


--------------------------------------------------------------------------------
/next-app/app/api/streams/next/route.ts:
--------------------------------------------------------------------------------
 1 | import { authOptions } from "@/lib/auth-options";
 2 | import db from "@/lib/db";
 3 | import { getServerSession } from "next-auth";
 4 | import { NextRequest, NextResponse } from "next/server";
 5 | 
 6 | export async function GET(req: NextRequest) {
 7 |   const session = await getServerSession(authOptions);
 8 | 
 9 |   if (!session?.user.id) {
10 |     return NextResponse.json(
11 |       {
12 |         message: "Unauthenticated",
13 |       },
14 |       {
15 |         status: 403,
16 |       },
17 |     );
18 |   }
19 |   const user = session.user;
20 |   const spaceId = req.nextUrl.searchParams.get("spaceId");
21 | 
22 |   const mostUpvotedStream = await db.stream.findFirst({
23 |     where: {
24 |       userId: user.id,
25 |       played: false,
26 |       spaceId:spaceId
27 |     },
28 |     orderBy: {
29 |       upvotes: {
30 |         _count: "desc",
31 |       },
32 |     },
33 |   });
34 | 
35 |   await Promise.all([
36 |     db.currentStream.upsert({
37 |       where: {
38 |         spaceId:spaceId as string
39 |       },
40 |       update: {
41 |         userId: user.id,
42 |         streamId: mostUpvotedStream?.id,
43 |         spaceId:spaceId
44 |       },
45 |       create: {
46 |         userId: user.id,
47 |         streamId: mostUpvotedStream?.id,
48 |         spaceId:spaceId 
49 |       },
50 |     }),
51 |     db.stream.update({
52 |       where: {
53 |         id: mostUpvotedStream?.id ?? "",
54 |       },
55 |       data: {
56 |         played: true,
57 |         playedTs: new Date(),
58 |       },
59 |     }),
60 |   ]);
61 | 
62 |   return NextResponse.json({
63 |     stream: mostUpvotedStream,
64 |   });
65 | }
66 | 


--------------------------------------------------------------------------------
/next-app/app/api/streams/remove/route.ts:
--------------------------------------------------------------------------------
 1 | import { authOptions } from "@/lib/auth-options";
 2 | import db from "@/lib/db";
 3 | import { getServerSession } from "next-auth";
 4 | import { NextRequest, NextResponse } from "next/server";
 5 | import { z } from "zod";
 6 | 
 7 | const RemoveStreamSchema = z.object({
 8 |   streamId: z.string(),
 9 |   spaceId:z.string()
10 | });
11 | 
12 | export async function DELETE(req: NextRequest) {
13 |   const session = await getServerSession(authOptions);
14 | 
15 |   if (!session?.user.id) {
16 |     return NextResponse.json(
17 |       {
18 |         message: "Unauthenticated",
19 |       },
20 |       {
21 |         status: 403,
22 |       },
23 |     );
24 |   }
25 |   const user = session.user;
26 | 
27 |   try {
28 |     const { searchParams } = new URL(req.url);
29 |     const streamId = searchParams.get("streamId");
30 |     const spaceId = searchParams.get('spaceId')
31 | 
32 |     if (!streamId) {
33 |       return NextResponse.json(
34 |         {
35 |           message: "Stream ID is required",
36 |         },
37 |         {
38 |           status: 400,
39 |         },
40 |       );
41 |     }
42 | 
43 |     await db.stream.delete({
44 |       where: {
45 |         id: streamId,
46 |         userId: user.id,
47 |         spaceId:spaceId
48 |       },
49 |     });
50 | 
51 |     return NextResponse.json({
52 |       message: "Song removed successfully",
53 |     });
54 |   } catch (e) {
55 |     return NextResponse.json(
56 |       {
57 |         message: "Error while removing the song",
58 |       },
59 |       {
60 |         status: 400,
61 |       },
62 |     );
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/next-app/app/api/streams/route.ts:
--------------------------------------------------------------------------------
  1 | import { z } from "zod";
  2 | import { NextRequest, NextResponse } from "next/server";
  3 | import db from "@/lib/db";
  4 | //@ts-ignore
  5 | import youtubesearchapi from "youtube-search-api";
  6 | import { YT_REGEX } from "@/lib/utils";
  7 | import { getServerSession } from "next-auth";
  8 | import { authOptions } from "@/lib/auth-options";
  9 | 
 10 | 
 11 | const CreateStreamSchema = z.object({
 12 |   creatorId: z.string(),
 13 |   url: z.string(),
 14 |   spaceId:z.string()
 15 | });
 16 | 
 17 | const MAX_QUEUE_LEN = 20;
 18 | 
 19 | export async function POST(req: NextRequest) {
 20 |   try {
 21 |     const session = await getServerSession(authOptions);
 22 | 
 23 |     if (!session?.user.id) {
 24 |       return NextResponse.json(
 25 |         {
 26 |           message: "Unauthenticated",
 27 |         },
 28 |         {
 29 |           status: 403,
 30 |         },
 31 |       );
 32 |     }
 33 |     const user = session.user;
 34 | 
 35 |     const data = CreateStreamSchema.parse(await req.json());
 36 | 
 37 |     if (!data.url.trim()) {
 38 |       return NextResponse.json(
 39 |         {
 40 |           message: "YouTube link cannot be empty",
 41 |         },
 42 |         {
 43 |           status: 400,
 44 |         },
 45 |       );
 46 |     }
 47 | 
 48 |     const isYt = data.url.match(YT_REGEX);
 49 |     const videoId = data.url ? data.url.match(YT_REGEX)?.[1] : null;
 50 |     if (!isYt || !videoId) {
 51 |       return NextResponse.json(
 52 |         {
 53 |           message: "Invalid YouTube URL format",
 54 |         },
 55 |         {
 56 |           status: 400,
 57 |         },
 58 |       );
 59 |     }
 60 | 
 61 |     const res = await youtubesearchapi.GetVideoDetails(videoId);
 62 | 
 63 |     // Check if the user is not the creator
 64 |     if (user.id !== data.creatorId) {
 65 |       const tenMinutesAgo = new Date(Date.now() - 10 * 60 * 1000);
 66 |       const twoMinutesAgo = new Date(Date.now() - 2 * 60 * 1000);
 67 | 
 68 |       const userRecentStreams = await db.stream.count({
 69 |         where: {
 70 |           userId: data.creatorId,
 71 |           addedBy: user.id,
 72 |           createAt: {
 73 |             gte: tenMinutesAgo,
 74 |           },
 75 |         },
 76 |       });
 77 | 
 78 |       // Check for duplicate song in the last 10 minutes
 79 |       const duplicateSong = await db.stream.findFirst({
 80 |         where: {
 81 |           userId: data.creatorId,
 82 |           extractedId: videoId,
 83 |           createAt: {
 84 |             gte: tenMinutesAgo,
 85 |           },
 86 |         },
 87 |       });
 88 |       if (duplicateSong) {
 89 |         return NextResponse.json(
 90 |           {
 91 |             message: "This song was already added in the last 10 minutes",
 92 |           },
 93 |           {
 94 |             status: 429,
 95 |           },
 96 |         );
 97 |       }
 98 | 
 99 |       // Rate limiting checks for non-creator users
100 |       const streamsLastTwoMinutes = await db.stream.count({
101 |         where: {
102 |           userId: data.creatorId,
103 |           addedBy: user.id,
104 |           createAt: {
105 |             gte: twoMinutesAgo,
106 |           },
107 |         },
108 |       });
109 | 
110 |       if (streamsLastTwoMinutes >= 2) {
111 |         return NextResponse.json(
112 |           {
113 |             message:
114 |               "Rate limit exceeded: You can only add 2 songs per 2 minutes",
115 |           },
116 |           {
117 |             status: 429,
118 |           },
119 |         );
120 |       }
121 | 
122 |       if (userRecentStreams >= 5) {
123 |         return NextResponse.json(
124 |           {
125 |             message:
126 |               "Rate limit exceeded: You can only add 5 songs per 10 minutes",
127 |           },
128 |           {
129 |             status: 429,
130 |           },
131 |         );
132 |       }
133 |     }
134 | 
135 |     const thumbnails = res.thumbnail.thumbnails;
136 |     thumbnails.sort((a: { width: number }, b: { width: number }) =>
137 |       a.width < b.width ? -1 : 1,
138 |     );
139 | 
140 |     const existingActiveStreams = await db.stream.count({
141 |       where: {
142 |         spaceId: data.spaceId,
143 |         played: false,
144 |       },
145 |     });
146 | 
147 |     if (existingActiveStreams >= MAX_QUEUE_LEN) {
148 |       return NextResponse.json(
149 |         {
150 |           message: "Queue is full",
151 |         },
152 |         {
153 |           status: 429,
154 |         },
155 |       );
156 |     }
157 | 
158 |     const stream = await db.stream.create({
159 |       data: {
160 |         userId: data.creatorId,
161 |         addedBy: user.id,
162 |         url: data.url,
163 |         extractedId: videoId,
164 |         type: "Youtube",
165 |         title: res.title ?? "Can't find video",
166 |         smallImg:
167 |           (thumbnails.length > 1
168 |             ? thumbnails[thumbnails.length - 2].url
169 |             : thumbnails[thumbnails.length - 1].url) ??
170 |           "https://cdn.pixabay.com/photo/2024/02/28/07/42/european-shorthair-8601492_640.jpg",
171 |         bigImg:
172 |           thumbnails[thumbnails.length - 1].url ??
173 |           "https://cdn.pixabay.com/photo/2024/02/28/07/42/european-shorthair-8601492_640.jpg",
174 |         spaceId:data.spaceId
175 |       },
176 |     });
177 | 
178 |     return NextResponse.json({
179 |       ...stream,
180 |       hasUpvoted: false,
181 |       upvotes: 0,
182 |     });
183 |   } catch (e) {
184 |     console.error(e);
185 |     return NextResponse.json(
186 |       {
187 |         message: "Error while adding a stream",
188 |       },
189 |       {
190 |         status: 500,
191 |       },
192 |     );
193 |   }
194 | }
195 | 
196 | export async function GET(req: NextRequest) {
197 |   const spaceId = req.nextUrl.searchParams.get("spaceId");
198 |   const session = await getServerSession(authOptions);
199 |   if (!session?.user.id) {
200 |     return NextResponse.json(
201 |       {
202 |         message: "Unauthenticated",
203 |       },
204 |       {
205 |         status: 403,
206 |       },
207 |     );
208 |   }
209 |   const user = session.user;
210 | 
211 |   if (!spaceId) {
212 |     return NextResponse.json({
213 |         message: "Error"
214 |     }, {
215 |         status: 411
216 |     })
217 | }
218 | 
219 |   const [space, activeStream] = await Promise.all([
220 |     db.space.findUnique({
221 |       where: {
222 |           id: spaceId,
223 |       },
224 |       include: {
225 |           streams: {
226 |               include: {
227 |                   _count: {
228 |                       select: {
229 |                           upvotes: true
230 |                       }
231 |                   },
232 |                   upvotes: {
233 |                       where: {
234 |                           userId: session?.user.id
235 |                       }
236 |                   }
237 | 
238 |               },
239 |               where:{
240 |                   played:false
241 |               }
242 |           },
243 |           _count: {
244 |               select: {
245 |                   streams: true
246 |               }
247 |           },                
248 | 
249 |       }
250 |       
251 |   }),
252 |   db.currentStream.findFirst({
253 |       where: {
254 |           spaceId: spaceId
255 |       },
256 |       include: {
257 |           stream: true
258 |       }
259 |   })
260 |   ]);
261 | 
262 |   const hostId =space?.hostId;
263 |   const isCreator = session.user.id=== hostId
264 | 
265 |   return NextResponse.json({
266 |     streams: space?.streams.map(({_count, ...rest}) => ({
267 |         ...rest,
268 |         upvotes: _count.upvotes,
269 |         haveUpvoted: rest.upvotes.length ? true : false
270 |     })),
271 |     activeStream,
272 |     hostId,
273 |     isCreator,
274 |     spaceName:space?.name
275 | });
276 | }
277 | 


--------------------------------------------------------------------------------
/next-app/app/api/streams/upvote/route.ts:
--------------------------------------------------------------------------------
 1 | import { authOptions } from "@/lib/auth-options";
 2 | import db from "@/lib/db";
 3 | import { getServerSession } from "next-auth";
 4 | import { NextRequest, NextResponse } from "next/server";
 5 | import { z } from "zod";
 6 | 
 7 | const UpvoteSchema = z.object({
 8 |   streamId: z.string(),
 9 |   spaceId:z.string()
10 | });
11 | 
12 | export async function POST(req: NextRequest) {
13 |   const session = await getServerSession(authOptions);
14 | 
15 |   if (!session?.user) {
16 |     return NextResponse.json(
17 |       {
18 |         message: "Unauthenticated",
19 |       },
20 |       {
21 |         status: 403,
22 |       },
23 |     );
24 |   }
25 |   const user = session.user;
26 | 
27 |   try {
28 |     const data = UpvoteSchema.parse(await req.json());
29 |     await db.upvote.create({
30 |       data: {
31 |         userId: user.id,
32 |         streamId: data.streamId,
33 |       },
34 |     });
35 |     return NextResponse.json({
36 |       message: "Done!",
37 |     });
38 |   } catch (e) {
39 |     return NextResponse.json(
40 |       {
41 |         message: "Error while upvoting",
42 |       },
43 |       {
44 |         status: 403,
45 |       },
46 |     );
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/next-app/app/api/user/route.ts:
--------------------------------------------------------------------------------
 1 | import { authOptions } from "@/lib/auth-options";
 2 | import { getServerSession } from "next-auth";
 3 | import { NextRequest, NextResponse } from "next/server";
 4 | 
 5 | export const GET = async (req: NextRequest) => {
 6 |   const session = await getServerSession(authOptions);
 7 | 
 8 |   if (!session?.user.id) {
 9 |     return NextResponse.json(
10 |       {
11 |         message: "Unauthenticated",
12 |       },
13 |       {
14 |         status: 403,
15 |       },
16 |     );
17 |   }
18 |   return NextResponse.json({
19 |     user: session.user,
20 |   });
21 | };
22 | 
23 | // dont static render
24 | export const dynamic = "force-dynamic";
25 | 


--------------------------------------------------------------------------------
/next-app/app/auth/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useSession } from "next-auth/react";
 4 | import { useRouter } from "next/navigation";
 5 | 
 6 | import { SignInFlow } from "@/types/auth-types";
 7 | import AuthScreen from "@/components/auth/auth-screen";
 8 | 
 9 | export default function AuthPage({
10 |   searchParams,
11 | }: {
12 |   searchParams: { authType: SignInFlow; mailId?: string };
13 | }) {
14 |   const formType = searchParams.authType;
15 |   const session = useSession();
16 |   const router = useRouter();
17 | 
18 |   if (session.status === "authenticated") {
19 |     return router.push("/");
20 |   }
21 |   return <AuthScreen authType={formType} />;
22 | }
23 | 


--------------------------------------------------------------------------------
/next-app/app/dashboard/[spaceId]/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useEffect, useState } from "react";
  3 | import { useSocket } from "@/context/socket-context";
  4 | import jwt from "jsonwebtoken";
  5 | import StreamView from "@/components/StreamView";
  6 | import ErrorScreen from "@/components/ErrorScreen";
  7 | import LoadingScreen from "@/components/LoadingScreen";
  8 | 
  9 | 
 10 | 
 11 | export default function Component({params:{spaceId}}:{params:{spaceId:string}}) {
 12 | 
 13 | 
 14 |   const { socket, user, loading, setUser, connectionError } = useSocket();
 15 | 
 16 | 
 17 |   const [creatorId,setCreatorId]=useState<string | null>(null);
 18 |   const [loading1, setLoading1] = useState(true);
 19 |   
 20 |  
 21 |  
 22 |   
 23 |   
 24 |   useEffect(()=>{
 25 |     async function fetchHostId(){
 26 |       try {
 27 |         const response = await fetch(`/api/spaces/?spaceId=${spaceId}`,{
 28 |           method:"GET"
 29 |         });
 30 |         const data = await response.json()
 31 |         if (!response.ok || !data.success) {
 32 |           throw new Error(data.message || "Failed to retreive space's host id");
 33 |         }
 34 |         setCreatorId(data.hostId)
 35 |        
 36 | 
 37 |       } catch (error) {
 38 |         
 39 |       }
 40 |       finally{
 41 |         setLoading1(false)
 42 |       }
 43 |     }
 44 |     fetchHostId();
 45 |   },[spaceId])
 46 | 
 47 |  
 48 | 
 49 |   useEffect(() => {
 50 |     if (user && socket && creatorId) {
 51 |       const token =  user.token || jwt.sign(
 52 |         {
 53 |           creatorId: creatorId,
 54 |           userId: user?.id,
 55 |         },
 56 |         process.env.NEXT_PUBLIC_SECRET || "",
 57 |         {
 58 |           expiresIn: "24h",
 59 |         }
 60 |       );
 61 | 
 62 |       socket?.send(
 63 |         JSON.stringify({
 64 |           type: "join-room",
 65 |           data: {
 66 |             token,
 67 |             spaceId
 68 |           },
 69 |         })
 70 |       );
 71 |       if(!user.token){
 72 |         setUser({ ...user, token });
 73 |       }
 74 |       
 75 |     }
 76 |   }, [user,spaceId,creatorId,socket]);
 77 | 
 78 |   if (connectionError) {
 79 |     return <ErrorScreen>Cannot connect to socket server</ErrorScreen>;
 80 |   }
 81 | 
 82 |   if (loading) {
 83 |     return <LoadingScreen />;
 84 |   }
 85 | 
 86 |   if (!user) {
 87 |     return <ErrorScreen>Please Log in....</ErrorScreen>;
 88 |   }
 89 |   if(loading1){
 90 |   return <LoadingScreen></LoadingScreen>
 91 |   }
 92 | 
 93 | 
 94 |   if(user.id!=creatorId){
 95 |     return <ErrorScreen>You are not the creator of this space</ErrorScreen>
 96 |   }
 97 | 
 98 | 
 99 | 
100 |   
101 |   return <StreamView creatorId={creatorId as string} playVideo={true} spaceId={spaceId} />;
102 |   
103 | }
104 | 
105 | export const dynamic = "auto";
106 | 


--------------------------------------------------------------------------------
/next-app/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code100x/muzer/650ad9098446b0ce473b0741bb9e3b90a5685d92/next-app/app/favicon.ico


--------------------------------------------------------------------------------
/next-app/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | html,
  6 | body,
  7 | :root {
  8 |   height: 100%;
  9 | }
 10 | 
 11 | @layer base {
 12 |   :root {
 13 |     --background: 0 0% 100%;
 14 |     --foreground: 224 71.4% 4.1%;
 15 | 
 16 |     --card: 0 0% 100%;
 17 |     --card-foreground: 224 71.4% 4.1%;
 18 | 
 19 |     --popover: 0 0% 100%;
 20 |     --popover-foreground: 224 71.4% 4.1%;
 21 | 
 22 |     --primary: 271.48 81.33% 55.88%;
 23 |     --primary-foreground: 210 20% 98%;
 24 | 
 25 |     --secondary: 220 14.3% 95.9%;
 26 |     --secondary-foreground: 220.9 39.3% 11%;
 27 | 
 28 |     --muted: 220 14.3% 95.9%;
 29 |     --muted-foreground: 220 8.9% 46.1%;
 30 | 
 31 |     --accent: 220 14.3% 95.9%;
 32 |     --accent-foreground: 220.9 39.3% 11%;
 33 | 
 34 |     --destructive: 0 84.2% 60.2%;
 35 |     --destructive-foreground: 210 20% 98%;
 36 | 
 37 |     --border: 220 13% 91%;
 38 | 
 39 |     --input: 220 13% 91%;
 40 | 
 41 |     --ring: 271.48 81.33% 55.88%;
 42 | 
 43 |     --radius: 0.5rem;
 44 | 
 45 |     --chart-1: 12 76% 61%;
 46 |     --chart-2: 173 58% 39%;
 47 |     --chart-3: 197 37% 24%;
 48 |     --chart-4: 43 74% 66%;
 49 |     --chart-5: 27 87% 67%;
 50 |   }
 51 | 
 52 |   .dark {
 53 |     --background: 224 71.4% 4.1%;
 54 |     --foreground: 210 20% 98%;
 55 | 
 56 |     --card: 224 71.4% 4.1%;
 57 |     --card-foreground: 210 20% 98%;
 58 | 
 59 |     --popover: 224 71.4% 4.1%;
 60 |     --popover-foreground: 210 20% 98%;
 61 | 
 62 |     --primary: 271.48 81.33% 55.88%;
 63 |     --primary-foreground: 210 20% 98%;
 64 | 
 65 |     --secondary: 215 27.9% 16.9%;
 66 |     --secondary-foreground: 210 20% 98%;
 67 | 
 68 |     --muted: 215 27.9% 16.9%;
 69 |     --muted-foreground: 217.9 10.6% 64.9%;
 70 | 
 71 |     --accent: 215 27.9% 16.9%;
 72 |     --accent-foreground: 210 20% 98%;
 73 | 
 74 |     --destructive: 0 62.8% 30.6%;
 75 |     --destructive-foreground: 210 20% 98%;
 76 | 
 77 |     --border: 215 27.9% 16.9%;
 78 | 
 79 |     --input: 215 27.9% 16.9%;
 80 | 
 81 |     --ring: 271.48 81.33% 55.88%;
 82 | 
 83 |     --chart-1: 220 70% 50%;
 84 |     --chart-2: 160 60% 45%;
 85 |     --chart-3: 30 80% 55%;
 86 |     --chart-4: 280 65% 60%;
 87 |     --chart-5: 340 75% 55%;
 88 |   }
 89 | }
 90 | 
 91 | @layer base {
 92 |   * {
 93 |     @apply border-border;
 94 |   }
 95 |   body {
 96 |     @apply text-foreground;
 97 |   }
 98 | }
 99 | 
100 | 
101 | input:-webkit-autofill,
102 | input:-webkit-autofill:hover,
103 | input:-webkit-autofill:focus,
104 | textarea:-webkit-autofill,
105 | textarea:-webkit-autofill:hover,
106 | textarea:-webkit-autofill:focus,
107 | select:-webkit-autofill,
108 | select:-webkit-autofill:hover,
109 | select:-webkit-autofill:focus {
110 |   -webkit-text-fill-color: white;
111 |   -webkit-box-shadow: 0 0 0px 1000px transparent inset;
112 |   box-shadow: 0 0 0px 1000px transparent inset;
113 |   transition: background-color 5000s ease-in-out 0s;
114 |   color: white;
115 |   caret-color: white;
116 | }
117 | 


--------------------------------------------------------------------------------
/next-app/app/home/page.tsx:
--------------------------------------------------------------------------------
 1 | import HomeView from "@/components/HomeView";
 2 | import { authOptions } from "@/lib/auth-options";
 3 | import { getServerSession } from "next-auth";
 4 | 
 5 | 
 6 | 
 7 | export default async function Home(){
 8 |   const session =await  getServerSession(authOptions);
 9 | 
10 |   if (!session?.user.id) {
11 |     return <h1>Please Log in....</h1>;
12 |   }
13 |  return <HomeView></HomeView>
14 | 
15 | }


--------------------------------------------------------------------------------
/next-app/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Inter } from "next/font/google";
 3 | import { Providers, ThemeProvider } from "@/components/provider";
 4 | 
 5 | import "./globals.css";
 6 | import { Toaster } from "sonner";
 7 | 
 8 | const inter = Inter({ subsets: ["latin"] });
 9 | 
10 | type ToasterProps = React.ComponentProps<typeof Toaster>;
11 | 
12 | const toastOptions: ToasterProps = {
13 |   theme: "dark",
14 |   richColors: true,
15 |   closeButton: true,
16 |   pauseWhenPageIsHidden: true,
17 | };
18 | 
19 | export const metadata: Metadata = {
20 |   metadataBase: new URL(
21 |     process.env.NEXTAUTH_URL || "https://muzer.100xdevs.com/",
22 |   ),
23 |   keywords:
24 |     "music stream, fan interaction, live streaming, high-quality audio, curate music, Muzer",
25 |   title: "Muzer | Fan-Curated Live Music Streaming",
26 |   description:
27 |     "Live fan-curated music streaming. High-quality audio, real-time engagement.",
28 |   openGraph: {
29 |     type: "website",
30 |     locale: "en_IE",
31 |     url: `${process.env.NEXTAUTH_URL}/opengraph-image.png`,
32 |     images: "/opengraph-image.png",
33 |     siteName: "Infra",
34 |   },
35 |   icons: [
36 |     {
37 |       url: `${process.env.NEXTAUTH_URL}/favicon.ico`,
38 |     },
39 |   ],
40 | };
41 | 
42 | export default function RootLayout({
43 |   children,
44 | }: Readonly<{
45 |   children: React.ReactNode;
46 | }>) {
47 |   return (
48 |     <html lang="en" suppressHydrationWarning>
49 |       <body className={`${inter.className} bg-[#1b1934b2]`}>
50 |         <Toaster {...toastOptions} />
51 |         <ThemeProvider
52 |           attribute="class"
53 |           defaultTheme="system"
54 |           disableTransitionOnChange
55 |           enableSystem
56 |         >
57 |           <Providers>{children}</Providers>
58 |         </ThemeProvider>
59 |       </body>
60 |     </html>
61 |   );
62 | }
63 | 


--------------------------------------------------------------------------------
/next-app/app/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code100x/muzer/650ad9098446b0ce473b0741bb9e3b90a5685d92/next-app/app/opengraph-image.png


--------------------------------------------------------------------------------
/next-app/app/page.tsx:
--------------------------------------------------------------------------------
  1 | import Link from "next/link";
  2 | import { Button } from "@/components/ui/button";
  3 | import { Input } from "@/components/ui/input";
  4 | //@ts-ignore
  5 | import { Users, Radio, Headphones } from "lucide-react";
  6 | import { Appbar } from "@/components/Appbar";
  7 | import { getServerSession } from "next-auth";
  8 | import { redirect } from "next/navigation";
  9 | import { authOptions } from "@/lib/auth-options";
 10 | 
 11 | export default async function LandingPage() {
 12 |   const session = await getServerSession(authOptions);
 13 |  
 14 | 
 15 |   return (
 16 |     <div className="flex min-h-screen flex-col bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900">
 17 |       <Appbar showThemeSwitch={false} />
 18 |       <main className="flex-1 py-12 md:py-24 lg:py-32">
 19 |         <div className="container px-4 md:px-6">
 20 |           <div className="flex flex-col items-center space-y-4 text-center">
 21 |             <div className="space-y-2">
 22 |               <h1 className="text-3xl font-bold tracking-tighter text-white sm:text-4xl md:text-5xl lg:text-6xl/none">
 23 |                 Let Your Fans Choose the Beat
 24 |               </h1>
 25 |               <p className="mx-auto max-w-[700px] text-gray-400 md:text-xl">
 26 |                 Empower your audience to curate your music stream. Connect with
 27 |                 fans like never before.
 28 |               </p>
 29 |             </div>
 30 |             <div className="space-x-4">
 31 |               <Button className="bg-purple-600 text-white hover:bg-purple-700">
 32 |                 <Link
 33 |                   href={{
 34 |                     pathname: "/auth",
 35 |                     query: { authType: "signUp" },
 36 |                   }}
 37 |                 >
 38 |                   Get Started
 39 |                 </Link>
 40 |               </Button>
 41 |               <Button className="bg-white text-purple-400 hover:bg-white/90">
 42 |                 Learn More
 43 |               </Button>
 44 |             </div>
 45 |           </div>
 46 |         </div>
 47 |       </main>
 48 |       <section className="w-full bg-gray-800 bg-opacity-50 py-12 md:py-24 lg:py-32">
 49 |         <div className="container px-4 md:px-6">
 50 |           <h2 className="mb-8 text-center text-2xl font-bold tracking-tighter text-white sm:text-3xl">
 51 |             Key Features
 52 |           </h2>
 53 |           <div className="grid gap-8 sm:grid-cols-3">
 54 |             <div className="flex flex-col items-center space-y-3 text-center">
 55 |               <Users className="h-12 w-12 text-yellow-400" />
 56 |               <h3 className="text-xl font-bold text-white">Fan Interaction</h3>
 57 |               <p className="text-gray-400">Let fans choose the music.</p>
 58 |             </div>
 59 |             <div className="flex flex-col items-center space-y-3 text-center">
 60 |               <Radio className="h-12 w-12 text-green-400" />
 61 |               <h3 className="text-xl font-bold text-white">Live Streaming</h3>
 62 |               <p className="text-gray-400">Stream with real-time input.</p>
 63 |             </div>
 64 |             <div className="flex flex-col items-center space-y-3 text-center">
 65 |               <Headphones className="h-12 w-12 text-blue-400" />
 66 |               <h3 className="text-xl font-bold text-white">
 67 |                 High-Quality Audio
 68 |               </h3>
 69 |               <p className="text-gray-400">Crystal clear sound quality.</p>
 70 |             </div>
 71 |           </div>
 72 |         </div>
 73 |       </section>
 74 |       <section className="w-full py-12 md:py-24 lg:py-32">
 75 |         <div className="container px-4 md:px-6">
 76 |           <div className="flex flex-col items-center space-y-4 text-center">
 77 |             <div className="space-y-2">
 78 |               <h2 className="text-3xl font-bold tracking-tighter text-white sm:text-4xl">
 79 |                 Ready to Transform Your Streams?
 80 |               </h2>
 81 |               <p className="mx-auto max-w-[600px] text-gray-400 md:text-xl">
 82 |                 Join MusicStreamChoice today and create unforgettable
 83 |                 experiences.
 84 |               </p>
 85 |             </div>
 86 |             <div className="w-full max-w-sm">
 87 |               {/*<form className="flex space-x-2">
 88 |                  <Input
 89 |                   className="focus-visible:ring-offset-0 focus-visible:ring-purple-600 bg-gray-800  bg-opacity-50 placeholder:text-gray-400 border-gray-400 text-white"
 90 |                   placeholder="Enter your email"
 91 |                   ref={mailRef}
 92 |                   type="email"
 93 |                 /> */}
 94 |               <Link
 95 |                 href={{
 96 |                   pathname: "/auth",
 97 |                   query: {
 98 |                     authType: "signUp",
 99 |                   },
100 |                 }}
101 |               >
102 |                 <Button
103 |                   type="submit"
104 |                   className="bg-purple-600 text-white hover:bg-purple-700"
105 |                 >
106 |                   Sign Up
107 |                 </Button>
108 |               </Link>
109 |               {/* </form> */}
110 |             </div>
111 |           </div>
112 |         </div>
113 |       </section>
114 |       <footer className="flex w-full shrink-0 flex-col items-center gap-2 border-t border-gray-700 px-4 py-6 sm:flex-row md:px-6">
115 |         <p className="text-xs text-gray-400">
116 |           © 2023 MusicStreamChoice. All rights reserved.
117 |         </p>
118 |         <nav className="flex gap-4 sm:ml-auto sm:gap-6">
119 |           <Link
120 |             className="text-xs text-gray-400 transition-colors hover:text-purple-400"
121 |             href="#"
122 |           >
123 |             Terms of Service
124 |           </Link>
125 |           <Link
126 |             className="text-xs text-gray-400 transition-colors hover:text-purple-400"
127 |             href="#"
128 |           >
129 |             Privacy
130 |           </Link>
131 |         </nav>
132 |       </footer>
133 |     </div>
134 |   );
135 | }
136 | 


--------------------------------------------------------------------------------
/next-app/app/spaces/[spaceId]/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useEffect, useState } from "react";
  3 | import { useSocket } from "@/context/socket-context";
  4 | import jwt from "jsonwebtoken";
  5 | import StreamView from "@/components/StreamView";
  6 | import ErrorScreen from "@/components/ErrorScreen";
  7 | import LoadingScreen from "@/components/LoadingScreen";
  8 | import { useRouter } from "next/navigation";
  9 | 
 10 | 
 11 | // Default styles that can be overridden by your app
 12 | import '@solana/wallet-adapter-react-ui/styles.css';
 13 | 
 14 | 
 15 | 
 16 | export default function Component({params:{spaceId}}:{params:{spaceId:string}}) {
 17 | 
 18 | 
 19 |   const { socket, user, loading, setUser, connectionError } = useSocket();
 20 | 
 21 | 
 22 |   const [creatorId,setCreatorId]=useState<string>();
 23 |   const [loading1, setLoading1] = useState(true);
 24 |   const router = useRouter();
 25 | 
 26 |  
 27 |  
 28 |   console.log(spaceId)
 29 |   
 30 |   useEffect(()=>{
 31 |     async function fetchHostId(){
 32 |       try {
 33 |         const response = await fetch(`/api/spaces/?spaceId=${spaceId}`,{
 34 |           method:"GET"
 35 |         });
 36 |         const data = await response.json()
 37 |         if (!response.ok || !data.success) {
 38 |           throw new Error(data.message || "Failed to retreive space's host id");
 39 |         }
 40 |         setCreatorId(data.hostId)
 41 |        
 42 | 
 43 |       } catch (error) {
 44 |         
 45 |       }
 46 |       finally{
 47 |         setLoading1(false)
 48 |       }
 49 |     }
 50 |     fetchHostId();
 51 |   },[spaceId])
 52 | 
 53 |  
 54 | 
 55 |   useEffect(() => {
 56 |     if (user && socket && creatorId) {
 57 |       const token =  user.token || jwt.sign(
 58 |         {
 59 |           creatorId: creatorId,
 60 |           userId: user?.id,
 61 |         },
 62 |         process.env.NEXT_PUBLIC_SECRET || "",
 63 |         {
 64 |           expiresIn: "24h",
 65 |         }
 66 |       );
 67 | 
 68 |       socket?.send(
 69 |         JSON.stringify({
 70 |           type: "join-room",
 71 |           data: {
 72 |             token,
 73 |             spaceId
 74 |           },
 75 |         })
 76 |       );
 77 |       if(!user.token){
 78 |         setUser({ ...user, token });
 79 |       }
 80 |       
 81 |     }
 82 |   }, [user,spaceId,creatorId,socket]);
 83 | 
 84 |   if (connectionError) {
 85 |     return <ErrorScreen>Cannot connect to socket server</ErrorScreen>;
 86 |   }
 87 | 
 88 |   if (loading) {
 89 |     return <LoadingScreen />;
 90 |   }
 91 | 
 92 |   if (!user) {
 93 |     return <ErrorScreen>Please Log in....</ErrorScreen>;
 94 |   }
 95 |   if(loading1){
 96 |   return <LoadingScreen></LoadingScreen>
 97 |   }
 98 | 
 99 |   if(creatorId===user.id){
100 |     router.push(`/dashboard/${spaceId}`)
101 |   }
102 | 
103 | 
104 |   
105 |   
106 |   return <StreamView creatorId={creatorId as string} playVideo={false} spaceId={spaceId} />;
107 |   
108 | }
109 | 
110 | export const dynamic = "auto";
111 | 


--------------------------------------------------------------------------------
/next-app/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/next-app/components/Appbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { signIn, signOut, useSession } from "next-auth/react";
 3 | import { Button } from "@/components/ui/button";
 4 | import { useRouter } from "next/navigation";
 5 | import { ThemeSwitcher } from "./ThemeSwitcher";
 6 | import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
 7 | import Link from "next/link";
 8 | 
 9 | 
10 | export function Appbar({ showThemeSwitch = true , isSpectator=false }) {
11 |   const session = useSession();
12 |   const router = useRouter();
13 | 
14 |   return (
15 |     <div className="flex justify-between px-5 py-4 md:px-10 xl:px-20">
16 |       <div
17 |         onClick={() => {
18 |           router.push("/home");
19 |         }}
20 |         className={`flex flex-col justify-center text-lg font-bold hover:cursor-pointer ${showThemeSwitch ? "" : "text-white"}`}
21 |       >
22 |         Muzer
23 |       </div>
24 |       <div className="flex items-center gap-x-2">
25 |         {isSpectator && <WalletMultiButton/>}
26 |         {session.data?.user && (
27 |           <Button
28 |             className="bg-purple-600 text-white hover:bg-purple-700"
29 |             onClick={() =>
30 |               signOut({
31 |                 callbackUrl: "/",
32 |               })
33 |             }
34 |           >
35 |             Logout
36 |           </Button>
37 |         )}
38 |         {!session.data?.user && (
39 |           <div className="space-x-3">
40 |             <Button
41 |               className="bg-purple-600 text-white hover:bg-purple-700"
42 |               onClick={() => router.push("/auth")}
43 |             >
44 |               Signin
45 |             </Button>
46 |             <Link
47 |               href={{
48 |                 pathname: "/auth",
49 |                 query: {
50 |                   authType: "signUp",
51 |                 },
52 |               }}
53 |             >
54 |               <Button
55 |                 variant={"ghost"}
56 |                 className="text-white hover:bg-white/10"
57 |               >
58 |                 Signup
59 |               </Button>
60 |             </Link>
61 |           </div>
62 |         )}
63 |         
64 |         {showThemeSwitch && <ThemeSwitcher />}
65 |       </div>
66 |     </div>
67 |   );
68 | }
69 | 


--------------------------------------------------------------------------------
/next-app/components/ErrorScreen.tsx:
--------------------------------------------------------------------------------
 1 | import React, { PropsWithChildren } from "react";
 2 | 
 3 | export default function ErrorScreen({ children }: PropsWithChildren) {
 4 |   return (
 5 |     <div className="w-screen h-screen flex justify-center items-center bg-[rgb(10,10,10)] text-gray-200">
 6 |       {children}
 7 |     </div>
 8 |   );
 9 | }
10 | 


--------------------------------------------------------------------------------
/next-app/components/HomeView.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { toast } from "sonner";
  3 | import { Appbar } from "@/components/Appbar";
  4 | import { Button } from "@/components/ui/button";
  5 | import {
  6 |   Dialog,
  7 |   DialogContent,
  8 |   DialogHeader,
  9 |   DialogTitle,
 10 |   DialogFooter,
 11 | } from "@/components/ui/dialog";
 12 | import { useEffect, useMemo, useState } from "react";
 13 | import CardSkeleton from "./ui/cardSkeleton";
 14 | import SpacesCard from "./SpacesCard";
 15 | 
 16 | interface Space {
 17 |   endTime?: Date | null;
 18 |   hostId: string;
 19 |   id: string;
 20 |   isActive: boolean;
 21 |   name: string;
 22 |   startTime: Date | null;
 23 | }
 24 | 
 25 | export default function HomeView() {
 26 |   const [isCreateSpaceOpen, setIsCreateSpaceOpen] = useState(false);
 27 |   const [spaceName, setSpaceName] = useState("");
 28 |   const [spaces, setSpaces] = useState<Space[] | null>(null);
 29 |   const [loading, setIsLoading] = useState(false);
 30 | 
 31 |   useEffect(() => {
 32 |     const fetchSpaces = async () => {
 33 |       setIsLoading(true);
 34 |       try {
 35 |         const response = await fetch("/api/spaces", {
 36 |           method: "GET",
 37 |         });
 38 | 
 39 |         const data = await response.json();
 40 | 
 41 |         if (!response.ok || !data.success) {
 42 |           throw new Error(data.message || "Failed to fetch spaces");
 43 |         }
 44 | 
 45 |         const fetchedSpaces: Space[] = data.spaces;
 46 |         setSpaces(fetchedSpaces);
 47 |       } catch (error) {
 48 |         toast.error("Error fetching spaces");
 49 |       } finally {
 50 |         setIsLoading(false);
 51 |       }
 52 |     };
 53 |     fetchSpaces();
 54 |   }, []);
 55 | 
 56 |   const handleCreateSpace = async () => {
 57 |     setIsCreateSpaceOpen(false);
 58 |     try {
 59 |       const response = await fetch(`/api/spaces`, {
 60 |         method: "POST",
 61 |         headers: {
 62 |           "Content-Type": "application/json",
 63 |         },
 64 |         body: JSON.stringify({
 65 |           spaceName: spaceName,
 66 |         }),
 67 |       });
 68 |       const data = await response.json();
 69 | 
 70 |       if (!response.ok || !data.success) {
 71 |         throw new Error(data.message || "Failed to create space");
 72 |       }
 73 | 
 74 |       const newSpace = data.space;
 75 |       setSpaces((prev) => {
 76 |         const updatedSpaces: Space[] = prev ? [...prev, newSpace] : [newSpace];
 77 |         return updatedSpaces;
 78 |       });
 79 |       toast.success(data.message); 
 80 |     } catch (error: any) {
 81 |       toast.error(error.message || "Error Creating Space"); 
 82 |     }
 83 |   };
 84 | 
 85 |   const handleDeleteSpace = async (spaceId: string) => {
 86 |     try {
 87 |       const response = await fetch(`/api/spaces/?spaceId=${spaceId}`, {
 88 |         method: "DELETE",
 89 |       });
 90 |       const data = await response.json();
 91 | 
 92 |       if (!response.ok || !data.success) {
 93 |         throw new Error(data.message || "Failed to delete space");
 94 |       }
 95 |       setSpaces((prev) => {
 96 |         const updatedSpaces: Space[] = prev
 97 |           ? prev.filter((space) => space.id !== spaceId)
 98 |           : [];
 99 |         return updatedSpaces;
100 |       });
101 |       toast.success(data.message);
102 |     } catch (error: any) {
103 |       toast.error(error.message || "Error Deleting Space"); 
104 |     }
105 |   };
106 | 
107 |   const renderSpaces = useMemo(() => {
108 |     if (loading) {
109 |       return (
110 |         <>
111 |           <div className="dark mx-auto h-[500px] w-full py-4 sm:w-[450px] lg:w-[500px]">
112 |             <CardSkeleton />
113 |           </div>
114 |           <div className="dark mx-auto h-[500px] w-full py-4 sm:w-[450px] lg:w-[500px]">
115 |             <CardSkeleton />
116 |           </div>
117 |         </>
118 |       );
119 |     }
120 | 
121 |     if (spaces && spaces.length > 0) {
122 |       return spaces.map((space) => (
123 |         <SpacesCard
124 |           key={space.id}
125 |           space={space}
126 |           handleDeleteSpace={handleDeleteSpace}
127 |         />
128 |       ));
129 |     }
130 |   }, [loading, spaces, handleDeleteSpace]);
131 | 
132 |   return (
133 |     <div className="flex min-h-screen flex-col bg-gradient-to-b from-gray-900 to-black text-gray-200">
134 |       <Appbar />
135 |       <div className="flex flex-grow flex-col items-center px-4 py-8">
136 |         <div className="h-36 rounded-xl bg-gradient-to-r from-indigo-600 to-violet-900 bg-clip-text text-9xl font-bold text-transparent">
137 |           Spaces
138 |         </div>
139 |         <Button
140 |           onClick={() => {
141 |             setIsCreateSpaceOpen(true);
142 |           }}
143 |           className="mt-10 rounded-lg bg-purple-600 px-4 py-2 text-white hover:bg-purple-700"
144 |         >
145 |           Create a new Space
146 |         </Button>
147 | 
148 |         <div className="mt-20 grid grid-cols-1 gap-8 p-4 md:grid-cols-2">
149 |           {renderSpaces}
150 |         </div>
151 |       </div>
152 |       <Dialog open={isCreateSpaceOpen} onOpenChange={setIsCreateSpaceOpen}>
153 |         <DialogContent>
154 |           <DialogHeader>
155 |             <DialogTitle className="mb-10 text-center">
156 |               Create new space
157 |             </DialogTitle>
158 |             <fieldset className="Fieldset">
159 |               <label
160 |                 className="text-violet11 w-[90px] text-right text-xl font-bold"
161 |                 htmlFor="name"
162 |               >
163 |                 Name of the Space
164 |               </label>
165 |               <input
166 |                 className="text-violet11 shadow-violet7 focus:shadow-violet8 mt-5 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded-[4px] px-[10px] text-[15px] leading-none shadow-[0_0_0_1px] outline-none focus:shadow-[0_0_0_2px]"
167 |                 id="name"
168 |                 defaultValue="Pedro Duarte"
169 |                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
170 |                   setSpaceName(e.target.value);
171 |                 }}
172 |               />
173 |             </fieldset>
174 |           </DialogHeader>
175 |           <DialogFooter>
176 |             <Button
177 |               variant="outline"
178 |               onClick={() => setIsCreateSpaceOpen(false)}
179 |             >
180 |               Cancel
181 |             </Button>
182 |             <Button
183 |               onClick={handleCreateSpace}
184 |               className="bg-purple-600 text-white hover:bg-purple-700"
185 |             >
186 |               Create Space
187 |             </Button>
188 |           </DialogFooter>
189 |         </DialogContent>
190 |       </Dialog>
191 |     </div>
192 |   );
193 | }
194 | 


--------------------------------------------------------------------------------
/next-app/components/LoadingScreen.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function LoadingScreen() {
 4 |   return (
 5 |     <div className=" bg-[rgb(10,10,10)] text-gray-200">
 6 |       <div className="flex space-x-2 justify-center items-center w-screen h-screen dark:invert">
 7 |         <span className="sr-only">Loading...</span>
 8 |         <div className="h-8 w-8 bg-white rounded-full animate-bounce [animation-delay:-0.3s]"></div>
 9 |         <div className="h-8 w-8 bg-white rounded-full animate-bounce [animation-delay:-0.15s]"></div>
10 |         <div className="h-8 w-8 bg-white rounded-full animate-bounce"></div>
11 |       </div>
12 |     </div>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/next-app/components/OldStreamView.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useState, useEffect, useRef } from "react";
  3 | import { Button } from "@/components/ui/button";
  4 | import { Input } from "@/components/ui/input";
  5 | import { Card, CardContent } from "@/components/ui/card";
  6 | import { ChevronUp, ChevronDown, Share2, Play, Trash2, X, MessageCircle, Instagram, Twitter} from "lucide-react";
  7 | import { toast } from "sonner";
  8 | import { Appbar } from "./Appbar";
  9 | import LiteYouTubeEmbed from "react-lite-youtube-embed";
 10 | import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
 11 | import { YT_REGEX } from "../lib/utils";
 12 | import YouTubePlayer from "youtube-player";
 13 | import { useSession } from "next-auth/react";
 14 | import type { Session } from "next-auth";
 15 | import Image from "next/image";
 16 | import {
 17 |   Dialog,
 18 |   DialogContent,
 19 |   DialogHeader,
 20 |   DialogTitle,
 21 |   DialogDescription,
 22 |   DialogFooter,
 23 | } from "@/components/ui/dialog";
 24 | import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
 25 | 
 26 | 
 27 | 
 28 | interface Video {
 29 |   id: string;
 30 |   type: string;
 31 |   url: string;
 32 |   extractedId: string;
 33 |   title: string;
 34 |   smallImg: string;
 35 |   bigImg: string;
 36 |   active: boolean;
 37 |   userId: string;
 38 |   upvotes: number;
 39 |   haveUpvoted: boolean;
 40 |   spaceId:string
 41 | }
 42 | 
 43 | interface CustomSession extends Omit<Session, "user"> {
 44 |   user: {
 45 |     id: string;
 46 |     name?: string | null;
 47 |     email?: string | null;
 48 |     image?: string | null;
 49 |   };
 50 | }
 51 | 
 52 | const REFRESH_INTERVAL_MS = 10 * 1000;
 53 | 
 54 | export default function StreamView({
 55 |   creatorId,
 56 |   playVideo = false,
 57 |   spaceId
 58 | }: {
 59 |   creatorId: string;
 60 |   playVideo: boolean;
 61 |   spaceId:string;
 62 | }) {
 63 |   const [inputLink, setInputLink] = useState("");
 64 |   const [queue, setQueue] = useState<Video[]>([]);
 65 |   const [currentVideo, setCurrentVideo] = useState<Video | null>(null);
 66 |   const [loading, setLoading] = useState(false);
 67 |   const [playNextLoader, setPlayNextLoader] = useState(false);
 68 |   const videoPlayerRef = useRef<HTMLDivElement>(null);
 69 |   const [isCreator, setIsCreator] = useState(false);
 70 |   const [isEmptyQueueDialogOpen, setIsEmptyQueueDialogOpen] = useState(false);
 71 |   const [spaceName,setSpaceName]=useState("")
 72 |   const [isOpen, setIsOpen] = useState(false);
 73 | 
 74 |   async function refreshStreams() {
 75 |     try {
 76 |       const res = await fetch(`/api/streams/?spaceId=${spaceId}`, {
 77 |         credentials: "include",
 78 |       });
 79 |       const json = await res.json();
 80 |       if (json.streams && Array.isArray(json.streams)) {
 81 |         setQueue(
 82 |           json.streams.length > 0
 83 |             ? json.streams.sort((a: any, b: any) => b.upvotes - a.upvotes)
 84 |             : [],
 85 |         );
 86 |       } else {
 87 |         setQueue([]);
 88 |       }
 89 | 
 90 |       setCurrentVideo((video) => {
 91 |         if (video?.id === json.activeStream?.stream?.id) {
 92 |           return video;
 93 |         }
 94 |         return json.activeStream?.stream || null;
 95 |       });
 96 | 
 97 |    
 98 |       setIsCreator(json.isCreator);
 99 |       setSpaceName(json.spaceName)
100 |     } catch (error) {
101 |       console.error("Error refreshing streams:", error);
102 |       setQueue([]);
103 |       setCurrentVideo(null);
104 |     }
105 |   }
106 | 
107 |   useEffect(() => {
108 |     refreshStreams();
109 |     const interval = setInterval(refreshStreams, REFRESH_INTERVAL_MS);
110 |     return () => clearInterval(interval);
111 |   }, [spaceId]);
112 | 
113 |   useEffect(() => {
114 |     if (!videoPlayerRef.current || !currentVideo) return;
115 | 
116 |     const player = YouTubePlayer(videoPlayerRef.current);
117 |     player.loadVideoById(currentVideo.extractedId);
118 |     player.playVideo();
119 | 
120 |     const eventHandler = (event: { data: number }) => {
121 |       if (event.data === 0) {
122 |         playNext();
123 |       }
124 |     };
125 |     player.on("stateChange", eventHandler);
126 | 
127 |     return () => {
128 |       player.destroy();
129 |     };
130 |   }, [currentVideo, videoPlayerRef]);
131 | 
132 |   const handleSubmit = async (e: React.FormEvent) => {
133 |     e.preventDefault();
134 |     if (!inputLink.trim()) {
135 |       toast.error("YouTube link cannot be empty");
136 |       return;
137 |     }
138 |     if (!inputLink.match(YT_REGEX)) {
139 |       toast.error("Invalid YouTube URL format");
140 |       return;
141 |     }
142 |     setLoading(true);
143 |     try {
144 |       const res = await fetch("/api/streams/", {
145 |         method: "POST",
146 |         headers: {
147 |           "Content-Type": "application/json",
148 |         },
149 |         body: JSON.stringify({
150 |           creatorId,
151 |           url: inputLink,
152 |           spaceId:spaceId
153 |         }),
154 |       });
155 |       const data = await res.json();
156 |       if (!res.ok) {
157 |         throw new Error(data.message || "An error occurred");
158 |       }
159 |       setQueue([...queue, data]);
160 |       setInputLink("");
161 |       toast.success("Song added to queue successfully");
162 |     } catch (error) {
163 |       if (error instanceof Error) {
164 |         toast.error(error.message);
165 |       } else {
166 |         toast.error("An unexpected error occurred");
167 |       }
168 |     } finally {
169 |       setLoading(false);
170 |     }
171 |   };
172 | 
173 |   const handleVote = (id: string, isUpvote: boolean) => {
174 |     setQueue(
175 |       queue
176 |         .map((video) =>
177 |           video.id === id
178 |             ? {
179 |                 ...video,
180 |                 upvotes: isUpvote ? video.upvotes + 1 : video.upvotes - 1,
181 |                 haveUpvoted: !video.haveUpvoted,
182 |               }
183 |             : video,
184 |         )
185 |         .sort((a, b) => b.upvotes - a.upvotes),
186 |     );
187 | 
188 |     fetch(`/api/streams/${isUpvote ? "upvote" : "downvote"}`, {
189 |       method: "POST",
190 |       body: JSON.stringify({
191 |         streamId: id,
192 |         spaceId:spaceId
193 |       }),
194 |     });
195 |   };
196 | 
197 |   const playNext = async () => {
198 |     if (queue.length > 0) {
199 |       try {
200 |         setPlayNextLoader(true);
201 |         const data = await fetch(`/api/streams/next?spaceId=${spaceId}`, {
202 |           method: "GET",
203 |         });
204 |         const json = await data.json();
205 |         setCurrentVideo(json.stream);
206 |         setQueue((q) => q.filter((x) => x.id !== json.stream?.id));
207 |       } catch (e) {
208 |         console.error("Error playing next song:", e);
209 |       } finally {
210 |         setPlayNextLoader(false);
211 |       }
212 |     }
213 |   };
214 | 
215 |   const handleShare = (platform: 'whatsapp' | 'twitter' | 'instagram' | 'clipboard') => {
216 |     const shareableLink = `${window.location.hostname}/spaces/${spaceId}`
217 | 
218 |     if (platform === 'clipboard') {
219 |       navigator.clipboard.writeText(shareableLink).then(() => {
220 |         toast.success('Link copied to clipboard!')
221 |       }).catch((err) => {
222 |         console.error('Could not copy text: ', err)
223 |         toast.error('Failed to copy link. Please try again.')
224 |       })
225 |     } else {
226 |       let url
227 |       switch (platform) {
228 |         case 'whatsapp':
229 |           url = `https://wa.me/?text=${encodeURIComponent(shareableLink)}`
230 |           break
231 |         case 'twitter':
232 |           url = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareableLink)}`
233 |           break
234 |         case 'instagram':
235 |           // Instagram doesn't allow direct URL sharing, so we copy the link instead
236 |           navigator.clipboard.writeText(shareableLink)
237 |           toast.success('Link copied for Instagram sharing!')
238 |           return
239 |         default:
240 |           return
241 |       }
242 |       window.open(url, '_blank')
243 |     }
244 |   }
245 | 
246 |   const emptyQueue = async () => {
247 |     try {
248 |       const res = await fetch("/api/streams/empty-queue", {
249 |         method: "POST",
250 |         headers: {
251 |           'Content-Type': 'application/json',
252 |           },
253 |         body: JSON.stringify({
254 |           spaceId:spaceId
255 |       })
256 |       });
257 |       const data = await res.json();
258 |       if (res.ok) {
259 |         toast.success(data.message);
260 |         refreshStreams();
261 |         setIsEmptyQueueDialogOpen(false);
262 |       } else {
263 |         toast.error(data.message || "Failed to empty queue");
264 |       }
265 |     } catch (error) {
266 |       console.error("Error emptying queue:", error);
267 |       toast.error("An error occurred while emptying the queue");
268 |     }
269 |   };
270 | 
271 |   const removeSong = async (streamId: string) => {
272 |     try {
273 |       const res = await fetch(`/api/streams/remove?streamId=${streamId}&spaceId=${spaceId}`, {
274 |         method: "DELETE",
275 |       });
276 |       if (res.ok) {
277 |         toast.success("Song removed successfully");
278 |         refreshStreams();
279 |       } else {
280 |         toast.error("Failed to remove song");
281 |       }
282 |     } catch (error) {
283 |       toast.error("An error occurred while removing the song");
284 |     }
285 |   };
286 | 
287 |   return (
288 |     <div className="flex flex-col min-h-screen bg-gradient-to-b from-gray-900 to-black text-gray-200">
289 |       <Appbar />
290 |       <div className='mx-auto text-2xl bg-gradient-to-r rounded-lg from-indigo-600 to-violet-800 font-bold'>
291 |             {spaceName}
292 |             </div>
293 |       <div className="flex justify-center px-5 md:px-10 xl:px-20">
294 |         <div className="grid grid-cols-1 gap-y-5 lg:gap-x-5 lg:grid-cols-5 w-screen py-5 lg:py-8">
295 |           <div className="col-span-3 order-2 lg:order-1">
296 |             <div className="flex flex-col md:flex-row justify-between mb-4">
297 |               <h2 className="text-2xl font-bold text-white mb-2 md:mb-0">
298 |                 Upcoming Songs
299 |               </h2>
300 |               <div className="flex space-x-2">
301 |               <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
302 |   <DropdownMenuTrigger asChild>
303 |     <Button onClick={() => setIsOpen(true)} className="bg-purple-700 hover:bg-purple-800 text-white">
304 |       <Share2 className="mr-2 h-4 w-4" /> Share
305 |     </Button>
306 |   </DropdownMenuTrigger>
307 | 
308 |   <DropdownMenuContent className="w-48 sm:max-w-md">
309 |     <DropdownMenuLabel>Share to Social Media</DropdownMenuLabel>
310 |     <DropdownMenuSeparator />
311 |     
312 |     <DropdownMenuItem onClick={() => handleShare('whatsapp')}>
313 |       <div className="flex items-center space-x-2">
314 |         <MessageCircle className="h-6 w-6 text-green-500" />
315 |         <span>WhatsApp</span>
316 |       </div>
317 |     </DropdownMenuItem>
318 |     
319 |     <DropdownMenuItem onClick={() => handleShare('twitter')}>
320 |       <div className="flex items-center space-x-2">
321 |         <Twitter className="h-6 w-6 text-blue-400" />
322 |         <span>Twitter</span>
323 |       </div>
324 |     </DropdownMenuItem>
325 |     
326 |     <DropdownMenuItem onClick={() => handleShare('instagram')}>
327 |       <div className="flex items-center space-x-2">
328 |         <Instagram className="h-6 w-6 text-pink-500" />
329 |         <span>Instagram</span>
330 |       </div>
331 |     </DropdownMenuItem>
332 | 
333 |     <DropdownMenuSeparator />
334 | 
335 |     <DropdownMenuItem onClick={() => handleShare('clipboard')}>
336 |       <div className="flex items-center space-x-2">
337 |         <span>Copy Link to Clipboard</span>
338 |       </div>
339 |     </DropdownMenuItem>
340 |   </DropdownMenuContent>
341 | </DropdownMenu>
342 |                 {isCreator && (
343 |                   <Button
344 |                     onClick={() => setIsEmptyQueueDialogOpen(true)}
345 |                     className="bg-gray-700 hover:bg-gray-600 text-white transition-colors"
346 |                   >
347 |                     <Trash2 className="mr-2 h-4 w-4" /> Empty Queue
348 |                   </Button>
349 |                 )}
350 |               </div>
351 |             </div>
352 |             {queue.length === 0 ? (
353 |               <Card className="bg-gray-800 border-gray-700 shadow-lg">
354 |                 <CardContent className="p-4 flex flex-col md:flex-row md:space-x-3">
355 |                   <p className="text-center py-8 text-gray-400">
356 |                     No videos in queue
357 |                   </p>
358 |                 </CardContent>
359 |               </Card>
360 |             ) : (
361 |               <div className="space-y-4">
362 |                 {queue.map((video) => (
363 |                   <Card
364 |                     key={video.id}
365 |                     className="bg-gray-800 border-gray-700 shadow-lg hover:shadow-xl transition-shadow"
366 |                   >
367 |                     <CardContent className="p-4 flex flex-col md:flex-row md:space-x-3">
368 |                       <Image
369 |                       width={160}
370 |                       height={160}
371 |                         src={video.smallImg}
372 |                         alt={`Thumbnail for ${video.title}`}
373 |                         className="md:w-40 mb-5 md:mb-0 object-cover rounded-md"
374 |                       />
375 |                       <div className="flex-grow">
376 |                         <h3 className="font-semibold text-white text-lg mb-2">
377 |                           {video.title}
378 |                         </h3>
379 |                         <div className="flex flex-col">
380 |                           <span className="font-semibold text-white">
381 |                             {video.title}
382 |                           </span>
383 |                           <div className="flex items-center space-x-2 mt-3">
384 |                             <Button
385 |                               variant="outline"
386 |                               size="sm"
387 |                               onClick={() =>
388 |                                 handleVote(
389 |                                   video.id,
390 |                                   video.haveUpvoted ? false : true,
391 |                                 )
392 |                               }
393 |                               className="flex items-center space-x-1 bg-gray-800 text-white border-gray-700 hover:bg-gray-700"
394 |                             >
395 |                               {video.haveUpvoted ? (
396 |                                 <ChevronDown className="h-4 w-4" />
397 |                               ) : (
398 |                                 <ChevronUp className="h-4 w-4" />
399 |                               )}
400 |                               <span>{video.upvotes}</span>
401 |                             </Button>
402 |                             {isCreator && (
403 |                               <Button
404 |                                 variant="outline"
405 |                                 size="sm"
406 |                                 onClick={() => removeSong(video.id)}
407 |                                 className="bg-gray-700 hover:bg-gray-600 text-white transition-colors"
408 |                               >
409 |                                 <X className="h-4 w-4" />
410 |                               </Button>
411 |                             )}
412 |                           </div>
413 |                         </div>
414 |                       </div>
415 |                     </CardContent>
416 |                   </Card>
417 |                 ))}
418 |               </div>
419 |             )}
420 |           </div>
421 |           <div className="col-span-2 order-1 lg:order-2">
422 |             <div className="space-y-4">
423 |               <Card className="bg-gray-800 border-gray-700 shadow-lg">
424 |                 <CardContent className="p-6 space-y-4">
425 |                   <h2 className="text-2xl font-bold text-white">Add a song</h2>
426 |                   <form onSubmit={handleSubmit} className="space-y-3">
427 |                     <Input
428 |                       type="text"
429 |                       placeholder="Paste YouTube link here"
430 |                       value={inputLink}
431 |                       onChange={(e) => setInputLink(e.target.value)}
432 |                       className="bg-gray-700 text-white border-gray-600 placeholder-gray-400"
433 |                     />
434 |                     <Button
435 |                       disabled={loading}
436 |                       type="submit"
437 |                       className="w-full bg-purple-600 hover:bg-purple-700 text-white transition-colors"
438 |                     >
439 |                       {loading ? "Loading..." : "Add to Queue"}
440 |                     </Button>
441 |                   </form>
442 |                   {inputLink && inputLink.match(YT_REGEX) && !loading && (
443 |                     <div className="mt-4">
444 |                       <LiteYouTubeEmbed
445 |                         title=""
446 |                         id={inputLink.split("?v=")[1]}
447 |                       />
448 |                     </div>
449 |                   )}
450 |                 </CardContent>
451 |               </Card>
452 |               <Card className="bg-gray-800 border-gray-700 shadow-lg">
453 |                 <CardContent className="p-6 space-y-4">
454 |                   <h2 className="text-2xl font-bold text-white">Now Playing</h2>
455 |                   {currentVideo ? (
456 |                     <div>
457 |                       {playVideo ? (
458 |                         <div
459 |                           ref={videoPlayerRef}
460 |                           className="w-full aspect-video"
461 |                         />
462 |                       ) : (
463 |                         <>
464 |                           <Image
465 |                             src={currentVideo.bigImg}
466 |                             className="w-full aspect-video object-cover rounded-md"
467 |                             alt={currentVideo.title}
468 |                           />
469 |                           <p className="mt-2 text-center font-semibold text-white">
470 |                             {currentVideo.title}
471 |                           </p>
472 |                         </>
473 |                       )}
474 |                     </div>
475 |                   ) : (
476 |                     <p className="text-center py-8 text-gray-400">
477 |                       No video playing
478 |                     </p>
479 |                   )}
480 |                   {playVideo && (
481 |                     <Button
482 |                       disabled={playNextLoader}
483 |                       onClick={playNext}
484 |                       className="w-full bg-purple-600 hover:bg-purple-700 text-white transition-colors"
485 |                     >
486 |                       <Play className="mr-2 h-4 w-4" />{" "}
487 |                       {playNextLoader ? "Loading..." : "Play next"}
488 |                     </Button>
489 |                   )}
490 |                 </CardContent>
491 |               </Card>
492 |             </div>
493 |           </div>
494 |         </div>
495 |       </div>
496 |       <Dialog
497 |         open={isEmptyQueueDialogOpen}
498 |         onOpenChange={setIsEmptyQueueDialogOpen}
499 |       >
500 |         <DialogContent>
501 |           <DialogHeader>
502 |             <DialogTitle>Empty Queue</DialogTitle>
503 |             <DialogDescription>
504 |               Are you sure you want to empty the queue? This will remove all
505 |               songs from the queue. This action cannot be undone.
506 |             </DialogDescription>
507 |           </DialogHeader>
508 |           <DialogFooter>
509 |             <Button
510 |               variant="outline"
511 |               onClick={() => setIsEmptyQueueDialogOpen(false)}
512 |             >
513 |               Cancel
514 |             </Button>
515 |             <Button
516 |               onClick={emptyQueue}
517 |               className="bg-red-600 hover:bg-red-700 text-white"
518 |             >
519 |               Empty Queue
520 |             </Button>
521 |           </DialogFooter>
522 |         </DialogContent>
523 |       </Dialog>
524 |     </div>
525 |   );
526 | }
527 | 


--------------------------------------------------------------------------------
/next-app/components/SpacesCard.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Card, CardContent, CardFooter } from "@/components/ui/card";
  4 | import { Button } from "@/components/ui/button";
  5 | import Image from "next/image";
  6 | import { motion } from "framer-motion";
  7 | import { useRouter } from "next/navigation";
  8 | import { ArrowRight, Trash2 } from "lucide-react";
  9 | import { useState } from "react";
 10 | import {
 11 |   Dialog,
 12 |   DialogContent,
 13 |   DialogDescription,
 14 |   DialogFooter,
 15 |   DialogHeader,
 16 |   DialogTitle,
 17 |   DialogTrigger,
 18 | } from "@/components/ui/dialog";
 19 | 
 20 | interface SpaceCardProps {
 21 |   space: {
 22 |     id: string;
 23 |     name: string;
 24 |   };
 25 |   handleDeleteSpace: (id: string) => void;
 26 | }
 27 | 
 28 | export default function SpacesCard({
 29 |   space,
 30 |   handleDeleteSpace,
 31 | }: SpaceCardProps) {
 32 |   const router = useRouter();
 33 |   const [isDialogOpen, setIsDialogOpen] = useState(false);
 34 |   const [spaceToDelete, setSpaceToDelete] = useState<string | null>(null);
 35 | 
 36 |   const handleDeleteClick = (id: string) => {
 37 |     setSpaceToDelete(id);
 38 |     setIsDialogOpen(true);
 39 |   };
 40 | 
 41 |   const confirmDelete = () => {
 42 |     if (spaceToDelete) {
 43 |       handleDeleteSpace(spaceToDelete);
 44 |       setSpaceToDelete(null);
 45 |       setIsDialogOpen(false);
 46 |     }
 47 |   };
 48 | 
 49 |   return (
 50 |     <motion.div
 51 |       initial={{ opacity: 0, y: 20 }}
 52 |       animate={{ opacity: 1, y: 0 }}
 53 |       transition={{ duration: 0.5 }}
 54 |       className="p-4 md:p-6"
 55 |     >
 56 |       <Card className="w-full max-w-3xl overflow-hidden rounded-2xl border border-gray-700 bg-gray-800 transition-all duration-300 ease-in-out hover:shadow-[0_10px_20px_rgba(128,90,213,0.5)]">
 57 |         <CardContent className="p-0">
 58 |           <motion.div
 59 |             className="relative h-48 w-full sm:h-64 md:h-72 lg:h-80 xl:h-96"
 60 |             whileHover={{ scale: 1.04 }}
 61 |             transition={{ duration: 0.4 }}
 62 |           >
 63 |             <Image
 64 |               src={
 65 |                 "https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
 66 |               }
 67 |               alt="Space image"
 68 |               layout="fill"
 69 |               objectFit="cover"
 70 |               className="rounded-t-2xl"
 71 |             />
 72 |             <motion.div
 73 |               className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/70 to-transparent"
 74 |               initial={{ opacity: 0 }}
 75 |               animate={{ opacity: 1 }}
 76 |               transition={{ delay: 0.2, duration: 0.5 }}
 77 |             />
 78 | 
 79 |             <motion.div
 80 |               className="absolute bottom-0 left-0 right-0 p-4 sm:p-6 md:p-8"
 81 |               initial={{ opacity: 0, y: 20 }}
 82 |               animate={{ opacity: 1, y: 0 }}
 83 |               transition={{ delay: 0.4, duration: 0.5 }}
 84 |             >
 85 |               <h2 className="mb-2 text-2xl font-bold tracking-tight text-white sm:text-3xl md:text-4xl lg:text-5xl">
 86 |                 {space.name}
 87 |               </h2>
 88 |             </motion.div>
 89 |           </motion.div>
 90 |         </CardContent>
 91 | 
 92 |         <CardFooter className="flex flex-col space-y-2 p-4 sm:p-6 md:flex-row md:justify-between md:space-x-4 md:space-y-0">
 93 |           <Button
 94 |             variant="outline"
 95 |             size="lg"
 96 |             className="w-full rounded-lg border-purple-600 bg-purple-700 text-white shadow-md transition-colors duration-300 hover:bg-purple-600 hover:shadow-purple-600/50 md:w-auto"
 97 |             onClick={() => router.push(`/dashboard/${space.id}`)}
 98 |           >
 99 |             <ArrowRight className="mr-2 h-5 w-5" />
100 |             View Space
101 |           </Button>
102 |           <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
103 |             <DialogTrigger asChild>
104 |               <Button
105 |                 variant="outline"
106 |                 size="lg"
107 |                 className="w-full rounded-lg border-gray-500 bg-gray-600 text-gray-200 shadow-md transition-colors duration-300 hover:bg-gray-700 hover:text-white hover:shadow-gray-500/50 md:w-auto"
108 |                 onClick={() => handleDeleteClick(space.id)}
109 |               >
110 |                 <Trash2 className="mr-2 h-5 w-5" />
111 |                 Delete Space
112 |               </Button>
113 |             </DialogTrigger>
114 |             <DialogContent className="w-full sm:max-w-[425px]">
115 |               <DialogHeader>
116 |                 <DialogTitle>Confirm Deletion</DialogTitle>
117 |                 <DialogDescription>
118 |                   Are you sure you want to delete this space? This action cannot
119 |                   be undone.
120 |                 </DialogDescription>
121 |               </DialogHeader>
122 |               <DialogFooter className="flex flex-col space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0">
123 |                 <Button
124 |                   variant="outline"
125 |                   onClick={() => setIsDialogOpen(false)}
126 |                   className="w-full sm:w-auto"
127 |                 >
128 |                   Cancel
129 |                 </Button>
130 |                 <Button
131 |                   type="submit"
132 |                   className="w-full rounded-lg bg-red-600 text-white shadow-md transition-colors duration-300 hover:bg-red-700 hover:shadow-red-500/50 sm:w-auto"
133 |                   onClick={confirmDelete}
134 |                 >
135 |                   Confirm
136 |                 </Button>
137 |               </DialogFooter>
138 |             </DialogContent>
139 |           </Dialog>
140 |         </CardFooter>
141 |       </Card>
142 |     </motion.div>
143 |   );
144 | }
145 | 


--------------------------------------------------------------------------------
/next-app/components/StreamView/AddSongForm.tsx:
--------------------------------------------------------------------------------
  1 | import { YT_REGEX } from "@/lib/utils";
  2 | import { useSocket } from "@/context/socket-context";
  3 | import React from "react";
  4 | import { Button } from "@/components/ui/button";
  5 | import { Input } from "@/components/ui/input";
  6 | import { Card, CardContent } from "@/components/ui/card";
  7 | import LiteYouTubeEmbed from "react-lite-youtube-embed";
  8 | import { useConnection, useWallet } from "@solana/wallet-adapter-react";
  9 | import { LAMPORTS_PER_SOL, PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
 10 | import { useSession } from "next-auth/react";
 11 | 
 12 | 
 13 | 
 14 | type Props = {
 15 |   inputLink: string;
 16 |   creatorId: string;
 17 |   userId: string;
 18 |   setLoading: (value: boolean) => void;
 19 |   setInputLink: (value: string) => void;
 20 |   loading: boolean;
 21 |   enqueueToast: (type: "error" | "success", message: string) => void;
 22 |   spaceId:string,
 23 |   isSpectator:boolean
 24 | };
 25 | 
 26 | export default function AddSongForm({
 27 |   inputLink,
 28 |   enqueueToast,
 29 |   setInputLink,
 30 |   loading,
 31 |   setLoading,
 32 |   userId,
 33 |   spaceId,
 34 |   isSpectator,
 35 | }: Props) {
 36 |   const { sendMessage } = useSocket();
 37 |   const wallet = useWallet();
 38 |   const {connection} = useConnection();
 39 |   const user = useSession().data?.user;
 40 | 
 41 |   const handleSubmit = async (e: React.FormEvent) => {
 42 |     e.preventDefault();
 43 |     if (inputLink.match(YT_REGEX)) {
 44 |       setLoading(true);
 45 |       
 46 |       sendMessage("add-to-queue", {
 47 |         spaceId,
 48 |         userId,
 49 |         url: inputLink,
 50 |       });
 51 |     } else {
 52 |       enqueueToast("error", "Invalid please use specified format");
 53 |     }
 54 |     setLoading(false);
 55 |     setInputLink("");
 56 |   };
 57 | 
 58 |   const handlePayAndPlay = async (e: React.FormEvent) => {
 59 |     e.preventDefault();
 60 | 
 61 |     if(!wallet.publicKey || !connection){
 62 |       enqueueToast("error", "Please connect your wallet");
 63 |       return;
 64 |     }
 65 |     if (!inputLink.match(YT_REGEX)) {
 66 |       enqueueToast("error", "Invalid please use specified formate");
 67 |     }
 68 |     try{
 69 |       setLoading(true);
 70 |       const transaction = new Transaction();
 71 |       transaction.add(
 72 |           SystemProgram.transfer({
 73 |               fromPubkey: wallet.publicKey,
 74 |               toPubkey: new PublicKey(process.env.NEXT_PUBLIC_PUBLICKEY as string),
 75 |               lamports: Number(process.env.NEXT_PUBLIC_SOL_PER_PAYMENT) * LAMPORTS_PER_SOL,
 76 |           })
 77 |       )
 78 | 
 79 |       // sign Transaction steps 
 80 |       const blockHash = await connection.getLatestBlockhash();
 81 |       transaction.feePayer = wallet.publicKey;
 82 |       transaction.recentBlockhash = blockHash.blockhash;
 83 |       //@ts-ignore
 84 |       const signed = await wallet.signTransaction(transaction);
 85 |       
 86 | 
 87 |       const signature = await connection.sendRawTransaction(signed.serialize());
 88 |       
 89 |       enqueueToast("success", `Transaction signature: ${signature}`);
 90 |       await connection.confirmTransaction({
 91 |           blockhash: blockHash.blockhash,
 92 |           lastValidBlockHeight: blockHash.lastValidBlockHeight,
 93 |           signature
 94 |       });
 95 |       enqueueToast("success", `Payment successful`);
 96 |       sendMessage("pay-and-play-next", {
 97 |         spaceId,
 98 |         userId: user?.id,
 99 |         url:inputLink
100 |       });
101 |     }
102 |     catch(error){
103 |       enqueueToast("error", `Payment unsuccessful`);
104 |     }
105 |     setLoading(false);
106 | 
107 |   };
108 | 
109 |   const videoId = inputLink ? inputLink.match(YT_REGEX)?.[1] : undefined;
110 | 
111 |   return (
112 |     <>
113 |       <div className="flex items-center justify-between">
114 |         <h1 className="text-xl font-bold">Add a song</h1>
115 |       </div>
116 | 
117 |       <form onSubmit={handleSubmit} className="space-y-2">
118 |         <Input
119 |           type="text"
120 |           placeholder="Please paste your link"
121 |           value={inputLink}
122 |           onChange={(e) => setInputLink(e.target.value)}
123 |         />
124 |         <Button
125 |           disabled={loading}
126 |           onClick={handleSubmit}
127 |           type="submit"
128 |           className="w-full"
129 |         >
130 |           {loading ? "Loading..." : "Add to Queue"}
131 |         </Button>
132 |         
133 |         { isSpectator && 
134 |           <Button
135 |             disabled={loading}
136 |             onClick={handlePayAndPlay}
137 |             type="submit"
138 |             className="w-full"
139 |           >
140 |             {loading ? "Loading..." : "Pay and Play"}
141 |           </Button>
142 |         }
143 |         
144 |       </form>
145 | 
146 |       {videoId && !loading && (
147 |         <Card>
148 |           <CardContent className="p-4">
149 |             <LiteYouTubeEmbed title="" id={videoId} />
150 |           </CardContent>
151 |         </Card>
152 |       )}
153 |     </>
154 |   );
155 | }
156 | 


--------------------------------------------------------------------------------
/next-app/components/StreamView/NowPlaying.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef } from "react";
 2 | import { Card, CardContent } from "@/components/ui/card";
 3 | import { Button } from "@/components/ui/button";
 4 | import { Play } from "lucide-react";
 5 | //@ts-ignore
 6 | import YouTubePlayer from "youtube-player";
 7 | import Image from "next/image";
 8 | 
 9 | 
10 | type Props = {
11 |   playVideo: boolean;
12 |   currentVideo: Video | null;
13 |   playNextLoader: boolean;
14 |   playNext: () => void;
15 | };
16 | 
17 | export default function NowPlaying({
18 |   playVideo,
19 |   currentVideo,
20 |   playNext,
21 |   playNextLoader,
22 | }: Props) {
23 |   const videoPlayerRef = useRef<HTMLDivElement>();
24 | 
25 |   useEffect(() => {
26 |     if (!videoPlayerRef.current || !currentVideo) {
27 |       return;
28 |     }
29 |     let player = YouTubePlayer(videoPlayerRef.current);
30 | 
31 |     // 'loadVideoById' is queued until the player is ready to receive API calls.
32 |     player.loadVideoById(currentVideo.extractedId);
33 | 
34 |     // 'playVideo' is queue until the player is ready to received API calls and after 'loadVideoById' has been called.
35 |     player.playVideo();
36 |     function eventHandler(event: any) {
37 |       console.log(event);
38 |       console.log(event.data);
39 |       if (event.data === 0) {
40 |         playNext();
41 |       }
42 |     }
43 |     player.on("stateChange", eventHandler);
44 |     return () => {
45 |       player.destroy();
46 |     };
47 |   }, [currentVideo, videoPlayerRef]);
48 | 
49 |   return (
50 |     <div className="space-y-4">
51 |       <h2 className="text-2xl font-bold">Now Playing</h2>
52 |       <Card>
53 |         <CardContent className="p-4">
54 |           {currentVideo ? (
55 |             <div>
56 |               {playVideo ? (
57 |                 <>
58 |                   {/* @ts-ignore */}
59 |                   <div ref={videoPlayerRef} className="w-full" />
60 |                 </>
61 |               ) : (
62 |                 <>
63 |                   <Image
64 |                     height={288}
65 |                     width={288}
66 |                     alt={currentVideo.bigImg}
67 |                     src={currentVideo.bigImg}
68 |                     className="h-72 w-full rounded object-cover"
69 |                   />
70 |                   <p className="mt-2 text-center font-semibold">
71 |                     {currentVideo.title}
72 |                   </p>
73 |                 </>
74 |               )}
75 |             </div>
76 |           ) : (
77 |             <p className="py-8 text-center">No video playing</p>
78 |           )}
79 |         </CardContent>
80 |       </Card>
81 |       {playVideo && (
82 |         <Button disabled={playNextLoader} onClick={playNext} className="w-full">
83 |           <Play className="mr-2 h-4 w-4" />{" "}
84 |           {playNextLoader ? "Loading..." : "Play next"}
85 |         </Button>
86 |       )}
87 |     </div>
88 |   );
89 | }
90 | 


--------------------------------------------------------------------------------
/next-app/components/StreamView/Queue.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { Card, CardContent } from "@/components/ui/card";
  3 | import { Button } from "@/components/ui/button";
  4 | import { ChevronDown, ChevronUp, Play, Share2, Trash2, X } from "lucide-react";
  5 | import { useSocket } from "@/context/socket-context";
  6 | import { toast } from "sonner";
  7 | import Image from "next/image";
  8 | import {
  9 |   Dialog,
 10 |   DialogContent,
 11 |   DialogDescription,
 12 |   DialogFooter,
 13 |   DialogHeader,
 14 |   DialogTitle,
 15 | } from "@/components/ui/dialog";
 16 | import { useAutoAnimate } from "@formkit/auto-animate/react";
 17 | 
 18 | type Props = {
 19 |   queue: Video[];
 20 |   creatorId: string;
 21 |   userId: string;
 22 |   isCreator: boolean;
 23 |   spaceId:string
 24 | };
 25 | 
 26 | export default function Queue({ queue, isCreator, creatorId, userId,spaceId }: Props) {
 27 |   const { sendMessage } = useSocket();
 28 |   const [isEmptyQueueDialogOpen, setIsEmptyQueueDialogOpen] = useState(false);
 29 |   const [parent] = useAutoAnimate();
 30 | 
 31 |   function handleVote(id: string, isUpvote: boolean) {
 32 |     sendMessage("cast-vote", {
 33 |       vote: isUpvote ? "upvote" : "downvote",
 34 |       streamId: id,
 35 |       userId,
 36 |       creatorId,
 37 |       spaceId
 38 |     });
 39 |   }
 40 | 
 41 |   const handleShare = () => {
 42 |     const shareableLink = `${window.location.origin}/spaces/${spaceId}`;
 43 |     navigator.clipboard.writeText(shareableLink).then(
 44 |       () => {
 45 |         toast.success("Link copied to clipboard!");
 46 |       },
 47 |       (err) => {
 48 |         console.error("Could not copy text: ", err);
 49 |         toast.error("Failed to copy link. Please try again.");
 50 |       },
 51 |     );
 52 |   };
 53 | 
 54 |   const emptyQueue = async () => {
 55 |     sendMessage("empty-queue", {
 56 |       spaceId:spaceId,
 57 |     });
 58 |     setIsEmptyQueueDialogOpen(false);
 59 |   };
 60 | 
 61 |   const removeSong = async (streamId: string) => {
 62 |     sendMessage("remove-song", {
 63 |       streamId,
 64 |       userId,
 65 |       spaceId,
 66 |     });
 67 |   };
 68 | 
 69 |   return (
 70 |     <>
 71 |       <div className="col-span-3">
 72 |         <div className="space-y-4">
 73 |           <div className="flex flex-col items-start justify-between space-y-4 sm:flex-row sm:items-center sm:space-y-0">
 74 |             <h2 className="text-3xl font-bold">Upcoming Songs</h2>
 75 |             <div className="flex space-x-2">
 76 |               <Button onClick={handleShare}>
 77 |                 <Share2 className="mr-2 h-4 w-4" /> Share
 78 |               </Button>
 79 |               {isCreator && (
 80 |                 <Button
 81 |                   onClick={() => setIsEmptyQueueDialogOpen(true)}
 82 |                   variant="secondary"
 83 |                 >
 84 |                   <Trash2 className="mr-2 h-4 w-4" /> Empty Queue
 85 |                 </Button>
 86 |               )}
 87 |             </div>
 88 |           </div>
 89 |           {queue.length === 0 && (
 90 |             <Card className="w-full">
 91 |               <CardContent className="p-4">
 92 |                 <p className="py-8 text-center">No videos in queue</p>
 93 |               </CardContent>
 94 |             </Card>
 95 |           )}
 96 |           <div className="space-y-4" ref={parent}>
 97 |           {queue.map((video) => (
 98 |             <Card key={video.id} className="">
 99 |               <CardContent className="flex items-center space-x-4 p-4">
100 |                 <Image
101 |                 height={80}
102 |                 width={128}
103 |                   src={video.smallImg}
104 |                   alt={`Thumbnail for ${video.title}`}
105 |                   className="w-32 h-20 rounded object-cover"
106 |                 />
107 |                 <div className="flex-grow">
108 |                   <h3 className="font-semibold">{video.title}</h3>
109 |                   <div className="mt-2 flex items-center space-x-2">
110 |                     <Button
111 |                       variant="outline"
112 |                       size="sm"
113 |                       onClick={() =>
114 |                         handleVote(video.id, video.haveUpvoted ? false : true)
115 |                       }
116 |                       className="flex items-center space-x-1"
117 |                     >
118 |                       {video.haveUpvoted ? (
119 |                         <ChevronDown className="h-4 w-4" />
120 |                       ) : (
121 |                         <ChevronUp className="h-4 w-4" />
122 |                       )}
123 |                       <span>{video.upvotes}</span>
124 |                     </Button>
125 |                     {isCreator && (
126 |                       <Button
127 |                         variant="outline"
128 |                         size="sm"
129 |                         onClick={() => removeSong(video.id)}
130 |                       >
131 |                         <X className="h-4 w-4" />
132 |                       </Button>
133 |                     )}
134 |                   </div>
135 |                 </div>
136 |               </CardContent>
137 |             </Card>
138 |           ))}
139 |           </div>
140 |         </div>
141 |       </div>
142 |       <Dialog
143 |         open={isEmptyQueueDialogOpen}
144 |         onOpenChange={setIsEmptyQueueDialogOpen}
145 |       >
146 |         <DialogContent>
147 |           <DialogHeader>
148 |             <DialogTitle>Empty Queue</DialogTitle>
149 |             <DialogDescription>
150 |               Are you sure you want to empty the queue? This will remove all
151 |               songs from the queue. This action cannot be undone.
152 |             </DialogDescription>
153 |           </DialogHeader>
154 |           <DialogFooter>
155 |             <Button
156 |               variant="outline"
157 |               onClick={() => setIsEmptyQueueDialogOpen(false)}
158 |             >
159 |               Cancel
160 |             </Button>
161 |             <Button onClick={emptyQueue} variant="destructive">
162 |               Empty Queue
163 |             </Button>
164 |           </DialogFooter>
165 |         </DialogContent>
166 |       </Dialog>
167 |     </>
168 |   );
169 | }
170 | 


--------------------------------------------------------------------------------
/next-app/components/StreamView/index.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useEffect, useState } from "react";
  3 | import { toast } from "sonner";
  4 | 
  5 | import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
  6 | 
  7 | import { useSocket } from "@/context/socket-context";
  8 | import { useSession } from "next-auth/react";
  9 | import NowPlaying from "./NowPlaying";
 10 | import Queue from "./Queue";
 11 | import AddSongForm from "./AddSongForm";
 12 | import { Appbar } from "../Appbar";
 13 | 
 14 | export default function StreamView({
 15 |   creatorId,
 16 |   playVideo = false,
 17 |   spaceId,
 18 | }: {
 19 |   creatorId: string;
 20 |   playVideo: boolean;
 21 |   spaceId: string;
 22 | }) {
 23 |   const [inputLink, setInputLink] = useState("");
 24 |   const [queue, setQueue] = useState<Video[]>([]);
 25 |   const [currentVideo, setCurrentVideo] = useState<Video | null>(null);
 26 |   const [loading, setLoading] = useState(false);
 27 |   const [playNextLoader, setPlayNextLoader] = useState(false);
 28 |   const [spaceName, setSpaceName] = useState("");
 29 | 
 30 |   const { socket, sendMessage } = useSocket();
 31 |   const user = useSession().data?.user;
 32 | 
 33 |   useEffect(() => {
 34 |     if (socket) {
 35 |       socket.onmessage = async (event) => {
 36 |         const { type, data } = JSON.parse(event.data) || {};
 37 |         if (type === `new-stream/${spaceId}`) {
 38 |           console.log(type);
 39 |           addToQueue(data);
 40 |         } else if (type === `new-vote/${spaceId}`) {
 41 |           setQueue((prev) => {
 42 |             return prev
 43 |               .map((v) => {
 44 |                 if (v.id === data.streamId) {
 45 |                   return {
 46 |                     ...v,
 47 |                     upvotes: v.upvotes + (data.vote === "upvote" ? 1 : -1),
 48 |                     haveUpvoted:
 49 |                       data.votedBy === user?.id
 50 |                         ? data.vote === "upvote"
 51 |                         : v.haveUpvoted,
 52 |                   };
 53 |                 }
 54 |                 return v;
 55 |               })
 56 |               .sort((a, b) => b.upvotes - a.upvotes);
 57 |           });
 58 |         } else if (type === "error") {
 59 |           enqueueToast("error", data.message);
 60 |           setLoading(false);
 61 |         } else if (type === `play-next/${spaceId}`) {
 62 |           await refreshStreams();
 63 |         } else if (type === `remove-song/${spaceId}`) {
 64 |           setQueue((prev) => {
 65 |             return prev.filter((stream) => stream.id !== data.streamId);
 66 |           });
 67 |         } else if (type === `empty-queue/${spaceId}`) {
 68 |           setQueue([]);
 69 |         }
 70 |       };
 71 |     }
 72 |   }, [socket]);
 73 | 
 74 |   useEffect(() => {
 75 |     refreshStreams();
 76 |   }, []);
 77 | 
 78 |   async function addToQueue(newStream: any) {
 79 |     setQueue((prev) => [...prev, newStream]);
 80 |     setInputLink("");
 81 |     setLoading(false);
 82 |   }
 83 | 
 84 |   async function refreshStreams() {
 85 |     try {
 86 |       const res = await fetch(`/api/streams/?spaceId=${spaceId}`, {
 87 |         credentials: "include",
 88 |       });
 89 |       const json = await res.json();
 90 |       setQueue(
 91 |         json.streams.sort((a: any, b: any) => (a.upvotes < b.upvotes ? 1 : -1)),
 92 |       );
 93 | 
 94 |       setCurrentVideo((video) => {
 95 |         if (video?.id === json.activeStream?.stream?.id) {
 96 |           return video;
 97 |         }
 98 |         return json.activeStream.stream;
 99 |       });
100 |       setSpaceName(json.spaceName);
101 |     } catch (error) {
102 |       enqueueToast("error", "Something went wrong");
103 |     }
104 | 
105 |     setPlayNextLoader(false);
106 |   }
107 | 
108 |   const playNext = async () => {
109 |     setPlayNextLoader(true);
110 |     sendMessage("play-next", {
111 |       spaceId,
112 |       userId: user?.id,
113 |     });
114 |   };
115 | 
116 |   const enqueueToast = (type: "error" | "success", message: string) => {
117 |     const toastFn = type === "error" ? toast.error : toast.success;
118 |   
119 |     toastFn(message, {
120 |       duration: 5000,
121 |     });
122 |   };
123 |   
124 | 
125 |   return (
126 |     <div className="flex min-h-screen flex-col">
127 |       <Appbar isSpectator={!playVideo} />
128 |       <div className="mx-auto rounded-lg p-2 bg-gradient-to-r from-indigo-600 to-violet-800 text-2xl font-bold">
129 |         {spaceName}
130 |       </div>
131 |       <div className="flex justify-center">
132 |         <div className="grid w-screen max-w-screen-xl grid-cols-1 gap-4 pt-8 md:grid-cols-5">
133 |           <Queue
134 |             creatorId={creatorId}
135 |             isCreator={playVideo}
136 |             queue={queue}
137 |             userId={user?.id || ""}
138 |             spaceId={spaceId}
139 |           />
140 |           <div className="col-span-2">
141 |             <div className="mx-auto w-full max-w-4xl space-y-6 p-4">
142 |               <AddSongForm
143 |                 creatorId={creatorId}
144 |                 userId={user?.id || ""}
145 |                 enqueueToast={enqueueToast}
146 |                 inputLink={inputLink}
147 |                 loading={loading}
148 |                 setInputLink={setInputLink}
149 |                 setLoading={setLoading}
150 |                 spaceId={spaceId}
151 |                 isSpectator={!playVideo}
152 |               />
153 |               <NowPlaying
154 |                 currentVideo={currentVideo}
155 |                 playNext={playNext}
156 |                 playNextLoader={playNextLoader}
157 |                 playVideo={playVideo}
158 |               />
159 |             </div>
160 |           </div>
161 |         </div>
162 |       </div>
163 |       
164 |     </div>
165 |   );
166 | }
167 | 


--------------------------------------------------------------------------------
/next-app/components/ThemeSwitcher.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { Moon, Sun } from "lucide-react";
 4 | import { useTheme } from "next-themes";
 5 | import { Button } from "./ui/button";
 6 | import { useEffect, useState } from "react";
 7 | 
 8 | export function ThemeSwitcher() {
 9 |   const { theme, setTheme } = useTheme();
10 |   const [isMounted, setIsMounted] = useState(false);
11 |   const isDark = theme === "dark";
12 | 
13 |   useEffect(() => {
14 |     setIsMounted(true);
15 |   }, []);
16 | 
17 |   if (!isMounted) return null;
18 | 
19 |   const toggleTheme = () => {
20 |     setTheme(isDark ? "light" : "dark");
21 |   };
22 | 
23 |   return (
24 |     <Button
25 |       className="hover:bg-transparent"
26 |       onClick={toggleTheme}
27 |       variant="ghost"
28 |     >
29 |       {isDark ? <Sun /> : <Moon />}
30 |     </Button>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/next-app/components/auth/auth-screen.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState } from "react";
 4 | import { SignInFlow } from "@/types/auth-types";
 5 | import SigninCard from "./sign-in-card";
 6 | import SignupCard from "./sign-up-card";
 7 | 
 8 | export default function AuthScreen({ authType }: { authType?: SignInFlow }) {
 9 |   const [formType, setFormType] = useState<SignInFlow>(authType || "signIn");
10 |   return (
11 |     <div className=" w-full h-full flex items-center justify-center gap-5 bg-gradient-to-b from-purple-900 to-gray-900">
12 |       <div className="w-full md:h-auto md:w-[420px] px-4">
13 |         {formType === "signIn" ? (
14 |           <SigninCard setFormType={setFormType} />
15 |         ) : (
16 |           <SignupCard setFormType={setFormType} />
17 |         )}
18 |       </div>
19 |     </div>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/next-app/components/auth/sign-in-card.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import React, { useState } from "react";
  3 | import { TriangleAlert } from "lucide-react";
  4 | import { FcGoogle } from "react-icons/fc";
  5 | import { signIn } from "next-auth/react";
  6 | import { useRouter } from "next/navigation";
  7 | 
  8 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
  9 | import { Separator } from "@/components/ui/separator";
 10 | import { Button } from "@/components/ui/button";
 11 | import { Input } from "@/components/ui/input";
 12 | import { SignInFlow } from "@/types/auth-types";
 13 | 
 14 | interface SigninCardProps {
 15 |   setFormType: (state: SignInFlow) => void;
 16 | }
 17 | 
 18 | export default function SigninCard({ setFormType: setState }: SigninCardProps) {
 19 |   const [email, setEmail] = useState("");
 20 |   const [password, setPassword] = useState("");
 21 |   const [pending, setPending] = useState(false);
 22 |   const [error, setError] = useState("");
 23 |   const router = useRouter();
 24 | 
 25 |   const signInWithProvider = async (provider: "google" | "credentials") => {
 26 |     try {
 27 |       if (provider === "credentials") {
 28 |         const res = signIn(provider, {
 29 |           email,
 30 |           password,
 31 |           redirect: false,
 32 |           callbackUrl: "/home",
 33 |         });
 34 |         res.then((res) => {
 35 |           if (res?.error) {
 36 |             setError(res.error);
 37 |           }
 38 |           if (!res?.error) {
 39 |             router.push("/");
 40 |           }
 41 |           setPending(false);
 42 |         });
 43 |       }
 44 |       if (provider === "google") {
 45 |         const res = signIn(provider, {
 46 |           redirect: false,
 47 |           callbackUrl: "/home",
 48 |         });
 49 |         res.then((res) => {
 50 |           if (res?.error) {
 51 |             setError(res.error);
 52 |           }
 53 | 
 54 |           if (!res?.error) {
 55 |             router.push("/");
 56 |           }
 57 |           console.log(res);
 58 |           setPending(false);
 59 |         });
 60 |       }
 61 |     } catch (error) {
 62 |       console.log(error);
 63 |     }
 64 |   };
 65 | 
 66 |   const handlerCredentialSignin = (e: React.FormEvent<HTMLFormElement>) => {
 67 |     e.preventDefault();
 68 | 
 69 |     setError("");
 70 |     setPending(true);
 71 |     signInWithProvider("credentials");
 72 |   };
 73 | 
 74 |   const handleGoogleSignin = (provider: "google") => {
 75 |     setError("");
 76 |     setPending(true);
 77 |     signInWithProvider(provider);
 78 |   };
 79 | 
 80 |   return (
 81 |     <Card className="h-full w-full border-purple-600 bg-gray-800 bg-opacity-50 p-8">
 82 |       <CardHeader className="w-full">
 83 |         <CardTitle className="text-center text-3xl font-bold text-white">
 84 |           Login to Muzer
 85 |         </CardTitle>
 86 |       </CardHeader>
 87 |       {!!error && (
 88 |         <div className="mb-6 flex w-full items-center gap-x-2 rounded-md bg-destructive p-3 text-sm text-white">
 89 |           <TriangleAlert className="size-4 shrink-0" />
 90 |           <p>{error}</p>
 91 |         </div>
 92 |       )}
 93 |       <CardContent className="space-y-6 px-0 pb-0">
 94 |         <form onSubmit={handlerCredentialSignin} className="space-y-4">
 95 |           <Input
 96 |             disabled={pending}
 97 |             value={email}
 98 |             onChange={(e) => setEmail(e.target.value)}
 99 |             placeholder="Email"
100 |             className="border-gray-400 bg-transparent text-white placeholder:text-gray-400 focus-visible:ring-purple-600 focus-visible:ring-offset-0"
101 |             type="email"
102 |             required
103 |           />
104 |           <Input
105 |             disabled={pending}
106 |             value={password}
107 |             onChange={(e) => setPassword(e.target.value)}
108 |             placeholder="Password"
109 |             className="border-gray-400 bg-transparent text-white placeholder:text-gray-400 focus-visible:ring-purple-600 focus-visible:ring-offset-0"
110 |             type="password"
111 |             required
112 |           />
113 |           <Button
114 |             disabled={pending}
115 |             type="submit"
116 |             className="w-full bg-purple-600 hover:bg-purple-700"
117 |             size={"lg"}
118 |           >
119 |             Continue
120 |           </Button>
121 |         </form>
122 |         <Separator className="bg-gradient-to-r from-gray-800 via-neutral-500 to-gray-800" />
123 |         <div className="flex flex-col items-center gap-y-2.5">
124 |           <Button
125 |             disabled={pending}
126 |             onClick={() => {
127 |               handleGoogleSignin("google");
128 |             }}
129 |             size={"lg"}
130 |             className="relative w-full bg-white text-black hover:bg-white/90"
131 |           >
132 |             <FcGoogle className="absolute left-2.5 top-3 size-5" />
133 |             Continue with google
134 |           </Button>
135 |           <p className="text-xs text-muted-foreground">
136 |             Don&apos;t have an account?{" "}
137 |             <span
138 |               className="cursor-pointer text-sky-700 hover:underline"
139 |               onClick={() => setState("signUp")}
140 |             >
141 |               Sign up
142 |             </span>
143 |           </p>
144 |         </div>
145 |       </CardContent>
146 |     </Card>
147 |   );
148 | }
149 | 


--------------------------------------------------------------------------------
/next-app/components/auth/sign-up-card.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useState } from "react";
  3 | import { FcGoogle } from "react-icons/fc";
  4 | import {
  5 |   Card,
  6 |   CardContent,
  7 |   CardDescription,
  8 |   CardHeader,
  9 |   CardTitle,
 10 | } from "@/components/ui/card";
 11 | import { Button } from "@/components/ui/button";
 12 | import { Input } from "@/components/ui/input";
 13 | import { Separator } from "@/components/ui/separator";
 14 | 
 15 | import { SignInFlow } from "@/types/auth-types";
 16 | import { TriangleAlert } from "lucide-react";
 17 | import { useRouter } from "next/navigation";
 18 | import { signIn } from "next-auth/react";
 19 | 
 20 | interface SignupCardProps {
 21 |   setFormType: (state: SignInFlow) => void;
 22 | }
 23 | 
 24 | export default function SignupCard({ setFormType: setState }: SignupCardProps) {
 25 |   const [email, setEmail] = useState("");
 26 |   const [password, setPassword] = useState("");
 27 |   const [confirmPassword, setConfirmPassword] = useState("");
 28 |   const [error, setError] = useState("");
 29 |   const [pending, setPending] = useState(false);
 30 |   const router = useRouter();
 31 | 
 32 |   const signInWithProvider = async (provider: "google" | "credentials") => {
 33 |     try {
 34 |       if (provider === "credentials") {
 35 |         const res = signIn(provider, {
 36 |           email,
 37 |           password,
 38 |           redirect: false,
 39 |           callbackUrl: "/home",
 40 |         });
 41 |         res.then((res) => {
 42 |           if (res?.error) {
 43 |             setError(res.error);
 44 |           }
 45 |           if (!res?.error) {
 46 |             router.push("/");
 47 |           }
 48 |           setPending(false);
 49 |         });
 50 |       }
 51 |       if (provider === "google") {
 52 |         const res = signIn(provider, {
 53 |           redirect: false,
 54 |           callbackUrl: "/home",
 55 |         });
 56 |         res.then((res) => {
 57 |           if (res?.error) {
 58 |             setError(res.error);
 59 |           }
 60 |           console.log(res);
 61 |           setPending(false);
 62 |         });
 63 |       }
 64 |     } catch (error) {
 65 |       console.log(error);
 66 |     }
 67 |   };
 68 | 
 69 |   const handlerCredentialSignup = (e: React.FormEvent<HTMLFormElement>) => {
 70 |     e.preventDefault();
 71 |     setError("");
 72 |     setPending(true);
 73 |     if (password !== confirmPassword) {
 74 |       setError("Passwords do not match");
 75 |       setPending(false);
 76 |       return;
 77 |     }
 78 |     signInWithProvider("credentials");
 79 |   };
 80 | 
 81 |   const handleGoogleSignup = (provider: "google") => {
 82 |     setError("");
 83 |     setPending(true);
 84 |     signInWithProvider(provider);
 85 |   };
 86 | 
 87 |   return (
 88 |     <Card className="h-full w-full border-purple-600 bg-gray-800 bg-opacity-50 p-8">
 89 |       <CardHeader className="w-full">
 90 |         <CardTitle className="text-center text-3xl font-bold text-white">
 91 |           Signup to Start listening
 92 |         </CardTitle>
 93 |       </CardHeader>
 94 |       {!!error && (
 95 |         <div className="mb-6 flex w-full items-center gap-x-2 rounded-md bg-destructive p-3 text-sm text-white">
 96 |           <TriangleAlert className="size-4 shrink-0" />
 97 |           <p>{error}</p>
 98 |         </div>
 99 |       )}
100 |       <CardContent className="space-y-6 px-0 pb-0">
101 |         <form className="space-y-4" onSubmit={handlerCredentialSignup}>
102 |           <Input
103 |             disabled={pending}
104 |             value={email}
105 |             placeholder="Email"
106 |             onChange={(e) => setEmail(e.target.value)}
107 |             className="border-gray-400 bg-transparent text-white placeholder:text-gray-400 focus-visible:ring-purple-600 focus-visible:ring-offset-0"
108 |             type="email"
109 |             required
110 |           />
111 |           <Input
112 |             disabled={pending}
113 |             value={password}
114 |             placeholder="Password"
115 |             onChange={(e) => setPassword(e.target.value)}
116 |             className="border-gray-400 bg-transparent text-white placeholder:text-gray-400 focus-visible:ring-purple-600 focus-visible:ring-offset-0"
117 |             type="password"
118 |             required
119 |           />
120 |           <Input
121 |             disabled={pending}
122 |             value={confirmPassword}
123 |             placeholder="Confirm Password"
124 |             onChange={(e) => setConfirmPassword(e.target.value)}
125 |             className="border-gray-400 bg-transparent text-white placeholder:text-gray-400 focus-visible:ring-purple-600 focus-visible:ring-offset-0"
126 |             type="password"
127 |             required
128 |           />
129 |           <Button
130 |             type="submit"
131 |             className="w-full bg-purple-600 hover:bg-purple-700"
132 |             size={"lg"}
133 |             disabled={pending}
134 |           >
135 |             Continue
136 |           </Button>
137 |         </form>
138 |         <Separator className="bg-gradient-to-r from-gray-800 via-neutral-500 to-gray-800" />
139 |         <div className="flex flex-col items-center gap-y-2.5">
140 |           <Button
141 |             disabled={pending}
142 |             onClick={() => {
143 |               handleGoogleSignup("google");
144 |             }}
145 |             size={"lg"}
146 |             className="relative w-full bg-white text-black hover:bg-white/90"
147 |           >
148 |             <FcGoogle className="absolute left-2.5 top-3 size-5" />
149 |             Continue with google
150 |           </Button>
151 |           <p className="text-xs text-muted-foreground">
152 |             Already have an account?{" "}
153 |             <span
154 |               className="cursor-pointer text-sky-700 hover:underline"
155 |               onClick={() => setState("signIn")}
156 |             >
157 |               Sign in
158 |             </span>
159 |           </p>
160 |         </div>
161 |       </CardContent>
162 |     </Card>
163 |   );
164 | }
165 | 


--------------------------------------------------------------------------------
/next-app/components/provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { SocketContextProvider } from "@/context/socket-context";
 4 | import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
 5 | import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
 6 | import { SessionProvider } from "next-auth/react";
 7 | import { ThemeProvider as NextThemesProvider } from "next-themes";
 8 | import { type ThemeProviderProps } from "next-themes/dist/types";
 9 | 
10 | export function Providers({ children }: { children: React.ReactNode }) {
11 |   return (
12 |     <ConnectionProvider endpoint={"https://api.devnet.solana.com"}>
13 |         <WalletProvider wallets={[]} autoConnect>
14 |             <WalletModalProvider>
15 |               <SessionProvider>
16 |                 <SocketContextProvider>{children}</SocketContextProvider>
17 |               </SessionProvider>
18 |             </WalletModalProvider>
19 |         </WalletProvider>
20 |     </ConnectionProvider>
21 |   );
22 | }
23 | 
24 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
25 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
26 | }
27 | 


--------------------------------------------------------------------------------
/next-app/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | );
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean;
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button";
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     );
52 |   }
53 | );
54 | Button.displayName = "Button";
55 | 
56 | export { Button, buttonVariants };
57 | 


--------------------------------------------------------------------------------
/next-app/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className,
14 |     )}
15 |     {...props}
16 |   />
17 | ));
18 | Card.displayName = "Card";
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ));
30 | CardHeader.displayName = "CardHeader";
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className,
41 |     )}
42 |     {...props}
43 |   />
44 | ));
45 | CardTitle.displayName = "CardTitle";
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ));
57 | CardDescription.displayName = "CardDescription";
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ));
65 | CardContent.displayName = "CardContent";
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ));
77 | CardFooter.displayName = "CardFooter";
78 | 
79 | export {
80 |   Card,
81 |   CardHeader,
82 |   CardFooter,
83 |   CardTitle,
84 |   CardDescription,
85 |   CardContent,
86 | };
87 | 


--------------------------------------------------------------------------------
/next-app/components/ui/cardSkeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { Skeleton } from "@/components/ui/skeleton";
 2 | 
 3 | export default function CardSkeleton() {
 4 |   return (
 5 |     <div className="flex flex-col space-y-4 p-4 md:p-6">
 6 |       {/* Skeleton for the image */}
 7 |       <Skeleton className="h-48 w-full rounded-t-2xl sm:h-64 md:h-72 lg:h-80 xl:h-96" />
 8 | 
 9 |       {/* Skeleton for the buttons */}
10 |       <div className="flex flex-col space-y-2 p-4 sm:p-6 md:flex-row md:justify-between md:space-x-4 md:space-y-0">
11 |         <Skeleton className="h-10 w-full rounded-lg" />
12 |         <Skeleton className="h-10 w-full rounded-lg" />
13 |       </div>
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/next-app/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import * as React from "react";
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog";
  5 | import { X } from "lucide-react";
  6 | 
  7 | import { cn } from "@/lib/utils";
  8 | 
  9 | const Dialog = DialogPrimitive.Root;
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger;
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal;
 14 | 
 15 | const DialogClose = DialogPrimitive.Close;
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className,
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ));
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className,
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <X className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ));
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName;
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className,
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | );
 68 | DialogHeader.displayName = "DialogHeader";
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className,
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | );
 82 | DialogFooter.displayName = "DialogFooter";
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className,
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ));
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName;
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ));
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName;
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogClose,
116 |   DialogTrigger,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | };
123 | 


--------------------------------------------------------------------------------
/next-app/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const DropdownMenu = DropdownMenuPrimitive.Root
  8 | 
  9 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 10 | 
 11 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 12 | 
 13 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 14 | 
 15 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 16 | 
 17 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 18 | 
 19 | const DropdownMenuSubTrigger = React.forwardRef<
 20 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <DropdownMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto h-4 w-4" />
 36 |   </DropdownMenuPrimitive.SubTrigger>
 37 | ))
 38 | DropdownMenuSubTrigger.displayName =
 39 |   DropdownMenuPrimitive.SubTrigger.displayName
 40 | 
 41 | const DropdownMenuSubContent = React.forwardRef<
 42 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 43 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 44 | >(({ className, ...props }, ref) => (
 45 |   <DropdownMenuPrimitive.SubContent
 46 |     ref={ref}
 47 |     className={cn(
 48 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 49 |       className
 50 |     )}
 51 |     {...props}
 52 |   />
 53 | ))
 54 | DropdownMenuSubContent.displayName =
 55 |   DropdownMenuPrimitive.SubContent.displayName
 56 | 
 57 | const DropdownMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 60 | >(({ className, sideOffset = 4, ...props }, ref) => (
 61 |   <DropdownMenuPrimitive.Portal>
 62 |     <DropdownMenuPrimitive.Content
 63 |       ref={ref}
 64 |       sideOffset={sideOffset}
 65 |       className={cn(
 66 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 67 |         className
 68 |       )}
 69 |       {...props}
 70 |     />
 71 |   </DropdownMenuPrimitive.Portal>
 72 | ))
 73 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 74 | 
 75 | const DropdownMenuItem = React.forwardRef<
 76 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 77 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 78 |     inset?: boolean
 79 |   }
 80 | >(({ className, inset, ...props }, ref) => (
 81 |   <DropdownMenuPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 85 |       inset && "pl-8",
 86 |       className
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 92 | 
 93 | const DropdownMenuCheckboxItem = React.forwardRef<
 94 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 95 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 96 | >(({ className, children, checked, ...props }, ref) => (
 97 |   <DropdownMenuPrimitive.CheckboxItem
 98 |     ref={ref}
 99 |     className={cn(
100 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
101 |       className
102 |     )}
103 |     checked={checked}
104 |     {...props}
105 |   >
106 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
107 |       <DropdownMenuPrimitive.ItemIndicator>
108 |         <Check className="h-4 w-4" />
109 |       </DropdownMenuPrimitive.ItemIndicator>
110 |     </span>
111 |     {children}
112 |   </DropdownMenuPrimitive.CheckboxItem>
113 | ))
114 | DropdownMenuCheckboxItem.displayName =
115 |   DropdownMenuPrimitive.CheckboxItem.displayName
116 | 
117 | const DropdownMenuRadioItem = React.forwardRef<
118 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
119 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
120 | >(({ className, children, ...props }, ref) => (
121 |   <DropdownMenuPrimitive.RadioItem
122 |     ref={ref}
123 |     className={cn(
124 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
125 |       className
126 |     )}
127 |     {...props}
128 |   >
129 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
130 |       <DropdownMenuPrimitive.ItemIndicator>
131 |         <Circle className="h-2 w-2 fill-current" />
132 |       </DropdownMenuPrimitive.ItemIndicator>
133 |     </span>
134 |     {children}
135 |   </DropdownMenuPrimitive.RadioItem>
136 | ))
137 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
138 | 
139 | const DropdownMenuLabel = React.forwardRef<
140 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
141 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
142 |     inset?: boolean
143 |   }
144 | >(({ className, inset, ...props }, ref) => (
145 |   <DropdownMenuPrimitive.Label
146 |     ref={ref}
147 |     className={cn(
148 |       "px-2 py-1.5 text-sm font-semibold",
149 |       inset && "pl-8",
150 |       className
151 |     )}
152 |     {...props}
153 |   />
154 | ))
155 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
156 | 
157 | const DropdownMenuSeparator = React.forwardRef<
158 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
159 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
160 | >(({ className, ...props }, ref) => (
161 |   <DropdownMenuPrimitive.Separator
162 |     ref={ref}
163 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
164 |     {...props}
165 |   />
166 | ))
167 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
168 | 
169 | const DropdownMenuShortcut = ({
170 |   className,
171 |   ...props
172 | }: React.HTMLAttributes<HTMLSpanElement>) => {
173 |   return (
174 |     <span
175 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
176 |       {...props}
177 |     />
178 |   )
179 | }
180 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
181 | 
182 | export {
183 |   DropdownMenu,
184 |   DropdownMenuTrigger,
185 |   DropdownMenuContent,
186 |   DropdownMenuItem,
187 |   DropdownMenuCheckboxItem,
188 |   DropdownMenuRadioItem,
189 |   DropdownMenuLabel,
190 |   DropdownMenuSeparator,
191 |   DropdownMenuShortcut,
192 |   DropdownMenuGroup,
193 |   DropdownMenuPortal,
194 |   DropdownMenuSub,
195 |   DropdownMenuSubContent,
196 |   DropdownMenuSubTrigger,
197 |   DropdownMenuRadioGroup,
198 | }
199 | 


--------------------------------------------------------------------------------
/next-app/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className,
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     );
21 |   },
22 | );
23 | Input.displayName = "Input";
24 | 
25 | export { Input };
26 | 


--------------------------------------------------------------------------------
/next-app/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Separator = React.forwardRef<
 9 |   React.ElementRef<typeof SeparatorPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
11 | >(
12 |   (
13 |     { className, orientation = "horizontal", decorative = true, ...props },
14 |     ref
15 |   ) => (
16 |     <SeparatorPrimitive.Root
17 |       ref={ref}
18 |       decorative={decorative}
19 |       orientation={orientation}
20 |       className={cn(
21 |         "shrink-0 bg-border",
22 |         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   )
28 | )
29 | Separator.displayName = SeparatorPrimitive.Root.displayName
30 | 
31 | export { Separator }
32 | 


--------------------------------------------------------------------------------
/next-app/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-muted", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/next-app/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useTheme } from "next-themes"
 4 | import { Toaster as Sonner } from "sonner"
 5 | 
 6 | type ToasterProps = React.ComponentProps<typeof Sonner>
 7 | 
 8 | const Toaster = ({ ...props }: ToasterProps) => {
 9 |   const { theme = "dark" } = useTheme()
10 | 
11 |   return (
12 |     <Sonner
13 |       theme={theme as ToasterProps["theme"]}
14 |       className="toaster group"
15 |       toastOptions={{
16 |         classNames: {
17 |           toast:
18 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
19 |           description: "group-[.toast]:text-muted-foreground",
20 |           actionButton:
21 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
22 |           cancelButton:
23 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
24 |         },
25 |       }}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | export { Toaster }
32 | 


--------------------------------------------------------------------------------
/next-app/context/socket-context.tsx:
--------------------------------------------------------------------------------
 1 | import { useSession } from "next-auth/react";
 2 | import {
 3 |   Dispatch,
 4 |   PropsWithChildren,
 5 |   SetStateAction,
 6 |   createContext,
 7 |   useContext,
 8 |   useEffect,
 9 |   useState,
10 | } from "react";
11 | 
12 | type SocketContextType = {
13 |   socket: null | WebSocket;
14 |   user: null | { id: string; token?: string };
15 |   connectionError: boolean;
16 |   setUser: Dispatch<SetStateAction<{ id: string; token?: string } | null>>;
17 |   loading: boolean;
18 | };
19 | 
20 | const SocketContext = createContext<SocketContextType>({
21 |   socket: null,
22 |   user: null,
23 |   connectionError: false,
24 |   setUser: () => {},
25 |   loading: true,
26 | });
27 | 
28 | export const SocketContextProvider = ({ children }: PropsWithChildren) => {
29 |   const [socket, setSocket] = useState<WebSocket | null>(null);
30 |   const [user, setUser] = useState<{ id: string; token?: string } | null>(null);
31 |   const [connectionError, setConnectionError] = useState<boolean>(false);
32 |   const [loading, setLoading] = useState(true);
33 |   const session = useSession();
34 | 
35 | 
36 |   useEffect(() => {
37 |     if (!socket && session.data?.user.id) {
38 |       const ws = new WebSocket(process.env.NEXT_PUBLIC_WSS_URL as string);
39 |       ws.onopen = () => {
40 |         setSocket(ws);
41 |         setUser(session.data?.user || null);
42 |         setLoading(false);
43 |       };
44 | 
45 |       ws.onclose = () => {
46 |         setSocket(null);
47 |         setLoading(false);
48 |       };
49 | 
50 |       ws.onerror = () => {
51 |         setSocket(null);
52 |         setConnectionError(true);
53 |         setLoading(false);
54 |       };
55 | 
56 |      () => {
57 |         ws.close();
58 |       };
59 |     }
60 |   }, [socket, session.data]);
61 | 
62 |   return (
63 |     <SocketContext.Provider
64 |       value={{
65 |         socket,
66 |         user,
67 |         connectionError,
68 |         setUser,
69 |         loading,
70 |       }}
71 |     >
72 |       {children}
73 |     </SocketContext.Provider>
74 |   );
75 | };
76 | 
77 | export const useSocket = () => {
78 |   const { socket, user, setUser, connectionError, loading } =
79 |     useContext(SocketContext);
80 | 
81 |   const sendMessage = (type: string, data: { [key: string]: any }) => {
82 |     socket?.send(
83 |       JSON.stringify({
84 |         type,
85 |         data: {
86 |           ...data,
87 |           token: user?.token,
88 |         },
89 |       })
90 |     );
91 |   };
92 | 
93 |   return { socket, loading, setUser, sendMessage, user, connectionError };
94 | };
95 | 


--------------------------------------------------------------------------------
/next-app/docker-compose.yaml:
--------------------------------------------------------------------------------
 1 | services:
 2 |   app:
 3 |     container_name: muzer-docker
 4 |     build:
 5 |       context: ./
 6 |       dockerfile: Dockerfile.dev
 7 |     env_file:
 8 |       - .env
 9 |     ports:
10 |       - ${APP_PORT}:3000
11 |     depends_on:
12 |       postgres:
13 |         condition: service_healthy
14 |     develop:
15 |       watch:
16 |         - action: sync
17 |           path: ./
18 |           target: /usr/src/app
19 |           ignore:
20 |             - node_modules/
21 |         - action: rebuild
22 |           path: package.json
23 |           target: /usr/src/app
24 |           ignore:
25 |             - node_modules/
26 |   postgres:
27 |     container_name: prisma-postgres
28 |     image: postgres:alpine
29 |     restart: always
30 |     env_file:
31 |      - .env
32 |     ports:
33 |       - ${POSTGRES_PORT}:5432
34 |     volumes:
35 |       - ${POSTGRES_PATH}:/var/lib/postgresql/data
36 |     healthcheck:
37 |       test: ["CMD-SHELL", "pg_isready -U postgres"]
38 |       interval: 10s
39 |       timeout: 5s
40 |       retries: 5
41 | 
42 |   prisma-studio:
43 |     container_name: prisma-studio
44 |     image: timothyjmiller/prisma-studio:latest
45 |     restart: unless-stopped
46 |     env_file:
47 |      - .env
48 |     depends_on:
49 |       - app
50 |     ports:
51 |       - ${PRISMA_STUDIO_PORT}:5555
52 | 
53 | volumes:
54 |   postgres-data:
55 |     external: false
56 |  
57 | 


--------------------------------------------------------------------------------
/next-app/hooks/useRedirect.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react";
 2 | import { useSession } from "next-auth/react";
 3 | import { usePathname, useRouter } from "next/navigation";
 4 | 
 5 | export default function useRedirect() {
 6 |   const session = useSession();
 7 |   const router = useRouter();
 8 |   const pathname = usePathname();
 9 | 
10 |   useEffect(() => {
11 |     if (session.status === "unauthenticated") {
12 |       router.push("/");
13 |     }
14 |   }, [session]);
15 | }
16 | 


--------------------------------------------------------------------------------
/next-app/lib/auth-options.ts:
--------------------------------------------------------------------------------
  1 | import { NextAuthOptions, Session } from "next-auth";
  2 | import bcrypt from "bcryptjs";
  3 | import { JWT } from "next-auth/jwt";
  4 | import Credentials from "next-auth/providers/credentials";
  5 | import GoogleProvider from "next-auth/providers/google";
  6 | 
  7 | import { emailSchema, passwordSchema } from "@/schema/credentials-schema";
  8 | import { PrismaClientInitializationError } from "@prisma/client/runtime/library";
  9 | import prisma from "@/lib/db";
 10 | 
 11 | export const authOptions = {
 12 |   providers: [
 13 |     GoogleProvider({
 14 |       clientId: process.env.GOOGLE_CLIENT_ID ?? "",
 15 |       clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? ""
 16 |     }),
 17 |     Credentials({
 18 |       credentials: {
 19 |         email: { type: "email" },
 20 |         password: { type: "password" }
 21 |       },
 22 |       async authorize(credentials) {
 23 |         if (!credentials || !credentials.email || !credentials.password) {
 24 |           return null;
 25 |         }
 26 | 
 27 |         const emailValidation = emailSchema.safeParse(credentials.email);
 28 | 
 29 |         if (!emailValidation.success) {
 30 |           throw new Error("Invalid email");
 31 |         }
 32 | 
 33 |         const passwordValidation = passwordSchema.safeParse(credentials.password);
 34 | 
 35 |         if (!passwordValidation.success) {
 36 |           throw new Error(passwordValidation.error.issues[0].message);
 37 |         }
 38 | 
 39 |         try {
 40 |           const user = await prisma.user.findUnique({
 41 |             where: {
 42 |               email: emailValidation.data
 43 |             }
 44 |           });
 45 | 
 46 |           if (!user) {
 47 |             const hashedPassword = await bcrypt.hash(passwordValidation.data, 10);
 48 | 
 49 |             const newUser = await prisma.user.create({
 50 |               data: {
 51 |                 email: emailValidation.data,
 52 |                 password: hashedPassword,
 53 |                 provider: "Credentials"
 54 |               }
 55 |             });
 56 | 
 57 |             return newUser;
 58 |           }
 59 | 
 60 |           if (!user.password) {
 61 |             const hashedPassword = await bcrypt.hash(passwordValidation.data, 10);
 62 | 
 63 |             const authUser = await prisma.user.update({
 64 |               where: {
 65 |                 email: emailValidation.data
 66 |               },
 67 |               data: {
 68 |                 password: hashedPassword
 69 |               }
 70 |             });
 71 |             return authUser;
 72 |           }
 73 | 
 74 |           const passwordVerification = await bcrypt.compare(passwordValidation.data, user.password);
 75 | 
 76 |           if (!passwordVerification) {
 77 |             throw new Error("Invalid password");
 78 |           }
 79 | 
 80 |           return user;
 81 |         } catch (error) {
 82 |           if (error instanceof PrismaClientInitializationError) {
 83 |             throw new Error("Internal server error");
 84 |           }
 85 |           console.log(error);
 86 |           throw error;
 87 |         }
 88 | 
 89 |       },
 90 |     })
 91 |   ],
 92 |   pages: {
 93 |     signIn: "/auth"
 94 |   },
 95 |   secret: process.env.NEXTAUTH_SECRET ?? "secret",
 96 |   session: {
 97 |     strategy: "jwt"
 98 |   },
 99 |   callbacks: {
100 |     async jwt({ token, account, profile }) {
101 |       if (account && profile) {
102 |         token.email = profile.email as string;
103 |         token.id = account.access_token;
104 |       }
105 |       return token;
106 |     },
107 |     async session({ session, token }: {
108 |       session: Session,
109 |       token: JWT;
110 |     }) {
111 |       try {
112 |         const user = await prisma.user.findUnique({
113 |           where: {
114 |             email: token.email
115 |           }
116 |         });
117 | 
118 |         if (user) {
119 |           session.user.id = user.id;
120 |         }
121 |       } catch (error) {
122 |         if (error instanceof PrismaClientInitializationError) {
123 |           throw new Error("Internal server error");
124 |         }
125 |         console.log(error);
126 |         throw error;
127 |       }
128 |       return session;
129 |     },
130 |     async signIn({ account, profile }) {
131 | 
132 |       try {
133 |         if (account?.provider === "google") {
134 | 
135 |           const user = await prisma.user.findUnique({
136 |             where: {
137 |               email: profile?.email!,
138 |             }
139 |           });
140 | 
141 | 
142 |           if (!user) {
143 |             const newUser = await prisma.user.create({
144 |               data: {
145 |                 email: profile?.email!,
146 |                 name: profile?.name || undefined,
147 |                 provider: "Google"
148 |               }
149 |             });
150 |           }
151 |         }
152 |         return true;
153 |       } catch (error) {
154 |         console.log(error);
155 |         //throw error;
156 |         return false;
157 |       }
158 |     }
159 |   }
160 | } satisfies NextAuthOptions;


--------------------------------------------------------------------------------
/next-app/lib/db.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client";
 2 | 
 3 | const prismaClientSingleton = () => {
 4 |   return new PrismaClient();
 5 | };
 6 | 
 7 | type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;
 8 | 
 9 | // eslint-disable-next-line
10 | const globalForPrisma = globalThis as unknown as {
11 |   prisma: PrismaClientSingleton | undefined;
12 | };
13 | 
14 | const prisma = globalForPrisma.prisma ?? prismaClientSingleton();
15 | 
16 | export default prisma;
17 | 
18 | if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
19 | 


--------------------------------------------------------------------------------
/next-app/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from "clsx";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | export const YT_REGEX =
 5 |   /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtube\.com\/(?:watch\?(?!.*\blist=)(?:.*&)?v=|embed\/|v\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})(?:[?&]\S+)?$/;
 6 | 
 7 | export function cn(...inputs: ClassValue[]) {
 8 |   return twMerge(clsx(inputs));
 9 | }
10 | 


--------------------------------------------------------------------------------
/next-app/middleware.ts:
--------------------------------------------------------------------------------
 1 | import type { NextRequest } from "next/server";
 2 | import { NextResponse } from "next/server";
 3 | import { getToken } from "next-auth/jwt";
 4 | 
 5 | export default async function middleware(req: NextRequest) {
 6 |     const token = await getToken({ req: req, secret: process.env.NEXTAUTH_SECRET });
 7 |     const isAuthenticated = token ? true : false;
 8 |     const pathSegments = req.nextUrl.pathname.split('/');
 9 | 
10 |     
11 |     if (!isAuthenticated && (pathSegments[1] == 'home' || pathSegments[1] == 'dashboard' || pathSegments[1] == 'spaces')) {
12 |         const loginPath = `/auth`;
13 |         const loginURL = new URL(loginPath, req.nextUrl.origin);
14 |         return NextResponse.redirect(loginURL.toString());
15 |     }
16 |     if ((isAuthenticated && pathSegments[1] == "auth")) {
17 |         const newURL = new URL("/home", req.nextUrl.origin);
18 |         return NextResponse.redirect(newURL.toString());
19 |     }
20 |     return NextResponse.next();
21 | }


--------------------------------------------------------------------------------
/next-app/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/next-app/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |     reactStrictMode: false,
 4 |     output: 'standalone',
 5 |     images: {
 6 |         domains: ['images.unsplash.com','i.ytimg.com'],
 7 |       },
 8 | };
 9 | 
10 | export default nextConfig;
11 | 


--------------------------------------------------------------------------------
/next-app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "preinstall": "npx only-allow pnpm",
 7 |     "dev": "next dev",
 8 |     "build": "next build",
 9 |     "start": "next start",
10 |     "lint": "next lint",
11 |     "studio": "npx prisma studio",
12 |     "postinstall": "npx prisma generate",
13 |     "prisma:migrate": "npx prisma migrate dev",
14 |     "prisma:docker": "pnpm postinstall && pnpm prisma:migrate && pnpm studio",
15 |     "dev:docker": "pnpm prisma:docker & pnpm dev",
16 |     "format:fix": "prettier --write \"**/*.{ts,tsx,json}\"",
17 |     "format:check": "prettier --check \"**/*.{ts,tsx,json}\""
18 |   },
19 |   "dependencies": {
20 |     "@formkit/auto-animate": "^0.8.2",
21 |     "@prisma/client": "5.19.0",
22 |     "@radix-ui/react-dialog": "^1.1.1",
23 |     "@radix-ui/react-dropdown-menu": "^2.1.1",
24 |     "@radix-ui/react-separator": "^1.1.0",
25 |     "@radix-ui/react-slot": "^1.1.0",
26 |     "@solana/wallet-adapter-base": "^0.9.23",
27 |     "@solana/wallet-adapter-react": "^0.15.35",
28 |     "@solana/wallet-adapter-react-ui": "^0.9.35",
29 |     "@solana/wallet-adapter-wallets": "^0.19.32",
30 |     "@solana/web3.js": "^1.95.3",
31 |     "axios": "^1.7.5",
32 |     "bcryptjs": "^2.4.3",
33 |     "class-variance-authority": "^0.7.0",
34 |     "clsx": "^2.1.1",
35 |     "framer-motion": "^11.9.0",
36 |     "jsonwebtoken": "^8.5.1",
37 |     "lucide-react": "^0.436.0",
38 |     "next": "14.2.7",
39 |     "next-auth": "^4.24.7",
40 |     "next-themes": "^0.3.0",
41 |     "prisma": "^5.19.0",
42 |     "react": "^18.3.1",
43 |     "react-dom": "^18",
44 |     "react-icons": "^5.3.0",
45 |     "react-lite-youtube-embed": "^2.4.0",
46 |     "sonner": "^1.5.0",
47 |     "tailwind-merge": "^2.5.2",
48 |     "tailwindcss-animate": "^1.0.7",
49 |     "youtube-player": "^5.6.0",
50 |     "youtube-search-api": "^1.2.2",
51 |     "zod": "^3.23.8"
52 |   },
53 |   "devDependencies": {
54 |     "@types/bcryptjs": "^2.4.6",
55 |     "@types/jsonwebtoken": "^9.0.6",
56 |     "@types/node": "^20",
57 |     "@types/react": "^18",
58 |     "@types/react-dom": "^18",
59 |     "@types/youtube-player": "^5.5.11",
60 |     "eslint": "^8",
61 |     "eslint-config-next": "14.2.7",
62 |     "postcss": "^8",
63 |     "prettier": "^3.3.3",
64 |     "prettier-plugin-tailwindcss": "^0.6.6",
65 |     "tailwindcss": "^3.4.1",
66 |     "typescript": "^5"
67 |   },
68 |   "packageManager": "pnpm@9.11.0+sha512.0a203ffaed5a3f63242cd064c8fb5892366c103e328079318f78062f24ea8c9d50bc6a47aa3567cabefd824d170e78fa2745ed1f16b132e16436146b7688f19b"
69 | }
70 | 


--------------------------------------------------------------------------------
/next-app/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240828211233_init/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateEnum
 2 | CREATE TYPE "StreamType" AS ENUM ('Spotify', 'Youtube');
 3 | 
 4 | -- CreateEnum
 5 | CREATE TYPE "Provider" AS ENUM ('Google');
 6 | 
 7 | -- CreateTable
 8 | CREATE TABLE "User" (
 9 |     "id" TEXT NOT NULL,
10 |     "email" TEXT NOT NULL,
11 |     "provider" "Provider" NOT NULL,
12 | 
13 |     CONSTRAINT "User_pkey" PRIMARY KEY ("id")
14 | );
15 | 
16 | -- CreateTable
17 | CREATE TABLE "Stream" (
18 |     "id" TEXT NOT NULL,
19 |     "type" "StreamType" NOT NULL,
20 |     "active" BOOLEAN NOT NULL DEFAULT true,
21 |     "userId" TEXT NOT NULL,
22 | 
23 |     CONSTRAINT "Stream_pkey" PRIMARY KEY ("id")
24 | );
25 | 
26 | -- CreateTable
27 | CREATE TABLE "Upvote" (
28 |     "id" TEXT NOT NULL,
29 |     "userId" TEXT NOT NULL,
30 |     "streamId" TEXT NOT NULL,
31 | 
32 |     CONSTRAINT "Upvote_pkey" PRIMARY KEY ("id")
33 | );
34 | 
35 | -- CreateIndex
36 | CREATE UNIQUE INDEX "Upvote_userId_streamId_key" ON "Upvote"("userId", "streamId");
37 | 
38 | -- AddForeignKey
39 | ALTER TABLE "Stream" ADD CONSTRAINT "Stream_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
40 | 
41 | -- AddForeignKey
42 | ALTER TABLE "Upvote" ADD CONSTRAINT "Upvote_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
43 | 
44 | -- AddForeignKey
45 | ALTER TABLE "Upvote" ADD CONSTRAINT "Upvote_streamId_fkey" FOREIGN KEY ("streamId") REFERENCES "Stream"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
46 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240828212629_added_ids/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - Added the required column `extractedId` to the `Stream` table without a default value. This is not possible if the table is not empty.
 5 |   - Added the required column `url` to the `Stream` table without a default value. This is not possible if the table is not empty.
 6 | 
 7 | */
 8 | -- AlterTable
 9 | ALTER TABLE "Stream" ADD COLUMN     "extractedId" TEXT NOT NULL,
10 | ADD COLUMN     "url" TEXT NOT NULL;
11 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240828214340_add_unique_constraint/migration.sql:
--------------------------------------------------------------------------------
1 | /*
2 |   Warnings:
3 | 
4 |   - A unique constraint covering the columns `[email]` on the table `User` will be added. If there are existing duplicate values, this will fail.
5 | 
6 | */
7 | -- CreateIndex
8 | CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
9 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240828215837_add_video_metadata/migration.sql:
--------------------------------------------------------------------------------
1 | -- AlterTable
2 | ALTER TABLE "Stream" ADD COLUMN     "bigImg" TEXT NOT NULL DEFAULT '',
3 | ADD COLUMN     "smallImg" TEXT NOT NULL DEFAULT '',
4 | ADD COLUMN     "title" TEXT NOT NULL DEFAULT '';
5 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240829004903_added_current_stream/migration.sql:
--------------------------------------------------------------------------------
 1 | -- CreateTable
 2 | CREATE TABLE "CurrentStream" (
 3 |     "userId" TEXT NOT NULL,
 4 |     "streamId" TEXT,
 5 | 
 6 |     CONSTRAINT "CurrentStream_pkey" PRIMARY KEY ("userId")
 7 | );
 8 | 
 9 | -- CreateIndex
10 | CREATE UNIQUE INDEX "CurrentStream_streamId_key" ON "CurrentStream"("streamId");
11 | 
12 | -- AddForeignKey
13 | ALTER TABLE "CurrentStream" ADD CONSTRAINT "CurrentStream_streamId_fkey" FOREIGN KEY ("streamId") REFERENCES "Stream"("id") ON DELETE SET NULL ON UPDATE CASCADE;
14 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240829011327_add_cascade/migration.sql:
--------------------------------------------------------------------------------
1 | -- DropForeignKey
2 | ALTER TABLE "Upvote" DROP CONSTRAINT "Upvote_streamId_fkey";
3 | 
4 | -- AddForeignKey
5 | ALTER TABLE "Upvote" ADD CONSTRAINT "Upvote_streamId_fkey" FOREIGN KEY ("streamId") REFERENCES "Stream"("id") ON DELETE CASCADE ON UPDATE CASCADE;
6 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240829012157_added_played_field/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - Added the required column `playedTs` to the `Stream` table without a default value. This is not possible if the table is not empty.
 5 | 
 6 | */
 7 | -- AlterTable
 8 | ALTER TABLE "Stream" ADD COLUMN     "createAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
 9 | ADD COLUMN     "played" BOOLEAN NOT NULL DEFAULT false,
10 | ADD COLUMN     "playedTs" TIMESTAMP(3) NOT NULL;
11 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240829012523_optional/migration.sql:
--------------------------------------------------------------------------------
1 | -- AlterTable
2 | ALTER TABLE "Stream" ALTER COLUMN "playedTs" DROP NOT NULL;
3 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240829023538_added_user_guard/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - Added the required column `addedById` to the `Stream` table without a default value. This is not possible if the table is not empty.
 5 | 
 6 | */
 7 | -- AlterTable
 8 | ALTER TABLE "Stream" ADD COLUMN     "addedById" TEXT NOT NULL;
 9 | 
10 | -- AddForeignKey
11 | ALTER TABLE "Stream" ADD CONSTRAINT "Stream_addedById_fkey" FOREIGN KEY ("addedById") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
12 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240829030120_remove_added/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - You are about to drop the column `addedById` on the `Stream` table. All the data in the column will be lost.
 5 | 
 6 | */
 7 | -- DropForeignKey
 8 | ALTER TABLE "Stream" DROP CONSTRAINT "Stream_addedById_fkey";
 9 | 
10 | -- AlterTable
11 | ALTER TABLE "Stream" DROP COLUMN "addedById";
12 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240830172435_add_added_by_to_stream/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - Added the required column `addedBy` to the `Stream` table without a default value. This is not possible if the table is not empty.
 5 | 
 6 | */
 7 | -- AlterTable
 8 | ALTER TABLE "Stream" ADD COLUMN     "addedBy" TEXT NOT NULL;
 9 | 
10 | -- AddForeignKey
11 | ALTER TABLE "Stream" ADD CONSTRAINT "Stream_addedBy_fkey" FOREIGN KEY ("addedBy") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240914062749_added_spaces/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - The primary key for the `CurrentStream` table will be changed. If it partially fails, the table could be left without primary key constraint.
 5 |   - A unique constraint covering the columns `[spaceId]` on the table `CurrentStream` will be added. If there are existing duplicate values, this will fail.
 6 |   - The required column `id` was added to the `CurrentStream` table with a prisma-level default value. This is not possible if the table is not empty. Please add this column as optional, then populate it before making it required.
 7 | 
 8 | */
 9 | -- AlterTable
10 | ALTER TABLE "CurrentStream" DROP CONSTRAINT "CurrentStream_pkey",
11 | ADD COLUMN "id" UUID DEFAULT gen_random_uuid(),
12 | ADD COLUMN     "spaceId" TEXT,
13 | ADD CONSTRAINT "CurrentStream_pkey" PRIMARY KEY ("id");
14 | 
15 | -- AlterTable
16 | ALTER TABLE "Stream" ADD COLUMN     "spaceId" TEXT;
17 | 
18 | -- CreateTable
19 | CREATE TABLE "Space" (
20 |     "id" TEXT NOT NULL,
21 |     "name" TEXT NOT NULL,
22 |     "hostId" TEXT NOT NULL,
23 |     "isActive" BOOLEAN NOT NULL DEFAULT true,
24 | 
25 |     CONSTRAINT "Space_pkey" PRIMARY KEY ("id")
26 | );
27 | 
28 | -- CreateIndex
29 | CREATE UNIQUE INDEX "CurrentStream_spaceId_key" ON "CurrentStream"("spaceId");
30 | 
31 | -- AddForeignKey
32 | ALTER TABLE "Stream" ADD CONSTRAINT "Stream_spaceId_fkey" FOREIGN KEY ("spaceId") REFERENCES "Space"("id") ON DELETE SET NULL ON UPDATE CASCADE;
33 | 
34 | -- AddForeignKey
35 | ALTER TABLE "CurrentStream" ADD CONSTRAINT "CurrentStream_spaceId_fkey" FOREIGN KEY ("spaceId") REFERENCES "Space"("id") ON DELETE SET NULL ON UPDATE CASCADE;
36 | 
37 | -- AddForeignKey
38 | ALTER TABLE "Space" ADD CONSTRAINT "Space_hostId_fkey" FOREIGN KEY ("hostId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
39 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/20240914070128_on_delete_cascade_for_spaces/migration.sql:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Warnings:
 3 | 
 4 |   - The primary key for the `CurrentStream` table will be changed. If it partially fails, the table could be left without primary key constraint.
 5 | 
 6 | */
 7 | -- DropForeignKey
 8 | ALTER TABLE "CurrentStream" DROP CONSTRAINT "CurrentStream_spaceId_fkey";
 9 | 
10 | -- DropForeignKey
11 | ALTER TABLE "Stream" DROP CONSTRAINT "Stream_spaceId_fkey";
12 | 
13 | -- AlterTable
14 | ALTER TABLE "CurrentStream" DROP CONSTRAINT "CurrentStream_pkey",
15 | ALTER COLUMN "id" DROP DEFAULT,
16 | ALTER COLUMN "id" SET DATA TYPE TEXT,
17 | ADD CONSTRAINT "CurrentStream_pkey" PRIMARY KEY ("id");
18 | 
19 | -- AddForeignKey
20 | ALTER TABLE "Stream" ADD CONSTRAINT "Stream_spaceId_fkey" FOREIGN KEY ("spaceId") REFERENCES "Space"("id") ON DELETE CASCADE ON UPDATE CASCADE;
21 | 
22 | -- AddForeignKey
23 | ALTER TABLE "CurrentStream" ADD CONSTRAINT "CurrentStream_spaceId_fkey" FOREIGN KEY ("spaceId") REFERENCES "Space"("id") ON DELETE CASCADE ON UPDATE CASCADE;
24 | 


--------------------------------------------------------------------------------
/next-app/prisma/migrations/migration_lock.toml:
--------------------------------------------------------------------------------
1 | # Please do not edit this file manually
2 | # It should be added in your version-control system (i.e. Git)
3 | provider = "postgresql"


--------------------------------------------------------------------------------
/next-app/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | // Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
 5 | // Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
 6 | 
 7 | generator client {
 8 |   provider = "prisma-client-js"
 9 | }
10 | 
11 | datasource db {
12 |   provider = "postgresql"
13 |   url      = env("DATABASE_URL")
14 | }
15 | 
16 | model User {
17 |   id           String   @id @default(uuid())
18 |   email        String   @unique
19 |   name         String?
20 |   password     String?
21 |   provider     Provider
22 |   streams      Stream[] @relation("user")
23 |   upvotes      Upvote[]
24 |   addedStreams Stream[] @relation("addedBy")
25 |   hostedSpaces Space[]  @relation("hostedBy")
26 | }
27 | 
28 | model Stream {
29 |   id            String         @id @default(uuid())
30 |   type          StreamType
31 |   url           String
32 |   extractedId   String
33 |   title         String         @default("")
34 |   smallImg      String         @default("")
35 |   bigImg        String         @default("")
36 |   active        Boolean        @default(true)
37 |   played        Boolean        @default(false)
38 |   playedTs      DateTime?
39 |   createAt      DateTime       @default(now())
40 |   upvotes       Upvote[]
41 |   userId        String
42 |   user          User           @relation(fields: [userId], references: [id], name: "user")
43 |   currentStream CurrentStream?
44 |   addedBy       String
45 |   addedByUser   User           @relation("addedBy", fields: [addedBy], references: [id])
46 |   spaceId       String?
47 |   space         Space?         @relation("spaceStreams", fields: [spaceId], references: [id], onDelete: Cascade)
48 | }
49 | 
50 | model CurrentStream {
51 |   id       String  @id @default(uuid())
52 |   userId   String
53 |   streamId String? @unique
54 |   stream   Stream? @relation(fields: [streamId], references: [id])
55 |   spaceId  String? @unique
56 |   space    Space?  @relation(fields: [spaceId], references: [id], onDelete: Cascade)
57 | }
58 | 
59 | model Upvote {
60 |   id       String @id @default(uuid())
61 |   userId   String
62 |   streamId String
63 |   user     User   @relation(fields: [userId], references: [id])
64 |   stream   Stream @relation(fields: [streamId], references: [id], onDelete: Cascade)
65 | 
66 |   @@unique([userId, streamId])
67 | }
68 | 
69 | model Space {
70 |   id            String         @id @default(uuid())
71 |   name          String
72 |   streams       Stream[]       @relation("spaceStreams")
73 |   hostId        String
74 |   host          User           @relation("hostedBy", fields: [hostId], references: [id])
75 |   isActive      Boolean        @default(true)
76 |   currentStream CurrentStream?
77 | }
78 | 
79 | enum StreamType {
80 |   Spotify
81 |   Youtube
82 | }
83 | 
84 | enum Provider {
85 |   Google
86 |   Credentials
87 | }
88 | 


--------------------------------------------------------------------------------
/next-app/public/google.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code100x/muzer/650ad9098446b0ce473b0741bb9e3b90a5685d92/next-app/public/google.png


--------------------------------------------------------------------------------
/next-app/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/next-app/public/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/code100x/muzer/650ad9098446b0ce473b0741bb9e3b90a5685d92/next-app/public/opengraph-image.png


--------------------------------------------------------------------------------
/next-app/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/next-app/schema/credentials-schema.ts:
--------------------------------------------------------------------------------
 1 | import { z } from "zod";
 2 | 
 3 | export const emailSchema = z
 4 |   .string({ message: "Email is required" })
 5 |   .email({ message: "Invalid email" });
 6 | 
 7 | export const passwordSchema = z
 8 |   .string({ message: "Password is required" })
 9 |   .min(8, { message: "Password must be at least 8 characters" })
10 |   .regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$/, {
11 |     message:
12 |       "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character",
13 |   });


--------------------------------------------------------------------------------
/next-app/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | 
 4 | const config = {
 5 |   darkMode: ["class"],
 6 |   content: [
 7 |     "./pages/**/*.{ts,tsx}",
 8 |     "./components/**/*.{ts,tsx}",
 9 |     "./app/**/*.{ts,tsx}",
10 |     "./src/**/*.{ts,tsx}",
11 |   ],
12 |   prefix: "",
13 |   theme: {
14 |     container: {
15 |       center: true,
16 |       padding: "2rem",
17 |       screens: {
18 |         "2xl": "1400px",
19 |       },
20 |     },
21 |     extend: {
22 |       colors: {
23 |         border: "hsl(var(--border))",
24 |         input: "hsl(var(--input))",
25 |         ring: "hsl(var(--ring))",
26 |         background: "hsl(var(--background))",
27 |         foreground: "hsl(var(--foreground))",
28 |         primary: {
29 |           DEFAULT: "hsl(var(--primary))",
30 |           foreground: "hsl(var(--primary-foreground))",
31 |         },
32 |         secondary: {
33 |           DEFAULT: "hsl(var(--secondary))",
34 |           foreground: "hsl(var(--secondary-foreground))",
35 |         },
36 |         destructive: {
37 |           DEFAULT: "hsl(var(--destructive))",
38 |           foreground: "hsl(var(--destructive-foreground))",
39 |         },
40 |         muted: {
41 |           DEFAULT: "hsl(var(--muted))",
42 |           foreground: "hsl(var(--muted-foreground))",
43 |         },
44 |         accent: {
45 |           DEFAULT: "hsl(var(--accent))",
46 |           foreground: "hsl(var(--accent-foreground))",
47 |         },
48 |         popover: {
49 |           DEFAULT: "hsl(var(--popover))",
50 |           foreground: "hsl(var(--popover-foreground))",
51 |         },
52 |         card: {
53 |           DEFAULT: "hsl(var(--card))",
54 |           foreground: "hsl(var(--card-foreground))",
55 |         },
56 |       },
57 |       borderRadius: {
58 |         lg: "var(--radius)",
59 |         md: "calc(var(--radius) - 2px)",
60 |         sm: "calc(var(--radius) - 4px)",
61 |       },
62 |       keyframes: {
63 |         "accordion-down": {
64 |           from: { height: "0" },
65 |           to: { height: "var(--radix-accordion-content-height)" },
66 |         },
67 |         "accordion-up": {
68 |           from: { height: "var(--radix-accordion-content-height)" },
69 |           to: { height: "0" },
70 |         },
71 |       },
72 |       animation: {
73 |         "accordion-down": "accordion-down 0.2s ease-out",
74 |         "accordion-up": "accordion-up 0.2s ease-out",
75 |       },
76 |     },
77 |   },
78 |   plugins: [require("tailwindcss-animate")],
79 | } satisfies Config;
80 | 
81 | export default config;
82 | 


--------------------------------------------------------------------------------
/next-app/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/next-app/types/auth-types.ts:
--------------------------------------------------------------------------------
1 | export type SignInFlow = "signIn" | "signUp";
2 | 


--------------------------------------------------------------------------------
/next-app/types/index.d.ts:
--------------------------------------------------------------------------------
 1 | interface Video {
 2 |   id: string;
 3 |   type: string;
 4 |   url: string;
 5 |   extractedId: string;
 6 |   title: string;
 7 |   smallImg: string;
 8 |   bigImg: string;
 9 |   active: boolean;
10 |   userId: string;
11 |   upvotes: number;
12 |   haveUpvoted: boolean;
13 |   spaceId:string
14 | }
15 | 


--------------------------------------------------------------------------------
/next-app/types/next-auth.d.ts:
--------------------------------------------------------------------------------
 1 | import { type DefaultSession } from "next-auth";
 2 | 
 3 | declare module "next-auth" {
 4 |   interface Session {
 5 |     user: {
 6 |       id: string;
 7 |       email: string;
 8 |     } & DefaultSession["user"];
 9 |   }
10 | }
11 | 
12 | declare module "next-auth/jwt" {
13 |   interface JWT {
14 |     id: string | undefined;
15 |     email: string;
16 |   }
17 | }


--------------------------------------------------------------------------------
/ws/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .git
3 | .gitignore
4 | .env.example


--------------------------------------------------------------------------------
/ws/.env.example:
--------------------------------------------------------------------------------
1 | PORT=8080
2 | NEXTAUTH_SECRET="secret"
3 | DATABASE_URL=""
4 | 
5 | REDIS_USERNAME="admin"
6 | REDIS_PORT=6379
7 | REDIS_HOST="127.0.0.1" # for docker change it to "redis"
8 | REDIS_PASSWORD="root"


--------------------------------------------------------------------------------
/ws/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | # Keep environment variables out of version control
3 | .env
4 | dist


--------------------------------------------------------------------------------
/ws/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:22-alpine
 2 | 
 3 | WORKDIR /app
 4 | 
 5 | COPY package.json .
 6 | 
 7 | RUN npm install pnpm -g --ignore-scripts
 8 | 
 9 | RUN pnpm install --ignore-scripts
10 | 
11 | COPY . .
12 | 
13 | RUN DATABASE_URL=$DATABASE_URL pnpm run build
14 | 
15 | EXPOSE 3000
16 | 
17 | CMD ["pnpm", "run", "start"]
18 | 


--------------------------------------------------------------------------------
/ws/Dockerfile.dev:
--------------------------------------------------------------------------------
 1 | FROM node:22-alpine AS installer
 2 | 
 3 | WORKDIR /usr/src/app
 4 | RUN corepack enable pnpm
 5 | COPY package.json pnpm-lock.yaml ./
 6 | RUN pnpm install --frozen-lockfile --ignore-scripts
 7 | COPY . .
 8 | RUN pnpm postinstall
 9 | 
10 | 
11 | FROM node:22-alpine AS dev
12 | 
13 | WORKDIR /usr/src/app
14 | RUN corepack enable pnpm
15 | COPY --from=installer /usr/src/app/ ./
16 | CMD [ "pnpm", "dev" ]
17 | 
18 | 
19 | 


--------------------------------------------------------------------------------
/ws/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ws",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "app.ts",
 6 |   "scripts": {
 7 |     "preinstall": "npx only-allow pnpm",
 8 |     "dev": "nodemon src/app.ts",
 9 |     "start": "node dist/app.js",
10 |     "build": "pnpm postinstall && npx tsc -b",
11 |     "postinstall": "npx prisma generate"
12 |   },
13 |   "keywords": [],
14 |   "author": "",
15 |   "license": "ISC",
16 |   "dependencies": {
17 |     "@prisma/client": "5.19.1",
18 |     "axios": "^1.7.7",
19 |     "bullmq": "^5.12.14",
20 |     "cors": "^2.8.5",
21 |     "dotenv": "^16.4.5",
22 |     "jsonwebtoken": "^8.5.1",
23 |     "prisma": "^5.19.1",
24 |     "redis": "^4.7.0",
25 |     "ws": "^8.18.0",
26 |     "youtube-search-api": "^1.2.2"
27 |   },
28 |   "devDependencies": {
29 |     "@types/jsonwebtoken": "^9.0.6",
30 |     "@types/ws": "^8.5.12",
31 |     "nodemon": "^3.1.4",
32 |     "ts-node": "^10.9.2",
33 |     "typescript": "^5.6.2"
34 |   }
35 | }


--------------------------------------------------------------------------------
/ws/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | // Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
 5 | // Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
 6 | 
 7 | generator client {
 8 |   provider = "prisma-client-js"
 9 | }
10 | 
11 | datasource db {
12 |   provider = "postgresql"
13 |   url      = env("DATABASE_URL")
14 | }
15 | 
16 | model User {
17 |   id           String   @id @default(uuid())
18 |   email        String   @unique
19 |   provider     Provider
20 |   streams      Stream[] @relation("user")
21 |   upvotes      Upvote[]
22 |   addedStreams Stream[] @relation("addedBy")
23 |   hostedSpaces  Space[]  @relation("hostedBy")
24 | }
25 | 
26 | model Stream {
27 |   id            String         @id @default(uuid())
28 |   type          StreamType
29 |   url           String
30 |   extractedId   String
31 |   title         String         @default("")
32 |   smallImg      String         @default("")
33 |   bigImg        String         @default("")
34 |   active        Boolean        @default(true)
35 |   played        Boolean        @default(false)
36 |   playedTs      DateTime?
37 |   createAt      DateTime       @default(now())
38 |   upvotes       Upvote[]
39 |   userId        String
40 |   user          User           @relation(fields: [userId], references: [id], name: "user")
41 |   currentStream CurrentStream?
42 |   addedBy       String
43 |   addedByUser   User           @relation("addedBy", fields: [addedBy], references: [id])
44 |   spaceId      String?
45 |   space        Space?      @relation("spaceStreams", fields: [spaceId], references: [id],onDelete: Cascade)
46 | }
47 | 
48 | model CurrentStream {
49 |   id            String @id @default(uuid())
50 |   userId       String  
51 |   streamId String? @unique
52 |   stream   Stream? @relation(fields: [streamId], references: [id])
53 |   spaceId     String? @unique
54 |   space    Space?    @relation(fields: [spaceId], references: [id],onDelete: Cascade)
55 | }
56 | 
57 | model Upvote {
58 |   id       String @id @default(uuid())
59 |   userId   String
60 |   streamId String
61 |   user     User   @relation(fields: [userId], references: [id])
62 |   stream   Stream @relation(fields: [streamId], references: [id], onDelete: Cascade)
63 | 
64 |   @@unique([userId, streamId])
65 | }
66 | model Space {
67 |   id            String      @id @default(uuid())
68 |   name          String
69 |   streams        Stream[]     @relation("spaceStreams")
70 |   hostId        String
71 |   host          User        @relation("hostedBy", fields: [hostId], references: [id])
72 |   isActive      Boolean     @default(true)
73 |   currentStream CurrentStream?
74 | }
75 | enum StreamType {
76 |   Spotify
77 |   Youtube
78 | }
79 | 
80 | enum Provider {
81 |   Google
82 | }
83 | 


--------------------------------------------------------------------------------
/ws/src/app.ts:
--------------------------------------------------------------------------------
  1 | import { WebSocket, WebSocketServer } from "ws";
  2 | import cluster from "cluster";
  3 | import http from "http";
  4 | import dotenv from "dotenv";
  5 | import jwt from "jsonwebtoken";
  6 | import { sendError } from "./utils";
  7 | // import os from "os";
  8 | 
  9 | import { RoomManager } from "./StreamManager";
 10 | 
 11 | dotenv.config();
 12 | const cors = 1; // os.cpus().length  // for vertical scaling
 13 | 
 14 | if (cluster.isPrimary) {
 15 |   for (let i = 0; i < cors; i++) {
 16 |     cluster.fork();
 17 |   }
 18 | 
 19 |   cluster.on("disconnect", () => {
 20 |     process.exit();
 21 |   });
 22 | } else {
 23 |   main();
 24 | }
 25 | 
 26 | type Data = {
 27 |   userId: string;
 28 |   spaceId: string;
 29 |   token: string;
 30 |   url: string;
 31 |   vote: "upvote" | "downvote";
 32 |   streamId: string;
 33 | };
 34 | 
 35 | 
 36 | function createHttpServer() {
 37 |   return http.createServer((req, res) => {
 38 |     res.statusCode = 200;
 39 |     res.setHeader("Content-Type", "text/plain");
 40 |     res.end("Hello, this is some data from the server!");
 41 |   });
 42 | }
 43 | 
 44 | async function handleConnection(ws: WebSocket) {
 45 |   ws.on("message", async (raw: { toString: () => string }) => {
 46 |     const { type, data } = JSON.parse(raw.toString()) || {};
 47 | 
 48 |     switch (type) {
 49 |       case "join-room":
 50 |         await handleJoinRoom(ws, data);
 51 |         break;
 52 |       default:
 53 |         await handleUserAction(ws, type, data);
 54 |     }
 55 |   });
 56 | 
 57 |   ws.on("close", () => {
 58 |     RoomManager.getInstance().disconnect(ws);
 59 |   });
 60 | }
 61 | 
 62 | async function handleJoinRoom(ws: WebSocket, data: Data) {
 63 |   jwt.verify(
 64 |     data.token,
 65 |     process.env.NEXTAUTH_SECRET as string,
 66 |     (err: any, decoded: any) => {
 67 |       if (err) {
 68 |         console.error(err);
 69 |         sendError(ws, "Token verification failed");
 70 |       } else {
 71 |         RoomManager.getInstance().joinRoom(
 72 |           data.spaceId,
 73 |           decoded.creatorId,
 74 |           decoded.userId,
 75 |           ws,
 76 |           data.token
 77 |         );
 78 |       }
 79 |     }
 80 |   );
 81 | }
 82 | 
 83 | async function processUserAction(type: string, data: Data) {
 84 |   switch (type) {
 85 |     case "cast-vote":
 86 |       await RoomManager.getInstance().castVote(
 87 |         data.userId,
 88 |         data.streamId,
 89 |         data.vote,
 90 |         data.spaceId
 91 |       );
 92 |       break;
 93 | 
 94 |     case "add-to-queue":
 95 |       await RoomManager.getInstance().addToQueue(
 96 |         data.spaceId,
 97 |         data.userId,
 98 |         data.url
 99 |       );
100 |       break;
101 | 
102 |     case "play-next":
103 |       await RoomManager.getInstance().queue.add("play-next", {
104 |         spaceId: data.spaceId,
105 |         userId: data.userId,
106 |       });
107 |       break;
108 | 
109 |     case "remove-song":
110 |       await RoomManager.getInstance().queue.add("remove-song", {
111 |         ...data,
112 |         spaceId: data.spaceId,
113 |         userId: data.userId,
114 |       });
115 |       break;
116 | 
117 |     case "empty-queue":
118 |       await RoomManager.getInstance().queue.add("empty-queue", {
119 |         ...data,
120 |         spaceId: data.spaceId,
121 |         userId: data.userId,
122 |       });
123 |       break;
124 | 
125 |     case "pay-and-play-next":
126 |       await RoomManager.getInstance().payAndPlayNext(
127 |         data.spaceId,
128 |         data.userId,
129 |         data.url
130 |       );
131 |       break;
132 | 
133 |     default:
134 |       console.warn("Unknown message type:", type);
135 |   }
136 | }
137 | 
138 | async function handleUserAction(ws: WebSocket, type: string, data: Data) {
139 |   const user = RoomManager.getInstance().users.get(data.userId);
140 | 
141 |   if (user) {
142 |     data.userId = user.userId;
143 |     await processUserAction(type, data);
144 |   } else {
145 |     sendError(ws, "You are unauthorized to perform this action");
146 |   }
147 | }
148 | 
149 | async function main() {
150 |   const server = createHttpServer();
151 |   const wss = new WebSocketServer({ server });
152 |   await RoomManager.getInstance().initRedisClient();
153 | 
154 |   wss.on("connection", (ws) => handleConnection(ws));
155 | 
156 |   const PORT = process.env.PORT ?? 8080;
157 |   server.listen(PORT, () => {
158 |     console.log(`${process.pid}: WebSocket server is running on ${PORT}`);
159 |   });
160 | }
161 | 


--------------------------------------------------------------------------------
/ws/src/utils.ts:
--------------------------------------------------------------------------------
 1 | import { WebSocket } from "ws";
 2 | 
 3 | const YT_REGEX =
 4 |   /^(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtube\.com\/(?:watch\?(?!.*\blist=)(?:.*&)?v=|embed\/|v\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})(?:[?&]\S+)?$/;
 5 | 
 6 | export const isValidYoutubeURL = (data: string) => {
 7 |   return data.match(YT_REGEX);
 8 | };
 9 | 
10 | export const getVideoId = (url: string) => {
11 |   return url.match(YT_REGEX)?.[1];
12 | };
13 | 
14 | export function sendError(ws: WebSocket, message: string) {
15 |   ws.send(JSON.stringify({ type: "error", data: { message } }));
16 | }


--------------------------------------------------------------------------------
/ws/tsconfig.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "compilerOptions": {
  3 |     /* Visit https://aka.ms/tsconfig to read more about this file */
  4 | 
  5 |     /* Projects */
  6 |     // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
  7 |     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
  8 |     // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
  9 |     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
 10 |     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
 11 |     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 12 | 
 13 |     /* Language and Environment */
 14 |     "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 15 |     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
 16 |     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
 17 |     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
 18 |     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 19 |     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
 20 |     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
 21 |     // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
 22 |     // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
 23 |     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
 24 |     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 25 |     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 26 | 
 27 |     /* Modules */
 28 |     "module": "commonjs" /* Specify what module code is generated. */,
 29 |     "rootDir": "src" /* Specify the root folder within your source files. */,
 30 |     // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
 31 |     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
 32 |     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
 33 |     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
 34 |     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
 35 |     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
 36 |     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
 37 |     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
 38 |     // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
 39 |     // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
 40 |     // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
 41 |     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
 42 |     // "resolveJsonModule": true,                        /* Enable importing .json files. */
 43 |     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
 44 |     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 45 | 
 46 |     /* JavaScript Support */
 47 |     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
 48 |     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
 49 |     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 50 | 
 51 |     /* Emit */
 52 |     // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
 53 |     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
 54 |     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
 55 |     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
 56 |     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
 57 |     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
 58 |     "outDir": "dist" /* Specify an output folder for all emitted files. */,
 59 |     // "removeComments": true,                           /* Disable emitting comments. */
 60 |     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
 61 |     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
 62 |     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
 63 |     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
 64 |     // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
 65 |     // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
 66 |     // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
 67 |     // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
 68 |     // "newLine": "crlf",                                /* Set the newline character for emitting files. */
 69 |     // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
 70 |     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
 71 |     // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
 72 |     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
 73 |     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
 74 |     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 75 | 
 76 |     /* Interop Constraints */
 77 |     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
 78 |     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
 79 |     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
 80 |     "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
 81 |     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
 82 |     "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 83 | 
 84 |     /* Type Checking */
 85 |     "strict": true /* Enable all strict type-checking options. */,
 86 |     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
 87 |     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
 88 |     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
 89 |     // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
 90 |     // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
 91 |     // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
 92 |     // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
 93 |     // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
 94 |     // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
 95 |     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
 96 |     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
 97 |     // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
 98 |     // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
 99 |     // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
100 |     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
101 |     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
102 |     // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
103 |     // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
104 | 
105 |     /* Completeness */
106 |     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
107 |     "skipLibCheck": true /* Skip type checking all .d.ts files. */
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------
/ws/tsconfig.tsbuildinfo:
--------------------------------------------------------------------------------
1 | {"root":["./src/strammanager.ts","./src/app.ts"],"version":"5.6.2"}


--------------------------------------------------------------------------------