Multiple fixes to card images

- Fixes #530, normal cards were not displayed. The filtering was based on the card's .bottom value, which is a relative coordinate, but should have been based on the .y value
- Fixes #529, next result works, probably due to a an exception that kept the popup result from being saved
- Fixes #528, fix animated images, fixes a regression from #507 where updating the card image was broken
- Fixes #514, showing sidebar car. This was mostly working, but a small logic bug only showed the sidebar card if there was also a main card

extension/intents/search/queryScript.js

@@ -18,7 +18,7 @@ this.queryScript = (function() {
     let selected = container.querySelectorAll(CARD_SELECTOR);
     if (maxBottom) {
       selected = Array.from(selected).filter(
-        e => e.getBoundingClientRect().bottom <= maxBottom
+        e => e.getBoundingClientRect().y <= maxBottom
       );
     }
     if (selected.length) {

extension/intents/search/search.js

@@ -145,7 +145,7 @@ this.intents.search = (function() {
       popupSearchInfo = null;
       await performSearch(context.slots.query);
       const searchInfo = await callScript({ type: "searchResultInfo" });
-      if (searchInfo.hasCard) {
+      if (searchInfo.hasCard || searchInfo.hasSidebarCard) {
         const card = await callScript({ type: "cardImage" });
         context.keepPopup();
         searchInfo.index = -1;

extension/popup/popupController.jsx

@@ -13,6 +13,7 @@ function PopupController() {
   const [errorMessage, setErrorMessage] = useState(null);
   const [displayAutoplay, setDisplayAutoplay] = useState(false);
   const [searchResult, setSearchResult] = useState(null);
+  const [cardImage, setCardImage] = useState(null);
   const [recorderVolume, setRecorderVolume] = useState(null);
 
   let recorder;
@@ -176,21 +177,25 @@ function PopupController() {
     );
   };
 
-  const showSearchResults = newSearch => {
+  const showSearchResults = message => {
     setCurrentView("searchResults");
+    const newSearch = {};
+    for (const prop in message) {
+      if (prop !== "type" && prop !== "card") {
+        newSearch[prop] = message[prop];
+      }
+    }
     setSearchResult(newSearch);
 
-    if (newSearch.card) {
-      setMinPopupSize(card.width, card.height);
+    if (message.card) {
+      setCardImage(message.card);
+      setMinPopupSize(message.card.width, message.card.height);
     }
   };
 
   const showSearchCard = newCard => {
+    setCardImage(newCard);
     if (newCard) {
-      const newSearch = { ...search };
-      newSearch.card = newCard;
-
-      setSearchResult(newSearch);
       setMinPopupSize(newCard.width, newCard.height);
     }
   };
@@ -341,6 +346,7 @@ function PopupController() {
       errorMessage={errorMessage}
       displayAutoplay={displayAutoplay}
       searchResult={searchResult}
+      cardImage={cardImage}
       recorderVolume={recorderVolume}
       showSettings={showSettings}
       submitTextInput={submitTextInput}

extension/popup/popupView.jsx

@@ -10,6 +10,7 @@ const Popup = ({
   errorMessage,
   displayAutoplay,
   searchResult,
+  cardImage,
   recorderVolume,
   showSettings,
   submitTextInput,
@@ -28,6 +29,7 @@ const Popup = ({
         errorMessage={errorMessage}
         displayAutoplay={displayAutoplay}
         searchResult={searchResult}
+        cardImage={cardImage}
         recorderVolume={recorderVolume}
         submitTextInput={submitTextInput}
         onClickLexicon={onClickLexicon}
@@ -111,6 +113,7 @@ const PopupContent = ({
   errorMessage,
   displayAutoplay,
   searchResult,
+  cardImage,
   recorderVolume,
   submitTextInput,
   onClickLexicon,
@@ -157,6 +160,7 @@ const PopupContent = ({
         return (
           <SearchResultsContent
             search={searchResult}
+            cardImage={cardImage}
             displayText={displayText}
             onSearchImageClick={onSearchImageClick}
             setMinPopupSize={setMinPopupSize}
@@ -350,13 +354,15 @@ const ErrorContent = ({ displayText, errorMessage, displayAutoplay }) => {
 
 const SearchResultsContent = ({
   search,
+  cardImage,
   displayText,
   onSearchImageClick,
   setMinPopupSize,
 }) => {
   if (!search) return null;
 
-  const { card, searchResults, index, searchUrl } = search;
+  const { searchResults, index, searchUrl } = search;
+  const card = cardImage;
   const next = searchResults[index + 1];
   const cardStyles = card ? { height: card.height, width: card.width } : {};
   const imgAlt = next ? next.title : "";