Improve debug view

graphql.config.json

@@ -0,0 +1,3 @@
+{
+    "schema": "https://localhost:3001"
+  }

package.json

@@ -31,8 +31,8 @@
     "webamp": "^1.4.3-beta.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "build": "react-scripts  --openssl-legacy-provider build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "find-skins": "node ./scripts/findSkins.js",
@@ -50,9 +50,24 @@
     "not op_mini all"
   ],
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": "react-app",
+    "overrides": [
+      {
+             "files": ["*.js"],
+             "processor": "@graphql-eslint/graphql"
+           },
+      {
+        "files": ["*.graphql"],
+        "parser": "@graphql-eslint/eslint-plugin",
+        "plugins": ["@graphql-eslint"],
+        "rules": {
+          "@graphql-eslint/known-type-names": "error"
+        }
+      }
+    ]
   },
   "devDependencies": {
+    "@graphql-eslint/eslint-plugin": "^3.8.0",
     "bluebird": "^3.5.3",
     "netlify-cli": "^2.40.0",
     "react-styleguidist": "^11.0.5"

src/App.js

@@ -18,7 +18,7 @@ import Metadata from "./components/Metadata";
 import SkinReadme from "./SkinReadme";
 import { useDropzone } from "react-dropzone";
 import ReviewPage from "./ReviewPage";
-import DebugSkin from "./DebugSkin";
+import DebugSkin from "./debug/DebugSkin";
 
 const getTableDimensions = (windowWidth, scale) => {
   const columnCount = Math.round(windowWidth / (SCREENSHOT_WIDTH * scale));

src/debug/DebugFile.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+export function DebugFile({ file }) {
+  return (
+    <div>
+      <h1>{file.filename}</h1>
+      <PreviewFile file={file} />
+    </div>
+  );
+}
+
+export function PreviewFile({ file }) {
+  if (
+    file.filename.toLowerCase().endsWith(".bmp") ||
+    file.filename.toLowerCase().endsWith(".png")
+  ) {
+    return (
+      <img
+        src={file.url}
+        style={{
+          transformOrigin: "top left",
+          transform: "scale(2)",
+          imageRendering: "pixelated",
+        }}
+      />
+    );
+  }
+  if (file.filename.toLowerCase().endsWith(".cur")) {
+    return (
+      <div>
+        (Hover in the box to see .cur preview)
+        <div
+          style={{
+            cursor: "url(" + file.url + "), auto",
+            border: "2px solid black",
+            minWidth: "400px",
+            minHeight: "400px",
+          }}
+        />
+      </div>
+    );
+  }
+  if (file.text_content != null) {
+    return (
+      <pre style={{ whiteSpace: "pre-line", maxWidth: 600 }}>
+        {file.text_content}
+      </pre>
+    );
+  }
+  return "[[No preview available]]";
+}

src/debug/DebugSkin.js

@@ -1,14 +1,17 @@
 import * as React from "react";
-import { gql } from "./utils";
-import { useQuery, useActionCreator } from "./hooks";
-import * as Actions from "./redux/actionCreators";
+import { gql } from "../utils";
+import { useQuery, useActionCreator } from "../hooks";
+import * as Actions from "../redux/actionCreators";
+import { DebugFile } from "./DebugFile";
 
 const query = gql`
   query DebugSkin($md5: String!) {
     fetch_skin_by_md5(md5: $md5) {
       filename
+      download_url
       screenshot_url
       webamp_url
+      museum_url
       nsfw
       readme_text
       tweets {
@@ -21,6 +24,7 @@ const query = gql`
         url
       }
       archive_files {
+        is_directory
         url
         file_md5
         filename
@@ -38,6 +42,8 @@ const query = gql`
 
 export default function DebugSkin({ md5 }) {
   const variables = React.useMemo(() => ({ md5 }), [md5]);
+
+  const [file, setFile] = React.useState(null);
   const data = useQuery(query, variables);
   const toggleDebugView = useActionCreator(Actions.toggleDebugView);
   if (data == null) {
@@ -45,10 +51,26 @@ export default function DebugSkin({ md5 }) {
   }
   const skin = data.fetch_skin_by_md5;
 
+  const screenshotFile = {
+    filename: skin.filename + ".png",
+    url: skin.screenshot_url,
+  };
+  const focusedFile = file || screenshotFile;
+
   return (
-    <div style={{ backgroundColor: "white", width: "100%" }}>
+    <div style={{ backgroundColor: "white", minHeight: "100vh" }}>
       <div style={{ display: "flex", flexDirection: "row", padding: 20 }}>
-        <div style={{ flexGrow: 1 }}>
+        <div style={{ paddingRight: 20 }}>
+          <button
+            style={{ height: "inherit" }}
+            onClick={(e) => {
+              e.preventDefault();
+              toggleDebugView();
+            }}
+          >
+            [close]
+          </button>
+          <br />
           <h1>
             {" "}
             {skin.filename} {skin.nsfw && "🔞"}
@@ -56,7 +78,22 @@ export default function DebugSkin({ md5 }) {
           <h2>Links</h2>
           <ul>
             <li>
-              <a href={skin.screenshot_url}>Screenshot</a>
+              <a href={skin.museum_url}>Museum Link</a>
+            </li>
+            <li>
+              <a href={skin.download_url}>Download</a>
+            </li>
+            <li>
+              <a href={skin.screenshot_url}>Screenshot</a>{" "}
+              <a
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setFile(screenshotFile);
+                }}
+              >
+                {"🔎"}
+              </a>
             </li>
             <li>
               <a href={skin.webamp_url}>Webamp</a>
@@ -91,11 +128,23 @@ export default function DebugSkin({ md5 }) {
                 return (
                   <tr key={file.filename}>
                     <td>
-                      <a href={file.url}>{file.filename}</a>
+                      <a
+                        href={file.url}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setFile(file);
+                        }}
+                      >
+                        {file.filename}
+                      </a>
                     </td>
-                    <td>{formatBytes(file.size)}</td>
                     <td>
-                      {new Date(Date.parse(file.date)).toLocaleDateString()}
+                      {file.is_directory ? "N/A" : formatBytes(file.size)}
+                    </td>
+                    <td>
+                      {file.is_directory
+                        ? "N/A"
+                        : new Date(Date.parse(file.date)).toLocaleDateString()}
                     </td>
                   </tr>
                 );
@@ -104,21 +153,14 @@ export default function DebugSkin({ md5 }) {
           </table>
         </div>
         <div>
-          <h2>Readme</h2>
+          {focusedFile && <DebugFile file={focusedFile} />}
+          {/*<h2>Readme</h2>
           <pre style={{ whiteSpace: "pre-line", maxWidth: 600 }}>
             {skin.readme_text}
-          </pre>
+          </pre>*/}
         </div>
-        <div style={{ flexGrow: 1 }}>
+        {/*<div style={{ flexGrow: 1 }}>
           <div style={{ textAlign: "right", marginBottom: 20 }}>
-            <button
-              onClick={(e) => {
-                e.preventDefault();
-                toggleDebugView();
-              }}
-            >
-              [close]
-            </button>
           </div>
           <img
             alt={`Screenshot of a Winamps skin named "${skin.filename}"`}
@@ -129,7 +171,7 @@ export default function DebugSkin({ md5 }) {
             }}
             src={skin.screenshot_url}
           />
-        </div>
+        </div>*/}
       </div>
     </div>
   );