feat(home): add watchhistory to home content

.commitlintrc.js

@@ -8,6 +8,7 @@ module.exports = {
         'playlist',
         'videodetail',
         'search',
+        'watchhistory',
       ],
     ],
   },

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "jira-plugin.workingProject": ""
+}

README.md

@@ -67,6 +67,7 @@ The allowed scopes are:
 - playlist
 - videodetail
 - search
+- watchhistory
 
 ### Subject
 

src/containers/Cinema/Cinema.tsx

@@ -28,7 +28,10 @@ const Cinema: React.FC<Props> = ({ item, onPlay, onPause }: Props) => {
 
     return {
       mediaid: item.mediaid,
-      position: player.getPosition(),
+      title: item.title,
+      tags: item.tags,
+      duration: player.getDuration(),
+      progress: player.getPosition(),
     } as WatchHistoryItem;
   };
   const watchHistory = watchHistoryStore.useState((state) => state.watchHistory);
@@ -41,10 +44,9 @@ const Cinema: React.FC<Props> = ({ item, onPlay, onPause }: Props) => {
       player.setup({ file, image: item.image, title: item.title, autostart: 'viewable' });
       player.on('ready', () => {
         const { watchHistory } = watchHistoryStore.getRawState();
-        const position = watchHistory.find((historyItem) => historyItem.mediaid === item.mediaid)?.position;
-
-        if (position) {
-          setTimeout(() => player.seek(position), 1000);
+        const progress = watchHistory.find((historyItem) => historyItem.mediaid === item.mediaid)?.progress;
+        if (progress) {
+          setTimeout(() => player.seek(progress), 1000);
         }
       });
       player.on('play', () => onPlay && onPlay());

src/hooks/usePlaylist.ts

@@ -16,7 +16,7 @@ export type UsePlaylistResult<TData = Playlist, TError = unknown> = UseBaseQuery
 
 export default function usePlaylist(playlistId: string, relatedMediaId?: string): UsePlaylistResult {
   return useQuery(['playlist', playlistId, relatedMediaId], () => getPlaylistById(playlistId, relatedMediaId), {
-    enabled: !!playlistId,
+    enabled: !!playlistId && playlistId !== 'continue-watching',
     placeholderData,
   });
 }

src/screens/Home/Home.tsx

@@ -7,6 +7,8 @@ import type { Config, Content } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
 import classNames from 'classnames';
 
+import { watchHistoryStore } from '../../stores/WatchHistoryStore';
+import { contentWithPersonalPlaylists } from '../../utils/collection';
 import useBlurImageUpdater from '../../hooks/useBlurImageUpdater';
 import { featuredTileBreakpoints, tileBreakpoints } from '../../components/Shelf/Shelf';
 import Shelf from '../../containers/Shelf/Shelf';
@@ -35,7 +37,8 @@ const Home = (): JSX.Element => {
   const config: Config = useContext(ConfigContext);
   const breakpoint = useBreakpoint();
   const listRef = useRef<List>() as React.MutableRefObject<List>;
-  const content: Content[] = config ? config.content : [];
+  const watchHistory = watchHistoryStore.useState((state) => state.watchHistory);
+  const content: Content[] = contentWithPersonalPlaylists(config?.content, watchHistory);
 
   const { data: { playlist } = { playlist: [] } } = usePlaylist(content[0]?.playlistId);
   const updateBlurImage = useBlurImageUpdater(playlist);

src/stores/WatchHistoryStore.ts

@@ -4,7 +4,7 @@ import type { WatchHistoryItem } from 'types/watchHistory';
 
 import * as persist from '../utils/persist';
 
-const PERSIST_KEY_WATCH_HISTORY = `watchhistory${window.configId ? `-${window.configId}` : ''}`;
+const PERSIST_KEY_WATCH_HISTORY = `history${window.configId ? `-${window.configId}` : ''}`;
 
 type WatchHistoryStore = {
   watchHistory: WatchHistoryItem[];

src/utils/collection.ts

@@ -1,5 +1,6 @@
-import type { Config } from 'types/Config';
+import type { Config, Content } from 'types/Config';
 import type { Playlist, PlaylistItem } from 'types/playlist';
+import type { WatchHistoryItem } from 'types/watchHistory';
 
 const getFiltersFromConfig = (config: Config, playlistId: string): string[] => {
   const menuItem = config.menu.find((item) => item.playlistId === playlistId);
@@ -8,6 +9,23 @@ const getFiltersFromConfig = (config: Config, playlistId: string): string[] => {
   return filters || [];
 };
 
+const contentWithPersonalPlaylists = (
+  content: Content[] | undefined,
+  watchHistory: WatchHistoryItem[] | null,
+): Content[] => {
+  if (!content) return [];
+
+  if (watchHistory) {
+    if (!content.some((item) => item.playlistId === 'continue-watching')) {
+      content.splice(1, 1, { playlistId: 'continue-watching' });
+    }
+  } else {
+    content.filter((item) => item.playlistId !== 'continue-watching');
+  }
+
+  return content;
+};
+
 const filterPlaylist = (playlist: PlaylistItem[], filter: string) => {
   if (!filter) return playlist;
 
@@ -46,4 +64,11 @@ const generatePlaylistPlaceholder = (playlistLength: number = 15): Playlist => (
   ),
 });
 
-export { getFiltersFromConfig, filterPlaylist, chunk, findPlaylistImageForWidth, generatePlaylistPlaceholder };
+export {
+  getFiltersFromConfig,
+  contentWithPersonalPlaylists,
+  filterPlaylist,
+  chunk,
+  findPlaylistImageForWidth,
+  generatePlaylistPlaceholder,
+};

types/playlist.d.ts

@@ -48,3 +48,10 @@ export type Playlist = {
   playlist: PlaylistItem[];
   title: string;
 };
+
+export type Media = {
+  description?: string;
+  feed_instance_id: string;
+  kind: string;
+  playlist: PlaylistItem[];
+};

types/watchHistory.d.ts

@@ -1,4 +1,7 @@
 export type WatchHistoryItem = {
   mediaid: string;
-  position: number;
+  title: string;
+  tags: string;
+  duration: number;
+  progress: number;
 };