Enhance article photo handling and API documentation.

- Updated API documentation to reflect changes in article data structure.
- Improved ArticlePhoto component to support dynamic sizing and object fit options.
- Added performance logging for image upload in ArticlePhotosDialog and ArticlePhotoTile components.
- Enhanced ArticleTile to conditionally render photos and adjusted styling for better layout.
- Optimized image preparation process with configurable AVIF encoding speed.

src/components/article/ArticlePhoto.jsx

@@ -26,7 +26,13 @@ class ArticlePhoto extends Component {
   }
 
   render() {
-    const { photo, size = 200 } = this.props;
+    const {
+      photo,
+      size = 200,
+      fill = false,
+      objectFit = fill ? 'cover' : 'contain',
+      sx,
+    } = this.props;
     const { thumbLoaded } = this.state;
     const fullHash = photo?.fullHash;
     const hasPreview = photo?.thumbHash != null;
@@ -39,28 +45,32 @@ class ArticlePhoto extends Component {
       <Box
         sx={{
           position: 'relative',
-          width: size,
-          height: size,
-          maxWidth: '100%',
+          ...(fill
+            ? { width: '100%', height: '100%' }
+            : { width: size, height: size, maxWidth: '100%', flexShrink: 0 }),
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          borderRadius: 2,
+          borderRadius: fill ? 0 : 2,
           overflow: 'hidden',
           bgcolor: 'rgba(0, 0, 0, 0.35)',
-          flexShrink: 0,
+          ...sx,
         }}
       >
         {hasPreview && !thumbLoaded ? (
           <Box
-            sx={{
-              position: 'absolute',
-              maxWidth: '100%',
-              maxHeight: '100%',
-              aspectRatio,
-              width: photo.thumbW >= photo.thumbH ? '100%' : 'auto',
-              height: photo.thumbH > photo.thumbW ? '100%' : 'auto',
-            }}
+            sx={
+              fill || objectFit === 'cover'
+                ? { position: 'absolute', inset: 0 }
+                : {
+                    position: 'absolute',
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    aspectRatio,
+                    width: photo.thumbW >= photo.thumbH ? '100%' : 'auto',
+                    height: photo.thumbH > photo.thumbW ? '100%' : 'auto',
+                  }
+            }
           >
             <ThumbHashImage thumbHash={photo.thumbHash} />
           </Box>
@@ -72,15 +82,25 @@ class ArticlePhoto extends Component {
             alt=""
             onLoad={this.handleThumbLoad}
             onError={this.handleThumbError}
-            sx={{
-              display: 'block',
-              maxWidth: '100%',
-              maxHeight: '100%',
-              width: 'auto',
-              height: 'auto',
-              objectFit: 'contain',
-              opacity: thumbLoaded ? 1 : 0,
-            }}
+            sx={
+              fill || objectFit === 'cover'
+                ? {
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    opacity: thumbLoaded ? 1 : 0,
+                  }
+                : {
+                    display: 'block',
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    width: 'auto',
+                    height: 'auto',
+                    objectFit: 'contain',
+                    opacity: thumbLoaded ? 1 : 0,
+                  }
+            }
           />
         ) : null}
       </Box>