feat(android): fetch thumbnail image from any webpage link

src/components/settings-modal/account-settings/account-settings.tsx

@@ -4,7 +4,9 @@ import { createAccount, deleteAccount, exportAccount, importAccount, setAccount,
 import stringify from 'json-stringify-pretty-compact';
 import styles from './account-settings.module.css';
 import useAnonModeStore from '../../../stores/use-anon-mode-store';
-import { isAndroid } from '../../../lib/utils/platform';
+import { Capacitor } from '@capacitor/core';
+
+const isAndroid = Capacitor.getPlatform() === 'android';
 
 const AnonMode = () => {
   const { t } = useTranslation();

src/lib/utils/media-utils.ts

@@ -3,6 +3,8 @@ import extName from 'ext-name';
 import { canEmbed } from '../../components/embed';
 import memoize from 'memoizee';
 import { isValidURL } from './url-utils';
+import { Capacitor } from '@capacitor/core';
+import { CapacitorHttp } from '@capacitor/core';
 
 export interface CommentMediaInfo {
   url: string;
@@ -79,12 +81,6 @@ export const getLinkMediaInfo = memoize(
       return { url: link, type: 'image' };
     }
 
-    // non-direct imgbb links can return lower res thumbnails
-    if (url.host === 'ibb.co') {
-      const imageId = url.pathname.split('/')[1];
-      return { url: link, type: 'webpage', thumbnail: `https://i.ibb.co/${imageId}/thumbnail.jpg` };
-    }
-
     try {
       mime = extName(new URL(link).pathname.toLowerCase().replace('/', ''))[0]?.mime;
       if (mime) {
@@ -114,11 +110,19 @@ export const getLinkMediaInfo = memoize(
   { max: 1000 },
 );
 
-// some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
 const fetchWebpageThumbnail = async (url: string): Promise<string | undefined> => {
   try {
-    const response = await fetch(url);
-    const html = await response.text();
+    let html: string;
+    if (Capacitor.isNativePlatform()) {
+      // in the native app, the Capacitor HTTP plugin is used to fetch the thumbnail
+      const response = await CapacitorHttp.get({ url });
+      html = response.data;
+    } else {
+      // some sites have CORS access, from which the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
+      const response = await fetch(url);
+      html = await response.text();
+    }
+
     const parser = new DOMParser();
     const doc = parser.parseFromString(html, 'text/html');
 

src/lib/utils/platform.ts

@@ -1,8 +0,0 @@
-import { Capacitor } from '@capacitor/core';
-import { Device } from '@capacitor/device';
-
-export const isAndroid = Capacitor.getPlatform() === 'android';
-
-export async function getDeviceInfo() {
-  return await Device.getInfo();
-}