Merge pull request #3904 from mozilla/feature/link-thumbnails

Add link behavior for images and videos
Hubs-Foundation · Feb 16, 2021 · bb0efe1 · bb0efe1
2 parents 0812729 + 82b845f
commit bb0efe1
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     ]
   },
   "dependencies": {
+    "@braintree/sanitize-url": "^5.0.0",
     "@formatjs/intl-locale": "^2.4.13",
     "@formatjs/intl-pluralrules": "^4.0.3",
     "@formatjs/intl-relativetimeformat": "^8.0.1",

diff --git a/src/components/media-loader.js b/src/components/media-loader.js
@@ -481,6 +481,8 @@ AFRAME.registerComponent("media-loader", {
                 template: "#photo-hover-menu",
                 isFlat: true
               });
+            } else if (this.data.mediaOptions.href) {
+              this.el.setAttribute("hover-menu__link", { template: "#link-hover-menu", isFlat: true });
             }
           },
           { once: true }

diff --git a/src/components/media-views.js b/src/components/media-views.js
@@ -299,6 +299,7 @@ AFRAME.registerComponent("media-video", {
       this.snapButton = this.el.querySelector(".video-snap-button");
       this.timeLabel = this.el.querySelector(".video-time-label");
       this.volumeLabel = this.el.querySelector(".video-volume-label");
+      this.linkButton = this.el.querySelector(".video-link-button");
 
       this.playPauseButton.object3D.addEventListener("interact", this.togglePlaying);
       this.seekForwardButton.object3D.addEventListener("interact", this.seekForward);
@@ -858,7 +859,8 @@ AFRAME.registerComponent("media-video", {
   updateHoverMenu() {
     if (!this.hoverMenu) return;
 
-    const pinnableElement = this.el.components["media-loader"].data.linkedEl || this.el;
+    const mediaLoader = this.el.components["media-loader"].data;
+    const pinnableElement = mediaLoader.linkedEl || this.el;
     const isPinned = pinnableElement.components.pinnable && pinnableElement.components.pinnable.data.pinned;
     this.playbackControls.object3D.visible = !this.data.hidePlaybackControls && !!this.video;
     this.timeLabel.object3D.visible = !this.data.hidePlaybackControls;
@@ -872,6 +874,8 @@ AFRAME.registerComponent("media-video", {
 
     this.playPauseButton.object3D.visible = this.seekForwardButton.object3D.visible = this.seekBackButton.object3D.visible = mayModifyPlayHead;
 
+    this.linkButton.object3D.visible = !!mediaLoader.mediaOptions.href;
+
     if (this.videoIsLive) {
       this.timeLabel.setAttribute("text", "value", "LIVE");
     }

diff --git a/src/components/open-media-button.js b/src/components/open-media-button.js
@@ -11,7 +11,8 @@ AFRAME.registerComponent("open-media-button", {
 
     this.updateSrc = async () => {
       if (!this.targetEl.parentNode) return; // If removed
-      const src = (this.src = this.targetEl.components["media-loader"].data.src);
+      const mediaLoader = this.targetEl.components["media-loader"].data;
+      const src = (this.src = (mediaLoader.mediaOptions && mediaLoader.mediaOptions.href) || mediaLoader.src);
       const visible = src && guessContentType(src) !== "video/vnd.hubs-webrtc";
       const mayChangeScene = this.el.sceneEl.systems.permissions.canOrWillIfCreator("update_hub");
 

diff --git a/src/gltf-component-mappings.js b/src/gltf-component-mappings.js
@@ -1,3 +1,4 @@
+import { sanitizeUrl } from "@braintree/sanitize-url";
 import "./components/gltf-model-plus";
 import { getSanitizedComponentMapping } from "./utils/component-mappings";
 import { TYPE, SHAPE, FIT } from "three-ammo/constants";
@@ -178,7 +179,7 @@ AFRAME.GLTFModelPlus.registerComponent("media", "media", (el, componentName, com
   }
 
   const mediaLoaderAttributes = {
-    src: componentData.src,
+    src: sanitizeUrl(componentData.src),
     fitToBox: componentData.contentSubtype ? false : true,
     resolve: true,
     fileIsOwned: true,
@@ -209,11 +210,17 @@ AFRAME.GLTFModelPlus.registerComponent("media", "media", (el, componentName, com
 async function mediaInflator(el, componentName, componentData, components) {
   let isControlled = true;
 
+  if (componentName === "link" && (components.video || components.image)) {
+    // video/image component will set link url specified in link component.
+    return;
+  }
+
   if (components.networked) {
     isControlled = componentData.controls || componentName === "link";
 
     const hasVolume = componentName === "video" || componentName === "audio";
-    const templateName = isControlled || hasVolume ? "#static-controlled-media" : "#static-media";
+    const templateName =
+      componentName === "model" || isControlled || hasVolume ? "#static-controlled-media" : "#static-media";
 
     el.setAttribute("networked", {
       template: templateName,
@@ -251,18 +258,24 @@ async function mediaInflator(el, componentName, componentData, components) {
     el.setAttribute("video-pause-state", { paused: mediaOptions.videoPaused });
   }
 
+  if ((componentName === "video" || componentName === "image") && components.link) {
+    mediaOptions.href = sanitizeUrl(components.link.href);
+  }
+
   const src = componentName === "link" ? componentData.href : componentData.src;
 
   el.setAttribute("media-loader", {
-    src,
+    src: sanitizeUrl(src),
     fitToBox: true,
     resolve: true,
     fileIsOwned: true,
     animate: false,
-    mediaOptions
+    mediaOptions,
+    moveTheParentNotTheMesh: true
   });
 }
 
+AFRAME.GLTFModelPlus.registerComponent("model", "model", mediaInflator);
 AFRAME.GLTFModelPlus.registerComponent("image", "image", mediaInflator);
 AFRAME.GLTFModelPlus.registerComponent("audio", "audio", mediaInflator, (name, property, value) => {
   if (property === "paused") {
@@ -287,15 +300,15 @@ AFRAME.GLTFModelPlus.registerComponent("hoverable", "is-remote-hover-target", el
 
 AFRAME.GLTFModelPlus.registerComponent("spawner", "spawner", (el, componentName, componentData) => {
   el.setAttribute("media-loader", {
-    src: componentData.src,
+    src: sanitizeUrl(componentData.src),
     resolve: true,
     fileIsOwned: true,
     animate: false,
     moveTheParentNotTheMesh: true
   });
   el.setAttribute("css-class", "interactable");
   el.setAttribute("super-spawner", {
-    src: componentData.src,
+    src: sanitizeUrl(componentData.src),
     resolve: true,
     template: "#interactable-media",
     mediaOptions: componentData.mediaOptions || {}

diff --git a/src/hub.html b/src/hub.html
@@ -907,6 +907,9 @@
                             visible="false"
                         ></a-entity>
                     </a-entity>
+                    <a-entity class="ui video-link-button" visible="false" mixin="rounded-text-action-button ui" is-remote-hover-target tags="singleActionButton: true; isHoverMenuChild: true;" open-media-button scale="0.8 0.8 0.8" position="0 -0.300 0.001">
+                        <a-entity text="value:open link; width:1.5; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
+                    </a-entity>
                 </a-entity>
             </template>
 
@@ -932,12 +935,7 @@
 
             <template id="link-hover-menu">
                 <a-entity class="ui interactable-ui hover-container" visible="false">
-                    <a-entity mixin="rounded-text-button ui"
-                    is-remote-hover-target tags="singleActionButton: true;
-                    isHoverMenuChild: true;" scale="0.8 0.8 0.8" refresh-media-button position="0 0.125 0.001">
-                        <a-entity text="value:refresh; width:1.5; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
-                    </a-entity>
-                    <a-entity mixin="rounded-text-action-button ui" is-remote-hover-target tags="singleActionButton: true; isHoverMenuChild: true;" open-media-button position="0 -0.125 0.001">
+                    <a-entity mixin="rounded-text-action-button ui" is-remote-hover-target tags="singleActionButton: true; isHoverMenuChild: true;" open-media-button position="0 0 0.001">
                         <a-entity text="value:open link; width:1.5; align:center;" text-raycast-hack position="0 0 0.02"></a-entity>
                     </a-entity>
                 </a-entity>

diff --git a/src/react-components/room/object-hooks.js b/src/react-components/room/object-hooks.js
@@ -22,8 +22,11 @@ export function isPlayer(object) {
 export function getObjectUrl(object) {
   const mediaLoader = object.el.components["media-loader"];
 
-  if (mediaLoader && mediaLoader.data.src && !mediaLoader.data.src.startsWith("hubs://")) {
-    return mediaLoader.data.src;
+  const url =
+    mediaLoader && ((mediaLoader.data.mediaOptions && mediaLoader.data.mediaOptions.href) || mediaLoader.data.src);
+
+  if (url && !url.startsWith("hubs://")) {
+    return url;
   }
 
   return null;

diff --git a/src/systems/hubs-systems.js b/src/systems/hubs-systems.js
@@ -87,6 +87,7 @@ AFRAME.registerSystem("hubs-systems", {
     this.emojiSystem.tick(t, systems.userinput);
     this.cursorPoseTrackingSystem.tick();
     this.cursorTargettingSystem.tick(t);
+    this.hoverMenuSystem.tick();
     this.positionAtBorderSystem.tick();
     this.scaleInScreenSpaceSystem.tick();
     this.constraintsSystem.tick();
@@ -95,7 +96,6 @@ AFRAME.registerSystem("hubs-systems", {
     this.holdableButtonSystem.tick();
     this.hoverButtonSystem.tick();
     this.drawingMenuSystem.tick();
-    this.hoverMenuSystem.tick();
     this.hapticFeedbackSystem.tick(
       this.twoPointStretchingSystem,
       this.singleActionButtonSystem.didInteractLeftThisFrame,