Add a item hover tooltip, Closes #184

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",

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;
+    }
+  }
+}

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 : ""}

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}

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"