impress/app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js

import React from "react";
import { ClassNames } from "@emotion/react";
import {
	Box,
	Button,
	DarkMode,
	Flex,
	FormControl,
	FormHelperText,
	FormLabel,
	HStack,
	IconButton,
	ListItem,
	Menu,
	MenuItem,
	MenuList,
	Popover,
	PopoverArrow,
	PopoverBody,
	PopoverContent,
	PopoverTrigger,
	Portal,
	Stack,
	Switch,
	Tooltip,
	UnorderedList,
	useBreakpointValue,
	useClipboard,
	useToast,
} from "@chakra-ui/react";
import {
	ArrowBackIcon,
	CheckIcon,
	ChevronDownIcon,
	DownloadIcon,
	LinkIcon,
	SettingsIcon,
} from "@chakra-ui/icons";
import { MdPause, MdPlayArrow } from "react-icons/md";

import { getBestImageUrlForLayer } from "../components/OutfitPreview";
import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge";
import PosePicker from "./PosePicker";
import SpeciesColorPicker from "../components/SpeciesColorPicker";
import { loadImage, loadable, useLocalStorage } from "../util";
import useCurrentUser from "../components/useCurrentUser";
import useOutfitAppearance from "../components/useOutfitAppearance";
import OutfitKnownGlitchesBadge from "./OutfitKnownGlitchesBadge";
import usePreferArchive from "../components/usePreferArchive";

const LoadableLayersInfoModal = loadable(() => import("./LayersInfoModal"));

/**
 * OutfitControls is the set of controls layered over the outfit preview, to
 * control things like species/color and sharing links!
 */
