diff --git a/src/components/media-loader.js b/src/components/media-loader.js index 012fe14c42b7f4e106b68249378cf3c6da2d856a..1b67a41e686f7df0c7c438eedda299efff1ddcaa 100644 --- a/src/components/media-loader.js +++ b/src/components/media-loader.js @@ -13,6 +13,7 @@ AFRAME.registerComponent("media-loader", { init() { this.onError = this.onError.bind(this); + this.showLoader = this.showLoader.bind(this); }, setShapeAndScale(resize) { @@ -44,19 +45,19 @@ AFRAME.registerComponent("media-loader", { clearTimeout(this.showLoaderTimeout); }, + showLoader() { + const loadingObj = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial()); + this.el.setObject3D("mesh", loadingObj); + this.setShapeAndScale(true); + }, + // TODO: correctly handle case where src changes async update() { try { const url = this.data.src; const token = this.data.token; - this.showLoaderTimeout = - this.showLoaderTimeout || - setTimeout(() => { - const loadingObj = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial()); - this.el.setObject3D("mesh", loadingObj); - this.setShapeAndScale(true); - }, 100); + this.showLoaderTimeout = this.showLoaderTimeout || setTimeout(this.showLoader, 100); if (!url) return; @@ -65,6 +66,15 @@ AFRAME.registerComponent("media-loader", { const contentType = this.data.contentType || (meta && meta.expected_content_type) || (await fetchContentType(raw)); + let blobUrl; + if (token) { + const response = await fetch(raw, { + method: "GET", + headers: { Authorization: `Token ${token}` } + }); + const blob = await response.blob(); + blobUrl = window.URL.createObjectURL(blob); + } if (contentType.startsWith("image/") || contentType.startsWith("video/") || contentType.startsWith("audio/")) { this.el.addEventListener( "image-loaded", @@ -73,15 +83,6 @@ AFRAME.registerComponent("media-loader", { }, { once: true } ); - let blobUrl; - if (token) { - const imageResponse = await fetch(raw, { - method: "GET", - headers: { Authorization: `Token ${token}` } - }); - const blob = await imageResponse.blob(); - blobUrl = window.URL.createObjectURL(blob); - } this.el.setAttribute("image-plus", { src: blobUrl || raw, contentType }); this.el.setAttribute("position-at-box-shape-border", { target: ".delete-button", dirs: ["forward", "back"] }); } else if ( @@ -100,15 +101,6 @@ AFRAME.registerComponent("media-loader", { { once: true } ); this.el.addEventListener("model-error", this.onError, { once: true }); - let blobUrl; - if (token) { - const modelResponse = await fetch(raw, { - method: "GET", - headers: { Authorization: `Token ${token}` } - }); - const blob = await modelResponse.blob(); - blobUrl = window.URL.createObjectURL(blob); - } this.el.setAttribute("gltf-model-plus", { src: blobUrl || raw, contentType, diff --git a/src/hub.js b/src/hub.js index 860ca7dee035fb671ae3d1be436d5fe702c9dccc..7dc0b2e463fcffde02e07de77c338df1e0cebe8e 100644 --- a/src/hub.js +++ b/src/hub.js @@ -319,9 +319,15 @@ const onReady = async () => { document.addEventListener("paste", e => { if (e.target.nodeName === "INPUT") return; - const imgUrl = e.clipboardData.getData("text"); - console.log("Pasted: ", imgUrl, e); - spawnMediaInfrontOfPlayer(imgUrl); + const url = e.clipboardData.getData("text"); + const files = e.clipboardData.files && e.clipboardData.files; + if (url) { + spawnMediaInfrontOfPlayer(url); + } else { + for (const file of files) { + spawnMediaInfrontOfPlayer(file); + } + } }); document.addEventListener("dragover", e => { @@ -331,8 +337,14 @@ const onReady = async () => { document.addEventListener("drop", e => { e.preventDefault(); const url = e.dataTransfer.getData("url"); - const file = e.dataTransfer.files && e.dataTransfer.files[0]; - spawnMediaInfrontOfPlayer(url || file); + const files = e.dataTransfer.files; + if (url) { + spawnMediaInfrontOfPlayer(url); + } else { + for (const file of files) { + spawnMediaInfrontOfPlayer(file); + } + } }); }