Update

src/Cell.js

@@ -6,7 +6,7 @@ import * as Utils from "./utils";
 import * as Selectors from "./redux/selectors";
 import * as Actions from "./redux/actionCreators";
 
-const Cell = React.memo(props => {
+const Cell = React.memo((props) => {
   const {
     style,
     data,
@@ -15,7 +15,7 @@ const Cell = React.memo(props => {
     requestToken,
     setSelectedSkin,
     requestUnloadedSkin,
-    permalinkUrl
+    permalinkUrl,
   } = props;
   const { width, height } = data;
   React.useEffect(() => {
@@ -35,7 +35,6 @@ const Cell = React.memo(props => {
           ...style,
           width,
           height,
-          backgroundColor: requestToken == null ? "blue" : "magenta"
         }}
       />
     );
@@ -65,7 +64,7 @@ const mapStateToProps = (state, ownProps) => {
   const { requestToken, data: skin } = skinDataGetter({
     columnCount,
     rowIndex,
-    columnIndex
+    columnIndex,
   });
   const getPermalinkUrlFromHash = Selectors.getPermalinkUrlFromHashGetter(
     state
@@ -73,16 +72,16 @@ const mapStateToProps = (state, ownProps) => {
   return {
     requestToken,
     skin,
-    permalinkUrl: skin == null ? null : getPermalinkUrlFromHash(skin.hash)
+    permalinkUrl: skin == null ? null : getPermalinkUrlFromHash(skin.hash),
   };
 };
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   requestUnloadedSkin(index) {
     dispatch(Actions.requestUnloadedSkin(index));
   },
   setSelectedSkin(hash, position) {
     dispatch(Actions.selectedSkin(hash, position));
-  }
+  },
 });
 export default connect(mapStateToProps, mapDispatchToProps)(Cell);

src/SkinReadme.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { connect } from "react-redux";
+import * as Actions from "./redux/actionCreators";
+
+class SkinReadme extends React.Component {
+  render() {
+    if (this.props.focusedFile == null) {
+      return null;
+    }
+
+    const { ext, fileName, content } = this.props.focusedFile;
+    if (content == null) {
+      return null;
+    }
+    return (
+      <div
+        style={{
+          position: "fixed",
+          backgroundColor: "white",
+          overflow: "scroll",
+          ...this.props.style,
+        }}
+      >
+        <h2>{fileName}</h2>
+        <div>
+          <div
+            className={"readme"}
+            style={{
+              width: "100%",
+              height: "300px",
+            }}
+          >
+            <pre>{content}</pre>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    zip: state.skinZip,
+    focusedFile: state.focusedSkinFile,
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    selectSkinFile(fileName) {
+      dispatch(Actions.selectSkinFile(fileName));
+    },
+  };
+}
+export default connect(mapStateToProps, mapDispatchToProps)(SkinReadme);

src/SkinTable.js

@@ -13,13 +13,13 @@ const SkinTable = ({
   windowHeight,
   skinCount,
   windowWidth,
-  getSkinData
+  getSkinData,
 }) => {
   function itemKey({ columnIndex, rowIndex }) {
     const { requestToken, data: skin } = getSkinData({
       columnIndex,
       rowIndex,
-      columnCount
+      columnCount,
     });
     if (skin == null && requestToken == null) {
       return `empty-cell-${columnIndex}-${rowIndex}`;
@@ -45,18 +45,15 @@ const SkinTable = ({
   );
 };
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state) => ({
   skinCount: Selectors.getCurrentSkinCount(state),
   selectedSkinHash: Selectors.getSelectedSkinHash(state),
-  getSkinData: Selectors.getSkinDataGetter(state)
+  getSkinData: Selectors.getSkinDataGetter(state),
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch) => ({
   setSelectedSkin(hash, position) {
     dispatch(Actions.selectedSkin(hash, position));
-  }
+  },
 });
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(SkinTable);
+export default connect(mapStateToProps, mapDispatchToProps)(SkinTable);

src/components/BaseFocusedSkin.js

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import WebampComponent from "../WebampComponent";
-import FileExplorer from "../FileExplorer";
 import * as Utils from "../utils";
 import { SCREENSHOT_HEIGHT, SCREENSHOT_WIDTH } from "../constants";
 import { delay } from "rxjs/operators";
@@ -8,6 +7,7 @@ import { Subject, combineLatest, timer, fromEvent, from } from "rxjs";
 import Disposable from "../Disposable";
 import { search } from "../algolia";
 import Metadata from "./Metadata";
+import SkinReadme from "../SkinReadme";
 
 function useSkinData({ hash, skinData, setSkinData }) {
   useEffect(() => {
@@ -16,7 +16,7 @@ function useSkinData({ hash, skinData, setSkinData }) {
     }
     // OMG Giant hack. Kill this please. We should be able to get this data from our own server.
     return from(search(hash, { hitsPerPage: 2, typoTolerance: 0 })).subscribe(
-      results => {
+      (results) => {
         if (results.nbHits.length === 1) {
           console.error("Failed to get skin data for hash", hash, results);
           return;
@@ -42,7 +42,7 @@ class BaseFocusedSkin extends React.Component {
         {
           previewLoaded: false,
           loaded: false,
-          transitionComplete: true
+          transitionComplete: true,
         },
         this._getCenteredState()
       );
@@ -54,7 +54,7 @@ class BaseFocusedSkin extends React.Component {
         top: this.props.initialPosition.top,
         left: this.props.initialPosition.left,
         width: this.props.initialWidth,
-        height: this.props.initialHeight
+        height: this.props.initialHeight,
       };
     }
     this._webampLoadedEvents = new Subject();
@@ -85,7 +85,7 @@ class BaseFocusedSkin extends React.Component {
 
   componentDidMount() {
     this._disposable.add(
-      fromEvent(window.document, "keydown").subscribe(e => {
+      fromEvent(window.document, "keydown").subscribe((e) => {
         if (e.key === "ArrowRight") {
           this.props.selectRelativeSkin(1);
         } else if (e.key === "ArrowLeft") {
@@ -128,7 +128,7 @@ class BaseFocusedSkin extends React.Component {
       top: (windowHeight - SCREENSHOT_HEIGHT) / 2,
       left: (windowWidth - SCREENSHOT_WIDTH) / 2,
       height: SCREENSHOT_HEIGHT,
-      width: SCREENSHOT_WIDTH
+      width: SCREENSHOT_WIDTH,
     };
   }
   render() {
@@ -146,7 +146,7 @@ class BaseFocusedSkin extends React.Component {
                 position: "fixed",
                 height: SCREENSHOT_HEIGHT,
                 width: SCREENSHOT_WIDTH,
-                transform
+                transform,
               }}
             >
               <WebampComponent
@@ -156,20 +156,7 @@ class BaseFocusedSkin extends React.Component {
                 closeModal={this.props.closeModal}
               />
             </div>
-            {false && (
-              <FileExplorer
-                skinUrl={Utils.skinUrlFromHash(this.props.hash)}
-                style={{
-                  width: "400px",
-                  height: "100%",
-                  top: 0,
-                  transform: `translateX(${
-                    this.props.fileExplorerOpen ? 0 : "-400px"
-                  })`,
-                  transition: "transform 200ms ease-out"
-                }}
-              />
-            )}
+            {false && <SkinReadme />}
           </>
         )}
         <div
@@ -180,7 +167,7 @@ class BaseFocusedSkin extends React.Component {
             width: this.state.width,
             transform,
             transition:
-              "all 400ms ease-out, height 400ms ease-out, width 400ms ease-out"
+              "all 400ms ease-out, height 400ms ease-out, width 400ms ease-out",
           }}
         >
           <div style={{ width: "100%", height: "100%" }}>
@@ -199,7 +186,7 @@ class BaseFocusedSkin extends React.Component {
                     this.props.initialPosition != null
                       ? 1
                       : 0,
-                  transition: "opacity 0.2s ease-out"
+                  transition: "opacity 0.2s ease-out",
                 }}
                 onLoad={() => this.setState({ previewLoaded: true })}
                 src={Utils.screenshotUrlFromHash(this.props.hash)}
@@ -219,7 +206,7 @@ class BaseFocusedSkin extends React.Component {
   }
 }
 
-export default props => {
+export default (props) => {
   const { hash, skinData, setSkinData } = props;
   useSkinData({ hash, skinData, setSkinData });
   return <BaseFocusedSkin {...props} />;