-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor
manage code and add series details page
This generalizes the `Nav` and `Details` code that was used for videos, and repurposes it for series as well. With these changes, it should also be fairly easy to add this for playlists later on.
- Loading branch information
Showing
13 changed files
with
598 additions
and
823 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import i18n from "../../../i18n"; | ||
| import { makeManageSeriesRoute } from "./Shared"; | ||
| import { ManageSeriesRoute } from "."; | ||
| import { DirectSeriesRoute } from "../../Series"; | ||
| import { DetailsPage, UpdatedCreatedInfo, DirectLink, MetadataSection } from "../Shared/Details"; | ||
|
|
||
|
|
||
| export const ManageSeriesDetailsRoute = makeManageSeriesRoute( | ||
| "details", | ||
| "", | ||
| series => <DetailsPage | ||
| pageTitle="manage.my-series.details.title" | ||
| asset={{ | ||
| ...series, | ||
| description: series.syncedData?.description, | ||
| urlProps: { | ||
| url: new URL(DirectSeriesRoute.url({ seriesId: series.id }), document.baseURI), | ||
| }, | ||
| }} | ||
| breadcrumb={{ | ||
| label: i18n.t("manage.my-series.title"), | ||
| link: ManageSeriesRoute.url, | ||
| }} | ||
| sections={series => [ | ||
| <UpdatedCreatedInfo key="created-info" asset={series} />, | ||
| <DirectLink key="direct-link" asset={series} />, | ||
| <div key="metadata" css={{ marginBottom: 32 }}> | ||
| <MetadataSection asset={series} /> | ||
| </div>, | ||
| ]} | ||
| />, | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| import { useTranslation } from "react-i18next"; | ||
| import { LuShieldCheck, LuPenLine, LuEye } from "react-icons/lu"; | ||
| import { graphql } from "react-relay"; | ||
|
|
||
| import { RootLoader } from "../../../layout/Root"; | ||
| import { makeRoute, Route } from "../../../rauta"; | ||
| import { loadQuery } from "../../../relay"; | ||
| import { NotFound } from "../../NotFound"; | ||
| import { b64regex } from "../../util"; | ||
| import { seriesId, keyOfId } from "../../../util"; | ||
| import CONFIG from "../../../config"; | ||
| import { ManageSeriesRoute, SeriesThumbnail } from "."; | ||
| import { SharedSeriesManageQuery } from "./__generated__/SharedSeriesManageQuery.graphql"; | ||
| import { DirectSeriesRoute } from "../../Series"; | ||
| import { BackLink, ManageAssetNav, SharedManageAssetNavProps } from "../Shared/Nav"; | ||
| import { COLORS } from "../../../color"; | ||
|
|
||
|
|
||
| export const PAGE_WIDTH = 1100; | ||
|
|
||
| export type QueryResponse = SharedSeriesManageQuery["response"]; | ||
| export type Series = NonNullable<QueryResponse["series"]>; | ||
|
|
||
| type ManageSeriesSubPageType = "details" | "acl"; | ||
|
|
||
| /** Helper around `makeRoute` for manage single series subpages. */ | ||
| export const makeManageSeriesRoute = ( | ||
| page: ManageSeriesSubPageType, | ||
| path: string, | ||
| render: (series: Series, data: QueryResponse) => JSX.Element, | ||
| ): Route & { url: (args: { seriesId: string }) => string } => ( | ||
| makeRoute({ | ||
| url: ({ seriesId }: { seriesId: string }) => `/~manage/series/${keyOfId(seriesId)}/${path}`, | ||
| match: url => { | ||
| const regex = new RegExp(`^/~manage/series/(${b64regex}+)${path}/?$`, "u"); | ||
| const params = regex.exec(url.pathname); | ||
| if (params === null) { | ||
| return null; | ||
| } | ||
|
|
||
| const id = decodeURIComponent(params[1]); | ||
| const queryRef = loadQuery<SharedSeriesManageQuery>(query, { | ||
| id: seriesId(id), | ||
| }); | ||
|
|
||
| return { | ||
| render: () => <RootLoader | ||
| {...{ query, queryRef }} | ||
| noindex | ||
| nav={data => data.series ? [ | ||
| <BackLink | ||
| key={1} | ||
| url={ManageSeriesRoute.url} | ||
| title="manage.my-series.title" | ||
| />, | ||
| <ManageSeriesNav key={2} series={data.series} active={page} />, | ||
| ] : []} | ||
| render={data => { | ||
| if (data.series == null) { | ||
| return <NotFound kind="series" />; | ||
| } | ||
| return render(data.series, data); | ||
| }} | ||
| />, | ||
| dispose: () => queryRef.dispose(), | ||
| }; | ||
| }, | ||
| }) | ||
| ); | ||
|
|
||
|
|
||
| const query = graphql` | ||
| query SharedSeriesManageQuery($id: ID!) { | ||
| ...UserData | ||
| ...AccessKnownRolesData | ||
| series: seriesById(id: $id) { | ||
| id | ||
| title | ||
| created | ||
| updated | ||
| syncedData { description } | ||
| entries { | ||
| __typename | ||
| ...on AuthorizedEvent { | ||
| isLive | ||
| syncedData { thumbnail audioOnly } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| `; | ||
|
|
||
|
|
||
| type ManageSeriesNavProps = SharedManageAssetNavProps & { | ||
| series: Series; | ||
| }; | ||
|
|
||
| const ManageSeriesNav: React.FC<ManageSeriesNavProps> = ({ series, active }) => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| if (series == null) { | ||
| return null; | ||
| } | ||
|
|
||
| const id = keyOfId(series.id); | ||
|
|
||
| const navEntries = [ | ||
| { | ||
| url: `/~manage/series/${id}`, | ||
| page: "details", | ||
| body: <><LuPenLine />{t("manage.my-series.details.title")}</>, | ||
| }, | ||
| ]; | ||
|
|
||
| if (CONFIG.allowAclEdit) { | ||
| navEntries.splice(1, 0, { | ||
| url: `/~manage/series/${id}/access`, | ||
| page: "acl", | ||
| body: <><LuShieldCheck />{t("manage.shared.acl.title")}</>, | ||
| }); | ||
| } | ||
|
|
||
| const link = DirectSeriesRoute.url({ seriesId: id }); | ||
| const title = series.title; | ||
| const ariaLabel = t("series.series-page", { series: series.title }); | ||
|
|
||
| const additionalStyles = { | ||
| padding: 8, | ||
| borderBottom: `2px solid ${COLORS.neutral05}`, | ||
| }; | ||
|
|
||
| const thumbnail = <> | ||
| <LuEye /> | ||
| <SeriesThumbnail {...{ series }} /> | ||
| </>; | ||
|
|
||
| return <ManageAssetNav {...{ | ||
| active, | ||
| link, | ||
| ariaLabel, | ||
| title, | ||
| thumbnail, | ||
| navEntries, | ||
| additionalStyles, | ||
| }} />; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.