fix: various misskey compat fixes (#90)

feat: bookmark support for misskey feat: renote support for misskey feat(misskey): follow logic feat: convo threads work with misskey perf: replace all carousels refactor: tidy up timeline components fix: misskey notes not being saved as local bookmarks fix(misskey): context chain in post details page fix: router issue on index page fix: content section stuck loading (#84) chore: collapse >10 custom emojis style: search category selection widget
suvam0451 · Jul 31, 2024 · af81efe · af81efe
1 parent 8348641
commit af81efe
Show file tree

Hide file tree

Showing 124 changed files with 3,228 additions and 1,879 deletions.
diff --git a/apps/mobile/app/(tabs)/discover/trending-links.tsx b/apps/mobile/app/(tabs)/discover/trending-links.tsx
diff --git a/apps/mobile/components/TimelineHeader.tsx b/apps/mobile/components/TimelineHeader.tsx
@@ -2,7 +2,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import { Text } from '@rneui/themed';
 import { APP_THEME } from '../styles/AppTheme';
-import { useTimelineController } from '../states/useTimelineController';
+import { useTimelineController } from './common/timeline/api/useTimelineController';
 import TimelineWidgetModal from './widgets/timelines/core/Modal';
 import { useActivityPubRestClientContext } from '../states/useActivityPubRestClient';
 

diff --git a/apps/mobile/components/common/explanation/ExplainOutput.tsx b/apps/mobile/components/common/explanation/ExplainOutput.tsx
@@ -1,6 +1,7 @@
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { Text } from '@rneui/themed';
+import { APP_FONT } from '../../../styles/AppTheme';
+import { APP_FONTS } from '../../../styles/AppFonts';
 
 type Props = {
 	fromLang: string;
@@ -21,7 +22,7 @@ function ExplainOutput({ text, fromLang, toLang, additionalInfo }: Props) {
 	return (
 		<View
 			style={{
-				backgroundColor: '#2E2E2E',
+				backgroundColor: '#2a2a2a',
 				paddingLeft: 8,
 				paddingRight: 8,
 				paddingTop: 4,
@@ -53,8 +54,8 @@ function ExplainOutput({ text, fromLang, toLang, additionalInfo }: Props) {
 					<View>
 						<Text
 							style={{
-								color: '#bb86fc',
-								fontFamily: 'Montserrat-Bold',
+								color: 'rgba(187,134,252,0.87)',
+								fontFamily: APP_FONTS.INTER_600_SEMIBOLD,
 							}}
 						>
 							{` ${fromLang} -> ${toLang}`}
@@ -64,17 +65,24 @@ function ExplainOutput({ text, fromLang, toLang, additionalInfo }: Props) {
 				<View>
 					<Text
 						style={{
-							color: '#ffffff38',
-							flex: 1,
+							color: APP_FONT.DISABLED,
 							textAlign: 'right',
-							fontSize: 14,
+							fontFamily: APP_FONTS.INTER_500_MEDIUM,
+							fontSize: 13,
 						}}
 					>
 						{additionalInfo}
 					</Text>
 				</View>
 			</View>
-			<Text style={{ color: '#ffffff87' }}>{text}</Text>
+			<Text
+				style={{
+					color: APP_FONT.MONTSERRAT_BODY,
+					fontFamily: APP_FONTS.INTER_400_REGULAR,
+				}}
+			>
+				{text}
+			</Text>
 		</View>
 	);
 }

diff --git a/apps/mobile/components/common/media/MediaItem.tsx b/apps/mobile/components/common/media/MediaItem.tsx
@@ -1,6 +1,5 @@
 import { Dimensions, View } from 'react-native';
-import Carousel from 'react-native-reanimated-carousel';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useMemo } from 'react';
 import { MediaAttachmentInterface } from '@dhaaga/shared-abstraction-activitypub';
 import MediaService from '../../../services/media.service';
 import {
@@ -15,6 +14,7 @@ import {
 	AppVideoComponent,
 	CarousalIndicatorOverlay,
 } from './_shared';
+import AppImageCarousel from './fragments/AppImageCarousel';
 
 type ImageCarousalProps = {
 	attachments: MediaAttachmentInterface[];
@@ -42,10 +42,12 @@ const TimelineMediaRendered = memo(function Foo({
 			case 'image':
 			case 'image/jpeg':
 			case 'image/png':
-			case 'image/webp': {
+			case 'image/webp':
+			case 'gifv':
+			case 'image/gif': {
 				return (
 					<AppImageComponent
-						url={attachment.getPreviewUrl()}
+						url={attachment.getUrl()}
 						blurhash={attachment.getBlurHash()}
 					/>
 				);
@@ -62,18 +64,8 @@ const TimelineMediaRendered = memo(function Foo({
 					/>
 				);
 			}
-			case 'gifv':
-			case 'image/gif': {
-				return (
-					<AppVideoComponent
-						type={'gifv'}
-						url={attachment.getUrl()}
-						height={CalculatedHeight}
-						loop
-					/>
-				);
-			}
-			case 'audio': {
+			case 'audio':
+			case 'audio/mpeg': {
 				return <AppAudioComponent url={attachment.getUrl()} />;
 			}
 			default: {
@@ -103,28 +95,6 @@ const TimelineMediaRendered = memo(function Foo({
 });
 
 const MediaItem = memo(function Foo({ attachments }: ImageCarousalProps) {
-	const [CarousalData, setCarousalData] = useState({
-		index: 0,
-		total: attachments?.length,
-	});
-
-	useEffect(() => {
-		setCarousalData({
-			index: 0,
-			total: attachments?.length,
-		});
-	}, [attachments]);
-
-	const onCarousalItemChanged = useCallback(
-		(e: any) => {
-			setCarousalData({
-				index: e,
-				total: attachments?.length,
-			});
-		},
-		[attachments],
-	);
-
 	const CalculatedHeight = useMemo(() => {
 		if (!attachments) return MEDIA_CONTAINER_MAX_HEIGHT;
 		return MediaService.calculateHeightForMediaContentCarousal(attachments, {
@@ -145,27 +115,15 @@ const MediaItem = memo(function Foo({ attachments }: ImageCarousalProps) {
 	}
 	return (
 		<View style={{ marginTop: MARGIN_TOP, flex: 1 }}>
-			<Carousel
-				width={Dimensions.get('window').width}
-				height={CalculatedHeight}
-				data={attachments}
-				scrollAnimationDuration={160}
-				onSnapToItem={(index: number) => {
-					onCarousalItemChanged(index);
-				}}
-				panGestureHandlerProps={{
-					activeOffsetX: [-10, 10], // Enable horizontal panning
-					failOffsetY: [-5, 5], // Limit vertical movement to fail the gesture
-				}}
-				pagingEnabled={true}
-				renderItem={(o: any) => (
-					<TimelineMediaRendered
-						attachment={o.item}
-						CalculatedHeight={CalculatedHeight}
-						totalCount={CarousalData.total}
-						index={CarousalData.index}
-					/>
-				)}
+			<AppImageCarousel
+				timelineCacheId={'1'}
+				calculatedHeight={CalculatedHeight}
+				items={attachments.map((o) => ({
+					altText: o.getAltText(),
+					src: o.getPreviewUrl(),
+					type: o.getType(),
+					blurhash: o.getBlurHash(),
+				}))}
 			/>
 		</View>
 	);

diff --git a/apps/mobile/components/common/media/_shared.tsx b/apps/mobile/components/common/media/_shared.tsx
@@ -8,14 +8,18 @@ import { APP_FONT } from '../../../styles/AppTheme';
 import { Dialog } from '@rneui/themed';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import { Text } from '@rneui/themed';
-// import { Audio } from 'expo-av';
 import AntDesign from '@expo/vector-icons/AntDesign';
+import { ErrorBoundary } from 'react-error-boundary';
+import { APP_FONTS } from '../../../styles/AppFonts';
 
 type Props = {
 	url?: string;
 	blurhash?: string;
 };
 
+const DEFAULT_BLURHASH =
+	'|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[';
+
 export const AppImageComponent = memo(function Foo({ url, blurhash }: Props) {
 	return (
 		// @ts-ignore
@@ -24,10 +28,20 @@ export const AppImageComponent = memo(function Foo({ url, blurhash }: Props) {
 				flex: 1,
 				width: MEDIA_CONTAINER_WIDTH,
 				borderRadius: 16,
-				opacity: 0.75,
+				opacity: 0.87,
+			}}
+			placeholder={{ blurhash: blurhash || DEFAULT_BLURHASH }}
+			source={{
+				uri: url,
+				blurhash: blurhash || DEFAULT_BLURHASH,
+				width: MEDIA_CONTAINER_WIDTH,
+			}}
+			transition={{
+				effect: 'flip-from-right',
+				duration: 120,
+				timing: 'ease-in',
 			}}
-			placeholder={{ blurhash }}
-			source={{ uri: url }}
+			// autoplay={false}
 		/>
 	);
 });
@@ -92,7 +106,7 @@ export const AppVideoComponent = memo(function Foo({
 }) {
 	const ref = useRef(null);
 	const [isPlaying, setIsPlaying] = useState(true);
-	let modifiedUrl = url.replace('?sensitive=true', '');
+	let modifiedUrl = url?.replace('?sensitive=true', '');
 
 	const player = useVideoPlayer(modifiedUrl, (player) => {
 		if (loop) {
@@ -115,18 +129,25 @@ export const AppVideoComponent = memo(function Foo({
 
 	return (
 		<View style={[styles.contentContainer, { height }]}>
-			<VideoView
-				ref={ref}
-				style={{
-					width: MEDIA_CONTAINER_WIDTH,
-					height,
-					borderRadius: 8,
-				}}
-				player={player}
-				allowsFullscreen
-				allowsPictureInPicture
-				// nativeControls={type !== 'gifv'}
-			/>
+			<ErrorBoundary
+				fallback={
+					<View>
+						<Text style={{ fontFamily: APP_FONTS.INTER_600_SEMIBOLD }}>
+							Failed to render video. Url: ${modifiedUrl}
+						</Text>
+					</View>
+				}
+			>
+				<VideoView
+					ref={ref}
+					style={{
+						width: MEDIA_CONTAINER_WIDTH,
+						height,
+						borderRadius: 8,
+					}}
+					player={player}
+				/>
+			</ErrorBoundary>
 		</View>
 	);
 });
@@ -225,9 +246,13 @@ export const AltTextOverlay = memo(function Foo({
 export const CarousalIndicatorOverlay = memo(function Foo({
 	index,
 	totalCount,
+	top,
+	right,
 }: {
 	index?: number;
 	totalCount?: number;
+	top?: number;
+	right?: number;
 }) {
 	const CarousalIndicators = useMemo(() => {
 		if (index === undefined || totalCount === undefined) return <View></View>;
@@ -268,8 +293,8 @@ export const CarousalIndicatorOverlay = memo(function Foo({
 			<View
 				style={{
 					position: 'absolute',
-					left: '100%',
-					top: 0,
+					right: right || 0,
+					top: top || 0,
 				}}
 			>
 				<View