feat(inlineplayer): add inline player support

.commitlintrc.js

@@ -24,6 +24,7 @@ module.exports = {
         'e2e',
         'signing',
         'entitlement',
+        'inlineplayer',
         'config',
         'epg',
       ],

src/components/ConfigSelect/__snapshots__/ConfigSelect.test.tsx.snap

@@ -38,6 +38,12 @@ exports[`<ConfigSelect> > renders and matches snapshot 1`] = `
         >
           test--dev
         </option>
+        <option
+          class="_option_bb73c6"
+          value="test--inline-player"
+        >
+          test--inline-player
+        </option>
         <option
           class="_option_bb73c6"
           value="test--no-cleeng"

src/components/Filter/Filter.tsx

@@ -3,20 +3,22 @@ import { useTranslation } from 'react-i18next';
 
 import Dropdown from '../Dropdown/Dropdown';
 import Button from '../Button/Button';
-import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint';
 
 import styles from './Filter.module.scss';
 
+import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
+
 type Props = {
   name: string;
   value: string;
   valuePrefix?: string;
   defaultLabel: string;
   options: string[];
+  forceDropdown?: boolean;
   setValue: (value: string) => void;
 };
 
-const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, valuePrefix = '' }) => {
+const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, valuePrefix = '', forceDropdown = false }) => {
   const { t } = useTranslation('common');
   const breakpoint: Breakpoint = useBreakpoint();
 
@@ -25,7 +27,7 @@ const Filter: FC<Props> = ({ name, value, defaultLabel, options, setValue, value
   }
   const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => setValue(event.target.value);
 
-  const showFilterRow = breakpoint >= Breakpoint.md && options.length < 6;
+  const showFilterRow = !forceDropdown && breakpoint >= Breakpoint.md && options.length < 6;
 
   return (
     <Fragment>

src/components/Player/Player.tsx

@@ -24,6 +24,7 @@ type Props = {
   onFirstFrame?: () => void;
   onPlaylistItemCallback?: (item: PlaylistItem) => Promise<undefined | PlaylistItem>;
   startTime?: number;
+  autostart?: boolean;
 };
 
 const Player: React.FC<Props> = ({
@@ -40,6 +41,7 @@ const Player: React.FC<Props> = ({
   onPlaylistItemCallback,
   feedId,
   startTime = 0,
+  autostart,
 }: Props) => {
   const playerElementRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<JWPlayer>();
@@ -135,7 +137,7 @@ const Player: React.FC<Props> = ({
         width: '100%',
         height: '100%',
         mute: false,
-        autostart: true,
+        autostart,
         repeat: false,
       });
 
@@ -150,7 +152,7 @@ const Player: React.FC<Props> = ({
     if (libLoaded) {
       initializePlayer();
     }
-  }, [libLoaded, item, detachEvents, attachEvents, playerId, setPlayer]);
+  }, [libLoaded, item, detachEvents, attachEvents, playerId, setPlayer, autostart]);
 
   useEffect(() => {
     return () => {

src/components/VideoDetails/VideoDetails.module.scss

@@ -196,7 +196,3 @@
   border: 3px solid white;
   border-radius: 100%;
 }
-
-.related {
-  position: relative;
-}

src/components/VideoDetails/VideoDetails.tsx

@@ -6,9 +6,7 @@ import styles from './VideoDetails.module.scss';
 import CollapsibleText from '#src/components/CollapsibleText/CollapsibleText';
 import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
 import Image from '#src/components/Image/Image';
-import type { ImageData } from '#types/playlist';
-
-type PosterMode = 'fading' | 'normal';
+import type { ImageData, PosterMode } from '#types/playlist';
 
 type Props = {
   title: string;
@@ -21,22 +19,19 @@ type Props = {
   shareButton: React.ReactNode;
   favoriteButton: React.ReactNode;
   trailerButton: React.ReactNode;
-  childrenPadding?: boolean;
 };
 
-const VideoDetails: React.FC<Props> = ({
+const VideoDetails: React.VFC<Props> = ({
   title,
   description,
   primaryMetadata,
   secondaryMetadata,
   image,
   posterMode,
-  children,
   startWatchingButton,
   shareButton,
   favoriteButton,
   trailerButton,
-  childrenPadding = true,
 }) => {
   const breakpoint: Breakpoint = useBreakpoint();
   const isMobile = breakpoint === Breakpoint.xs;
@@ -65,7 +60,6 @@ const VideoDetails: React.FC<Props> = ({
         </div>
         <Image className={classNames(styles.poster, styles[posterMode])} image={image} alt={title} width={1280} />
       </div>
-      {!!children && <div className={classNames(styles.related, { [styles.mainPadding]: childrenPadding })}>{children}</div>}
     </div>
   );
 };

src/components/VideoDetailsInline/VideoDetailsInline.module.scss

@@ -0,0 +1,115 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+@use '../../styles/mixins/responsive';
+@use '../../styles/mixins/typography';
+
+.details {
+  padding: 24px 0;
+  color: var(--primary-color);
+  font-family: var(--body-font-family);
+  font-weight: 400;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
+
+  @include responsive.desktop-small-only() {
+    padding: 24px 0;
+  }
+
+  @include responsive.tablet-only() {
+    padding: 24px 0 0;
+  }
+
+  @include responsive.mobile-only() {
+    padding: variables.$base-spacing 0 0;
+  }
+}
+
+.inlinePlayerMetadata {
+  display: flex;
+  align-items: center;
+  margin-bottom: variables.$base-spacing;
+  padding-bottom: variables.$base-spacing;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+
+  > button {
+    min-width: fit-content;
+    margin-left: 8px;
+  }
+
+  @include responsive.mobile-and-small-tablet() {
+    flex-wrap: wrap;
+
+    > button:nth-last-child(3) {
+      flex: 1 1 100%;
+      margin: 0 0 8px 0;
+    }
+
+    > button:nth-last-child(2) {
+      flex: 0 0 calc(50% - 4px);
+      margin: 0 4px 0 0;
+    }
+
+    > button:nth-last-child(1) {
+      flex: 0 0 calc(50% - 4px);
+      margin: 0 0 0 4px;
+    }
+  }
+}
+
+.title {
+  @include typography.video-title-base;
+  margin-bottom: variables.$base-spacing;
+
+  @include responsive.mobile-only() {
+    margin-bottom: 0;
+  }
+}
+
+div.title {
+  font-weight: initial;
+}
+
+.primaryMetadata {
+  flex: 1;
+  flex-basis: 100%;
+  margin-right: auto;
+  margin-bottom: 0;
+  font-size: 16px;
+  line-height: 18px;
+  letter-spacing: 0.15px;
+
+  > div.live {
+    display: inline-block;
+    margin-right: 8px;
+
+    @include responsive.mobile-only() {
+      margin: 2px 4px 0 0;
+      padding: 2px 4px;
+    }
+  }
+
+  @include responsive.mobile-and-small-tablet() {
+    margin-bottom: variables.$base-spacing;
+    font-size: 14px;
+  }
+}
+
+.secondaryMetadata {
+  margin-top: 24px;
+  margin-bottom: 8px;
+  font-size: 20px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+
+  @include responsive.mobile-only() {
+    margin: 4px 0;
+    font-size: 18px;
+  }
+}
+
+.description {
+  min-height: 21px;
+  margin-bottom: 24px;
+  font-size: 18px;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+}

src/components/VideoDetailsInline/VideoDetailsInline.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Tag from '../Tag/Tag';
+
+import styles from './VideoDetailsInline.module.scss';
+
+import CollapsibleText from '#src/components/CollapsibleText/CollapsibleText';
+import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
+
+type Props = {
+  title: string | React.ReactNode;
+  description: string;
+  primaryMetadata: React.ReactNode;
+  shareButton: React.ReactNode;
+  favoriteButton: React.ReactNode;
+  trailerButton: React.ReactNode;
+  live?: boolean;
+};
+
+const VideoDetailsInline: React.FC<Props> = ({ title, description, primaryMetadata, shareButton, favoriteButton, trailerButton, live }) => {
+  const { t } = useTranslation('common');
+  const breakpoint: Breakpoint = useBreakpoint();
+  const isMobile = breakpoint === Breakpoint.xs;
+
+  const TitleComponent = typeof title === 'string' ? 'h2' : 'div';
+
+  return (
+    <div className={styles.details} data-testid="video-details-inline">
+      <TitleComponent className={styles.title}>{title}</TitleComponent>
+      <div className={styles.inlinePlayerMetadata}>
+        <div className={styles.primaryMetadata}>
+          {live && (
+            <Tag className={styles.live} isLive>
+              {t('live')}
+            </Tag>
+          )}
+          {primaryMetadata}
+        </div>
+        {trailerButton}
+        {favoriteButton}
+        {shareButton}
+      </div>
+      <CollapsibleText text={description} className={styles.description} maxHeight={isMobile ? 60 : 'none'} />
+    </div>
+  );
+};
+
+export default VideoDetailsInline;