diff --git a/src/bit-components.js b/src/bit-components.js index 33dede8749e..c94f0533ab7 100644 --- a/src/bit-components.js +++ b/src/bit-components.js @@ -162,9 +162,11 @@ export const MediaContentBounds = defineComponent({ bounds: [Types.f32, 3] }); export const MediaInfo = defineComponent({ - accessibleUrl: Types.ui32 + accessibleUrl: Types.ui32, + contentType: Types.ui32 }); MediaInfo.accessibleUrl[$isStringType] = true; +MediaInfo.contentType[$isStringType] = true; export const SceneRoot = defineComponent(); export const NavMesh = defineComponent(); diff --git a/src/bit-systems/media-loading.ts b/src/bit-systems/media-loading.ts index 36e3f656543..2826ce7b3b0 100644 --- a/src/bit-systems/media-loading.ts +++ b/src/bit-systems/media-loading.ts @@ -210,6 +210,7 @@ function* loadMedia(world: HubsWorld, eid: EntityID) { addComponent(world, MediaLoaded, media); addComponent(world, MediaInfo, media); MediaInfo.accessibleUrl[media] = APP.getSid(urlData.accessibleUrl); + MediaInfo.contentType[media] = APP.getSid(urlData.contentType); } catch (e) { console.error(e); media = renderAsEntity(world, ErrorObject()); diff --git a/src/react-components/room/hooks/useObjectList.js b/src/react-components/room/hooks/useObjectList.js index dd7e8d135be..ae21274839c 100644 --- a/src/react-components/room/hooks/useObjectList.js +++ b/src/react-components/room/hooks/useObjectList.js @@ -1,6 +1,6 @@ import React, { useState, useEffect, useContext, createContext, useCallback, Children, cloneElement } from "react"; import PropTypes from "prop-types"; -import { mediaSort, getMediaType } from "../../../utils/media-sorting.js"; +import { mediaSort, mediaSortAframe, getMediaType, getMediaTypeAframe } from "../../../utils/media-sorting.js"; import { shouldUseNewLoader } from "../../../utils/bit-utils"; import { defineQuery } from "bitecs"; import { MediaInfo } from "../../../bit-components.js"; @@ -90,12 +90,12 @@ export function ObjectListProvider({ scene, children }) { })); setObjects(objects); } else { - const objects = scene.systems["listed-media"].els.sort(mediaSort).map(el => ({ + const objects = scene.systems["listed-media"].els.sort(mediaSortAframe).map(el => ({ id: el.object3D.id, // Having a listed-media component does not guarantee the existence of a media-loader component, // so don't crash if there isn't one. name: getDisplayString((el.components["media-loader"] && el.components["media-loader"].data.src) || ""), - type: getMediaType(el), + type: getMediaTypeAframe(el), el })); setObjects(objects); diff --git a/src/utils/media-sorting.js b/src/utils/media-sorting.js index ae7251809ef..a2cf0792d14 100644 --- a/src/utils/media-sorting.js +++ b/src/utils/media-sorting.js @@ -5,7 +5,7 @@ import { faNewspaper } from "@fortawesome/free-solid-svg-icons/faNewspaper"; import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion"; import { faCube } from "@fortawesome/free-solid-svg-icons/faCube"; import { hasComponent } from "bitecs"; -import { GLTFModel, MediaImage, MediaPDF, MediaVideo } from "../bit-components"; +import { GLTFModel, MediaImage, MediaInfo, MediaPDF, MediaVideo } from "../bit-components"; export const SORT_ORDER_VIDEO = 0; export const SORT_ORDER_AUDIO = 1; @@ -15,18 +15,19 @@ export const SORT_ORDER_MODEL = 4; export const SORT_ORDER_UNIDENTIFIED = 5; function mediaSortOrder(eid) { - if (hasComponent(APP.world, MediaVideo)) { - const contentTypeSid = MediaVideo.contentType[eid]; - const contentType = APP.getString(contentTypeSid); - if (contentType.startsWith("audio/")) { - return SORT_ORDER_AUDIO; - } else { - return SORT_ORDER_VIDEO; + if (hasComponent(APP.world, MediaVideo, eid)) { + if (hasComponent(APP.world, MediaInfo, eid)) { + const contentTypeSid = MediaInfo.contentType[eid]; + const contentType = APP.getString(contentTypeSid); + if (contentType.startsWith("audio/")) { + return SORT_ORDER_AUDIO; + } } + return SORT_ORDER_VIDEO; } - if (hasComponent(APP.world, MediaImage)) return SORT_ORDER_IMAGE; - if (hasComponent(APP.world, MediaPDF)) return SORT_ORDER_PDF; - if (hasComponent(APP.world, GLTFModel)) return SORT_ORDER_MODEL; + if (hasComponent(APP.world, MediaImage, eid)) return SORT_ORDER_IMAGE; + if (hasComponent(APP.world, MediaPDF, eid)) return SORT_ORDER_PDF; + if (hasComponent(APP.world, GLTFModel, eid)) return SORT_ORDER_MODEL; return SORT_ORDER_UNIDENTIFIED; }