diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js index 0b74d55b2698d51f6688e23e02e871177ecea436..f925d6ae55d82e7019f68658d3f7c03a986a038e 100644 --- a/src/react-components/hub-create-panel.js +++ b/src/react-components/hub-create-panel.js @@ -6,6 +6,7 @@ import classNames from "classnames"; import faAngleLeft from "@fortawesome/fontawesome-free-solid/faAngleLeft"; import faAngleRight from "@fortawesome/fontawesome-free-solid/faAngleRight"; import FontAwesomeIcon from "@fortawesome/react-fontawesome"; +import { resolveURL, extractUrlBase } from "../utils/resolveURL"; import default_scene_preview_thumbnail from "../assets/images/default_thumbnail.png"; @@ -42,11 +43,24 @@ class HubCreatePanel extends Component { _getEnvironmentThumbnail = environmentIndex => { const environment = this.props.environments[environmentIndex]; const meta = environment.meta || {}; - return ( - (meta.images || []).find(i => i.type === "preview-thumbnail") || { - srcset: default_scene_preview_thumbnail + + let environmentThumbnail = { + srcset: default_scene_preview_thumbnail + }; + + if (meta.images) { + const thumbnailImage = meta.images.find(i => i.type === "preview-thumbnail"); + + if (thumbnailImage) { + const baseURL = new URL(extractUrlBase(environment.bundle_url), window.location.href); + + environmentThumbnail = { + srcset: resolveURL(thumbnailImage.srcset, baseURL) + }; } - ); + } + + return environmentThumbnail; }; createHub = async e => { diff --git a/src/utils/resolveURL.js b/src/utils/resolveURL.js index ddc6c86803b9adc7ea028b2b127ae0783270f521..35ccc3150278558e4026240164116785620ecfc3 100644 --- a/src/utils/resolveURL.js +++ b/src/utils/resolveURL.js @@ -15,3 +15,11 @@ export function resolveURL(url, path) { // Relative URL return path + url; } + +export function extractUrlBase(url) { + const index = url.lastIndexOf("/"); + + if (index === -1) return "./"; + + return url.substr(0, index + 1); +}