From bbb752fa65b763675571f70351fa1dd6bba4df09 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 10 Feb 2021 13:49:37 -0800
Subject: [PATCH] Extract out `layerUsesHTML5` function

---
 src/app/ItemPage.js                    | 6 ++----
 src/app/WardrobePage/OutfitControls.js | 9 ++++-----
 src/app/components/HTML5Badge.js       | 4 ++++
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index a80d4e4..3f9ae1d 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -38,7 +38,7 @@ import { Link, useParams } from "react-router-dom";
 
 import ItemPageLayout, { SubtleSkeleton } from "./ItemPageLayout";
 import { Delay, logAndCapture, usePageTitle } from "./util";
-import HTML5Badge from "./components/HTML5Badge";
+import HTML5Badge, { layerUsesHTML5 } from "./components/HTML5Badge";
 import {
   itemAppearanceFragment,
   petAppearanceFragment,
@@ -672,9 +672,7 @@ function ItemPageOutfitPreview({ itemId }) {
   const itemAppearance = appearance?.itemAppearances?.[0];
   const itemLayers = itemAppearance?.layers || [];
   const isCompatible = itemLayers.length > 0;
-  const usesHTML5 = itemLayers.every(
-    (l) => l.svgUrl || l.canvasMovieLibraryUrl
-  );
+  const usesHTML5 = itemLayers.every(layerUsesHTML5);
 
   const borderColor = useColorModeValue("green.700", "green.400");
   const errorColor = useColorModeValue("red.600", "red.400");
diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index d2c9c90..4e25d52 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/src/app/WardrobePage/OutfitControls.js
@@ -24,12 +24,12 @@ import { MdPause, MdPlayArrow } from "react-icons/md";
 import { Link } from "react-router-dom";
 
 import { getBestImageUrlForLayer } from "../components/OutfitPreview";
+import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge";
 import PosePicker from "./PosePicker";
 import SpeciesColorPicker from "../components/SpeciesColorPicker";
 import { loadImage, useLocalStorage } from "../util";
 import useCurrentUser from "../components/useCurrentUser";
 import useOutfitAppearance from "../components/useOutfitAppearance";
-import HTML5Badge from "../components/HTML5Badge";
 
 /**
  * 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 usesHTML5 = itemLayers.every(
-    (l) => l.svgUrl || l.canvasMovieLibraryUrl
-  );
+  const usesHTML5 = itemLayers.every(layerUsesHTML5);
+
   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));
 
diff --git a/src/app/components/HTML5Badge.js b/src/app/components/HTML5Badge.js
index 2124a13..438116b 100644
--- a/src/app/components/HTML5Badge.js
+++ b/src/app/components/HTML5Badge.js
@@ -128,4 +128,8 @@ function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
   );
 }
 
+export function layerUsesHTML5(layer) {
+  return layer.svgUrl || layer.canvasMovieLibraryUrl;
+}
+
 export default HTML5Badge;