mobile

1 files changed, 72 insertions, 0 deletions

diff --git a/src/views/LandscapeWarning.js b/src/views/LandscapeWarning.js
new file mode 100644
index 0000000..389e8a6
--- /dev/null
+++ b/src/views/LandscapeWarning.js
@@ -0,0 +1,72 @@
+/**
+ * Instruction to rotate the phone to landscape
+ */
+
+import React, { Component } from "react";
+
+import { isMobile, isiPhone } from "../utils/index.js";
+
+const PhoneIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className="phone-icon"
+  >
+    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z" />
+  </svg>
+);
+
+const RotateIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className="rotate-icon"
+  >
+    <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" />
+  </svg>
+);
+
+export default class LandscapeWarning extends Component {
+  state = {
+    landscape: !isMobile || window.innerWidth > window.innerHeight,
+  };
+
+  constructor(props) {
+    super(props);
+    this.handleResize = this.handleResize.bind(this);
+    if (isMobile) {
+      window.addEventListener("resize", this.handleResize);
+      setTimeout(this.handleResize, 100);
+    }
+  }
+
+  handleResize() {
+    const landscape = !isMobile || window.innerWidth > window.innerHeight;
+    if (landscape !== this.state.landscape) {
+      this.setState({ landscape });
+    }
+  }
+
+  render() {
+    const { landscape } = this.state;
+    if (landscape) return null;
+    return (
+      <div className="landscape-warning">
+        {RotateIcon}
+        {PhoneIcon}
+        {isiPhone && (
+          <div className="landscape-message">
+            {"Please tap "}
+            <small>A</small>
+            {"A and Hide Toolbar"}
+            <br />
+            {"then rotate your device."}
+          </div>
+        )}
+        {!isiPhone && (
+          <div className="landscape-message">{"Please rotate your device"}</div>
+        )}
+      </div>
+    );
+  }
+}