From 2a16f1b30b3e24d3f32f219d5cb100841649df97 Mon Sep 17 00:00:00 2001
From: kiwi_ <kiwihodl@proton.me>
Date: Thu, 17 Apr 2025 14:45:16 -0500
Subject: [PATCH] Update src/components/content/videos/VideoDetails.js

Adding the buffer import.

useEffect(() => {
  if (session?.user?.privkey) {
    const privkeyBuffer = Buffer.from(session.user.privkey, 'hex');
    setNsec(nip19.nsecEncode(privkeyBuffer));
  } else if (session?.user?.pubkey) {
    setNpub(nip19.npubEncode(session.user.pubkey));
  }
}, [session]);

The line const privkeyBuffer = Buffer.from(session.user.privkey, 'hex'); is using the global Buffer object. In Node.js environments, Buffer is available globally, but in the browser (where Next.js client components run), it isn't.
As the code rabbit mentioned, Webpack 5 (which Next.js uses) no longer automatically polyfills Node.js globals like Buffer. So when this code runs in the browser, it will throw a ReferenceError because Buffer is undefined.

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/components/content/videos/VideoDetails.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/content/videos/VideoDetails.js b/src/components/content/videos/VideoDetails.js
index 71b4c9d..0556a66 100644
--- a/src/components/content/videos/VideoDetails.js
+++ b/src/components/content/videos/VideoDetails.js
@@ -15,10 +15,12 @@ import useWindowWidth from '@/hooks/useWindowWidth';
 import dynamic from 'next/dynamic';
 import { Toast } from 'primereact/toast';
 import MoreOptionsMenu from '@/components/ui/MoreOptionsMenu';
+import React, { useEffect, useState, useRef } from 'react';
+// Needed for nip19 encoding on the client
+import { Buffer } from 'buffer';
 import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 import appConfig from '@/config/appConfig';
 import { nip19 } from 'nostr-tools';
-
 const MDDisplay = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
 });