Merge with dev

packages/app/app/[organization]/[event]/components/EventHomeComponent.tsx

@@ -23,11 +23,12 @@ import {
   isSameDate,
 } from '@/lib/utils/time'
 import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
 import { Suspense } from 'react'
 import banner from '@/public/streameth_twitter_banner.jpeg'
 import { IExtendedEvent } from '@/lib/types'
 import SignUp from '@/components/plugins/SignUp'
+import MDEditor from '@uiw/react-md-editor'
+import MarkdownDisplay from '@/components/misc/MarkdownDisplay'
 export default function EventHomeComponent({
   event,
   stages,
@@ -109,9 +110,7 @@ export default function EventHomeComponent({
             </div>
           </CardHeader>
           <CardContent className="pt-0 lg:pt-0 text-white">
-            <Markdown remarkPlugins={[remarkGfm]}>
-              {event.description}
-            </Markdown>
+            <MarkdownDisplay content={event.description} />
           </CardContent>
           <CardFooter className="flex flex-col p-4 space-y-2 w-full items-start">
             <CardTitle className=" text-white">Livestreams</CardTitle>

packages/app/app/[organization]/[event]/stage/[stage]/page.tsx

@@ -10,7 +10,6 @@ import { notFound } from 'next/navigation'
 import { generalMetadata, stageMetadata } from '@/lib/utils/metadata'
 import { Metadata } from 'next'
 import { fetchChat } from '@/lib/services/chatService'
-
 import { Livepeer } from 'livepeer'
 import { buildPlaybackUrl } from '@/lib/utils/utils'
 export default async function Stage({ params }: EventPageProps) {
@@ -48,10 +47,9 @@ export default async function Stage({ params }: EventPageProps) {
     return s.start < Date.now() && s.end > Date.now()
   })
 
-  console.log('currentSession', currentSession)
   return (
     <div className="bg-event flex flex-col w-full md:flex-row relative lg:max-h-[calc(100vh-54px)] p-2 gap-2">
-      <div className="flex flex-col w-full md:h-full z-40 md:w-full top-[54px] gap-2">
+      <div className="flex flex-col w-full md:h-full md:overflow-auto z-40 md:w-full top-[54px] gap-2">
         <Player
           src={[
             {

packages/app/app/studio/[organization]/event/(editor)/components/navigation/eventAccordion.tsx

@@ -31,7 +31,12 @@ import DatePicker from '@/components/misc/form/datePicker'
 import { generateTimezones } from '@/lib/utils/time'
 import { toast } from 'sonner'
 import { useCallback, useState } from 'react'
-import { updateEventAction } from '@/lib/actions/events'
+import MDEditor from '@uiw/react-md-editor'
+
+import {
+  syncEventImportAction,
+  updateEventAction,
+} from '@/lib/actions/events'
 import { IExtendedEvent } from '@/lib/types'
 import useSearchParams from '@/lib/hooks/useSearchParams'
 import DeleteEvent from '../DeleteEventButton'
@@ -40,6 +45,7 @@ const EventAccordion = ({ event }: { event: IExtendedEvent }) => {
   const { handleTermChange, searchParams } = useSearchParams()
   const [isUpdatingEvent, setIsUpdatingEvent] =
     useState<boolean>(false)
+  const [isSyncingEvent, setIsSyncingEvent] = useState<boolean>(false)
   const form = useForm<z.infer<typeof eventSchema>>({
     resolver: zodResolver(eventSchema),
     defaultValues: {
@@ -83,6 +89,27 @@ const EventAccordion = ({ event }: { event: IExtendedEvent }) => {
       })
   }
 
+  const handleEventSync = async () => {
+    setIsSyncingEvent(true)
+    const response = syncEventImportAction({
+      eventId: event._id,
+      organizationId: event.organizationId as string,
+    })
+      .then((response) => {
+        if (response) {
+          toast.success('Event synced')
+        } else {
+          toast.error('Error syncing event')
+        }
+      })
+      .catch(() => {
+        toast.error('Error syncing event')
+      })
+      .finally(() => {
+        setIsSyncingEvent(false)
+      })
+  }
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="">
@@ -122,9 +149,9 @@ const EventAccordion = ({ event }: { event: IExtendedEvent }) => {
                   <FormItem>
                     <FormLabel className="">Description</FormLabel>
                     <FormControl>
-                      <Textarea
-                        placeholder="a description"
-                        {...field}
+                      <MDEditor
+                        value={field.value}
+                        onChange={(a) => field.onChange(a)}
                       />
                     </FormControl>
                     <FormMessage />
@@ -351,7 +378,7 @@ const EventAccordion = ({ event }: { event: IExtendedEvent }) => {
             <AccordionTrigger>Event CMS</AccordionTrigger>
             <AccordionContent className="p-2 space-y-8">
               <span>
-                Import you speaker data and your schedule from one of
+                Import your speaker data and your schedule from one of
                 our supported data providers.
               </span>
               <FormField
@@ -370,12 +397,17 @@ const EventAccordion = ({ event }: { event: IExtendedEvent }) => {
                   </FormItem>
                 )}
               />
-              <Button
-                disabled={isUpdatingEvent}
-                type="submit"
-                className="ml-auto">
-                Save
-              </Button>
+              <div className="flex justify-between gap-5">
+                <Button disabled={isUpdatingEvent} type="submit">
+                  Save
+                </Button>
+                <Button
+                  onClick={handleEventSync}
+                  variant="secondary"
+                  disabled={isSyncingEvent}>
+                  Sync
+                </Button>
+              </div>
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="item-4" className="px-2">

packages/app/components/misc/MarkdownDisplay.tsx

@@ -0,0 +1,13 @@
+'use client'
+import MDEditor from '@uiw/react-md-editor'
+
+const MarkdownDisplay = ({ content }: { content: string }) => {
+  return (
+    <MDEditor.Markdown
+      source={content}
+      style={{ whiteSpace: 'pre-wrap', background: 'transparent' }}
+    />
+  )
+}
+
+export default MarkdownDisplay

packages/app/components/plugins/Chat/index.tsx

@@ -54,7 +54,7 @@ const ChatBar = ({
   const slug = stageId
 
   useEffect(() => {
-    if (!account || loadingEns) {
+    if (!account || loadingEns || !fakeName) {
       return
     }
     const getOrCreateViewerToken = async () => {
@@ -70,10 +70,7 @@ const ChatBar = ({
           const expiry = new Date(payload.exp * 1000)
           if (expiry < new Date()) {
             sessionStorage.removeItem(SESSION_VIEWER_TOKEN_KEY)
-            const token = await createViewerToken(
-              slug,
-              fakeName ?? 'anonymous'
-            )
+            const token = await createViewerToken(slug, fakeName)
             setViewerToken(token)
             const jti = jwtDecode(token)?.jti
             jti && setViewerName(jti)
@@ -88,10 +85,7 @@ const ChatBar = ({
 
         setViewerToken(sessionToken)
       } else {
-        const token = await createViewerToken(
-          slug,
-          fakeName ?? 'anonymous'
-        )
+        const token = await createViewerToken(slug, fakeName)
         setViewerToken(token)
         const jti = jwtDecode(token)?.jti
         jti && setViewerName(jti)
@@ -216,14 +210,20 @@ function Chat({ participantName, stageId, prevChatMessages }: Props) {
         {reverseMessages.map((message) => (
           <div
             key={message.timestamp}
-            className="flex items-center gap-2 p-2">
+            className={cn(
+              'flex items-center gap-2 p-2',
+              participantName === message.from?.identity
+                ? 'justify-end'
+                : 'justify-start'
+            )}>
             <Card className="flex flex-col  p-2">
-              <div className="flex items-center  gap-2">
+              <div className="flex items-center gap-2">
                 <div
                   className={cn(
                     'text-xs font-semibold',
-                    participantName === message.from?.identity &&
-                      'text-indigo-500'
+                    participantName === message.from?.identity
+                      ? 'text-black'
+                      : 'text-gray-500'
                   )}>
                   {formatIdentify(message.from?.identity)}
                   {participantName === message.from?.identity &&

packages/app/components/sessions/InfoBoxDescription.tsx

@@ -4,6 +4,7 @@ import { CardContent } from '@/components/ui/card'
 import { ArrowDownWideNarrow, ArrowUpWideNarrow } from 'lucide-react'
 import SpeakerIcon from '../speakers/speakerIcon'
 import { IExtendedSpeaker } from '@/lib/types'
+import MarkdownDisplay from '../misc/MarkdownDisplay'
 
 const InfoBoxDescription = ({
   description,
@@ -40,7 +41,7 @@ const InfoBoxDescription = ({
         className={`transition-max-height duration-700 ease-in-out overflow-hidden ${
           isExpandable && !isOpened && 'max-h-10'
         }`}>
-        {description}
+        {description && <MarkdownDisplay content={description} />}
         <div className="flex flex-row mt-2 space-x-2 overflow-auto">
           {speakers &&
             speakers.map((speaker) => (

packages/app/components/sessions/SessionInfoBox.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/components/ui/card'
 import InfoBoxDescription from './InfoBoxDescription'
 import { IExtendedSpeaker } from '@/lib/types'
+import Markdown from 'react-markdown'
 // TODO LOADING STAT
 const SessionInfoBox = ({
   title,

packages/app/lib/actions/events.ts

@@ -4,6 +4,7 @@ import {
   updateEvent,
   deleteEvent,
   fetchEvent,
+  syncEventImport,
 } from '@/lib/services/eventService'
 import { cookies } from 'next/headers'
 import { IExtendedEvent } from '../types'
@@ -16,7 +17,6 @@ export const createEventAction = async ({
 }: {
   event: IEvent
 }) => {
-
   const authToken = cookies().get('user-session')?.value
   if (!authToken) {
     throw new Error('No user session found')
@@ -122,3 +122,27 @@ export const signUp = async (
     return { message: 'Failed to sign up', success: false }
   }
 }
+
+export const syncEventImportAction = async ({
+  eventId,
+  organizationId,
+}: {
+  eventId: string
+  organizationId: string
+}) => {
+  const authToken = cookies().get('user-session')?.value
+  if (!authToken) {
+    throw new Error('No user session found')
+  }
+
+  const response = await syncEventImport({
+    eventId,
+    organizationId,
+    authToken,
+  })
+  if (!response) {
+    throw new Error('Error syncing event')
+  }
+  revalidatePath('/studio')
+  return response
+}

packages/app/lib/services/eventService.tsx

@@ -127,11 +127,11 @@ export const updateEvent = async ({
     body: JSON.stringify(modifiedObject),
   })
   if (!response.ok) {
-    console.log('error in updateEvent', (await response.json()))
     throw 'Error updating event'
   }
   return (await response.json()).data
 }
+
 export const deleteEvent = async ({
   eventId,
   organizationId,
@@ -160,3 +160,30 @@ export const deleteEvent = async ({
     throw e
   }
 }
+
+export const syncEventImport = async ({
+  eventId,
+  organizationId,
+  authToken,
+}: {
+  eventId: string
+  organizationId: string
+  authToken: string
+}): Promise<IEventModel> => {
+  const response = await fetch(
+    `${apiUrl()}/events/import/${eventId}`,
+    {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${authToken}`,
+      },
+      body: JSON.stringify({ organizationId }),
+    }
+  )
+  if (!response.ok) {
+    console.log('error in syncEventImport', await response.json())
+    throw 'Error syncing event'
+  }
+  return await response.json()
+}

packages/server/src/routes/routes.ts

@@ -1339,7 +1339,6 @@ export function RegisterRoutes(app: Router) {
         });
         // 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
         app.put('/events/:eventId',
-            authenticateMiddleware([{"jwt":["org"]}]),
             ...(fetchMiddlewares<RequestHandler>(EventController)),
             ...(fetchMiddlewares<RequestHandler>(EventController.prototype.editEvent)),
 

packages/server/src/swagger/swagger.json

@@ -2906,13 +2906,7 @@
 				"tags": [
 					"Event"
 				],
-				"security": [
-					{
-						"jwt": [
-							"org"
-						]
-					}
-				],
+				"security": [],
 				"parameters": [
 					{
 						"in": "path",