move component to separate file

src/components/networked-video-player.js

+const nafConnected = function() {
+  return new Promise(resolve => {
+    NAF.clientId
+      ? resolve()
+      : document.body.addEventListener("connected", resolve);
+  });
+};
+AFRAME.registerComponent("networked-video-player", {
+  schema: {},
+  async init() {
+    await nafConnected();
+
+    const networkedEl = NAF.utils.getNetworkedEntity(this.el);
+    if (!networkedEl) {
+      throw new Error(
+        "Video player must be added on a node, or a child of a node, with the `networked` component."
+      );
+    }
+
+    const ownerId = networkedEl.components.networked.data.owner;
+    console.log("video player for " + ownerId);
+
+    const stream = await NAF.connection.adapter.getMediaStream(ownerId);
+
+    console.log("Stream", stream);
+    if (!stream) {
+      return;
+    }
+
+    const v = document.createElement("video");
+    v.srcObject = stream;
+    v.style.position = "absolute";
+    v.style.bottom = 0;
+    v.style.height = "100px";
+    v.style.background = "black";
+    document.body.appendChild(v);
+    v.play();
+
+    this.videoEl = v;
+
+    v.onloadedmetadata = () => {
+      const ratio = v.videoWidth / v.videoHeight;
+      this.el.setAttribute("geometry", {
+        width: ratio * 1,
+        height: 1
+      });
+      //this.el.setAttribute("visible", true);
+      this.el.setAttribute("material", "src", v);
+    };
+  },
+
+  remove() {
+    if (this.videoEl) {
+      this.videoEl.parent.removeChild(this.videoEl);
+    }
+  }
+});

src/index.js

@@ -19,6 +19,7 @@ import "./components/body-controller";
 import "./components/hand-controls2";
 import "./components/character-controller";
 import "./components/split-axis-events";
+import "./components/networked-video-player";
 import "./systems/personal-space-bubble";
 
 import registerNetworkScheams from "./network-schemas";
@@ -29,64 +30,6 @@ import Config from "./config";
 registerNetworkScheams();
 registerInputMappings();
 
-const waitForConnected = function() {
-  return new Promise(resolve => {
-    NAF.clientId
-      ? resolve()
-      : document.body.addEventListener("connected", resolve);
-  });
-};
-AFRAME.registerComponent("networked-video-player", {
-  schema: {},
-  init() {
-    waitForConnected()
-      .then(() => {
-        const networkedEl = NAF.utils.getNetworkedEntity(this.el);
-        if (!networkedEl) {
-          return Promise.reject(
-            "Vdeo player must be added on a node, or a child of a node, with the `networked` component."
-          );
-        }
-        const ownerId = networkedEl.components.networked.data.owner;
-        console.log("video player for " + ownerId);
-        return NAF.connection.adapter.getMediaStream(ownerId);
-      })
-      .then(stream => {
-        console.log("Stream", stream);
-        if (!stream) {
-          return;
-        }
-
-        const v = document.createElement("video");
-        v.srcObject = stream;
-        v.style.position = "absolute";
-        v.style.bottom = 0;
-        v.style.height = "100px";
-        v.style.background = "black";
-        document.body.appendChild(v);
-        v.play();
-
-        this.videoEl = v;
-
-        v.onloadedmetadata = () => {
-          const ratio = v.videoWidth / v.videoHeight;
-          this.el.setAttribute("geometry", {
-            width: ratio * 1,
-            height: 1
-          });
-          //this.el.setAttribute("visible", true);
-          this.el.setAttribute("material", "src", v);
-        };
-      });
-  },
-
-  remove() {
-    if (this.videoEl) {
-      this.videoEl.parent.removeChild(this.videoEl);
-    }
-  }
-});
-
 function updateVideoElementPosition(entity) {
   const headEl = document.querySelector("#head");