105 lines
3.4 KiB
JavaScript
105 lines
3.4 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import * as MODALS from 'constants/modal_types';
|
|
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
|
|
import Icon from 'component/common/icon';
|
|
import * as PAGES from 'constants/pages';
|
|
import { useHistory } from 'react-router';
|
|
import { formatLbryUrlForWeb } from 'util/url';
|
|
import { COLLECTIONS_CONSTS } from 'lbry-redux';
|
|
|
|
type Props = {
|
|
inline?: boolean,
|
|
doOpenModal: (string, {}) => void,
|
|
collectionName?: string,
|
|
collectionId: string,
|
|
playNextUri: string,
|
|
doSetPlayingUri: ({ uri: ?string }) => void,
|
|
doToggleShuffleList: (string, string, boolean, boolean) => void,
|
|
};
|
|
|
|
function CollectionMenuList(props: Props) {
|
|
const {
|
|
inline = false,
|
|
collectionId,
|
|
collectionName,
|
|
doOpenModal,
|
|
playNextUri,
|
|
doSetPlayingUri,
|
|
doToggleShuffleList,
|
|
} = props;
|
|
const [doShuffle, setDoShuffle] = React.useState(false);
|
|
|
|
const { push } = useHistory();
|
|
|
|
React.useEffect(() => {
|
|
if (playNextUri && doShuffle) {
|
|
const collectionParams = new URLSearchParams();
|
|
collectionParams.set(COLLECTIONS_CONSTS.COLLECTION_ID, collectionId);
|
|
const navigateUrl = formatLbryUrlForWeb(playNextUri) + `?` + collectionParams.toString();
|
|
setDoShuffle(false);
|
|
doSetPlayingUri({ uri: playNextUri });
|
|
push(navigateUrl);
|
|
}
|
|
}, [push, doSetPlayingUri, collectionId, playNextUri, doShuffle]);
|
|
|
|
return (
|
|
<Menu>
|
|
<MenuButton
|
|
className={classnames('menu__button', { 'claim__menu-button': !inline, 'claim__menu-button--inline': inline })}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}}
|
|
>
|
|
<Icon size={20} icon={ICONS.MORE_VERTICAL} />
|
|
</MenuButton>
|
|
<MenuList className="menu__list">
|
|
{collectionId && collectionName && (
|
|
<>
|
|
<MenuItem className="comment__menu-option" onSelect={() => push(`/$/${PAGES.LIST}/${collectionId}`)}>
|
|
<a className="menu__link" href={`/$/${PAGES.LIST}/${collectionId}`}>
|
|
<Icon aria-hidden icon={ICONS.VIEW} />
|
|
{__('View List')}
|
|
</a>
|
|
</MenuItem>
|
|
<MenuItem
|
|
className="comment__menu-option"
|
|
onSelect={() => {
|
|
doToggleShuffleList('', collectionId, true, true);
|
|
setDoShuffle(true);
|
|
}}
|
|
>
|
|
<div className="menu__link">
|
|
<Icon aria-hidden icon={ICONS.SHUFFLE} />
|
|
{__('Shuffle Play')}
|
|
</div>
|
|
</MenuItem>
|
|
<MenuItem
|
|
className="comment__menu-option"
|
|
onSelect={() => push(`/$/${PAGES.LIST}/${collectionId}?view=edit`)}
|
|
>
|
|
<div className="menu__link">
|
|
<Icon aria-hidden icon={ICONS.PUBLISH} />
|
|
{__('Publish List')}
|
|
</div>
|
|
</MenuItem>
|
|
<MenuItem
|
|
className="comment__menu-option"
|
|
onSelect={() => doOpenModal(MODALS.COLLECTION_DELETE, { collectionId })}
|
|
>
|
|
<div className="menu__link">
|
|
<Icon aria-hidden icon={ICONS.DELETE} />
|
|
{__('Delete List')}
|
|
</div>
|
|
</MenuItem>
|
|
</>
|
|
)}
|
|
</MenuList>
|
|
</Menu>
|
|
);
|
|
}
|
|
|
|
export default CollectionMenuList;
|