From d165aa6e8839ae42abe1f46bfe4a14b6465db180 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sun, 4 Sep 2022 18:56:15 +1200
Subject: [PATCH] Simplifying click-outside-of behavior, fixes #827

---
 src/js/components/Fields/OutputControl.js   | 14 +-------------
 src/js/components/LinksSentence.js          |  2 +-
 src/js/components/PlaybackControls.js       |  1 +
 src/scss/components/_playback-controls.scss |  1 -
 src/scss/global/_core.scss                  |  9 +++++++++
 5 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/js/components/Fields/OutputControl.js b/src/js/components/Fields/OutputControl.js
index 32b21201..065c8eea 100755
--- a/src/js/components/Fields/OutputControl.js
+++ b/src/js/components/Fields/OutputControl.js
@@ -231,11 +231,6 @@ const Commands = () => {
 
 const OutputControl = ({ force_expanded }) => {
   const [expanded, setExpanded] = useState(false);
-  const handleClick = (e) => {
-    if (!force_expanded && $(e.target).closest('.output-control').length <= 0) {
-      setExpanded(false);
-    }
-  };
 
   useEffect(() => {
     if (force_expanded && !expanded) {
@@ -243,19 +238,12 @@ const OutputControl = ({ force_expanded }) => {
     }
   }, [force_expanded]);
 
-  useEffect(() => {
-    if (expanded) {
-      window.addEventListener('click', handleClick, false);
-    } else {
-      window.removeEventListener('click', handleClick, false);
-    }
-  }, [expanded]);
-
   if (expanded) {
     const outputs = <Outputs />;
     const commands = <Commands />;
     return (
       <span className="output-control">
+        {!force_expanded && <div className="click-outside" onClick={() => setExpanded(false)} />}
         <button
           className="control speakers active"
           onClick={() => setExpanded(false)}
diff --git a/src/js/components/LinksSentence.js b/src/js/components/LinksSentence.js
index 04d8275d..0f722961 100755
--- a/src/js/components/LinksSentence.js
+++ b/src/js/components/LinksSentence.js
@@ -35,7 +35,7 @@ const LinksSentence = memo(({ items, itemType, className, nolinks }) => {
           }
 
           return (
-            <span key={`index_${uri}`}>
+            <span key={`index_${name || 'no-name'}_${uri || 'no-uri'}_index-${index}`}>
               {content}
               {separator}
             </span>
diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js
index 87862fb8..9c8fa1a4 100755
--- a/src/js/components/PlaybackControls.js
+++ b/src/js/components/PlaybackControls.js
@@ -69,6 +69,7 @@ const PlaybackControls = () => {
   return (
     <div className={`playback-controls${expanded ? ' playback-controls--expanded' : ''}${touch_enabled ? ' playback-controls--touch-enabled' : ''}`}>
 
+      {expanded && <div className="click-outside" onClick={() => setExpanded(false)} /> }
       <div className="playback-controls__background" />
 
       {nextTrack && nextTrack.images ? <Thumbnail className="hide" size="large" images={nextTrack.images} /> : null}
diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss
index 536ebd45..46f3bb4a 100755
--- a/src/scss/components/_playback-controls.scss
+++ b/src/scss/components/_playback-controls.scss
@@ -4,7 +4,6 @@
   bottom: 0;
   right: 0;
   left: 0;
-  transform-style: preserve-3d;
   display: flex;
   flex-flow: row;
   align-items: center;
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 857cf403..20d9692d 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -387,6 +387,15 @@ p {
   pointer-events: none !important;
 }
 
+.click-outside {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+
 h1 .placeholder {
   width: 50%;
 }