Add media index support to media-loader/reolsveMedia

src/components/media-loader.js

@@ -5,6 +5,7 @@ AFRAME.registerComponent("media-loader", {
   schema: {
     src: { type: "string" },
     token: { type: "string" },
+    index: { type: "number" },
     resize: { default: false }
   },
 
@@ -59,7 +60,7 @@ AFRAME.registerComponent("media-loader", {
   // TODO: correctly handle case where src changes
   async update(oldData) {
     try {
-      const { src, token } = this.data;
+      const { src, token, index } = this.data;
 
       if (src !== oldData.src && !this.showLoaderTimeout) {
         this.showLoaderTimeout = setTimeout(this.showLoader, 100);
@@ -67,7 +68,7 @@ AFRAME.registerComponent("media-loader", {
 
       if (!src) return;
 
-      const { raw, images, contentType } = await resolveMedia(src, token);
+      const { raw, images, contentType } = await resolveMedia(src, token, false, index);
 
       if (token) {
         if (this.blobURL) {

src/utils/media-utils.js

@@ -17,9 +17,10 @@ const fetchContentType = async (url, token) => {
 };
 
 const resolveMediaCache = new Map();
-export const resolveMedia = async (url, token, skipContentType) => {
+export const resolveMedia = async (url, token, skipContentType, index) => {
   const parsedUrl = new URL(url);
-  if (resolveMediaCache.has(url)) return resolveMediaCache.get(url);
+  const cacheKey = `${url}|${index}`;
+  if (resolveMediaCache.has(cacheKey)) return resolveMediaCache.get(cacheKey);
 
   const isNotHttpOrHttps = parsedUrl.protocol !== "http:" && parsedUrl.protocol !== "https:";
   const resolved =
@@ -28,7 +29,7 @@ export const resolveMedia = async (url, token, skipContentType) => {
       : await fetch(mediaAPIEndpoint, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ media: { url } })
+          body: JSON.stringify({ media: { url, index } })
         }).then(r => r.json());
 
   if (!isNotHttpOrHttps && !skipContentType) {
@@ -37,7 +38,7 @@ export const resolveMedia = async (url, token, skipContentType) => {
     resolved.contentType = contentType;
   }
 
-  resolveMediaCache.set(url, resolved);
+  resolveMediaCache.set(cacheKey, resolved);
   return resolved;
 };