add flags to help to decide preview type

components/FileListing.tsx

@@ -11,8 +11,8 @@ import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 
 import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
-import { getExtension, getFileIcon, hasKey } from '../utils/getFileIcon'
-import { extensions, preview } from '../utils/getPreviewType'
+import { getExtension, getFileIcon } from '../utils/getFileIcon'
+import { getPreviewType, preview } from '../utils/getPreviewType'
 import { useProtectedSWRInfinite } from '../utils/fetchWithSWR'
 import { getBaseUrl } from '../utils/getBaseUrl'
 import {
@@ -185,10 +185,8 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
 
   const fileIsImage = (fileName: string) => {
     const fileExtension = getExtension(fileName)
-    if (hasKey(extensions, fileExtension)) {
-      if (extensions[fileExtension] === preview.image) {
-        return true
-      }
+    if (getPreviewType(fileExtension) === preview.image) {
+      return true
     }
     return false
   }
@@ -542,8 +540,9 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
     const fileName = file.name
     const fileExtension = fileName.slice(((fileName.lastIndexOf('.') - 1) >>> 0) + 2).toLowerCase()
 
-    if (hasKey(extensions, fileExtension)) {
-      switch (extensions[fileExtension]) {
+    const previewType = getPreviewType(fileExtension, { video: Boolean(file.video) })
+    if (previewType) {
+      switch (previewType) {
         case preview.image:
           return (
             <>

pages/api/index.ts

@@ -182,7 +182,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const { data: identityData } = await axios.get(requestUrl, {
       headers: { Authorization: `Bearer ${accessToken}` },
       params: {
-        select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file',
+        select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video',
       },
     })
 
@@ -191,12 +191,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         headers: { Authorization: `Bearer ${accessToken}` },
         params: next
           ? {
-              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file',
+              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video',
               top: siteConfig.maxItems,
               $skipToken: next,
             }
           : {
-              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file',
+              select: '@microsoft.graph.downloadUrl,name,size,id,lastModifiedDateTime,folder,file,video',
               top: siteConfig.maxItems,
             },
       })

types/index.d.ts

@@ -11,7 +11,8 @@ export type OdFileObject = {
       sha1Hash: string
       sha256Hash: string
     }
-  }
+  },
+  video: any // Check if field exists only currently
 }
 
 export type OdFolderObject = {

utils/getPreviewType.ts

@@ -70,4 +70,19 @@ const extensions = {
   url: preview.url,
 }
 
-export { extensions, preview }
+export { preview }
+
+export function getPreviewType(extension: string, flags?: { video?: boolean }): string | undefined {
+  let previewType = extensions[extension]
+  if (!previewType) {
+    return previewType
+  }
+
+  if (extension === 'ts') {
+    if (flags?.video) {
+      previewType = preview.video
+    }
+  }
+
+  return previewType
+}