refactor: add .npmrc.pages

.npmrc.pages

@@ -0,0 +1,2 @@
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+@exile-watch:registry=https://npm.pkg.github.com/

components/HomepageCard/HomepageCard.tsx

@@ -5,14 +5,16 @@ import React, {useState, useCallback, useEffect} from "react";
 import {debounce} from 'lodash'
 import HomepageThumbnail from "./HomepageThumbnail/HomepageThumbnail";
 import HomepageVideoCard from "./HomepageVideoCard/HomepageVideoCard";
+import {useRouter} from "next/router";
 interface HomepageCardProps {
 
 }
 
 const HomepageCard = ({name, gif, path, thumbnail = '', isCategory = true}) => {
   const [isHovering, setIsHovering]=useState(false);
   const DELAY = 1000;
-
+  const {pathname} = useRouter()
+  const preferThumbnailOverVideoOnPaths = pathname === '/' || pathname === '/encounters'
   // Without debouncing the mouseover, we can start requests immediately
   // In an "edge" case where a "curious" user decides to furiously...
   // ...mouseover and mouseleave over 20+ video elements (homepage)...
@@ -36,7 +38,7 @@ const HomepageCard = ({name, gif, path, thumbnail = '', isCategory = true}) => {
     <Card className={styles.card} padding={0} shadow="md" component={Link} href={path ?? "#"} onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>
       <Card.Section>
         {thumbnail && !isHovering && <HomepageThumbnail thumbnail={thumbnail} isCategory={isCategory}/>}
-        {gif && isHovering && <HomepageVideoCard gif={gif} isHovering={isHovering} isCategory={isCategory}/>}
+        {gif && (isHovering || !preferThumbnailOverVideoOnPaths) && <HomepageVideoCard gif={gif} isHovering={isHovering} isCategory={isCategory}/>}
         {/*{gif && <HomepageVideoCard gif={gif} isHovering={isHovering} isCategory={isCategory}/>}*/}
       </Card.Section>
       <Card.Section mt="md">