xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: preview image scaling

Browse Source
This commit is contained in:
Maze Winther
2025-07-10 23:45:59 +02:00
parent c86d200297
commit eabcdb0988
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/components/editor/preview-panel.tsx
View File

@ -202,7 +202,10 @@ export function PreviewPanel() {
// Video elements // Video elements
if (mediaItem.type === "video") { if (mediaItem.type === "video") {
return ( return (
<div key={element.id} className="absolute inset-0"> <div
key={element.id}
className="absolute inset-0 flex items-center justify-center"
>
<VideoPlayer <VideoPlayer
src={mediaItem.url!} src={mediaItem.url!}
poster={mediaItem.thumbnailUrl} poster={mediaItem.thumbnailUrl}
@ -218,11 +221,14 @@ export function PreviewPanel() {
// Image elements // Image elements
if (mediaItem.type === "image") { if (mediaItem.type === "image") {
return ( return (
<div key={element.id} className="absolute inset-0"> <div
key={element.id}
className="absolute inset-0 flex items-center justify-center"
>
<img <img
src={mediaItem.url!} src={mediaItem.url!}
alt={mediaItem.name} alt={mediaItem.name}
className="w-full h-full object-cover" className="max-w-full max-h-full object-contain"
draggable={false} draggable={false}
/> />
</div> </div>

2
apps/web/src/components/ui/video-player.tsx
View File

@ -118,7 +118,7 @@ export function VideoPlayer({
ref={videoRef} ref={videoRef}
src={src} src={src}
poster={poster} poster={poster}
className={`w-full h-full object-cover ${className}`} className={`max-w-full max-h-full object-contain ${className}`}
playsInline playsInline
preload="auto" preload="auto"
controls={false} controls={false}