@ndla/ui 34.0.1 → 34.1.1

package/src/NDLAFilm/AboutNdlaFilm.tsx

@@ -1,10 +1,9 @@
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
-import { colors, spacing, fonts, mq, breakpoints } from '@ndla/core';
+import { ModalHeader, ModalBody, ModalCloseButton, ModalV2 } from '@ndla/modal';
+import { colors, spacing, mq, breakpoints } from '@ndla/core';
 import { ButtonV2 as Button } from '@ndla/button';
-import { OneColumn } from '..';
 import VisualElement from './VisualElement';
 
 const StyledAside = styled.aside`
@@ -15,9 +14,7 @@ const StyledAside = styled.aside`
   > div {
     padding: ${spacing.normal};
     width: 50%;
-    h1 {
-      @include font-size(22px, 26px);
-      font-weight: ${fonts.weight.bold};
+    h2 {
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: #fff;
@@ -25,7 +22,6 @@ const StyledAside = styled.aside`
     }
   }
   button {
-    text-align: left;
     color: #fff;
     &:hover,
     &:focus {
@@ -58,25 +54,26 @@ interface Props {
 
 const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
   const { t } = useTranslation();
+  const titleId = 'about-ndla-film-title';
   return (
     <div className="o-wrapper">
-      <StyledAside>
+      <StyledAside aria-labelledby={titleId}>
         <div>
           <VisualElement visualElement={aboutNDLAVideo.visualElement} />
         </div>
         <div>
-          <h1>{aboutNDLAVideo.title}</h1>
+          <h2 id={titleId}>{aboutNDLAVideo.title}</h2>
           <p>{aboutNDLAVideo.description}</p>
-          <Modal size="fullscreen" activateButton={<Button variant="link">{t('ndlaFilm.about.more')}</Button>}>
+          <ModalV2 size="full" activateButton={<Button variant="link">{t('ndlaFilm.about.more')}</Button>}>
             {(onClose) => (
-              <OneColumn cssModifier="medium">
+              <>
                 <ModalHeader>
-                  <ModalCloseButton onClick={onClose} title="Lukk" />
+                  <ModalCloseButton onClick={onClose} />
                 </ModalHeader>
                 <ModalBody>{moreAboutNdlaFilm}</ModalBody>
-              </OneColumn>
+              </>
             )}
-          </Modal>
+          </ModalV2>
         </div>
       </StyledAside>
     </div>

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -6,22 +6,20 @@
  *
  */
 
-import React, { Fragment, RefObject, useEffect, useRef, useState } from 'react';
-import { isIE, browserVersion } from 'react-device-detect';
+import React, { RefObject, useMemo, useRef } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import throttle from 'lodash/throttle';
-import { breakpoints, mq, spacing, spacingUnit, colors, fonts, animations } from '@ndla/core';
+import { breakpoints, mq, spacing, spacingUnit, colors } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
+import groupBy from 'lodash/groupBy';
+import sortBy from 'lodash/sortBy';
+import { useTranslation } from 'react-i18next';
 import { makeSrcQueryString } from '../Image';
 import { MovieType } from './types';
-import { isLetter } from './isLetter';
+
 const IMAGE_WIDTH = 143;
 
-const StyledNewLetter = styled.h2`
-  color: #fff;
-  margin: ${spacing.large} 0 ${spacingUnit * 0.75}px;
-  ${fonts.sizes(26, 1.1)};
+const Letter = styled.h2`
+  color: ${colors.white};
   ${mq.range({ from: breakpoints.tablet })} {
     text-indent: ${spacingUnit * 0.75}px;
   }
@@ -39,29 +37,12 @@ const StyledWrapper = styled.section`
   max-width: 100%;
   margin: ${spacing.large} auto;
   padding: 0 ${spacing.normal};
-  display: flex;
-  flex-direction: column;
 `;
 
-type MovieItemProps = {
-  inView: boolean | null;
-};
-
-const MovieItem = styled.div<MovieItemProps>`
-  margin: 0 0 ${spacingUnit * 0.75}px;
-  display: inline-flex;
-  &:last-child {
-    margin-bottom: ${spacing.large};
-  }
-  opacity: 0;
-  transform: translateY(${spacing.xsmall});
-  transition: all ${animations.durations.slow} ease;
-  ${(props: MovieItemProps) =>
-    props.inView &&
-    css`
-      opacity: 1;
-      transform: translateY(0);
-    `};
+const MovieItem = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+  color: ${colors.white};
 `;
 
 const MovieTextWrapper = styled.div`
@@ -71,57 +52,23 @@ const MovieTextWrapper = styled.div`
   flex: 1;
 `;
 
-type movieImageType = {
-  backgroundImage?: string | null;
-};
-
-const MovieImage = styled.div<movieImageType>`
+const MovieImage = styled.img`
   width: 104px;
   height: 80px;
-  background-color: ${colors.ndlaFilm.filmColorLight};
-  ${(props: movieImageType) =>
-    props.backgroundImage !== null &&
-    css`
-      background-image: url(${props.backgroundImage});
-    `}
-  background-size: cover;
-  background-position: center center;
-  margin: 0 ${spacingUnit * 0.75}px 0 0;
   ${mq.range({ from: breakpoints.tablet })} {
-    margin-left: ${spacingUnit * 0.75}px;
     width: ${IMAGE_WIDTH}px;
     height: 90px;
   }
-  position: relative;
-  &:after {
-    content: '';
-    position: absolute;
-    z-index: 1;
-    background: ${colors.ndlaFilm.filmColor};
-    opacity: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-  }
 `;
 
 const MovieTitle = styled.h3`
-  color: #fff;
-  margin: 0 0 2px;
-  ${fonts.sizes(18, 1.3)};
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes(20, 1.3)};
-  }
+  color: ${colors.white};
+  margin: 0;
 `;
 
 const MovieDescription = styled.p`
   color: ${colors.brand.greyLighter};
   margin: 0;
-  ${fonts.sizes(14, 1.5)};
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes(16, 1.5)};
-  }
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -129,18 +76,10 @@ const MovieDescription = styled.p`
   -webkit-line-clamp: 2;
 `;
 