function OutfitControls({
	outfitState,
	dispatchToOutfit,
	showAnimationControls,
	appearance,
}) {
	const [focusIsLocked, setFocusIsLocked] = React.useState(false);
	const onLockFocus = React.useCallback(
		() => setFocusIsLocked(true),
		[setFocusIsLocked],
	);
	const onUnlockFocus = React.useCallback(
		() => setFocusIsLocked(false),
		[setFocusIsLocked],
	);

	// HACK: As of 1.0.0-rc.0, Chakra's `toast` function rebuilds unnecessarily,
	//       which triggers unnecessary rebuilds of the `onSpeciesColorChange`
	//       callback, which causes the `React.memo` on `SpeciesColorPicker` to
	//       fail, which harms performance. But it seems to work just fine if we
	//       hold onto the first copy of the function we get! :/
	const _toast = useToast();
	// eslint-disable-next-line react-hooks/exhaustive-deps
	const toast = React.useMemo(() => _toast, []);

	const speciesColorPickerSize = useBreakpointValue({ base: "sm", md: "md" });

	const onSpeciesColorChange = React.useCallback(
		(species, color, isValid, closestPose) => {
			if (isValid) {
				dispatchToOutfit({
					type: "setSpeciesAndColor",
					speciesId: species.id,
					colorId: color.id,
					pose: closestPose,
				});
			} else {
				// NOTE: This shouldn't be possible to trigger, because the
				//       `stateMustAlwaysBeValid` prop should prevent it. But we have
				//       it as a fallback, just in case!
				toast({
					title: `We haven't seen a ${color.name} ${species.name} before! 😓`,
					status: "warning",
				});
			}
		},
		[dispatchToOutfit, toast],
	);

	const maybeUnlockFocus = (e) => {
		// We lock focus when a touch-device user taps the area. When they tap
		// empty space, we treat that as a toggle and release the focus lock.
		if (e.target === e.currentTarget) {
			onUnlockFocus();
		}
	};

	return (
		<ClassNames>
			{({ css, cx }) => (
				<OutfitControlsContextMenu outfitState={outfitState}>
					<Box
						role="group"
						pos="absolute"
						left="0"
						right="0"
						top="0"
						bottom="0"
						height="100%" // Required for Safari to size the grid correctly
						padding={{ base: 2, lg: 6 }}
						display="grid"
						overflow="auto"
						gridTemplateAreas={`"back play-pause sharing"
                          "space space space"
                          "picker picker picker"`}
						gridTemplateRows="auto minmax(1rem, 1fr) auto"
						className={cx(
							css`
								opacity: 0;
								transition: opacity 0.2s;

								&:focus-within,
								&.focus-is-locked {
									opacity: 1;
								}

								/* Ignore simulated hovers, only reveal for _real_ hovers. This helps
           * us avoid state conflicts with the focus-lock from clicks. */
								@media (hover: hover) {
									&:hover {
										opacity: 1;
									}
								}
							`,
							focusIsLocked && "focus-is-locked",
						)}
						onClickCapture={(e) => {
							const opacity = parseFloat(
								getComputedStyle(e.currentTarget).opacity,
							);
							if (opacity < 0.5) {
								// If the controls aren't visible right now, then clicks on them are
								// probably accidental. Ignore them! (We prevent default to block
								// built-in behaviors like link nav, and we stop propagation to block
								// our own custom click handlers. I don't know if I can prevent the
								// select clicks though?)
								e.preventDefault();
								e.stopPropagation();

								// We also show the controls, by locking focus. We'll undo this when
								// the user taps elsewhere (because it will trigger a blur event from
								// our child components), in `maybeUnlockFocus`.
								setFocusIsLocked(true);
							}
						}}
						data-test-id="wardrobe-outfit-controls"
					>
						<Box gridArea="back" onClick={maybeUnlockFocus}>
							<BackButton outfitState={outfitState} />
						</Box>

						<Flex
							gridArea="play-pause"
							// HACK: Better visual centering with other controls
							paddingTop="0.3rem"
							direction="column"
							align="center"
						>
							{showAnimationControls && <PlayPauseButton />}
							<Box height="2" />
							<HStack spacing="2" align="center" justify="center">
								<OutfitHTML5Badge appearance={appearance} />
								<OutfitKnownGlitchesBadge appearance={appearance} />
								<SettingsButton
									onLockFocus={onLockFocus}
									onUnlockFocus={onUnlockFocus}
								/>
							</HStack>
						</Flex>
						<Stack
							gridArea="sharing"
							alignSelf="flex-end"
							spacing={{ base: "2", lg: "4" }}
							align="flex-end"
							onClick={maybeUnlockFocus}
						>
							<Box>
								<DownloadButton outfitState={outfitState} />
							</Box>
							<Box>
								<CopyLinkButton outfitState={outfitState} />
							</Box>
						</Stack>
						<Box gridArea="space" onClick={maybeUnlockFocus} />
						{outfitState.speciesId && outfitState.colorId && (
							<Flex
								gridArea="picker"
								align="center"
								justify="center"
								onClick={maybeUnlockFocus}
							>
								{/**
								 * We try to center the species/color picker, but the left spacer will
								 * shrink more than the pose picker container if we run out of space!
								 */}
								<Box flex="0 0 auto">
									<DarkMode>
										<SpeciesColorPicker
											speciesId={outfitState.speciesId}
											colorId={outfitState.colorId}
											idealPose={outfitState.pose}
											onChange={onSpeciesColorChange}
											stateMustAlwaysBeValid
											size={speciesColorPickerSize}
											speciesTestId="wardrobe-species-picker"
											colorTestId="wardrobe-color-picker"
										/>
									</DarkMode>
								</Box>
								<Flex flex="0 0 auto" align="center" pl="2">
									<PosePicker
										speciesId={outfitState.speciesId}
										colorId={outfitState.colorId}
										pose={outfitState.pose}
										altStyleId={outfitState.altStyleId}
										appearanceId={outfitState.appearanceId}
										dispatchToOutfit={dispatchToOutfit}
										onLockFocus={onLockFocus}
										onUnlockFocus={onUnlockFocus}
										data-test-id="wardrobe-pose-picker"
									/>
								</Flex>
							</Flex>
						)}
					</Box>
				</OutfitControlsContextMenu>
			)}
		</ClassNames>
	);
}

