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

Extract out layerUsesHTML5 function

Browse source
This commit is contained in:
Emi Matchu 2021-02-10 13:49:37 -08:00
parent 10e47115bd
commit bbb752fa65
3 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/ItemPage.js
View file

@ -38,7 +38,7 @@ import { Link, useParams } from "react-router-dom";
import ItemPageLayout, { SubtleSkeleton } from "./ItemPageLayout"; import ItemPageLayout, { SubtleSkeleton } from "./ItemPageLayout";
import { Delay, logAndCapture, usePageTitle } from "./util"; import { Delay, logAndCapture, usePageTitle } from "./util";
import HTML5Badge from "./components/HTML5Badge"; import HTML5Badge, { layerUsesHTML5 } from "./components/HTML5Badge";
import { import {
itemAppearanceFragment, itemAppearanceFragment,
petAppearanceFragment, petAppearanceFragment,
@ -672,9 +672,7 @@ function ItemPageOutfitPreview({ itemId }) {
const itemAppearance = appearance?.itemAppearances?.[0]; const itemAppearance = appearance?.itemAppearances?.[0];
const itemLayers = itemAppearance?.layers || []; const itemLayers = itemAppearance?.layers || [];
const isCompatible = itemLayers.length > 0; const isCompatible = itemLayers.length > 0;
const usesHTML5 = itemLayers.every( const usesHTML5 = itemLayers.every(layerUsesHTML5);
(l) => l.svgUrl || l.canvasMovieLibraryUrl
);
const borderColor = useColorModeValue("green.700", "green.400"); const borderColor = useColorModeValue("green.700", "green.400");
const errorColor = useColorModeValue("red.600", "red.400"); const errorColor = useColorModeValue("red.600", "red.400");

9
src/app/WardrobePage/OutfitControls.js
View file

@ -24,12 +24,12 @@ import { MdPause, MdPlayArrow } from "react-icons/md";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { getBestImageUrlForLayer } from "../components/OutfitPreview"; import { getBestImageUrlForLayer } from "../components/OutfitPreview";
import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge";
import PosePicker from "./PosePicker"; import PosePicker from "./PosePicker";
import SpeciesColorPicker from "../components/SpeciesColorPicker"; import SpeciesColorPicker from "../components/SpeciesColorPicker";
import { loadImage, useLocalStorage } from "../util"; import { loadImage, useLocalStorage } from "../util";
import useCurrentUser from "../components/useCurrentUser"; import useCurrentUser from "../components/useCurrentUser";
import useOutfitAppearance from "../components/useOutfitAppearance"; import useOutfitAppearance from "../components/useOutfitAppearance";
import HTML5Badge from "../components/HTML5Badge";
/** /**
* OutfitControls is the set of controls layered over the outfit preview, to * OutfitControls is the set of controls layered over the outfit preview, to
@ -89,11 +89,10 @@ function OutfitControls({
}; };
const itemLayers = appearance.itemAppearances.map((a) => a.layers).flat(); const itemLayers = appearance.itemAppearances.map((a) => a.layers).flat();
const usesHTML5 = itemLayers.every( const usesHTML5 = itemLayers.every(layerUsesHTML5);
(l) => l.svgUrl || l.canvasMovieLibraryUrl
);
const itemsNotUsingHTML5 = appearance.items.filter((item) => const itemsNotUsingHTML5 = appearance.items.filter((item) =>
item.appearance.layers.some((l) => !l.svgUrl && !l.canvasMovieLibraryUrl) item.appearance.layers.some((l) => !layerUsesHTML5(l))
); );
itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name)); itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name));

4
src/app/components/HTML5Badge.js
View file

@ -128,4 +128,8 @@ function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
); );
} }
export function layerUsesHTML5(layer) {
return layer.svgUrl || layer.canvasMovieLibraryUrl;
}
export default HTML5Badge; export default HTML5Badge;