fix(ui): fix offline support with new image proxy

ncarlier · Nov 2, 2023 · 5b19941 · 5b19941
1 parent 5edc03b
commit 5b19941
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/ui/src/articles/components/ArticleImage.tsx b/ui/src/articles/components/ArticleImage.tsx
@@ -5,15 +5,16 @@ import { getAPIURL } from '../../helpers'
 
 const getThumbnailURL = (thumbnail: ArticleThumbnail, src: string) => `${getAPIURL()}/img/${thumbnail.hash}/resize:fit:${thumbnail.size}/${btoa(src)}`
 
-const getThumbnailAttributes = ({thumbnails, image}: Article) => {
+const getThumbnailAttributes = (article: Article) => {
   const attrs :ImgHTMLAttributes<HTMLImageElement> = {}
-  if (!thumbnails || thumbnails.length == 0) {
+  if (!article.thumbnails || article.thumbnails.length == 0) {
     return attrs
   }
-  thumbnails.sort((a, b) => parseInt(b.size) - parseInt(a.size))
+
+  const thumbnails = [...article.thumbnails].sort((a, b) => parseInt(b.size) - parseInt(a.size))
   const sizes = thumbnails.map(thumb => `${thumb.size}px`)
   attrs.sizes = `(max-width: ${sizes[0]}) ${sizes.join(', ')}`
-  attrs.srcSet = thumbnails.reverse().map(thumb => `${getThumbnailURL(thumb, image)} ${thumb.size}w`).join(',')
+  attrs.srcSet = thumbnails.reverse().map(thumb => `${getThumbnailURL(thumb, article.image)} ${thumb.size}w`).join(',')
   return attrs
 }
 

diff --git a/ui/src/articles/components/context-menu/OfflineLink.tsx b/ui/src/articles/components/context-menu/OfflineLink.tsx
@@ -6,6 +6,7 @@ import { connectOffline, OfflineProps } from '../../../containers/OfflineContain
 import { useMessage } from '../../../contexts'
 import { Article } from '../../models'
 import { useAPI } from '../../../hooks'
+import { fetchAPI } from '../../../helpers'
 
 interface Props {
   article: Article
@@ -23,7 +24,6 @@ const blobToDataURL = async (blob: Blob): Promise<string> => new Promise((resolv
 export const OfflineLink = (props: AllProps) => {
   const { article, keyboard = false, saveOfflineArticle, removeOfflineArticle, offlineArticles } = props
   const fetchArticleContent = useAPI(`/articles/${article.id}`, { method: 'GET' })
-  const fetchArticleImage = useAPI('/img', { method: 'GET' })
   const { showMessage, showErrorMessage } = useMessage()
   const [loading, setLoading] = useState(false)
 
@@ -36,9 +36,10 @@ export const OfflineLink = (props: AllProps) => {
       if (res) {
         if (res.ok && res.body) {
           offlineArticle.html = await res.text()
-          if (article.image) {
+          if (article.image && article.thumbnails) {
+            const thumbnail = [...article.thumbnails].sort((a, b) => parseInt(b.size) - parseInt(a.size))[0]
             // download article image
-            const img = await fetchArticleImage({ url: article.image, width: '720' })
+            const img = await fetchAPI(`/img/${thumbnail.hash}/resize:fit:${thumbnail.size}/${btoa(article.image)}`)
             if (img && img.ok && img.body) {
               const blob = await img.blob()
               offlineArticle.image = await blobToDataURL(blob)

diff --git a/ui/src/helpers/fetchAPI.ts b/ui/src/helpers/fetchAPI.ts
@@ -18,7 +18,7 @@ export const withCredentials = (user: User | null, init?: HeadersInit): HeadersI
   return init
 }
 
-export const fetchAPI = async (uri: string, params: any = {}, init: RequestInit) => {
+export const fetchAPI = async (uri: string, params: any = {}, init: RequestInit = {}) => {
   const url = new URL(getAPIURL(uri))
   if (params) {
     Object.keys(params).forEach((key) => url.searchParams.append(key, params[key]))