feat(videodetail): add card overlay for currently playing

src/components/Card/Card.module.scss

@@ -72,6 +72,33 @@
   border-radius: 4px;
   transition: box-shadow 0.1s ease;
   box-shadow: 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
+
+  &.current::after {
+    content: '';
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.54);
+  }
+}
+
+.currentLabel {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 20px;
+  font-family: var(--body-font-family);
 }
 
 $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));

src/components/Card/Card.tsx

@@ -17,6 +17,8 @@ type CardProps = {
   featured?: boolean;
   disabled?: boolean;
   loading?: boolean;
+  isCurrent?: boolean;
+  currentLabel?: string;
 };
 
 function Card({
@@ -30,10 +32,17 @@ function Card({
   featured = false,
   disabled = false,
   loading = false,
+  isCurrent = false,
+  currentLabel,
 }: CardProps): JSX.Element {
   const { t } = useTranslation('common');
-  const cardClassName = classNames(styles.card, { [styles.featured]: featured, [styles.disabled]: disabled });
-  const posterClassNames = classNames(styles.poster, styles[`aspect${posterAspect.replace(':', '')}`]);
+  const cardClassName = classNames(styles.card, {
+    [styles.featured]: featured,
+    [styles.disabled]: disabled,
+  });
+  const posterClassNames = classNames(styles.poster, styles[`aspect${posterAspect.replace(':', '')}`], {
+    [styles.current]: isCurrent,
+  });
   const metaData = () => {
     if (seriesId) {
       return <div className={styles.tag}>Series</div>;
@@ -61,6 +70,7 @@ function Card({
             {metaData()}
           </div>
         )}
+        {isCurrent && <div className={styles.currentLabel}>{currentLabel}</div>}
       </div>
       {!featured && (
         <div className={styles.titleContainer}>

src/components/CardGrid/CardGrid.tsx

@@ -23,9 +23,19 @@ type CardGridProps = {
   onCardClick: (item: PlaylistItem) => void;
   isLoading: boolean;
   cols?: Breakpoints;
+  currentCardItem?: PlaylistItem;
+  currentCardLabel?: string;
 };
 
-function CardGrid({ playlist, onCardClick, onCardHover, isLoading = false, cols = defaultCols }: CardGridProps) {
+function CardGrid({
+  playlist,
+  onCardClick,
+  onCardHover,
+  isLoading = false,
+  cols = defaultCols,
+  currentCardItem,
+  currentCardLabel,
+}: CardGridProps) {
   const breakpoint: Breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
   const imageSourceWidth = 320 * (window.devicePixelRatio > 1 || isLargeScreen ? 2 : 1);
@@ -48,6 +58,8 @@ function CardGrid({ playlist, onCardClick, onCardHover, isLoading = false, cols
           onClick={() => onCardClick(playlistItem)}
           onHover={typeof onCardHover === 'function' ? () => onCardHover(playlistItem) : undefined}
           loading={isLoading}
+          isCurrent={currentCardItem && currentCardItem.mediaid === mediaid}
+          currentLabel={currentCardLabel}
         />
       </div>
     );

src/i18n/locales/en_US/video.json

@@ -7,5 +7,7 @@
   "start_watching": "Start watching",
   "trailer": "Trailer",
   "copied_url": "Copied url",
-  "watch_trailer": "Watch the trailer"
+  "watch_trailer": "Watch the trailer",
+  "currently_playing": "Currently playing",
+  "current_episode": "Current episode"
 }

src/i18n/locales/nl_NL/video.json

@@ -7,5 +7,7 @@
   "start_watching": "",
   "trailer": "",
   "copied_url": "",
-  "watch_trailer": ""
+  "watch_trailer": "", 
+  "currently_playing": "",
+  "current_episode": ""
 }

src/screens/Movie/Movie.tsx

@@ -1,7 +1,8 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
 
 import PlaylistContainer from '../../containers/Playlist/PlaylistContainer';
 import { useFavorites } from '../../stores/FavoritesStore';
@@ -26,6 +27,7 @@ const Movie = ({
 }: RouteComponentProps<MovieRouteParams>): JSX.Element => {
   const config = useContext(ConfigContext);
   const history = useHistory();
+  const { t } = useTranslation('video');
   const searchParams = new URLSearchParams(location.search);
   const { isLoading, error, data: item } = useMedia(id);
   const { data: trailerItem } = useMedia(item?.trailerId || '');
@@ -107,8 +109,14 @@ const Movie = ({
       >
         {config.recommendationsPlaylist ? (
           <PlaylistContainer playlistId={config.recommendationsPlaylist} relatedMediaId={item.mediaid}>
-            {({ playlist }) => (
-              <CardGrid playlist={playlist.playlist} onCardClick={onCardClick} isLoading={isLoading} />
+            {({ playlist, isLoading }) => (
+              <CardGrid
+                playlist={playlist.playlist}
+                onCardClick={onCardClick}
+                isLoading={isLoading}
+                currentCardItem={item}
+                currentCardLabel={t('currently_playing')}
+              />
             )}
           </PlaylistContainer>
         ) : undefined}

src/screens/Series/Series.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
 import type { RouteComponentProps } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
 
 import CardGrid from '../../components/CardGrid/CardGrid';
 import { useFavorites } from '../../stores/FavoritesStore';
@@ -27,6 +28,7 @@ const Series = ({
 }: RouteComponentProps<SeriesRouteParams>): JSX.Element => {
   const config = useContext(ConfigContext);
   const history = useHistory();
+  const { t } = useTranslation('video');
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
   const { isLoading: playlistIsLoading, error: playlistError, data: seriesPlaylist } = usePlaylist(
     id,
@@ -119,7 +121,15 @@ const Series = ({
         onFavoriteButtonClick={() => (isFavorited ? removeItem(item) : saveItem(item))}
       >
         <PlaylistContainer playlistId={id}>
-          {({ playlist }) => <CardGrid playlist={playlist.playlist} onCardClick={onCardClick} isLoading={false} />}
+          {() => (
+            <CardGrid
+              playlist={seriesPlaylist.playlist}
+              onCardClick={onCardClick}
+              isLoading={isLoading}
+              currentCardItem={item}
+              currentCardLabel={t('current_episode')}
+            />
+          )}
         </PlaylistContainer>
       </VideoComponent>
     </React.Fragment>