mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-06-03 05:34:23 -04:00
Clean up to prepare headers
This commit is contained in:
Zoe Roux
parent
be6551888e
commit
a213c39445
157
front/packages/ui/src/browse/header.tsx
Normal file
157
front/packages/ui/src/browse/header.tsx
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
/*
|
||||||
|
* Kyoo - A portable and vast media library solution.
|
||||||
|
* Copyright (c) Kyoo.
|
||||||
|
*
|
||||||
|
* See AUTHORS.md and LICENSE file in the project root for full license information.
|
||||||
|
*
|
||||||
|
* Kyoo is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* any later version.
|
||||||
|
*
|
||||||
|
* Kyoo is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// const SortByMenu = ({
|
||||||
|
// sortKey,
|
||||||
|
// setSort,
|
||||||
|
// sortOrd,
|
||||||
|
// setSortOrd,
|
||||||
|
// anchor,
|
||||||
|
// onClose,
|
||||||
|
// }: {
|
||||||
|
// sortKey: SortBy;
|
||||||
|
// setSort: (sort: SortBy) => void;
|
||||||
|
// sortOrd: SortOrd;
|
||||||
|
// setSortOrd: (sort: SortOrd) => void;
|
||||||
|
// anchor: HTMLElement;
|
||||||
|
// onClose: () => void;
|
||||||
|
// }) => {
|
||||||
|
// const router = useRouter();
|
||||||
|
// const { t } = useTranslation("browse");
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <Menu
|
||||||
|
// id="sortby-menu"
|
||||||
|
// MenuListProps={{
|
||||||
|
// "aria-labelledby": "sortby",
|
||||||
|
// }}
|
||||||
|
// anchorEl={anchor}
|
||||||
|
// open={!!anchor}
|
||||||
|
// onClose={onClose}
|
||||||
|
// >
|
||||||
|
// {Object.values(SortBy).map((x) => (
|
||||||
|
// <MenuItem
|
||||||
|
// key={x}
|
||||||
|
// selected={sortKey === x}
|
||||||
|
// onClick={() => setSort(x)}
|
||||||
|
// component={Link}
|
||||||
|
// to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
|
||||||
|
// shallow
|
||||||
|
// replace
|
||||||
|
// >
|
||||||
|
// <ListItemText>{t(`browse.sortkey.${x}`)}</ListItemText>
|
||||||
|
// </MenuItem>
|
||||||
|
// ))}
|
||||||
|
// <Divider />
|
||||||
|
// <MenuItem
|
||||||
|
// selected={sortOrd === SortOrd.Asc}
|
||||||
|
// onClick={() => setSortOrd(SortOrd.Asc)}
|
||||||
|
// component={Link}
|
||||||
|
// to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
|
||||||
|
// shallow
|
||||||
|
// replace
|
||||||
|
// >
|
||||||
|
// <ListItemIcon>
|
||||||
|
// <South fontSize="small" />
|
||||||
|
// </ListItemIcon>
|
||||||
|
// <ListItemText>{t("browse.sortord.asc")}</ListItemText>
|
||||||
|
// </MenuItem>
|
||||||
|
// <MenuItem
|
||||||
|
// selected={sortOrd === SortOrd.Desc}
|
||||||
|
// onClick={() => setSortOrd(SortOrd.Desc)}
|
||||||
|
// component={Link}
|
||||||
|
// to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
|
||||||
|
// shallow
|
||||||
|
// replace
|
||||||
|
// >
|
||||||
|
// <ListItemIcon>
|
||||||
|
// <North fontSize="small" />
|
||||||
|
// </ListItemIcon>
|
||||||
|
// <ListItemText>{t("browse.sortord.desc")}</ListItemText>
|
||||||
|
// </MenuItem>
|
||||||
|
// </Menu>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
|
|
||||||
|
// const BrowseSettings = ({
|
||||||
|
// sortKey,
|
||||||
|
// setSort,
|
||||||
|
// sortOrd,
|
||||||
|
// setSortOrd,
|
||||||
|
// layout,
|
||||||
|
// setLayout,
|
||||||
|
// }: {
|
||||||
|
// sortKey: SortBy;
|
||||||
|
// setSort: (sort: SortBy) => void;
|
||||||
|
// sortOrd: SortOrd;
|
||||||
|
// setSortOrd: (sort: SortOrd) => void;
|
||||||
|
// layout: Layout;
|
||||||
|
// setLayout: (layout: Layout) => void;
|
||||||
|
// }) => {
|
||||||
|
// const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
|
||||||
|
// const { t } = useTranslation("browse");
|
||||||
|
|
||||||
|
// const switchViewTitle =
|
||||||
|
// layout === Layout.Grid ? t("browse.switchToList") : t("browse.switchToGrid");
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <Box sx={{ display: "flex", justifyContent: "space-around" }}>
|
||||||
|
// <ButtonGroup sx={{ m: 1 }}>
|
||||||
|
// <Button disabled>
|
||||||
|
// <FilterList />
|
||||||
|
// </Button>
|
||||||
|
// <Tooltip title={t("browse.sortby-tt")}>
|
||||||
|
// <Button
|
||||||
|
// id="sortby"
|
||||||
|
// aria-label={t("browse.sortby-tt")}
|
||||||
|
// aria-controls={sortAnchor ? "sorby-menu" : undefined}
|
||||||
|
// aria-haspopup="true"
|
||||||
|
// aria-expanded={sortAnchor ? "true" : undefined}
|
||||||
|
// onClick={(event) => setSortAnchor(event.currentTarget)}
|
||||||
|
// >
|
||||||
|
// <Sort />
|
||||||
|
// {t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
|
||||||
|
// {sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
|
||||||
|
// </Button>
|
||||||
|
// </Tooltip>
|
||||||
|
// <Tooltip title={switchViewTitle}>
|
||||||
|
// <Button
|
||||||
|
// onClick={() => setLayout(layout === Layout.List ? Layout.Grid : Layout.List)}
|
||||||
|
// aria-label={switchViewTitle}
|
||||||
|
// >
|
||||||
|
// {layout === Layout.List ? <GridView /> : <ViewList />}
|
||||||
|
// </Button>
|
||||||
|
// </Tooltip>
|
||||||
|
// </ButtonGroup>
|
||||||
|
// </Box>
|
||||||
|
// {sortAnchor && (
|
||||||
|
// <SortByMenu
|
||||||
|
// sortKey={sortKey}
|
||||||
|
// sortOrd={sortOrd}
|
||||||
|
// setSort={setSort}
|
||||||
|
// setSortOrd={setSortOrd}
|
||||||
|
// anchor={sortAnchor}
|
||||||
|
// onClose={() => setSortAnchor(null)}
|
||||||
|
// />
|
||||||
|
// )}
|
||||||
|
// </>
|
||||||
|
// );
|
||||||
|
// };
|
||||||
@ -73,10 +73,11 @@ const query = (
|
|||||||
export const BrowsePage: QueryPage<{ slug?: string }> = ({ slug }) => {
|
export const BrowsePage: QueryPage<{ slug?: string }> = ({ slug }) => {
|
||||||
const [sortKey, setSort] = useState(SortBy.Name);
|
const [sortKey, setSort] = useState(SortBy.Name);
|
||||||
const [sortOrd, setSortOrd] = useState(SortOrd.Asc);
|
const [sortOrd, setSortOrd] = useState(SortOrd.Asc);
|
||||||
const [layout, setLayout] = useState(Layout.List);
|
const [layout, setLayout] = useState(Layout.Grid);
|
||||||
|
|
||||||
const LayoutComponent = layout === Layout.Grid ? ItemGrid : ItemList;
|
const LayoutComponent = layout === Layout.Grid ? ItemGrid : ItemList;
|
||||||
|
|
||||||
|
// TODO list header to seet sort things, filter and layout.
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* <BrowseSettings */}
|
{/* <BrowseSettings */}
|
||||||
|
|||||||
@ -1,188 +0,0 @@
|
|||||||
/*
|
|
||||||
* Kyoo - A portable and vast media library solution.
|
|
||||||
* Copyright (c) Kyoo.
|
|
||||||
*
|
|
||||||
* See AUTHORS.md and LICENSE file in the project root for full license information.
|
|
||||||
*
|
|
||||||
* Kyoo is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU General Public License as published by
|
|
||||||
* the Free Software Foundation, either version 3 of the License, or
|
|
||||||
* any later version.
|
|
||||||
*
|
|
||||||
* Kyoo is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU General Public License
|
|
||||||
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const Item = ({ item, layout }: { item?: LibraryItem; layout: Layout }) => {
|
|
||||||
let href;
|
|
||||||
if (item?.type === ItemType.Movie) href = `/movie/${item.slug}`;
|
|
||||||
else if (item?.type === ItemType.Show) href = `/show/${item.slug}`;
|
|
||||||
else if (item?.type === ItemType.Collection) href = `/collection/${item.slug}`;
|
|
||||||
|
|
||||||
switch (layout) {
|
|
||||||
case Layout.Grid:
|
|
||||||
return (
|
|
||||||
<ItemGrid
|
|
||||||
href={href}
|
|
||||||
name={item?.name}
|
|
||||||
subtitle={item && item.type !== ItemType.Collection ? getDisplayDate(item) : null}
|
|
||||||
poster={item?.poster}
|
|
||||||
loading={!item}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
case Layout.List:
|
|
||||||
return (
|
|
||||||
<ItemList
|
|
||||||
href={href}
|
|
||||||
name={item?.name}
|
|
||||||
subtitle={item && item.type !== ItemType.Collection ? getDisplayDate(item) : null}
|
|
||||||
poster={item?.poster}
|
|
||||||
thumbnail={item?.thumbnail}
|
|
||||||
loading={!item}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const SortByMenu = ({
|
|
||||||
sortKey,
|
|
||||||
setSort,
|
|
||||||
sortOrd,
|
|
||||||
setSortOrd,
|
|
||||||
anchor,
|
|
||||||
onClose,
|
|
||||||
}: {
|
|
||||||
sortKey: SortBy;
|
|
||||||
setSort: (sort: SortBy) => void;
|
|
||||||
sortOrd: SortOrd;
|
|
||||||
setSortOrd: (sort: SortOrd) => void;
|
|
||||||
anchor: HTMLElement;
|
|
||||||
onClose: () => void;
|
|
||||||
}) => {
|
|
||||||
const router = useRouter();
|
|
||||||
const { t } = useTranslation("browse");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu
|
|
||||||
id="sortby-menu"
|
|
||||||
MenuListProps={{
|
|
||||||
"aria-labelledby": "sortby",
|
|
||||||
}}
|
|
||||||
anchorEl={anchor}
|
|
||||||
open={!!anchor}
|
|
||||||
onClose={onClose}
|
|
||||||
>
|
|
||||||
{Object.values(SortBy).map((x) => (
|
|
||||||
<MenuItem
|
|
||||||
key={x}
|
|
||||||
selected={sortKey === x}
|
|
||||||
onClick={() => setSort(x)}
|
|
||||||
component={Link}
|
|
||||||
to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
|
|
||||||
shallow
|
|
||||||
replace
|
|
||||||
>
|
|
||||||
<ListItemText>{t(`browse.sortkey.${x}`)}</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
<Divider />
|
|
||||||
<MenuItem
|
|
||||||
selected={sortOrd === SortOrd.Asc}
|
|
||||||
onClick={() => setSortOrd(SortOrd.Asc)}
|
|
||||||
component={Link}
|
|
||||||
to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
|
|
||||||
shallow
|
|
||||||
replace
|
|
||||||
>
|
|
||||||
<ListItemIcon>
|
|
||||||
<South fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>{t("browse.sortord.asc")}</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
selected={sortOrd === SortOrd.Desc}
|
|
||||||
onClick={() => setSortOrd(SortOrd.Desc)}
|
|
||||||
component={Link}
|
|
||||||
to={{ query: { ...router.query, sortBy: `${sortKey}-${sortOrd}` } }}
|
|
||||||
shallow
|
|
||||||
replace
|
|
||||||
>
|
|
||||||
<ListItemIcon>
|
|
||||||
<North fontSize="small" />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>{t("browse.sortord.desc")}</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const BrowseSettings = ({
|
|
||||||
sortKey,
|
|
||||||
setSort,
|
|
||||||
sortOrd,
|
|
||||||
setSortOrd,
|
|
||||||
layout,
|
|
||||||
setLayout,
|
|
||||||
}: {
|
|
||||||
sortKey: SortBy;
|
|
||||||
setSort: (sort: SortBy) => void;
|
|
||||||
sortOrd: SortOrd;
|
|
||||||
setSortOrd: (sort: SortOrd) => void;
|
|
||||||
layout: Layout;
|
|
||||||
setLayout: (layout: Layout) => void;
|
|
||||||
}) => {
|
|
||||||
const [sortAnchor, setSortAnchor] = useState<HTMLElement | null>(null);
|
|
||||||
const { t } = useTranslation("browse");
|
|
||||||
|
|
||||||
const switchViewTitle =
|
|
||||||
layout === Layout.Grid ? t("browse.switchToList") : t("browse.switchToGrid");
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Box sx={{ display: "flex", justifyContent: "space-around" }}>
|
|
||||||
<ButtonGroup sx={{ m: 1 }}>
|
|
||||||
<Button disabled>
|
|
||||||
<FilterList />
|
|
||||||
</Button>
|
|
||||||
<Tooltip title={t("browse.sortby-tt")}>
|
|
||||||
<Button
|
|
||||||
id="sortby"
|
|
||||||
aria-label={t("browse.sortby-tt")}
|
|
||||||
aria-controls={sortAnchor ? "sorby-menu" : undefined}
|
|
||||||
aria-haspopup="true"
|
|
||||||
aria-expanded={sortAnchor ? "true" : undefined}
|
|
||||||
onClick={(event) => setSortAnchor(event.currentTarget)}
|
|
||||||
>
|
|
||||||
<Sort />
|
|
||||||
{t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
|
|
||||||
{sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title={switchViewTitle}>
|
|
||||||
<Button
|
|
||||||
onClick={() => setLayout(layout === Layout.List ? Layout.Grid : Layout.List)}
|
|
||||||
aria-label={switchViewTitle}
|
|
||||||
>
|
|
||||||
{layout === Layout.List ? <GridView /> : <ViewList />}
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</ButtonGroup>
|
|
||||||
</Box>
|
|
||||||
{sortAnchor && (
|
|
||||||
<SortByMenu
|
|
||||||
sortKey={sortKey}
|
|
||||||
sortOrd={sortOrd}
|
|
||||||
setSort={setSort}
|
|
||||||
setSortOrd={setSortOrd}
|
|
||||||
anchor={sortAnchor}
|
|
||||||
onClose={() => setSortAnchor(null)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Loading…
x
Reference in New Issue
Block a user