fix(style): add thumbnail for video preview (RSSNext#632)

* style: fix the FloatMutedButton mispositioning * feat: add thumbnail Signed-off-by: Innei <i@innei.in> --------- Signed-off-by: Innei <i@innei.in> Co-authored-by: Innei <i@innei.in>
akapril · Sep 25, 2024 · afecb71 · afecb71
1 parent ae05f1d
commit afecb71
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/apps/renderer/src/components/ui/media.tsx b/apps/renderer/src/components/ui/media.tsx
@@ -17,6 +17,7 @@ const failedList = new Set<string | undefined>()
 type BaseProps = {
   mediaContainerClassName?: string
   showFallback?: boolean
+  thumbnail?: boolean
 }
 export type MediaProps = BaseProps &
   (
@@ -45,6 +46,7 @@ const MediaImpl: FC<MediaProps> = ({
   proxy,
   popper = false,
   mediaContainerClassName,
+  thumbnail,
   ...props
 }) => {
   const { src, style, type, previewImageUrl, showFallback, ...rest } = props
@@ -133,7 +135,7 @@ const MediaImpl: FC<MediaProps> = ({
             )}
             onClick={handleClick}
           >
-            <VideoPreview src={src!} previewImageUrl={previewImageUrl} />
+            <VideoPreview src={src!} previewImageUrl={previewImageUrl} thumbnail={thumbnail} />
           </span>
         )
       }
@@ -222,14 +224,16 @@ const FallbackMedia: FC<MediaProps> = ({ type, mediaContainerClassName, classNam
 const VideoPreview: FC<{
   src: string
   previewImageUrl?: string
-}> = ({ src, previewImageUrl }) => {
+  thumbnail?: boolean
+}> = ({ src, previewImageUrl, thumbnail = false }) => {
   const [isInitVideoPlayer, setIsInitVideoPlayer] = useState(!previewImageUrl)
 
   const [videoRef, setVideoRef] = useState<VideoPlayerRef | null>(null)
   const isPaused = videoRef ? videoRef?.getState().paused : true
   const [forceUpdate] = useForceUpdate()
   return (
     <div
+      className="size-full"
       onMouseEnter={() => {
         videoRef?.controls.play()?.then(forceUpdate)
       }}
@@ -248,7 +252,7 @@ const VideoPreview: FC<{
         />
       ) : (
         <VideoPlayer
-          variant="preview"
+          variant={thumbnail ? "thumbnail" : "preview"}
           controls={false}
           src={src}
           ref={setVideoRef}

diff --git a/apps/renderer/src/components/ui/media/VideoPlayer.tsx b/apps/renderer/src/components/ui/media/VideoPlayer.tsx
@@ -34,7 +34,7 @@ import { VolumeSlider } from "./VolumeSlider"
 type VideoPlayerProps = {
   src: string
 
-  variant?: "preview" | "player"
+  variant?: "preview" | "player" | "thumbnail"
 } & React.VideoHTMLAttributes<HTMLVideoElement> &
   PropsWithChildren
 export type VideoPlayerRef = {
@@ -58,7 +58,7 @@ interface VideoPlayerContextValue {
   controls: VideoPlayerRef["controls"]
   wrapperRef: React.RefObject<HTMLDivElement>
   src: string
-  variant: "preview" | "player"
+  variant: "preview" | "player" | "thumbnail"
 }
 const VideoPlayerContext = createContext<VideoPlayerContextValue>(null!)
 export const VideoPlayer = forwardRef<VideoPlayerRef, VideoPlayerProps>(

diff --git a/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx b/apps/renderer/src/modules/entry-column/templates/list-item-template.tsx
@@ -182,6 +182,7 @@ export function ListItem({
 
       {withDetails && entry.entries.media?.[0] && (
         <Media
+          thumbnail
           src={entry.entries.media[0].url}
           type={entry.entries.media[0].type}
           previewImageUrl={entry.entries.media[0].preview_image_url}