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

android/app/capacitor.build.gradle

@@ -10,7 +10,6 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-app')
-    implementation project(':capacitor-device')
 
 }
 

android/app/src/main/assets/capacitor.config.json

@@ -4,8 +4,8 @@
 	"webDir": "build",
 	"bundledWebRuntime": false,
 	"plugins": {
-		"Device": {
-			"lazyLoad": true
+		"CapacitorHttp": {
+			"enabled": true
 		}
 	}
 }

android/app/src/main/assets/capacitor.plugins.json

@@ -2,9 +2,5 @@
 	{
 		"pkg": "@capacitor/app",
 		"classpath": "com.capacitorjs.plugins.app.AppPlugin"
-	},
-	{
-		"pkg": "@capacitor/device",
-		"classpath": "com.capacitorjs.plugins.device.DevicePlugin"
 	}
 ]

android/capacitor.settings.gradle

@@ -4,6 +4,3 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
-
-include ':capacitor-device'
-project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')

capacitor.config.ts

@@ -6,8 +6,8 @@ const config: CapacitorConfig = {
   webDir: 'build',
   bundledWebRuntime: false,
   plugins: {
-    Device: {
-      lazyLoad: true,
+    CapacitorHttp: {
+      enabled: true,
     },
   },
 };

package.json

@@ -6,8 +6,7 @@
   "author": "plebeius.eth",
   "private": true,
   "dependencies": {
-    "@capacitor/app": "1.1.1",
-    "@capacitor/device": "6.0.1",
+    "@capacitor/app": "6.0.1",
     "@floating-ui/react": "0.26.1",
     "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#a80ef4b155abf119e66c019576cbc1b338390e00",
     "@testing-library/jest-dom": "5.14.1",

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();
-}

yarn.lock

@@ -1204,10 +1204,10 @@
   resolved "https://registry.yarnpkg.com/@capacitor/android/-/android-5.0.0.tgz#4e716738e87733b24c4a60e4c2e73fc4027fd2df"
   integrity sha512-jEhx0OW8uypxlW94bXn7Q6YtwBOg3MH49DxH+jSrroRPr8Xb55w3puVSof9O2BQaxOq1mXKTjwz6TOIargGHwQ==
 
-"@capacitor/app@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@capacitor/app/-/app-1.1.1.tgz#bde7202faad1b47c4ae2c4a622285d7569384c5e"
-  integrity sha512-8ADkldHnoE1xkWvPUsGlERVGm6/Zvcxy6hCI80AxydIKyaCG7kbDAvUclebbnw/eFRxj2zBoVatGLjmJNvTbYw==
+"@capacitor/app@6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@capacitor/app/-/app-6.0.1.tgz#601878ea1b4488a9a89b61b437644bbe134a0532"
+  integrity sha512-0kXbOl7LPPMFVcAii3u/7Ps0DvXlr7dtHT97r9J1faDlgdQLQUvtGp48tjvFm48gqHI0aOPRJnTBr5JXW4ETYg==
 
 "@capacitor/cli@5.0.0":
   version "5.0.0"
@@ -1239,11 +1239,6 @@
   dependencies:
     tslib "^2.1.0"
 
-"@capacitor/device@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@capacitor/device/-/device-6.0.1.tgz#bb5cb2b9e9c37142b71d51e4c6eed84625ce821e"
-  integrity sha512-Tlz67DAO5GKb5YAfupXiENZxDww6mHnG9iKI+8D5SVF82VLpEv5r9qwKtiounuQB2y2HWiHV8tlOk7DqnLVUqQ==
-
 "@chainsafe/as-chacha20poly1305@^0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@chainsafe/as-chacha20poly1305/-/as-chacha20poly1305-0.1.0.tgz#7da6f8796f9b42dac6e830a086d964f1f9189e09"