PubNub chat iteration 1 (#520)

* PubNub chat iteration 1 * Added redux state wrapper * Fix for TypeError: hexoid is not a function * Fixed fetch history bug * Design overhaul of PubNub Chat * Pull request fix --------- Co-authored-by: Chase Adams <c@cadams.io>
livepeer · Apr 24, 2024 · 0ab5fde · 0ab5fde
1 parent d8f417f
commit 0ab5fde
Show file tree

Hide file tree

Showing 22 changed files with 2,040 additions and 304 deletions.
diff --git a/examples/with-pubnub/.env.example b/examples/with-pubnub/.env.example
@@ -1 +1,4 @@
-STUDIO_API_KEY="634b7695-b24d-4d8d-b890-b148d2897d9f"
+STUDIO_API_KEY=
+NEXT_PUBLIC_PUBLISH_KEY=
+NEXT_PUBLIC_SUBSCRIBE_KEY=
+NEXT_PUBLIC_SECRET_KEY=
diff --git a/examples/with-pubnub/next.config.js b/examples/with-pubnub/next.config.js
@@ -1,6 +1,20 @@
+const { NormalModuleReplacementPlugin } = require("webpack");
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+module.exports = {
   reactStrictMode: true,
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve.fallback.fs = false;
+      config.resolve.fallback.dns = false;
+      config.resolve.fallback.net = false;
+    }
+    config.plugins.push(
+      new NormalModuleReplacementPlugin(
+        /^hexoid$/,
+        require.resolve("hexoid/dist/index.js"),
+      ),
+    );
+    return config;
+  },
 };
-
-module.exports = nextConfig;
diff --git a/examples/with-pubnub/package.json b/examples/with-pubnub/package.json
@@ -10,14 +10,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@livepeer/react": "workspace:*",
+    "@pubnub/chat": "^0.6.0",
     "@radix-ui/react-popover": "^1.0.7",
+    "@types/react-modal": "^3.16.3",
     "clsx": "^2.1.0",
     "livepeer": "^3.0.2",
     "lucide-react": "^0.352.0",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-loader-spinner": "^6.1.6",
+    "react-modal": "^3.16.1",
     "sonner": "^1.4.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",

diff --git a/examples/with-pubnub/public/banned.png b/examples/with-pubnub/public/banned.png
diff --git a/examples/with-pubnub/src/app/page.tsx b/examples/with-pubnub/src/app/page.tsx
@@ -1,4 +1,5 @@
 import { Chat } from "@/components/chat/Chat";
+import { ChatContextProvider } from "@/components/chat/context/ChatContext";
 import { ArrowUpRight } from "lucide-react";
 import { cookies, headers } from "next/headers";
 import { BroadcastWithControls } from "../components/broadcast/Broadcast";
@@ -18,7 +19,7 @@ export default async function Home() {
       : null;
 
   return (
-    <main className="grid grid-cols-8 h-full relative min-h-screen bg-black">
+    <main className="grid grid-cols-8 h-full relative min-h-screen bg-black overflow-hidden">
       {!streamKey || !playbackId || !playbackUrl ? (
         <div className="flex flex-col flex-1 justify-center items-end gap-3 col-span-8">
           <h1 className="justify-center text-right flex text-3xl font-medium mr-3">
@@ -63,7 +64,9 @@ export default async function Home() {
           </div>
 
           <div className="col-span-8 md:col-span-2 h-full">
-            <Chat playbackId={playbackId} />
+            <ChatContextProvider>
+              <Chat playbackId={playbackId} />
+            </ChatContextProvider>
           </div>
         </>
       )}

diff --git a/examples/with-pubnub/src/app/view/[playbackId]/layout.tsx b/examples/with-pubnub/src/app/view/[playbackId]/layout.tsx
@@ -1,4 +1,5 @@
 import { Chat } from "@/components/chat/Chat";
+import { ChatContextProvider } from "@/components/chat/context/ChatContext";
 import type { ReactNode } from "react";
 
 export default function PlayerLayout({
@@ -22,7 +23,9 @@ export default function PlayerLayout({
         {children}
       </div>
       <div className="col-span-8 md:col-span-2 h-full">
-        <Chat playbackId={params.playbackId} />
+        <ChatContextProvider>
+          <Chat playbackId={params.playbackId} />
+        </ChatContextProvider>
       </div>
     </main>
   );