From f684923a8adf0baa15165258a7d3d7260a2843e5 Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Mon, 27 Apr 2020 02:37:30 +0200
Subject: [PATCH] Actor tiles maintain aspect ratio.

---
 assets/components/actors/actors.vue    |  4 ++--
 assets/components/releases/release.vue |  9 +++++++--
 assets/components/tile/actor.vue       | 27 +++++++++++++++++++++++---
 src/media.js                           | 23 ++++++++++++----------
 4 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/assets/components/actors/actors.vue b/assets/components/actors/actors.vue
index cb48bc46..b59e393f 100644
--- a/assets/components/actors/actors.vue
+++ b/assets/components/actors/actors.vue
@@ -136,7 +136,7 @@ export default {
 
 .tiles {
     display: grid;
-    grid-template-columns: repeat(auto-fit, 10rem);
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     grid-gap: 0 .5rem;
     padding: 1rem;
     flex-grow: 1;
@@ -209,7 +209,7 @@ export default {
 
 @media(max-width: $breakpoint) {
     .tiles {
-        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     }
 
     .genders {
diff --git a/assets/components/releases/release.vue b/assets/components/releases/release.vue
index e33ff5be..754fd902 100644
--- a/assets/components/releases/release.vue
+++ b/assets/components/releases/release.vue
@@ -400,13 +400,14 @@ export default {
 }
 
 .actors {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-gap: 1rem;
     flex-grow: 1;
     flex-wrap: wrap;
 }
 
 .actor {
-    width: 10rem;
     margin: 0 1rem .5rem 0;
 }
 
@@ -477,5 +478,9 @@ export default {
         width: 15rem;
         max-width: 100%;
     }
+
+    .actors {
+        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    }
 }
 </style>
diff --git a/assets/components/tile/actor.vue b/assets/components/tile/actor.vue
index 386a8f43..0bdd0f65 100644
--- a/assets/components/tile/actor.vue
+++ b/assets/components/tile/actor.vue
@@ -22,8 +22,10 @@
             <span
                 v-else
                 v-tooltip.top="actor.name"
-                class="handle name"
-            >{{ actor.name }}</span>
+                class="handle"
+            >
+                <span class="name">{{ actor.name }}</span>
+            </span>
 
             <div class="avatar-container">
                 <img
@@ -103,12 +105,28 @@ export default {
 .actor {
     width: 100%;
     display: inline-block;
+    position: relative;
     margin: 0 .5rem .5rem 0;
     box-shadow: 0 0 3px var(--darken-weak);
     background: var(--profile);
+
+    &::before {
+        content: '';
+        display: inline-block;
+        width: 1px;
+        height: 0;
+        padding-bottom: 150%;
+    }
 }
 
 .link {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
     color: var(--text-light);
     text-decoration: none;
 
@@ -144,15 +162,18 @@ export default {
 }
 
 .avatar-container {
+    display: flex;
+    flex-grow: 1;
     position: relative;
 }
 
 .avatar {
     color: var(--darken-weak);
     background: var(--darken-hint);
-    height: 13rem;
     width: 100%;
+    height: 100%;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     object-fit: cover;
diff --git a/src/media.js b/src/media.js
index 5588fd34..410ceb45 100644
--- a/src/media.js
+++ b/src/media.js
@@ -334,7 +334,7 @@ async function fetchSource(source, baseMedia) {
             }
 
             const { pathname } = new URL(source.src);
-            const mimetype = mime.getType(pathname);
+            const mimetype = res.headers['content-type'] || mime.getType(pathname);
             const extension = mime.getExtension(mimetype);
             const type = mimetype?.split('/')[0] || 'image';
 
@@ -342,7 +342,9 @@ async function fetchSource(source, baseMedia) {
             hasher.setEncoding('hex');
 
             const hashStream = new PassThrough();
-            const metaStream = type === 'image' ? sharp() : new PassThrough();
+            const metaStream = type === 'image'
+                ? sharp()
+                : new PassThrough();
 
             const tempFilePath = path.join(config.media.path, 'temp', `${baseMedia.id}.${extension}`);
             const tempThumbPath = path.join(config.media.path, 'temp', `${baseMedia.id}_thumb.${extension}`);
@@ -353,6 +355,8 @@ async function fetchSource(source, baseMedia) {
             hashStream.on('data', chunk => hasher.write(chunk));
 
             if (type === 'image') {
+                // generate thumbnail
+                /*
                 metaStream
                     .clone()
                     .resize({
@@ -362,16 +366,16 @@ async function fetchSource(source, baseMedia) {
                     .jpeg({ quality: config.media.thumbnailQuality })
                     .pipe(tempThumbTarget)
                     .on('error', error => logger.error(error));
+                */
             }
 
-            // pipeline destroys streams
-            // const infoPromise = type === 'image' ? once(metaStream, 'info') : Promise.resolve([{}]);
-            const infoPromise = once(metaStream, 'info');
+            // pipeline destroys streams, so attach info event first
+            const infoPromise = type === 'image' ? once(metaStream, 'info') : Promise.resolve([{}]);
             const metaPromise = type === 'image' ? metaStream.stats() : Promise.resolve();
 
             await pipeline(
                 res.originalRes,
-                metaStream,
+                // metaStream,
                 hashStream,
                 tempFileTarget,
             );
@@ -385,7 +389,7 @@ async function fetchSource(source, baseMedia) {
 
             peakMemoryUsage = Math.max(getMemoryUsage(), peakMemoryUsage);
 
-            logger.silly(`Fetched media from ${source.src}`);
+            logger.silly(`Fetched media from ${source.src}, memory usage ${peakMemoryUsage.toFixed(2)} MB`);
 
             return {
                 ...source,
@@ -431,14 +435,14 @@ async function trySource(baseSource, existingMedias, baseMedia) {
     const extractedSource = await extractSource(baseSource, existingMedias);
     const existingSourceMedia = existingMedias.existingSourceMediaByUrl[extractedSource.src];
 
-    if (extractedSource.entry) {
+    if (!argv.force && extractedSource.entry) {
         logger.silly(`Media page URL already in database, not extracting ${baseSource.url}`);
 
         // media entry found during extraction, don't fetch
         return extractedSource;
     }
 
-    if (existingSourceMedia) {
+    if (!argv.force && existingSourceMedia) {
         logger.silly(`Media source URL already in database, skipping ${baseSource.src}`);
 
         // media entry found by source URL, don't fetch
@@ -529,7 +533,6 @@ async function storeMedias(baseMedias) {
     const savedMedias = await Promise.map(
         baseMedias,
         async baseMedia => fetchMedia(baseMedia, { existingSourceMediaByUrl, existingExtractMediaByUrl }),
-        { concurrency: 10 },
     );
 
     const [uniqueHashMedias, existingHashMedias] = await findHashDuplicates(savedMedias);