-type isIEProps = {
-  isIE11: boolean;
-};
-
-const StyledSafeLink = styled(SafeLink)<isIEProps>`
+const StyledSafeLink = styled(SafeLink)`
   box-shadow: none;
   display: flex;
-  ${(props) =>
-    props.isIE11 &&
-    css`
-      flex: 1;
-    `}
+  gap: ${spacing.small};
   &:hover,
   &:focus {
     ${MovieTitle} {
@@ -158,97 +97,42 @@ const StyledSafeLink = styled(SafeLink)<isIEProps>`
 
 interface Props {
   movies: MovieType[];
-  locale: string;
 }
 
-type visibleImagesProps = {
-  [key: string]: boolean | null;
-};
+const MovieGroup = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.normal};
+`;
 
-const hasForEachPolyfill = () => {
-  // Polyfill for ie11
-  if ('NodeList' in window && !NodeList.prototype.forEach) {
-    NodeList.prototype.forEach = function (callback, thisArg) {
-      thisArg = thisArg || window;
-      for (let i = 0; i < this.length; i++) {
-        callback.call(thisArg, this[i], i, this);
-      }
-    };
-  }
+const groupMovies = (movies: MovieType[]) => {
+  const sortedMovies = sortBy(movies, (m) => m.title);
+  const grouped = groupBy(sortedMovies, (movie) => {
+    const firstChar = movie.title[0]?.toUpperCase();
+    const isLetter = firstChar?.match(/[A-Z\WÆØÅ]+/);
+    return isLetter ? firstChar : '#';
+  });
+  return Object.entries(grouped).map(([letter, movies]) => ({ letter, movies }));
 };
 
-const AllMoviesAlphabetically = ({ movies, locale }: Props) => {
-  const isIE11 = isIE && parseInt(browserVersion) < 12;
+const AllMoviesAlphabetically = ({ movies }: Props) => {
+  const groupedMovies = useMemo(() => groupMovies(movies), [movies]);
+  const { t } = useTranslation();
   // Split into Letters.
-  let previousLetter = '';
   const wrapperRef: RefObject<HTMLElement> = useRef(null);
-  const [visibleImages, setVisibleImages] = useState<visibleImagesProps>({});
-
-  const scrollEvent = () => {
-    hasForEachPolyfill();
-    const updates: visibleImagesProps = {};
-    const allChildren: NodeListOf<HTMLElement> | null =
-      wrapperRef.current && wrapperRef.current.querySelectorAll('[role=img]');
-    const windowInnerHeight = window.innerHeight;
-    if (allChildren) {
-      let started: boolean = false;
-      let ended: boolean = false;
-      allChildren.forEach((el: HTMLElement, index: number) => {
-        if (!ended) {
-          const rect: ClientRect = el.getBoundingClientRect();
-          if (!started) {
-            if (rect.top > -20) {
-              updates[index] = true;
-              started = true;
-            }
-          } else {
-            updates[index] = true;
-            if (rect.top > windowInnerHeight + 20) {
-              ended = true;
-            }
-          }
-        }
-      });
-    }
-    setVisibleImages((visibleImages) => ({ ...visibleImages, ...updates }));
-  };
-
-  useEffect(() => {
-    const throttledScrollEvent = throttle(() => {
-      scrollEvent();
-    }, 100);
-    window.addEventListener('scroll', throttledScrollEvent);
-    scrollEvent();
-    return () => {
-      window.removeEventListener('scroll', throttledScrollEvent);
-    };
-  }, []);
-
-  useEffect(() => {
-    scrollEvent();
-  }, [movies]);
 
   return (
     <StyledWrapper ref={wrapperRef}>
-      {movies.map((movie: MovieType, index: number) => {
-        const currentLetter = movie.title.substr(0, 1);
-        const isNewLetter = currentLetter.localeCompare(previousLetter, locale) === 1 && isLetter(movie.title);
-        previousLetter = currentLetter;
-        const inView: boolean | null = visibleImages ? visibleImages[index] : null;
-        return (
-          <Fragment key={movie.id}>
-            {isNewLetter && <StyledNewLetter>{movie.title.substr(0, 1)}</StyledNewLetter>}
-            <MovieItem inView={inView}>
-              <StyledSafeLink isIE11={isIE11} to={movie.path}>
+      {groupedMovies.map(({ letter, movies }) => (
+        <MovieGroup key={letter}>
+          <Letter aria-label={t('filmfrontpage.allMovieGroupTitleLabel', { letter })}>{letter}</Letter>
+          {movies.map((movie) => (
+            <MovieItem key={movie.id}>
+              <StyledSafeLink to={movie.path}>
                 <MovieImage
-                  role="img"
-                  backgroundImage={
-                    inView && movie.metaImage && movie.metaImage.url
-                      ? `${movie.metaImage.url}?${makeSrcQueryString(IMAGE_WIDTH * 2)}`
-                      : null
+                  src={
+                    movie?.metaImage?.url ? `${movie.metaImage?.url}?${makeSrcQueryString(IMAGE_WIDTH * 2)}` : undefined
                   }
-                  aria-label={movie.metaImage && movie.metaImage.alt}
-                  title={movie.title}
                 />
                 <MovieTextWrapper>
                   <MovieTitle>{movie.title}</MovieTitle>
@@ -256,9 +140,9 @@ const AllMoviesAlphabetically = ({ movies, locale }: Props) => {
                 </MovieTextWrapper>
               </StyledSafeLink>
             </MovieItem>
-          </Fragment>
-        );
-      })}
+          ))}
+        </MovieGroup>
+      ))}
     </StyledWrapper>
   );
 };

package/src/NDLAFilm/FilmContentCard.tsx

@@ -1,3 +1,11 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 import React from 'react';
 import { spacing, colors, fonts, breakpoints } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
@@ -24,41 +32,45 @@ const FilmContentCard = ({
   hideTags = false,
 }: Props) => {
   let backgroundImage = `${(metaImage && metaImage.url) || ''}`;
+  const contentTypeId = `content-type-${id}`;
   if (resizeThumbnailImages && metaImage) {
     backgroundImage += '?width=480';
   }
 
   return (
-    <StyledSlideWrapper key={id} columnWidth={columnWidth} style={{ marginRight: `${distanceBetweenItems}px` }}>
-      <SafeLink to={path}>
-        <StyledImage
-          role="img"
-          columnWidth={columnWidth}
-          aria-label={(metaImage && metaImage.alt) || ''}
-          style={{
-            backgroundImage: `url(${backgroundImage}?${makeSrcQueryString(600)})`,
-          }}>
-          {movieResourceTypes && !hideTags && (
-            <FilmContentCardTags movieResourceTypes={movieResourceTypes} resourceTypes={resourceTypes} />
-          )}
-        </StyledImage>
-        <StyledMovieTitle>{title}</StyledMovieTitle>
-      </SafeLink>
-    </StyledSlideWrapper>
+    <StyledSafeLink
+      onMouseDown={(e) => e.preventDefault()}
+      to={path}
+      aria-describedby={contentTypeId}
+      columnWidth={columnWidth}
+      style={{ marginRight: `${distanceBetweenItems}px` }}>
+      <StyledImage
+        role="img"
+        columnWidth={columnWidth}
+        style={{
+          backgroundImage: `url(${backgroundImage}?${makeSrcQueryString(600)})`,
+        }}>
+        {movieResourceTypes && !hideTags && (
+          <FilmContentCardTags
+            id={contentTypeId}
+            movieResourceTypes={movieResourceTypes}
+            resourceTypes={resourceTypes}
+          />
+        )}
+      </StyledImage>
+      <StyledMovieTitle>{title}</StyledMovieTitle>
+    </StyledSafeLink>
   );
 };
 
-const StyledMovieTitle = styled.h2`
+const StyledMovieTitle = styled.span`
   ${fonts.sizes('14px', '20px')};
   font-weight: ${fonts.weight.semibold};
   color: #fff;
-  margin: ${spacing.xsmall} 0 ${spacing.normal};
-  min-height: ${spacing.large};
   @media (min-width: ${breakpoints.mobileWide}) {
     ${fonts.sizes('16px', '22px')};
   }
   @media (min-width: ${breakpoints.tablet}) {
-    margin: ${spacing.small} 0;
     ${fonts.sizes('18px', '24px')};
   }
 `;
@@ -93,11 +105,18 @@ interface StyledSlideWrapperProps {
   columnWidth: number;
 }
 
-const StyledSlideWrapper = styled.div<StyledSlideWrapperProps>`
+const shouldForwardProp = (p: string) => p !== 'columnWidth';
+
+const StyledSafeLink = styled(SafeLink, { shouldForwardProp })<StyledSlideWrapperProps>`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.small};
   width: ${(props) => props.columnWidth}px;
   color: #fff;
   box-shadow: none;
   &:hover,
+  &:focus-within,
+  &:active,
   &:focus {
     ${StyledMovieTitle} {
       text-decoration: underline;

package/src/NDLAFilm/FilmContentCardTags.tsx

@@ -23,10 +23,11 @@ const StyledMovieTags = styled.span`
 `;
 
 interface Props {
+  id: string;
   movieResourceTypes: MovieResourceType[];
   resourceTypes: MovieResourceType[];
 }
-const FilmContentCardTags = ({ movieResourceTypes, resourceTypes }: Props) => {
+const FilmContentCardTags = ({ movieResourceTypes, resourceTypes, id }: Props) => {
   const resources: Record<string, boolean> = {};
   movieResourceTypes.forEach((movieResourceType) => {
     const resource = resourceTypes.find((resourceType) => resourceType.id === movieResourceType.id);
@@ -35,7 +36,7 @@ const FilmContentCardTags = ({ movieResourceTypes, resourceTypes }: Props) => {
     }
   });
   return (
-    <StyledWrapperDiv>
+    <StyledWrapperDiv id={id}>
       {Object.keys(resources).map((resourceName) => (
         <StyledMovieTags key={resourceName}>{resourceName}</StyledMovieTags>
       ))}

package/src/NDLAFilm/FilmMovieList.tsx

@@ -8,10 +8,12 @@
 import React from 'react';
 import { Carousel, CalculatedCarouselProps } from '@ndla/carousel';
 import styled from '@emotion/styled';
+import { IconButtonV2 } from '@ndla/button';
+import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import FilmContentCard from './FilmContentCard';
 import { MovieResourceType, MovieType } from './types';
-import { StyledHeadingH1 } from './filmStyles';
+import { StyledHeadingH2 } from './filmStyles';
 
 interface Props {
   movies: MovieType[];
@@ -40,13 +42,18 @@ const FilmMovieList = ({
   resizeThumbnailImages,
 }: Props) => (
   <StyledSection>
-    <StyledHeadingH1 marginLeft={autoSizedProps.margin}>{name}</StyledHeadingH1>
+    <StyledHeadingH2 marginLeft={autoSizedProps.margin}>{name}</StyledHeadingH2>
     <Carousel
-      disableScroll={false}
-      slideBackwardsLabel={slideBackwardsLabel}
-      slideForwardsLabel={slideForwardsLabel}
-      buttonClass="c-film-movielist__carousel-buttons"
-      wrapperClass="c-film-movielist__carousel-wrapper-buttons"
+      leftButton={
+        <IconButtonV2 aria-label={slideBackwardsLabel}>
+          <ChevronLeft />
+        </IconButtonV2>
+      }
+      rightButton={
+        <IconButtonV2 aria-label={slideForwardsLabel}>
+          <ChevronRight />
+        </IconButtonV2>
+      }
       items={movies.map((movie) => (
         <FilmContentCard
           key={movie.id}

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -78,9 +78,9 @@ const FilmMovieSearch = ({
       <OneColumn>
         <TopicNavigation>
           <StyledHeadingH2 id={skipToContentId} className="u-12/12 u-4/12@tablet">
-            {t('ndlaFilm.subjectsInMovies')}:
+            {`${t('ndlaFilm.subjectsInMovies')}:`}
           </StyledHeadingH2>
-          <nav className="u-12/12 u-8/12@tablet">
+          <nav className="u-12/12 u-8/12@tablet" aria-labelledby={skipToContentId}>
             <ul>
               {topics.map((topic) => (
                 <li key={topic.id}>

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { SwipeEventData, useSwipeable } from 'react-swipeable';
+import { SwipeDirections, SwipeEventData, useSwipeable } from 'react-swipeable';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { breakpoints, mq, spacing, spacingUnit, fonts, colors } from '@ndla/core';
@@ -104,7 +104,9 @@ interface SlideshowLinkProps {
   out?: boolean;
 }
 
-const SlideshowLink = styled(SafeLink)<SlideshowLinkProps>`
+const shouldForwardProp = (p: string) => p !== 'out';
+
+const SlideshowLink = styled(SafeLink, { shouldForwardProp })<SlideshowLinkProps>`
   display: flex;
   box-shadow: none;
   transition: all 400ms ease;
@@ -120,8 +122,9 @@ const SlideshowLink = styled(SafeLink)<SlideshowLinkProps>`
     padding-bottom: ${spacingUnit * 3}px;
   }
   &:hover {
-    h1 {
+    ${() => SlideshowName} {
       text-decoration: underline;
+      text-decoration-color: white;
     }
   }
 `;
@@ -138,8 +141,9 @@ const SlideshowWrapper = styled.section`
 `;
 
 const SlideshowInfo = styled.div`
-  border: 0;
-  background: none;
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.small};
   background-color: rgba(3, 23, 43, 0.7);
   border-radius: 4px;
   padding: ${spacing.medium} ${spacing.medium} ${spacing.medium} ${spacing.normal};
@@ -150,40 +154,38 @@ const SlideshowInfo = styled.div`
     width: 100%;
     padding: ${spacing.medium} ${spacingUnit * 2}px ${spacing.medium} ${spacing.normal};
   }
-  h1 {
-    ${fonts.sizes('22px', '30px')};
-    color: ${colors.white};
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-    margin: 0;
-    font-weight: ${fonts.weight.semibold};
-    ${mq.range({ from: breakpoints.mobileWide })} {
-      margin: 0 0 ${spacing.small};
-      ${fonts.sizes('26px', '30px')};
-    }
-    ${mq.range({ from: breakpoints.tablet })} {
-      ${fonts.sizes('40px', '44px')};
-    }
-    ${mq.range({ from: breakpoints.desktop })} {
-      ${fonts.sizes('48px', '54px')};
-    }
+`;
+
+const SlideshowName = styled.p`
+  ${fonts.sizes('22px', '30px')};
+  color: ${colors.white};
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  margin: 0;
+  font-weight: ${fonts.weight.semibold};
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    ${fonts.sizes('26px', '30px')};
   }
+  ${mq.range({ from: breakpoints.tablet })} {
+    ${fonts.sizes('40px', '44px')};
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    ${fonts.sizes('48px', '54px')};
+  }
+`;
 
-  p {
-    color: ${colors.white};
-    display: inline-block;
-    margin: 0;
-    padding: 0;
-    border-radius: 4px;
-    ${fonts.sizes('12px', '18px')};
-    ${mq.range({ from: breakpoints.mobileWide })} {
-      ${fonts.sizes('15px', '20px')};
-    }
-    ${mq.range({ from: breakpoints.tablet })} {
-      ${fonts.sizes('18px', '24px')};
-    }
-    ${mq.range({ from: breakpoints.wide })} {
-      ${fonts.sizes('20px', '32px')};
-    }
+const SlideshowDescription = styled.p`
+  color: ${colors.white};
+  margin: 0;
+  padding: 0;
+  ${fonts.sizes('12px', '18px')};
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    ${fonts.sizes('15px', '20px')};
+  }
+  ${mq.range({ from: breakpoints.tablet })} {
+    ${fonts.sizes('18px', '24px')};
+  }
+  ${mq.range({ from: breakpoints.wide })} {
+    ${fonts.sizes('20px', '32px')};
   }
 `;
 
@@ -215,6 +217,7 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
   const [slideIndex, setSlideIndex] = useState(0);
   const [slideIndexTarget, setSlideIndexTarget] = useState(0);
   const [animationComplete, setAnimationComplete] = useState(true);
+  const [swipeDirection, setSwipeDirection] = useState<SwipeDirections | undefined>(undefined);
   const slideRef = useRef<HTMLDivElement>(null);
   const slideText = useRef<HTMLDivElement>(null);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -263,6 +266,7 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
   };
 
   const onSwipeEnd = () => {
+    setSwipeDirection(undefined);
     let slide;
     if (swipeDistance > 40) {
       slide = -1;
@@ -292,7 +296,11 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
   };
 
   const onSwipe = (eventData: SwipeEventData) => {
-    if (eventData.dir === 'Up' || eventData.dir === 'Down') {
+    if (eventData.initial) {
+      setSwipeDirection(eventData.dir);
+    }
+    const dir = eventData.initial ? eventData.dir : swipeDirection;
+    if (dir === 'Up' || dir === 'Down') {
       return;
     }
     if (timer.current) {
@@ -352,6 +360,7 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
   const handlers = useSwipeable({
     onSwiped: onSwipeEnd,
     onSwiping: onSwipe,
+    preventScrollOnSwipe: swipeDirection === 'Left' || swipeDirection === 'Right',
   });
 
   if (slideshow.length === 0) {
@@ -381,8 +390,8 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
           <OneColumn>
             <SlideshowLink to={slideshow[activeSlide].path} out={!animationComplete}>
               <SlideshowInfo ref={slideText}>
-                <h1>{slideshow[activeSlide].title}</h1>
-                <p>{slideshow[activeSlide].metaDescription}</p>
+                <SlideshowName>{slideshow[activeSlide].title}</SlideshowName>
+                <SlideshowDescription>{slideshow[activeSlide].metaDescription}</SlideshowDescription>
               </SlideshowInfo>
             </SlideshowLink>
           </OneColumn>