diff --git a/components/system/Files/FileEntry/functions.ts b/components/system/Files/FileEntry/functions.ts index 70dd6364..c418dd92 100644 --- a/components/system/Files/FileEntry/functions.ts +++ b/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}`; diff --git a/components/system/Taskbar/TaskbarEntry/Peek/useWindowPeek.ts b/components/system/Taskbar/TaskbarEntry/Peek/useWindowPeek.ts index 789f7e46..516152a3 100644 --- a/components/system/Taskbar/TaskbarEntry/Peek/useWindowPeek.ts +++ b/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)) { diff --git a/utils/constants.ts b/utils/constants.ts index a76d5882..5563d9ee 100644 --- a/utils/constants.ts +++ b/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";