diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js
index 83b46b9dfee5569044581b44879566a13ec3c934..ff9b4da1b86f19c864bcab89b2eb997fc2eb6a1f 100644
--- a/src/react-components/info-dialog.js
+++ b/src/react-components/info-dialog.js
@@ -5,11 +5,10 @@ import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import formurlencoded from "form-urlencoded";
 import LinkDialog from "./link-dialog.js";
+import MediaToolsDialog from "./media-tools-dialog.js";
 
 // TODO i18n
 
-let lastAddMediaUrl = "";
-
 class InfoDialog extends Component {
   static dialogTypes = {
     slack: Symbol("slack"),
@@ -38,17 +37,14 @@ class InfoDialog extends Component {
     this.shareLink = `${loc.protocol}//${loc.host}${loc.pathname}`;
     this.onKeyDown = this.onKeyDown.bind(this);
     this.onContainerClicked = this.onContainerClicked.bind(this);
-    this.onAddMediaClicked = this.onAddMediaClicked.bind(this);
   }
 
   componentDidMount() {
     window.addEventListener("keydown", this.onKeyDown);
-    this.setState({ addMediaUrl: lastAddMediaUrl });
   }
 
   componentWillUnmount() {
     window.removeEventListener("keydown", this.onKeyDown);
-    lastAddMediaUrl = this.state.addMediaUrl;
   }
 
   onKeyDown(e) {
@@ -63,11 +59,6 @@ class InfoDialog extends Component {
     }
   }
 
-  onAddMediaClicked() {
-    this.props.onAddMedia(this.state.addMediaUrl);
-    this.props.onCloseDialog();
-  }
-
   shareLinkClicked = () => {
     navigator.share({
       title: document.title,
@@ -83,8 +74,7 @@ class InfoDialog extends Component {
   state = {
     mailingListEmail: "",
     mailingListPrivacy: false,
-    copyLinkButtonText: "Copy",
-    addMediaUrl: ""
+    copyLinkButtonText: "Copy"
   };
 
   signUpForMailingList = async e => {
@@ -199,28 +189,7 @@ class InfoDialog extends Component {
         break;
       case InfoDialog.dialogTypes.add_media:
         dialogTitle = "Add Media";
-        dialogBody = (
-          <div>
-            <div>Tip: You can paste media urls directly into hubs with ctrl+v</div>
-            <form onSubmit={this.onAddMediaClicked}>
-              <div className="add-media-form">
-                <input
-                  type="url"
-                  placeholder="Image, Video, or GLTF URL"
-                  className="add-media-form__link_field"
-                  value={this.state.addMediaUrl}
-                  onChange={e => this.setState({ addMediaUrl: e.target.value })}
-                  required
-                />
-                <div className="add-media-form__buttons">
-                  <button className="add-media-form__action-button">
-                    <span>Add</span>
-                  </button>
-                </div>
-              </div>
-            </form>
-          </div>
-        );
+        dialogBody = <MediaToolsDialog onAddMedia={this.props.onAddMedia} onCloseDialog={this.props.onCloseDialog} />;
         break;
       case InfoDialog.dialogTypes.updates:
         dialogTitle = "";
diff --git a/src/react-components/media-tools-dialog.js b/src/react-components/media-tools-dialog.js
new file mode 100644
index 0000000000000000000000000000000000000000..cd77baf7225a4d24236aa942e66ed0de74f1444d
--- /dev/null
+++ b/src/react-components/media-tools-dialog.js
@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+let lastAddMediaUrl = "";
+export default class MediaToolsDialog extends Component {
+  state = {
+    addMediaUrl: ""
+  };
+
+  static propTypes = {
+    onAddMedia: PropTypes.func,
+    onCloseDialog: PropTypes.func
+  };
+
+  constructor() {
+    super();
+    this.onAddMediaClicked = this.onAddMediaClicked.bind(this);
+    this.onUrlChange = this.onUrlChange.bind(this);
+  }
+
+  componentDidMount() {
+    this.setState({ addMediaUrl: lastAddMediaUrl });
+  }
+
+  componentWillUnmount() {
+    lastAddMediaUrl = this.state.addMediaUrl;
+  }
+
+  onUrlChange(e) {
+    this.setState({ addMediaUrl: e.target.value });
+  }
+
+  onAddMediaClicked() {
+    this.props.onAddMedia(this.state.addMediaUrl);
+    this.props.onCloseDialog();
+  }
+
+  render() {
+    return (
+      <div>
+        <div>Tip: You can paste media urls directly into hubs with ctrl+v</div>
+        <form onSubmit={this.onAddMediaClicked}>
+          <div className="add-media-form">
+            <input
+              ref={el => (this.input = el)}
+              type="url"
+              placeholder="Image, Video, or GLTF URL"
+              className="add-media-form__link_field"
+              value={this.state.addMediaUrl}
+              onChange={this.onUrlChange}
+              required
+            />
+            <div className="add-media-form__buttons">
+              <button className="add-media-form__action-button">
+                <span>Add</span>
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}