Generalize mime type func

components/apps/VideoPlayer/config.ts

@@ -1,4 +1,3 @@
-import { extname } from "path";
 import type { VideoJsPlayerOptions } from "video.js";
 
 export const YT_TYPE = "video/youtube";
@@ -35,29 +34,3 @@ export const config = {
     ytControls: 2,
   },
 } as VideoJsPlayerOptions;
-
-const FALLBACK_TYPE = "video/mp4";
-
-export const getMimeType = (url: string): string | undefined => {
-  switch (extname(url).toLowerCase()) {
-    case ".m3u8":
-      return "application/x-mpegURL";
-    case ".m4v":
-    case ".mkv":
-    case ".mov":
-    case ".mp4":
-      return "video/mp4";
-    case ".oga":
-      return "audio/ogg";
-    case ".ogg":
-    case ".ogm":
-    case ".ogv":
-      return "video/ogg";
-    case ".wav":
-      return "audio/wav";
-    case ".webm":
-      return "video/webm";
-    default:
-      return FALLBACK_TYPE;
-  }
-};

components/apps/VideoPlayer/useVideoPlayer.ts

@@ -1,7 +1,6 @@
 import {
   config,
   CONTROL_BAR_HEIGHT,
-  getMimeType,
   VideoResizeKey,
   YT_TYPE,
 } from "components/apps/VideoPlayer/config";
@@ -9,12 +8,14 @@ import type {
   SourceObjectWithUrl,
   VideoPlayer,
 } from "components/apps/VideoPlayer/types";
+import { getMimeType } from "components/system/Files/FileEntry/functions";
 import useTitle from "components/system/Window/useTitle";
 import useWindowSize from "components/system/Window/useWindowSize";
 import { useFileSystem } from "contexts/fileSystem";
 import { useProcesses } from "contexts/process";
 import { basename } from "path";
 import { useCallback, useEffect, useState } from "react";
+import { VIDEO_FALLBACK_MIME_TYPE } from "utils/constants";
 import {
   bufferToUrl,
   cleanUpBufferUrl,
@@ -55,7 +56,7 @@ const useVideoPlayer = (
     cleanUpSource();
 
     const isYT = isYouTubeUrl(url);
-    const type = isYT ? YT_TYPE : getMimeType(url);
+    const type = isYT ? YT_TYPE : getMimeType(url) || VIDEO_FALLBACK_MIME_TYPE;
     const src = isYT
       ? url
       : bufferToUrl(await readFile(url), isSafari() ? type : undefined);

components/system/Files/FileEntry/functions.ts

@@ -1,6 +1,5 @@
 import type { FSModule } from "browserfs/dist/node/core/FS";
 import { monacoExtensions } from "components/apps/MonacoEditor/extensions";
-import { getMimeType } from "components/apps/VideoPlayer/config";
 import extensions from "components/system/Files/FileEntry/extensions";
 import type { FileInfo } from "components/system/Files/FileEntry/useFileInfo";
 import type { FileStat } from "components/system/Files/FileManager/functions";
@@ -33,6 +32,7 @@ import {
   SYSTEM_PATHS,
   TIFF_IMAGE_FORMATS,
   UNKNOWN_ICON_PATH,
+  VIDEO_FALLBACK_MIME_TYPE,
   VIDEO_FILE_EXTENSIONS,
   YT_ICON_CACHE,
 } from "utils/constants";
@@ -124,6 +124,35 @@ export const getProcessByFileExtension = (extension: string): string => {
   return defaultProcess;
 };
 
+export const getMimeType = (url: string): string => {
+  switch (extname(url).toLowerCase()) {
+    case ".jpg":
+    case ".jpeg":
+      return "image/jpeg";
+    case ".m3u8":
+      return "application/x-mpegURL";
+    case ".m4v":
+    case ".mkv":
+    case ".mov":
+    case ".mp4":
+      return "video/mp4";
+    case ".oga":
+      return "audio/ogg";
+    case ".ogg":
+    case ".ogm":
+    case ".ogv":
+      return "video/ogg";
+    case ".png":
+      return "image/png";
+    case ".wav":
+      return "audio/wav";
+    case ".webm":
+      return "video/webm";
+    default:
+      return "";
+  }
+};
+
 export const getShortcutInfo = (contents: Buffer): FileInfo => {
   const {
     InternetShortcut: {
@@ -685,7 +714,9 @@ export const getInfoWithExtension = (
 
               video.src = bufferToUrl(
                 contents,
-                isSafari() ? getMimeType(path) : undefined
+                isSafari()
+                  ? getMimeType(path) || VIDEO_FALLBACK_MIME_TYPE
+                  : undefined
               );
             }
           })

utils/constants.ts

@@ -76,6 +76,8 @@ export const TIFF_IMAGE_FORMATS = new Set([
   ".tiff",
 ]);
 
+export const CLIPBOARD_FILE_EXTENSIONS = new Set([".jpeg", ".jpg", ".png"]);
+
 export const IMAGE_FILE_EXTENSIONS = new Set([
   ...TIFF_IMAGE_FORMATS,
   ".ani",
@@ -218,6 +220,8 @@ export const SPREADSHEET_FORMATS = [
 
 export const MP3_MIME_TYPE = "audio/mpeg";
 
+export const VIDEO_FALLBACK_MIME_TYPE = "video/mp4";
+
 export const NON_BREAKING_HYPHEN = "\u2011";
 
 export const ONE_TIME_PASSIVE_EVENT = {