Pages now use the new ThumbnailPreview component

src/components/RecorderChip.tsx

@@ -21,9 +21,8 @@ export default function RecorderChip(props: Props): JSX.Element {
             {recorder.avatar?.data?.attributes && (
               <Img
                 className="w-20 rounded-full border-4 border-mid"
-                image={recorder.avatar?.data.attributes}
+                image={recorder.avatar.data.attributes}
                 quality={ImageQuality.Small}
-                rawImg
               />
             )}
             <div className="grid gap-2">

src/pages/archives/videos/c/[uid].tsx

@@ -7,7 +7,8 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
-import VideoPreview from "components/Videos/VideoPreview";
+import Switch from "components/Switch";
+import ThumbnailPreview from "components/ThumbnailPreview";
 import { GetVideoChannelQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
 import {
@@ -16,6 +17,8 @@ import {
   GetStaticPropsContext,
 } from "next";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
+import { getVideoThumbnailURL } from "queries/helpers";
+import { useState } from "react";
 
 interface Props extends AppStaticProps {
   channel: Exclude<
@@ -26,6 +29,8 @@ interface Props extends AppStaticProps {
 
 export default function Channel(props: Props): JSX.Element {
   const { langui, channel } = props;
+  const [keepInfoVisible, setKeepInfoVisible] = useState(true);
+
   const subPanel = (
     <SubPanel>
       <ReturnButton
@@ -41,6 +46,11 @@ export default function Channel(props: Props): JSX.Element {
         title="Videos"
         description={langui.archives_description}
       />
+
+      <div className="flex flex-row gap-2 place-items-center coarse:hidden">
+        <p className="flex-shrink-0">{"Always show info"}:</p>
+        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+      </div>
     </SubPanel>
   );
 
@@ -52,7 +62,28 @@ export default function Channel(props: Props): JSX.Element {
       </div>
       <div className="grid gap-8 items-start mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0">
         {channel?.videos?.data.map((video) => (
-          <>{video.attributes && <VideoPreview video={video.attributes} />}</>
+          <>
+            {video.attributes && (
+              <ThumbnailPreview
+                key={video.id}
+                href={`/archives/videos/v/${video.attributes.uid}`}
+                title={video.attributes.title}
+                thumbnail={getVideoThumbnailURL(video.attributes.uid)}
+                thumbnailAspectRatio="16/9"
+                keepInfoVisible={keepInfoVisible}
+                metadata={{
+                  release_date: video.attributes.published_date,
+                  views: video.attributes.views,
+                  author: channel.title,
+                  position: "Top",
+                }}
+                hoverlay={{
+                  __typename: "Video",
+                  duration: video.attributes.duration,
+                }}
+              />
+            )}
+          </>
         ))}
       </div>
     </ContentPanel>

src/pages/archives/videos/index.tsx

@@ -8,12 +8,13 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
-import VideoPreview from "components/Videos/VideoPreview";
+import Switch from "components/Switch";
+import ThumbnailPreview from "components/ThumbnailPreview";
 import { GetVideosPreviewQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
 import { GetStaticPropsContext } from "next";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { prettyDate } from "queries/helpers";
+import { getVideoThumbnailURL, prettyDate } from "queries/helpers";
 import { useState } from "react";
 
 interface Props extends AppStaticProps {
@@ -44,6 +45,7 @@ export default function Videos(props: Props): JSX.Element {
   }
 
   const [page, setPage] = useState(0);
+  const [keepInfoVisible, setKeepInfoVisible] = useState(true);
 
   const subPanel = (
     <SubPanel>
@@ -60,6 +62,11 @@ export default function Videos(props: Props): JSX.Element {
         title="Videos"
         description={langui.archives_description}
       />
+
+      <div className="flex flex-row gap-2 place-items-center coarse:hidden">
+        <p className="flex-shrink-0">{"Always show info"}:</p>
+        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+      </div>
     </SubPanel>
   );
 
@@ -76,7 +83,24 @@ export default function Videos(props: Props): JSX.Element {
         {paginatedVideos[page].map((video) => (
           <>
             {video.attributes && (
-              <VideoPreview key={video.id} video={video.attributes} />
+              <ThumbnailPreview
+                key={video.id}
+                href={`/archives/videos/v/${video.attributes.uid}`}
+                title={video.attributes.title}
+                thumbnail={getVideoThumbnailURL(video.attributes.uid)}
+                thumbnailAspectRatio="16/9"
+                keepInfoVisible={keepInfoVisible}
+                metadata={{
+                  release_date: video.attributes.published_date,
+                  views: video.attributes.views,
+                  author: video.attributes.channel?.data?.attributes?.title,
+                  position: "Top",
+                }}
+                hoverlay={{
+                  __typename: "Video",
+                  duration: video.attributes.duration,
+                }}
+              />
             )}
           </>
         ))}

src/pages/contents/[slug]/index.tsx

@@ -1,7 +1,7 @@
 import AppLayout from "components/AppLayout";
 import Button from "components/Button";
 import Chip from "components/Chip";
-import ThumbnailHeader from "components/Content/ThumbnailHeader";
+import ThumbnailHeader from "components/ThumbnailHeader";
 import HorizontalLine from "components/HorizontalLine";
 import LanguageSwitcher from "components/LanguageSwitcher";
 import Markdawn from "components/Markdown/Markdawn";

src/pages/contents/index.tsx

@@ -1,12 +1,13 @@
 import AppLayout from "components/AppLayout";
 import Chip from "components/Chip";
-import LibraryContentPreview from "components/Library/LibraryContentPreview";
 import PanelHeader from "components/PanelComponents/PanelHeader";
 import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
 import Select from "components/Select";
+import Switch from "components/Switch";
+import ThumbnailPreview from "components/ThumbnailPreview";
 import { GetContentsQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
 import { GetStaticPropsContext } from "next";
@@ -24,6 +25,7 @@ export default function Contents(props: Props): JSX.Element {
   const { langui, contents } = props;
 
   const [groupingMethod, setGroupingMethod] = useState<number>(-1);
+  const [keepInfoVisible, setKeepInfoVisible] = useState(false);
 
   const [groups, setGroups] = useState<GroupContentItems>(
     getGroups(langui, groupingMethod, contents)
@@ -51,6 +53,11 @@ export default function Contents(props: Props): JSX.Element {
           allowEmpty
         />
       </div>
+
+      <div className="flex flex-row gap-2 place-items-center coarse:hidden">
+        <p className="flex-shrink-0">{"Always show info"}:</p>
+        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+      </div>
     </SubPanel>
   );
   const contentPanel = (
@@ -79,9 +86,33 @@ export default function Contents(props: Props): JSX.Element {
                 {items.map((item) => (
                   <>
                     {item.attributes && (
-                      <LibraryContentPreview
+                      <ThumbnailPreview
                         key={item.id}
-                        item={item.attributes}
+                        href={`/contents/${item.attributes.slug}`}
+                        pre_title={item.attributes.titles?.[0]?.pre_title}
+                        title={
+                          item.attributes.titles?.[0]?.title ??
+                          prettySlug(item.attributes.slug)
+                        }
+                        subtitle={item.attributes.titles?.[0]?.subtitle}
+                        thumbnail={item.attributes.thumbnail?.data?.attributes}
+                        thumbnailAspectRatio="3/2"
+                        topChips={
+                          item.attributes.type?.data?.attributes
+                            ? [
+                                item.attributes.type.data.attributes.titles?.[0]
+                                  ? item.attributes.type.data.attributes
+                                      .titles[0]?.title
+                                  : prettySlug(
+                                      item.attributes.type.data.attributes.slug
+                                    ),
+                              ]
+                            : undefined
+                        }
+                        bottomChips={item.attributes.categories?.data.map(
+                          (category) => category.attributes?.short ?? ""
+                        )}
+                        keepInfoVisible={keepInfoVisible}
                       />
                     )}
                   </>

src/pages/library/[slug]/index.tsx

@@ -3,8 +3,7 @@ import Button from "components/Button";
 import Chip from "components/Chip";
 import Img, { getAssetURL, ImageQuality } from "components/Img";
 import InsetBox from "components/InsetBox";
-import ContentTOCLine from "components/Library/ContentTOCLine";
+import ContentLine from "components/Library/ContentLine";
-import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
 import LightBox from "components/LightBox";
 import NavOption from "components/PanelComponents/NavOption";
 import ReturnButton, {
@@ -14,6 +13,8 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
+import Switch from "components/Switch";
+import ThumbnailPreview from "components/ThumbnailPreview";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import {
   Enum_Componentmetadatabooks_Binding_Type,
@@ -68,6 +69,8 @@ export default function LibrarySlug(props: Props): JSX.Element {
   const [lightboxImages, setLightboxImages] = useState([""]);
   const [lightboxIndex, setLightboxIndex] = useState(0);
 
+  const [keepInfoVisible, setKeepInfoVisible] = useState(false);
+
   let displayOpenScans = false;
   if (item?.contents?.data)
     for (const content of item.contents.data) {
@@ -424,13 +427,42 @@ export default function LibrarySlug(props: Props): JSX.Element {
             <h2 className="text-2xl">
               {isVariantSet ? langui.variants : langui.subitems}
             </h2>
+
+            <div className="-mt-6 mb-8 flex flex-row gap-2 place-items-center coarse:hidden">
+              <p className="flex-shrink-0">{"Always show info"}:</p>
+              <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+            </div>
             <div className="grid gap-8 items-end mobile:grid-cols-2 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
               {item.subitems.data.map((subitem) => (
-                <LibraryItemsPreview
+                <>
-                  key={subitem.id}
+                  {subitem.attributes && (
-                  item={subitem.attributes}
+                    <ThumbnailPreview
-                  currencies={props.currencies}
+                      key={subitem.id}
-                />
+                      href={`/library/${subitem.attributes.slug}`}
+                      title={subitem.attributes.title}
+                      subtitle={subitem.attributes.subtitle}
+                      thumbnail={subitem.attributes.thumbnail?.data?.attributes}
+                      thumbnailAspectRatio="21/29.7"
+                      keepInfoVisible={keepInfoVisible}
+                      topChips={
+                        subitem.attributes.metadata &&
+                        subitem.attributes.metadata.length > 0 &&
+                        subitem.attributes.metadata[0]
+                          ? [prettyItemSubType(subitem.attributes.metadata[0])]
+                          : []
+                      }
+                      bottomChips={subitem.attributes.categories?.data.map(
+                        (category) => category.attributes?.short ?? ""
+                      )}
+                      metadata={{
+                        currencies: currencies,
+                        release_date: subitem.attributes.release_date,
+                        price: subitem.attributes.price,
+                        position: "Bottom",
+                      }}
+                    />
+                  )}
+                </>
               ))}
             </div>
           </div>
@@ -446,7 +478,7 @@ export default function LibrarySlug(props: Props): JSX.Element {
             )}
             <div className="grid gap-4 w-full">
               {item.contents.data.map((content) => (
-                <ContentTOCLine
+                <ContentLine
                   langui={langui}
                   content={content}
                   parentSlug={item.slug}

src/pages/library/index.tsx

@@ -1,6 +1,5 @@
 import AppLayout from "components/AppLayout";
 import Chip from "components/Chip";
-import LibraryItemsPreview from "components/Library/LibraryItemsPreview";
 import PanelHeader from "components/PanelComponents/PanelHeader";
 import ContentPanel, {
   ContentPanelWidthSizes,
@@ -8,11 +7,17 @@ import ContentPanel, {
 import SubPanel from "components/Panels/SubPanel";
 import Select from "components/Select";
 import Switch from "components/Switch";
+import ThumbnailPreview from "components/ThumbnailPreview";
 import { GetLibraryItemsPreviewQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
 import { GetStaticPropsContext } from "next";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { convertPrice, prettyDate, prettyinlineTitle } from "queries/helpers";
+import {
+  convertPrice,
+  prettyDate,
+  prettyinlineTitle,
+  prettyItemSubType,
+} from "queries/helpers";
 import { useEffect, useState } from "react";
 
 interface Props extends AppStaticProps {
@@ -32,6 +37,7 @@ export default function Library(props: Props): JSX.Element {
   const [showSecondaryItems, setShowSecondaryItems] = useState<boolean>(false);
   const [sortingMethod, setSortingMethod] = useState<number>(0);
   const [groupingMethod, setGroupingMethod] = useState<number>(-1);
+  const [keepInfoVisible, setKeepInfoVisible] = useState(false);
 
   const [filteredItems, setFilteredItems] = useState<Props["items"]>(
     filterItems(
@@ -120,6 +126,11 @@ export default function Library(props: Props): JSX.Element {
         <p className="flex-shrink-0">{langui.show_secondary_items}:</p>
         <Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
       </div>
+
+      <div className="flex flex-row gap-2 place-items-center coarse:hidden">
+        <p className="flex-shrink-0">{"Always show info"}:</p>
+        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+      </div>
     </SubPanel>
   );
   const contentPanel = (
@@ -146,11 +157,35 @@ export default function Library(props: Props): JSX.Element {
                 className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"
               >
                 {items.map((item) => (
-                  <LibraryItemsPreview
+                  <>
-                    key={item.id}
+                    {item.attributes && (
-                    item={item.attributes}
+                      <ThumbnailPreview
-                    currencies={props.currencies}
+                        key={item.id}
-                  />
+                        href={`/library/${item.attributes.slug}`}
+                        title={item.attributes.title}
+                        subtitle={item.attributes.subtitle}
+                        thumbnail={item.attributes.thumbnail?.data?.attributes}
+                        thumbnailAspectRatio="21/29.7"
+                        keepInfoVisible={keepInfoVisible}
+                        topChips={
+                          item.attributes.metadata &&
+                          item.attributes.metadata.length > 0 &&
+                          item.attributes.metadata[0]
+                            ? [prettyItemSubType(item.attributes.metadata[0])]
+                            : []
+                        }
+                        bottomChips={item.attributes.categories?.data.map(
+                          (category) => category.attributes?.short ?? ""
+                        )}
+                        metadata={{
+                          currencies: currencies,
+                          release_date: item.attributes.release_date,
+                          price: item.attributes.price,
+                          position: "Bottom",
+                        }}
+                      />
+                    )}
+                  </>
                 ))}
               </div>
             </>

src/pages/news/index.tsx

@@ -1,15 +1,17 @@
 import AppLayout from "components/AppLayout";
-import PostsPreview from "components/News/PostsPreview";
 import PanelHeader from "components/PanelComponents/PanelHeader";
 import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
+import Switch from "components/Switch";
+import ThumbnailPreview from "components/ThumbnailPreview";
 import { GetPostsPreviewQuery } from "graphql/generated";
 import { getReadySdk } from "graphql/sdk";
 import { GetStaticPropsContext } from "next";
 import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
-import { prettyDate } from "queries/helpers";
+import { prettyDate, prettySlug } from "queries/helpers";
+import { useState } from "react";
 
 interface Props extends AppStaticProps {
   posts: Exclude<GetPostsPreviewQuery["posts"], null | undefined>["data"];
@@ -18,6 +20,8 @@ interface Props extends AppStaticProps {
 export default function News(props: Props): JSX.Element {
   const { langui, posts } = props;
 
+  const [keepInfoVisible, setKeepInfoVisible] = useState(true);
+
   posts
     .sort((a, b) => {
       const dateA = a.attributes?.date ? prettyDate(a.attributes.date) : "9999";
@@ -33,6 +37,11 @@ export default function News(props: Props): JSX.Element {
         title={langui.news}
         description={langui.news_description}
       />
+
+      <div className="flex flex-row gap-2 place-items-center coarse:hidden">
+        <p className="flex-shrink-0">{"Always show info"}:</p>
+        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+      </div>
     </SubPanel>
   );
 
@@ -40,7 +49,29 @@ export default function News(props: Props): JSX.Element {
     <ContentPanel width={ContentPanelWidthSizes.large}>
       <div className="grid gap-8 items-end grid-cols-1 desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]">
         {posts.map((post) => (
-          <PostsPreview key={post.id} post={post.attributes} />
+          <>
+            {post.attributes && (
+              <ThumbnailPreview
+                key={post.id}
+                href={`/news/${post.attributes.slug}`}
+                title={
+                  post.attributes.translations?.[0]?.title ??
+                  prettySlug(post.attributes.slug)
+                }
+                description={post.attributes.translations?.[0]?.excerpt}
+                thumbnail={post.attributes.thumbnail?.data?.attributes}
+                bottomChips={post.attributes.categories?.data.map(
+                  (category) => category.attributes?.short ?? ""
+                )}
+                thumbnailAspectRatio="3/2"
+                keepInfoVisible={keepInfoVisible}
+                metadata={{
+                  release_date: post.attributes.date,
+                  position: "Top",
+                }}
+              />
+            )}
+          </>
         ))}
       </div>
     </ContentPanel>