mirror of
https://github.com/neosubhamoy/neodlp.git
synced 2026-03-22 15:05:48 +05:30
refactor: more component separation, persisted sidebar state and other improvements
This commit is contained in:
@@ -35,8 +35,8 @@ const PlaylistSelectionGroupItem = React.forwardRef<
|
||||
<RadioGroupPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative w-full rounded-lg border-2 border-border bg-card p-2 shadow-sm transition-all",
|
||||
"data-[state=checked]:border-primary data-[state=checked]:border-2 data-[state=checked]:bg-muted/70",
|
||||
"relative w-full rounded-lg border-2 border-border bg-background p-2 shadow-sm transition-all",
|
||||
"data-[state=checked]:border-primary data-[state=checked]:border-2 data-[state=checked]:bg-primary/10",
|
||||
"hover:bg-muted/70",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
@@ -44,28 +44,28 @@ const PlaylistSelectionGroupItem = React.forwardRef<
|
||||
{...props}
|
||||
>
|
||||
<div className="flex gap-2 w-full relative">
|
||||
<div className="w-[7rem] xl:w-[10rem]">
|
||||
<AspectRatio
|
||||
ratio={16 / 9}
|
||||
<div className="w-28 xl:w-40">
|
||||
<AspectRatio
|
||||
ratio={16 / 9}
|
||||
className={clsx(
|
||||
"w-full rounded overflow-hidden border border-border",
|
||||
"w-full rounded overflow-hidden border border-border",
|
||||
video.aspect_ratio && video.aspect_ratio === 0.56 && "relative"
|
||||
)}
|
||||
>
|
||||
<ProxyImage
|
||||
src={video.thumbnail}
|
||||
alt="thumbnail"
|
||||
<ProxyImage
|
||||
src={video.thumbnail}
|
||||
alt="thumbnail"
|
||||
className={clsx(
|
||||
video.aspect_ratio && video.aspect_ratio === 0.56 &&
|
||||
video.aspect_ratio && video.aspect_ratio === 0.56 &&
|
||||
"absolute h-full w-auto top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
)}
|
||||
)}
|
||||
/>
|
||||
</AspectRatio>
|
||||
</div>
|
||||
|
||||
<div className="flex w-[10rem] lg:w-[12rem] xl:w-[15rem] flex-col items-start text-start">
|
||||
|
||||
<div className="flex w-40 lg:w-48 xl:w-60 flex-col items-start text-start">
|
||||
<h3 className="text-sm text-nowrap w-full overflow-hidden text-ellipsis mb-1" title={video.title}>{video.title}</h3>
|
||||
<p className="text-xs text-muted-foreground mb-2">{video.channel || video.uploader || 'unknown'}</p>
|
||||
<p className="text-xs text-nowrap w-full overflow-hidden text-ellipsis text-muted-foreground mb-2" title={video.creator || video.channel || video.uploader || 'unknown'}>{video.creator || video.channel || video.uploader || 'unknown'}</p>
|
||||
<div className="flex items-center">
|
||||
<span className="text-xs text-muted-foreground flex items-center pr-3">
|
||||
<Clock className="w-4 h-4 mr-2"/>
|
||||
@@ -79,4 +79,4 @@ const PlaylistSelectionGroupItem = React.forwardRef<
|
||||
})
|
||||
PlaylistSelectionGroupItem.displayName = "PlaylistSelectionGroupItem"
|
||||
|
||||
export { PlaylistSelectionGroup, PlaylistSelectionGroupItem }
|
||||
export { PlaylistSelectionGroup, PlaylistSelectionGroupItem }
|
||||
|
||||
Reference in New Issue
Block a user