scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat/BOOK-240 hero video

Browse Source 
Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Christel Westerberg
This commit is contained in:
Erik Tiekstra
2025-12-11 08:35:27 +00:00
parent cd8b30f2ec
commit f06e466827
33 changed files with 727 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/collection_page/[uid]/page.tsx
View File

@@ -1,19 +1,3 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
export default function CollectionPageBreadcrumbs() {
const variants: Pick<BreadcrumbsProps, "color" | "size"> = {
color: "Surface/Secondary/Default",
size: "contentWidth",
}
return (
<Suspense fallback={<BreadcrumbsSkeleton {...variants} />}>
<Breadcrumbs {...variants} />
</Suspense>
)
return null
}

2
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/collection_page/[uid]/page.tsx
View File

@@ -1,4 +1,4 @@
import CollectionPage from "@/components/ContentType/StaticPages/CollectionPage"
import { CollectionPage } from "@/components/ContentType/CollectionPage"
import styles from "./page.module.css"

2
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/content_page/[uid]/page.tsx
View File

@@ -4,7 +4,7 @@ import { redirect } from "next/navigation"
import { overview } from "@scandic-hotels/common/constants/routes/myPages"
import { isSignupPage } from "@scandic-hotels/common/constants/routes/signup"
import ContentPage from "@/components/ContentType/StaticPages/ContentPage"
import { ContentPage } from "@/components/ContentType/ContentPage"
import { getLang } from "@/i18n/serverContext"
import { isLoggedInUser } from "@/utils/isLoggedInUser"

85
apps/scandic-web/components/ContentType/CollectionPage/collectionPage.module.css Normal file
View File

@@ -0,0 +1,85 @@
.pageSection {
display: grid;
gap: var(--Space-x4);
padding-bottom: var(--Space-x9);
}
.header {
background-color: var(--Base-Surface-Subtle-Normal);
}
.videoWrapper {
width: 100%;
height: 520px;
position: relative;
padding: var(--Space-x2) 0;
.heading {
color: var(--Text-Inverted);
}
.headerContent {
height: 100%;
align-content: end;
padding-bottom: var(--Space-x15);
}
}
.heroVideo {
position: absolute;
inset: 0;
}
.headerContent {
position: relative;
display: grid;
gap: var(--Space-x3);
padding-bottom: var(--Space-x4);
width: var(--max-width-content);
margin: 0 auto;
justify-items: start;
z-index: 1;
}
.intro {
display: grid;
max-width: var(--max-width-text-block);
gap: var(--Space-x3);
}
.heading {
color: var(--Text-Heading);
text-wrap: balance;
hyphens: auto;
}
.content {
display: flex;
flex-direction: column;
gap: var(--Space-x4);
width: var(--max-width-content);
margin: 0 auto;
}
.main {
display: grid;
gap: var(--Space-x6);
}
@media (min-width: 1367px) {
.videoWrapper {
height: 480px;
.headerContent {
padding-bottom: var(--Space-x5);
}
}
.content {
gap: var(--Space-x9);
}
.main {
gap: var(--Space-x9);
}
}

139
apps/scandic-web/components/ContentType/CollectionPage/index.tsx Normal file
View File

