Skip to content

Commit 1e005f6

Browse files
ThenlieThenlie
committed
create android upgrade prompt
1 parent 40d6ee3 commit 1e005f6

File tree

4 files changed

+4550
-43
lines changed

4 files changed

+4550
-43
lines changed

‎src/app/(main)/AndroidUpgradeNotification.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
'use client';
2+
3+
import { useEffect, useState } from 'react';
4+
import Flex from '../../components/Flex';
5+
6+
export default function AndroidUpgradeNotification() {
7+
const [alertVisible, setAlertVisible] = useState(true);
8+
const androidUpgradeNotificationDismissed = localStorage.getItem(
9+
'relistenAndroidNotificationDismissed'
10+
);
11+
12+
const dismissAlert = () => {
13+
localStorage.setItem('relistenAndroidNotificationDismissed', 'true');
14+
setAlertVisible(false);
15+
};
16+
17+
useEffect(() => {
18+
if (androidUpgradeNotificationDismissed) setAlertVisible(false);
19+
}, [androidUpgradeNotificationDismissed]);
20+
21+
return alertVisible ? (
22+
<Flex column className="border-b-[1px] border-b-[#aeaeae]">
23+
<section className="relative my-2 flex flex-col justify-center">
24+
<div className="text-center">RELISTEN is now available on the Play Store!</div>
25+
<div className="text-center">
26+
Check it out{' '}
27+
<a
28+
href="https://play.google.com/store/apps/details?id=net.relisten.android&hl=en_US"
29+
className="text-blue-500"
30+
>
31+
here
32+
</a>
33+
.
34+
</div>
35+
<button className="absolute right-2 top-2 text-lg font-bold" onClick={dismissAlert}>
36+
X
37+
</button>
38+
</section>
39+
</Flex>
40+
) : null;
41+
}

‎src/app/(main)/NavBar.tsx‎

Lines changed: 49 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,13 @@ import Player from '../../components/Player';
55
import { SimplePopover } from '../../components/Popover';
66
import { fetchArtists } from '../queries';
77
import MainNavHeader from './MainNavHeader';
8+
import { getUserAgent } from './layout';
9+
import AndroidUpgradeNotification from './AndroidUpgradeNotification';
810

