Security image upload video optimization

[dot-enny]

Description

Brief description of changes
Prevented Denial of Service (DoS): Upgraded ImageUploader.tsx (the core avatar upload component) to use memory-efficient URL.createObjectURL bindings instead of aggressively allocating FileReader.readAsDataURL base64 strings that can easily crash browser memory on large files.
Video Frame Extraction: The component now officially accepts video/* inputs. If a user uploads a video file (e.g. an MP4), the frontend mounts an invisible HTML5 video tag, automatically seeks to the middle or 1st second, extracts a high-quality frame to a , and converts it completely on the client side into an 85% optimized static JPEG File.
Security & Speed: This ensures that regardless of the initial video size, the backend API is only ever hit with a lightweight optimized image!
Test Suite Added: Since it lacked coverage, I created a robust unit testing suite at src/components/shared/tests/ImageUploader.test.tsx utilizing heavy DOM mocking for HTML5 videos and canvas elements.

Related Issue

Closes #516

Type of Change

• Bug fix
• [ X ] New feature
• Breaking change
• Documentation update

Checklist

• [ X ] Code follows project style guidelines
• [ X ] Self-review completed
• [ X ] No console errors
• [ X ] Uses Lucide icons consistently
• [ X ] Responsive design implemented
• [ X ] Starknet best practices followed

[drips-wave]

@dot-enny Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[RUKAYAT-CODER]

Kindly resolve conflict and fix workflow.