doug/demo-ui-updates

package.json

@@ -16,7 +16,7 @@
     "start": "webpack-dev-server --mode=development --env.loadAppConfig",
     "dev": "webpack-dev-server --mode=development --env.remoteDev",
     "local": "webpack-dev-server --mode=development --env.localDev",
-    "build": "rimraf ./dist && webpack --mode=production",
+    "build": "bash ./scripts/video-texture-patch.sh && rimraf ./dist && webpack --mode=production",
     "bundle-analyzer": "webpack-dev-server --mode=production --env.dev --env.bundleAnalyzer",
     "doc": "node ./scripts/doc/build.js",
     "prettier": "prettier --write '*.js' 'src/**/*.js'",
@@ -32,7 +32,8 @@
     "stats": "rimraf ./dist && webpack --mode=production --json",
     "spritesheet": "npm run spritesheet:system-action && npm run spritesheet:system-notice",
     "spritesheet:system-action": "spritesheet-js -f json -p src/assets/images/spritesheets/ --padding 8 --divisibleByTwo -n sprite-system-action-spritesheet --powerOfTwo src/assets/images/sprites/action/*",
-    "spritesheet:system-notice": "spritesheet-js -f json -p src/assets/images/spritesheets/ --padding 8 --divisibleByTwo -n sprite-system-notice-spritesheet --powerOfTwo src/assets/images/sprites/notice/*"
+    "spritesheet:system-notice": "spritesheet-js -f json -p src/assets/images/spritesheets/ --padding 8 --divisibleByTwo -n sprite-system-notice-spritesheet --powerOfTwo src/assets/images/sprites/notice/*",
+    "postinstall": "bash ./scripts/video-texture-patch.sh"
   },
   "ava": {
     "files": [

scripts/video-texture-patch.sh

@@ -0,0 +1,13 @@
+if [ -d "./node_modules/" ]
+then
+  echo "downloading patch"
+
+  # remove old vid texture file
+  rm ./node_modules/build/three.module.js
+
+  # download custom patched file
+  curl https://raw.githubusercontent.com/honeyimholm/three.js/hubs/master/three.module.js > ./node_modules/three/build/three.module.js
+
+  #TODO change the three.module.js directly!
+  echo "done downloading"
+fi

src/assets/stylesheets/message-entry.scss

@@ -3,7 +3,7 @@
 :local(.message-entry) {
   position: relative;
   margin: 10px 24px 24px 24px;
-  height: 48px;
+  height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -111,12 +111,15 @@
   position: absolute;
   z-index: 2;
   bottom: 20px;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-  width: 95%;
+  /* Removing code that centers input bar on the bottom of the screen
+   * left: 5%;
+   * -webkit-transform: translateX(-50%);
+   * transform: translateX(-50%);
+   */
+  margin-left: 16px;
+  width: 40%;
   max-width: 700px;
-  height: 48px;
+  height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;

src/assets/stylesheets/presence-log.scss

@@ -146,11 +146,14 @@
   position: absolute;
   bottom: 64px;
   z-index: 1;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-  width: 95%;
+  /*
+   * left: 50%;
+   * -webkit-transform: translateX(-50%);
+   * transform: translateX(-50%);
+   * width: 95%;
+   */
   max-width: 700px;
+  margin-left: 8px;
 
   :local(.presence-log-entry) {
     background-color: var(--hud-panel-background);

src/assets/translations.data.json

@@ -255,7 +255,7 @@
     "invite.enter_via_modal": "Others may enter via ",
     "invite.tweet": "tweet",
     "invite.and_enter_code": " code:",
-    "invite.duration_of_code" : "new code every 72 hours",
+    "invite.duration_of_code": "new code every 72 hours",
     "invite.or_visit": "Share room link:",
     "invite.or_visit_modal": "or by visiting permalink",
     "invite.embed": "or embed on a page",
@@ -350,8 +350,8 @@
     "tips.mobile.invite": "Use the Share button to share this room.",
     "tips.mobile.feedback": "🦆 Quack! Want to help Hubs?",
     "tips.mobile.feedback-link": "Tell the Duck.",
-    "tips.desktop.video_share_mode": "You're streaming. Select again to stop sharing video.",
     "tips.desktop.pen_mode": "Press ESC or right click to drop pen. Ctrl-Z to undo.",
+    "tips.desktop.video_share_mode": "",
     "tips.desktop.mute_mode": "You are muted. Click or press M to un-mute.",
     "tips.desktop.look": "Welcome to %app-name%! Let's take a quick tour. 👋 Click and drag to look around.",
     "tips.desktop.locomotion": "Use the W A S D keys to move. Hold shift to boost.",
@@ -448,7 +448,7 @@
     "support.supported": "supported",
     "support.unsupported": "unsupported"
   },
-   "cn-zh": {
+  "cn-zh": {
     "app-name": "App",
     "editor-name": "Scene Editor",
     "contact-email": "[email protected]",
@@ -703,7 +703,7 @@
     "invite.enter_via_modal": "其他人可以进入通过 ",
     "invite.tweet": "tweet",
     "invite.and_enter_code": " 号码:",
-    "invite.duration_of_code" : "每72小时产生一次新号码",
+    "invite.duration_of_code": "每72小时产生一次新号码",
     "invite.or_visit": "分享房间链接:",
     "invite.or_visit_modal": "或是通过永久链接访问",
     "invite.embed": "或是嵌入到网页里",
@@ -875,4 +875,4 @@
     "cloud.aws_quick_start": "快速开始指南",
     "cloud.splash_tag": "为你自己的 Hubs stack可配置的基础设施"
   }
-}
+}

src/components/media-views.js

@@ -718,6 +718,7 @@ AFRAME.registerComponent("media-video", {
         isReady = () => true;
       } else {
         texture = new THREE.VideoTexture(videoEl);
+        texture.frameRate = 25
         texture.minFilter = THREE.LinearFilter;
         texture.encoding = THREE.sRGBEncoding;
         isReady = () =>

src/components/offset-absolute.js

@@ -0,0 +1,98 @@
+import { waitForDOMContentLoaded } from "../utils/async-utils";
+
+/**
+ * Positions an entity relative to a given target when the given event is fired.
+ * @component offset-relative-to
+ */
+AFRAME.registerComponent("offset-absolute", {
+  schema: {
+    target: {
+      type: "selector"
+    },
+    offset: {
+      type: "vec3"
+    },
+    on: {
+      type: "string"
+    },
+    orientation: {
+      default: 2 // see doc/image_orientations.gif
+    },
+    selfDestruct: {
+      default: false
+    },
+    lookAt: {
+      default: false
+    }
+  },
+
+  init() {
+    this.updateOffset = this.updateOffset.bind(this);
+
+    waitForDOMContentLoaded().then(() => {
+      if (this.data.on) {
+        this.el.sceneEl.addEventListener(this.data.on, this.updateOffset);
+      } else {
+        this.updateOffset();
+      }
+    });
+  },
+
+  updateOffset: (function() {
+    const y = new THREE.Vector3(0, 1, 0);
+    const z = new THREE.Vector3(0, 0, -1);
+
+    let debugVec = new THREE.Vector3();
+    return function() {
+      const obj = this.el.object3D;
+      obj.position.copy(this.data.offset);
+      const QUARTER_CIRCLE = Math.PI / 2;
+      // DEBUG
+      obj.getWorldPosition(debugVec);
+      console.log("media pos: " + debugVec);
+
+      // NOTE: ROTATION CODE
+      // See doc/image_orientations.gif
+      /*switch (this.data.orientation) {
+        case 8:
+          obj.rotateOnAxis(z, 3 * QUARTER_CIRCLE);
+          break;
+        case 7:
+          obj.rotateOnAxis(z, 3 * QUARTER_CIRCLE);
+          obj.rotateOnAxis(y, 2 * QUARTER_CIRCLE);
+          break;
+        case 6:
+          obj.rotateOnAxis(z, QUARTER_CIRCLE);
+          break;
+        case 5:
+          obj.rotateOnAxis(z, QUARTER_CIRCLE);
+          obj.rotateOnAxis(y, 2 * QUARTER_CIRCLE);
+          break;
+        case 4:
+          obj.rotateOnAxis(z, 2 * QUARTER_CIRCLE);
+          obj.rotateOnAxis(y, 2 * QUARTER_CIRCLE);
+          break;
+        case 3:
+          obj.rotateOnAxis(z, 2 * QUARTER_CIRCLE);
+          break;
+        case 2:
+          obj.rotateOnAxis(y, 2 * QUARTER_CIRCLE);
+          break;
+        case 1:
+        default:
+          break;
+      }
+      */
+     //hard coding rotation
+      obj.rotateOnAxis(y, 2 * QUARTER_CIRCLE);
+      obj.matrixNeedsUpdate = true;
+
+      if (this.data.selfDestruct) {
+        if (this.data.on) {
+          this.el.sceneEl.removeEventListener(this.data.on, this.updateOffset);
+        }
+        this.el.removeAttribute("offset-absolute");
+      }
+    };
+  })()
+});

src/hub.js

@@ -53,6 +53,7 @@ import "./components/hand-controls2";
 import "./components/hoverable-visuals";
 import "./components/hover-visuals";
 import "./components/offset-relative-to";
+import "./components/offset-absolute";
 import "./components/player-info";
 import "./components/debug";
 import "./components/hand-poses";