Apply view transition to medium cover if found

Author: opatry

content/index.html.erb

@@ -4,7 +4,6 @@ uuid: d45018b8-4b50-4d56-a403-aee411ab5931
 ---
 
 <%
-# TODO Ideally the view-transition should be applied to these cover as well, not the case for now
 books = recent_books
 unless books.empty?
 %>

content/static/view-transition.js

@@ -30,7 +30,11 @@ window.addEventListener('pageswap', async (e) => {
       const isbn = targetBookMatch.pathname.groups.isbn
       setTemporaryViewTransitionNames([
         [document.querySelector('.profile-picture'), 'avatar'],
-        [document.querySelector(`img[src='/cover/${isbn}-mini.jpg']`), 'cover'],
+        [
+          // favor medium if any, fallback to mini otherwise
+          document.querySelector(`img[src='/cover/${isbn}-medium.jpg']`) || document.querySelector(`img[src='/cover/${isbn}-mini.jpg']`),
+          'cover'
+        ],
       ], e.viewTransition.finished);
     }
   }
@@ -48,7 +52,10 @@ window.addEventListener('pagereveal', async (e) => {
       const isbn = fromBookMatch.pathname.groups.isbn
       setTemporaryViewTransitionNames([
         [document.querySelector('.profile-picture'), 'avatar'],
-        [document.querySelector(`img[src='/cover/${isbn}-mini.jpg']`), 'cover'],
+        [
+          document.querySelector(`img[src='/cover/${isbn}-medium.jpg']`) || document.querySelector(`img[src='/cover/${isbn}-mini.jpg']`), 
+          'cover'
+        ],
       ], e.viewTransition.ready);
     }