From 8f20bdba279f0122361f8f9252b1dab3f3e29121 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <sddioulde@hotmail.com>
Date: Thu, 7 Sep 2023 22:21:50 -0400
Subject: [PATCH] Fix mobile deleted track tile (#4051)

Co-authored-by: Saliou Diallo <saliou@audius.co>
---
 .../components/details-tile/DetailsTile.tsx   | 184 +++++++++---------
 .../track-screen/TrackScreenDetailsTile.tsx   |  21 +-
 2 files changed, 117 insertions(+), 88 deletions(-)

diff --git a/packages/mobile/src/components/details-tile/DetailsTile.tsx b/packages/mobile/src/components/details-tile/DetailsTile.tsx
index 08345978ff..0ee139f315 100644
--- a/packages/mobile/src/components/details-tile/DetailsTile.tsx
+++ b/packages/mobile/src/components/details-tile/DetailsTile.tsx
@@ -360,94 +360,104 @@ export const DetailsTile = ({
               </TouchableOpacity>
             ) : null}
           </View>
-          {isLongFormContent && isNewPodcastControlsEnabled ? (
-            <DetailsProgressInfo track={track} />
-          ) : null}
-          <View style={styles.buttonSection}>
-            {!doesUserHaveAccess && !isOwner && premiumConditions && trackId ? (
-              <DetailsTileNoAccess
-                trackId={trackId}
-                premiumConditions={premiumConditions}
-              />
-            ) : null}
-            {doesUserHaveAccess || isOwner ? (
-              <Button
-                styles={{
-                  text: styles.playButtonText,
-                  icon: styles.playButtonIcon
-                }}
-                title={isPlayingFullAccess ? messages.pause : playText}
-                size='large'
-                iconPosition='left'
-                icon={isPlayingFullAccess ? IconPause : PlayIcon}
-                onPress={handlePressPlay}
-                disabled={!isPlayable}
-                fullWidth
-              />
-            ) : null}
-            {(doesUserHaveAccess || isOwner) && premiumConditions ? (
-              <DetailsTileHasAccess
-                premiumConditions={premiumConditions}
-                isOwner={isOwner}
-                trackArtist={user}
-              />
-            ) : null}
-            {showPreviewButton ? <PreviewButton /> : null}
-            <DetailsTileActionButtons
-              hasReposted={!!hasReposted}
-              hasSaved={!!hasSaved}
-              hideFavorite={hideFavorite}
-              hideOverflow={hideOverflow}
-              hideRepost={hideRepost}
-              hideShare={hideShare}
-              isOwner={isOwner}
-              isPlaylist={isPlaylist}
-              collectionId={collectionId}
-              isPublished={isPublished}
-              onPressEdit={onPressEdit}
-              onPressOverflow={onPressOverflow}
-              onPressRepost={onPressRepost}
-              onPressSave={onPressSave}
-              onPressShare={onPressShare}
-              onPressPublish={onPressPublish}
-            />
-          </View>
-          {isAiGeneratedTracksEnabled && aiAttributionUserId ? (
-            <DetailsTileAiAttribution userId={aiAttributionUserId} />
-          ) : null}
-          {!isPublished ? null : (
-            <DetailsTileStats
-              favoriteCount={saveCount}
-              hideFavoriteCount={hideFavoriteCount}
-              hideListenCount={hideListenCount}
-              hideRepostCount={hideRepostCount}
-              onPressFavorites={onPressFavorites}
-              onPressReposts={onPressReposts}
-              playCount={playCount}
-              repostCount={repostCount}
-            />
+          {track?.is_delete ? (
+            // This is to introduce a gap
+            <View />
+          ) : (
+            <>
+              {isLongFormContent && isNewPodcastControlsEnabled ? (
+                <DetailsProgressInfo track={track} />
+              ) : null}
+              <View style={styles.buttonSection}>
+                {!doesUserHaveAccess &&
+                !isOwner &&
+                premiumConditions &&
+                trackId ? (
+                  <DetailsTileNoAccess
+                    trackId={trackId}
+                    premiumConditions={premiumConditions}
+                  />
+                ) : null}
+                {doesUserHaveAccess || isOwner ? (
+                  <Button
+                    styles={{
+                      text: styles.playButtonText,
+                      icon: styles.playButtonIcon
+                    }}
+                    title={isPlayingFullAccess ? messages.pause : playText}
+                    size='large'
+                    iconPosition='left'
+                    icon={isPlayingFullAccess ? IconPause : PlayIcon}
+                    onPress={handlePressPlay}
+                    disabled={!isPlayable}
+                    fullWidth
+                  />
+                ) : null}
+                {(doesUserHaveAccess || isOwner) && premiumConditions ? (
+                  <DetailsTileHasAccess
+                    premiumConditions={premiumConditions}
+                    isOwner={isOwner}
+                    trackArtist={user}
+                  />
+                ) : null}
+                {showPreviewButton ? <PreviewButton /> : null}
+                <DetailsTileActionButtons
+                  hasReposted={!!hasReposted}
+                  hasSaved={!!hasSaved}
+                  hideFavorite={hideFavorite}
+                  hideOverflow={hideOverflow}
+                  hideRepost={hideRepost}
+                  hideShare={hideShare}
+                  isOwner={isOwner}
+                  isPlaylist={isPlaylist}
+                  collectionId={collectionId}
+                  isPublished={isPublished}
+                  onPressEdit={onPressEdit}
+                  onPressOverflow={onPressOverflow}
+                  onPressRepost={onPressRepost}
+                  onPressSave={onPressSave}
+                  onPressShare={onPressShare}
+                  onPressPublish={onPressPublish}
+                />
+              </View>
+              {isAiGeneratedTracksEnabled && aiAttributionUserId ? (
+                <DetailsTileAiAttribution userId={aiAttributionUserId} />
+              ) : null}
+              {!isPublished ? null : (
+                <DetailsTileStats
+                  favoriteCount={saveCount}
+                  hideFavoriteCount={hideFavoriteCount}
+                  hideListenCount={hideListenCount}
+                  hideRepostCount={hideRepostCount}
+                  onPressFavorites={onPressFavorites}
+                  onPressReposts={onPressReposts}
+                  playCount={playCount}
+                  repostCount={repostCount}
+                />
+              )}
+              <View style={styles.descriptionContainer}>
+                {description ? (
+                  <Hyperlink
+                    source={descriptionLinkPressSource}
+                    style={styles.description}
+                    linkStyle={styles.link}
+                    text={squashNewLines(description)}
+                  />
+                ) : null}
+              </View>
+              <View
+                style={[
+                  styles.infoSection,
+                  hideFavoriteCount &&
+                    hideListenCount &&
+                    hideRepostCount &&
+                    styles.noStats
+                ]}
+              >
+                {renderDetailLabels()}
+              </View>
+            </>
           )}
-          <View style={styles.descriptionContainer}>
-            {description ? (
-              <Hyperlink
-                source={descriptionLinkPressSource}
-                style={styles.description}
-                linkStyle={styles.link}
-                text={squashNewLines(description)}
-              />
-            ) : null}
-          </View>
-          <View
-            style={[
-              styles.infoSection,
-              hideFavoriteCount &&
-                hideListenCount &&
-                hideRepostCount &&
-                styles.noStats
-            ]}
-          >
-            {renderDetailLabels()}
-          </View>
         </View>
       </View>
       {renderBottomContent?.()}
diff --git a/packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx b/packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx
index 0c896ae687..1788c21146 100644
--- a/packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx
+++ b/packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx
@@ -79,7 +79,8 @@ const messages = {
   collectibleGated: 'collectible gated',
   specialAccess: 'special access',
   usdcPurchase: 'premium track',
-  generatedWithAi: 'generated with ai'
+  generatedWithAi: 'generated with ai',
+  trackDeleted: 'track [deleted by artist]'
 }
 
 type TrackScreenDetailsTileProps = {
@@ -234,6 +235,7 @@ export const TrackScreenDetailsTile = ({
     has_current_user_reposted,
     has_current_user_saved,
     is_unlisted,
+    is_delete,
     is_premium: isPremium,
     mood,
     owner_id,
@@ -480,6 +482,23 @@ export const TrackScreenDetailsTile = ({
   }
 
   const renderHeader = () => {
+    if (is_delete) {
+      return (
+        <View style={styles.headerContainer}>
+          <View style={styles.headerRow}>
+            <Text
+              style={styles.headerText}
+              weight='medium'
+              fontSize='xs'
+              color={getDownloadTextColor()}
+            >
+              {messages.trackDeleted}
+            </Text>
+          </View>
+        </View>
+      )
+    }
+
     return is_unlisted ? (
       <View style={styles.hiddenDetailsTileWrapper}>
         <IconHidden fill={neutralLight4} />