diff --git a/package-lock.json b/package-lock.json index 92a1bd68dd..3045b56cc9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6739,12 +6739,6 @@ } } }, - "awaitqueue": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/awaitqueue/-/awaitqueue-2.1.1.tgz", - "integrity": "sha512-pzmngNP5W9S0dg24oim4wEQRCBadowAxVv5aLIJmgI5a8m8Cxxm1jXtScgHzHFY1aDR5ep1rktPtRbUEuIPl0A==", - "dev": true - }, "aws-sign2": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", @@ -12795,7 +12789,7 @@ "requires": { "@types/debug": "^4.1.5", "@types/events": "^3.0.0", - "awaitqueue": "^2.1.1", + "awaitqueue": "^2.2.3", "bowser": "^2.9.0", "debug": "^4.1.1", "events": "^3.1.0", @@ -12804,6 +12798,12 @@ "supports-color": "^7.1.0" }, "dependencies": { + "awaitqueue": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/awaitqueue/-/awaitqueue-2.2.3.tgz", + "integrity": "sha512-vKY8hHHt1FT05UBxaTKWoA8+A3APnyzcOO1UBY5wQ7ENzXCFi3Yy4wSKsqrO0ncDD/5CI6IZDN1nVZQKziWIqg==", + "dev": true + }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", @@ -18326,7 +18326,7 @@ "dev": true }, "three": { - "version": "github:mozillareality/three.js#6dc1886802c936054ee5f48e8b39cc1be2e6e45f", + "version": "github:mozillareality/three.js#1fe0e7549e79caf58865c20d42c239a1afd06292", "from": "github:mozillareality/three.js#hubs/master" }, "three-ammo": { diff --git a/package.json b/package.json index c4bec84dd3..ae1606606f 100644 --- a/package.json +++ b/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": [ diff --git a/scripts/video-texture-patch.sh b/scripts/video-texture-patch.sh new file mode 100644 index 0000000000..918f0c961f --- /dev/null +++ b/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 diff --git a/src/assets/stylesheets/message-entry.scss b/src/assets/stylesheets/message-entry.scss index 7ca285ae49..292bc2d6ec 100644 --- a/src/assets/stylesheets/message-entry.scss +++ b/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; diff --git a/src/assets/stylesheets/presence-log.scss b/src/assets/stylesheets/presence-log.scss index cef08eb40b..252dddf0cc 100644 --- a/src/assets/stylesheets/presence-log.scss +++ b/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); diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json index c31029e6b3..57a1696bd6 100644 --- a/src/assets/translations.data.json +++ b/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": "app@company.com", @@ -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可配置的基础设施" } -} +} \ No newline at end of file diff --git a/src/components/media-views.js b/src/components/media-views.js index b1f2b1827f..86f3030986 100644 --- a/src/components/media-views.js +++ b/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 = () => diff --git a/src/components/offset-absolute.js b/src/components/offset-absolute.js new file mode 100644 index 0000000000..26db87af38 --- /dev/null +++ b/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"); + } + }; + })() +}); diff --git a/src/hub.js b/src/hub.js index 925e122268..7a5cfffcb9 100644 --- a/src/hub.js +++ b/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"; diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js index d3ab4623da..76b1ce89af 100644 --- a/src/react-components/2d-hud.js +++ b/src/react-components/2d-hud.js @@ -135,8 +135,9 @@ class TopHUD extends Component { const isMobile = AFRAME.utils.device.isMobile() || AFRAME.utils.device.isMobileVR(); const videoShareExtraOptionTypes = []; - const primaryVideoShareType = - this.props.videoShareMediaSource || this.state.lastActiveMediaSource || (isMobile ? "camera" : "screen"); + const primaryVideoShareType = this.props.videoShareMediaSource + || this.state.lastActiveMediaSource + || (isMobile ? "camera" : "screen"); if (this.state.showVideoShareOptions) { videoShareExtraOptionTypes.push(primaryVideoShareType); @@ -171,6 +172,7 @@ class TopHUD extends Component { }; const capitalize = str => str[0].toUpperCase() + str.slice(1); + const iconForType = (type, active) => { if (active) { return type === "screen" ? ShareScreenIconActive : ShareCameraIconActive; @@ -197,27 +199,33 @@ class TopHUD extends Component { className={cx(styles.iconButtonIcon)} src={iconForType(primaryVideoShareType, this.props.videoShareMediaSource === primaryVideoShareType)} /> - {videoShareExtraOptionTypes.length > 0 && ( -