Sidebar shortcuts to built-in lists
Ticket: 1107
This commit is contained in:
parent
bc3c56b84b
commit
5297978526
2 changed files with 30 additions and 6 deletions
|
@ -4,7 +4,7 @@ import * as PAGES from 'constants/pages';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import * as KEYCODES from 'constants/keycodes';
|
import * as KEYCODES from 'constants/keycodes';
|
||||||
import { SIDEBAR_SUBS_DISPLAYED } from 'constants/subscriptions';
|
import { SIDEBAR_SUBS_DISPLAYED } from 'constants/subscriptions';
|
||||||
import React, { useEffect } from 'react';
|
import React from 'react';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import ClaimPreviewTitle from 'component/claimPreviewTitle';
|
import ClaimPreviewTitle from 'component/claimPreviewTitle';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
@ -64,6 +64,20 @@ const NOTIFICATIONS = {
|
||||||
hideForUnauth: true,
|
hideForUnauth: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const WATCH_LATER = {
|
||||||
|
title: 'Watch Later',
|
||||||
|
link: `/$/${PAGES.LIST}/watchlater`,
|
||||||
|
icon: ICONS.TIME,
|
||||||
|
hideForUnauth: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
const FAVORITES = {
|
||||||
|
title: 'Favorites',
|
||||||
|
link: `/$/${PAGES.LIST}/favorites`,
|
||||||
|
icon: ICONS.STAR,
|
||||||
|
hideForUnauth: true,
|
||||||
|
};
|
||||||
|
|
||||||
const PLAYLISTS = {
|
const PLAYLISTS = {
|
||||||
title: 'Lists',
|
title: 'Lists',
|
||||||
link: `/$/${PAGES.LISTS}`,
|
link: `/$/${PAGES.LISTS}`,
|
||||||
|
@ -421,7 +435,7 @@ function SideNavigation(props: Props) {
|
||||||
return () => window.removeEventListener('keydown', handleKeydown);
|
return () => window.removeEventListener('keydown', handleKeydown);
|
||||||
}, [sidebarOpen, setSidebarOpen, isAbsolute]);
|
}, [sidebarOpen, setSidebarOpen, isAbsolute]);
|
||||||
|
|
||||||
useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!window.Optanon) {
|
if (!window.Optanon) {
|
||||||
const gdprDiv = document.getElementById('gdprSidebarLink');
|
const gdprDiv = document.getElementById('gdprSidebarLink');
|
||||||
if (gdprDiv) {
|
if (gdprDiv) {
|
||||||
|
@ -502,10 +516,20 @@ function SideNavigation(props: Props) {
|
||||||
>
|
>
|
||||||
{getLink(getHomeButton(doClearClaimSearch))}
|
{getLink(getHomeButton(doClearClaimSearch))}
|
||||||
{getLink(RECENT_FROM_FOLLOWING)}
|
{getLink(RECENT_FROM_FOLLOWING)}
|
||||||
{getLink(PLAYLISTS)}
|
|
||||||
{!odyseeMembership && getLink(PREMIUM)}
|
{!odyseeMembership && getLink(PREMIUM)}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<ul
|
||||||
|
className={classnames('navigation-links', {
|
||||||
|
'navigation-links--micro': showMicroMenu,
|
||||||
|
'navigation-links--absolute': shouldRenderLargeMenu,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{!showMicroMenu && getLink(WATCH_LATER)}
|
||||||
|
{!showMicroMenu && getLink(FAVORITES)}
|
||||||
|
{getLink(PLAYLISTS)}
|
||||||
|
</ul>
|
||||||
|
|
||||||
<ul
|
<ul
|
||||||
className={classnames('navigation-links', {
|
className={classnames('navigation-links', {
|
||||||
'navigation-links--micro': showMicroMenu,
|
'navigation-links--micro': showMicroMenu,
|
||||||
|
@ -514,7 +538,7 @@ function SideNavigation(props: Props) {
|
||||||
>
|
>
|
||||||
{EXTRA_SIDEBAR_LINKS && (
|
{EXTRA_SIDEBAR_LINKS && (
|
||||||
<>
|
<>
|
||||||
{/* $FlowFixMe -- GetLinksData should fix it's data type */}
|
{/* $FlowFixMe: GetLinksData type needs an update */}
|
||||||
{EXTRA_SIDEBAR_LINKS.map((linkProps) => getLink(linkProps))}
|
{EXTRA_SIDEBAR_LINKS.map((linkProps) => getLink(linkProps))}
|
||||||
{!wildWestDisabled && getLink(WILD_WEST)}
|
{!wildWestDisabled && getLink(WILD_WEST)}
|
||||||
</>
|
</>
|
||||||
|
@ -546,7 +570,7 @@ function SideNavigation(props: Props) {
|
||||||
type SubItemProps = {
|
type SubItemProps = {
|
||||||
subscription: Subscription,
|
subscription: Subscription,
|
||||||
odyseeMembershipByUri: (uri: string) => string,
|
odyseeMembershipByUri: (uri: string) => string,
|
||||||
}
|
};
|
||||||
|
|
||||||
function SubscriptionListItem(props: SubItemProps) {
|
function SubscriptionListItem(props: SubItemProps) {
|
||||||
const { subscription, odyseeMembershipByUri } = props;
|
const { subscription, odyseeMembershipByUri } = props;
|
||||||
|
|
|
@ -129,7 +129,7 @@
|
||||||
transform: translateX(calc(var(--side-nav-width--micro) - var(--side-nav-width)));
|
transform: translateX(calc(var(--side-nav-width--micro) - var(--side-nav-width)));
|
||||||
|
|
||||||
.navigation-inner-container {
|
.navigation-inner-container {
|
||||||
ul:nth-child(3) {
|
ul:nth-child(4) {
|
||||||
border-bottom: unset;
|
border-bottom: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue