Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Testnets #140

Merged
merged 2 commits into from
Nov 5, 2024
Merged

Testnets #140

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e8f6a27
fix: catch unrecognized video uploading
martillansky Nov 5, 2024
3974851
Merge pull request #139 from martillansky/testnets
martillansky Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 28 additions & 23 deletions src/app/[pohid]/claim/Video.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,29 +140,34 @@ function VideoStep({ advance, video$, isRenewal, videoError }: PhotoProps) {
className="bg-whiteBackground flex h-full items-center justify-center rounded p-2 outline-dotted outline-white"
type="video"
onDrop={async (received) => {
const file = received[0];
const blob = new Blob([file], { type: file.type });
const uri = URL.createObjectURL(blob);

await checkVideoDuration(blob);
checkVideoSize(blob);
const vid = document.createElement("video");
vid.crossOrigin = "anonymous";
vid.src = uri;
vid.preload = "auto";

vid.addEventListener("loadeddata", async () => {
if (
vid.videoWidth < MIN_DIMS.width ||
vid.videoHeight < MIN_DIMS.height
) {
videoError(ERROR_MSG.dimensions);
return console.error(ERROR_MSG.dimensions);
}

setRecording(false);
video$.set({ uri, content: blob });
});
try {
const file = received[0];
const blob = new Blob([file], { type: file.type });
Comment on lines +144 to +145
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add file type validation before processing.

The code should validate the file type before attempting to process it to provide better error messages.

Add file type validation:

+ const ALLOWED_VIDEO_TYPES = ['video/webm', 'video/mp4', 'video/avi', 'video/quicktime'];
  const file = received[0];
+ if (!ALLOWED_VIDEO_TYPES.includes(file.type)) {
+   videoError(`Unsupported video format. Please use ${ALLOWED_VIDEO_TYPES.map(t => t.split('/')[1]).join(', ')}`);
+   return;
+ }
  const blob = new Blob([file], { type: file.type });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const file = received[0];
const blob = new Blob([file], { type: file.type });
const ALLOWED_VIDEO_TYPES = ['video/webm', 'video/mp4', 'video/avi', 'video/quicktime'];
const file = received[0];
if (!ALLOWED_VIDEO_TYPES.includes(file.type)) {
videoError(`Unsupported video format. Please use ${ALLOWED_VIDEO_TYPES.map(t => t.split('/')[1]).join(', ')}`);
return;
}
const blob = new Blob([file], { type: file.type });

const uri = URL.createObjectURL(blob);

await checkVideoDuration(blob);
checkVideoSize(blob);
const vid = document.createElement("video");
vid.crossOrigin = "anonymous";
vid.src = uri;
vid.preload = "auto";

vid.addEventListener("loadeddata", async () => {
if (
vid.videoWidth < MIN_DIMS.width ||
vid.videoHeight < MIN_DIMS.height
) {
videoError(ERROR_MSG.dimensions);
return console.error(ERROR_MSG.dimensions);
}

setRecording(false);
video$.set({ uri, content: blob });
});
} catch (error: any) {
videoError("Unexpected error. Check format/codecs used.");
return console.error(error);
}
Comment on lines +143 to +170
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add proper cleanup to prevent memory leaks.

The video element created for dimension validation is not properly cleaned up, which could lead to memory leaks.

Apply this diff to add cleanup:

  try {
    const file = received[0];
    const blob = new Blob([file], { type: file.type });
    const uri = URL.createObjectURL(blob);

    await checkVideoDuration(blob);
    checkVideoSize(blob);
    const vid = document.createElement("video");
    vid.crossOrigin = "anonymous";
    vid.src = uri;
    vid.preload = "auto";

    vid.addEventListener("loadeddata", async () => {
      if (
        vid.videoWidth < MIN_DIMS.width ||
        vid.videoHeight < MIN_DIMS.height
      ) {
        videoError(ERROR_MSG.dimensions);
+       URL.revokeObjectURL(uri);
+       vid.remove();
        return console.error(ERROR_MSG.dimensions);
      }

      setRecording(false);
      video$.set({ uri, content: blob });
+     vid.remove();
    });
  } catch (error: any) {
    videoError("Unexpected error. Check format/codecs used.");
    return console.error(error);
  }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
try {
const file = received[0];
const blob = new Blob([file], { type: file.type });
const uri = URL.createObjectURL(blob);
await checkVideoDuration(blob);
checkVideoSize(blob);
const vid = document.createElement("video");
vid.crossOrigin = "anonymous";
vid.src = uri;
vid.preload = "auto";
vid.addEventListener("loadeddata", async () => {
if (
vid.videoWidth < MIN_DIMS.width ||
vid.videoHeight < MIN_DIMS.height
) {
videoError(ERROR_MSG.dimensions);
return console.error(ERROR_MSG.dimensions);
}
setRecording(false);
video$.set({ uri, content: blob });
});
} catch (error: any) {
videoError("Unexpected error. Check format/codecs used.");
return console.error(error);
}
try {
const file = received[0];
const blob = new Blob([file], { type: file.type });
const uri = URL.createObjectURL(blob);
await checkVideoDuration(blob);
checkVideoSize(blob);
const vid = document.createElement("video");
vid.crossOrigin = "anonymous";
vid.src = uri;
vid.preload = "auto";
vid.addEventListener("loadeddata", async () => {
if (
vid.videoWidth < MIN_DIMS.width ||
vid.videoHeight < MIN_DIMS.height
) {
videoError(ERROR_MSG.dimensions);
URL.revokeObjectURL(uri);
vid.remove();
return console.error(ERROR_MSG.dimensions);
}
setRecording(false);
video$.set({ uri, content: blob });
vid.remove();
});
} catch (error: any) {
videoError("Unexpected error. Check format/codecs used.");
return console.error(error);
}

}}
>
<div className="bg-orange mr-4 flex h-12 w-12 items-center justify-center rounded-full">
Expand Down
Loading