added Sean's changes back in
This commit is contained in:
parent
5e38108e3d
commit
895154dab9
4 changed files with 40 additions and 21 deletions
|
@ -9,7 +9,7 @@ const MAX_HISTORY_SIZE = 12;
|
|||
type Props = {
|
||||
isBackward: boolean,
|
||||
history: {
|
||||
entries: { key: string, title: string }[],
|
||||
entries: Array<{ key: string, title: string, pathname: string }>,
|
||||
go: number => void,
|
||||
goBack: () => void,
|
||||
goForward: () => void,
|
||||
|
@ -44,19 +44,22 @@ const NavigationButton = (props: Props) => {
|
|||
|
||||
// creates an <li> intended for the button's <ul>
|
||||
const makeItem = useCallback(
|
||||
(entry, index) => {
|
||||
(entry: { pathname: string, title: string, key: string }, index: number) => {
|
||||
// difference between the current index and the index of the entry
|
||||
const backwardDif = index - (currentIndex < MAX_HISTORY_SIZE ? currentIndex : MAX_HISTORY_SIZE);
|
||||
const forwardDif = index + 1;
|
||||
return (
|
||||
<li
|
||||
className="header__navigation-button"
|
||||
role="link"
|
||||
key={entry.key}
|
||||
onMouseDown={() => {
|
||||
setShowHistory(false);
|
||||
go(isBackward ? backwardDif : forwardDif);
|
||||
}}
|
||||
>
|
||||
{entry.title}
|
||||
<span>{entry.title}</span>
|
||||
<span className="header__navigation-button-help">{entry.pathname === '/' ? __('Home') : entry.pathname}</span>
|
||||
</li>
|
||||
);
|
||||
},
|
||||
|
@ -81,7 +84,7 @@ const NavigationButton = (props: Props) => {
|
|||
iconSize={18}
|
||||
disabled={slicedEntries.length === 0}
|
||||
/>
|
||||
{showHistory && <ul className={'header__navigaiton-dropdown'}>{slicedEntries.map(makeItem)}</ul>}
|
||||
{showHistory && <ul className={'header__navigation-dropdown'}>{slicedEntries.map(makeItem)}</ul>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -88,17 +88,22 @@ function AppRouter(props: Props) {
|
|||
uri,
|
||||
title,
|
||||
} = props;
|
||||
const { channelName, streamName } = parseURI(uri);
|
||||
const { entries } = history;
|
||||
const entryIndex = history.index;
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof title !== 'undefined' && title !== '') {
|
||||
document.title = title;
|
||||
} else if (typeof streamName !== 'undefined' && streamName !== 'undefined' && streamName !== '') {
|
||||
document.title = streamName;
|
||||
} else if (typeof channelName !== 'undefined' && channelName !== '') {
|
||||
document.title = channelName;
|
||||
if (uri) {
|
||||
const { channelName, streamName } = parseURI(uri);
|
||||
|
||||
if (typeof title !== 'undefined' && title !== '') {
|
||||
document.title = title;
|
||||
} else if (streamName) {
|
||||
document.title = streamName;
|
||||
} else if (channelName) {
|
||||
document.title = channelName;
|
||||
} else {
|
||||
document.title = IS_WEB ? SITE_TITLE : 'LBRY';
|
||||
}
|
||||
} else {
|
||||
document.title = IS_WEB ? SITE_TITLE : 'LBRY';
|
||||
}
|
||||
|
@ -109,7 +114,7 @@ function AppRouter(props: Props) {
|
|||
return () => {
|
||||
document.title = IS_WEB ? SITE_TITLE : 'LBRY';
|
||||
};
|
||||
}, [channelName, entries, entryIndex, streamName, title]);
|
||||
}, [entries, entryIndex, title, uri]);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, currentScroll);
|
||||
|
|
|
@ -148,19 +148,28 @@
|
|||
margin: 0 var(--spacing-medium);
|
||||
}
|
||||
|
||||
.header__navigaiton-dropdown {
|
||||
.header__navigation-dropdown {
|
||||
@extend .menu__list--header;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
background-color: var(--color-header-background);
|
||||
margin-top: 19px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
.header__navigation-button {
|
||||
margin: 0;
|
||||
padding: var(--spacing-miniscule) var(--spacing-medium);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-menu-background--active);
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--color-menu-background--active);
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigation-button-help {
|
||||
@extend .help;
|
||||
margin-top: 0;
|
||||
margin-left: var(--spacing-small);
|
||||
}
|
||||
|
|
|
@ -55,6 +55,8 @@
|
|||
margin-left: calc(var(--spacing-medium) * -1);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
animation: menu-animate-in var(--animation-duration) var(--animation-style);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
|
|
Loading…
Reference in a new issue