Show tooltip with album info

rigon · Apr 10, 2024 · 92c298f · 92c298f
1 parent cf9f4a6
commit 92c298f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/server/video.go b/server/video.go
@@ -10,6 +10,7 @@ import (
 
 // Encoding videos in Raspberry PI 4:
 //   ffmpeg -i input.mp4 -c:v h264_v4l2m2m -pix_fmt yuv420p -vf "scale=1920:1080:force_original_aspect_ratio=decrease,fps=30" -b:v 25M output.mp4
+//   More info: https://www.willusher.io/general/2020/11/15/hw-accel-encoding-rpi4
 //
 // Video being download twice
 //   ffmpeg -i initial-file.mp4 -c copy -movflags +faststart corrected-file.mp4

diff --git a/src/AlbumTitle.tsx b/src/AlbumTitle.tsx
@@ -6,11 +6,12 @@ import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 
-import { useGetAlbumsQuery } from "./services/api";
+import { useGetAlbumsQuery, useGetAlbumQuery } from "./services/api";
 
 const AlbumTitle: FC = () => {
-    const { collection, album } = useParams();
-    const { data = [], isFetching } = useGetAlbumsQuery({ collection }, { skip: collection === undefined });
+    const { collection = "", album = "" } = useParams();
+    const { data = [], isFetching } = useGetAlbumsQuery({ collection }, { skip: collection === "" });
+    const { data: albumData } = useGetAlbumQuery({ collection, album }, { skip: collection === "" || album === "" });
 
     const index = data.findIndex(e => e.name === album);
     const hasBefore = !isFetching && index > 0;
@@ -21,22 +22,27 @@ const AlbumTitle: FC = () => {
     return (
         <>
             <Link to={`/${collection}/${before}`} onClick={(e) => hasBefore ? true : e.preventDefault()}>
-                <Tooltip title={before} enterDelay={300}>
+                <Tooltip arrow title={before} enterDelay={300}>
                     <IconButton disabled={!hasBefore} aria-label="before">
                         <NavigateBeforeIcon fontSize='small' />
                     </IconButton>
                 </Tooltip>
             </Link>
             <Link to={`/${collection}/${next}`} onClick={(e) => hasNext ? true : e.preventDefault()}>
-                <Tooltip title={next} enterDelay={300}>
+                <Tooltip arrow title={next} enterDelay={300}>
                     <IconButton disabled={!hasNext} aria-label="next">
                         <NavigateNextIcon fontSize='small' />
                     </IconButton>
                 </Tooltip>
             </Link>
-            <Typography variant="h6" noWrap component="div" sx={{ ml: 1 }}>
-                {album}
-            </Typography>
+            <Tooltip arrow enterDelay={300} title={<>
+                <b>Number of photos:</b> {albumData?.count}<br />
+                <b>Date:</b> {new Date(albumData?.title || "0").toLocaleString()}<br />
+            </>}>
+                <Typography variant="h6" noWrap component="div" sx={{ ml: 1 }}>
+                    {album}
+                </Typography>
+            </Tooltip>
         </>
     );
 }

diff --git a/src/types.ts b/src/types.ts
@@ -24,6 +24,7 @@ export interface AlbumType {
     subalbums: string[];
     pseudo: boolean;
     count: number;
+    title: string;
 }
 
 export interface PhotoType {