function OutfitControlsContextMenu({ outfitState, children }) {
	// NOTE: We track these separately, rather than in one atomic state object,
	// because I want to still keep the menu in the right position when it's
	// animating itself closed!
	const [isOpen, setIsOpen] = React.useState(false);
	const [position, setPosition] = React.useState({ x: 0, y: 0 });

	const [layersInfoModalIsOpen, setLayersInfoModalIsOpen] =
		React.useState(false);

	const { visibleLayers } = useOutfitAppearance(outfitState);
	const [downloadImageUrl, prepareDownload] =
		useDownloadableImage(visibleLayers);

	return (
		<Box
			onContextMenuCapture={(e) => {
				setIsOpen(true);
				setPosition({ x: e.pageX, y: e.pageY });
				e.preventDefault();
			}}
		>
			{children}
			<Menu isOpen={isOpen} onClose={() => setIsOpen(false)}>
				<Portal>
					<MenuList position="absolute" left={position.x} top={position.y}>
						<MenuItem
							icon={<DownloadIcon />}
							as="a"
							// eslint-disable-next-line no-script-url
							href={downloadImageUrl || "#"}
							onClick={(e) => {
								if (!downloadImageUrl) {
									e.preventDefault();
								}
							}}
							download={(outfitState.name || "Outfit") + ".png"}
							onMouseEnter={prepareDownload}
							onFocus={prepareDownload}
							cursor={!downloadImageUrl && "wait"}
						>
							Download
						</MenuItem>
						<MenuItem
							icon={<LinkIcon />}
							onClick={() => setLayersInfoModalIsOpen(true)}
						>
							Layers (SWF, PNG)
						</MenuItem>
					</MenuList>
				</Portal>
			</Menu>
			<LoadableLayersInfoModal
				isOpen={layersInfoModalIsOpen}
				onClose={() => setLayersInfoModalIsOpen(false)}
				visibleLayers={visibleLayers}
			/>
		</Box>
	);
}

function OutfitHTML5Badge({ appearance }) {
	const petIsUsingHTML5 =
		appearance.petAppearance?.layers.every(layerUsesHTML5);

	const itemsNotUsingHTML5 = appearance.items.filter((item) =>
		item.appearance.layers.some((l) => !layerUsesHTML5(l)),
	);
	itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name));

	const usesHTML5 = petIsUsingHTML5 && itemsNotUsingHTML5.length === 0;

	let tooltipLabel;
	if (usesHTML5) {
		tooltipLabel = (
			<>This outfit is converted to HTML5, and ready to use on Neopets.com!</>
		);
	} else {
		tooltipLabel = (
			<Box>
				<Box as="p">
					This outfit isn't converted to HTML5 yet, so it might not appear in
					Neopets.com customization yet. Once it's ready, it could look a bit
					different than our temporary preview here. It might even be animated!
				</Box>
				{!petIsUsingHTML5 && (
					<Box as="p" marginTop="1em" fontWeight="bold">
						This pet is not yet converted.
					</Box>
				)}
				{itemsNotUsingHTML5.length > 0 && (
					<>
						<Box as="header" marginTop="1em" fontWeight="bold">
							The following items aren't yet converted:
						</Box>
						<UnorderedList>
							{itemsNotUsingHTML5.map((item) => (
								<ListItem key={item.id}>{item.name}</ListItem>
							))}
						</UnorderedList>
					</>
				)}
			</Box>
		);
	}

	return (
		<HTML5Badge
			usesHTML5={usesHTML5}
			isLoading={appearance.loading}
			tooltipLabel={tooltipLabel}
		/>
	);
}

/**
 * BackButton takes you back home, or to Your Outfits if this outfit is yours.
 */
function BackButton({ outfitState }) {
	const currentUser = useCurrentUser();
	const outfitBelongsToCurrentUser =
		outfitState.creator && outfitState.creator.id === currentUser.id;

	return (
		<ControlButton
			as="a"
			href={outfitBelongsToCurrentUser ? "/your-outfits" : "/"}
			icon={<ArrowBackIcon />}
			aria-label="Leave this outfit"
			d="inline-flex" // Not sure why <a> requires this to style right! ^^`
			data-test-id="wardrobe-nav-back-button"
		/>
	);
}

/**
 * DownloadButton downloads the outfit as an image!
 */
function DownloadButton({ outfitState }) {
	const { visibleLayers } = useOutfitAppearance(outfitState);

	const [downloadImageUrl, prepareDownload] =
		useDownloadableImage(visibleLayers);

	return (
		<Tooltip label="Download" placement="left">
			<Box>
				<ControlButton
					icon={<DownloadIcon />}
					aria-label="Download"
					as="a"
					// eslint-disable-next-line no-script-url
					href={downloadImageUrl || "#"}
					onClick={(e) => {
						if (!downloadImageUrl) {
							e.preventDefault();
						}
					}}
					download={(outfitState.name || "Outfit") + ".png"}
					onMouseEnter={prepareDownload}
					onFocus={prepareDownload}
					cursor={!downloadImageUrl && "wait"}
				/>
			</Box>
		</Tooltip>
	);
}

