nextjs-vercel: Improve demo project with embedded room iframe

nextjs-vercel/README.md

@@ -40,18 +40,36 @@ yarn create next-app --example https://github.com/whereby/embedded-examples/tree
 
 ## Getting Started
 
-First, run the development server:
+We are using [Custom Server](https://nextjs.org/docs/advanced-features/custom-server) to run dev server on HTTPS with SSL certificate in `./server.js`.
+Note: A custom server can not be deployed on Vercel.
+
+1. Follow [this guide](https://web.dev/how-to-use-local-https/#setup) to create a certificate for `whereby.localhost.dev`,
+```bash
+mkcert -install
+
+mkcert whereby.localhost.dev
+```
+and move the resulting files (which should be named `whereby.localhost.dev-key.pem` and `whereby.localhost.dev.pem`) to `https_cert/`.
+
+2. Add `127.0.0.1 whereby.localhost.dev` as a new line to your `/etc/hosts` file (`sudo vi /etc/hosts`). So you can have local HTTPS.
+
+3. Go to your Whereby Embedded dashboard and allow the `https://whereby.localhost.dev:3000` domain.
+
+4. Create a `.env.local` file and add your Whereby Embedded environment variables `WHEREBY_API_KEY=eyJhb...` and `WHEREBY_WEBHOOK_SECRET=3bag9...`.
+
+5. 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.
+6. Open [https://whereby.localhost.dev:3000](https://whereby.localhost.dev: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/whereby/meetings](http://localhost:3000/api/whereby/meetings). This endpoint can be edited in `pages/api/whereby/meetings/index.js`.
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [https://whereby.localhost.dev:3000/api/whereby/meetings](https://whereby.localhost.dev:3000/api/whereby/meetings).
+This endpoint can be edited in `pages/api/whereby/meetings/index.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.

nextjs-vercel/components/CreateMeetingAPI/useCreateMeetingAPI.js

@@ -20,7 +20,6 @@ const text2Array = (_currentValue, originalValue) => {
   return originalValue.length > 0 ? originalValue.split(",") : [];
 };
 
-
 const now = new Date();
 
 const schema = yup.object().shape({
@@ -31,9 +30,17 @@ const schema = yup.object().shape({
     .max(40),
   roomNamePattern: yup.string().oneOf(["uuid", "human-short"]),
   roomMode: yup.string().oneOf(["group", "normal"]),
-  startDate: yup.date().transform(dateInput2Date).min(new Date(now.toDateString())).required(),
+  startDate: yup
+    .date()
+    .transform(dateInput2Date)
+    .min(new Date(now.toDateString()))
+    .required(),
   startTime: yup.date().transform(timeInput2Date).required(),
-  endDate: yup.date().transform(dateInput2Date).min(new Date(now.toDateString())).required(),
+  endDate: yup
+    .date()
+    .transform(dateInput2Date)
+    .min(new Date(now.toDateString()))
+    .required(),
   endTime: yup.date().transform(timeInput2Date).required(),
   fields: yup
     .array()
@@ -48,8 +55,8 @@ const defaultValues = {
   roomMode: "normal",
   startDate: format(now, "yyyy-LL-dd"),
   startTime: format(now, "HH:mm"),
-  endDate: format(add(now, {hours: 1}), "yyyy-LL-dd"),
-  endTime: format(add(now, {hours: 1}), "HH:mm"),
+  endDate: format(add(now, { hours: 1 }), "yyyy-LL-dd"),
+  endTime: format(add(now, { hours: 1 }), "HH:mm"),
   fields: "",
 };
 

nextjs-vercel/components/DeleteMeetingAPI/index.js

@@ -38,7 +38,7 @@ const DeleteMeetingAPI = ({ defaultMeetingId, onMeetingDeleted }) => {
         <Form.FormField label={"meetingId"}>
           <Form.InputField
             onChange={(v) => setMeetingId(v)}
-            value={meetingId || defaultMeetingId}
+            defaultValue={defaultMeetingId}
           />
         </Form.FormField>
       </Form>

nextjs-vercel/components/GetMeetingAPI/index.js

@@ -35,7 +35,7 @@ const GetMeetingAPI = ({ defaultMeetingId }) => {
         <Form.FormField label={"meetingId"}>
           <Form.InputField
             onChange={(v) => setMeetingId(v)}
-            value={meetingId || defaultMeetingId}
+            defaultValue={defaultMeetingId}
           />
         </Form.FormField>
       </Form>

nextjs-vercel/components/JoinMeeting/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+
+const JoinMeeting = ({ roomUrl }) => {
+  const [showRoom, setShowRoom] = React.useState(false);
+
+  return (
+    <div className="flex-1 flex flex-col justify-start items-center max-w-lg">
+      <button
+        className="bg-primary text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline my-4 disabled:opacity-50"
+        type="button"
+        onClick={() => setShowRoom(true)}
+        disabled={!Boolean(roomUrl)}
+      >
+        Join meeting
+      </button>
+      {showRoom && roomUrl && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: `
+          <iframe
+            style="width: 600px; height: 350px"
+            src="${roomUrl}?minimal"
+            allow="camera; microphone; fullscreen; speaker; display-capture"
+          />
+        `,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default JoinMeeting;

nextjs-vercel/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "node server.js",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

nextjs-vercel/pages/index.js

@@ -5,6 +5,7 @@ import CreateMeetingAPI from "../components/CreateMeetingAPI";
 import GetMeetingAPI from "../components/GetMeetingAPI";
 import DeleteMeetingAPI from "../components/DeleteMeetingAPI";
 import WherebyLogo from "../components/WherebyLogo";
+import JoinMeeting from "../components/JoinMeeting";
 
 export default function Home() {
   const [createdMeetingInfo, setCreatedMeetingInfo] = React.useState(null);
@@ -36,15 +37,10 @@ export default function Home() {
           onMeetingCreated={(info) => setCreatedMeetingInfo(info)}
           createdMeetingInfo={createdMeetingInfo}
         />
-        <GetMeetingAPI
-          defaultMeetingId={
-            createdMeetingInfo ? createdMeetingInfo.meetingId : undefined
-          }
-        />
+        <JoinMeeting roomUrl={createdMeetingInfo?.roomUrl} />
+        <GetMeetingAPI defaultMeetingId={createdMeetingInfo?.meetingId} />
         <DeleteMeetingAPI
-          defaultMeetingId={
-            createdMeetingInfo ? createdMeetingInfo.meetingId : undefined
-          }
+          defaultMeetingId={createdMeetingInfo?.meetingId}
           onMeetingDeleted={() => setCreatedMeetingInfo(null)}
         />
       </main>

nextjs-vercel/server.js

@@ -0,0 +1,25 @@
+const { createServer } = require("https");
+const { parse } = require("url");
+const next = require("next");
+const fs = require("fs");
+const port = 3000;
+const dev = process.env.NODE_ENV !== "production";
+const app = next({ dev });
+const handle = app.getRequestHandler();
+
+const httpsOptions = {
+  // Mkcert generated SSL certificate path
+  // Add `whereby.localhost.dev` as `127.0.0.1` alias in `/etc/hosts`
+  key: fs.readFileSync("./https_cert/whereby.localhost.dev-key.pem"),
+  cert: fs.readFileSync("./https_cert/whereby.localhost.dev.pem"),
+};
+
+app.prepare().then(() => {
+  createServer(httpsOptions, (req, res) => {
+    const parsedUrl = parse(req.url, true);
+    handle(req, res, parsedUrl);
+  }).listen(port, (err) => {
+    if (err) throw err;
+    console.log("ready - started server on url: https://localhost:" + port);
+  });
+});

nextjs-vercel/tailwind.config.js

@@ -26,7 +26,9 @@ module.exports = {
     },
   },
   variants: {
-    extend: {},
+    extend: {
+      opacity: ["disabled"],
+    },
   },
   plugins: [require("@tailwindcss/forms")],
 };