diff --git a/pages/internal/assetImage.tsx b/pages/internal/assetImage.tsx new file mode 100644 index 0000000..7c92c17 --- /dev/null +++ b/pages/internal/assetImage.tsx @@ -0,0 +1,12 @@ +import InternalAssetImagePage from "../../src/app/InternalAssetImagePage"; +import type { NextPageWithLayout } from "../_app"; + +const InternalAssetImagePageWrapper: NextPageWithLayout = () => { + return ; +}; + +InternalAssetImagePageWrapper.layoutComponent = ({ children }) => { + return children; +}; + +export default InternalAssetImagePageWrapper; diff --git a/src/app/App.js b/src/app/App.js index 00e60f0..5b0baa3 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -12,9 +12,6 @@ import WardrobePageLayout from "./WardrobePage/WardrobePageLayout"; import { loadable } from "./util"; const HomePage = loadable(() => import("./HomePage")); -const InternalAssetImagePage = loadable(() => - import("./InternalAssetImagePage") -); const ItemSearchPage = loadable(() => import("./ItemSearchPage")); const ItemPage = loadable(() => import("./ItemPage")); const ItemTradesOfferingPage = loadable(() => @@ -112,9 +109,6 @@ function App() { - - - diff --git a/src/app/InternalAssetImagePage.js b/src/app/InternalAssetImagePage.js index c9db2b8..d37caee 100644 --- a/src/app/InternalAssetImagePage.js +++ b/src/app/InternalAssetImagePage.js @@ -1,8 +1,8 @@ import React from "react"; import { Box, Center } from "@chakra-ui/react"; -import { useLocation } from "react-router-dom"; import * as Sentry from "@sentry/react"; import { Global, css } from "@emotion/react"; +import { useRouter } from "next/router"; import OutfitMovieLayer from "./components/OutfitMovieLayer"; @@ -36,10 +36,9 @@ function InternalAssetImagePage() { } function InternalAssetImagePageContent() { - const location = useLocation(); - const search = new URLSearchParams(location.search); - const libraryUrl = search.get("libraryUrl"); - const size = search.get("size") || "600"; + const { query } = useRouter(); + const libraryUrl = query.libraryUrl; + const size = query.size ?? "600"; const [movieError, setMovieError] = React.useState(null); diff --git a/src/app/components/OutfitMovieLayer.js b/src/app/components/OutfitMovieLayer.js index 07a2911..ac8c06e 100644 --- a/src/app/components/OutfitMovieLayer.js +++ b/src/app/components/OutfitMovieLayer.js @@ -7,8 +7,11 @@ import { loadImage, logAndCapture, safeImageUrl } from "../util"; // Import EaselJS and TweenJS directly into the `window` object! The bundled // scripts are built to attach themselves to `window.createjs`, and // `window.createjs` is where the Neopets movie libraries expects to find them! -require("imports-loader?wrapper=window!easeljs/lib/easeljs"); -require("imports-loader?wrapper=window!tweenjs/lib/tweenjs"); +// NOTE: If there's no window (e.g. SSR), we skip this step. +if (typeof window !== "undefined") { + require("imports-loader?wrapper=window!easeljs/lib/easeljs"); + require("imports-loader?wrapper=window!tweenjs/lib/tweenjs"); +} function OutfitMovieLayer({ libraryUrl,