From 259d565533f28ce6398078026b0bd06aa1f8170a Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Sun, 24 Jan 2021 23:21:30 +0000
Subject: [PATCH] Add a item hover tooltip, Closes #184

---
 package.json              |  1 +
 src/App.scss              | 14 ++++++++++++++
 src/showplanner/Item.tsx  | 17 +++++++++++++++++
 src/showplanner/index.tsx | 24 ++++++++++++++++++++++++
 yarn.lock                 | 13 +++++++++++++
 5 files changed, 69 insertions(+)

diff --git a/package.json b/package.json
index 3883dd4..ac77489 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
     "react-redux": "^7.1.3",
     "react-scripts": "3.4.1",
     "react-stopwatch": "^2.0.4",
+    "react-tooltip": "^4.2.13",
     "reactstrap": "^8.4.1",
     "redux": "^4.0.4",
     "redux-persist": "^6.0.0",
diff --git a/src/App.scss b/src/App.scss
index 48bc3de..1ca2ba0 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -193,3 +193,17 @@ $number-of-channels: 3;
     max-width: 100%;
   }
 }
+
+#track-hover-tooltip {
+  padding: 1rem 2rem;
+  min-width: 300px;
+  font-size: 1em;
+  hr {
+    margin: 0.6rem 0.4rem 0.6rem 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.5);
+
+    &:last-of-type {
+      display: none;
+    }
+  }
+}
diff --git a/src/showplanner/Item.tsx b/src/showplanner/Item.tsx
index 8e672c2..c651346 100644
--- a/src/showplanner/Item.tsx
+++ b/src/showplanner/Item.tsx
@@ -45,6 +45,21 @@ export const Item = memo(function Item({
     }
   }
 
+  function generateTooltipData() {
+    let data = ["Title: " + x.title.toString()];
+
+    if ("artist" in x && x.artist !== "") data.push("Artist: " + x.artist);
+    if ("album" in x && x.album.title !== "")
+      data.push("Album: " + x.album.title);
+    data.push("Length: " + x.length.toString());
+    if ("intro" in x) data.push("Intro: " + x.intro + " secs");
+    if ("cue" in x) data.push("Cue: " + x.cue + " secs");
+    if ("outro" in x) data.push("Outro: " + x.outro + " secs");
+    data.push("Played: " + ("played" in x ? (x.played ? "Yes" : "No") : "No"));
+
+    return data.join("¬"); // Something obscure to split against.
+  }
+
   return (
     <Draggable
       draggableId={id}
@@ -65,6 +80,8 @@ export const Item = memo(function Item({
           onClick={triggerClick}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
+          data-tip={generateTooltipData()}
+          data-for="track-hover-tooltip"
         >
           <ContextMenuTrigger
             id={isReal ? TS_ITEM_MENU_ID : ""}
diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx
index cd5d0a7..c38e71f 100644
--- a/src/showplanner/index.tsx
+++ b/src/showplanner/index.tsx
@@ -22,6 +22,7 @@ import {
   DropResult,
   ResponderProvided,
 } from "react-beautiful-dnd";
+import ReactTooltip from "react-tooltip";
 
 import { useSelector, useDispatch, shallowEqual } from "react-redux";
 import { RootState } from "../rootReducer";
@@ -441,6 +442,29 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
           <FaCircleNotch /> Mark Unplayed
         </MenuItem>
       </ContextMenu>
+      <ReactTooltip
+        id="track-hover-tooltip"
+        // Sadly dataTip has to be a string, so let's format this the best we can. Split by something unusual to see in the data.
+        getContent={(dataTip) => (
+          <>
+            {dataTip && (
+              <>
+                {dataTip
+                  .split("¬")
+                  .map((t) => t.split(/:(.+)/))
+                  .map((t) => (
+                    <>
+                      <strong>{t[0]}:</strong> {t[1]}
+                      <hr />
+                    </>
+                  ))}
+              </>
+            )}
+          </>
+        )}
+        delayShow={300}
+        place="bottom"
+      />
       <OptionsMenu />
       <WelcomeModal
         isOpen={showWelcomeModal}
diff --git a/yarn.lock b/yarn.lock
index 66b4a1b..4907284 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10335,6 +10335,14 @@ react-stopwatch@^2.0.4:
   dependencies:
     ms "^2.1.2"
 
+react-tooltip@^4.2.13:
+  version "4.2.13"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.13.tgz#908db8a41dc10ae2ae9cc1864746cde939aaab0f"
+  integrity sha512-iAZ02wSxChLWb7Vnu0zeQMyAo/jiGHrwFNILWaR3pCKaFVRjKcv/B6TBI4+Xd66xLXVzLngwJ91Tf5D+mqAqVA==
+  dependencies:
+    prop-types "^15.7.2"
+    uuid "^7.0.3"
+
 react-transition-group@^2.3.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
@@ -12485,6 +12493,11 @@ uuid@^3.0.1, uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
+  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
+
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"