Image and video optimizations (#1769)

* Use Next.js Image component in the resource drawer

* Differentiate NavItem props from config type

* Replace about page image

* Next.js images for channel page logos. Unit image config in Logo component

* Remove NavDrawer image paths (not used). Fix Storybook page

* Upgrade to Next.js v15. Page params are now async

* Upgrade @mui/material-nextjs for Next.js v15

* Utility for CSS background image-set() strings. Apply to homepage personalize section

* Pass background static import src to banner

* Use Logo component for unit cards

* Suspense boundaries needed around carousels (useSearchParams() should be wrapped error)

* Type fix

* Display YouTube videos with simple iframe

* 16:9 aspect ratio for videos

* Revert "Suspense boundaries needed around carousels (useSearchParams() should be wrapped error)"

This reverts commit b96fb61.

* Revert "Upgrade @mui/material-nextjs for Next.js v15"

This reverts commit 18fee78.

* Revert "Upgrade to Next.js v15. Page params are now async"

This reverts commit 20f0f05.

* Update test for unit logo

* Add Nextjs dependency in ol-utilities

* Remove comments

* Remove unnecessary truthy check

* Separate Unit/Platform Logo

* Move to peer dependency

* Bckground src set for topic banner

* Background src set on other banner backgrounds

* Remove redundant display breakpoints

* Apply changes to LearningResourceExpandedV2

* Update test

Author: jonkafton

frontends/main/src/app-pages/AboutPage/AboutPage.tsx

@@ -10,6 +10,7 @@ import {
 import * as urls from "@/common/urls"
 import React from "react"
 import domeImage from "@/public/mit-dome-2.jpg"
+import Image from "next/image"
 
 const WHAT_IS_MIT_OPEN_FRAGMENT_IDENTIFIER = "what-is-mit-learn"
 const NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER = "non-degree-learning"
@@ -81,13 +82,15 @@ const SubHeaderTextContainer = styled.div({
   alignSelf: "flex-start",
 })
 
-const SubHeaderImage = styled.img({
+const SubHeaderImageContainer = styled.div({
   flexGrow: 1,
   alignSelf: "stretch",
+  position: "relative",
+})
+
+const SubHeaderImage = styled(Image)({
   borderRadius: "8px",
-  backgroundSize: "cover",
-  backgroundPosition: "center",
-  backgroundImage: `url(${domeImage.src})`,
+  objectFit: "cover",
   [theme.breakpoints.down("md")]: {
     height: "300px",
   },
@@ -165,7 +168,13 @@ const AboutPage: React.FC = () => {
               <li>Continue your education at your own pace</li>
             </List>
           </SubHeaderTextContainer>
-          <SubHeaderImage />
+          <SubHeaderImageContainer>
+            <SubHeaderImage
+              src={domeImage}
+              alt="A view of the entablature of MIT's Great Dome"
+              fill
+            />
+          </SubHeaderImageContainer>
         </SubHeaderContainer>
         <BodySection>
           <HighlightContainer>

frontends/main/src/app-pages/ChannelPage/ChannelPage.test.tsx

@@ -379,7 +379,7 @@ describe("Channel Pages, Topic only", () => {
 })
 
 describe("Channel Pages, Unit only", () => {
-  it("Displays the channel title, banner, and avatar", async () => {
+  it("Displays the channel title, banner", async () => {
     const { channel } = setupApis({
       search_filter: "offered_by=ocw",
       channel_type: "unit",
@@ -388,9 +388,24 @@ describe("Channel Pages, Unit only", () => {
       url: `/c/${channel.channel_type}/${channel.name}`,
     })
 
-    const title = await screen.findByRole("heading", { name: channel.title })
-    getByImageSrc(title, `${window.origin}${channel.configuration.logo}`)
+    await screen.findByRole("heading", { name: channel.title })
   })
+
+  it("Displays the channel logo", async () => {
+    const { channel } = setupApis({
+      name: "ocw",
+      channel_type: "unit",
+    })
+    renderWithProviders(<ChannelPage />, {
+      url: `/c/${channel.channel_type}/${channel.name}`,
+    })
+
+    const images = await screen.findAllByRole("img", {
+      name: "MIT OpenCourseWare",
+    })
+    expect(images[0]).toHaveAttribute("src", "/images/unit_logos/ocw.svg")
+  })
+
   it("Displays a featured carousel if the channel type is 'unit'", async () => {
     const { channel } = setupApis({
       search_filter: "offered_by=ocw",

frontends/main/src/app-pages/ChannelPage/DefaultChannelTemplate.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { styled, Breadcrumbs, Banner } from "ol-components"
+import { backgroundSrcSetCSS } from "ol-utilities"
 import { SearchSubscriptionToggle } from "@/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle"
 import { useChannelDetail } from "api/hooks/channels"
 import ChannelMenu from "@/components/ChannelMenu/ChannelMenu"
@@ -10,6 +11,7 @@ import {
   CHANNEL_TYPE_BREADCRUMB_TARGETS,
   ChannelControls,
 } from "./ChannelPageTemplate"
+import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 
 const ChildrenContainer = styled.div(({ theme }) => ({
   paddingTop: "40px",
@@ -57,6 +59,7 @@ const DefaultChannelTemplate: React.FC<DefaultChannelTemplateProps> = ({
   const channel = useChannelDetail(String(channelType), String(name))
   const urlParams = new URLSearchParams(channel.data?.search_filter)
   const displayConfiguration = channel.data?.configuration
+
   return (
     <>
       <Banner
@@ -87,7 +90,10 @@ const DefaultChannelTemplate: React.FC<DefaultChannelTemplateProps> = ({
         title={channel.data?.title}
         header={displayConfiguration?.heading}
         subHeader={displayConfiguration?.sub_heading}
-        backgroundUrl={displayConfiguration?.banner_background}
+        backgroundUrl={
+          displayConfiguration?.banner_background ??
+          backgroundSrcSetCSS(backgroundSteps)
+        }
         extraActions={
           <ChannelControlsContainer>
             <ChannelControls>

frontends/main/src/app-pages/ChannelPage/TopicChannelTemplate.tsx

@@ -23,8 +23,9 @@ import {
   useLearningResourceTopic,
   useLearningResourceTopics,
 } from "api/hooks/learningResources"
-import { propsNotNil } from "ol-utilities"
+import { propsNotNil, backgroundSrcSetCSS } from "ol-utilities"
 import invariant from "tiny-invariant"
+import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 
 const ChildrenContainer = styled.div(({ theme }) => ({
   paddingTop: "40px",
@@ -222,6 +223,7 @@ const TopicChannelTemplateInternal: React.FC<
   ) : (
     <BreadcrumbsInternal current={channel.title} />
   )
+
   return (
     <>
       <Banner
@@ -249,7 +251,7 @@ const TopicChannelTemplateInternal: React.FC<
         extraHeader={<TopicChips topic={topic} />}
         backgroundUrl={
           displayConfiguration?.banner_background ??
-          "/images/backgrounds/background_steps.jpg"
+          backgroundSrcSetCSS(backgroundSteps)
         }
         extraActions={
           <ChannelControlsContainer>

frontends/main/src/app-pages/ChannelPage/UnitChannelTemplate.tsx

@@ -8,15 +8,16 @@ import {
   BannerBackground,
   Typography,
   VisuallyHidden,
+  UnitLogo,
 } from "ol-components"
+import { OfferedByEnum, SourceTypeEnum } from "api"
 import { SearchSubscriptionToggle } from "@/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle"
 import { ChannelDetails } from "@/page-components/ChannelDetails/ChannelDetails"
 import { useChannelDetail } from "api/hooks/channels"
 import ChannelMenu from "@/components/ChannelMenu/ChannelMenu"
 import ResourceCarousel, {
   ResourceCarouselProps,
 } from "@/page-components/ResourceCarousel/ResourceCarousel"
-import { SourceTypeEnum } from "api"
 import { getSearchParamMap } from "@/common/utils"
 import { HOME as HOME_URL, UNITS as UNITS_URL } from "../../common/urls"
 import { ChannelTypeEnum } from "api/v0"
@@ -38,13 +39,13 @@ const FeaturedCoursesCarousel = styled(ResourceCarousel)(({ theme }) => ({
   },
 }))
 
-const UnitLogo = styled.img(({ theme }) => ({
+const UnitLogoInverted = styled(UnitLogo)(({ theme }) => ({
   filter: "saturate(0%) invert(100%)",
+  height: 50,
   maxWidth: "100%",
-  width: "auto",
-  height: "50px",
   [theme.breakpoints.down("md")]: {
-    height: "40px",
+    height: 40,
+    width: "auto",
   },
 }))
 
@@ -126,7 +127,10 @@ const UnitChannelTemplate: React.FC<UnitChannelTemplateProps> = ({
               <ChannelHeader>
                 <VisuallyHidden>{channel.data?.title}</VisuallyHidden>
                 {channel.data ? (
-                  <UnitLogo alt="" src={displayConfiguration.logo} />
+                  <UnitLogoInverted
+                    unitCode={name as OfferedByEnum}
+                    height={50}
+                  />
                 ) : null}
               </ChannelHeader>
               <Stack gap={{ xs: "16px", lg: "32px" }}>

frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx

@@ -13,7 +13,7 @@ import {
   Banner,
   Breadcrumbs,
 } from "ol-components"
-import { pluralize } from "ol-utilities"
+import { pluralize, backgroundSrcSetCSS } from "ol-utilities"
 import type { LearningResourceSchool } from "api"
 import { useSchoolsList } from "api/hooks/learningResources"
 import {
@@ -27,7 +27,7 @@ import {
   RiTerminalBoxLine,
 } from "@remixicon/react"
 import { HOME } from "@/common/urls"
-
+import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
 import { useChannelCounts } from "api/hooks/channels"
 
@@ -201,7 +201,6 @@ const DepartmentListingPage: React.FC = () => {
   return (
     <>
       <Banner
-        backgroundUrl="/images/backgrounds/background_steps.jpg"
         title="Browse by Academic Department"
         header="At MIT, academic departments span a wide range of disciplines, from science and engineering to humanities. Select a department below to explore all of its non-degree learning offerings."
         navText={
@@ -211,6 +210,7 @@ const DepartmentListingPage: React.FC = () => {
             current="Departments"
           />
         }
+        backgroundUrl={backgroundSrcSetCSS(backgroundSteps)}
       />
       <Container>
         <Grid container>

frontends/main/src/app-pages/HomePage/PersonalizeSection.tsx

@@ -1,11 +1,14 @@
 import React from "react"
 import { Typography, styled, Container, ButtonLink } from "ol-components"
+import { backgroundSrcSetCSS } from "ol-utilities"
 import { useUserMe } from "api/hooks/user"
 import * as urls from "@/common/urls"
+import personalizeImage from "@/public/images/homepage/personalize-image.png"
+import personalizeBgImage from "@/public/images/homepage/personalize-bg.png"
 
 const FullWidthBackground = styled.div(({ theme }) => ({
   padding: "80px 0",
-  background: 'url("/images/homepage/personalize-bg.png") center top no-repeat',
+  background: `${backgroundSrcSetCSS(personalizeBgImage)} center top no-repeat`,
   backgroundSize: "cover",
   [theme.breakpoints.down("md")]: {
     padding: "40px 0",
@@ -108,7 +111,7 @@ const PersonalizeSection = () => {
   return (
     <FullWidthBackground>
       <PersonalizeContainer>
-        <ImageContainer src="/images/homepage/personalize-image.png" alt="" />
+        <ImageContainer src={personalizeImage.src} alt="" />
         <PersonalizeContent />
       </PersonalizeContainer>
     </FullWidthBackground>

frontends/main/src/app-pages/LearningPathListingPage/LearningPathListingPage.tsx

@@ -84,11 +84,6 @@ const LearningPathListingPage: React.FC = () => {
       src="/images/backgrounds/course_search_banner.png"
       className="learningpaths-page"
     >
-      {/* TODO <MetaTags title="Learning Paths" social={false} />
-      <Helmet>
-        <meta name="robots" content="noindex,noarchive" />
-      </Helmet>
-       */}
       <Container maxWidth="md" style={{ paddingBottom: 100 }}>
         <GridContainer>
           <GridColumn variant="single-full">