Base context options + fixed video frame size

components/system/Files/FileEntry/functions.ts

@@ -11,6 +11,7 @@ import processDirectory from "contexts/process/directory";
 import ini from "ini";
 import { extname, join } from "path";
 import {
+  BASE_2D_CONTEXT_OPTIONS,
   EMPTY_BUFFER,
   IMAGE_FILE_EXTENSIONS,
   MP3_MIME_TYPE,
@@ -167,17 +168,18 @@ export const getInfoWithExtension = (
           "loadeddata",
           () => {
             const canvas = document.createElement("canvas");
+            canvas.height = video.videoHeight;
+            canvas.width = video.videoWidth;
 
             canvas
-              .getContext("2d")
-              ?.drawImage(video, 0, 0, canvas.width, canvas.height);
+              .getContext("2d", BASE_2D_CONTEXT_OPTIONS)
+              ?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
             canvas.toBlob((blob) =>
               getInfoByFileExtension(URL.createObjectURL(blob))
             );
           },
           ONE_TIME_PASSIVE_EVENT
         );
-
         video.src = bufferToUrl(contents);
         video.load();
       }
@@ -219,10 +221,10 @@ export const getLineCount = (
   maxWidth: number
 ): number => {
   const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d", {
-    alpha: false,
-    desynchronized: true,
-  }) as CanvasRenderingContext2D;
+  const context = canvas.getContext(
+    "2d",
+    BASE_2D_CONTEXT_OPTIONS
+  ) as CanvasRenderingContext2D;
   const lines = [""];
 
   context.font = `${fontSize} ${fontFamily}`;

components/system/Taskbar/TaskbarEntry/Peek/useWindowPeek.ts

@@ -1,6 +1,7 @@
 import { useProcesses } from "contexts/process";
 import { useEffect, useRef, useState } from "react";
 import {
+  BASE_2D_CONTEXT_OPTIONS,
   MILLISECONDS_IN_SECOND,
   ONE_TIME_PASSIVE_EVENT,
 } from "utils/constants";
@@ -17,7 +18,7 @@ const renderFrame = (
       if (height && width) {
         const { data: pixelData } =
           canvas
-            .getContext("2d", { alpha: false, desynchronized: true })
+            .getContext("2d", BASE_2D_CONTEXT_OPTIONS)
             ?.getImageData(0, 0, width, height) || {};
 
         if (pixelData?.some(Boolean)) {

utils/constants.ts

@@ -1,5 +1,10 @@
 import type { Size } from "components/system/Window/RndWindow/useResizable";
 
+export const BASE_2D_CONTEXT_OPTIONS: CanvasRenderingContext2DSettings = {
+  alpha: false,
+  desynchronized: true,
+};
+
 export const DEFAULT_LOCALE = "en";
 
 export const DEFAULT_THEME = "defaultTheme";