@@ -0,0 +1,139 @@
import { Suspense } from "react"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { serverClient } from "@/lib/trpc/server"
import Blocks from "@/components/Blocks"
import Breadcrumbs from "@/components/Breadcrumbs"
import HeaderDynamicContent from "@/components/Headers/DynamicContent"
import Hero from "@/components/Hero"
import { HeroVideo } from "@/components/HeroVideo"
import MeetingPackageWidget from "@/components/MeetingPackageWidget"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import LinkChips from "@/components/TempDesignSystem/LinkChips"
import styles from "./collectionPage.module.css"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
export async function CollectionPage() {
const caller = await serverClient()
const collectionPageRes = await caller.contentstack.collectionPage.get()
if (!collectionPageRes) {
return null
}
const { tracking, collectionPage } = collectionPageRes
const { blocks, hero_image, hero_video, header, meeting_package } =
collectionPage
const breadCrumbsVariants: Pick<BreadcrumbsProps, "color" | "size"> = {
color: "Surface/Secondary/Default",
size: "contentWidth",
}
return (
<>
{hero_video ? null : (
<Suspense fallback={<BreadcrumbsSkeleton {...breadCrumbsVariants} />}>
<Breadcrumbs {...breadCrumbsVariants} />
</Suspense>
)}
<section className={styles.pageSection}>
<header className={styles.header}>
{hero_video ? (
<>
<div className={styles.videoWrapper}>
<HeroVideo
className={styles.heroVideo}
src={hero_video.src}
focalPoint={hero_video.focalPoint}
captions={hero_video.captions}
isFullWidth
hasOverlay
/>
<div className={styles.headerContent}>
<Typography variant="Title/lg">
<h1 className={styles.heading}>{header.heading}</h1>
</Typography>
{header.top_primary_button?.url ? (
<ButtonLink
href={header.top_primary_button.url}
size="Medium"
variant="Primary"
color="Inverted"
>
{header.top_primary_button.title}
</ButtonLink>
) : null}
</div>
</div>
<Suspense
fallback={<BreadcrumbsSkeleton {...breadCrumbsVariants} />}
>
<Breadcrumbs {...breadCrumbsVariants} />
</Suspense>
</>
) : null}
<div className={styles.headerContent}>
{hero_video ? (
<Typography variant="Body/Lead text">
<p>{header.preamble}</p>
</Typography>
) : (
<>
<Typography variant="Title/lg">
<h1 className={styles.heading}>{header.heading}</h1>
</Typography>
<Typography variant="Body/Lead text">
<p>{header.preamble}</p>
</Typography>
{header.top_primary_button?.url ? (
<ButtonLink
href={header.top_primary_button.url}
size="Medium"
variant="Tertiary"
>
{header.top_primary_button.title}
</ButtonLink>
) : null}
</>
)}
{header.navigation_links ? (
<LinkChips chips={header.navigation_links} />
) : null}
{"dynamic_content" in header && header.dynamic_content ? (
<HeaderDynamicContent {...header.dynamic_content} />
) : null}
</div>
</header>
<div className={styles.content}>
{!hero_video && hero_image ? (
<Hero
alt={hero_image.meta.alt || hero_image.meta.caption || ""}
src={hero_image.url}
focalPoint={hero_image.focalPoint}
dimensions={hero_image.dimensions}
/>
) : null}
<main className={styles.main}>
{meeting_package?.show_widget && (
<MeetingPackageWidget
destination={meeting_package.location}
className={styles.meetingPackageWidget}
/>
)}
{blocks ? <Blocks blocks={blocks} /> : null}
</main>
</div>
</section>
<TrackingSDK pageData={tracking} />
</>
)
}

70
apps/scandic-web/components/ContentType/ContentPage/contentPage.module.css Normal file
View File

@@ -0,0 +1,70 @@
.pageSection {
display: grid;
gap: var(--Space-x4);
padding-bottom: var(--Space-x9);
}
.headerWrapper {
background-color: var(--Base-Surface-Subtle-Normal);
padding-bottom: var(--Space-x4);
}
.header {
display: grid;
gap: var(--Space-x3);
width: var(--max-width-content);
margin: 0 auto;
justify-items: start;
}
.intro {
display: grid;
max-width: var(--max-width-text-block);
gap: var(--Space-x3);
}
.heading {
color: var(--Text-Heading);
text-wrap: balance;
hyphens: auto;
}
.content {
display: flex;
flex-direction: column;
gap: var(--Space-x4);
width: var(--max-width-content);
margin: 0 auto;
}
.hero {
grid-area: hero;
width: 100%;
height: 400px;
display: flex;
}
.main {
grid-area: main;
display: grid;
gap: var(--Space-x6);
}
@media (min-width: 1367px) {
.content {
display: grid;
grid-template-areas:
"hero hero"
"main sidebar";
grid-template-columns: var(--max-width-text-block) 1fr;
gap: var(--Space-x9);
}
.main {
gap: var(--Space-x9);
}
.hero {
height: 480px;
}
}

118
apps/scandic-web/components/ContentType/ContentPage/index.tsx Normal file
View File

