kangwan/20260512-skg-tk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: enlarge filmstrip frames in place

Browse Source
This commit is contained in:
kang
2026-05-19 17:42:02 +08:00
parent d461c65472
commit cb991e7a17
4 changed files with 15 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/components/media-asset-tile.tsx
View File

@@ -29,7 +29,6 @@ type MediaAssetTileProps = {
objectFit?: "contain" | "cover"
previewObjectFit?: "contain" | "cover"
previewClassName?: string
previewSize?: "normal" | "large"
selected?: boolean
disabled?: boolean
busy?: boolean
@@ -56,10 +55,10 @@ function mediaObjectClass(fit: "contain" | "cover") {
return fit === "cover" ? "object-cover" : "object-contain"
}
function previewPosition(event: ReactMouseEvent<HTMLElement>, size: "normal" | "large" = "normal") {
function previewPosition(event: ReactMouseEvent<HTMLElement>) {
const margin = 16
const previewWidth = Math.min(size === "large" ? 720 : 520, window.innerWidth - margin * 2)
const previewHeight = Math.min(size === "large" ? 880 : 760, window.innerHeight - margin * 2)
const previewWidth = Math.min(520, window.innerWidth - margin * 2)
const previewHeight = Math.min(760, window.innerHeight - margin * 2)
let left = event.clientX + 18
let top = event.clientY + 18
if (left + previewWidth > window.innerWidth - margin) left = event.clientX - previewWidth - 18
@@ -82,7 +81,6 @@ export function MediaAssetTile({
objectFit = "contain",
previewObjectFit,
previewClassName = "",
previewSize = "normal",
selected = false,
disabled = false,
busy = false,
@@ -103,13 +101,10 @@ export function MediaAssetTile({
const canPreview = !!mediaSrc && !disablePreview
const fit = mediaObjectClass(objectFit)
const previewFit = mediaObjectClass(previewObjectFit ?? objectFit)
const previewWidthClass = previewSize === "large" ? "w-[min(720px,calc(100vw-32px))]" : "w-[min(520px,calc(100vw-32px))]"
const previewMaxHeightClass = previewSize === "large" ? "max-h-[min(84vh,860px)]" : "max-h-[min(76vh,720px)]"
const previewMediaHeightClass = previewSize === "large" ? "max-h-[min(82vh,840px)]" : "max-h-[min(74vh,700px)]"
const updatePreview = (event: ReactMouseEvent<HTMLElement>) => {
if (!canPreview) return
setPosition(previewPosition(event, previewSize))
setPosition(previewPosition(event))
}
const media = kind === "video" && src ? (
@@ -140,10 +135,10 @@ export function MediaAssetTile({
const preview = position && canPreview && typeof document !== "undefined"
? createPortal(
<div
className={`pointer-events-none fixed z-[12000] ${previewWidthClass} rounded-xl border border-white/15 bg-black/94 p-3 shadow-[0_28px_80px_rgba(0,0,0,0.72)] ${previewClassName}`}
className={`pointer-events-none fixed z-[10000] w-[min(520px,calc(100vw-32px))] rounded-xl border border-white/15 bg-black/94 p-3 shadow-[0_28px_80px_rgba(0,0,0,0.72)] ${previewClassName}`}
style={{ left: position.left, top: position.top }}
>
<div className={`flex ${previewMaxHeightClass} items-center justify-center overflow-hidden rounded-lg bg-black`}>
<div className="flex max-h-[min(76vh,720px)] items-center justify-center overflow-hidden rounded-lg bg-black">
{kind === "video" && src ? (
<video
src={src}
@@ -153,13 +148,13 @@ export function MediaAssetTile({
playsInline
autoPlay
preload="auto"
className={`${previewMediaHeightClass} max-w-full ${previewFit}`}
className={`max-h-[min(74vh,700px)] max-w-full ${previewFit}`}
/>
) : (
<img
src={mediaSrc}
alt=""
className={`${previewMediaHeightClass} max-w-full ${previewFit}`}
className={`max-h-[min(74vh,700px)] max-w-full ${previewFit}`}
/>
)}
</div>