OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

minor tweaks to download for degraded experience

Browse source 
prod doesn't use latest chakra, so the image loading is not smooth anymore... so we stopped using crossOrigin for the moment, which is awkward for Download
This commit is contained in:
Matt Dunn-Rankin 2020-04-25 03:02:11 -07:00
parent 2d84f2295b
commit 1b47b4b23f
2 changed files with 9 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
dev-todos.txt
View file

@ -1,4 +1,5 @@
* Use accessible click targets for item lists! Honestly, can they be checkboxes? * Use accessible click targets for item lists! Honestly, can they be checkboxes?
* Update skeletons for ItemList and ItemsPanel * Update skeletons for ItemList and ItemsPanel
* Use react-virtualized instead of our own scroller, but we need total count known, and we need another solution for the CSS transitions in the outfit case * Use react-virtualized instead of our own scroller, but we need total count known, and we need another solution for the CSS transitions in the outfit case
* Restore good download behavior: use crossOrigin for everything, and remove cache-buster in the URL we use for canvas
* Undo the local linking we did for @chakra-ui/core, react, and react-dom on Matchu's machine 😅 * Undo the local linking we did for @chakra-ui/core, react, and react-dom on Matchu's machine 😅

20
src/OutfitPreview.js
View file

@ -12,7 +12,6 @@ import {
Spinner, Spinner,
Text, Text,
Tooltip, Tooltip,
useToast,
} from "@chakra-ui/core"; } from "@chakra-ui/core";
import { Delay } from "./util"; import { Delay } from "./util";
@ -38,7 +37,6 @@ export const itemAppearanceFragment = gql`
function OutfitPreview({ outfitState }) { function OutfitPreview({ outfitState }) {
const { wornItemIds, speciesId, colorId } = outfitState; const { wornItemIds, speciesId, colorId } = outfitState;
const toast = useToast();
const { loading, error, data } = useQuery( const { loading, error, data } = useQuery(
gql` gql`
@ -99,7 +97,10 @@ function OutfitPreview({ outfitState }) {
className="outfit-preview-layer-image" className="outfit-preview-layer-image"
// This sets up the cache to not need to reload images during // This sets up the cache to not need to reload images during
// download! // download!
crossOrigin="Anonymous" // TODO: Re-enable this once we get our change into Chakra
// main. For now, this will make Downloads a bit slower, which
// is fine!
// crossOrigin="Anonymous"
/> />
</FullScreenCenter> </FullScreenCenter>
</CSSTransition> </CSSTransition>
@ -138,14 +139,7 @@ function OutfitPreview({ outfitState }) {
download={(outfitState.name || "Outfit") + ".png"} download={(outfitState.name || "Outfit") + ".png"}
onMouseEnter={prepareDownload} onMouseEnter={prepareDownload}
onFocus={prepareDownload} onFocus={prepareDownload}
onClick={() => { cursor={!downloadImageUrl && "wait"}
if (!downloadImageUrl) {
toast({
title:
"Just a second, try again when the image is done loading!",
});
}
}}
variant="unstyled" variant="unstyled"
backgroundColor="gray.600" backgroundColor="gray.600"
color="gray.50" color="gray.50"
@ -224,6 +218,8 @@ function useDownloadableImage(visibleLayers) {
const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]); const [preparedForLayerIds, setPreparedForLayerIds] = React.useState([]);
const prepareDownload = React.useCallback(async () => { const prepareDownload = React.useCallback(async () => {
setDownloadImageUrl(null);
// Skip if the current image URL is already correct for these layers. // Skip if the current image URL is already correct for these layers.
const layerIds = visibleLayers.map((l) => l.id); const layerIds = visibleLayers.map((l) => l.id);
if (layerIds.join(",") === preparedForLayerIds.join(",")) { if (layerIds.join(",") === preparedForLayerIds.join(",")) {
@ -237,7 +233,7 @@ function useDownloadableImage(visibleLayers) {
image.crossOrigin = "Anonymous"; // Requires S3 CORS config! image.crossOrigin = "Anonymous"; // Requires S3 CORS config!
image.addEventListener("load", () => resolve(image), false); image.addEventListener("load", () => resolve(image), false);
image.addEventListener("error", (e) => reject(e), false); image.addEventListener("error", (e) => reject(e), false);
image.src = layer.imageUrl; image.src = layer.imageUrl + "&xoxo";
}) })
); );