Improvements to Speaker page (#881)

## Description The following improvements have been made: - Made the speaker page mobile friendly - Added the streamEth logo in the navigation bar - Created a state to makes sure the user does not reupload the NFT on Zora - Added trackers on the "Upload to YT" and "Upload to Zora" buttons ## Type of change Please delete options that are not relevant. - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) ## Checklist: - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published ## Screenshots (if appropriate): ## Additional context: @Eric-Vondee There is one error when I try to upload to Zora, which is the following: `message: "type has should be one of the following; ['event','video']"` @greatsamist The YouTube upload does not work yet, because we are missing the "socialId" Tracker has not been tested yet, since it needs to be on production. --------- Co-authored-by: mariodev <gh_mario.proclaim@slmail.me> Co-authored-by: greatsamist <ifegbenga@gmail.com>
streamethorg · Aug 19, 2024 · 9017fbb · 9017fbb
1 parent 7bfd7f0
commit 9017fbb
Show file tree

Hide file tree

Showing 11 changed files with 6,008 additions and 5,518 deletions.
diff --git a/packages/app/app/speaker/[session]/components/SpeakerYoutubePublishButton.tsx b/packages/app/app/speaker/[session]/components/SpeakerYoutubePublishButton.tsx
@@ -1,4 +1,5 @@
 'use client';
+
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import useSearchParams from '@/lib/hooks/useSearchParams';
@@ -44,7 +45,6 @@ const SpeakerYoutubePublishButton = ({
 
   const handleYoutubePublish = async () => {
     setIsLoading(true);
-    track('Upload to YouTube', { location: 'Speaker Page' });
     try {
       const response = await fetch(`${apiUrl()}/sessions/upload`, {
         method: 'POST',
@@ -134,7 +134,10 @@ const SpeakerYoutubePublishButton = ({
               <Button
                 variant="primary"
                 className="overflow-hidden w-full"
-                onClick={handleYoutubePublish}
+                onClick={() => {
+                  track('Upload to YouTube', { location: 'Speaker Page' });
+                  handleYoutubePublish();
+                }}
                 loading={isLoading}
               >
                 Publish

diff --git a/packages/app/app/speaker/[session]/components/ZoraUploadButton.tsx b/packages/app/app/speaker/[session]/components/ZoraUploadButton.tsx
@@ -78,7 +78,6 @@ const ZoraUploadButton = ({
   const uploadToZora = useCallback(async () => {
     if (!publicClient || !address || !session.assetId) return;
 
-    track('Upload to Zora', { location: 'Speaker Page' });
     setIsUploading(true);
     try {
       const downloadUrl = await getDownloadUrl(session.assetId);
@@ -146,7 +145,14 @@ const ZoraUploadButton = ({
   const isDisabled = isUploading || !state;
 
   return (
-    <Button onClick={uploadToZora} disabled={isDisabled} variant={variant}>
+    <Button
+      onClick={() => {
+        track('Upload to Zora', { location: 'Speaker Page' });
+        uploadToZora();
+      }}
+      disabled={isDisabled}
+      variant={variant}
+    >
       {isUploading
         ? 'Uploading...'
         : state

diff --git a/packages/app/app/speaker/[session]/layout.tsx b/packages/app/app/speaker/[session]/layout.tsx
@@ -0,0 +1,18 @@
+'use server';
+
+import HomePageNavbar from '@/components/Layout/HomePageNavbar';
+import Footer from '@/components/Layout/Footer';
+
+const Layout = async ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="flex flex-col mx-auto w-full bg-white min-h-[100vh]">
+      <HomePageNavbar showLogo={true} pages={[]} showSearchBar={false} />
+      <div className="flex-grow w-full h-full">{children}</div>
+      <div className="sticky mb-5 top-[100vh]">
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/packages/app/app/speaker/[session]/page.tsx b/packages/app/app/speaker/[session]/page.tsx
@@ -67,7 +67,7 @@ const SessionPage = async ({
 
   return (
     <Suspense key={session!._id} fallback={<Loading />}>
-      <div className="flex flex-col items-center p-4 w-full h-full md:p-8">
+      <div className="flex flex-col items-center w-full h-full md:p-8">
         <div className="w-full max-w-4xl">
           <ClientSidePlayer
             name={session!.name}
@@ -82,7 +82,7 @@ const SessionPage = async ({
               },
             ]}
           />
-          <div className="mt-4 w-full">
+          <div className="p-4 mt-4 w-full">
             <SessionInfoBox
               name={session!.name}
               description={session!.description ?? 'No description'}

diff --git a/packages/app/components/Layout/Footer.tsx b/packages/app/components/Layout/Footer.tsx
@@ -29,13 +29,13 @@ const Footer = ({ active }: { active?: string }) => {
   const year = new Date().getFullYear();
 
   return (
-    <footer className="z-[99999999] mb-3 mt-5 flex flex-col items-center justify-center space-y-2 md:mb-5">
+    <footer className="flex flex-col justify-center items-center px-4 mt-5 mb-3 space-y-2 md:px-0 md:mb-5 z-[99999999]">
       <a className="mb-2 cursor-pointer" href="/">
         <StreamethLogoGray height={25} className="" />
       </a>
       <div className="flex items-center">
         {/* Visible only on small screens */}
-        <div className="flex w-full justify-center text-sm text-gray-500 md:hidden">
+        <div className="flex justify-center w-full text-sm text-gray-500 md:hidden">
           © {year} StreamETH International B.V.
         </div>
         {/* Visible on larger screens */}

diff --git a/packages/app/components/Layout/HomePageNavbar.tsx b/packages/app/components/Layout/HomePageNavbar.tsx
@@ -97,13 +97,13 @@ const MobileNavBar = ({
   }, [menuVisible, searchVisible]);
 
   return (
-    <NavigationMenu className="sticky top-0 z-50 flex flex-row items-center bg-white lg:hidden">
+    <NavigationMenu className="flex sticky top-0 z-50 flex-row items-center bg-white lg:hidden">
       {(searchVisible || menuVisible) && (
-        <div className="absolute left-0 top-0 h-[100vh] w-[100vw] bg-black bg-opacity-50" />
+        <div className="absolute top-0 left-0 bg-black bg-opacity-50 h-[100vh] w-[100vw]" />
       )}
 
       {searchVisible && showSearchBar && (
-        <div className="absolute bottom-[-56px] w-full bg-secondary">
+        <div className="absolute w-full bottom-[-56px] bg-secondary">
           <SearchBar organizationSlug={currentOrganization} isMobile={true} />
         </div>
       )}
@@ -132,26 +132,24 @@ const MobileNavBar = ({
             <IconLeft className="mr-1" /> Go back
           </Button>
         ) : (
-          showSearchBar && (
-            <Link href={`/${currentOrganization}`}>
-              <Image
-                src={logo ?? '/logo.png'}
-                alt="Logo"
-                height={36}
-                width={36}
-                className="aspect-square h-full"
-              />
-            </Link>
-          )
+          <Link href={`/${currentOrganization}`}>
+            <Image
+              src={logo ?? '/logo.png'}
+              alt="Logo"
+              height={36}
+              width={36}
+              className="h-full aspect-square"
+            />
+          </Link>
         )}
 
-        <div className="ml-auto flex items-center">
+        <div className="flex items-center ml-auto">
           {showSearchBar && (
             <button onClick={toggleSearch} className="p-2">
               {searchVisible ? (
-                <X className="h-6 w-6 text-primary" />
+                <X className="w-6 h-6 text-primary" />
               ) : (
-                <Search className="h-6 w-6 text-primary" />
+                <Search className="w-6 h-6 text-primary" />
               )}
             </button>
           )}
@@ -204,8 +202,8 @@ const PCNavBar = ({
   };
 
   return (
-    <NavigationMenu className="sticky top-0 z-[30] hidden w-full flex-row items-center justify-between bg-white p-2 px-4 md:hidden lg:flex">
-      <div className="flex flex-1 items-center justify-start">
+    <NavigationMenu className="hidden sticky top-0 flex-row justify-between items-center p-2 px-4 w-full bg-white md:hidden lg:flex z-[30]">
+      <div className="flex flex-1 justify-start items-center">
         {showLogo && (
           <Link href={`/${currentOrganization}`}>
             <Image
@@ -238,15 +236,15 @@ const PCNavBar = ({
           </div>
         )}
       </div>
-      <div className="mx-auto flex w-2/5 flex-grow-0 items-center justify-center">
+      <div className="flex flex-grow-0 justify-center items-center mx-auto w-2/5">
         {showSearchBar && (
           <SearchBar
             searchVisible={showSearchBar}
             organizationSlug={currentOrganization}
           />
         )}
       </div>
-      <div className="flex flex-1 items-center justify-end">
+      <div className="flex flex-1 justify-end items-center">
         {organizations && (
           <SwitchOrganization
             organization={currentOrganization}

diff --git a/packages/app/components/misc/ConnectWalletButton.tsx b/packages/app/components/misc/ConnectWalletButton.tsx
@@ -16,7 +16,7 @@ export const ConnectWalletButton = ({
         return (
           <Button variant={'primary'} onClick={show} className={className}>
             <span className="px-2 md:px-0">
-              {isConnected ? ensName ?? truncatedAddress : btnText}
+              {isConnected ? (ensName ?? truncatedAddress) : btnText}
             </span>
           </Button>
         );

diff --git a/packages/server/package.json b/packages/server/package.json
@@ -3,7 +3,7 @@
   "version": "3.0.0",
   "private": true,
   "scripts": {
-    "start": "node ./dist/server/src/server.js",
+    "start": "node ./dist/server.js",
     "dev": "nodemon --config nodemon.json",
     "build": "yarn run generate:routes && tsc --build tsconfig.prod.json && tsc-alias -p tsconfig.prod.json",
     "test": "mocha",

diff --git a/packages/server/src/controllers/state.controller.ts b/packages/server/src/controllers/state.controller.ts
@@ -35,6 +35,7 @@ export class StateController extends Controller {
     const state = await this.stateService.create(body);
     return SendApiResponse('state created', state);
   }
+
   /**
    *
    * @Summary Edit state

diff --git a/packages/server/src/routes/routes.ts b/packages/server/src/routes/routes.ts
@@ -259,7 +259,7 @@ const models: TsoaRoute.Models = {
     // WARNING: This file was auto-generated with tsoa. Please do not modify it. Re-run tsoa to re-generate this file: https://github.com/lukeautry/tsoa
     "StateType": {
         "dataType": "refEnum",
-        "enums": ["event","video"],
+        "enums": ["zora","event","video"],
     },
     // WARNING: This file was auto-generated with tsoa. Please do not modify it. Re-run tsoa to re-generate this file: https://github.com/lukeautry/tsoa
     "IState": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,7 @@ export class StateController extends Controller { @@
         const state = await this.stateService.create(body);
         return SendApiResponse('state created', state);
       }
       /**
        *
        * @Summary Edit state
@@ Expand Down @@