2575c5d448
* Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click
58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import React, { useRef } from 'react';
|
|
import Button from 'component/button';
|
|
import useHover from 'effects/use-hover';
|
|
import * as COLLECTIONS_CONSTS from 'constants/collections';
|
|
|
|
type Props = {
|
|
uri: string,
|
|
focusable: boolean,
|
|
hasClaimInWatchLater: boolean,
|
|
doToast: ({ message: string }) => void,
|
|
doCollectionEdit: (string, any) => void,
|
|
};
|
|
|
|
function FileWatchLaterLink(props: Props) {
|
|
const { uri, hasClaimInWatchLater, doToast, doCollectionEdit, focusable = true } = props;
|
|
const buttonRef = useRef();
|
|
let isHovering = useHover(buttonRef);
|
|
|
|
function handleWatchLater(e) {
|
|
e.preventDefault();
|
|
doToast({
|
|
message: hasClaimInWatchLater ? __('Item removed from Watch Later') : __('Item added to Watch Later'),
|
|
linkText: !hasClaimInWatchLater && __('See All'),
|
|
linkTarget: !hasClaimInWatchLater && '/list/watchlater',
|
|
});
|
|
doCollectionEdit(COLLECTIONS_CONSTS.WATCH_LATER_ID, {
|
|
uris: [uri],
|
|
remove: hasClaimInWatchLater,
|
|
type: 'playlist',
|
|
});
|
|
}
|
|
|
|
// text that will show if you keep cursor over button
|
|
const title = hasClaimInWatchLater ? __('Remove from Watch Later') : __('Add to Watch Later');
|
|
|
|
// label that is shown after hover
|
|
const label = !hasClaimInWatchLater ? __('Add') : __('Added');
|
|
|
|
return (
|
|
<Button
|
|
ref={buttonRef}
|
|
requiresAuth={IS_WEB}
|
|
title={title}
|
|
label={label}
|
|
className="button--file-action"
|
|
icon={
|
|
(hasClaimInWatchLater && (isHovering ? ICONS.REMOVE : ICONS.COMPLETED)) ||
|
|
(isHovering ? ICONS.COMPLETED : ICONS.TIME)
|
|
}
|
|
onClick={(e) => handleWatchLater(e)}
|
|
tabIndex={focusable ? 0 : -1}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default FileWatchLaterLink;
|