Added support for m3u8 mimetype

packages/common/src/utils/CommonKnownContentTypes.ts

@@ -11,6 +11,7 @@ export const CommonKnownContentTypes = {
   jpg: 'image/jpeg',
   jpeg: 'image/jpeg',
   pdf: 'application/pdf',
+  m3u8: 'application/vnd.apple.mpegurl',
   mp4: 'video/mp4',
   mp3: 'audio/mpeg',
   tsx: 'application/octet-stream',

packages/editor/src/components/EditorContainer.tsx

@@ -307,7 +307,7 @@ const EditorContainer = () => {
     const el = document.createElement('input')
     el.type = 'file'
     el.multiple = true
-    el.accept = '.gltf,.glb,.fbx,.vrm,.tga,.png,.jpg,.jpeg,.mp3,.aac,.ogg,.m4a,.zip,.mp4,.mkv'
+    el.accept = '.gltf,.glb,.fbx,.vrm,.tga,.png,.jpg,.jpeg,.mp3,.aac,.ogg,.m4a,.zip,.mp4,.mkv,.m3u8'
     el.style.display = 'none'
     el.onchange = async () => {
       const pName = projectName.value

packages/editor/src/components/assets/AssetPreviewPanels/VedioPreviewPanel.tsx → packages/editor/src/components/assets/AssetPreviewPanels/VideoPreviewPanel.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-const VedioPreview = styled.video`
+const VideoPreview = styled.video`
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -13,12 +13,12 @@ const VedioPreview = styled.video`
  * @returns
  */
 
-export const VedioPreviewPanel = (props) => {
+export const VideoPreviewPanel = (props) => {
   const url = props.resourceProps.resourceUrl
 
   return (
-    <VedioPreview src={url} controls={true}>
+    <VideoPreview src={url} controls={true}>
       Your Browser doesn't support Video
-    </VedioPreview>
+    </VideoPreview>
   )
 }

packages/editor/src/components/assets/AssetsPreviewPanel.tsx

@@ -14,7 +14,7 @@ import { camera, renderer, scene } from './AssetPreviewPanels/ModelPreviewPanel'
 import { ModelPreviewPanel } from './AssetPreviewPanels/ModelPreviewPanel'
 import { PreviewUnavailable } from './AssetPreviewPanels/PreviewUnavailable'
 import { TxtPreviewPanel } from './AssetPreviewPanels/TxtPreviewPanel'
-import { VedioPreviewPanel } from './AssetPreviewPanels/VedioPreviewPanel'
+import { VideoPreviewPanel } from './AssetPreviewPanels/VideoPreviewPanel'
 
 const AssetHeading = (styled as any).div`
   text-align: center;
@@ -99,11 +99,12 @@ export const AssetsPreviewPanel = React.forwardRef(({ hideHeading }: Props, ref)
 
       case 'video/mp4':
       case 'mp4':
-        const vedioPreviewPanel = {
-          PreviewSource: VedioPreviewPanel,
+      case 'm3u8':
+        const videoPreviewPanel = {
+          PreviewSource: VideoPreviewPanel,
           resourceProps: { resourceUrl: props.resourceUrl, name: props.name }
         }
-        usePreviewPanel(vedioPreviewPanel)
+        usePreviewPanel(videoPreviewPanel)
         break
       case 'audio/mpeg':
       case 'mpeg':

packages/editor/src/components/assets/FileBrowserContentPanel.tsx

@@ -44,6 +44,7 @@ export const PrefabFileType = {
   png: ScenePrefabs.image,
   jpeg: ScenePrefabs.image,
   jpg: ScenePrefabs.image,
+  m3u8: MediaPrefabs.video,
   mp4: MediaPrefabs.video,
   mpeg: MediaPrefabs.audio,
   mp3: MediaPrefabs.audio,
@@ -56,6 +57,7 @@ export const PrefabFileType = {
   'image/jpeg': ScenePrefabs.image,
   'image/jpg': ScenePrefabs.image,
   'application/pdf': null,
+  'application/vnd.apple.mpegurl': MediaPrefabs.video,
   'video/mp4': MediaPrefabs.video,
   'audio/mpeg': MediaPrefabs.audio,
   'audio/mp3': MediaPrefabs.audio

packages/editor/src/constants/AssetTypes.ts

@@ -23,7 +23,7 @@ export const ItemTypes = {
     'model/usdz'
   ],
   Scripts: ['tsx', AssetType.TS, 'jsx', 'js', AssetType.Script],
-  Videos: [AssetType.MP4, 'm3u8', 'video/mp4', AssetType.MKV],
+  Videos: [AssetType.MP4, AssetType.M3U8, 'video/mp4', AssetType.MKV],
   Volumetrics: ['drcs', 'uvol'],
   Text: [AssetType.PlainText, 'txt'],
   ECS: [AssetType.XRE, 'scene.json'],

packages/engine/src/assets/classes/AssetLoader.ts

@@ -203,6 +203,7 @@ const getAssetType = (assetFileName: string): AssetType => {
   else if (/\.(?:m4a)$/.test(assetFileName)) return AssetType.M4A
   else if (/\.(?:mp4)$/.test(assetFileName)) return AssetType.MP4
   else if (/\.(?:mkv)$/.test(assetFileName)) return AssetType.MKV
+  else if (/\.(?:m3u8)$/.test(assetFileName)) return AssetType.M3U8
   return null!
 }
 
@@ -220,7 +221,7 @@ const getAssetClass = (assetFileName: string): AssetClass => {
     return AssetClass.Model
   } else if (/\.png|jpg|jpeg|tga|ktx2$/.test(assetFileName)) {
     return AssetClass.Image
-  } else if (/\.mp4|avi|webm|mov$/.test(assetFileName)) {
+  } else if (/\.mp4|avi|webm|mov|m3u8$/.test(assetFileName)) {
     return AssetClass.Video
   } else if (/\.mp3|ogg|m4a|flac|wav$/.test(assetFileName)) {
     return AssetClass.Audio
@@ -293,6 +294,7 @@ export const getLoader = (assetType: AssetType) => {
       return audioLoader()
     case AssetType.MP4:
     case AssetType.MKV:
+    case AssetType.M3U8:
       return videoLoader()
     default:
       return fileLoader()

packages/engine/src/assets/constants/fileTypes.tsx

@@ -1,7 +1,7 @@
 // array containing audio file type
 export const AudioFileTypes = ['.mp3', '.mpeg', 'audio/mpeg', '.ogg']
 //array containing video file type
-export const VideoFileTypes = ['.mp4', 'video/mp4']
+export const VideoFileTypes = ['.mp4', 'video/mp4', '.m3u8', 'application/vnd.apple.mpegurl']
 //array containing image files types
 export const ImageFileTypes = [
   '.png',

packages/engine/src/assets/enum/AssetType.ts

@@ -22,5 +22,6 @@ export enum AssetType {
   XLS = 'xls',
   Script = 'script',
   KTX2 = 'ktx2',
-  USDZ = 'usdz'
+  USDZ = 'usdz',
+  M3U8 = 'm3u8'
 }