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 ( = function({ timeslotId }) { Mark Unplayed + ( + <> + {dataTip && ( + <> + {dataTip + .split("¬") + .map((t) => t.split(/:(.+)/)) + .map((t) => ( + <> + {t[0]}: {t[1]} +
+ + ))} + + )} + + )} + delayShow={300} + place="bottom" + />