From 07d1a127ecbd6018a202b421f57db6b2c99e9a1d Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 14 Dec 2018 17:18:13 -0800
Subject: [PATCH] Start to add readme

---
 package.json       |  1 +
 src/FocusedSkin.js | 32 ++++++++++++----------
 src/Readme.js      | 66 ++++++++++++++++++++++++++++++++++++++++++++++
 yarn.lock          | 53 ++++++++++++++++++++++++++++++++++---
 4 files changed, 135 insertions(+), 17 deletions(-)
 create mode 100644 src/Readme.js

diff --git a/package.json b/package.json
index 69e90d45..84b62e52 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "dominant-color": "^0.0.1",
     "glob": "^7.1.3",
     "image-average-color": "^1.0.0",
+    "jszip": "^3.1.5",
     "lodash": "^4.17.11",
     "md5-file": "^4.0.0",
     "react": "^16.2.0",
diff --git a/src/FocusedSkin.js b/src/FocusedSkin.js
index 479381d3..90a74e23 100644
--- a/src/FocusedSkin.js
+++ b/src/FocusedSkin.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import WebampComponent from "./WebampComponent";
+import Readme from "./Readme";
 import * as Utils from "./utils";
 import * as Selectors from "./redux/selectors";
 import { SCREENSHOT_HEIGHT, SCREENSHOT_WIDTH } from "./constants";
@@ -98,20 +99,23 @@ class FocusedSkin extends React.Component {
     return (
       <React.Fragment>
         {this.state.centered && (
-          <div
-            style={{
-              position: "fixed",
-              height: SCREENSHOT_HEIGHT,
-              width: SCREENSHOT_WIDTH,
-              transform
-            }}
-          >
-            <WebampComponent
-              key={this.props.hash} // Don't reuse instances
-              skinUrl={Utils.skinUrlFromHash(this.props.hash)}
-              loaded={this.handleWebampLoaded}
-            />
-          </div>
+          <>
+            <div
+              style={{
+                position: "fixed",
+                height: SCREENSHOT_HEIGHT,
+                width: SCREENSHOT_WIDTH,
+                transform
+              }}
+            >
+              <WebampComponent
+                key={this.props.hash} // Don't reuse instances
+                skinUrl={Utils.skinUrlFromHash(this.props.hash)}
+                loaded={this.handleWebampLoaded}
+              />
+            </div>
+            <Readme skinUrl={Utils.skinUrlFromHash(this.props.hash)} />
+          </>
         )}
         <div
           id="focused-skin"
diff --git a/src/Readme.js b/src/Readme.js
new file mode 100644
index 00000000..9341c029
--- /dev/null
+++ b/src/Readme.js
@@ -0,0 +1,66 @@
+import React from "react";
+import JSZip from "jszip";
+import { switchMap } from "rxjs/operators";
+import { from, empty } from "rxjs";
+import Disposable from "./Disposable";
+
+export default class Readme extends React.Component {
+  constructor(props) {
+    super(props);
+    this._disposable = new Disposable();
+    this.state = { readmeText: null };
+  }
+
+  componentDidMount() {
+    this._fetchReadme();
+  }
+
+  componentDidUpdate(_, oldState) {
+    if (this.state.skinUrl != oldState.skinUrl) {
+      this._fetchReadme();
+    }
+  }
+
+  componentWillUnmount() {
+    this._disposable.dispose();
+  }
+
+  _fetchReadme() {
+    this._disposable.add(
+      from(fetch(this.props.skinUrl))
+        .pipe(
+          switchMap(response => response.blob()),
+          switchMap(blob => JSZip.loadAsync(blob)),
+          switchMap(zip => {
+            const readme = zip.file("readme.txt");
+            if (readme == null) {
+              return empty();
+            }
+            return readme.async("string");
+          })
+        )
+        .subscribe(text => {
+          console.log(text);
+          // this.setState({ readmeText: text });
+        })
+    );
+  }
+
+  render() {
+    return (
+      this.state.readmeText && (
+        <pre
+          style={{
+            backgroundColor: "white",
+            color: "black",
+            position: "absolute",
+            width: "500px",
+            right: 0
+          }}
+        >
+          {this.state.readmeText}
+        </pre>
+      )
+    );
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 621d082e..94980f04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2179,6 +2179,10 @@ core-js@^2.4.0, core-js@^2.5.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e"
 
+core-js@~2.3.0:
+  version "2.3.0"
+  resolved "http://registry.npmjs.org/core-js/-/core-js-2.3.0.tgz#fab83fbb0b2d8dc85fa636c4b9d34c75420c6d65"
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -2891,6 +2895,10 @@ es6-promise@^4.1.0:
   version "4.2.5"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.5.tgz#da6d0d5692efb461e082c14817fe2427d8f5d054"
 
+es6-promise@~3.0.2:
+  version "3.0.2"
+  resolved "http://registry.npmjs.org/es6-promise/-/es6-promise-3.0.2.tgz#010d5858423a5f118979665f46486a95c6ee2bb6"
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -4125,6 +4133,10 @@ imagemagick@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/imagemagick/-/imagemagick-0.1.3.tgz#7483cea093b4d9f2e2f396857adc8821b537c56a"
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+
 immer@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.7.2.tgz#a51e9723c50b27e132f6566facbec1c85fc69547"
@@ -5104,6 +5116,16 @@ jsx-ast-utils@^2.0.1:
   dependencies:
     array-includes "^3.0.3"
 
+jszip@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.1.5.tgz#e3c2a6c6d706ac6e603314036d43cd40beefdf37"
+  dependencies:
+    core-js "~2.3.0"
+    es6-promise "~3.0.2"
+    lie "~3.1.0"
+    pako "~1.0.2"
+    readable-stream "~2.0.6"
+
 killable@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
@@ -5180,6 +5202,12 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@~3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  dependencies:
+    immediate "~3.0.5"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -6074,6 +6102,10 @@ p-try@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
 
+pako@~1.0.2:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.7.tgz#2473439021b57f1516c82f58be7275ad8ef1bb27"
+
 pako@~1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
@@ -6869,6 +6901,10 @@ private@^0.1.6, private@^0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
 
+process-nextick-args@~1.0.6:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+
 process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
@@ -7271,6 +7307,17 @@ readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable
     string_decoder "~1.0.3"
     util-deprecate "~1.0.1"
 
+readable-stream@~2.0.6:
+  version "2.0.6"
+  resolved "http://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
 readdirp@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
@@ -8676,9 +8723,9 @@ wbuf@^1.1.0, wbuf@^1.7.2:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-webamp@^1.3.0-beta.0:
-  version "1.3.0-beta.0"
-  resolved "https://registry.yarnpkg.com/webamp/-/webamp-1.3.0-beta.0.tgz#130e2c8f52313a1a96d9dad7f9ed6f4765c04f6d"
+webamp@^1.3.0-beta.1:
+  version "1.3.0-beta.1"
+  resolved "https://registry.yarnpkg.com/webamp/-/webamp-1.3.0-beta.1.tgz#434e834ad6362f3fbfc1208b0f0d405f5183ec19"
 
 webidl-conversions@^4.0.2:
   version "4.0.2"