Inistial commit

REACT_APP_HTTP_BASE_URL=http://localhost:8000/api/

 No newline at end of file

{

  "extends": "next/core-web-vitals"

}

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies

/node_modules

/.pnp

.pnp.js

# testing

/coverage

# next.js

/.next/

/out/

# production

/build

# misc

.DS_Store

*.pem

# debug

npm-debug.log*

yarn-debug.log*

yarn-error.log*

.pnpm-debug.log*

# local env files

.env*.local

# vercel

.vercel

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

test

## Getting Started

First, run the development server:

```bash

npm run dev

# or

yarn dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

import Head from "next/head";

import Image from "next/image";

import { Inter } from "@next/font/google";

import { useEffect, useMemo } from "react";

import useTeamsMeeting from "./hooks/teams-provider/useTeamsMeeting";

import useZoomMeeting from "./hooks/zoom-provider/useZoomMeeting";

// import useWebexMeeting from "./hooks/webex-provider/useWebexMeeting";

import Router from "next/router";

const inter = Inter({ subsets: ["latin"] });

const mockData = {

  meetingIdOrLink: "",

  passcode: "",

  name: "testVing",

  login: false,

  isShareScreen: false,

  isStartMeeting: false,

  setOpenShareScreen: () => {},

};

function getURL(meetingLink) {

  let url = "";

  let newLink =

    meetingLink.indexOf("http") === -1 ? `https://${meetingLink}` : meetingLink;

  try {

    url = new URL(newLink);

  } catch (error) {

    url = "";

  }

  return url;

}

function getMeetingIdAndPasscode(link, passcode, meetingType) {

  let id = link || "";

  let password = passcode || "";

  let url = "";

  if (isNaN(link) && meetingType.toLowerCase() === "zoom") {

    url = getURL(link);

    if (url) {

      const pathnameArray = url.pathname.split("/");

      id = pathnameArray[pathnameArray.length - 1];

      const searchParams = new URLSearchParams(url.search);

      password = searchParams.get("pwd");

    }

  }

  return { linkOrId: id, password };

}

const useMeetingConnector = {

  teams: useTeamsMeeting,

  zoom: useZoomMeeting,

  // webex: useWebexMeeting,

};

export default function ConferenceScreen({

  meetingLink,

  meetingPasscode,

  provider,

}) {

  const {

    meetingIdOrLink,

    passcode,

    name,

    login,

    isShareScreen,

    isStartMeeting,

    setOpenShareScreen,

  } = mockData;

  const meetingConnector = useMeetingConnector[provider];

  const meetingDetails = useMemo(() => {

    return getMeetingIdAndPasscode(meetingLink, meetingPasscode, provider);

  }, [meetingLink, meetingPasscode, provider]);

  if (!meetingConnector) {

    return <div>Invalid provider.</div>;

  }

  const { meetingStatus, leaveMeeting, startShare, stopShare } =

    meetingConnector(

      meetingDetails.linkOrId,

      meetingDetails.password,

      name,

      login,

      isShareScreen,

      isStartMeeting,

      setOpenShareScreen

    );

  return (

    <div>

      <div>{meetingStatus?.message || "Welcome!"}</div>

      <button

        style={{

          margin: "20px",

          padding: "10px 20px",

          backgroundColor: "red",

          cursor: "pointer",

          border: "none",

          borderRadius: "10px",

        }}

        onClick={() => {

          leaveMeeting();

          Router.reload(window.location.pathname);

        }}

      >

        End Meeting

      </button>

      <button

        style={{

          margin: "20px",

          padding: "10px 20px",

          backgroundColor: "red",

          cursor: "pointer",

          border: "none",

          borderRadius: "10px",

        }}

        onClick={() => {

          stopShare();

        }}

      >

        Stop Share

      </button>

      <button

        style={{

          margin: "20px",

          padding: "10px 20px",

          backgroundColor: "red",

          cursor: "pointer",

          border: "none",

          borderRadius: "10px",

        }}

        onClick={() => {

          startShare();

        }}

      >

        Start Share

      </button>

    </div>

  );

}