Added parent item on content singles (#150)

ApollosProject · Jan 26, 2024 · b41bb4f · b41bb4f
1 parent 5e94dbf
commit b41bb4f
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 25 deletions.
diff --git a/packages/web-shared/components/ContentSingle.js b/packages/web-shared/components/ContentSingle.js
@@ -11,9 +11,9 @@ import FeatureFeedComponentMap from './FeatureFeed/FeatureFeedComponentMap';
 import { add as addBreadcrumb, useBreadcrumbDispatch } from '../providers/BreadcrumbProvider';
 import { set as setModal, useModal } from '../providers/ModalProvider';
 
-import { Box, H1, H2, Loader, Longform, H3, ContentCard, BodyText, ShareButton } from '../ui-kit';
+import { Box, Loader, Longform, H3, ContentCard, BodyText, ShareButton } from '../ui-kit';
 import { useHTMLContent, useVideoMediaProgress } from '../hooks';
-import { Title } from './ContentSingle.styles';
+import { Title, ParentTitle, ParentSummary } from './ContentSingle.styles';
 
 import VideoPlayer from './VideoPlayer';
 
@@ -71,12 +71,14 @@ function ContentSingle(props = {}) {
     childContentItemsConnection,
     siblingContentItemsConnection,
     featureFeed,
+    parentItem,
   } = props?.data;
 
   const childContentItems = childContentItemsConnection?.edges;
   const siblingContentItems = siblingContentItemsConnection?.edges;
   const hasChildContent = childContentItems?.length > 0;
   const hasSiblingContent = siblingContentItems?.length > 0;
+  const hasParent = !!parentItem;
   const validFeatures = featureFeed?.features?.filter(
     (feature) => !!FeatureFeedComponentMap[feature?.__typename]
   );
@@ -255,6 +257,54 @@ function ContentSingle(props = {}) {
           </Box>
         ) : null}
         {/* Display content for sermons */}
+        {hasParent ? (
+          <>
+            <H3 flex="1" mr="xs" mb="xs">
+              This Series
+            </H3>
+            <Box flex="1" mb="l" minWidth="180px" {...props}>
+              <Box
+                position="relative"
+                display="flex"
+                backgroundColor="neutral.gray6"
+                overflow="hidden"
+                flexDirection={{ _: 'column', md: 'row' }}
+                mb="l"
+                borderRadius="l"
+                cursor="pointer"
+                onClick={() => handleActionPress(parentItem)}
+              >
+                {/* Image */}
+                <Box
+                  alignItems="center"
+                  backgroundColor="white"
+                  display="flex"
+                  overflow="hidden"
+                  width={{ _: '100%', md: '60%' }}
+                >
+                  <Box
+                    as="img"
+                    src={parentItem?.coverImage?.sources[0]?.uri}
+                    width="100%"
+                    height="100%"
+                  />
+                </Box>
+                {/* Masthead */}
+                <Box
+                  width={{ _: 'auto', md: '40%' }}
+                  padding={{ _: 'base', md: 'none' }}
+                  backdropFilter="blur(64px)"
+                  display="flex"
+                  flexDirection="column"
+                  paddingTop={{ md: 'xl' }}
+                >
+                  <ParentTitle>{parentItem?.title}</ParentTitle>
+                  <ParentSummary color="text.secondary">{parentItem?.summary}</ParentSummary>
+                </Box>
+              </Box>
+            </Box>
+          </>
+        ) : null}
         {hasSiblingContent ? (
           <>
             <H3 flex="1" mr="xs">

diff --git a/packages/web-shared/components/ContentSingle.styles.js b/packages/web-shared/components/ContentSingle.styles.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { withTheme } from 'styled-components';
-
+import { themeGet } from '@styled-system/theme-get';
 import { system } from '../ui-kit/_lib/system';
 
 import { TypeStyles } from '../ui-kit/Typography';
@@ -14,3 +14,28 @@ export const Title = withTheme(styled.h1`
   overflow: hidden;
   ${system}
 `);
+
+export const ParentTitle = withTheme(styled.div`
+  ${TypeStyles.H3}
+  margin-bottom: ${themeGet('space.xxs')};
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+
+  @media screen and (min-width: ${themeGet('breakpoints.md')}) {
+    ${TypeStyles.H3}
+    margin-bottom: ${themeGet('space.xxs')};
+  }
+
+  ${system}
+`);
+
+export const ParentSummary = withTheme(styled.div`
+  ${TypeStyles.SmallBodyText}
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  ${system}
+`);
diff --git a/packages/web-shared/hooks/useContentItem.js b/packages/web-shared/hooks/useContentItem.js
@@ -12,6 +12,20 @@ export const GET_CONTENT_ITEM = gql`
   ${CONTENT_SINGLE_FRAGMENT}
   ${EVENT_FRAGMENT}
 
+  fragment SubCardFragment on ContentItem {
+    id
+    title
+    summary
+    coverImage {
+      sources {
+        uri
+      }
+    }
+    videos {
+      ...VideoMediaFields
+    }
+  }
+
   query getContentItem($id: ID!) {
     node(id: $id) {
       id
@@ -54,37 +68,20 @@ export const GET_CONTENT_ITEM = gql`
         videos {
           ...VideoMediaFields
         }
+        parentItem {
+          ...SubCardFragment
+        }
         childContentItemsConnection {
           edges {
             node {
-              id
-              title
-              summary
-              coverImage {
-                sources {
-                  uri
-                }
-              }
-              videos {
-                ...VideoMediaFields
-              }
+              ...SubCardFragment
             }
           }
         }
         siblingContentItemsConnection {
           edges {
             node {
-              id
-              title
-              summary
-              coverImage {
-                sources {
-                  uri
-                }
-              }
-              videos {
-                ...VideoMediaFields
-              }
+              ...SubCardFragment
             }
           }
         }