From 15449feff422ba9d719885c8cfd72da5012aa24e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 30 Jun 2023 22:15:26 -0700
Subject: [PATCH] Fix Youtube and empty state in PartyFooter

* Fixed Youtube embed styles
* Added empty state for description tab
---
 .../party/PartyFooter/index.module.scss       | 17 +++++-------
 components/party/PartyFooter/index.tsx        | 27 ++++++++++++++-----
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/components/party/PartyFooter/index.module.scss b/components/party/PartyFooter/index.module.scss
index b9d14962..7a88a9bb 100644
--- a/components/party/PartyFooter/index.module.scss
+++ b/components/party/PartyFooter/index.module.scss
@@ -32,7 +32,8 @@
       padding: 0 $unit;
     }
 
-    .noRemixes {
+    .noRemixes,
+    .noDescription {
       align-items: center;
       display: flex;
       flex-direction: column;
@@ -47,10 +48,6 @@
       }
     }
 
-    a:hover {
-      text-decoration: underline;
-    }
-
     p {
       font-size: $font-regular;
       line-height: $font-regular * 1.2;
@@ -65,7 +62,7 @@
       margin-bottom: $unit-2x;
     }
 
-    .YoutubeWrapper {
+    .youtube {
       background-color: var(--card-bg);
       border-radius: $card-corner;
       margin: $unit 0;
@@ -120,7 +117,7 @@
       }
 
       /* Play button */
-      & > .PlayerButton {
+      & > .playerButton {
         background: none;
         border: none;
         background-image: url('/icons/youtube.svg');
@@ -130,8 +127,8 @@
         transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
       }
 
-      & > .PlayerButton,
-      & > .PlayerButton:before {
+      & > .playerButton,
+      & > .playerButton:before {
         position: absolute;
         top: 50%;
         left: 50%;
@@ -143,7 +140,7 @@
         cursor: unset;
       }
       &.lyt-activated::before,
-      &.lyt-activated > .PlayerButton {
+      &.lyt-activated > .playerButton {
         opacity: 0;
         pointer-events: none;
       }
diff --git a/components/party/PartyFooter/index.tsx b/components/party/PartyFooter/index.tsx
index 6281953e..a3542634 100644
--- a/components/party/PartyFooter/index.tsx
+++ b/components/party/PartyFooter/index.tsx
@@ -22,6 +22,7 @@ import { youtube } from '~utils/youtube'
 import type { DetailsObject } from 'types'
 
 import RemixIcon from '~public/icons/Remix.svg'
+import EditIcon from '~public/icons/Edit.svg'
 import styles from './index.module.scss'
 
 // Props
@@ -41,9 +42,10 @@ const PartyFooter = (props: Props) => {
   const youtubeUrlRegex =
     /(?:https:\/\/www\.youtube\.com\/watch\?v=|https:\/\/youtu\.be\/)([\w-]+)/g
 
-  const [open, setOpen] = useState(false)
+  // State: UI
   const [currentSegment, setCurrentSegment] = useState(0)
 
+  // State: Data
   const [remixes, setRemixes] = useState<Party[]>([])
   const [embeddedDescription, setEmbeddedDescription] =
     useState<React.ReactNode>()
@@ -67,8 +69,8 @@ const PartyFooter = (props: Props) => {
               key={`${match}-${i}`}
               id={match}
               title={videoTitles[i]}
-              wrapperClass="YoutubeWrapper"
-              playerClass="PlayerButton"
+              wrapperClass={styles.youtube}
+              playerClass={styles.playerButton}
             />
           )
         )
@@ -168,14 +170,27 @@ const PartyFooter = (props: Props) => {
         selected={currentSegment === 1}
         onClick={() => setCurrentSegment(1)}
       >
-        {t('footer.remixes.label')}
+        {t('footer.remixes.label', { count: party?.remixes?.length })}
       </Segment>
     </SegmentedControl>
   )
 
   const descriptionSection = (
     <section className={styles.description}>
-      <Linkify>{embeddedDescription}</Linkify>
+      {party && party.description && party.description.length > 0 && (
+        <Linkify>{embeddedDescription}</Linkify>
+      )}
+      {(!party || !party.description) && (
+        <div className={styles.noDescription}>
+          <h3>{t('footer.description.empty')}</h3>
+          {props.editable && (
+            <Button
+              leftAccessoryIcon={<EditIcon />}
+              text={t('buttons.show_info')}
+            />
+          )}
+        </div>
+      )}
     </section>
   )
 
@@ -194,7 +209,7 @@ const PartyFooter = (props: Props) => {
   )
 
   function renderRemixes() {
-    return remixes.map((party, i) => {
+    return party?.remixes.map((party, i) => {
       return (
         <GridRep
           id={party.id}