Added missing SynBio video & fixed description bug (#353)

The `CarcContent` would show up even though the description of the video is empty

data/sessions/zuzalu_montenegro_2023__synthetic_biology/biobots_and_the_future_of_biology.json

@@ -0,0 +1,20 @@
+{
+  "id": "biobots_and_the_future_of_biology",
+  "name": "Biobots and the Future of Biology",
+  "description": "",
+  "start": "2023-04-02T11:00:00.000Z",
+  "end": "2023-04-02T11:30:00.000Z",
+  "stageId": "dome",
+  "speakers": [
+    {
+      "id": "michael_levin",
+      "name": "Michael Levin",
+      "bio": "Tufts University",
+      "eventId": "zuzalu_montenegro_2023__synthetic_biology"
+    }
+  ],
+  "videoUrl": "https://lp-playback.com/hls/6724bqgi64j81qg9/index.m3u8",
+  "eventId": "zuzalu_montenegro_2023__synthetic_biology",
+  "coverImage": "/sessions/zuzalu_montenegro_2023/zuzalu_thumbnail.jpg",
+  "assetId": "67243415-8c98-4adf-b2ff-383a44bcddc7"
+}

data/speakers/zuzalu_montenegro_2023__synthetic_biology/michael_levin.json

@@ -0,0 +1,6 @@
+{
+  "id": "mark_kotter",
+  "name": "Mark Kotter",
+  "bio": "Tufts University",
+  "eventId": "zuzalu_montenegro_2023__synthetic_biology"
+}

packages/app/components/sessions/SessionInfoBox.tsx

@@ -34,18 +34,20 @@ const SessionInfoBox = ({
   viewCount?: boolean
 }) => {
   const [isOpened, setIsOpened] = useState(false)
+
+  console.log(description)
   return (
-    <div className=" rounded my-2">
-      <div className="flex flex-col lg:flex-row justify-center py-4">
+    <div className="my-2 rounded">
+      <div className="flex flex-col justify-center py-4 lg:flex-row">
         <div className="flex flex-col justify-center px-2">
           <CardTitle className="text-background">{title}</CardTitle>
           <CardDescription>
             {viewCount && assetId && <ViewCounts assetId={assetId} />}
 
-            <div className="flex flex-row ">{cardDescription}</div>
+            <div className="flex flex-row">{cardDescription}</div>
           </CardDescription>
         </div>
-        <div className="flex flex-row lg:ml-auto space-x-1 mt-2 lg:my-0">
+        <div className="flex flex-row mt-2 space-x-1 lg:my-0 lg:ml-auto">
           <ShareButton />
           <EmbedButton
             streamId={streamId}
@@ -55,8 +57,8 @@ const SessionInfoBox = ({
           {assetId && <VideoDownload assetId={assetId} />}
         </div>
       </div>
-      <CardContent className="bg-background rounded-md p-4">
-        {description !== '' && (
+      {description !== '' && (
+        <CardContent className="p-4 rounded-md bg-background">
           <div
             className={`transition-max-height duration-700 ease-in-out overflow-hidden ${
               isOpened ? 'max-h-96' : 'max-h-10'
@@ -69,13 +71,13 @@ const SessionInfoBox = ({
                 ))}
             </div>
           </div>
-        )}
-        <button
-          onClick={() => setIsOpened(!isOpened)}
-          className="mt-2 ml-auto w-full text-right text-white">
-          {isOpened ? 'Less' : 'More'}
-        </button>
-      </CardContent>
+          <button
+            onClick={() => setIsOpened(!isOpened)}
+            className="mt-2 ml-auto w-full text-right text-white">
+            {isOpened ? 'Less' : 'More'}
+          </button>
+        </CardContent>
+      )}
     </div>
   )
 }