diff --git a/src/assets/stylesheets/create-object-dialog.scss b/src/assets/stylesheets/create-object-dialog.scss index c40ce08e19d8a1b6457cb9dbe467b0a356899f2f..a22f0c605f9b093a5d5384d22f0c9212f3597148 100644 --- a/src/assets/stylesheets/create-object-dialog.scss +++ b/src/assets/stylesheets/create-object-dialog.scss @@ -1,6 +1,6 @@ @import 'shared'; -:local(.addMediaForm) { +:local(.add-media-form) { display: flex; flex-direction: column; align-items: center; @@ -8,7 +8,7 @@ margin: 0; } -:local(.actionButton) { +:local(.action-button) { @extend %bottom-action-button; margin-left: 6px; margin-right: 6px; @@ -25,27 +25,27 @@ align-items: center; } -:local(.smallButton) { +:local(.small-button) { margin-left: 0.25em; font-size: 2em; align-self: center; } -:local(.cancelIcon) { +:local(.cancel-icon) { color: white; &:hover { color: #FF3D7F } } -:local(.uploadIcon) { +:local(.upload-icon) { color: white; &:hover { color: #2F80ED; } } -:local(.inputBorder) { +:local(.input-border) { display: flex; border: 0.25em solid white; border-radius: 1em; @@ -56,7 +56,7 @@ @extend %default-font; } -:local(.leftSideOfInput) { +:local(.left-side-of-input) { flex-grow: 1; border: none; white-space: nowrap; @@ -68,7 +68,7 @@ text-overflow: ellipsis; } -:local(.hideFileInput) { +:local(.hide-file-input) { visibility: hidden; position: absolute; } diff --git a/src/components/media-loader.js b/src/components/media-loader.js index 1b67a41e686f7df0c7c438eedda299efff1ddcaa..d71801161631a4985ad3e127b5f05c9b330b919e 100644 --- a/src/components/media-loader.js +++ b/src/components/media-loader.js @@ -1,13 +1,20 @@ import { getBox, getScaleCoefficient } from "../utils/auto-box-collider"; import { resolveMedia } from "../utils/media-utils"; -const fetchContentType = async url => fetch(url, { method: "HEAD" }).then(r => r.headers.get("content-type")); +const fetchContentType = async (url, token) => { + const args = { method: "HEAD" }; + + if (token) { + args.headers = { Authorization: `Token ${token}` }; + } + + return fetch(url, args).then(r => r.headers.get("content-type")); +}; AFRAME.registerComponent("media-loader", { schema: { src: { type: "string" }, token: { type: "string" }, - contentType: { type: "string" }, resize: { default: false } }, @@ -64,8 +71,7 @@ AFRAME.registerComponent("media-loader", { const { raw, origin, meta } = await resolveMedia(url); console.log("resolved", url, raw, origin, meta); - const contentType = - this.data.contentType || (meta && meta.expected_content_type) || (await fetchContentType(raw)); + const contentType = (meta && meta.expected_content_type) || (await fetchContentType(raw, token)); let blobUrl; if (token) { const response = await fetch(raw, { diff --git a/src/react-components/create-object-dialog.js b/src/react-components/create-object-dialog.js index 37c4bcb461219db312b87298701555caa0a7a9ed..6b314cfa7af6cf5cdb8ddca808a5c7457ebb1bdf 100644 --- a/src/react-components/create-object-dialog.js +++ b/src/react-components/create-object-dialog.js @@ -1,4 +1,5 @@ import React, { Component } from "react"; +import "aframe"; import PropTypes from "prop-types"; import giphyLogo from "../assets/images/giphy_logo.png"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -13,14 +14,13 @@ const attributionHostnames = { const DEFAULT_OBJECT_URL = "https://asset-bundles-prod.reticulum.io/interactables/Ducky/DuckyMesh-438ff8e022.gltf"; const isMobile = AFRAME.utils.device.isMobile(); -const instructions = "Paste a URL or upload a file"; +const instructions = "Paste a URL or upload a file."; const desktopTips = "Tip: You can paste links directly into Hubs with Ctrl+V"; const mobileInstructions = <div>{instructions}</div>; const desktopInstructions = ( <div> - {instructions} - <br /> - {desktopTips} + <p>{instructions}</p> + <p>{desktopTips}</p> </div> ); diff --git a/src/utils/media-utils.js b/src/utils/media-utils.js index 697612d530e848a3307a142f792ccd142cade41d..770b69819495680d2b012571273c861bdde9264a 100644 --- a/src/utils/media-utils.js +++ b/src/utils/media-utils.js @@ -45,9 +45,8 @@ export const addMedia = (src, resize = false) => { upload(src) .then(response => { const src = response.raw; - const contentType = response.meta.expected_content_type; const token = response.meta.access_token; - entity.setAttribute("media-loader", { src, contentType, token }); + entity.setAttribute("media-loader", { src, token }); }) .catch(() => { entity.setAttribute("media-loader", { src: "error" }); diff --git a/webpack.config.js b/webpack.config.js index 07dcf72f66e6d9a1165b693a602a5cc4c18aac04..be673e68b04951c3b6f89e20c095004820274522 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -195,7 +195,7 @@ module.exports = (env, argv) => ({ new HTMLWebpackPlugin({ filename: "index.html", template: path.join(__dirname, "src", "index.html"), - chunks: ["vendor", "index"] + chunks: ["vendor", "engine", "index"] }), new HTMLWebpackPlugin({ filename: "hub.html",