2023-06-29 03:20:01 +12:00
|
|
|
import { AppBar, Toolbar, IconButton, Typography, Box, MenuItem, Button, Divider, ListItemIcon, useTheme } from "@mui/material";
|
2022-02-26 06:46:22 +13:00
|
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
|
|
|
import * as React from "react";
|
2023-01-05 16:47:12 +13:00
|
|
|
import { useState } from "react";
|
2022-03-06 16:33:34 +13:00
|
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
|
|
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
2022-03-09 10:56:41 +13:00
|
|
|
import NotificationsIcon from "@mui/icons-material/Notifications";
|
|
|
|
import NotificationsOffIcon from "@mui/icons-material/NotificationsOff";
|
2022-04-09 02:44:35 +12:00
|
|
|
import { useTranslation } from "react-i18next";
|
2022-12-03 09:37:48 +13:00
|
|
|
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
2022-12-15 17:43:43 +13:00
|
|
|
import { Logout, Person, Settings } from "@mui/icons-material";
|
2022-12-03 09:37:48 +13:00
|
|
|
import session from "../app/Session";
|
2022-03-11 09:37:50 +13:00
|
|
|
import logo from "../img/ntfy.svg";
|
2022-03-06 16:33:34 +13:00
|
|
|
import subscriptionManager from "../app/SubscriptionManager";
|
2022-03-10 17:28:55 +13:00
|
|
|
import routes from "./routes";
|
2023-06-10 06:32:34 +12:00
|
|
|
import db from "../app/db";
|
2023-02-01 15:39:30 +13:00
|
|
|
import { topicDisplayName } from "../app/utils";
|
2022-02-26 06:46:22 +13:00
|
|
|
import Navigation from "./Navigation";
|
2023-02-01 15:39:30 +13:00
|
|
|
import accountApi from "../app/AccountApi";
|
2023-01-01 03:31:46 +13:00
|
|
|
import PopupMenu from "./PopupMenu";
|
2023-02-11 15:19:44 +13:00
|
|
|
import { SubscriptionPopup } from "./SubscriptionPopup";
|
2023-06-29 10:22:58 +12:00
|
|
|
import { useIsLaunchedPWA } from "./hooks";
|
2022-02-26 06:46:22 +13:00
|
|
|
|
|
|
|
const ActionBar = (props) => {
|
2023-06-29 03:20:01 +12:00
|
|
|
const theme = useTheme();
|
2022-04-09 02:44:35 +12:00
|
|
|
const { t } = useTranslation();
|
2022-03-05 10:10:04 +13:00
|
|
|
const location = useLocation();
|
2023-06-29 10:22:58 +12:00
|
|
|
const isLaunchedPWA = useIsLaunchedPWA();
|
|
|
|
|
2022-03-05 10:10:04 +13:00
|
|
|
let title = "ntfy";
|
2022-03-09 08:13:32 +13:00
|
|
|
if (props.selected) {
|
2022-06-30 07:57:56 +12:00
|
|
|
title = topicDisplayName(props.selected);
|
2023-01-05 16:47:12 +13:00
|
|
|
} else if (location.pathname === routes.settings) {
|
2022-04-09 02:44:35 +12:00
|
|
|
title = t("action_bar_settings");
|
2023-01-05 16:47:12 +13:00
|
|
|
} else if (location.pathname === routes.account) {
|
|
|
|
title = t("action_bar_account");
|
2022-03-05 10:10:04 +13:00
|
|
|
}
|
2023-06-29 10:22:58 +12:00
|
|
|
|
|
|
|
const getActionBarBackground = () => {
|
|
|
|
if (isLaunchedPWA) {
|
|
|
|
return "#317f6f";
|
|
|
|
}
|
|
|
|
|
|
|
|
switch (theme.palette.mode) {
|
|
|
|
case "dark":
|
|
|
|
return "linear-gradient(150deg, #203631 0%, #2a6e60 100%)";
|
|
|
|
|
|
|
|
case "light":
|
|
|
|
default:
|
|
|
|
return "linear-gradient(150deg, #338574 0%, #56bda8 100%)";
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2022-02-26 06:46:22 +13:00
|
|
|
return (
|
2022-02-27 08:22:21 +13:00
|
|
|
<AppBar
|
|
|
|
position="fixed"
|
|
|
|
sx={{
|
|
|
|
width: "100%",
|
2022-02-27 08:36:23 +13:00
|
|
|
zIndex: { sm: 1250 }, // > Navigation (1200), but < Dialog (1300)
|
2022-02-27 08:22:21 +13:00
|
|
|
ml: { sm: `${Navigation.width}px` },
|
|
|
|
}}
|
|
|
|
>
|
2022-12-31 04:31:52 +13:00
|
|
|
<Toolbar
|
|
|
|
sx={{
|
|
|
|
pr: "24px",
|
2023-06-29 10:22:58 +12:00
|
|
|
background: getActionBarBackground(),
|
2022-12-31 04:31:52 +13:00
|
|
|
}}
|
|
|
|
>
|
2022-02-26 06:46:22 +13:00
|
|
|
<IconButton
|
|
|
|
color="inherit"
|
|
|
|
edge="start"
|
2022-05-03 11:30:29 +12:00
|
|
|
aria-label={t("action_bar_show_menu")}
|
2022-02-26 06:46:22 +13:00
|
|
|
onClick={props.onMobileDrawerToggle}
|
|
|
|
sx={{ mr: 2, display: { sm: "none" } }}
|
|
|
|
>
|
|
|
|
<MenuIcon />
|
|
|
|
</IconButton>
|
2022-05-03 11:30:29 +12:00
|
|
|
<Box
|
|
|
|
component="img"
|
|
|
|
src={logo}
|
|
|
|
alt={t("action_bar_logo_alt")}
|
|
|
|
sx={{
|
|
|
|
display: { xs: "none", sm: "block" },
|
|
|
|
marginRight: "10px",
|
|
|
|
height: "28px",
|
|
|
|
}}
|
|
|
|
/>
|
2022-02-27 08:22:21 +13:00
|
|
|
<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
|
|
|
|
{title}
|
|
|
|
</Typography>
|
2022-03-09 10:56:41 +13:00
|
|
|
{props.selected && <SettingsIcons subscription={props.selected} onUnsubscribe={props.onUnsubscribe} />}
|
2022-12-03 09:37:48 +13:00
|
|
|
<ProfileIcon />
|
2022-02-26 06:46:22 +13:00
|
|
|
</Toolbar>
|
|
|
|
</AppBar>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-03-09 10:56:41 +13:00
|
|
|
const SettingsIcons = (props) => {
|
2022-04-09 02:44:35 +12:00
|
|
|
const { t } = useTranslation();
|
2022-12-29 20:32:05 +13:00
|
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
2022-03-09 10:56:41 +13:00
|
|
|
const { subscription } = props;
|
2022-03-06 16:33:34 +13:00
|
|
|
|
2022-03-09 10:56:41 +13:00
|
|
|
const handleToggleMute = async () => {
|
|
|
|
const mutedUntil = subscription.mutedUntil ? 0 : 1; // Make this a timestamp in the future
|
|
|
|
await subscriptionManager.setMutedUntil(subscription.id, mutedUntil);
|
|
|
|
};
|
|
|
|
|
2022-03-06 16:33:34 +13:00
|
|
|
return (
|
|
|
|
<>
|
2022-12-26 16:29:55 +13:00
|
|
|
<IconButton color="inherit" size="large" edge="end" onClick={handleToggleMute} aria-label={t("action_bar_toggle_mute")}>
|
2022-03-09 10:56:41 +13:00
|
|
|
{subscription.mutedUntil ? <NotificationsOffIcon /> : <NotificationsIcon />}
|
|
|
|
</IconButton>
|
2023-02-01 15:39:30 +13:00
|
|
|
<IconButton
|
|
|
|
color="inherit"
|
|
|
|
size="large"
|
|
|
|
edge="end"
|
|
|
|
onClick={(ev) => setAnchorEl(ev.currentTarget)}
|
|
|
|
aria-label={t("action_bar_toggle_action_menu")}
|
|
|
|
>
|
2022-03-06 16:33:34 +13:00
|
|
|
<MoreVertIcon />
|
|
|
|
</IconButton>
|
2023-02-01 15:39:30 +13:00
|
|
|
<SubscriptionPopup subscription={subscription} anchor={anchorEl} placement="right" onClose={() => setAnchorEl(null)} />
|
2022-03-06 16:33:34 +13:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-12-29 20:32:05 +13:00
|
|
|
const ProfileIcon = () => {
|
2022-12-03 09:37:48 +13:00
|
|
|
const { t } = useTranslation();
|
2022-12-15 17:43:43 +13:00
|
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
|
|
const open = Boolean(anchorEl);
|
2022-12-08 14:44:20 +13:00
|
|
|
const navigate = useNavigate();
|
2022-12-03 09:37:48 +13:00
|
|
|
|
2022-12-15 17:43:43 +13:00
|
|
|
const handleClick = (event) => {
|
|
|
|
setAnchorEl(event.currentTarget);
|
2022-12-03 09:37:48 +13:00
|
|
|
};
|
2022-12-29 20:32:05 +13:00
|
|
|
|
2022-12-15 17:43:43 +13:00
|
|
|
const handleClose = () => {
|
|
|
|
setAnchorEl(null);
|
2022-12-03 09:37:48 +13:00
|
|
|
};
|
2022-12-29 20:32:05 +13:00
|
|
|
|
2022-12-08 14:44:20 +13:00
|
|
|
const handleLogout = async () => {
|
2022-12-26 05:59:44 +13:00
|
|
|
try {
|
|
|
|
await accountApi.logout();
|
2023-06-10 06:32:34 +12:00
|
|
|
await db().delete();
|
2022-12-26 05:59:44 +13:00
|
|
|
} finally {
|
2023-06-14 00:00:51 +12:00
|
|
|
await session.resetAndRedirect(routes.app);
|
2022-12-26 05:59:44 +13:00
|
|
|
}
|
2022-12-03 09:37:48 +13:00
|
|
|
};
|
2022-12-29 20:32:05 +13:00
|
|
|
|
2022-12-03 09:37:48 +13:00
|
|
|
return (
|
|
|
|
<>
|
2022-12-08 14:44:20 +13:00
|
|
|
{session.exists() && (
|
2022-12-29 20:32:05 +13:00
|
|
|
<IconButton color="inherit" size="large" edge="end" onClick={handleClick} aria-label={t("action_bar_profile_title")}>
|
2022-12-03 09:37:48 +13:00
|
|
|
<AccountCircleIcon />
|
|
|
|
</IconButton>
|
|
|
|
)}
|
2023-01-05 16:47:12 +13:00
|
|
|
{!session.exists() && config.enable_login && (
|
2022-12-29 20:32:05 +13:00
|
|
|
<Button color="inherit" variant="text" onClick={() => navigate(routes.login)} sx={{ m: 1 }} aria-label={t("action_bar_sign_in")}>
|
|
|
|
{t("action_bar_sign_in")}
|
|
|
|
</Button>
|
2022-12-22 07:19:07 +13:00
|
|
|
)}
|
2023-01-05 16:47:12 +13:00
|
|
|
{!session.exists() && config.enable_signup && (
|
2022-12-29 20:32:05 +13:00
|
|
|
<Button color="inherit" variant="outlined" onClick={() => navigate(routes.signup)} aria-label={t("action_bar_sign_up")}>
|
|
|
|
{t("action_bar_sign_up")}
|
|
|
|
</Button>
|
2022-12-03 09:37:48 +13:00
|
|
|
)}
|
2022-12-15 17:43:43 +13:00
|
|
|
<PopupMenu horizontal="right" anchorEl={anchorEl} open={open} onClose={handleClose}>
|
2022-12-16 16:07:04 +13:00
|
|
|
<MenuItem onClick={() => navigate(routes.account)}>
|
2022-12-15 17:43:43 +13:00
|
|
|
<ListItemIcon>
|
|
|
|
<Person />
|
|
|
|
</ListItemIcon>
|
|
|
|
<b>{session.username()}</b>
|
|
|
|
</MenuItem>
|
|
|
|
<Divider />
|
2022-12-16 16:07:04 +13:00
|
|
|
<MenuItem onClick={() => navigate(routes.settings)}>
|
2022-12-15 17:43:43 +13:00
|
|
|
<ListItemIcon>
|
|
|
|
<Settings fontSize="small" />
|
|
|
|
</ListItemIcon>
|
2022-12-29 20:32:05 +13:00
|
|
|
{t("action_bar_profile_settings")}
|
2022-12-15 17:43:43 +13:00
|
|
|
</MenuItem>
|
|
|
|
<MenuItem onClick={handleLogout}>
|
|
|
|
<ListItemIcon>
|
|
|
|
<Logout fontSize="small" />
|
|
|
|
</ListItemIcon>
|
2022-12-29 20:32:05 +13:00
|
|
|
{t("action_bar_profile_logout")}
|
2022-12-15 17:43:43 +13:00
|
|
|
</MenuItem>
|
2022-12-29 20:32:05 +13:00
|
|
|
</PopupMenu>
|
2022-12-03 09:37:48 +13:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-02-26 06:46:22 +13:00
|
|
|
export default ActionBar;
|