/**
 * CopyLinkButton copies the outfit URL to the clipboard!
 */
function CopyLinkButton({ outfitState }) {
	const { onCopy, hasCopied } = useClipboard(outfitState.url);

	return (
		<Tooltip label={hasCopied ? "Copied!" : "Copy link"} placement="left">
			<Box>
				<ControlButton
					icon={hasCopied ? <CheckIcon /> : <LinkIcon />}
					aria-label="Copy link"
					onClick={onCopy}
				/>
			</Box>
		</Tooltip>
	);
}

function PlayPauseButton() {
	const [isPaused, setIsPaused] = useLocalStorage("DTIOutfitIsPaused", true);

	// We show an intro animation if this mounts while paused. Whereas if we're
	// not paused, we initialize as if we had already finished.
	const [blinkInState, setBlinkInState] = React.useState(
		isPaused ? { type: "ready" } : { type: "done" },
	);
	const buttonRef = React.useRef(null);

	React.useLayoutEffect(() => {
		if (blinkInState.type === "ready" && buttonRef.current) {
			setBlinkInState({
				type: "started",
				position: {
					left: buttonRef.current.offsetLeft,
					top: buttonRef.current.offsetTop,
				},
			});
		}
	}, [blinkInState, setBlinkInState]);

	return (
		<ClassNames>
			{({ css }) => (
				<>
					<PlayPauseButtonContent
						isPaused={isPaused}
						setIsPaused={setIsPaused}
						ref={buttonRef}
					/>
					{blinkInState.type === "started" && (
						<Portal>
							<PlayPauseButtonContent
								isPaused={isPaused}
								setIsPaused={setIsPaused}
								position="absolute"
								left={blinkInState.position.left}
								top={blinkInState.position.top}
								backgroundColor="gray.600"
								borderColor="gray.50"
								color="gray.50"
								onAnimationEnd={() => setBlinkInState({ type: "done" })}
								// Don't disrupt the hover state of the controls! (And the button
								// doesn't seem to click correctly, not sure why, but instead of
								// debugging I'm adding this :p)
								pointerEvents="none"
								className={css`
									@keyframes fade-in-out {
										0% {
											opacity: 0;
										}

										10% {
											opacity: 1;
										}

										90% {
											opacity: 1;
										}

										100% {
											opacity: 0;
										}
									}

									opacity: 0;
									animation: fade-in-out 2s;
								`}
							/>
						</Portal>
					)}
				</>
			)}
		</ClassNames>
	);
}

const PlayPauseButtonContent = React.forwardRef(
	({ isPaused, setIsPaused, ...props }, ref) => {
		return (
			<TranslucentButton
				ref={ref}
				leftIcon={isPaused ? <MdPause /> : <MdPlayArrow />}
				onClick={() => setIsPaused(!isPaused)}
				{...props}
			>
				{isPaused ? <>Paused</> : <>Playing</>}
			</TranslucentButton>
		);
	},
);

function SettingsButton({ onLockFocus, onUnlockFocus }) {
	return (
		<Popover onOpen={onLockFocus} onClose={onUnlockFocus}>
			<PopoverTrigger>
				<TranslucentButton size="xs" aria-label="Settings">
					<SettingsIcon />
					<Box width="1" />
					<ChevronDownIcon />
				</TranslucentButton>
			</PopoverTrigger>
			<Portal>
				<PopoverContent width="25ch">
					<PopoverArrow />
					<PopoverBody>
						<HiResModeSetting />
					</PopoverBody>
				</PopoverContent>
			</Portal>
		</Popover>
	);
}

