Merge pull request #248 from gmsgowtham/feat/video-bookmarks

feat(minor): enable video bookmarks

src/components/Appbar/HomeAppbar.tsx

@@ -55,16 +55,17 @@ const HomeAppbar: FunctionComponent<props> = ({
 							onPress={onSearchItemPress}
 						/>
 					</Tooltip>
-					<Tooltip title="Show Bookmarks">
-						<Appbar.Action
-							animated={false}
-							icon="bookmark-outline"
-							onPress={onBookmarksItemPress}
-						/>
-					</Tooltip>
 				</Fragment>
 			) : null}
 
+			<Tooltip title="Show Bookmarks">
+				<Appbar.Action
+					animated={false}
+					icon="bookmark-outline"
+					onPress={onBookmarksItemPress}
+				/>
+			</Tooltip>
+
 			<Tooltip title="Settings">
 				<Appbar.Action
 					animated={false}

src/components/ArticleFeedItem/index.tsx

@@ -57,7 +57,7 @@ const ArticleFeedItem: FunctionComponent<ArticleFeedItemProps> = ({
 			<Card.Content style={styles.content}>
 				<Text variant="titleLarge">{title}</Text>
 				<TagList tags={tags} />
-				<Text variant="bodyMedium">{description}</Text>
+				{description ? <Text variant="bodyMedium">{description}</Text> : null}
 			</Card.Content>
 			<Card.Title
 				title={authorTitle}

src/components/VideoFeedItem/index.tsx

@@ -14,15 +14,7 @@ interface VideoFeedItemProps {
 	author: author;
 	duration: string;
 	coverImageUri: string;
-	url: string;
-	source: string;
-	onItemClick: (
-		id: number,
-		title: string,
-		url: string,
-		source: string,
-		cover: string,
-	) => void;
+	onItemClick: (id: number) => void;
 }
 
 const VideoFeedItem: FunctionComponent<VideoFeedItemProps> = ({
@@ -31,12 +23,10 @@ const VideoFeedItem: FunctionComponent<VideoFeedItemProps> = ({
 	author,
 	coverImageUri,
 	duration,
-	url,
-	source,
 	onItemClick,
 }) => {
 	const onClick = () => {
-		onItemClick(id, title, url, source, coverImageUri);
+		onItemClick(id);
 	};
 
 	return (
@@ -48,7 +38,7 @@ const VideoFeedItem: FunctionComponent<VideoFeedItemProps> = ({
 						style={styles.cover}
 						resizeMode={FastImage.resizeMode.cover}
 					/>
-					<Chip elevated icon="access-time-filled" style={styles.playChip}>
+					<Chip elevated icon="videocam" style={styles.playChip}>
 						{duration}
 					</Chip>
 				</View>

src/components/VideoPlayer/TopBar.tsx

@@ -5,16 +5,20 @@ import { Appbar, MD3Theme, Tooltip } from "react-native-paper";
 
 interface TopBarProps {
 	theme: MD3Theme;
+	isBookmarked: boolean;
 	onBackActionPress: () => void;
 	onShareActionPress: () => void;
 	onOpenInBrowserActionPress: () => void;
+	onBookmarkActionPress: () => void;
 }
 
 const TopBar: FunctionComponent<TopBarProps> = ({
 	theme,
+	isBookmarked,
 	onBackActionPress,
 	onShareActionPress,
 	onOpenInBrowserActionPress,
+	onBookmarkActionPress,
 }) => (
 	<View>
 		<Appbar.Header theme={theme} style={styles.appbar}>
@@ -29,6 +33,15 @@ const TopBar: FunctionComponent<TopBarProps> = ({
 					theme={theme}
 				/>
 			</Tooltip>
+			<Tooltip title="Bookmark">
+				<Appbar.Action
+					icon={isBookmarked ? "bookmark-added" : "bookmark-add"}
+					onPress={onBookmarkActionPress}
+					accessibilityHint="Bookmark"
+					accessibilityLabel="Bookmark"
+					theme={theme}
+				/>
+			</Tooltip>
 			<Tooltip title="Open in browser">
 				<Appbar.Action
 					icon="launch"

src/components/VideoPlayer/index.tsx

@@ -26,8 +26,10 @@ interface VideoPlayerProps {
 	title: string;
 	cover: string;
 	theme: MD3Theme;
+	isBookmarked: boolean;
 	onBackActionPress: () => void;
 	onShareActionPress: () => void;
+	onBookmarkActionPress: () => void;
 	onOpenInBrowserActionPress: () => void;
 }
 
@@ -36,8 +38,10 @@ const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
 	title,
 	cover,
 	theme,
+	isBookmarked,
 	onBackActionPress,
 	onShareActionPress,
+	onBookmarkActionPress,
 	onOpenInBrowserActionPress,
 }) => {
 	const [videoData, setVideoData] = useState<OnLoadData | undefined>();
@@ -143,9 +147,11 @@ const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
 					>
 						<TopBar
 							theme={theme}
+							isBookmarked={isBookmarked}
 							onBackActionPress={onBackActionPress}
 							onShareActionPress={onShareActionPress}
 							onOpenInBrowserActionPress={onOpenInBrowserActionPress}
+							onBookmarkActionPress={onBookmarkActionPress}
 						/>
 						<View style={styles.playButtonContainer}>
 							<IconButton

src/mmkv/bookmark.ts

@@ -5,7 +5,7 @@ import { logError } from "../utils/log";
 
 const BOOKMARKS_KEY = "udev_bookmarks";
 
-export interface PostBookmarkItem {
+export type ArticleBookmarkItem = {
 	id: number;
 	title: string;
 	url: string;
@@ -14,10 +14,25 @@ export interface PostBookmarkItem {
 		imageUri: string;
 	};
 	cover: string | null;
-	type: string;
+	type: "article";
 	tags: string[];
 	date: string;
-}
+};
+
+export type VideoBookmarkItem = {
+	id: number;
+	title: string;
+	url: string;
+	source: string;
+	author: {
+		name: string;
+	};
+	cover: string;
+	type: "video";
+	duration: string;
+};
+
+export type PostBookmarkItem = ArticleBookmarkItem | VideoBookmarkItem;
 
 interface BookmarkResponse {
 	success: boolean;

src/router/types.ts

@@ -28,6 +28,10 @@ export type StackParamList = {
 		url: string;
 		source: string;
 		cover: string;
+		author: {
+			name: string;
+		};
+		duration: string;
 	};
 	About: undefined;
 	Settings: undefined;

src/screens/Article/index.tsx

@@ -31,6 +31,7 @@ import NetworkBanner from "../../components/NetworkBanner";
 import ArticleSkeleton from "../../components/Skeleton/ArticleSkeleton";
 import { withAnimated } from "../../hoc/withAnimated";
 import {
+	ArticleBookmarkItem,
 	isBookmarked,
 	removeBookmark,
 	savePostToBookmarks,
@@ -170,15 +171,15 @@ const ArticleScreen: FunctionComponent<Props> = ({ route, navigation }) => {
 				id,
 				title,
 				url,
-				type: article.type_of,
+				type: "article",
 				author: {
 					name: article.user.name,
 					imageUri: article.user.profile_image_90,
 				},
 				cover: article.cover_image,
 				tags: article.tags,
 				date: article.readable_publish_date,
-			});
+			} as ArticleBookmarkItem);
 			if (!response.success) {
 				// reset state
 				setIsPostBookmarked(false);

src/screens/Bookmarks/index.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-native-paper";
 import ArticleFeedItem from "../../components/ArticleFeedItem";
 import FloatingSvg from "../../components/Svg/Floating";
+import VideoFeedItem from "../../components/VideoFeedItem";
 import { PostBookmarkItem, getBookmarks } from "../../mmkv/bookmark";
 import { StackParamList } from "../../router/types";
 
@@ -30,21 +31,39 @@ const BookmarksScreen: FunctionComponent<BookmarksScreenProps> = ({
 	const hideDialog = () => setDialogVisible(false);
 
 	const onItemClick = (id: number) => {
-		const article = bookmarks.find((b) => b.id === id);
-		if (!article) return;
+		const post = bookmarks.find((b) => b.id === id);
+		if (!post) return;
 
-		navigation.navigate("Article", {
-			id: article.id,
-			title: article.title,
-			url: article.url,
-			cover: article.cover ?? "",
-			author: {
-				name: article.author.name,
-				image: article.author.imageUri,
-			},
-			tags: article.tags,
-			date: article.date,
-		});
+		switch (post.type) {
+			case "article":
+				navigation.navigate("Article", {
+					id: post.id,
+					title: post.title,
+					url: post.url,
+					cover: post.cover ?? "",
+					author: {
+						name: post.author.name,
+						image: post.author.imageUri,
+					},
+					tags: post.tags,
+					date: post.date,
+				});
+				break;
+			case "video":
+				navigation.navigate("Video", {
+					id: post.id,
+					title: post.title,
+					url: post.url,
+					source: post.source,
+					cover: post.cover,
+					author: {
+						name: post.author.name,
+					},
+					duration: post.duration,
+				});
+
+				break;
+		}
 	};
 
 	useEffect(() => {
@@ -60,21 +79,39 @@ const BookmarksScreen: FunctionComponent<BookmarksScreenProps> = ({
 	const renderItem: ListRenderItem<PostBookmarkItem> = ({
 		item,
 	}: { item: PostBookmarkItem }) => {
-		return (
-			<ArticleFeedItem
-				id={item.id}
-				title={item.title}
-				author={{
-					name: item.author.name,
-					imageUri: item.author.imageUri,
-				}}
-				coverImageUri={item.cover}
-				description=""
-				dateReadable={item.date}
-				onItemClick={onItemClick}
-				tags={item.tags}
-			/>
-		);
+		switch (item.type) {
+			case "article": {
+				return (
+					<ArticleFeedItem
+						id={item.id}
+						title={item.title}
+						author={{
+							name: item.author.name,
+							imageUri: item.author.imageUri,
+						}}
+						coverImageUri={item.cover}
+						description=""
+						dateReadable={item.date}
+						onItemClick={onItemClick}
+						tags={item.tags}
+					/>
+				);
+			}
+			case "video": {
+				return (
+					<VideoFeedItem
+						id={item.id}
+						title={item.title}
+						duration={item.duration}
+						coverImageUri={item.cover}
+						author={{
+							name: item.author.name,
+						}}
+						onItemClick={onItemClick}
+					/>
+				);
+			}
+		}
 	};
 
 	return (