External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: scroll in media panel

Browse Source
This commit is contained in:
Maze Winther
2025-07-26 11:50:12 +02:00
parent 7d0113d366
commit ae94056952
2 changed files with 57 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/media-panel/index.tsx
+2 -2
View File
@@ -46,9 +46,9 @@ export function MediaPanel() {
}; };
return ( return (
<div className="h-full flex flex-col bg-panel rounded-sm overflow-scroll"> <div className="h-full flex flex-col bg-panel rounded-sm">
<TabBar /> <TabBar />
<div className="flex-1">{viewMap[activeTab]}</div> <div className="flex-1 overflow-y-auto">{viewMap[activeTab]}</div>
</div> </div>
); );
} }
apps/web/src/components/editor/media-panel/views/media.tsx
+55 -52
View File
@@ -25,6 +25,7 @@ import {
import { DraggableMediaItem } from "@/components/ui/draggable-item"; import { DraggableMediaItem } from "@/components/ui/draggable-item";
import { useProjectStore } from "@/stores/project-store"; import { useProjectStore } from "@/stores/project-store";
import { useTimelineStore } from "@/stores/timeline-store"; import { useTimelineStore } from "@/stores/timeline-store";
import { ScrollArea } from "@/components/ui/scroll-area";
export function MediaView() { export function MediaView() {
const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore(); const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();
@@ -204,7 +205,7 @@ export function MediaView() {
className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`} className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`}
{...dragProps} {...dragProps}
> >
<div className="p-3 pb-2"> <div className="p-3 pb-2 bg-panel">
{/* Search and filter controls */} {/* Search and filter controls */}
<div className="flex gap-2"> <div className="flex gap-2">
<Select value={mediaFilter} onValueChange={setMediaFilter}> <Select value={mediaFilter} onValueChange={setMediaFilter}>
@@ -241,57 +242,59 @@ export function MediaView() {
</div> </div>
</div> </div>
<div className="flex-1 overflow-y-auto p-3 pt-0"> <ScrollArea className="h-full">
{isDragOver || filteredMediaItems.length === 0 ? ( <div className="flex-1 p-3 pt-0">
<MediaDragOverlay {isDragOver || filteredMediaItems.length === 0 ? (
isVisible={true} <MediaDragOverlay
isProcessing={isProcessing} isVisible={true}
progress={progress} isProcessing={isProcessing}
onClick={handleFileSelect} progress={progress}
isEmptyState={filteredMediaItems.length === 0 && !isDragOver} onClick={handleFileSelect}
/> isEmptyState={filteredMediaItems.length === 0 && !isDragOver}
) : ( />
<div ) : (
className="grid gap-2" <div
style={{ className="grid gap-2"
gridTemplateColumns: "repeat(auto-fill, 160px)", style={{
}} gridTemplateColumns: "repeat(auto-fill, 160px)",
> }}
{/* Render each media item as a draggable button */} >
{filteredMediaItems.map((item) => ( {/* Render each media item as a draggable button */}
<ContextMenu key={item.id}> {filteredMediaItems.map((item) => (
<ContextMenuTrigger> <ContextMenu key={item.id}>
<DraggableMediaItem <ContextMenuTrigger>
name={item.name} <DraggableMediaItem
preview={renderPreview(item)} name={item.name}
dragData={{ preview={renderPreview(item)}
id: item.id, dragData={{
type: item.type, id: item.id,
name: item.name, type: item.type,
}} name: item.name,
showPlusOnDrag={false} }}
onAddToTimeline={(currentTime) => showPlusOnDrag={false}
useTimelineStore onAddToTimeline={(currentTime) =>
.getState() useTimelineStore
.addMediaAtTime(item, currentTime) .getState()
} .addMediaAtTime(item, currentTime)
rounded={false} }
/> rounded={false}
</ContextMenuTrigger> />
<ContextMenuContent> </ContextMenuTrigger>
<ContextMenuItem>Export clips</ContextMenuItem> <ContextMenuContent>
<ContextMenuItem <ContextMenuItem>Export clips</ContextMenuItem>
variant="destructive" <ContextMenuItem
onClick={(e) => handleRemove(e, item.id)} variant="destructive"
> onClick={(e) => handleRemove(e, item.id)}
Delete >
</ContextMenuItem> Delete
</ContextMenuContent> </ContextMenuItem>
</ContextMenu> </ContextMenuContent>
))} </ContextMenu>
</div> ))}
)} </div>
</div> )}
</div>
</ScrollArea>
</div> </div>
</> </>
); );