From b9bfe146eab84a2d93d1cc0d31eaa9ef12caa5b1 Mon Sep 17 00:00:00 2001
From: shantanusoni72 <deltaairways_hill@simplelogin.com>
Date: Wed, 1 Nov 2023 04:03:56 -0400
Subject: [PATCH 1/3] Add copy to clipboard feature

---
 package-lock.json                                |  2 +-
 packages/ui/lib/components/TrackInfo/index.tsx   | 11 ++++++++++-
 packages/ui/lib/components/TrackInfo/styles.scss |  4 ++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1cd9698d16..6491e03442 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50122,7 +50122,7 @@
         "react-full-screen": "^1.0.1",
         "react-hifi": "^2.2.1",
         "react-hls-player": "^3.0.1",
-        "react-hot-loader": "^4.12",
+        "react-hot-loader": "^4.13.1",
         "react-i18next": "^11.12.0",
         "react-image": "^2.2.2",
         "react-list": "^0.8.13",
diff --git a/packages/ui/lib/components/TrackInfo/index.tsx b/packages/ui/lib/components/TrackInfo/index.tsx
index ef2c92c63a..d28a8a2cd9 100644
--- a/packages/ui/lib/components/TrackInfo/index.tsx
+++ b/packages/ui/lib/components/TrackInfo/index.tsx
@@ -4,6 +4,15 @@ import { Icon } from 'semantic-ui-react';
 import Cover from '../Cover';
 import styles from './styles.scss';
 
+const CopyTextToClipboard = async () => {
+  const track_element = document.getElementById('track_name');
+  try {
+    await navigator.clipboard.writeText(track_element.innerHTML);
+  } catch (err) {
+    console.error('Failed to copy: ', err);
+  }
+};
+
 export type TrackInfoProps = {
   cover?: string;
   track: string;
@@ -33,7 +42,7 @@ const TrackInfo: React.FC<TrackInfoProps> = ({
       hasTracks &&
         <>
           <div className={styles.artist_part}>
-            <div className={styles.track_name} onClick={onTrackClick}>
+            <div id='track_name' className={styles.track_name} onClick={() => CopyTextToClipboard()}>
               {track}
             </div>
             <div className={styles.artist_name} onClick={onArtistClick}>
diff --git a/packages/ui/lib/components/TrackInfo/styles.scss b/packages/ui/lib/components/TrackInfo/styles.scss
index 386458198c..33e5d6e884 100644
--- a/packages/ui/lib/components/TrackInfo/styles.scss
+++ b/packages/ui/lib/components/TrackInfo/styles.scss
@@ -47,4 +47,8 @@
       cursor: pointer;
     }
   }
+
+  #track_name:hover {
+    color: green;
+  }
 }

From d240aa6f2253b571ef5a72ab6df2f5a4c636c5c9 Mon Sep 17 00:00:00 2001
From: shantanusoni72 <deltaairways_hill@simplelogin.com>
Date: Fri, 3 Nov 2023 02:08:06 -0400
Subject: [PATCH 2/3] some improvements

---
 .../ui/lib/components/TrackInfo/index.tsx     | 19 ++++++++++++-------
 .../ui/lib/components/TrackInfo/styles.scss   |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/ui/lib/components/TrackInfo/index.tsx b/packages/ui/lib/components/TrackInfo/index.tsx
index d28a8a2cd9..6afb52d9ee 100644
--- a/packages/ui/lib/components/TrackInfo/index.tsx
+++ b/packages/ui/lib/components/TrackInfo/index.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
+import { Tooltip } from '@nuclear/ui';
 
 import Cover from '../Cover';
 import styles from './styles.scss';
 
-const CopyTextToClipboard = async () => {
-  const track_element = document.getElementById('track_name');
+const CopyTextToClipboard = async (track) => {
   try {
-    await navigator.clipboard.writeText(track_element.innerHTML);
+    await navigator.clipboard.writeText(track);
   } catch (err) {
-    console.error('Failed to copy: ', err);
+    // alert("Failed to copy"); // Will add notification toast here
   }
 };
 
@@ -42,9 +42,14 @@ const TrackInfo: React.FC<TrackInfoProps> = ({
       hasTracks &&
         <>
           <div className={styles.artist_part}>
-            <div id='track_name' className={styles.track_name} onClick={() => CopyTextToClipboard()}>
-              {track}
-            </div>
+            <Tooltip
+              content='Click to copy'
+              trigger={
+                <div id='track_name' className={styles.track_name} onClick={() => CopyTextToClipboard(track)}>
+                  {track}
+                </div>
+              }
+            />
             <div className={styles.artist_name} onClick={onArtistClick}>
               {artist}
             </div>
diff --git a/packages/ui/lib/components/TrackInfo/styles.scss b/packages/ui/lib/components/TrackInfo/styles.scss
index 33e5d6e884..7bf53c7992 100644
--- a/packages/ui/lib/components/TrackInfo/styles.scss
+++ b/packages/ui/lib/components/TrackInfo/styles.scss
@@ -49,6 +49,6 @@
   }
 
   #track_name:hover {
-    color: green;
+    cursor: pointer;
   }
 }

