src/components/PreviewCard.tsx

@@ -28,6 +28,7 @@ interface Props {
   topChips?: string[];
   bottomChips?: string[];
   keepInfoVisible?: boolean;
+  stackEffect?: boolean;
   metadata?: {
     currencies?: AppStaticProps["currencies"];
     release_date?: DatePickerFragment | null;
@@ -52,6 +53,7 @@ export default function PreviewCard(props: Immutable<Props>): JSX.Element {
     title,
     subtitle,
     description,
+    stackEffect = false,
     topChips,
     bottomChips,
     keepInfoVisible,
@@ -112,8 +114,26 @@ export default function PreviewCard(props: Immutable<Props>): JSX.Element {
         className="drop-shadow-shade-xl cursor-pointer grid items-end
         fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02]
         [--bg-opacity:0] hover:[--bg-opacity:0.5] [--play-opacity:0]
-        hover:[--play-opacity:100] transition-transform"
+        hover:[--play-opacity:100] transition-transform
+        [--stacked-top:0] hover:[--stacked-top:1]"
       >
+        {thumbnail && stackEffect && (
+          <>
+            <Img
+              className={`rounded-t-md absolute -top-[var(--stacked-top)*1.3rem]
+                opacity-30 scale-[0.88] transition-[top]`}
+              image={thumbnail}
+              quality={ImageQuality.Medium}
+            />
+            <Img
+              className={`rounded-t-md absolute -top-[var(--stacked-top)*0.6rem]
+                opacity-60 scale-95 transition-[top]`}
+              image={thumbnail}
+              quality={ImageQuality.Medium}
+            />
+          </>
+        )}
+
         {thumbnail ? (
           <div className="relative">
             <Img
@@ -174,9 +194,13 @@ export default function PreviewCard(props: Immutable<Props>): JSX.Element {
             </div>
           )}
           <div className="my-1">
-            {pre_title && <p className="leading-none mb-1 break-words">{pre_title}</p>}
+            {pre_title && (
+              <p className="leading-none mb-1 break-words">{pre_title}</p>
+            )}
             {title && (
-              <p className="font-headers text-lg leading-none break-words">{title}</p>
+              <p className="font-headers text-lg leading-none break-words">
+                {title}
+              </p>
             )}
             {subtitle && <p className="leading-none break-words">{subtitle}</p>}
           </div>

src/graphql/operations/getContents.graphql

@@ -4,7 +4,7 @@ query getContents($language_code: String) {
       id
       attributes {
         slug
-        titles(filters: { language: { code: { eq: $language_code } } }) {
+        titles {
           pre_title
           title
           subtitle
@@ -55,6 +55,16 @@ query getContents($language_code: String) {
             }
           }
         }
+        next_recommended {
+          data {
+            id
+          }
+        }
+        previous_recommended {
+          data {
+            id
+          }
+        }
         text_set {
           id
         }

src/pages/contents/index.tsx

@@ -28,13 +28,23 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
   const [groupingMethod, setGroupingMethod] = useState<number>(-1);
   const [keepInfoVisible, setKeepInfoVisible] = useState(false);
 
+  const [combineRelatedContent, setCombineRelatedContent] = useState(true);
+
+  const [filteredItems, setFilteredItems] = useState(
+    filterContents(combineRelatedContent, contents)
+  );
+
   const [groups, setGroups] = useState<GroupContentItems>(
-    getGroups(langui, groupingMethod, contents)
+    getGroups(langui, groupingMethod, filteredItems)
   );
 
   useEffect(() => {
-    setGroups(getGroups(langui, groupingMethod, contents));
-  }, [langui, groupingMethod, contents]);
+    setFilteredItems(filterContents(combineRelatedContent, contents));
+  }, [combineRelatedContent, contents]);
+
+  useEffect(() => {
+    setGroups(getGroups(langui, groupingMethod, filteredItems));
+  }, [langui, groupingMethod, filteredItems]);
 
   const subPanel = (
     <SubPanel>
@@ -55,6 +65,14 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
         />
       </div>
 
+      <div className="flex flex-row gap-2 place-items-center coarse:hidden">
+        <p className="flex-shrink-0">{"Combine related contents"}:</p>
+        <Switch
+          setState={setCombineRelatedContent}
+          state={combineRelatedContent}
+        />
+      </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} />
@@ -100,6 +118,11 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
                         subtitle={item.attributes.titles?.[0]?.subtitle}
                         thumbnail={item.attributes.thumbnail?.data?.attributes}
                         thumbnailAspectRatio="3/2"
+                        stackEffect={
+                          item.attributes.next_recommended?.data?.id !== null &&
+                          item.attributes.next_recommended?.data?.id !== undefined &&
+                          combineRelatedContent
+                        }
                         topChips={
                           item.attributes.type?.data?.attributes
                             ? [
@@ -231,3 +254,15 @@ function getGroups(
     }
   }
 }
+
+function filterContents(
+  combineRelatedContent: boolean,
+  contents: Immutable<Props["contents"]>
+): Immutable<Props["contents"]> {
+  if (combineRelatedContent) {
+    return [...contents].filter(
+      (content) => !content.attributes?.previous_recommended?.data?.id
+    );
+  }
+  return contents;
+}