From be6148e3668de7e4120146764c6fbd67b6fff51b Mon Sep 17 00:00:00 2001
From: johnshaughnessy <johnfshaughnessy@gmail.com>
Date: Mon, 6 Aug 2018 17:07:55 -0700
Subject: [PATCH] Allow multifile or clipboard uploads. Cleanup showLoader.
---
src/components/media-loader.js | 42 ++++++++++++++--------------------
src/hub.js | 22 ++++++++++++++----
2 files changed, 34 insertions(+), 30 deletions(-)
diff --git a/src/components/media-loader.js b/src/components/media-loader.js
index 012fe14c4..1b67a41e6 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 860ca7dee..7dc0b2e46 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);
+ }
+ }
});
}
--
GitLab