Enable Webamp for scroll UI

Author: captbaritone

packages/skin-database/app/(modern)/scroll/SkinPage.tsx

@@ -14,7 +14,7 @@ type Props = {
 };
 
 export default function SkinPage({ skin, index, sessionId, focused }: Props) {
-  const showWebamp = focused && false; // Disable for now
+  const showWebamp = focused;
   return (
     <div
       key={skin.md5}

packages/skin-database/app/(modern)/scroll/Webamp.tsx

@@ -18,7 +18,7 @@ export default function WebampComponent({
   const ref = useRef<HTMLDivElement | null>(null);
   const outerRef = useRef<HTMLDivElement | null>(null);
   // @ts-ignore
-  const webampRef = useRef<typeof import("webamp") | null>(null);
+  const webampRef = useRef<import("webamp").default | null>(null);
 
   useEffect(() => {
     let disposed = false;
@@ -33,21 +33,22 @@ export default function WebampComponent({
       const webamp = new Webamp({
         initialSkin: { url: skinUrl },
         initialTracks,
-        hotkeys: true,
+        enableHotkeys: true,
         zIndex: 1001,
       });
 
       webampRef.current = webamp;
       cleanup = () => webamp.dispose();
 
       webamp.onClose(closeModal);
-      await webamp.renderWhenReady(ref.current);
+      // ref.current!.style.opacity = "0";
+      await webamp.renderInto(ref.current);
       const { width } = outerRef.current!.getBoundingClientRect();
       const zoom = width / SCREENSHOT_WIDTH;
-      console.log("Setting zoom:", zoom);
       document
         .getElementById("webamp")
         ?.style.setProperty("zoom", String(zoom));
+      ref.current!.style.opacity = "1";
 
       if (!disposed) loaded();
     }
@@ -75,6 +76,9 @@ export default function WebampComponent({
         style={{
           width: SCREENSHOT_WIDTH,
           height: SCREENSHOT_HEIGHT,
+          position: "relative",
+          opacity: 0,
+          transition: "opacity 1s linear",
         }}
         ref={ref}
       />

packages/skin-database/package.json

@@ -48,7 +48,8 @@
     "ts-node": "^10.5.0",
     "twit": "^2.2.11",
     "winston": "^3.2.1",
-    "yargs": "^13.2.4"
+    "yargs": "^13.2.4",
+    "webamp": "workspace:*"
   },
   "scripts": {
     "lint": "eslint .",