function HiResModeSetting() {
	const [hiResMode, setHiResMode] = useLocalStorage("DTIHiResMode", false);
	const [preferArchive, setPreferArchive] = usePreferArchive();

	return (
		<Box>
			<FormControl>
				<Flex>
					<Box>
						<FormLabel htmlFor="hi-res-mode-setting" fontSize="sm" margin="0">
							Hi-res mode (SVG)
						</FormLabel>
						<FormHelperText marginTop="0" fontSize="xs">
							Crisper at higher resolutions, but not always accurate
						</FormHelperText>
					</Box>
					<Box width="2" />
					<Switch
						id="hi-res-mode-setting"
						size="sm"
						marginTop="0.1rem"
						isChecked={hiResMode}
						onChange={(e) => setHiResMode(e.target.checked)}
					/>
				</Flex>
			</FormControl>
			<Box height="2" />
			<FormControl>
				<Flex>
					<Box>
						<FormLabel
							htmlFor="prefer-archive-setting"
							fontSize="sm"
							margin="0"
						>
							Use DTI's image archive
						</FormLabel>
						<FormHelperText marginTop="0" fontSize="xs">
							Turn this on when images.neopets.com is slow!
						</FormHelperText>
					</Box>
					<Box width="2" />
					<Switch
						id="prefer-archive-setting"
						size="sm"
						marginTop="0.1rem"
						isChecked={preferArchive ?? false}
						onChange={(e) => setPreferArchive(e.target.checked)}
					/>
				</Flex>
			</FormControl>
		</Box>
	);
}

const TranslucentButton = React.forwardRef(({ children, ...props }, ref) => {
	return (
		<Button
			ref={ref}
			size="sm"
			color="gray.100"
			variant="outline"
			borderColor="gray.200"
			borderRadius="full"
			backgroundColor="blackAlpha.600"
			boxShadow="md"
			_hover={{
				backgroundColor: "gray.600",
				borderColor: "gray.50",
				color: "gray.50",
			}}
			_focus={{
				backgroundColor: "gray.600",
				borderColor: "gray.50",
				color: "gray.50",
			}}
			{...props}
		>
			{children}
		</Button>
	);
});

/**
 * ControlButton is a UI helper to render the cute round buttons we use in
 * OutfitControls!
 */
function ControlButton({ icon, "aria-label": ariaLabel, ...props }) {
	return (
		<IconButton
			icon={icon}
			aria-label={ariaLabel}
			isRound
			variant="unstyled"
			backgroundColor="gray.600"
			color="gray.50"
			boxShadow="md"
			d="flex"
			alignItems="center"
			justifyContent="center"
			transition="backgroundColor 0.2s"
			_focus={{ backgroundColor: "gray.500" }}
			_hover={{ backgroundColor: "gray.500" }}
			outline="initial"
			{...props}
		/>
	);
}

/**
 * useDownloadableImage loads the image data and generates the downloadable
 * image URL.
 */
function useDownloadableImage(visibleLayers) {
	const [hiResMode] = useLocalStorage("DTIHiResMode", false);
	const [preferArchive] = usePreferArchive();

	const [downloadImageUrl, setDownloadImageUrl] = React.useState(null);
	const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]);
	const toast = useToast();

	const prepareDownload = React.useCallback(async () => {
		// Skip if the current image URL is already correct for these layers.
		const layerIds = visibleLayers.map((l) => l.id);
		if (layerIds.join(",") === preparedForLayerIds.join(",")) {
			return;
		}

		// Skip if there are no layers. (This probably means we're still loading!)
		if (layerIds.length === 0) {
			return;
		}

		setDownloadImageUrl(null);

		// NOTE: You could argue that we may as well just always use PNGs here,
		//       regardless of hi-res mode… but using the same src will help both
		//       performance (can use cached SVG), and predictability (image will
		//       look like what you see here).
		const imagePromises = visibleLayers.map((layer) =>
			loadImage(getBestImageUrlForLayer(layer, { hiResMode }), {
				crossOrigin: "anonymous",
				preferArchive,
			}),
		);

		let images;
		try {
			images = await Promise.all(imagePromises);
		} catch (e) {
			console.error("Error building downloadable image", e);
			toast({
				status: "error",
				title: "Oops, sorry, we couldn't download the image!",
				description:
					"Check your connection, then reload the page and try again.",
			});
			return;
		}

		const canvas = document.createElement("canvas");
		const context = canvas.getContext("2d");
		canvas.width = 600;
		canvas.height = 600;

		for (const image of images) {
			context.drawImage(image, 0, 0);
		}

		console.debug(
			"Generated image for download",
			layerIds,
			canvas.toDataURL("image/png"),
		);
		setDownloadImageUrl(canvas.toDataURL("image/png"));
		setPreparedForLayerIds(layerIds);
	}, [preparedForLayerIds, visibleLayers, toast, hiResMode, preferArchive]);

	return [downloadImageUrl, prepareDownload];
}

export default OutfitControls;