diff --git a/package-lock.json b/package-lock.json
index 4ea5eaa9d80c7f08e7d95d0067f961a81489ae0b..b71dbe9e1608560a4162ddb75d111bbda7e427ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -518,7 +518,9 @@
"requires": {
"@tweenjs/tween.js": "^16.8.0",
"browserify-css": "^0.8.2",
+ "debug": "github:ngokevin/debug#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a",
"deep-assign": "^2.0.0",
+ "document-register-element": "github:dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90",
"envify": "^3.4.1",
"load-bmfont": "^1.2.3",
"object-assign": "^4.0.1",
@@ -532,11 +534,7 @@
"dependencies": {
"debug": {
"version": "github:ngokevin/debug#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a",
- "from": "github:ngokevin/debug#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a"
- },
- "document-register-element": {
- "version": "github:dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90",
- "from": "github:dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90"
+ "from": "github:ngokevin/debug#noTimestamp"
},
"three": {
"version": "0.94.0",
@@ -3906,6 +3904,10 @@
"esutils": "^2.0.2"
}
},
+ "document-register-element": {
+ "version": "github:dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90",
+ "from": "github:dmarcos/document-register-element#8ccc532b7"
+ },
"dom-converter": {
"version": "0.1.4",
"resolved": "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz",
@@ -10542,6 +10544,12 @@
}
}
},
+ "raw-loader": {
+ "version": "0.5.1",
+ "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+ "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
+ "dev": true
+ },
"react": {
"version": "16.4.1",
"resolved": "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz",
diff --git a/package.json b/package.json
index d9e3d59c08ecdbf2adc92df5046aa149331bae1f..40a1584087063e2ddac674079394694a76783491 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
"doc": "node ./scripts/doc/build.js",
"prettier": "prettier --write '*.js' 'src/**/*.js'",
"lint:js": "eslint '*.js' 'scripts/**/*.js' 'src/**/*.js'",
- "lint:html": "htmlhint 'src/**/*.html'",
+ "lint:html": "htmlhint 'src/**/*.html' && node scripts/indent-linter.js 'src/**/*.html'",
"lint": "npm run lint:js && npm run lint:html",
"test": "npm run lint && npm run build"
},
@@ -87,6 +87,7 @@
"htmlhint": "^0.9.13",
"node-sass": "^4.9.3",
"prettier": "^1.7.0",
+ "raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.7",
"selfsigned": "^1.10.2",
diff --git a/scripts/hab-build-and-push.sh b/scripts/hab-build-and-push.sh
index 1f0b129f00851cfae504fc347b17adfdde7ffb3f..c4de33cfb9e4e50bfd9132536b6b44f3ed0262f5 100755
--- a/scripts/hab-build-and-push.sh
+++ b/scripts/hab-build-and-push.sh
@@ -22,7 +22,7 @@ pushd "$DIR/.."
rm /usr/bin/env
ln -s "$(hab pkg path core/coreutils)/bin/env" /usr/bin/env
-hab pkg install -b core/coreutils core/bash core/node core/git core/aws-cli core/python2
+hab pkg install -b core/coreutils core/bash core/node10 core/git core/aws-cli core/python2
npm ci --verbose --no-progress
npm rebuild node-sass # HACK sometimes node-sass build fails
diff --git a/scripts/indent-linter.js b/scripts/indent-linter.js
new file mode 100644
index 0000000000000000000000000000000000000000..33a23bcbed300d6dc5e066084745f3116ed61ed0
--- /dev/null
+++ b/scripts/indent-linter.js
@@ -0,0 +1,55 @@
+/*
+ * indent-linter <glob> <num-spaces>
+ * Generic, syntax-unaware indentation linter that checks if indentation is even and does not skip indentation levels.
+ */
+
+const fs = require("fs");
+const glob = require("glob");
+
+function lintFile(filename, spaces) {
+ const file = fs.readFileSync(filename, { encoding: "utf8" });
+ const lines = file.split("\n");
+
+ const errors = [];
+ let level = 0;
+
+ for (let i = 0; i < lines.length; i++) {
+ const line = lines[i];
+ const firstNonSpaceIndex = (line.match(/[^ ]/) || { index: 0 }).index;
+
+ const indentation = firstNonSpaceIndex;
+ const indentationDividesCleanly = indentation % spaces === 0;
+ const indentationIsNoMoreThanOneLevelHigher = (indentation - level) / spaces <= 1;
+
+ if (indentationDividesCleanly && indentationIsNoMoreThanOneLevelHigher) {
+ if (indentation !== 0) {
+ level = indentation;
+ }
+ } else {
+ const expected = level;
+ const delta = indentation - expected;
+ const postfix = delta < 0 ? "fewer" : "extra";
+ errors.push(
+ ` ${i + 1}\tExpected ${expected / spaces} levels of indentation, saw ${Math.abs(delta)} space(s) ${postfix}.`
+ );
+ }
+ }
+
+ if (errors.length) {
+ console.log(filename);
+ console.log(errors.join("\n"));
+ console.log(` ${errors.length} indentation error(s).\n`);
+ }
+
+ return errors.length;
+}
+
+glob(process.argv[2], (err, files) => {
+ console.log("");
+ const spaces = parseInt(process.argv[3] || "4", 10);
+
+ const errorCount = files.map(file => lintFile(file, spaces)).reduce((a, c) => a + c, 0);
+
+ console.log(`${errorCount} total indentation error(s).\n`);
+ process.exit(errorCount > 0 ? 1 : 0);
+});
diff --git a/src/assets/share_message.png b/src/assets/share_message.png
new file mode 100644
index 0000000000000000000000000000000000000000..6fcc189753d076a7fb23e12b73a8f5bd9a59e1df
Binary files /dev/null and b/src/assets/share_message.png differ
diff --git a/src/assets/spawn_message-hover.png b/src/assets/spawn_message-hover.png
deleted file mode 100644
index ce99dd993b8f655ab0c1552726681dd40537b557..0000000000000000000000000000000000000000
Binary files a/src/assets/spawn_message-hover.png and /dev/null differ
diff --git a/src/assets/stylesheets/presence-log.scss b/src/assets/stylesheets/presence-log.scss
index 3b0b3021034dff89b60cf26e24e536e4dc71aaf3..c8ee0d644c111238f3c82759443c7afabc69f371 100644
--- a/src/assets/stylesheets/presence-log.scss
+++ b/src/assets/stylesheets/presence-log.scss
@@ -64,27 +64,38 @@
max-width: 75%;
}
- :local(.spawn-message) {
+ :local(.icon-button) {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
outline-style: none;
width: 24px;
height: 24px;
- background-size: 100%;
+ background-size: 20px;
+ background-position: center;
+ background-repeat: no-repeat;
border: 0;
display: flex;
justify-content: center;
align-items: center;
align-self: flex-start;
cursor: pointer;
- background-image: url(../spawn_message.png);
margin-right: 6px;
+ border-radius: 12px;
background-color: transparent;
+
+ &:hover {
+ background-color: $action-color;
+ }
+ }
+
+ :local(.spawn-message) {
+ background-image: url(../spawn_message.png);
}
- :local(.spawn-message):hover {
- background-image: url(../spawn_message-hover.png);
+ // TODO replace these icons with share button
+ :local(.share) {
+ background-image: url(../share_message.png);
}
&:local(.media) {
@@ -99,7 +110,7 @@
img {
height: 35px;
- margin-right: 8px;
+ margin-left: 8px;
border: 2px solid rgba(255,255,255,0.15);
display: block;
border-radius: 5px;
diff --git a/src/assets/stylesheets/scene-ui.scss b/src/assets/stylesheets/scene-ui.scss
index bd3abf0a6d82cf898081da35c23add7ce692b024..99f3ddae3255817ec0d7ad22e2bd15a4fa6d9a7f 100644
--- a/src/assets/stylesheets/scene-ui.scss
+++ b/src/assets/stylesheets/scene-ui.scss
@@ -38,10 +38,6 @@
justify-content: center;
pointer-events: auto;
- button {
- @extend %action-button;
- border: 0;
- }
}
:local(.logoTagline) {
@@ -95,6 +91,12 @@
:local(.attribution) {
font-size: 1.0em;
white-space: wrap;
+
+ a {
+ font-size: 0.8em;
+ color: black;
+ pointer-events: auto;
+ }
}
:local(.screenshot) {
@@ -147,3 +149,23 @@
width: 200px;
}
}
+
+:local(.createButtons) {
+ position: relative;
+ display: flex;
+}
+
+:local(.createButton) {
+ @extend %action-button;
+ width: 100%;
+ border: 0;
+}
+
+:local(.optionsButton) {
+ @extend %fa-icon-button;
+ @extend %fa-icon-big;
+ position: absolute;
+ right: 10px;
+ top: -12px;
+ color: white;
+}
diff --git a/src/assets/stylesheets/scene.scss b/src/assets/stylesheets/scene.scss
index 44e6591aacfa994bb79a4a0354b129ae171c4741..49f588251e3067da70aae0151e0463d6508910e1 100644
--- a/src/assets/stylesheets/scene.scss
+++ b/src/assets/stylesheets/scene.scss
@@ -1,2 +1,3 @@
@import 'shared';
@import 'loader';
+@import 'info-dialog';
diff --git a/src/avatar-selector.html b/src/avatar-selector.html
index 44e92f4e6d19b5d7cc2258e56cfa76c08a20558a..ca3eb4028aa3753b34210ce3c5e7e6570bed2130 100644
--- a/src/avatar-selector.html
+++ b/src/avatar-selector.html
@@ -2,13 +2,13 @@
<html>
<head>
- <meta charset="utf-8">
- <title>avatar selector</title>
- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+ <meta charset="utf-8">
+ <title>avatar selector</title>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
- <div id="selector-root"></div>
+ <div id="selector-root"></div>
</body>
</html>
diff --git a/src/components/hover-visuals.js b/src/components/hover-visuals.js
new file mode 100644
index 0000000000000000000000000000000000000000..ec0111e26988b3a7fb10461c03ca496d9bb7c135
--- /dev/null
+++ b/src/components/hover-visuals.js
@@ -0,0 +1,40 @@
+const interactorTransform = [];
+
+/**
+ * Applies effects to a hoverer based on hover state.
+ * @namespace interactables
+ * @component hover-visuals
+ */
+AFRAME.registerComponent("hover-visuals", {
+ schema: {
+ hand: { type: "string" },
+ controller: { type: "selector" }
+ },
+ init() {
+ // uniforms are set from the component responsible for loading the mesh.
+ this.uniforms = null;
+ },
+ remove() {
+ this.uniforms = null;
+ },
+ tick() {
+ if (!this.uniforms || !this.uniforms.size) return;
+
+ this.el.object3D.matrixWorld.toArray(interactorTransform);
+ const hovering = this.data.controller.components["super-hands"].state.has("hover-start");
+
+ for (const uniform of this.uniforms.values()) {
+ if (this.data.hand === "left") {
+ uniform.hubs_HighlightInteractorOne.value = hovering;
+ uniform.hubs_InteractorOnePos.value[0] = interactorTransform[12];
+ uniform.hubs_InteractorOnePos.value[1] = interactorTransform[13];
+ uniform.hubs_InteractorOnePos.value[2] = interactorTransform[14];
+ } else {
+ uniform.hubs_HighlightInteractorTwo.value = hovering;
+ uniform.hubs_InteractorTwoPos.value[0] = interactorTransform[12];
+ uniform.hubs_InteractorTwoPos.value[1] = interactorTransform[13];
+ uniform.hubs_InteractorTwoPos.value[2] = interactorTransform[14];
+ }
+ }
+ }
+});
diff --git a/src/components/hoverable-visuals.js b/src/components/hoverable-visuals.js
new file mode 100644
index 0000000000000000000000000000000000000000..aa33cd4414b611055e592fb520c9b013b945099b
--- /dev/null
+++ b/src/components/hoverable-visuals.js
@@ -0,0 +1,76 @@
+const interactorOneTransform = [];
+const interactorTwoTransform = [];
+
+/**
+ * Applies effects to a hoverable based on hover state.
+ * @namespace interactables
+ * @component hoverable-visuals
+ */
+AFRAME.registerComponent("hoverable-visuals", {
+ schema: {
+ cursorController: { type: "selector" },
+ enableSweepingEffect: { type: "boolean", default: true }
+ },
+ init() {
+ // uniforms and boundingSphere are set from the component responsible for loading the mesh.
+ this.uniforms = null;
+ this.boundingSphere = new THREE.Sphere();
+
+ this.sweepParams = [0, 0];
+ },
+ remove() {
+ this.uniforms = null;
+ this.boundingBox = null;
+ },
+ tick(time) {
+ if (!this.uniforms || !this.uniforms.size) return;
+
+ const { hoverers } = this.el.components["hoverable"];
+
+ let interactorOne, interactorTwo;
+ for (const hoverer of hoverers) {
+ if (hoverer.id === "player-left-controller") {
+ interactorOne = hoverer.object3D;
+ } else if (hoverer.id === "cursor") {
+ if (this.data.cursorController.components["cursor-controller"].enabled) {
+ interactorTwo = hoverer.object3D;
+ }
+ } else {
+ interactorTwo = hoverer.object3D;
+ }
+ }
+
+ if (interactorOne) {
+ interactorOne.matrixWorld.toArray(interactorOneTransform);
+ }
+ if (interactorTwo) {
+ interactorTwo.matrixWorld.toArray(interactorTwoTransform);
+ }
+
+ if (interactorOne || interactorTwo) {
+ const worldY = this.el.object3D.matrixWorld.elements[13];
+ const scaledRadius = this.el.object3D.scale.y * this.boundingSphere.radius;
+ this.sweepParams[0] = worldY - scaledRadius;
+ this.sweepParams[1] = worldY + scaledRadius;
+ }
+
+ for (const uniform of this.uniforms.values()) {
+ uniform.hubs_EnableSweepingEffect.value = this.data.enableSweepingEffect;
+ uniform.hubs_SweepParams.value = this.sweepParams;
+
+ uniform.hubs_HighlightInteractorOne.value = !!interactorOne;
+ uniform.hubs_InteractorOnePos.value[0] = interactorOneTransform[12];
+ uniform.hubs_InteractorOnePos.value[1] = interactorOneTransform[13];
+ uniform.hubs_InteractorOnePos.value[2] = interactorOneTransform[14];
+
+ uniform.hubs_HighlightInteractorTwo.value = !!interactorTwo;
+ uniform.hubs_InteractorTwoPos.value[0] = interactorTwoTransform[12];
+ uniform.hubs_InteractorTwoPos.value[1] = interactorTwoTransform[13];
+ uniform.hubs_InteractorTwoPos.value[2] = interactorTwoTransform[14];
+
+ if (interactorOne || interactorTwo) {
+ uniform.hubs_Time.value = time;
+ }
+ }
+ }
+});
diff --git a/src/components/media-loader.js b/src/components/media-loader.js
index eb6a100edd5dadefbbe85417a561636db79d2a2b..121bc46ad23d089904c778a57ddc8243d988c2a0 100644
--- a/src/components/media-loader.js
+++ b/src/components/media-loader.js
@@ -1,9 +1,10 @@
import { getBox, getScaleCoefficient } from "../utils/auto-box-collider";
-import { guessContentType, proxiedUrlFor, resolveUrl } from "../utils/media-utils";
+import { guessContentType, proxiedUrlFor, resolveUrl, injectCustomShaderChunks } from "../utils/media-utils";
import { addAnimationComponents } from "../utils/animation";
import "three/examples/js/loaders/GLTFLoader";
import loadingObjectSrc from "../assets/LoadingObject_Atom.glb";
+
const gltfLoader = new THREE.GLTFLoader();
let loadingObject;
gltfLoader.load(loadingObjectSrc, gltf => {
@@ -18,6 +19,8 @@ const fetchMaxContentIndex = url => {
return fetch(url).then(r => parseInt(r.headers.get("x-max-content-index")));
};
+const boundingBox = new THREE.Box3();
+
AFRAME.registerComponent("media-loader", {
schema: {
src: { type: "string" },
@@ -30,6 +33,7 @@ AFRAME.registerComponent("media-loader", {
this.onError = this.onError.bind(this);
this.showLoader = this.showLoader.bind(this);
this.clearLoadingTimeout = this.clearLoadingTimeout.bind(this);
+ this.onMediaLoaded = this.onMediaLoaded.bind(this);
this.shapeAdded = false;
this.hasBakedShapes = false;
},
@@ -100,6 +104,20 @@ AFRAME.registerComponent("media-loader", {
delete this.showLoaderTimeout;
},
+ setupHoverableVisuals() {
+ const hoverableVisuals = this.el.components["hoverable-visuals"];
+ if (hoverableVisuals) {
+ hoverableVisuals.uniforms = injectCustomShaderChunks(this.el.object3D);
+ boundingBox.setFromObject(this.el.object3DMap.mesh);
+ boundingBox.getBoundingSphere(hoverableVisuals.boundingSphere);
+ }
+ },
+
+ onMediaLoaded() {
+ this.clearLoadingTimeout();
+ this.setupHoverableVisuals();
+ },
+
async update(oldData) {
try {
const { src } = this.data;
@@ -135,13 +153,13 @@ AFRAME.registerComponent("media-loader", {
if (contentType.startsWith("video/") || contentType.startsWith("audio/")) {
this.el.removeAttribute("gltf-model-plus");
this.el.removeAttribute("media-image");
- this.el.addEventListener("video-loaded", this.clearLoadingTimeout, { once: true });
+ this.el.addEventListener("video-loaded", this.onMediaLoaded, { once: true });
this.el.setAttribute("media-video", { src: accessibleUrl });
this.el.setAttribute("position-at-box-shape-border", { dirs: ["forward", "back"] });
} else if (contentType.startsWith("image/")) {
this.el.removeAttribute("gltf-model-plus");
this.el.removeAttribute("media-video");
- this.el.addEventListener("image-loaded", this.clearLoadingTimeout, { once: true });
+ this.el.addEventListener("image-loaded", this.onMediaLoaded, { once: true });
this.el.removeAttribute("media-pager");
this.el.setAttribute("media-image", { src: accessibleUrl, contentType });
this.el.setAttribute("position-at-box-shape-border", { dirs: ["forward", "back"] });
@@ -152,7 +170,7 @@ AFRAME.registerComponent("media-loader", {
// 1. we pass the canonical URL to the pager so it can easily make subresource URLs
// 2. we don't remove the media-image component -- media-pager uses that internally
this.el.setAttribute("media-pager", { src: canonicalUrl });
- this.el.addEventListener("preview-loaded", this.clearLoadingTimeout, { once: true });
+ this.el.addEventListener("preview-loaded", this.onMediaLoaded, { once: true });
this.el.setAttribute("position-at-box-shape-border", { dirs: ["forward", "back"] });
} else if (
contentType.includes("application/octet-stream") ||
@@ -168,6 +186,7 @@ AFRAME.registerComponent("media-loader", {
this.clearLoadingTimeout();
this.hasBakedShapes = !!(this.el.body && this.el.body.shapes.length > (this.shapeAdded ? 1 : 0));
this.setShapeAndScale(this.data.resize);
+ this.setupHoverableVisuals();
addAnimationComponents(this.el);
},
{ once: true }
diff --git a/src/components/player-info.js b/src/components/player-info.js
index a7e0812f8810c56544f14f2ed0c93602050f2a13..7c5cbd89e1f97cd0a61cda24187d24a01858284e 100644
--- a/src/components/player-info.js
+++ b/src/components/player-info.js
@@ -1,3 +1,5 @@
+import { injectCustomShaderChunks } from "../utils/media-utils";
+
/**
* Sets player info state, including avatar choice and display name.
* @namespace avatar
@@ -32,5 +34,10 @@ AFRAME.registerComponent("player-info", {
if (this.data.avatarSrc && modelEl) {
modelEl.setAttribute("gltf-model-plus", "src", this.data.avatarSrc);
}
+
+ const uniforms = injectCustomShaderChunks(this.el.object3D);
+ this.el.querySelectorAll("[hover-visuals]").forEach(el => {
+ el.components["hover-visuals"].uniforms = uniforms;
+ });
}
});
diff --git a/src/components/super-spawner.js b/src/components/super-spawner.js
index 7ff4e1189f589d9d026ba63e920dfc5d47a78760..c5e557401cf5ea9e57e471e7b83a1b638f8cb4b7 100644
--- a/src/components/super-spawner.js
+++ b/src/components/super-spawner.js
@@ -85,6 +85,8 @@ AFRAME.registerComponent("super-spawner", {
this.onSpawnEvent = this.onSpawnEvent.bind(this);
this.sceneEl = document.querySelector("a-scene");
+
+ this.el.setAttribute("hoverable-visuals", { cursorController: "#cursor-controller", enableSweepingEffect: false });
},
play() {
diff --git a/src/hub.html b/src/hub.html
index b67f2281f568fbef8ef3e01c3b023758f4edae5d..7f35a607c476e8f865ceb41223220dc602872eca 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -92,22 +92,22 @@
<template data-name="Neck">
<a-entity>
<a-entity
- class="nametag"
- billboard
- text="side: double; align: center; color: #ddd"
- position="0 1 0"
- scale="6 6 6"
- ></a-entity>
+ class="nametag"
+ billboard
+ text="side: double; align: center; color: #ddd"
+ position="0 1 0"
+ scale="6 6 6"
+ ></a-entity>
</a-entity>
</template>
<template data-name="Chest">
- <a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
- <a-entity billboard>
- <a-entity mixin="rounded-text-button" block-button visible-while-frozen ui-class-while-frozen position="0 0 .35"> </a-entity>
- <a-entity visible-while-frozen text="value:block; width:2.5; align:center;" position="0 0 0.36"></a-entity>
+ <a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility>
+ <a-entity billboard>
+ <a-entity mixin="rounded-text-button" block-button visible-while-frozen ui-class-while-frozen position="0 0 .35"> </a-entity>
+ <a-entity visible-while-frozen text="value:Block; width:2.5; align:center;" position="0 0 0.36"></a-entity>
+ </a-entity>
</a-entity>
- </a-entity>
</template>
<template data-name="Head">
@@ -117,22 +117,22 @@
personal-space-invader="radius: 0.15; useMaterial: true;"
bone-visibility
>
- <a-cylinder
- static-body
- radius="0.13"
- height="0.2"
- position="0 0.07 0.05"
- visible="false"
- ></a-cylinder>
+ <a-cylinder
+ static-body
+ radius="0.13"
+ height="0.2"
+ position="0 0.07 0.05"
+ visible="false"
+ ></a-cylinder>
</a-entity>
</template>
<template data-name="LeftHand">
- <a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
+ <a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
</template>
<template data-name="RightHand">
- <a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
+ <a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
</template>
</a-entity>
</a-entity>
@@ -146,6 +146,7 @@
grabbable
stretchable="useWorldPosition: true; usePhysics: never"
hoverable
+ hoverable-visuals="cursorController: #cursor-controller"
auto-scale-cannon-physics-body
sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;"
position-at-box-shape-border="target:.freeze-menu"
@@ -203,7 +204,7 @@
sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;"
super-networked-interactable="counter: #camera-counter;"
position-at-box-shape-border="target:.delete-button"
- rotation
+ set-yxz-order
auto-scale-cannon-physics-body
>
<a-entity class="delete-button" visible-while-frozen>
@@ -270,21 +271,21 @@
></a-mixin>
<a-mixin id="controller-super-hands"
- super-hands="
- colliderEvent: collisions;
- colliderEventProperty: els;
- colliderEndEvent: collisions;
- colliderEndEventProperty: clearedEls;
- grabStartButtons: primary_hand_grab, secondary_hand_grab;
- grabEndButtons: primary_hand_release, secondary_hand_release;
- stretchStartButtons: primary_hand_grab, secondary_hand_grab;
- stretchEndButtons: primary_hand_release, secondary_hand_release;
- dragDropStartButtons: hand_grab, secondary_hand_grab;
- dragDropEndButtons: hand_release, secondary_hand_release;
- activateStartButtons: secondary_hand_grab, next_color, previous_color, increase_radius, decrease_radius, scroll_up, scroll_down, scroll_left, scroll_right;
- activateEndButtons: secondary_hand_release, vertical_scroll_release, horizontal_scroll_release, thumb_up;"
- collision-filter="collisionForces: false"
- physics-collider
+ super-hands="
+ colliderEvent: collisions;
+ colliderEventProperty: els;
+ colliderEndEvent: collisions;
+ colliderEndEventProperty: clearedEls;
+ grabStartButtons: primary_hand_grab, secondary_hand_grab;
+ grabEndButtons: primary_hand_release, secondary_hand_release;
+ stretchStartButtons: primary_hand_grab, secondary_hand_grab;
+ stretchEndButtons: primary_hand_release, secondary_hand_release;
+ dragDropStartButtons: hand_grab, secondary_hand_grab;
+ dragDropEndButtons: hand_release, secondary_hand_release;
+ activateStartButtons: secondary_hand_grab, next_color, previous_color, increase_radius, decrease_radius, scroll_up, scroll_down, scroll_left, scroll_right;
+ activateEndButtons: secondary_hand_release, vertical_scroll_release, horizontal_scroll_release, thumb_up;"
+ collision-filter="collisionForces: false"
+ physics-collider
></a-mixin>
</a-assets>
@@ -339,134 +340,134 @@
player-info
cardboard-controls
>
- <a-entity
- id="player-hud"
- hud-controller="head: #player-camera;"
- vr-mode-toggle-visibility
- vr-mode-toggle-playing__hud-controller
- >
- <a-entity in-world-hud="haptic:#player-right-controller;raycaster:#player-right-controller;" rotation="30 0 0">
- <a-rounded height="0.08" width="0.5" color="#000000" position="-0.20 0.125 0" radius="0.040" opacity="0.35" class="hud bg"></a-rounded>
- <a-entity id="hud-hub-entry-link" text=" value:; width:1.1; align:center;" position="0.05 0.165 0"></a-entity>
- <a-rounded height="0.13" width="0.59" color="#000000" position="-0.24 -0.065 0" radius="0.065" opacity="0.35" class="hud bg"></a-rounded>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;" hoverable></a-image>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze" hoverable></a-image>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pen; activeTooltipText: Pen; image: #spawn-pen; hoverImage: #spawn-pen-hover; activeImage: #spawn-pen; activeHoverImage: #spawn-pen-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud penhud" material="alphaTest:0.1;" hoverable></a-image>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Camera; activeTooltipText: Camera; image: #spawn-camera; hoverImage: #spawn-camera-hover; activeImage: #spawn-camera; activeHoverImage: #spawn-camera-hover" scale="0.1 0.1 0.1" position="0.28 0 0.001" class="ui hud cameraBtn" material="alphaTest:0.1;" hoverable></a-image>
- <a-rounded visible="false" id="hud-tooltip" height="0.08" width="0.3" color="#000000" position="-0.15 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
- <a-entity text="value: Mute Mic; align:center;" position="0.15 0.04 0.001" ></a-entity>
- </a-rounded>
+ <a-entity
+ id="player-hud"
+ hud-controller="head: #player-camera;"
+ vr-mode-toggle-visibility
+ vr-mode-toggle-playing__hud-controller
+ >
+ <a-entity in-world-hud="haptic:#player-right-controller;raycaster:#player-right-controller;" rotation="30 0 0">
+ <a-rounded height="0.08" width="0.5" color="#000000" position="-0.20 0.125 0" radius="0.040" opacity="0.35" class="hud bg"></a-rounded>
+ <a-entity id="hud-hub-entry-link" text=" value:; width:1.1; align:center;" position="0.05 0.165 0"></a-entity>
+ <a-rounded height="0.13" width="0.59" color="#000000" position="-0.24 -0.065 0" radius="0.065" opacity="0.35" class="hud bg"></a-rounded>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;" hoverable></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze" hoverable></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pen; activeTooltipText: Pen; image: #spawn-pen; hoverImage: #spawn-pen-hover; activeImage: #spawn-pen; activeHoverImage: #spawn-pen-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud penhud" material="alphaTest:0.1;" hoverable></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Camera; activeTooltipText: Camera; image: #spawn-camera; hoverImage: #spawn-camera-hover; activeImage: #spawn-camera; activeHoverImage: #spawn-camera-hover" scale="0.1 0.1 0.1" position="0.28 0 0.001" class="ui hud cameraBtn" material="alphaTest:0.1;" hoverable></a-image>
+ <a-rounded visible="false" id="hud-tooltip" height="0.08" width="0.3" color="#000000" position="-0.15 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
+ <a-entity text="value: Mute Mic; align:center;" position="0.15 0.04 0.001" ></a-entity>
+ </a-rounded>
+ </a-entity>
</a-entity>
- </a-entity>
-
- <a-entity
- id="player-camera"
- class="camera"
- camera
- personal-space-bubble="radius: 0.4;"
- pitch-yaw-rotator
- >
+
<a-entity
- id="gaze-teleport"
- position = "0.15 0 0"
+ id="player-camera"
+ class="camera"
+ camera
+ personal-space-bubble="radius: 0.4;"
+ pitch-yaw-rotator
+ set-yxz-order
+ >
+ <a-entity
+ id="gaze-teleport"
+ position = "0.15 0 0"
+ teleport-controls="
+ cameraRig: #player-rig;
+ teleportOrigin: #player-camera;
+ button: gaze-teleport_;
+ collisionEntities: [nav-mesh];
+ drawIncrementally: true;
+ incrementalDrawMs: 300;
+ hitOpacity: 0.3;
+ missOpacity: 0.1;
+ curveShootingSpeed: 12;"
+ action-to-event__start-teleport="path: /actions/startTeleport; event: gaze-teleport_down"
+ action-to-event__stop-teleport="path: /actions/stopTeleport; event: gaze-teleport_up"
+ ></a-entity>
+ </a-entity>
+
+ <a-entity
+ id="player-left-controller"
+ class="left-controller"
+ hand-controls2="left"
+ tracked-controls
teleport-controls="
cameraRig: #player-rig;
teleportOrigin: #player-camera;
- button: gaze-teleport_;
+ button: left-teleport_;
collisionEntities: [nav-mesh];
drawIncrementally: true;
incrementalDrawMs: 300;
hitOpacity: 0.3;
missOpacity: 0.1;
curveShootingSpeed: 12;"
- action-to-event__start-teleport="path: /actions/startTeleport; event: gaze-teleport_down"
- action-to-event__stop-teleport="path: /actions/stopTeleport; event: gaze-teleport_up"
- ></a-entity>
- </a-entity>
-
- <a-entity
- id="player-left-controller"
- class="left-controller"
- hand-controls2="left"
- tracked-controls
- teleport-controls="
- cameraRig: #player-rig;
- teleportOrigin: #player-camera;
- button: left-teleport_;
- collisionEntities: [nav-mesh];
- drawIncrementally: true;
- incrementalDrawMs: 300;
- hitOpacity: 0.3;
- missOpacity: 0.1;
- curveShootingSpeed: 12;"
- haptic-feedback
- body="type: static; shape: none;"
- mixin="controller-super-hands"
- controls-shape-offset
- action-to-event__a="path: /actions/leftHandStartTeleport; event: left-teleport_down;"
- action-to-event__b="path: /actions/leftHandStopTeleport; event: left-teleport_up;"
- action-to-event__c="path: /actions/leftHandGrab; event: primary_hand_grab;"
- action-to-event__d="path: /actions/leftHandDrop; event: primary_hand_release;"
- >
- </a-entity>
-
- <a-entity
- id="player-right-controller"
- class="right-controller"
- hand-controls2="right"
- tracked-controls
- teleport-controls="
- cameraRig: #player-rig;
- teleportOrigin: #player-camera;
- button: right-teleport_;
- collisionEntities: [nav-mesh];
- drawIncrementally: true;
- incrementalDrawMs: 300;
- hitOpacity: 0.3;
- missOpacity: 0.1;
- curveShootingSpeed: 12;"
- haptic-feedback
- body="type: static; shape: none;"
- mixin="controller-super-hands"
- controls-shape-offset
- action-to-event__a="path: /actions/rightHandStartTeleport; event: right-teleport_down;"
- action-to-event__b="path: /actions/rightHandStopTeleport; event: right-teleport_up;"
- action-to-event__c="path: /actions/rightHandGrab; event: primary_hand_grab;"
- action-to-event__d="path: /actions/rightHandDrop; event: primary_hand_release;"
- >
- </a-entity>
-
- <a-entity gltf-model-plus="inflate: true;"
- class="model">
- <template data-name="RootScene">
- <a-entity
- ik-controller
- hand-pose__left
- hand-pose__right
- hand-pose-controller__left="networkedAvatar:#player-rig;eventSrc:#player-left-controller"
- hand-pose-controller__right="networkedAvatar:#player-rig;eventSrc:#player-right-controller"
- ></a-entity>
- </template>
+ haptic-feedback
+ body="type: static; shape: none;"
+ mixin="controller-super-hands"
+ controls-shape-offset
+ action-to-event__a="path: /actions/leftHandStartTeleport; event: left-teleport_down;"
+ action-to-event__b="path: /actions/leftHandStopTeleport; event: left-teleport_up;"
+ action-to-event__c="path: /actions/leftHandGrab; event: primary_hand_grab;"
+ action-to-event__d="path: /actions/leftHandDrop; event: primary_hand_release;"
+ >
+ </a-entity>
- <template data-name="Neck">
- <a-entity>
- <a-entity class="nametag" visible="false" text ></a-entity>
- </a-entity>
- </template>
+ <a-entity
+ id="player-right-controller"
+ class="right-controller"
+ hand-controls2="right"
+ tracked-controls
+ teleport-controls="
+ cameraRig: #player-rig;
+ teleportOrigin: #player-camera;
+ button: right-teleport_;
+ collisionEntities: [nav-mesh];
+ drawIncrementally: true;
+ incrementalDrawMs: 300;
+ hitOpacity: 0.3;
+ missOpacity: 0.1;
+ curveShootingSpeed: 12;"
+ haptic-feedback
+ body="type: static; shape: none;"
+ mixin="controller-super-hands"
+ controls-shape-offset
+ action-to-event__a="path: /actions/rightHandStartTeleport; event: right-teleport_down;"
+ action-to-event__b="path: /actions/rightHandStopTeleport; event: right-teleport_up;"
+ action-to-event__c="path: /actions/rightHandGrab; event: primary_hand_grab;"
+ action-to-event__d="path: /actions/rightHandDrop; event: primary_hand_release;"
+ >
+ </a-entity>
- <template data-name="Head">
- <a-entity id="player-head" visible="false" bone-visibility></a-entity>
- </template>
+ <a-entity gltf-model-plus="inflate: true;" class="model">
+ <template data-name="RootScene">
+ <a-entity
+ ik-controller
+ hand-pose__left
+ hand-pose__right
+ hand-pose-controller__left="networkedAvatar:#player-rig;eventSrc:#player-left-controller"
+ hand-pose-controller__right="networkedAvatar:#player-rig;eventSrc:#player-right-controller"
+ ></a-entity>
+ </template>
+
+ <template data-name="Neck">
+ <a-entity>
+ <a-entity class="nametag" visible="false" text ></a-entity>
+ </a-entity>
+ </template>
- <template data-name="LeftHand">
- <a-entity bone-visibility></a-entity>
- </template>
+ <template data-name="Head">
+ <a-entity id="player-head" visible="false" bone-visibility></a-entity>
+ </template>
- <template data-name="RightHand">
- <a-entity bone-visibility></a-entity>
- </template>
+ <template data-name="LeftHand">
+ <a-entity bone-visibility hover-visuals="hand: left; controller: #player-left-controller"></a-entity>
+ </template>
+
+ <template data-name="RightHand">
+ <a-entity bone-visibility hover-visuals="hand: right; controller: #player-right-controller"></a-entity>
+ </template>
- </a-entity>
+ </a-entity>
</a-entity>
<!-- Environment -->
diff --git a/src/hub.js b/src/hub.js
index 493a053d14c796781e33db67b60f159c07872e42..45e44f0018bf8a57dd630a4304b91330b4c4a1ce 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -33,6 +33,8 @@ import "./components/virtual-gamepad-controls";
import "./components/ik-controller";
import "./components/hand-controls2";
import "./components/character-controller";
+import "./components/hoverable-visuals";
+import "./components/hover-visuals";
import "./components/haptic-feedback";
import "./components/networked-video-player";
import "./components/offset-relative-to";
@@ -446,7 +448,7 @@ document.addEventListener("DOMContentLoaded", async () => {
presenceLogEntries.splice(presenceLogEntries.indexOf(entry), 1);
remountUI({ presenceLogEntries });
}, 5000);
- }, entryManager.hasEntered() ? 10000 : 30000); // Fade out things faster once entered.
+ }, 20000);
};
let isInitialSync = true;
diff --git a/src/materials/MobileStandardMaterial.js b/src/materials/MobileStandardMaterial.js
index aa9e10de101be73807c0259e1eb75f222e4d974d..10657605f2818c8ddad3eb723fe1d7dc7c4babac 100644
--- a/src/materials/MobileStandardMaterial.js
+++ b/src/materials/MobileStandardMaterial.js
@@ -74,6 +74,8 @@ void main() {
`;
export default class MobileStandardMaterial extends THREE.ShaderMaterial {
+ type = "MobileStandardMaterial";
+ isMobileStandardMaterial = true;
static fromStandardMaterial(material) {
const parameters = {
vertexShader: VERTEX_SHADER,
@@ -107,4 +109,7 @@ export default class MobileStandardMaterial extends THREE.ShaderMaterial {
return mobileMaterial;
}
+ clone() {
+ return MobileStandardMaterial.fromStandardMaterial(this);
+ }
}
diff --git a/src/react-components/create-object-dialog.js b/src/react-components/create-object-dialog.js
index 5ccfe2ce692a234fff6e76d8657516c1ac1d8816..6fa624612dcf4eadb658fa7f74f069983a9aeb53 100644
--- a/src/react-components/create-object-dialog.js
+++ b/src/react-components/create-object-dialog.js
@@ -15,12 +15,33 @@ const attributionHostnames = {
const DEFAULT_OBJECT_URL = "https://asset-bundles-prod.reticulum.io/interactables/Ducky/DuckyMesh-438ff8e022.gltf";
const isMobile = AFRAME.utils.device.isMobile();
-const instructions = "Paste a URL or upload a file.";
-const desktopTips = "Tip: You can paste links directly into Hubs with Ctrl+V";
-const mobileInstructions = <div>{instructions}</div>;
+const instructions = "Paste a URL to an image, video, model, or upload a file.";
+const desktopTips = "Tip: You can paste media directly into Hubs with Ctrl+V";
+const references = (
+ <span>
+ For models, try{" "}
+ <a href="https://sketchfab.com/search?features=downloadable&type=models" target="_blank" rel="noopener noreferrer">
+ Sketchfab
+ </a>,{" "}
+ <a href="http://poly.google.com/" target="_blank" rel="noopener noreferrer">
+ Google Poly
+ </a>, or our{" "}
+ <a href="https://sketchfab.com/mozillareality" target="_blank" rel="noopener noreferrer">
+ collection
+ </a>.
+ </span>
+);
+
+const mobileInstructions = (
+ <div>
+ <p>{instructions}</p>
+ <p>{references}</p>
+ </div>
+);
const desktopInstructions = (
<div>
<p>{instructions}</p>
+ <p>{references}</p>
<p>{desktopTips}</p>
</div>
);
diff --git a/src/react-components/create-room-dialog.js b/src/react-components/create-room-dialog.js
index 756cc9bf43736059999a1a66b2fdfe5d856a4e96..a42a2f36be7fea6bdfef0d74c6120ce59e24df01 100644
--- a/src/react-components/create-room-dialog.js
+++ b/src/react-components/create-room-dialog.js
@@ -4,8 +4,9 @@ import DialogContainer from "./dialog-container.js";
const HUB_NAME_PATTERN = "^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$";
-export default class CreateObjectDialog extends Component {
+export default class CreateRoomDialog extends Component {
static propTypes = {
+ includeScenePrompt: PropTypes.bool,
onCustomScene: PropTypes.func,
onClose: PropTypes.func
};
@@ -25,7 +26,12 @@ export default class CreateObjectDialog extends Component {
return (
<DialogContainer title="Create a Room" onClose={onClose} {...other}>
<div>
- <div>Choose a name and GLTF URL for your room's scene:</div>
+ {this.props.includeScenePrompt ? (
+ <div>Choose a name and GLTF URL for your room's scene:</div>
+ ) : (
+ <div>Choose a name for your room:</div>
+ )}
+
<form onSubmit={onCustomSceneClicked}>
<div className="custom-scene-form">
<input
@@ -38,16 +44,18 @@ export default class CreateObjectDialog extends Component {
onChange={e => this.setState({ customRoomName: e.target.value })}
required
/>
- <input
- type="url"
- placeholder="URL to Scene GLTF or GLB (Optional)"
- className="custom-scene-form__link_field"
- value={this.state.customSceneUrl}
- onChange={e => this.setState({ customSceneUrl: e.target.value })}
- />
+ {this.props.includeScenePrompt && (
+ <input
+ type="url"
+ placeholder="URL to Scene GLTF or GLB (Optional)"
+ className="custom-scene-form__link_field"
+ value={this.state.customSceneUrl}
+ onChange={e => this.setState({ customSceneUrl: e.target.value })}
+ />
+ )}
<div className="custom-scene-form__buttons">
<button className="custom-scene-form__action-button">
- <span>create</span>
+ <span>Create Room</span>
</button>
</div>
</div>
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 8a9ca35e28edb3d99c3685e483e3f031c755c557..640f00d5d790516e0d8cd2d71f9bb71f1a13e89c 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -235,6 +235,7 @@ class HubCreatePanel extends Component {
</form>
{this.state.showCustomSceneDialog && (
<CreateRoomDialog
+ includeScenePrompt={true}
onClose={() => this.setState({ showCustomSceneDialog: false })}
onCustomScene={(name, url) => {
this.setState({ showCustomSceneDialog: false, name: name, customSceneUrl: url }, () => this.createHub());
diff --git a/src/react-components/invite-dialog.js b/src/react-components/invite-dialog.js
index 414194081d417d6185cd1041bdb1ed1a7be355ab..62fe7975b1b23fdfa8219407d2ba69652bfb84c7 100644
--- a/src/react-components/invite-dialog.js
+++ b/src/react-components/invite-dialog.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
import copy from "copy-to-clipboard";
import classNames from "classnames";
import { FormattedMessage } from "react-intl";
+import { share } from "../utils/share";
import styles from "../assets/stylesheets/invite-dialog.scss";
@@ -25,11 +26,11 @@ export default class InviteDialog extends Component {
shareButtonActive: false
};
- shareClicked = link => {
+ shareClicked = url => {
this.setState({ shareButtonActive: true });
- setTimeout(() => this.setState({ shareButtonActive: false }), 5000);
-
- navigator.share({ title: "Join me now in #hubs!", url: link });
+ share({ url, title: "Join me now in #hubs!" }).then(() => {
+ this.setState({ shareButtonActive: false });
+ });
};
copyClicked = link => {
@@ -46,11 +47,6 @@ export default class InviteDialog extends Component {
const shortLinkText = `hub.link/${this.props.hubId}`;
const shortLink = "https://" + shortLinkText;
- const tweetText = `Join me now in #hubs!`;
- const tweetLink = `https://twitter.com/share?url=${encodeURIComponent(shortLink)}&text=${encodeURIComponent(
- tweetText
- )}`;
-
return (
<div className={styles.dialog}>
<div className={styles.attachPoint} />
@@ -89,9 +85,9 @@ export default class InviteDialog extends Component {
)}
{this.props.allowShare &&
!navigator.share && (
- <a href={tweetLink} className={styles.linkButton} target="_blank" rel="noopener noreferrer">
+ <button className={styles.linkButton} onClick={this.shareClicked.bind(this, shortLink)}>
<FormattedMessage id="invite.tweet" />
- </a>
+ </button>
)}
</div>
</div>
diff --git a/src/react-components/photo-message.js b/src/react-components/photo-message.js
new file mode 100644
index 0000000000000000000000000000000000000000..ac4cfbceb03b7b7b339364b7b1293a2e66effd7d
--- /dev/null
+++ b/src/react-components/photo-message.js
@@ -0,0 +1,44 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import styles from "../assets/stylesheets/presence-log.scss";
+import classNames from "classnames";
+
+import { share } from "../utils/share";
+import { getLandingPageForPhoto } from "../utils/phoenix-utils";
+
+export default function PhotoMessage({ name, body: { src: url }, className, maySpawn, hubId }) {
+ const landingPageUrl = getLandingPageForPhoto(url);
+ const onShareClicked = share.bind(null, {
+ url: landingPageUrl,
+ title: `Taken in #hubs, join me at https://hub.link/${hubId}`
+ });
+ return (
+ <div className={className}>
+ {maySpawn && <button className={classNames(styles.iconButton, styles.share)} onClick={onShareClicked} />}
+ <div className={styles.mediaBody}>
+ <span>
+ <b>{name}</b>
+ </span>
+ <span>
+ {"took a "}
+ <b>
+ <a href={landingPageUrl} target="_blank" rel="noopener noreferrer">
+ photo
+ </a>
+ </b>.
+ </span>
+ </div>
+ <a href={landingPageUrl} target="_blank" rel="noopener noreferrer">
+ <img src={url} />
+ </a>
+ </div>
+ );
+}
+PhotoMessage.propTypes = {
+ name: PropTypes.string,
+ maySpawn: PropTypes.bool,
+ body: PropTypes.object,
+ className: PropTypes.string,
+ hubId: PropTypes.string
+};
diff --git a/src/react-components/presence-log.js b/src/react-components/presence-log.js
index 491b98aa03d5586af55622ef905418f667773adc..4426ac46e1e86d22e82b01de4f59152bb8b2184f 100644
--- a/src/react-components/presence-log.js
+++ b/src/react-components/presence-log.js
@@ -3,12 +3,15 @@ import PropTypes from "prop-types";
import styles from "../assets/stylesheets/presence-log.scss";
import classNames from "classnames";
import { FormattedMessage } from "react-intl";
+
import ChatMessage from "./chat-message";
+import PhotoMessage from "./photo-message";
export default class PresenceLog extends Component {
static propTypes = {
entries: PropTypes.array,
- inRoom: PropTypes.bool
+ inRoom: PropTypes.bool,
+ hubId: PropTypes.string
};
constructor(props) {
@@ -54,26 +57,15 @@ export default class PresenceLog extends Component {
/>
);
case "spawn": {
- const { src } = e.body;
return (
- <div key={e.key} className={classNames(entryClasses, styles.media)}>
- <a href={src} target="_blank" rel="noopener noreferrer">
- <img src={src} />
- </a>
- <div className={styles.mediaBody}>
- <span>
- <b>{e.name}</b>
- </span>
- <span>
- {"took a "}
- <b>
- <a href={src} target="_blank" rel="noopener noreferrer">
- photo
- </a>
- </b>.
- </span>
- </div>
- </div>
+ <PhotoMessage
+ key={e.key}
+ name={e.name}
+ className={classNames(entryClasses, styles.media)}
+ body={e.body}
+ maySpawn={e.maySpawn}
+ hubId={this.props.hubId}
+ />
);
}
}
diff --git a/src/react-components/scene-ui.js b/src/react-components/scene-ui.js
index 2db97a04c5a0d56824f8b4677474b6ddb97540d9..168c6d517c68ee4f3520c2ea7fb770c45417eb1d 100644
--- a/src/react-components/scene-ui.js
+++ b/src/react-components/scene-ui.js
@@ -8,6 +8,9 @@ import hubLogo from "../assets/images/hub-preview-white.png";
import spokeLogo from "../assets/images/spoke_logo_black.png";
import { getReticulumFetchUrl } from "../utils/phoenix-utils";
import { generateHubName } from "../utils/name-generation";
+import CreateRoomDialog from "./create-room-dialog.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEllipsisH } from "@fortawesome/free-solid-svg-icons/faEllipsisH";
import { lang, messages } from "../utils/i18n";
@@ -20,12 +23,13 @@ class SceneUI extends Component {
sceneId: PropTypes.string,
sceneName: PropTypes.string,
sceneDescription: PropTypes.string,
- sceneAttribution: PropTypes.string,
+ sceneAttributions: PropTypes.object,
sceneScreenshotURL: PropTypes.string
};
state = {
- showScreenshot: false
+ showScreenshot: false,
+ showCustomRoomDialog: false
};
constructor(props) {
@@ -48,7 +52,7 @@ class SceneUI extends Component {
}
createRoom = async () => {
- const payload = { hub: { name: generateHubName(), scene_id: this.props.sceneId } };
+ const payload = { hub: { name: this.state.customRoomName || generateHubName(), scene_id: this.props.sceneId } };
const createUrl = getReticulumFetchUrl("/api/v1/hubs");
const res = await fetch(createUrl, {
@@ -73,6 +77,47 @@ class SceneUI extends Component {
tweetText
)}`;
+ let attributions;
+
+ const toAttributionSpan = a => {
+ if (a.url) {
+ const source = a.url.indexOf("sketchfab.com")
+ ? "on Sketchfab"
+ : a.url.indexOf("poly.google.com")
+ ? "on Google Poly"
+ : "";
+
+ return (
+ <span key={a.url}>
+ <a href={a.url} target="_blank" rel="noopener noreferrer">
+ {a.name} by {a.author} {source}
+ </a>
+ </span>
+ );
+ } else {
+ return (
+ <span key={`${a.name} ${a.author}`}>
+ {a.name} by {a.author}
+ </span>
+ );
+ }
+ };
+
+ if (this.props.sceneAttributions) {
+ if (!this.props.sceneAttributions.extras) {
+ attributions = (
+ <span>
+ <span>by {this.props.sceneAttributions.creator}</span>
+ <br />
+ {this.props.sceneAttributions.content && this.props.sceneAttributions.content.map(toAttributionSpan)}
+ </span>
+ );
+ } else {
+ // Legacy
+ attributions = <span>{this.props.sceneAttributions.extras}</span>;
+ }
+ }
+
return (
<IntlProvider locale={lang} messages={messages}>
<div className={styles.ui}>
@@ -93,9 +138,14 @@ class SceneUI extends Component {
<div className={styles.logoTagline}>
<FormattedMessage id="scene.logo_tagline" />
</div>
- <button onClick={this.createRoom}>
- <FormattedMessage id="scene.create_button" />
- </button>
+ <div className={styles.createButtons}>
+ <button className={styles.createButton} onClick={this.createRoom}>
+ <FormattedMessage id="scene.create_button" />
+ </button>
+ <button className={styles.optionsButton} onClick={() => this.setState({ showCustomRoomDialog: true })}>
+ <FontAwesomeIcon icon={faEllipsisH} />
+ </button>
+ </div>
<a href={tweetLink} rel="noopener noreferrer" target="_blank" className={styles.tweetButton}>
<img src="../assets/images/twitter.svg" />
<div>
@@ -106,7 +156,7 @@ class SceneUI extends Component {
</div>
<div className={styles.info}>
<div className={styles.name}>{this.props.sceneName}</div>
- <div className={styles.attribution}>{this.props.sceneAttribution}</div>
+ <div className={styles.attribution}>{attributions}</div>
</div>
<div className={styles.spoke}>
<div className={styles.madeWith}>made with</div>
@@ -114,6 +164,15 @@ class SceneUI extends Component {
<img src={spokeLogo} />
</a>
</div>
+ {this.state.showCustomRoomDialog && (
+ <CreateRoomDialog
+ includeScenePrompt={false}
+ onClose={() => this.setState({ showCustomRoomDialog: false })}
+ onCustomScene={name => {
+ this.setState({ showCustomRoomDialog: false, customRoomName: name }, () => this.createRoom());
+ }}
+ />
+ )}
</div>
</IntlProvider>
);
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 7a3987d2bb15f8b8dfa6ec8fafcdbac88d8478c4..012afee70e1e2aa4a590a49f800512a5944a7cc4 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -1027,12 +1027,14 @@ class UIRoot extends Component {
{(!entryFinished || this.isWaitingForAutoExit()) && (
<div className={styles.uiDialog}>
- <PresenceLog entries={this.props.presenceLogEntries || []} />
+ <PresenceLog entries={this.props.presenceLogEntries || []} hubId={this.props.hubId} />
<div className={dialogBoxContentsClassNames}>{dialogContents}</div>
</div>
)}
- {entryFinished && <PresenceLog inRoom={true} entries={this.props.presenceLogEntries || []} />}
+ {entryFinished && (
+ <PresenceLog inRoom={true} entries={this.props.presenceLogEntries || []} hubId={this.props.hubId} />
+ )}
{entryFinished && (
<form onSubmit={this.sendMessage}>
<div className={styles.messageEntryInRoom} style={{ height: pendingMessageFieldHeight }}>
diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js
index 4b5f0fa8362360e42cf7c9e9fb39c6808f8ef2fa..ff6bab67fcae1a88795182bf20debfa37a381cc5 100644
--- a/src/scene-entry-manager.js
+++ b/src/scene-entry-manager.js
@@ -241,7 +241,7 @@ export default class SceneEntryManager {
});
document.addEventListener("paste", e => {
- if (e.matches("input, textarea") && document.activeElement === e.target) return;
+ if (e.target.matches("input, textarea") && document.activeElement === e.target) return;
const url = e.clipboardData.getData("text");
const files = e.clipboardData.files && e.clipboardData.files;
@@ -282,7 +282,6 @@ export default class SceneEntryManager {
});
this.scene.addEventListener("photo_taken", e => {
- console.log(e);
this.hubChannel.sendMessage({ src: e.detail }, "spawn");
});
};
diff --git a/src/scene.js b/src/scene.js
index 6f2f0732d0da231b0bebef56b8ce526326aa5ea4..4172e624771d7fbd3ca5ce217052023ed113c930 100644
--- a/src/scene.js
+++ b/src/scene.js
@@ -102,7 +102,7 @@ const onReady = async () => {
remountUI({
sceneName: sceneInfo.name,
sceneDescription: sceneInfo.description,
- sceneAttribution: sceneInfo.attribution,
+ sceneAttributions: sceneInfo.attributions,
sceneScreenshotURL: sceneInfo.screenshot_url
});
};
diff --git a/src/spoke.html b/src/spoke.html
index 4cdea285a2a48fe96ef7ae28b8bc8826f328bd4b..2a93ef9d2327135e17ec2481a1f767d7d0b1efdd 100644
--- a/src/spoke.html
+++ b/src/spoke.html
@@ -20,7 +20,7 @@
</head>
<body>
- <div id="ui-root"></div>
+ <div id="ui-root"></div>
</body>
</html>
diff --git a/src/spoke.js b/src/spoke.js
index c82a3c898a3c4080af29f8046f20f09a7ca3a9f6..d1f4fb3aa7322667d62faa8edf2b57adc296f48a 100644
--- a/src/spoke.js
+++ b/src/spoke.js
@@ -77,7 +77,7 @@ class SpokeLanding extends Component {
query: `
{
repository(owner: "mozillareality", name: "spoke") {
- releases(
+ releases(
orderBy: { field: CREATED_AT, direction: DESC },
first: 5
) {
diff --git a/src/utils/media-highlight-frag.glsl b/src/utils/media-highlight-frag.glsl
new file mode 100644
index 0000000000000000000000000000000000000000..82214980d57847926b5a1edbb8c9deef01b4721e
--- /dev/null
+++ b/src/utils/media-highlight-frag.glsl
@@ -0,0 +1,33 @@
+if (hubs_HighlightInteractorOne || hubs_HighlightInteractorTwo) {
+ float ratio = 0.0;
+
+ if (hubs_EnableSweepingEffect) {
+ float size = hubs_SweepParams.t - hubs_SweepParams.s;
+ float line = mod(hubs_Time / 3000.0 * size, size * 2.0) + hubs_SweepParams.s - size / 2.0;
+
+ if (hubs_WorldPosition.y < line) {
+ // Highlight with a sweeping gradient.
+ ratio = max(0.0, 1.0 - (line - hubs_WorldPosition.y) / size * 3.0);
+ }
+ }
+
+ // Highlight with a gradient falling off with distance.
+ float pulse = 9.0 + 3.0 * (sin(hubs_Time / 1000.0) + 1.0);
+
+ if (hubs_HighlightInteractorOne) {
+ float dist1 = distance(hubs_WorldPosition, hubs_InteractorOnePos);
+ ratio += -min(1.0, pow(dist1 * pulse, 3.0)) + 1.0;
+ }
+
+ if (hubs_HighlightInteractorTwo) {
+ float dist2 = distance(hubs_WorldPosition, hubs_InteractorTwoPos);
+ ratio += -min(1.0, pow(dist2 * pulse, 3.0)) + 1.0;
+ }
+
+ ratio = min(1.0, ratio);
+
+ // Gamma corrected highlight color
+ vec3 highlightColor = vec3(0.184, 0.499, 0.933);
+
+ gl_FragColor.rgb = (gl_FragColor.rgb * (1.0 - ratio)) + (highlightColor * ratio);
+}
diff --git a/src/utils/media-utils.js b/src/utils/media-utils.js
index d72a453fa31707371dced4fb5a0151ee5577634e..4750ba603974604b892f68019f4c5c295a616532 100644
--- a/src/utils/media-utils.js
+++ b/src/utils/media-utils.js
@@ -1,5 +1,7 @@
import { objectTypeForOriginAndContentType } from "../object-types";
import { getReticulumFetchUrl } from "./phoenix-utils";
+import mediaHighlightFrag from "./media-highlight-frag.glsl";
+
const mediaAPIEndpoint = getReticulumFetchUrl("/api/v1/media");
const commonKnownContentTypes = {
@@ -136,3 +138,64 @@ export const addMedia = (src, template, contentOrigin, resolve = false, resize =
return { entity, orientation };
};
+
+export function injectCustomShaderChunks(obj) {
+ const vertexRegex = /\bskinning_vertex\b/;
+ const fragRegex = /\bgl_FragColor\b/;
+ const validMaterials = ["MeshStandardMaterial", "MeshBasicMaterial", "MobileStandardMaterial"];
+
+ const shaderUniforms = new Map();
+
+ obj.traverse(object => {
+ if (!object.material || !validMaterials.includes(object.material.type)) {
+ return;
+ }
+ object.material = object.material.clone();
+ object.material.onBeforeCompile = shader => {
+ if (!vertexRegex.test(shader.vertexShader)) return;
+
+ shader.uniforms.hubs_EnableSweepingEffect = { value: false };
+ shader.uniforms.hubs_SweepParams = { value: [0, 0] };
+ shader.uniforms.hubs_InteractorOnePos = { value: [0, 0, 0] };
+ shader.uniforms.hubs_InteractorTwoPos = { value: [0, 0, 0] };
+ shader.uniforms.hubs_HighlightInteractorOne = { value: false };
+ shader.uniforms.hubs_HighlightInteractorTwo = { value: false };
+ shader.uniforms.hubs_Time = { value: 0 };
+
+ const vchunk = `
+ if (hubs_HighlightInteractorOne || hubs_HighlightInteractorTwo) {
+ vec4 wt = modelMatrix * vec4(transformed, 1);
+
+ // Used in the fragment shader below.
+ hubs_WorldPosition = wt.xyz;
+ }
+ `;
+
+ const vlines = shader.vertexShader.split("\n");
+ const vindex = vlines.findIndex(line => vertexRegex.test(line));
+ vlines.splice(vindex + 1, 0, vchunk);
+ vlines.unshift("varying vec3 hubs_WorldPosition;");
+ vlines.unshift("uniform bool hubs_HighlightInteractorOne;");
+ vlines.unshift("uniform bool hubs_HighlightInteractorTwo;");
+ shader.vertexShader = vlines.join("\n");
+
+ const flines = shader.fragmentShader.split("\n");
+ const findex = flines.findIndex(line => fragRegex.test(line));
+ flines.splice(findex + 1, 0, mediaHighlightFrag);
+ flines.unshift("varying vec3 hubs_WorldPosition;");
+ flines.unshift("uniform bool hubs_EnableSweepingEffect;");
+ flines.unshift("uniform vec2 hubs_SweepParams;");
+ flines.unshift("uniform bool hubs_HighlightInteractorOne;");
+ flines.unshift("uniform vec3 hubs_InteractorOnePos;");
+ flines.unshift("uniform bool hubs_HighlightInteractorTwo;");
+ flines.unshift("uniform vec3 hubs_InteractorTwoPos;");
+ flines.unshift("uniform float hubs_Time;");
+ shader.fragmentShader = flines.join("\n");
+
+ shaderUniforms.set(object.material.uuid, shader.uniforms);
+ };
+ object.material.needsUpdate = true;
+ });
+
+ return shaderUniforms;
+}
diff --git a/src/utils/phoenix-utils.js b/src/utils/phoenix-utils.js
index 19619599af4803c4d537b764888fb4de6b21491f..7cbca9fa0490fbe11029cebba588f8f09598d8db 100644
--- a/src/utils/phoenix-utils.js
+++ b/src/utils/phoenix-utils.js
@@ -36,10 +36,19 @@ export function connectToReticulum(debug = false) {
return socket;
}
-export function getReticulumFetchUrl(path) {
+const resolverLink = document.createElement("a");
+export function getReticulumFetchUrl(path, absolute = false) {
if (process.env.RETICULUM_SERVER) {
return `https://${process.env.RETICULUM_SERVER}${path}`;
+ } else if (absolute) {
+ resolverLink.href = path;
+ return resolverLink.href;
} else {
return path;
}
}
+
+export function getLandingPageForPhoto(photoUrl) {
+ const parsedUrl = new URL(photoUrl);
+ return getReticulumFetchUrl(parsedUrl.pathname.replace(".png", ".html") + parsedUrl.search, true);
+}
diff --git a/src/utils/share.js b/src/utils/share.js
new file mode 100644
index 0000000000000000000000000000000000000000..e563431ff06fd7a77ba5a8b1feedff85ba211dfb
--- /dev/null
+++ b/src/utils/share.js
@@ -0,0 +1,20 @@
+/**
+ * Wraps navigator.share with a fallback to twitter for unsupported browsers
+ */
+export function share(opts) {
+ if (navigator.share) {
+ return navigator.share(opts);
+ } else {
+ const { title, url } = opts;
+ const width = 550;
+ const height = 420;
+ const left = (screen.width - width) / 2;
+ const top = (screen.height - height) / 2;
+ const params = `scrollbars=no,menubar=no,toolbar=no,status=no,width=${width},height=${height},top=${top},left=${left}`;
+ const tweetLink = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(
+ title
+ )}`;
+ window.open(tweetLink, "_blank", params);
+ return Promise.resolve();
+ }
+}
diff --git a/webpack.config.js b/webpack.config.js
index 55afb6708d844a885ade6473327360ca6198c243..e7b6e4d8e3cdc6cd918fb3c66c1fd9718f58f39e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -77,6 +77,7 @@ module.exports = (env, argv) => ({
devServer: {
https: createHTTPSConfig(),
host: "0.0.0.0",
+ public: "hubs.local:8080",
useLocalIp: true,
allowedHosts: ["hubs.local"],
before: function(app) {
@@ -153,6 +154,10 @@ module.exports = (env, argv) => ({
context: path.join(__dirname, "src")
}
}
+ },
+ {
+ test: /\.(glsl)$/,
+ use: { loader: "raw-loader" }
}
]
},