Gallery improvements and player alignment fix

- Fix player alignment on resize - Sort files by date decending - Remove random thumbnail size - Fallback icon and filename for unsupported formats - Snap gallery header
Lillifee · Dec 30, 2021 · 7fb48ae · 7fb48ae
1 parent 4ec6bbd
commit 7fb48ae
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "raspicam",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "main": "src/server/index.ts",
   "browser": "src/site/index.tsx",
   "author": "Patrick Matt",

diff --git a/src/server/watcher.ts b/src/server/watcher.ts
@@ -39,7 +39,7 @@ export const fileWatcher = (): FileWatcher => {
   const addFile = (fileName: string) => {
     const { name, base, ext } = path.parse(fileName);
     const type = fileTypes[ext.substring(1)];
-    const file: RaspiFile = { name, base, ext, type };
+    const file: RaspiFile = { name, base, ext, type, date: 0 };
 
     // Invalid type or thumbnail
     if (!type || isThumbnail(file)) return;

diff --git a/src/shared/settings/types.ts b/src/shared/settings/types.ts
@@ -39,8 +39,8 @@ export interface RaspiFile {
   name: string;
   base: string;
   ext: string;
+  date: number;
   thumb?: string;
-  date?: number;
 }
 
 export interface RaspiControlStatus {

diff --git a/src/site/components/gallery/Gallery.tsx b/src/site/components/gallery/Gallery.tsx
@@ -2,21 +2,22 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { RaspiGallery, RaspiFile, photosPath } from '../../../shared/settings/types';
 import { useFetch } from '../common/hooks/useFetch';
+import { Icon } from '../common/Icon';
 import { Toolbar } from './Toolbar';
 
 const GalleryContainer = styled.div`
   flex: 1;
   display: flex;
+  overflow-y: auto;
   flex-direction: column;
   color: ${(p) => p.theme.Foreground};
   background: ${(p) => p.theme.Background};
-  overflow-y: auto;
 `;
 
-const ImageContainer = styled.div`
+const GroupContainer = styled.div`
   display: grid;
-  margin: 0.2em;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  margin: 0.5em 0.2em;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   grid-auto-flow: dense;
   grid-gap: 0.2em;
   justify-items: stretch;
@@ -27,22 +28,37 @@ const ImageContainer = styled.div`
   }
 `;
 
-interface ThumbnailProps {
-  sizeCol: number;
-  sizeRow: number;
-}
-
 const Thumbnail = styled.img`
   max-width: 100%;
   height: auto;
   object-fit: cover;
   flex: 1;
 `;
 
-const PreviewLink = styled.a<ThumbnailProps>`
+const PreviewContainer = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 80px;
+  fill: ${(p) => p.theme.Foreground};
+  background: ${(p) => p.theme.LayerBackground};
+`;
+
+const FallbackIcon = styled.div`
+  margin: 0.2em;
+`;
+
+const FallbackText = styled.div`
+  margin: 0.2em;
+  color: ${({ theme }) => theme.Foreground};
+  font-size: ${({ theme }) => theme.FontSize.s};
+`;
+
+const PreviewLink = styled.a`
   display: flex;
-  grid-row-start: span ${(p) => p.sizeRow};
-  grid-column-start: span ${(p) => p.sizeCol};
+  text-decoration: none;
 `;
 
 const Group = styled.div`
@@ -54,7 +70,10 @@ const Group = styled.div`
 const Header = styled.div`
   font-size: ${(p) => p.theme.FontSize.l};
   font-weight: 300;
-  margin: 1em 0.5em;
+  position: sticky;
+  top: 0px;
+  margin: 0 1.5em;
+  padding: 0.45em;
 `;
 
 const dateTimeFormat = new Intl.DateTimeFormat('en-GB', {
@@ -64,12 +83,14 @@ const dateTimeFormat = new Intl.DateTimeFormat('en-GB', {
 export const Gallery: React.FC = () => {
   const [gallery] = useFetch<RaspiGallery>('/api/gallery', { files: [] });
 
-  const groupedFiles = gallery.data.files.reduce<Record<string, RaspiFile[]>>((result, file) => {
-    const date = dateTimeFormat.format(new Date(file.date || 0));
-    const images = (result[date] = result[date] || []);
-    images.push(file);
-    return result;
-  }, {});
+  const groupedFiles = gallery.data.files
+    .sort((a, b) => b.date - a.date)
+    .reduce<Record<string, RaspiFile[]>>((result, file) => {
+      const date = dateTimeFormat.format(new Date(file.date));
+      const images = (result[date] = result[date] || []);
+      images.push(file);
+      return result;
+    }, {});
 
   return (
     <GalleryContainer>
@@ -78,20 +99,29 @@ export const Gallery: React.FC = () => {
       {Object.entries(groupedFiles).map(([date, files]) => (
         <Group key={date}>
           <Header>{date}</Header>
-          <ImageContainer>
-            {files.map((file, index) => (
+          <GroupContainer>
+            {files.map((file) => (
               <PreviewLink
-                sizeCol={index % 8 === 0 ? 2 : 1}
-                sizeRow={index % 8 === 0 || index % 4 === 0 ? 2 : 1}
                 key={file.base}
                 target="_blank"
                 rel="noreferrer"
                 href={`${photosPath}/${file.base}`}
               >
-                <Thumbnail src={`${photosPath}/${file.thumb || ''}`} />
+                <PreviewContainer>
+                  {file.thumb ? (
+                    <Thumbnail src={`${photosPath}/${file.thumb || ''}`} />
+                  ) : (
+                    <React.Fragment>
+                      <FallbackIcon>
+                        <Icon type={file.type === 'VIDEO' ? 'Video' : 'Photo'} />
+                      </FallbackIcon>
+                      <FallbackText>{file.base}</FallbackText>
+                    </React.Fragment>
+                  )}
+                </PreviewContainer>
               </PreviewLink>
             ))}
-          </ImageContainer>
+          </GroupContainer>
         </Group>
       ))}
     </GalleryContainer>

diff --git a/src/site/components/main/Player.tsx b/src/site/components/main/Player.tsx
@@ -11,9 +11,7 @@ const Container = styled.div`
 `;
 
 const VideoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  margin: 0 auto;
 `;
 
 const Video = styled.video`

diff --git a/src/site/components/theme/themes.ts b/src/site/components/theme/themes.ts
@@ -8,7 +8,7 @@ export const darkTheme: DefaultTheme = {
   LayerBackground: 'rgba(20, 20, 20, 0.8)',
   SubLayerBackground: 'rgba(20, 20, 20, 0.6)',
 
-  Background: '#3d3d3d',
+  Background: '#242424',
   Border: '#1d1d1d',
 
   Foreground: '#e2e2e2',