feat: add VideoViewer component for enhanced video playback experience; implement download functionality and viewer modal

src/app/components/RenderMessageContent.tsx

@@ -28,6 +28,7 @@ import {
 import { UrlPreviewCard, UrlPreviewHolder, YouTubeEmbed, isYouTubeUrl, TikTokEmbed, isTikTokUrl, GiphyEmbed, isGiphyUrl } from './url-preview';
 import { Image, MediaControl, Video } from './media';
 import { ImageViewer } from './image-viewer';
+import { VideoViewer } from './video-viewer';
 import { PdfViewer } from './Pdf-viewer';
 import { TextViewer } from './text-viewer';
 import { testMatrixTo } from '../plugins/matrix-to';
@@ -240,7 +241,6 @@ export function RenderMessageContent({
           content={getContent()}
           renderAsFile={renderFile}
           renderVideoContent={({ body, info, mimeType, url, encInfo, ...props }) => {
-            // Check if there's valid thumbnail metadata
             const hasValidThumbnail = 
               (typeof info.thumbnail_file?.url === 'string' || typeof info.thumbnail_url === 'string') &&
               typeof info.thumbnail_info?.mimetype === 'string';
@@ -257,7 +257,6 @@ export function RenderMessageContent({
                 renderThumbnail={
                   mediaAutoLoad
                     ? () => hasValidThumbnail ? (
-                        // Try to load the provided thumbnail first
                         <ThumbnailContent
                           info={info}
                           renderImage={(src) => (
@@ -265,7 +264,6 @@ export function RenderMessageContent({
                           )}
                         />
                       ) : (
-                        // Fallback: Extract first frame from the video itself
                         <VideoFrameThumbnail
                           mimeType={mimeType}
                           url={url}
@@ -277,6 +275,7 @@ export function RenderMessageContent({
                       )
                     : undefined
                 }
+                renderViewer={(p) => <VideoViewer {...p} />}
                 renderVideo={(p) => <Video {...p} />}
               />
             );