OPDS: show author and price in feed

johnfactotum · Dec 9, 2023 · b4d6012 · b4d6012
1 parent 043c103
commit b4d6012
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 10 deletions.
diff --git a/src/library.js b/src/library.js
@@ -31,6 +31,7 @@ const uiText = {
         'http://opds-spec.org/acquisition/borrow': _('Borrow'),
         'http://opds-spec.org/acquisition/subscribe': _('Subscribe'),
     },
+    openAccess: _('Free'),
     pagination: [
         _('First'),
         _('Previous'),
@@ -452,7 +453,7 @@ GObject.registerClass({
         const initFuncs = [
             webView.provide('formatMime', format.mime),
             webView.provide('formatPrice',
-                ({ currency, value }) => format.price(currency, value)),
+                price => price ? format.price(price.currency, price.value) : ''),
             webView.provide('formatLanguage', format.language),
             webView.provide('formatDate', format.date),
             webView.provide('formatList', format.list),

diff --git a/src/opds/opds.html b/src/opds/opds.html
@@ -428,6 +428,8 @@ <h1><a></a></h1>
         display: grid;
         grid-row: auto / span 2;
         grid-template-rows: subgrid;
+        margin-bottom: 18px;
+        font-size: .9em;
     }
     img {
         width: 100%;
@@ -436,10 +438,29 @@ <h1><a></a></h1>
         border: 1px solid color-mix(in hsl, currentColor, transparent 85%);
         align-self: end;
     }
+    div {
+        display: flex;
+        flex-direction: column;
+        gap: .3em;
+        margin-top: 12px;
+        min-width: 0;
+    }
+    div > * {
+        margin: 0;
+    }
     h1 {
+        font-size: 1em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+    }
+    #author {
         font-size: smaller;
-        margin-top: 12px;
-        margin-bottom: 18px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
     a {
         color: inherit;
@@ -452,8 +473,12 @@ <h1><a></a></h1>
         inset: 0;
     }
     </style>
-    <img loading="lazy">
-    <h1><a></a></h1>
+    <img loading="lazy" aria-labelledby="title">
+    <div>
+        <h1 id="title"><a></a></h1>
+        <p id="author"></p>
+        <p id="price"></p>
+    </div>
 </template>
 <template id="opds-pub-full">
     <style>

diff --git a/src/opds/opds.js b/src/opds/opds.js
@@ -134,7 +134,7 @@ customElements.define('opds-nav', class extends HTMLElement {
 })
 
 customElements.define('opds-pub', class extends HTMLElement {
-    static observedAttributes = ['heading', 'image', 'href']
+    static observedAttributes = ['heading', 'author', 'price', 'image', 'href']
     #root = this.attachShadow({ mode: 'closed' })
     constructor() {
         super()
@@ -147,6 +147,12 @@ customElements.define('opds-pub', class extends HTMLElement {
             case 'heading':
                 this.#root.querySelector('h1 a').textContent = val
                 break
+            case 'author':
+                this.#root.querySelector('#author').textContent = val
+                break
+            case 'price':
+                this.#root.querySelector('#price').textContent = val
+                break
             case 'image':
                 this.#root.querySelector('img').src = val
                 break
@@ -372,10 +378,16 @@ const renderContributor = async (contributor, baseURL) => {
     return as.length <= 1 ? as : await formatElementList(as)
 }
 
+const renderContributorText = async contributor => {
+    const arr = await Promise.all([contributor ?? []].flat().map(async contributor =>
+        typeof contributor === 'string' ? contributor
+        : await renderLanguageMap(contributor.name)))
+    return globalThis.formatList(arr)
+}
+
 const renderAcquisitionButton = async (rel, links, callback) => {
     const label = globalThis.uiText.acq[rel] ?? globalThis.uiText.acq[REL.ACQ]
-    const priceData = links[0].properties?.price
-    const price = priceData ? await globalThis.formatPrice(priceData) : null
+    const price = await globalThis.formatPrice(links[0].properties?.price)
 
     const button = document.createElement('button')
     button.classList.add('raised', 'pill')
@@ -397,8 +409,7 @@ const renderAcquisitionButton = async (rel, links, callback) => {
 
         for (const link of links) {
             const type = parseMediaType(link.type)?.mediaType
-            const priceData = links[0].properties?.price
-            const price = priceData ? await globalThis.formatPrice(priceData) : null
+            const price = await globalThis.formatPrice(links[0].properties?.price)
 
             const menuitem = document.createElement('button')
             menuitem.role = 'menuitem'
@@ -468,6 +479,11 @@ const renderGroups = async (groups, baseURL) => (await Promise.all(groups.map(as
         const el = document.createElement(isPub ? 'opds-pub' : 'opds-nav')
         if (isPub) {
             el.setAttribute('heading', await renderLanguageMap(item.metadata.title))
+            el.setAttribute('author', await renderContributorText(item.metadata.author))
+            el.setAttribute('price', (await globalThis.formatPrice(
+                item.links?.find(link => link.properties?.price)?.properties?.price))
+                || (item.links.some(link => [link.rel].flat().some(rel => rel === REL.ACQ + '/open-access'))
+                    ? globalThis.uiText.openAccess : ''))
             const src = resolveURL(item.images?.[0]?.href, baseURL)
             if (src) el.setAttribute('image', src)
             el.setAttribute('href', '#' + encodeURIComponent(JSON.stringify(item)))