Dim video on overlay and persist MUTE indicator

Hubs-Foundation · Jan 19, 2019 · 309b711 · 309b711
1 parent 22cff64
commit 309b711
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/components/hover-menu.js b/src/components/hover-menu.js
@@ -2,7 +2,8 @@ AFRAME.registerComponent("hover-menu", {
   multiple: true,
   schema: {
     template: { type: "selector" },
-    dirs: { type: "array" }
+    dirs: { type: "array" },
+    dim: { default: true }
   },
 
   async init() {
@@ -46,6 +47,9 @@ AFRAME.registerComponent("hover-menu", {
   applyHoverState() {
     if (!this.menu) return;
     this.menu.object3D.visible = !this.el.sceneEl.is("frozen") && this.hovering;
+    if (this.data.dim && this.el.object3DMap.mesh && this.el.object3DMap.mesh.material) {
+      this.el.object3DMap.mesh.material.color.setScalar(this.menu.object3D.visible ? 0.5 : 1);
+    }
   },
 
   play() {

diff --git a/src/components/media-views.js b/src/components/media-views.js
@@ -553,12 +553,18 @@ AFRAME.registerComponent("media-video", {
 
     const userinput = this.el.sceneEl.systems.userinput;
     const volumeMod = userinput.get(paths.actions.cursor.mediaVolumeMod);
-    if (volumeMod) {
+    if (this.el.is("hovered") && volumeMod) {
       this.el.setAttribute("media-video", "volume", THREE.Math.clamp(this.data.volume + volumeMod, 0, 1));
-      this.volumeLabel.setAttribute("text", "value", `VOL: ${Math.round(this.data.volume * 100)}%`);
+      this.volumeLabel.setAttribute(
+        "text",
+        "value",
+        this.data.volume === 0 ? "MUTE" : `VOL: ${Math.round(this.data.volume * 100)}%`
+      );
       this.volumeLabel.object3D.visible = true;
       clearTimeout(this.hideVolumeLabelTimeout);
-      this.hideVolumeLabelTimeout = setTimeout(() => (this.volumeLabel.object3D.visible = false), 1000);
+      if (this.data.volume) {
+        this.hideVolumeLabelTimeout = setTimeout(() => (this.volumeLabel.object3D.visible = false), 1000);
+      }
     }
 
     if (this.hoverMenu.object3D.visible && !this.videoIsLive) {