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%;