feat(watchhistory): add progress indicator to continue watching shelf

src/components/Card/Card.module.scss

@@ -169,3 +169,17 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   background-color: rgba(variables.$black, 0.6);
   border-radius: 4px;
 }
+
+.progressContainer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 5px;
+  background-color: rgba(variables.$black, 0.38);
+}
+
+.progressBar {
+  height: 5px;
+  background-color: var(--primary-color);
+}

src/components/Card/Card.tsx

@@ -13,6 +13,7 @@ type CardProps = {
   duration: number;
   posterSource?: string;
   seriesId?: string;
+  progress?: number;
   posterAspect?: '1:1' | '2:1' | '2:3' | '4:3' | '5:3' | '16:9' | '9:16';
   featured?: boolean;
   disabled?: boolean;
@@ -28,6 +29,7 @@ function Card({
   duration,
   posterSource,
   seriesId,
+  progress,
   posterAspect = '16:9',
   featured = false,
   disabled = false,
@@ -73,6 +75,11 @@ function Card({
           </div>
         )}
         {isCurrent && <div className={styles.currentLabel}>{currentLabel}</div>}
+        {progress ? (
+          <div className={styles.progressContainer}>
+            <div className={styles.progressBar} style={{ width: `${Math.round(progress * 100)}%` }} />
+          </div>
+        ) : null}
       </div>
       {!featured && !disabled && (
         <div className={styles.titleContainer}>

src/components/Shelf/Shelf.tsx

@@ -32,6 +32,7 @@ export type ShelfProps = {
   playlist: Playlist;
   onCardClick: (playlistItem: PlaylistItem) => void;
   onCardHover?: (playlistItem: PlaylistItem) => void;
+  watchHistory?: { [key: string]: number };
   featured?: boolean;
   loading?: boolean;
   error?: unknown;
@@ -43,6 +44,7 @@ const Shelf: React.FC<ShelfProps> = ({
   onCardClick,
   onCardHover,
   title,
+  watchHistory,
   featured = false,
   loading = false,
   error = null,
@@ -108,6 +110,7 @@ const Shelf: React.FC<ShelfProps> = ({
           <Card
             title={item.title}
             duration={item.duration}
+            progress={watchHistory ? watchHistory[item.mediaid] : undefined}
             posterSource={findPlaylistImageForWidth(item, imageSourceWidth)}
             seriesId={item.seriesId}
             onClick={isInView ? () => onCardClick(item) : undefined}

src/screens/Home/Home.tsx

@@ -40,8 +40,9 @@ const Home = (): JSX.Element => {
   const listRef = useRef<List>() as React.MutableRefObject<List>;
   const content: Content[] = config?.content;
 
-  const { getPlaylist: getWatchHistoryPlayist } = useWatchHistory();
-  const watchHistory = getWatchHistoryPlayist();
+  const { getPlaylist: getWatchHistoryPlaylist, getDictionary: getWatchHistoryDictionary } = useWatchHistory();
+  const watchHistory = getWatchHistoryPlaylist();
+  const watchHistoryDictionary = getWatchHistoryDictionary();
   const watchHistoryLoaded = watchHistoryStore.useState((state) => state.playlistItemsLoaded);
   const favorites = favoritesStore.useState((state) => state.favorites);
 
@@ -72,6 +73,7 @@ const Home = (): JSX.Element => {
                 loading={isLoading}
                 error={error}
                 playlist={playlist}
+                watchHistory={playlist.feedid === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined}
                 onCardClick={onCardClick}
                 onCardHover={onCardHover}
                 title={playlist.title}

src/stores/WatchHistoryStore.ts

@@ -76,12 +76,14 @@ type SaveItemFn = (item: PlaylistItem, getProgress: GetProgressFn) => void;
 type RemoveItemFn = (item: PlaylistItem) => void;
 type HasItemFn = (item: PlaylistItem) => boolean;
 type getPlaylistFn = () => Playlist;
+type getDictionaryFn = () => { [key: string]: number };
 
 type UseWatchHistoryReturn = {
   saveItem: SaveItemFn;
   removeItem: RemoveItemFn;
   hasItem: HasItemFn;
   getPlaylist: getPlaylistFn;
+  getDictionary: getDictionaryFn;
 };
 
 export const useWatchHistory = (): UseWatchHistoryReturn => {
@@ -128,5 +130,13 @@ export const useWatchHistory = (): UseWatchHistoryReturn => {
         .map(({ playlistItem }) => playlistItem),
     } as Playlist);
 
-  return { saveItem, removeItem, hasItem, getPlaylist };
+  const getDictionary = () => {
+    return watchHistory.reduce((dict: { [key: string]: number }, item) => {
+      dict[item.mediaid] = item.progress;
+
+      return dict;
+    }, {});
+  };
+
+  return { saveItem, removeItem, hasItem, getPlaylist, getDictionary };
 };