T286725: Use screen-sized images (#372)

medied · web-flow · commit 84d819240d0e · 2021-07-22T12:58:22.000-04:00
* Load screen-sized images

* Update special case test

* Only one api call in Gallery
diff --git a/cypress/integration/special-cases.js b/cypress/integration/special-cases.js
@@ -26,7 +26,7 @@ describe('special cases tests', () => {
     articlePage.title().should('have.text', 'Użytkownicy[24]')
     cy.rightArrow()
     cy.enter()
-    cy.get('.gallery-view>.img>img').should('be.visible').should('have.attr', 'src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Tupolev_Tu-154B%2C_Tarom_AN0679876.jpg/640px-Tupolev_Tu-154B%2C_Tarom_AN0679876.jpg')
+    cy.get('.gallery-view>.img>img').should('be.visible').should('have.attr', 'src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Tupolev_Tu-154B%2C_Tarom_AN0679876.jpg/240px-Tupolev_Tu-154B%2C_Tarom_AN0679876.jpg')
   })
 
   it('check goto quickfacts holly', () => {
diff --git a/src/api/getArticleMediaInfo.js b/src/api/getArticleMediaInfo.js
@@ -1,4 +1,4 @@
-import { cachedFetch, buildMwApiUrl, buildCommonsApiUrl } from 'utils'
+import { cachedFetch, buildMwApiUrl, buildCommonsApiUrl, viewport } from 'utils'
 
 export const getArticleMediaInfo = (lang, title, fromCommon) => {
   const params = {
@@ -7,6 +7,8 @@ export const getArticleMediaInfo = (lang, title, fromCommon) => {
     iiextmetadatafilter: 'License|LicenseShortName|ImageDescription|Artist',
     iiextmetadatalanguage: lang,
     iiextmetadatamultilang: 1,
+    iiurlwidth: viewport().width,
+    iiurlheight: viewport().height,
     iiprop: 'url|extmetadata',
     titles: title
   }
@@ -31,7 +33,8 @@ export const getArticleMediaInfo = (lang, title, fromCommon) => {
       author,
       description,
       license: LicenseShortName && LicenseShortName.value,
-      filePage: convertUrlToMobile(imageInfo[0].descriptionshorturl)
+      filePage: convertUrlToMobile(imageInfo[0].descriptionshorturl),
+      source: imageInfo[0].thumburl
     }
   })
 }
diff --git a/src/api/getArticleMediaList.js b/src/api/getArticleMediaList.js
@@ -7,7 +7,6 @@ export const getArticleMediaList = (lang, title) => {
       const source = item && item.srcset && `https:${item.srcset[0].src}`
       const media = {
         caption: item.caption && item.caption.text.trim(),
-        thumbnail: source,
         title: item.title,
         canonicalizedTitle:
           item.title && canonicalizeTitle(item.title.split(':')[1]),
diff --git a/src/components/Gallery.js b/src/components/Gallery.js
@@ -4,10 +4,9 @@ import { useI18n, useSoftkey, usePopup, useRange, useArticleMediaInfo } from 'ho
 
 const MAX_DESCRIPTION_HEIGHT = 45
 
-const AboutContainer = ({ lang, dir, title, caption, fromCommon, close }) => {
+const AboutContainer = ({ mediaInfo, dir, title, caption, close }) => {
   const i18n = useI18n()
   const containerRef = useRef()
-  const mediaInfo = useArticleMediaInfo(lang, title, fromCommon)
 
   useSoftkey('About', {
     left: i18n('softkey-close'),
@@ -88,6 +87,7 @@ export const Gallery = ({ close, closeAll, items, startFileName, lang, dir }) =>
     currentIndex, onPrevImage, onNextImage
   ] = useRange(getInitialIndex(items, startFileName), items.length - 1)
   const [showAboutPopup] = usePopup(AboutContainer, { stack: true })
+  const mediaInfo = useArticleMediaInfo(lang, items[currentIndex].title, items[currentIndex].fromCommon, currentIndex)
 
   const onImageLoad = ({ target: img }) => {
     const galleryNode = containerRef.current
@@ -105,7 +105,7 @@ export const Gallery = ({ close, closeAll, items, startFileName, lang, dir }) =>
     left: i18n('softkey-close'),
     onKeyLeft: closeAll,
     center: i18n('softkey-about'),
-    onKeyCenter: () => showAboutPopup({ ...items[currentIndex], lang, dir }),
+    onKeyCenter: () => showAboutPopup({ ...items[currentIndex], mediaInfo, dir }),
     [dir === 'rtl' ? 'onKeyFixedArrowLeft' : 'onKeyFixedArrowRight']: onNextImage,
     [dir === 'rtl' ? 'onKeyFixedArrowRight' : 'onKeyFixedArrowLeft']: onPrevImage,
     onKeyBackspace: close
@@ -124,7 +124,7 @@ export const Gallery = ({ close, closeAll, items, startFileName, lang, dir }) =>
         )
       }
       <div class='img'>
-        <img onLoad={onImageLoad} src={items[currentIndex].thumbnail} />
+        <img onLoad={onImageLoad} src={mediaInfo && mediaInfo.source} />
       </div>
     </div>
   )
diff --git a/src/hooks/useArticleMediaInfo.js b/src/hooks/useArticleMediaInfo.js
@@ -1,14 +1,14 @@
 import { useState, useEffect } from 'preact/hooks'
 import { getArticleMediaInfo } from 'api'
 
-export const useArticleMediaInfo = (lang, title, fromCommon) => {
+export const useArticleMediaInfo = (lang, title, fromCommon, currentIndex) => {
   const [media, setMedia] = useState()
 
   useEffect(() => {
     const [promise, abort] = getArticleMediaInfo(lang, title, fromCommon)
     promise.then(setMedia)
     return abort
-  }, [])
+  }, [currentIndex])
 
   return media
 }