911
export default async function NavBar() {
1012
const artists = await fetchArtists();
13+
const userAgent = await getUserAgent();
14+
const isAndroid = /android/i.test(userAgent?.ua || '');
1115

1216
const artistSlugsToName = artists.reduce(
1317
(memo, next) => {
@@ -19,50 +23,53 @@ export default async function NavBar() {
1923
);
2024

2125
return (
22-
<div className="navigation relative flex h-[50px] max-h-[50px] min-h-[50px] grid-cols-3 justify-between border-b-[1px] border-b-[#aeaeae] bg-white text-[#333333] lg:grid">
23-
<MainNavHeader artistSlugsToName={artistSlugsToName} />
24-
<div className="player min-w-[60%] flex-1 text-center lg:min-w-[44vw] xl:min-w-[38vw]">
25-
<Player artistSlugsToName={artistSlugsToName} />
26-
</div>
27-
<SimplePopover content={<Menu />}>
28-
<Flex className="flex-2 h-full cursor-pointer content-end items-center text-center font-medium 2xl:hidden">
29-
<div className="ml-auto flex h-full items-center px-1 active:relative active:top-[1px] active:text-[#333333]">
30-
<i className="fa fa-bars text-inherit" />
31-
</div>
32-
</Flex>
33-
</SimplePopover>
34-
<div className="nav hidden h-full flex-[2] cursor-pointer items-center justify-end text-center font-medium 2xl:flex">
35-
<div className="h-full px-1">
36-
<Link href="/today" legacyBehavior prefetch={false}>
37-
<a className="nav-btn">TIH</a>
38-
</Link>
39-
</div>
40-
<div>
41-
<Link href="/recently-played" legacyBehavior prefetch={false}>
42-
<a className="nav-btn whitespace-nowrap">LIVE</a>
43-
</Link>
44-
</div>
45-
<div>
46-
<Link href="/chat" legacyBehavior prefetch={false}>
47-
<a className="nav-btn">CHAT</a>
48-
</Link>
49-
</div>
50-
<div>
51-
<Link href="/ios" legacyBehavior prefetch={false}>
52-
<a className="nav-btn">iOS</a>
53-
</Link>
54-
</div>
55-
<div>
56-
<Link href="/sonos" legacyBehavior prefetch={false}>
57-
<a className="nav-btn">SONOS</a>
58-
</Link>
26+
<>
27+
<div className="navigation relative flex h-[50px] max-h-[50px] min-h-[50px] grid-cols-3 justify-between border-b-[1px] border-b-[#aeaeae] bg-white text-[#333333] lg:grid">
28+
<MainNavHeader artistSlugsToName={artistSlugsToName} />
29+
<div className="player min-w-[60%] flex-1 text-center lg:min-w-[44vw] xl:min-w-[38vw]">
30+
<Player artistSlugsToName={artistSlugsToName} />
5931
</div>
60-
<div>
61-
<Link href="/about" legacyBehavior prefetch={false}>
62-
<a className="nav-btn">ABOUT</a>
63-
</Link>
32+
<SimplePopover content={<Menu />}>
33+
<Flex className="flex-2 h-full cursor-pointer content-end items-center text-center font-medium 2xl:hidden">
34+
<div className="ml-auto flex h-full items-center px-1 active:relative active:top-[1px] active:text-[#333333]">
35+
<i className="fa fa-bars text-inherit" />
36+
</div>
37+
</Flex>
38+
</SimplePopover>
39+
<div className="nav hidden h-full flex-[2] cursor-pointer items-center justify-end text-center font-medium 2xl:flex">
40+
<div className="h-full px-1">
41+
<Link href="/today" legacyBehavior prefetch={false}>
42+
<a className="nav-btn">TIH</a>
43+
</Link>
44+
</div>
45+
<div>
46+
<Link href="/recently-played" legacyBehavior prefetch={false}>
47+
<a className="nav-btn whitespace-nowrap">LIVE</a>
48+
</Link>
49+
</div>
50+
<div>
51+
<Link href="/chat" legacyBehavior prefetch={false}>
52+
<a className="nav-btn">CHAT</a>
53+
</Link>
54+
</div>
55+
<div>
56+
<Link href="/ios" legacyBehavior prefetch={false}>
57+
<a className="nav-btn">iOS</a>
58+
</Link>
59+
</div>
60+
<div>
61+
<Link href="/sonos" legacyBehavior prefetch={false}>
62+
<a className="nav-btn">SONOS</a>
63+
</Link>
64+
</div>
65+
<div>
66+
<Link href="/about" legacyBehavior prefetch={false}>
67+
<a className="nav-btn">ABOUT</a>
68+
</Link>
69+
</div>
6470
</div>
6571
</div>
66-
</div>
72+
{isAndroid && <AndroidUpgradeNotification />}
73+
</>
6774
);
6875
}

‎src/app/(main)/layout.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
import { PropsWithChildren } from 'react';
2+
import parser from 'ua-parser-js';
23
import NavBar from './NavBar';
34
import Flex from '../../components/Flex';
5+
import { headers } from 'next/headers';
46

5-
export default function Layout({ children }: PropsWithChildren) {
7+
export const getUserAgent = async () => {
8+
const headersList = await headers();
9+
const userAgent = headersList.get('user-agent');
10+
11+
if (!userAgent) return null;
12+
13+
return parser(userAgent);
14+
};
15+
16+
export default async function Layout({ children }: PropsWithChildren) {
617
return (
718
<Flex column className="h-screen">
819
<NavBar />

0 commit comments

Comments
 (0)