Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-07 05:33:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1536] Quick preview fixes: Tooltip, video switching, and media controls flash (#1934)

Browse source 
* Fix controls flashing when switching videos, tooltip, and video switching in quickpreview

* remove state

* props
This commit is contained in:
ameer2468 2024-01-12 16:58:33 +03:00 committed by GitHub
parent 9c44dd44e2
commit eb225883e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
interface/app/$libraryId/Explorer/FilePath/Original.tsx
View file

@ -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>

1
interface/app/$libraryId/Explorer/FilePath/Thumb.tsx
View file

@ -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 }

2
interface/app/$libraryId/Explorer/QuickPreview/ImageSlider.tsx
View file

@ -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(