From ba640704a19cbfbc5f548cfbc7ddf516447cb7e6 Mon Sep 17 00:00:00 2001
From: shantanusoni72 <deltaairways_hill@simplelogin.com>
Date: Sun, 5 Nov 2023 07:44:21 -0500
Subject: [PATCH 3/3] add notification toast :)

---
 packages/i18n/src/locales/en.json             |  6 +-
 .../ui/lib/components/TrackInfo/index.tsx     | 55 +++++++++++++------
 2 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
index a142ca28b2..490504e2fc 100644
--- a/packages/i18n/src/locales/en.json
+++ b/packages/i18n/src/locales/en.json
@@ -365,7 +365,11 @@
     "play-next": "Play next",
     "play-now": "Play now",
     "playlist-toast-body": "{{artist}} - {{track}} has been added to playlist.",
-    "playlist-toast-title": "Track added to playlist"
+    "playlist-toast-title": "Track added to playlist",
+    "track-toast-clipboard-success-title": "Copied to clipboard!",
+    "track-toast-clipboard-success-subtitle": "Track name successfully copied to clipboard.",
+    "track-toast-clipboard-error-title": "Failed to copy!",
+    "track-toast-clipboard-error-subtitle": "Oof, something went wrong."
   },
   "track-table": {
     "add-selected-tracks-to-queue": "Add selected to queue",
diff --git a/packages/ui/lib/components/TrackInfo/index.tsx b/packages/ui/lib/components/TrackInfo/index.tsx
index 6afb52d9ee..023b796cac 100644
--- a/packages/ui/lib/components/TrackInfo/index.tsx
+++ b/packages/ui/lib/components/TrackInfo/index.tsx
@@ -1,18 +1,13 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
 import { Tooltip } from '@nuclear/ui';
+import * as ActionToast from '../../../../app/app/actions/toasts'
+import { useDispatch } from 'react-redux'
+import { useTranslation } from 'react-i18next';
 
 import Cover from '../Cover';
 import styles from './styles.scss';
 
-const CopyTextToClipboard = async (track) => {
-  try {
-    await navigator.clipboard.writeText(track);
-  } catch (err) {
-    // alert("Failed to copy"); // Will add notification toast here
-  }
-};
-
 export type TrackInfoProps = {
   cover?: string;
   track: string;
@@ -35,17 +30,42 @@ const TrackInfo: React.FC<TrackInfoProps> = ({
   removeFromFavorites,
   isFavorite = false,
   hasTracks = false
-}) => (
-  <div className={styles.track_info}>
-    <Cover cover={cover} />
-    {
-      hasTracks &&
+}) => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation('track-popup');
+
+  const CopyTextToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(track);
+      dispatch(ActionToast.
+        success(t('track-toast-clipboard-success-title'),
+          t('track-toast-clipboard-success-subtitle'),
+          null,
+          {}
+        )
+      );
+    } catch (err) {
+      dispatch(ActionToast.
+        error(t('track-toast-clipboard-error-title'),
+          t('track-toast-clipboard-error-subtitle'),
+          null,
+          {}
+        )
+      );
+    }
+  };
+
+  return (
+    <div className={styles.track_info}>
+      <Cover cover={cover} />
+      {
+        hasTracks &&
         <>
           <div className={styles.artist_part}>
             <Tooltip
               content='Click to copy'
               trigger={
-                <div id='track_name' className={styles.track_name} onClick={() => CopyTextToClipboard(track)}>
+                <div data-testid='track_name' id='track_name' className={styles.track_name} onClick={() => CopyTextToClipboard()}>
                   {track}
                 </div>
               }
@@ -65,8 +85,9 @@ const TrackInfo: React.FC<TrackInfoProps> = ({
             />
           </div>
         </>
-    }
-  </div>
-);
+      }
+    </div>
+  );
+}
 
 export default TrackInfo;