diff --git a/packages/streamwall/src/renderer/overlay.tsx b/packages/streamwall/src/renderer/overlay.tsx index ecc0e3e..6fb077b 100644 --- a/packages/streamwall/src/renderer/overlay.tsx +++ b/packages/streamwall/src/renderer/overlay.tsx @@ -5,6 +5,7 @@ import { useHotkeys } from 'react-hotkeys-hook' import { FaFacebook, FaInstagram, + FaMapMarkerAlt, FaTiktok, FaTwitch, FaVolumeUp, @@ -80,18 +81,18 @@ function Overlay({ isListening={isListening} > - - {data.label ? ( - data.label - ) : ( - <> - {data.source} – {data.city} {data.state} - - )} - + {data.label ? data.label : <>{data.source}} {(isListening || isBackgroundListening) && } )} + {data?.city && ( + + + + {data.city} {data.state} + + + )} {isLoading && } ) @@ -276,6 +277,34 @@ const StreamTitle = styled.div` } ` +const StreamLocation = styled.div` + position: absolute; + bottom: 0px; + left: 0px; + max-width: calc(100% - 18px); + + display: flex; + align-items: center; + gap: 3px; + margin: 5px 9px; + font-weight: 800; + font-size: 14px; + color: white; + letter-spacing: -0.025em; + opacity: 0.9; + filter: drop-shadow(0 0 4px black); + + span { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + svg { + flex-shrink: 0; + } +` + const LoadingSpinner = styled(TailSpin)` position: absolute; left: 50%;