mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-14 05:24:04 +00:00
[ENG-1536] Quick preview fixes: Tooltip, video switching, and media controls flash (#1934)
* Fix controls flashing when switching videos, tooltip, and video switching in quickpreview * remove state * props
This commit is contained in:
parent
9c44dd44e2
commit
eb225883e6
|
@ -1,7 +1,6 @@
|
|||
import { getIcon, iconNames } from '@sd/assets/util';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
memo,
|
||||
SyntheticEvent,
|
||||
useEffect,
|
||||
useMemo,
|
||||
|
@ -186,10 +185,8 @@ interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {
|
|||
|
||||
const Video = ({ paused, blackBars, blackBarsSize, className, ...props }: VideoProps) => {
|
||||
const ref = useRef<HTMLVideoElement>(null);
|
||||
|
||||
const size = useSize(ref);
|
||||
const { style: blackBarsStyle } = useBlackBars(size, blackBarsSize);
|
||||
|
||||
const { t } = useLocale();
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -220,6 +217,14 @@ const Video = ({ paused, blackBars, blackBarsSize, className, ...props }: VideoP
|
|||
style={{ ...(blackBars ? blackBarsStyle : {}) }}
|
||||
className={clsx(blackBars && size.width === 0 && 'invisible', className)}
|
||||
{...props}
|
||||
key={props.src}
|
||||
controls={false}
|
||||
onTimeUpdate={(e) => {
|
||||
const video = e.target as HTMLVideoElement;
|
||||
if (video.currentTime > 0) {
|
||||
video.controls = props.controls ?? true;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<p>{t('video_preview_not_supported')}</p>
|
||||
</video>
|
||||
|
|
|
@ -194,6 +194,7 @@ export const FileThumb = forwardRef<HTMLImageElement, ThumbProps>((props, ref) =
|
|||
|
||||
return (
|
||||
<div
|
||||
key={thumbType.variant}
|
||||
style={{
|
||||
...(props.size
|
||||
? { maxWidth: props.size, width: props.size, height: props.size }
|
||||
|
|
|
@ -91,7 +91,7 @@ const Image = memo(({ item, active }: { item: ExplorerItem; active: boolean }) =
|
|||
);
|
||||
|
||||
return (
|
||||
<Tooltip label={fullName} position="top">
|
||||
<Tooltip tooltipClassName="!break-all" label={fullName} position="top">
|
||||
<div
|
||||
onClick={() => explorer.resetSelectedItems([item])}
|
||||
className={clsx(
|
||||
|
|
Loading…
Reference in a new issue