@@ -0,0 +1,118 @@
import { Suspense } from "react"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { serverClient } from "@/lib/trpc/server"
import Blocks from "@/components/Blocks"
import Breadcrumbs from "@/components/Breadcrumbs"
import HeaderDynamicContent from "@/components/Headers/DynamicContent"
import Hero from "@/components/Hero"
import { HeroVideo } from "@/components/HeroVideo"
import Sidebar from "@/components/Sidebar"
import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
import StickyMeetingPackageWidget from "@/components/StickyMeetingPackageWidget"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import LinkChips from "@/components/TempDesignSystem/LinkChips"
import styles from "./contentPage.module.css"
export async function ContentPage() {
const caller = await serverClient()
const contentPageRes = await caller.contentstack.contentPage.get()
if (!contentPageRes) {
return null
}
const { tracking, contentPage } = contentPageRes
const { blocks, hero_image, hero_video, header, meeting_package, sidebar } =
contentPage
return (
<>
{meeting_package?.show_widget && (
<StickyMeetingPackageWidget destination={meeting_package.location} />
)}
<Suspense
fallback={
<BreadcrumbsSkeleton
color="Surface/Secondary/Default"
size="contentWidth"
/>
}
>
<Breadcrumbs color="Surface/Secondary/Default" size="contentWidth" />
</Suspense>
<section className={styles.pageSection}>
{header ? (
<div className={styles.headerWrapper}>
<header className={styles.header}>
<div className={styles.intro}>
<Typography variant="Title/lg">
<h1 className={styles.heading}>{header.heading}</h1>
</Typography>
<Typography variant="Body/Lead text">
<p>{header.preamble}</p>
</Typography>
</div>
{header.top_primary_button?.url ? (
<ButtonLink
href={header.top_primary_button.url}
size="Medium"
variant="Tertiary"
>
{header.top_primary_button.title}
</ButtonLink>
) : null}
{header.navigation_links ? (
<LinkChips chips={header.navigation_links} />
) : null}
{"dynamic_content" in header && header.dynamic_content ? (
<HeaderDynamicContent {...header.dynamic_content} />
) : null}
</header>
</div>
) : null}
<div className={styles.content}>
{hero_video || hero_image ? (
<>
{hero_video ? (
<HeroVideo
className={styles.hero}
src={hero_video.src}
focalPoint={hero_video.focalPoint}
captions={hero_video.captions}
/>
) : null}
{!hero_video && hero_image ? (
<Hero
className={styles.hero}
alt={hero_image.meta.alt || hero_image.meta.caption || ""}
src={hero_image.url}
focalPoint={hero_image.focalPoint}
dimensions={hero_image.dimensions}
/>
) : null}
</>
) : null}
<main className={styles.main}>
{blocks ? <Blocks blocks={blocks} /> : null}
</main>
{sidebar?.length ? (
<Suspense fallback={<SidebarSkeleton />}>
<Sidebar blocks={sidebar} />
</Suspense>
) : null}
</div>
</section>
<TrackingSDK pageData={tracking} />
</>
)
}

22
apps/scandic-web/components/ContentType/StaticPages/CollectionPage/index.tsx
View File

@@ -1,22 +0,0 @@
import { serverClient } from "@/lib/trpc/server"
import StaticPage from ".."
export default async function CollectionPage() {
const caller = await serverClient()
const collectionPageRes = await caller.contentstack.collectionPage.get()
if (!collectionPageRes) {
return null
}
const { tracking, collectionPage } = collectionPageRes
return (
<StaticPage
content={collectionPage}
tracking={tracking}
pageType="collection"
/>
)
}

45
apps/scandic-web/components/ContentType/StaticPages/ContentPage/index.tsx
View File

@@ -1,45 +0,0 @@
import { Suspense } from "react"
import { serverClient } from "@/lib/trpc/server"
import Breadcrumbs from "@/components/Breadcrumbs"
import StickyMeetingPackageWidget from "@/components/StickyMeetingPackageWidget"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import StaticPage from ".."
export default async function ContentPage() {
const caller = await serverClient()
const contentPageRes = await caller.contentstack.contentPage.get()
if (!contentPageRes) {
return null
}
const { tracking, contentPage } = contentPageRes
return (
<>
{contentPage.meeting_package?.show_widget && (
<StickyMeetingPackageWidget
destination={contentPage.meeting_package.location}
/>
)}
<Suspense
fallback={
<BreadcrumbsSkeleton
color="Surface/Secondary/Default"
size="contentWidth"
/>
}
>
<Breadcrumbs color="Surface/Secondary/Default" size="contentWidth" />
</Suspense>
<StaticPage
content={contentPage}
tracking={tracking}
pageType="content"
/>
</>
)
}

