feat: implement webview functionality for desktop and mobile, enhance image widget to support data URLs

Author: appdevelpo

lib/main.dart

@@ -201,7 +201,9 @@ Future<void> loadMiruCore() async {
         "dbname": p.join(appSupportDir, 'miru.db'),
         "sslmode": "disable",
       },
-      "cookieStoreLocation": Platform.isAndroid ? appSupportDir : "",
+      "cookieStoreLocation": Platform.isAndroid
+          ? p.join(appSupportDir, "cookies")
+          : "",
       "extensionPath": p.join(appSupportDir, 'extensions'),
     };
 

lib/pages/detail/detail_page.dart

@@ -1589,7 +1589,7 @@ class DetailHeaderDelegate extends SliverPersistentHeaderDelegate {
                       constraints: const BoxConstraints(maxWidth: 1500),
                       child: (isLoading)
                           ? _DesktopLoadingWidgetExtended()
-                          : _DesktopWidgetExtended(
+                          : DesktopWebView(
                               meta: meta,
                               detailUrl: detailUrl,
                               detail: detail,
@@ -1817,8 +1817,9 @@ class _DownloadDialogState extends State<_DownloadDialog>
   }
 }
 
-class _DesktopWidgetExtended extends StatelessWidget {
-  const _DesktopWidgetExtended({
+class DesktopWebView extends StatelessWidget {
+  const DesktopWebView({
+    super.key,
     required this.meta,
     this.detailUrl,
     this.detail,

lib/pages/search/desktop_search_page.dart

@@ -1,7 +1,12 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:desktop_webview_window/desktop_webview_window.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:forui/forui.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:miru_app_new/pages/webview/desktop_webview.dart';
 import 'package:miru_app_new/provider/extension_page_notifier_provider.dart';
 import 'package:miru_app_new/utils/core/log.dart';
 import 'package:miru_app_new/utils/store/storage_index.dart';
@@ -86,24 +91,35 @@ class DesktopSearchPage extends HookConsumerWidget {
                     final ext = metaData[index];
                     return DesktopSearchListTile(
                       ext: ext,
-                      trailing: FButton.icon(
-                        selected: true,
-                        onPress: () {
-                          final newSet = {...pinnedExtensions.value};
-                          if (newSet.contains(ext.packageName)) {
-                            newSet.remove(ext.packageName);
-                          } else {
-                            newSet.add(ext.packageName);
-                          }
-                          pinnedExtensions.value = newSet;
-                          MiruSettings.setSettingSync(
-                            SettingKey.pinnedExtension,
-                            newSet.toString(),
-                          );
-                        },
-                        child: pinnedExtensions.value.contains(ext.packageName)
-                            ? Icon(FIcons.pinOff)
-                            : Icon(FIcons.pin),
+                      trailing: Row(
+                        children: [
+                          FButton.icon(
+                            style: FButtonStyle.ghost(),
+                            onPress: () => openWebview(ext),
+                            child: Icon(FIcons.globe),
+                          ),
+                          SizedBox(width: 8),
+                          FButton.icon(
+                            selected: true,
+                            onPress: () {
+                              final newSet = {...pinnedExtensions.value};
+                              if (newSet.contains(ext.packageName)) {
+                                newSet.remove(ext.packageName);
+                              } else {
+                                newSet.add(ext.packageName);
+                              }
+                              pinnedExtensions.value = newSet;
+                              MiruSettings.setSettingSync(
+                                SettingKey.pinnedExtension,
+                                newSet.toString(),
+                              );
+                            },
+                            child:
+                                pinnedExtensions.value.contains(ext.packageName)
+                                ? Icon(FIcons.pinOff)
+                                : Icon(FIcons.pin),
+                          ),
+                        ],
                       ),
                     );
                   },

lib/pages/webview/desktop_webview.dart

@@ -0,0 +1,39 @@
+import 'dart:async';
+import 'dart:io';
+
+import 'package:desktop_webview_window/desktop_webview_window.dart';
+import 'package:miru_app_new/model/extension_meta_data.dart';
+import 'package:miru_app_new/utils/core/log.dart';
+
+Future<void> openWebview(ExtensionMeta ext) async {
+  final url = ext.webSite;
+  final webview =
+      await WebviewWindow.create(
+          configuration: CreateConfiguration(
+            windowHeight: 1280,
+            windowWidth: 720,
+            title: "ExampleTestWindow",
+            titleBarTopPadding: Platform.isMacOS ? 20 : 0,
+            // userDataFolderWindows: await _getWebViewPath(),
+          ),
+        )
+        ..launch(url);
+  final timer = Timer.periodic(const Duration(seconds: 1), (timer) async {
+    try {
+      final cookies = await webview.getAllCookies();
+
+      if (cookies.isEmpty) {
+        logger.info('⚠️ no cookies found');
+      }
+    } catch (e, stack) {
+      logger.info('getAllCookies error: $e');
+      logger.info(stack);
+    }
+  });
+  webview.onClose.whenComplete(() async {
+    logger.info("on close");
+    timer.cancel();
+
+    // timer.cancel();
+  });
+}

lib/pages/mobile_webview.dart lib/pages/webview/mobile_webview.dartlib/pages/mobile_webview.dart renamed to lib/pages/webview/mobile_webview.dart

@@ -10,7 +10,7 @@ import '../../../pages/home/history_page.dart';
 import '../../../pages/index.dart';
 import '../../../pages/main_page.dart';
 import '../../pages/watch/manga_reader.dart';
-import '../../../pages/mobile_webview.dart';
+import '../../pages/webview/mobile_webview.dart';
 import '../../pages/watch/novel_reader.dart';
 import '../../../pages/search_page_single_view.dart';
 import '../../pages/watch/video_player.dart';

lib/utils/router/router_util.dart

@@ -1,3 +1,4 @@
+import 'dart:convert';
 import 'package:extended_image/extended_image.dart';
 import 'package:flutter/material.dart';
 import 'package:forui/forui.dart';
@@ -16,14 +17,52 @@ class ImageWidget extends StatelessWidget {
   final BoxFit? fit;
   @override
   Widget build(BuildContext context) {
+    // Support data URLs (base64) and network URLs.
+    final trimmed = imageUrl.trim();
+    final isDataUri = trimmed.startsWith('data:image/');
+
+    if (isDataUri) {
+      try {
+        // data:[<mediatype>][;base64],<data>
+        final comma = trimmed.indexOf(',');
+        final base64Str = (comma >= 0) ? trimmed.substring(comma + 1) : trimmed;
+        final bytes = base64Decode(base64Str);
+
+        return ExtendedImage.memory(
+          bytes,
+          borderRadius: BorderRadius.circular(10),
+          shape: BoxShape.rectangle,
+          width: width,
+          height: height,
+          fit: fit,
+          loadStateChanged: (ExtendedImageState state) {
+            switch (state.extendedImageLoadState) {
+              case LoadState.loading:
+                return const Center(child: CircularProgressIndicator());
+              case LoadState.completed:
+                return null;
+              case LoadState.failed:
+                return const Icon(FIcons.cloudAlert);
+            }
+          },
+        );
+      } catch (e) {
+        return SizedBox(
+          width: width,
+          height: height,
+          child: const Icon(FIcons.cloudAlert),
+        );
+      }
+    }
+
+    // Fallback: treat as network image
     return ExtendedImage.network(
+      imageUrl,
       borderRadius: BorderRadius.circular(10),
       shape: BoxShape.rectangle,
       width: width,
       height: height,
-      cache: true,
       fit: fit,
-      imageUrl,
       loadStateChanged: (ExtendedImageState state) {
         switch (state.extendedImageLoadState) {
           case LoadState.loading: