17 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/user-avatar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Icons } from './ui/icons';
3 | import Image from 'next/image';
4 |
5 | interface UserAvatarProps {
6 | image?: string;
7 | }
8 |
9 | export default function UserAvatar ({ image }: UserAvatarProps) {
10 |
11 | return (
12 |
19 |
22 | {user.name}
20 | {user.email}
21 |
13 | {image ? (
14 |
23 | )}
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # database
12 | /prisma/db.sqlite
13 | /prisma/db.sqlite-journal
14 |
15 | # next.js
16 | /.next/
17 | /out/
18 | next-env.d.ts
19 |
20 | # production
21 | /build
22 |
23 | # misc
24 | .DS_Store
25 | *.pem
26 |
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 |
33 | # local env files
34 | # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
35 | .env
36 | .env*.local
37 |
38 | # vercel
39 | .vercel
40 |
41 | # typescript
42 | *.tsbuildinfo
43 |
--------------------------------------------------------------------------------
/src/app/(call)/call/[[...slug]]/layout.tsx:
--------------------------------------------------------------------------------
1 | import { getCurrentUser } from "~/lib/session";
2 | import { redirect } from "next/navigation";
3 | import { cookies } from "next/headers";
4 |
5 | export default async function CallLayout({
6 | children,
7 | params
8 | }: {
9 | children: React.ReactNode
10 | params: {
11 | slug: string
12 | }
13 | }) {
14 |
15 | const user = await getCurrentUser();
16 | const unAuthorizedUserName = cookies().get("username");
17 |
18 | if (!user && !unAuthorizedUserName) {
19 | redirect(`/preview/${params.slug}`)
20 | }
21 |
22 | return (
23 |
24 |
25 | {children}
26 |
27 |
28 | );
29 | }
--------------------------------------------------------------------------------
/src/components/layout/full-nav.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React from "react";
3 | import { Icons } from "../ui/icons";
4 | import { getCurrentUser } from "~/lib/session";
5 |
6 | export default async function FullNav({
7 | children,
8 | }: {
9 | children: React.ReactNode;
10 | }) {
11 | const user = await getCurrentUser();
12 |
13 | return (
14 |
16 |
17 |
21 |
4 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "~/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef5 | Call history 6 |
7 |8 | Review your past interactions and revisit meaningful moments 9 |
10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
12 |
26 | {children}
27 |
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/context/call-id-context.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { createContext, useState, useContext } from 'react';
3 | import { v4 as uuidv4 } from 'uuid';
4 |
5 | export interface CallIdValues {
6 | callId: string;
7 | }
8 |
9 | const CallIdContext = createContext
13 |
14 |
15 |
22 |
23 |
24 |
25 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
13 | {initials}
14 |
15 | );
16 | }
17 |
18 | // @see https://stackoverflow.com/questions/33076177/getting-name-initials-using-js
19 | const getInitials = (name: string) => {
20 | const allNames = name.trim().split(' ');
21 | const initials = allNames.reduce((acc, curr, index) => {
22 | if (index === 0 || index === allNames.length - 1) {
23 | acc = `${acc}${curr.charAt(0).toUpperCase()}`;
24 | }
25 | return acc;
26 | }, '');
27 | return initials;
28 | };
--------------------------------------------------------------------------------
/src/server/management-token.ts:
--------------------------------------------------------------------------------
1 | import jwt, { type Secret } from 'jsonwebtoken';
2 | import { env } from '~/env.mjs';
3 | import uuid4 from 'uuid4';
4 |
5 | interface Payload {
6 | iat: number;
7 | nbf: number;
8 | access_key: string;
9 | type: string;
10 | version: number;
11 | }
12 |
13 | const payload : Payload= {
14 | access_key: env.ACCESS_KEY,
15 | type: 'management',
16 | version: 2,
17 | iat: Math.floor(Date.now() / 1000),
18 | nbf: Math.floor(Date.now() / 1000)
19 | };
20 |
21 | export const generateManagementToken = (): Promise
21 |
22 |
30 |
31 | {children}
32 |
33 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # MIT License
2 |
3 | Copyright (c) 2023 Jaleel Bennett
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { type NextRequest, NextResponse } from 'next/server';
2 | import { absoluteUrl } from './utils/absoluteUrl';
3 | import { getToken } from 'next-auth/jwt';
4 |
5 | export async function middleware(req: NextRequest) {
6 |
7 | const session = await getToken({ req });
8 |
9 | const isAuth = !!session;
10 | const isAuthPage = req.nextUrl.pathname.startsWith('/login') || req.nextUrl.pathname.startsWith('/register');
11 |
12 | if (isAuthPage && isAuth) {
13 | return NextResponse.redirect('/calls');
14 | }
15 |
16 | if (!isAuth && !isAuthPage) {
17 | return NextResponse.redirect(absoluteUrl(`/login?from=${encodeURIComponent(req.nextUrl.pathname)}`));
18 | }
19 |
20 | // If the user is authenticated and they're not trying to access an auth page, let them proceed
21 | if (isAuth && !isAuthPage) {
22 | return NextResponse.next();
23 | }
24 |
25 | // If the user is not authenticated and they're trying to access an auth page, let them proceed
26 | if (!isAuth && isAuthPage) {
27 | return NextResponse.next();
28 | }
29 | }
30 |
31 |
32 | export const config = {
33 | matcher: ['/calls/:path*'],
34 | };
35 |
--------------------------------------------------------------------------------
/src/components/call/conference.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { selectPeers, useHMSStore } from "@100mslive/react-sdk";
3 | import React from "react";
4 | import Peer from "../ui/peer";
5 | import { Icons } from "../ui/icons";
6 |
7 | export default function Conference() {
8 | const peers = useHMSStore(selectPeers);
9 |
10 | const [loading, setLoading] = React.useState(true);
11 |
12 | React.useEffect(() => {
13 | if (peers.length > 0) {
14 | setLoading(false);
15 | }
16 | }, [peers]);
17 |
18 | return (
19 |
20 | {loading ? (
21 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/(home)/layout.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import SiteFooter from "~/components/layout/footer";
3 | import FullNav from "~/components/layout/full-nav";
4 | import { Button } from "~/components/ui/button";
5 |
6 | export default function HomePageLayout({
7 | children,
8 | }: {
9 | children: React.ReactNode;
10 | }) {
11 | return (
12 |
22 |
28 | ) : (
29 | peers.map((peer) =>
23 |
26 |
27 | Loading...
25 |
13 |
14 |
34 | {children}
35 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/ui/peer.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { selectIsPeerVideoEnabled, useHMSStore, useVideo } from "@100mslive/react-sdk";
3 | import Avatar from "./avatar";
4 |
5 | interface PeerProps {
6 | peer: {
7 | videoTrack?: string | undefined;
8 | isLocal: boolean;
9 | name: string;
10 | id: string;
11 | }
12 | }
13 |
14 | export default function Peer({ peer }: PeerProps) {
15 |
16 | const isVideoOn = useHMSStore(selectIsPeerVideoEnabled(peer.id));
17 |
18 | const { videoRef } = useVideo({
19 | trackId: peer.videoTrack
20 | });
21 |
22 |
23 | return (
24 |
15 |
16 |
23 |
24 |
25 |
31 |
32 |
33 |
25 | {!isVideoOn ?
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/hooks/use-copy.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useCallback } from 'react';
2 |
3 | function useClipboard() {
4 | const [isCopied, setIsCopied] = useState(false);
5 |
6 | const copyToClipboard = useCallback(async (text: string) => {
7 | if (navigator.clipboard && window.isSecureContext) {
8 | // Navigator Clipboard API method'
9 | try {
10 | await navigator.clipboard.writeText(text);
11 | setIsCopied(true);
12 | } catch (err) {
13 | console.error(err);
14 | setIsCopied(false);
15 | }
16 | } else {
17 | // Clipboard API not available, use fallback
18 | const textArea = document.createElement("textarea");
19 | textArea.value = text;
20 | document.body.appendChild(textArea);
21 | textArea.focus();
22 | textArea.select();
23 | try {
24 | const successful: boolean = document.execCommand('copy');
25 | setIsCopied(successful);
26 | } catch (err) {
27 | console.error(err);
28 | setIsCopied(false);
29 | }
30 | document.body.removeChild(textArea);
31 | }
32 | }, []);
33 |
34 | return { isCopied, copyToClipboard };
35 | }
36 |
37 | export default useClipboard;
38 |
--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5 | import { Check } from "lucide-react"
6 |
7 | import { cn } from "~/lib/utils"
8 |
9 | const Checkbox = React.forwardRef<
10 | React.ElementRef
21 |
29 |
37 |
38 | )
39 | }
--------------------------------------------------------------------------------
/src/components/mode-toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
5 | import { useTheme } from "next-themes";
6 | import { Button } from "./ui/button";
7 | import {
8 | DropdownMenu,
9 | DropdownMenuContent,
10 | DropdownMenuItem,
11 | DropdownMenuTrigger,
12 | } from "./ui/dropdown-menu";
13 |
14 | export function ModeToggle() {
15 | const { setTheme } = useTheme();
16 |
17 | return (
18 |
23 |
44 |
24 |
25 |
34 | 28 | Let's get started 29 |
30 |31 | Create your Callsquare account 32 |
33 |36 | 40 | Already have an account? Sign In 41 | 42 |
43 |
31 |
32 |
47 |
48 |
49 | {card.title}
50 |
51 |
52 | {card.description}
53 |
54 |
55 |
56 |
33 | {card.icon}
34 |
35 |
46 |
17 |
38 |
18 |
19 |
28 | 22 | Connect with Callsquare 23 |
24 |25 | Welcome back! Sign in to your Callsquare account 26 |
27 |30 | 34 | Don't have an account? Sign Up 35 | 36 |
37 |
42 | Rows per page
43 |
58 |
59 | );
60 | }
61 |
--------------------------------------------------------------------------------
/src/components/call/delete-call-actions.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-misused-promises */
2 | "use client"
3 | import {
4 | DropdownMenu,
5 | DropdownMenuContent,
6 | DropdownMenuLabel,
7 | DropdownMenuTrigger
8 | } from "../ui/dropdown-menu";
9 | import { cn } from "~/lib/utils";
10 | import { Button } from "../ui/button";
11 | import React from "react";
12 | import { Icons } from "~/components/ui/icons";
13 | import DeleteActionAlert from "../delete-action-alert";
14 |
15 | export default function DeleteCallActions({
16 | callId,
17 | }:{
18 | callId: string
19 | }) {
20 |
21 | const [showDeleteAlert, setShowDeleteAlert] = React.useState(false);
22 |
23 | return (
24 | <>
25 |
10 |
15 |
16 | ))
17 | Table.displayName = "Table"
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributes
70 |
94 |
71 |
72 |
77 |
93 | Ready to join?
75 |Enter you name to join the video call
76 |
54 |
55 |
64 |
65 |
89 |
90 | );
91 | }
92 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | /* :root {
7 | --background: 0 0% 100%;
8 | --foreground: 222.2 84% 4.9%;
9 |
10 | --muted: 210 40% 96.1%;
11 | --muted-foreground: 215.4 16.3% 46.9%;
12 |
13 | --popover: 0 0% 100%;
14 | --popover-foreground: 222.2 84% 4.9%;
15 |
16 | --card: 0 0% 100%;
17 | --card-foreground: 222.2 84% 4.9%;
18 |
19 | --border: 214.3 31.8% 91.4%;
20 | --input: 214.3 31.8% 91.4%;
21 |
22 | --primary: 222.2 47.4% 11.2%;
23 | --primary-foreground: 210 40% 98%;
24 |
25 | --secondary: 210 40% 96.1%;
26 | --secondary-foreground: 222.2 47.4% 11.2%;
27 |
28 | --accent: 210 40% 96.1%;
29 | --accent-foreground: 222.2 47.4% 11.2%;
30 |
31 | --destructive: 0 84.2% 60.2%;
32 | --destructive-foreground: 210 40% 98%;
33 |
34 | --ring: 215 20.2% 65.1%;
35 |
36 | --radius: 0.5rem;
37 | } */
38 |
39 | /* .dark {
40 | --background: 222.2 84% 4.9%;
41 | --foreground: 210 40% 98%;
42 |
43 | --muted: 217.2 32.6% 17.5%;
44 | --muted-foreground: 215 20.2% 65.1%;
45 |
46 | --popover: 222.2 84% 4.9%;
47 | --popover-foreground: 210 40% 98%;
48 |
49 | --card: 222.2 84% 4.9%;
50 | --card-foreground: 210 40% 98%;
51 |
52 | --border: 217.2 32.6% 17.5%;
53 | --input: 217.2 32.6% 17.5%;
54 |
55 | --primary: 210 40% 98%;
56 | --primary-foreground: 222.2 47.4% 11.2%;
57 |
58 | --secondary: 217.2 32.6% 17.5%;
59 | --secondary-foreground: 210 40% 98%;
60 |
61 | --accent: 217.2 32.6% 17.5%;
62 | --accent-foreground: 210 40% 98%;
63 |
64 | --destructive: 0 62.8% 30.6%;
65 | --destructive-foreground: 0 85.7% 97.3%;
66 |
67 | --ring: 217.2 32.6% 17.5%;
68 | } */
69 |
70 | :root {
71 | --background: 0 0% 100%;
72 | --foreground: 0 0% 3.9%;
73 | --card: 0 0% 100%;
74 | --card-foreground: 0 0% 3.9%;
75 | --popover: 0 0% 100%;
76 | --popover-foreground: 0 0% 3.9%;
77 | --primary: 0 0% 9%;
78 | --primary-foreground: 0 0% 98%;
79 | --secondary: 0 0% 96.1%;
80 | --secondary-foreground: 0 0% 9%;
81 | --muted: 0 0% 96.1%;
82 | --muted-foreground: 0 0% 45.1%;
83 | --accent: 0 0% 96.1%;
84 | --accent-foreground: 0 0% 9%;
85 | --destructive: 0 84.2% 60.2%;
86 | --destructive-foreground: 0 0% 98%;
87 | --border: 0 0% 89.8%;
88 | --input: 0 0% 89.8%;
89 | --ring: 0 0% 3.9%;
90 | --radius: 0.5rem;
91 | }
92 |
93 | .dark {
94 | --background: 0 0% 3.9%;
95 | --foreground: 0 0% 98%;
96 | --card: 0 0% 3.9%;
97 | --card-foreground: 0 0% 98%;
98 | --popover: 0 0% 3.9%;
99 | --popover-foreground: 0 0% 98%;
100 | --primary: 0 0% 98%;
101 | --primary-foreground: 0 0% 9%;
102 | --secondary: 0 0% 14.9%;
103 | --secondary-foreground: 0 0% 98%;
104 | --muted: 0 0% 14.9%;
105 | --muted-foreground: 0 0% 63.9%;
106 | --accent: 0 0% 14.9%;
107 | --accent-foreground: 0 0% 98%;
108 | --destructive: 0 62.8% 30.6%;
109 | --destructive-foreground: 0 0% 98%;
110 | --border: 0 0% 14.9%;
111 | --input: 0 0% 14.9%;
112 | --ring: 0 0% 83.1%;
113 | --radius: 0.5rem;
114 | }
115 |
116 | .conference {
117 | display: grid;
118 | grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
119 | gap: 1em;
120 | padding-inline: 1rem;
121 | height: calc(100% - 7rem);
122 | }
123 |
124 | @media (min-width: 600px) {
125 | .conference {
126 | grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
127 | }
128 | }
129 | }
130 |
131 | @layer base {
132 | * {
133 | @apply border-border;
134 | }
135 | body {
136 | @apply bg-background text-foreground;
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing Guide
2 |
3 | Thank you for investing your time in contributing to our project! Any contribution you make will be reflected on [skateshop](<[skateshop.sadmn.com](https://github.com/sadmann7/skateshop)>) :sparkles:.
4 |
5 | Read our [Code of Conduct](./CODE_OF_CONDUCT.md) to keep our community approachable and respectable.
6 |
7 | In this guide you will get an overview of the contribution workflow from opening an issue, creating a PR, reviewing, and merging the PR.
8 |
9 | ## New contributor guide
10 |
11 | To get an overview of the project, read the [README](README.md). Here are some resources to help you get started with open source contributions:
12 |
13 | - [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
14 | - [Understanding the GitHub flow](https://guides.github.com/introduction/flow/)
15 |
16 | - [GitHub Help Documentation](https://help.github.com/)
17 | - [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/)
18 |
19 | ## Getting started
20 |
21 | ### Fork the repository
22 |
23 | Fork the project [on GitHub](https://github.com/sadmann7/skateshop)
24 |
25 | ### Clone the project
26 |
27 | Clone your fork locally. Do not clone the original repository unless you plan to become a long-term contributor and have been given permission to do so.
28 |
29 | ```shell
30 | git clone https://github.com/sadmann7/skateshop
31 | cd skateshop
32 | ```
33 |
34 | ### Install dependencies
35 |
36 | Install the project dependencies:
37 |
38 | ```shell
39 | pnpm install
40 | ```
41 |
42 | ### Create a branch
43 |
44 | Create and check out your feature branch:
45 |
46 | ```shell
47 | git checkout -b my-new-feature
48 | ```
49 |
50 | ### Make changes locally
51 |
52 | Make your changes to the codebase. See the [development guide](contributing/development.md) for more information.
53 |
54 | ### Commit your changes
55 |
56 | Commit your changes:
57 |
58 | ```shell
59 | git commit -m 'Add some feature'
60 | ```
61 |
62 | ### Push your changes
63 |
64 | Push your changes to your fork:
65 |
66 | ```shell
67 | git push -u origin my-new-feature
68 | ```
69 |
70 | ### Create a pull request
71 |
72 | When you're finished with the changes, create a pull request, also known as a PR.
73 |
74 | - Fill the "Ready for review" template so that we can review your PR. This template helps reviewers understand your changes as well as the purpose of your pull request.
75 |
76 | ### Issues
77 |
78 | #### Create a new issue
79 |
80 | If you spot a problem in the codebase that you believe needs to be fixed, or you have an idea for a new feature, take a look at the [Issues](https://github.com/sadmann7/skateshop/issues).
81 |
82 | If you can't find an open issue addressing the problem, [open a new one](https://github.com/sadmann7/skateshop/issues/new). Be sure to include a title and clear description, as much relevant information as possible, and a code sample or an executable test case demonstrating the expected behavior that is not occurring.
83 |
84 | #### Solve an issue
85 |
86 | Scan through our [existing issues](https://github.com/sadmann7/skateshop/issues) to find one that interests you. You can narrow down the search using `labels` and `projects` to find issues that need attention.
87 |
88 | Then, fork the repository, create a branch, and make your changes.
89 |
90 | Finally, open a pull request with the changes.
91 |
92 | ### Your PR is merged
93 |
94 | Congratulations :tada::tada: The GitHub team thanks you :sparkles:.
95 |
96 | Once your PR is merged, your contributions will be publicly visible on the [skateshop](https://github.com/sadmann7/skateshop).
97 |
98 | ### Credits
99 |
100 | This Contributing Guide is adapted from [GitHub docs contributing guide](https://github.com/github/docs/blob/main/CONTRIBUTING.md?plain=1).
--------------------------------------------------------------------------------
/src/app/api/call/create/route.ts:
--------------------------------------------------------------------------------
1 | import { getServerSession } from "next-auth/next"
2 | import { z } from "zod"
3 | import { env } from "~/env.mjs"
4 | import { authOptions } from "~/server/auth"
5 | import { prisma } from "~/server/db"
6 | import { cookies } from 'next/headers'
7 | import { generateManagementToken } from "~/server/management-token"
8 |
9 | const callCreateSchema = z.object({
10 | callName: z.string().uuid(),
11 | })
12 |
13 | interface CallCreateBody {
14 | callName: string;
15 | }
16 |
17 | type Room = {
18 | id: string;
19 | };
20 |
21 | export async function POST(req: Request) {
22 |
23 | try {
24 | const session = await getServerSession(authOptions)
25 |
26 | if (!session) {
27 | return new Response("Unauthorized", { status: 403 })
28 | }
29 |
30 | const { user } = session
31 | if (!user || !user.id || !user.name || !user.email) {
32 | throw new Error('You must be logged in to create a call');
33 | }
34 |
35 | const json: CallCreateBody = await req.json() as CallCreateBody;
36 | const body = callCreateSchema.parse(json)
37 |
38 | const roomId = await createRoom(body.callName);
39 | const existingCall = await prisma.call.findUnique({
40 | where: { id: roomId },
41 | });
42 |
43 | if (existingCall) {
44 | throw new Error('A call with this ID already exists');
45 | }
46 |
47 | const newCall = await prisma.call.create({
48 | data: {
49 | id: roomId,
50 | name: body.callName,
51 | userId: user.id,
52 | title: user.name + "'s Call",
53 | startTime: new Date(),
54 | status: 'created',
55 | endTime: null,
56 | },
57 | });
58 |
59 | if (!newCall) {
60 | throw new Error('Error creating call');
61 | }
62 |
63 | const inviteLink = `${env.NEXT_PUBLIC_APP_URL}/call/${newCall.name}`;
64 |
65 | // Update the call with the invite link
66 | await prisma.call.update({
67 | where: { id: newCall.id },
68 | data: { inviteLink },
69 | });
70 |
71 |
72 | await prisma.participant.create({
73 | data: {
74 | userId: user.id,
75 | name: user.name,
76 | email: user.email,
77 | callName: newCall.name,
78 | role: 'host',
79 | status: 'joined',
80 | callId: newCall.id,
81 | startTime: new Date(),
82 | },
83 | });
84 |
85 | //store room code in session
86 | cookies().set('room-id', newCall.id)
87 | cookies().set('room-name', newCall.name)
88 |
89 | return new Response(JSON.stringify({ success: true }));
90 |
91 | } catch (error) {
92 | console.log(error)
93 | return new Response(null, { status: 500 })
94 | }
95 |
96 | }
97 |
98 | async function createRoom(name: string){
99 |
100 | const managementToken = await generateManagementToken();
101 |
102 | const response = await fetch(`${env.TOKEN_ENDPOINT}/rooms`, {
103 | method: 'POST',
104 | headers: {
105 | 'Authorization': `Bearer ${managementToken}`,
106 | 'Content-Type': 'application/json'
107 | },
108 | body: JSON.stringify({
109 | name: name,
110 | template_id: env.TEMPLATE_ID,
111 | region: 'us'
112 | })
113 | });
114 |
115 | if (!response.ok) {
116 | throw new Error(`HTTP error! status: ${response.status}`);
117 | }
118 |
119 | const { id }: Room = await response.json() as Room;
120 | return id;
121 | }
122 |
123 |
--------------------------------------------------------------------------------
/src/components/email-template.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-unescaped-entities */
2 | import {
3 | Body,
4 | Button,
5 | Container,
6 | Head,
7 | Heading,
8 | Hr,
9 | Html,
10 | Img,
11 | Link,
12 | Preview,
13 | Section,
14 | Tailwind,
15 | Text,
16 | } from "@react-email/components";
17 | import * as React from "react";
18 |
19 | interface InviteUserEmailProps {
20 | recipientUsername?: string;
21 | senderImage?: string;
22 | invitedByUsername?: string;
23 | invitedByEmail?: string;
24 | inviteLink?: string;
25 | }
26 |
27 | export const InviteEmail: React.FC
56 |
63 |
57 | {formatDate(new Date())}
58 |
62 | 59 | {`Welcome ${user?.name as string}`} 60 |
61 |
66 |
88 |
67 |
71 |
78 |
86 |
87 | 90 |
62 |
94 |
63 |
86 |
90 |
91 | Returning to the homescreen
92 |
93 |
87 | {secondsLeft}s
88 |
89 |
95 |
123 |
96 |
101 | You have left the call
97 |98 | Would you like to rejoin? 99 |
100 |
102 |
112 |
121 |
122 |
66 |
121 | )
122 | }
--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as ToastPrimitives from "@radix-ui/react-toast"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 | import { X } from "lucide-react"
5 |
6 | import { cn } from "~/lib/utils"
7 |
8 | const ToastProvider = ToastPrimitives.Provider
9 |
10 | const ToastViewport = React.forwardRef<
11 | React.ElementRefCall history
67 |Review your past interactions and revisit meaningful moments
68 | 69 |
70 |
71 |
104 |
105 |
106 |
107 |
120 |
74 | setShowCallDropdown(true)}
77 | isLoading={isCallLoading}
78 | />
79 |
80 |
84 |
88 |
89 |
90 | {
92 | await createCall();
93 | setShowCallDropdown(false);
94 | router.push(`/call/${callId}`)
95 | }}
96 | >
97 | Start a call now
98 |
99 | {
102 | await createCall();
103 | setShowCallDropdown(false);
104 | setShowCallLinkDialog(true);
105 | }}
106 | >
107 | Create call for later
108 |
109 |
110 |
111 |
150 |
151 | )
152 | }
153 |
--------------------------------------------------------------------------------
/src/components/call/invite-participants-dialog.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-misused-promises */
2 | "use client";
3 | import React, { useState } from "react";
4 | import { Icons } from "../ui/icons";
5 | import CardShell, { type CardProps } from "../layout/card-shell";
6 | import { useForm } from "react-hook-form";
7 | import { inviteSchema } from "~/schemas/invite";
8 | import { env } from "~/env.mjs";
9 | import { zodResolver } from "@hookform/resolvers/zod";
10 | import { type z } from "zod";
11 | import { getSession } from "next-auth/react";
12 | import { useCallId } from "~/context/call-id-context";
13 | import useClipboard from "~/hooks/use-copy";
14 | import { Button } from "../ui/button";
15 | import {
16 | Dialog,
17 | DialogContent,
18 | DialogFooter,
19 | DialogHeader,
20 | DialogTitle,
21 | DialogTrigger,
22 | } from "../ui/dialog";
23 | import { DialogDescription } from "@radix-ui/react-dialog";
24 | import { useToast } from "../ui/use-toast";
25 | import { Input } from "../ui/input";
26 | import { Label } from "../ui/label";
27 |
28 | type FormData = z.infer
163 |
192 |
164 |
170 | Find the project on Github
171 |
185 | 174 | Video calls made possible with Next.js 13 175 |
176 |177 | {siteConfig.description} 178 |
179 | 180 | 183 | 184 |
196 |
213 |
197 |
201 |
202 | 198 | This project was built using the following technologies 199 |
200 |
203 | {tools.map((tool, index) => (
204 |
212 |
205 | {tool.icon}
206 |
210 | ))}
211 | 207 | {tool.name} 208 |
209 |
217 |
256 |
218 | Features
219 |
230 |
220 |
229 | 221 | Features for Enhanced Communication 222 |
223 |224 | This project offers a range of features designed to facilitate 225 | smooth and efficient communication. From high-definition video 226 | calls to screen sharing and call history, 227 |
228 |
231 |
255 |
239 | {features.map((feature, index) => (
240 |
254 |
244 | {feature.icon}
245 |
252 | ))}
253 |
246 |
251 | {feature.name}
247 |248 | {feature.description} 249 |
250 |
260 |
281 |
261 |
269 |
270 |
275 |
279 |
280 | 262 | This is an open source project 263 |
264 |265 | Callsquare is open source. Check out the GitHub repository to get 266 | started. 267 |
268 |