30
apps/scandic-web/components/ContentType/StaticPages/index.tsx
View File

@@ -7,6 +7,7 @@ import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import Blocks from "@/components/Blocks"
import HeaderDynamicContent from "@/components/Headers/DynamicContent"
import Hero from "@/components/Hero"
import { HeroVideo } from "@/components/HeroVideo"
import MeetingPackageWidget from "@/components/MeetingPackageWidget"
import Sidebar from "@/components/Sidebar"
import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
@@ -23,7 +24,7 @@ export default async function StaticPage({
tracking,
pageType,
}: StaticPageProps) {
const { blocks, hero_image, header, meeting_package } = content
const { blocks, hero_image, hero_video, header, meeting_package } = content
return (
<>
@@ -63,14 +64,25 @@ export default async function StaticPage({
</div>
</header>
{hero_image ? (
<div className={styles.heroContainer}>
<Hero
alt={hero_image.meta.alt || hero_image.meta.caption || ""}
src={hero_image.url}
focalPoint={hero_image.focalPoint}
dimensions={hero_image.dimensions}
/>
{hero_video || hero_image ? (
<div className={styles.heroWrapper}>
{hero_video ? (
<HeroVideo
className={styles.heroVideo}
src={hero_video.src}
focalPoint={hero_video.focalPoint}
captions={hero_video.captions}
/>
) : null}
{!hero_video && hero_image ? (
<Hero
className={styles.heroImage}
alt={hero_image.meta.alt || hero_image.meta.caption || ""}
src={hero_image.url}
focalPoint={hero_image.focalPoint}
dimensions={hero_image.dimensions}
/>
) : null}
</div>
) : null}

8
apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css
View File

@@ -26,15 +26,15 @@
hyphens: auto;
}
.heroContainer {
width: 100%;
.heroWrapper {
padding: var(--Space-x4) var(--Space-x2);
}
.heroContainer img {
.heroImage,
.heroVideo {
max-width: var(--max-width-content);
margin: 0 auto;
display: block;
display: flex;
}
.contentContainer {

22
apps/scandic-web/components/Hero/index.tsx
View File

@@ -1,25 +1,25 @@
import { cx } from "class-variance-authority"
import Image from "@scandic-hotels/design-system/Image"
import styles from "./hero.module.css"
import type { HeroProps } from "./hero"
import type { ComponentProps } from "react"
export default async function Hero({
alt,
src,
focalPoint,
dimensions,
}: HeroProps) {
type HeroProps = Pick<
ComponentProps<typeof Image>,
"className" | "alt" | "src" | "focalPoint" | "dimensions"
>
export default async function Hero({ className, alt, ...props }: HeroProps) {
return (
<Image
className={styles.hero}
className={cx(styles.hero, className)}
alt={alt}
height={480}
width={1196}
src={src}
focalPoint={focalPoint}
dimensions={dimensions}
priority
{...props}
/>
)
}

10
apps/scandic-web/components/HeroVideo/heroVideo.module.css Normal file
View File

@@ -0,0 +1,10 @@
.videoWrapper {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
&:not(.fullWidth) {
border-radius: var(--Corner-radius-xl);
}
}

29
apps/scandic-web/components/HeroVideo/index.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { cx } from "class-variance-authority"
import { VideoPlayer } from "@scandic-hotels/design-system/VideoPlayer"
import styles from "./heroVideo.module.css"
import type { ComponentProps } from "react"
interface HeroVideoProps
extends Omit<ComponentProps<typeof VideoPlayer>, "className" | "variant"> {
className?: string
isFullWidth?: boolean
}
export function HeroVideo({
className,
isFullWidth,
...props
}: HeroVideoProps) {
return (
<div
className={cx(styles.videoWrapper, className, {
[styles.fullWidth]: isFullWidth,
})}
>
<VideoPlayer variant="hero" {...props} />
</div>
)
}