1 files changed, 73 insertions, 45 deletions
diff --git a/src/content/dependencies/generateAdditionalFilesListChunk.js b/src/content/dependencies/generateAdditionalFilesListChunk.js
index 5804115a..3cac851b 100644
--- a/src/content/dependencies/generateAdditionalFilesListChunk.js
+++ b/src/content/dependencies/generateAdditionalFilesListChunk.js
@@ -1,53 +1,81 @@
+import {stitchArrays} from '#sugar';
+
 export default {
-  extraDependencies: ['html', 'language'],
+  contentDependencies: ['linkAdditionalFile', 'transformContent'],
+  extraDependencies: ['getSizeOfMediaFile', 'html', 'language', 'urls'],
 
-  slots: {
-    title: {
-      type: 'html',
-      mutable: false,
-    },
+  relations: (relation, file) => ({
+    description:
+      relation('transformContent', file.description),
 
-    description: {
-      type: 'html',
-      mutable: false,
-    },
+    links:
+      file.filenames
+        .map(filename => relation('linkAdditionalFile', file, filename)),
+  }),
 
-    items: {
-      validate: v => v.looseArrayOf(v.isHTML),
+  data: (file) => ({
+    title:
+      file.title,
+
+    paths:
+      file.paths,
+  }),
+
+  slots: {
+    showFileSizes: {
+      type: 'boolean',
     },
   },
 
-  generate(slots, {html, language}) {
-    const summary =
-      html.tag('summary',
-        html.tag('span',
-          language.$('releaseInfo.additionalFiles.entry', {
-            title:
-              html.tag('span', {class: 'group-name'},
-                slots.title),
-          })));
-
-    const description =
-      html.tag('li', {class: 'entry-description'},
-        {[html.onlyIfContent]: true},
-        slots.description);
-
-    const items =
-      (html.isBlank(slots.items)
-        ? html.tag('li',
-            language.$('releaseInfo.additionalFiles.entry.noFilesAvailable'))
-        : slots.items);
-
-    const content =
-      html.tag('ul', [description, items]);
-
-    const details =
-      html.tag('details',
-        html.isBlank(slots.items) &&
-          {open: true},
-
-        [summary, content]);
-
-    return html.tag('li', details);
-  },
+  generate: (data, relations, slots, {getSizeOfMediaFile, html, language, urls}) =>
+    language.encapsulate('releaseInfo.additionalFiles', capsule =>
+      html.tag('li',
+        html.tag('details',
+          html.isBlank(relations.links) &&
+            {open: true},
+
+          [
+            html.tag('summary',
+              html.tag('span',
+                language.$(capsule, 'entry', {
+                  title:
+                    html.tag('b', data.title),
+                }))),
+
+            html.tag('ul', [
+              html.tag('li', {class: 'entry-description'},
+                {[html.onlyIfContent]: true},
+
+                relations.description.slot('mode', 'inline')),
+
+              (html.isBlank(relations.links)
+                ? html.tag('li',
+                    language.$(capsule, 'entry.noFilesAvailable'))
+
+                : stitchArrays({
+                    link: relations.links,
+                    path: data.paths,
+                  }).map(({link, path}) =>
+                      html.tag('li',
+                        language.encapsulate(capsule, 'file', workingCapsule => {
+                          const workingOptions = {file: link};
+
+                          if (slots.showFileSizes) {
+                            const fileSize =
+                              getSizeOfMediaFile(
+                                urls
+                                  .from('media.root')
+                                  .to(...path));
+
+                            if (fileSize) {
+                              workingCapsule += '.withSize';
+                              workingOptions.size =
+                                language.formatFileSize(fileSize);
+                            }
+                          }
+
+                          return language.$(workingCapsule, workingOptions);
+                        })))),
+            ]),
+          ]))),
 };