implemented reader mode

app/assets/scripts/readability.min.js.gz

@@ -0,0 +1 @@
+../../js/readability/dist/readability.min.js.gz

app/js/.gitignore

@@ -0,0 +1,25 @@
+# Node.js
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Runtime data
+pids/
+*.pid
+*.seed
+*.pid.lock
+
+# Compiled output
+build/
+
+# Optional npm cache directory
+.npm/

app/js/readability/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "readability",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@mozilla/readability": "^0.5.0",
+    "dompurify": "^3.1.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "babel-loader": "^9.1.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^11.1.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.92.1",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4"
+  }
+}

app/js/readability/src/index.js

@@ -0,0 +1,39 @@
+import { Readability, isProbablyReaderable } from '@mozilla/readability';
+import DOMPurify from 'dompurify';
+
+function isReaderable() {
+  return isProbablyReaderable(document);
+}
+
+function parseReaderable(doc) {
+  const reader = new Readability(doc);
+  const article = reader.parse();
+  return article;
+}
+
+function applyReaderable() {
+  const clonedDoc = document.cloneNode(true);
+  const article = parseReaderable(clonedDoc);
+  const markup = DOMPurify.sanitize(article.content);
+
+  // console.log('article title: ', parsed.title);
+  // console.log('HTML string of processed article content: ', parsed.content);
+  // console.log('text content of the article, with all the HTML tags removed: ', parsed.textContent);
+  // console.log('length of an article, in characters: ', parsed.length);
+  // console.log('article description, or short excerpt from the content: ', parsed.excerpt);
+  // console.log('author metadata: ', parsed.byline);
+  // console.log('content direction: ', parsed.dir);
+  // console.log('name of the site: ', parsed.siteName);
+  // console.log('content language: ', parsed.lang);
+  // console.log('published time: ', parsed.publishedTime);
+
+  if (markup) {
+    document.body.innerHTML = '<div style="margin: 4pt;">' + markup + '</div>';
+  }
+}
+
+// Attach functions to the window object
+window.isReaderable = isReaderable;
+window.applyReaderable = applyReaderable;
+
+export { isReaderable, applyReaderable };

app/js/readability/webpack.config.js

@@ -0,0 +1,54 @@
+const path = require('path');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const TerserPlugin = require('terser-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'readability.min.js',
+    library: 'ReadabilityBundle',
+    libraryTarget: 'umd',
+    globalObject: 'this'
+  },
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
+    ]
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false
+      })
+    ],
+    usedExports: true,
+    sideEffects: true
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+      generateStatsFile: true,
+      statsOptions: { source: false }
+    }),
+    new CompressionPlugin({
+      algorithm: 'gzip',
+      test: /\.js$/
+    })
+  ]
+};

app/lib/domain/services/app_initialization.dart

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:bang_navigator/features/about/data/repositories/package_info_repository.dart';
 import 'package:bang_navigator/features/bangs/data/models/bang.dart';
 import 'package:bang_navigator/features/bangs/domain/repositories/sync.dart';
@@ -6,6 +8,7 @@ import 'package:bang_navigator/features/content_block/domain/repositories/sync.d
 import 'package:bang_navigator/features/search_browser/domain/services/session.dart';
 import 'package:bang_navigator/features/settings/data/models/settings.dart';
 import 'package:bang_navigator/features/settings/data/repositories/settings_repository.dart';
+import 'package:bang_navigator/features/web_view/domain/providers.dart';
 import 'package:exceptions/exceptions.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
@@ -90,6 +93,8 @@ class AppInitializationService extends _$AppInitializationService {
       final settings = await ref.read(settingsRepositoryProvider.future);
       final errors = <ErrorMessage>[];
 
+      unawaited(ref.read(readerabilityScriptProvider.future));
+
       await _initPackageInfo();
 
       final bangSyncResults = await _initBangs();

app/lib/domain/services/app_initialization.g.dart

@@ -7,7 +7,7 @@ part of 'app_initialization.dart';
 // **************************************************************************
 
 String _$appInitializationServiceHash() =>
-    r'33b432bd7a2f72f83d0b22771348ebf6e4934a92';
+    r'55484697ec5aadc60a8d92b5b7cea9e39457c67a';
 
 /// See also [AppInitializationService].
 @ProviderFor(AppInitializationService)

app/lib/features/search_browser/presentation/screens/browser.dart

@@ -15,15 +15,15 @@ import 'package:bang_navigator/features/search_browser/presentation/widgets/tabs
 import 'package:bang_navigator/features/settings/data/models/settings.dart';
 import 'package:bang_navigator/features/settings/data/repositories/settings_repository.dart';
 import 'package:bang_navigator/features/web_view/domain/repositories/web_view.dart';
+import 'package:bang_navigator/features/web_view/presentation/controllers/readerability.dart';
 import 'package:bang_navigator/features/web_view/presentation/controllers/switch_new_tab.dart';
 import 'package:bang_navigator/features/web_view/presentation/widgets/web_page_dialog.dart';
-import 'package:bang_navigator/presentation/hooks/listenable_callback.dart';
 import 'package:bang_navigator/presentation/hooks/overlay_portal_controller.dart';
+import 'package:bang_navigator/presentation/widgets/animate_gradient_shader.dart';
 import 'package:bang_navigator/presentation/widgets/animated_indexed_stack.dart';
 import 'package:bang_navigator/utils/ui_helper.dart' as ui_helper;
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:flutter_inappwebview/flutter_inappwebview.dart';
 import 'package:flutter_material_design_icons/flutter_material_design_icons.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -68,7 +68,6 @@ class KagiScreen extends HookConsumerWidget {
     final menuController = useMemoized(() => MenuController());
 
     final lastBackButtonPress = useRef<DateTime?>(null);
-    final webViewController = useRef<InAppWebViewController?>(null);
 
     final overlayController = useOverlayPortalController();
 
@@ -111,7 +110,7 @@ class KagiScreen extends HookConsumerWidget {
                     ref.read(overlayDialogProvider.notifier).show(
                           WebPageDialog(
                             page: page,
-                            webViewController: webViewController.value,
+                            webViewController: page.controller,
                             onDismiss: ref
                                 .read(overlayDialogProvider.notifier)
                                 .dismiss,
@@ -181,6 +180,92 @@ class KagiScreen extends HookConsumerWidget {
                   },
                 ),
           actions: [
+            if (activeWebView != null)
+              HookConsumer(
+                builder: (context, ref, child) {
+                  final colorScheme = Theme.of(context).colorScheme;
+
+                  final controller =
+                      useListenable(activeWebView.page).value.controller;
+                  final readerabilityState = ref.watch(
+                    readerabilityControllerProvider(controller),
+                  );
+
+                  final isReaderable = useValueListenable(
+                    activeWebView.isReaderable,
+                  );
+
+                  final readerableApplied = useValueListenable(
+                    activeWebView.readerableApplied,
+                  );
+
+                  final icon = useMemoized(
+                    () => readerableApplied
+                        ? Icon(
+                            MdiIcons.bookOpen,
+                            color: Theme.of(context).colorScheme.primary,
+                          )
+                        : const Icon(
+                            MdiIcons.bookOpenOutline,
+                            color: Colors.white,
+                          ),
+                    [readerableApplied],
+                  );
+
+                  return Visibility(
+                    visible: isReaderable == true || readerableApplied,
+                    child: InkWell(
+                      onTap: readerabilityState.isLoading
+                          ? null
+                          : () async {
+                              final controller =
+                                  activeWebView.currentController;
+
+                              if (controller != null) {
+                                final readabilityNotifier = ref.read(
+                                  readerabilityControllerProvider(
+                                    controller,
+                                  ).notifier,
+                                );
+
+                                if (readerableApplied) {
+                                  await activeWebView
+                                      .updateReaderableApplied(false);
+                                } else {
+                                  await readabilityNotifier.applyReaderable();
+                                  await activeWebView
+                                      .updateReaderableApplied(true);
+                                }
+                              }
+                            },
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(
+                          vertical: 15.0,
+                          horizontal: 8.0,
+                        ),
+                        child: readerabilityState.when(
+                          data: (_) => icon,
+                          error: (error, stackTrace) => SizedBox.shrink(),
+                          loading: () => AnimateGradientShader(
+                            duration: const Duration(milliseconds: 500),
+                            primaryEnd: Alignment.bottomLeft,
+                            secondaryEnd: Alignment.topRight,
+                            primaryColors: [
+                              colorScheme.primary,
+                              colorScheme.primaryContainer,
+                            ],
+                            secondaryColors: [
+                              colorScheme.secondary,
+                              colorScheme.secondaryContainer,
+                            ],
+                            child: icon,
+                          ),
+                        ),
+                      ),
+                    ),
+                  );
+                },
+              ),
             if (activeWebView != null && quickAction != null)
               InkWell(
                 onTap: () async {
@@ -319,7 +404,8 @@ class KagiScreen extends HookConsumerWidget {
                 const Divider(),
                 MenuItemButton(
                   onPressed: () async {
-                    final url = await webViewController.value?.getUrl();
+                    final url =
+                        await activeWebView?.currentController?.getUrl();
                     if (url != null) {
                       // ignore: use_build_context_synchronously
                       await ui_helper.launchUrlFeedback(context, url);
@@ -330,7 +416,8 @@ class KagiScreen extends HookConsumerWidget {
                 ),
                 MenuItemButton(
                   onPressed: () async {
-                    final url = await webViewController.value?.getUrl();
+                    final url =
+                        await activeWebView?.currentController?.getUrl();
                     if (url != null) {
                       await Share.shareUri(url);
                     }
@@ -341,7 +428,7 @@ class KagiScreen extends HookConsumerWidget {
                 const Divider(),
                 MenuItemButton(
                   onPressed: () async {
-                    await webViewController.value?.reload();
+                    await activeWebView?.currentController?.reload();
                   },
                   leadingIcon: const Icon(Icons.refresh),
                   child: const Text('Reload'),
@@ -362,7 +449,8 @@ class KagiScreen extends HookConsumerWidget {
                           child: IconButton(
                             onPressed: (history.canGoBack)
                                 ? () async {
-                                    await webViewController.value?.goBack();
+                                    await activeWebView?.currentController
+                                        ?.goBack();
                                     menuController.close();
                                   }
                                 : null,
@@ -374,7 +462,8 @@ class KagiScreen extends HookConsumerWidget {
                           child: IconButton(
                             onPressed: (history.canGoForward)
                                 ? () async {
-                                    await webViewController.value?.goForward();
+                                    await activeWebView?.currentController
+                                        ?.goForward();
                                     menuController.close();
                                   }
                                 : null,
@@ -404,9 +493,6 @@ class KagiScreen extends HookConsumerWidget {
           child: HookConsumer(
             builder: (context, ref, child) {
               final webViews = ref.watch(webViewRepositoryProvider);
-              useListenableCallback(activeWebView?.page, () {
-                webViewController.value = activeWebView?.page.value.controller;
-              });
 
               return BackButtonListener(
                 onBackButtonPressed: () async {

app/lib/features/web_view/domain/providers.dart

@@ -1,7 +1,12 @@
+import 'dart:convert';
+
 import 'package:bang_navigator/features/content_block/domain/repositories/host.dart';
 import 'package:bang_navigator/features/settings/data/models/settings.dart';
 import 'package:bang_navigator/features/settings/data/repositories/settings_repository.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/services.dart' show rootBundle;
 import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:universal_io/io.dart';
 
 part 'providers.g.dart';
 
@@ -28,3 +33,13 @@ Stream<Set<String>?> blockContentHosts(BlockContentHostsRef ref) {
       .watchHosts(sources: enableHostList)
       .map((hosts) => hosts.toSet());
 }
+
+@Riverpod(keepAlive: true)
+Future<String> readerabilityScript(ReaderabilityScriptRef ref) {
+  return rootBundle.load('assets/scripts/readability.min.js.gz').then(
+        (value) => compute(
+          (message) => utf8.decode(gzip.decode(message)),
+          value.buffer.asUint8List(),
+        ),
+      );
+}

app/lib/features/web_view/domain/providers.g.dart

@@ -21,5 +21,21 @@ final blockContentHostsProvider = StreamProvider<Set<String>?>.internal(
 );
 
 typedef BlockContentHostsRef = StreamProviderRef<Set<String>?>;
+String _$readerabilityScriptHash() =>
+    r'6fdd1aa920bc58c35ef9888158e572e25793870a';
+
+/// See also [readerabilityScript].
+@ProviderFor(readerabilityScript)
+final readerabilityScriptProvider = FutureProvider<String>.internal(
+  readerabilityScript,
+  name: r'readerabilityScriptProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$readerabilityScriptHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef ReaderabilityScriptRef = FutureProviderRef<String>;
 // ignore_for_file: type=lint
 // ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member

app/lib/features/web_view/presentation/controllers/readerability.dart

@@ -0,0 +1,33 @@
+import 'package:bang_navigator/features/web_view/presentation/services/readerability_script.dart';
+import 'package:flutter_inappwebview/flutter_inappwebview.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'readerability.g.dart';
+
+@Riverpod()
+class ReaderabilityController extends _$ReaderabilityController {
+  late ReaderabilityScriptService _service;
+
+  @override
+  FutureOr<void> build(InAppWebViewController? controller) async {
+    _service =
+        ref.watch(readerabilityScriptServiceProvider(controller).notifier);
+  }
+
+  Future<bool> isReaderable() async {
+    state = const AsyncLoading();
+    final result = await AsyncValue.guard(() async {
+      return await _service.isReaderable();
+    });
+    state = result;
+
+    return result.valueOrNull ?? false;
+  }
+
+  Future<void> applyReaderable() async {
+    state = const AsyncLoading();
+    state = await AsyncValue.guard(() async {
+      await _service.applyReaderable();
+    });
+  }
+}

app/lib/features/web_view/presentation/controllers/readerability.g.dart

@@ -0,0 +1,178 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'readerability.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$readerabilityControllerHash() =>
+    r'1260623c58d23511c3e4f58f97e18663be354ced';
+
+/// Copied from Dart SDK
+class _SystemHash {
+  _SystemHash._();
+
+  static int combine(int hash, int value) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + value);
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x0007ffff & hash) << 10));
+    return hash ^ (hash >> 6);
+  }
+
+  static int finish(int hash) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x03ffffff & hash) << 3));
+    // ignore: parameter_assignments
+    hash = hash ^ (hash >> 11);
+    return 0x1fffffff & (hash + ((0x00003fff & hash) << 15));
+  }
+}
+
+abstract class _$ReaderabilityController
+    extends BuildlessAutoDisposeAsyncNotifier<void> {
+  late final InAppWebViewController? controller;
+
+  FutureOr<void> build(
+    InAppWebViewController? controller,
+  );
+}
+
+/// See also [ReaderabilityController].
+@ProviderFor(ReaderabilityController)
+const readerabilityControllerProvider = ReaderabilityControllerFamily();
+
+/// See also [ReaderabilityController].
+class ReaderabilityControllerFamily extends Family<AsyncValue<void>> {
+  /// See also [ReaderabilityController].
+  const ReaderabilityControllerFamily();
+
+  /// See also [ReaderabilityController].
+  ReaderabilityControllerProvider call(
+    InAppWebViewController? controller,
+  ) {
+    return ReaderabilityControllerProvider(
+      controller,
+    );
+  }
+
+  @override
+  ReaderabilityControllerProvider getProviderOverride(
+    covariant ReaderabilityControllerProvider provider,
+  ) {
+    return call(
+      provider.controller,
+    );
+  }
+
+  static const Iterable<ProviderOrFamily>? _dependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get dependencies => _dependencies;
+
+  static const Iterable<ProviderOrFamily>? _allTransitiveDependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get allTransitiveDependencies =>
+      _allTransitiveDependencies;
+
+  @override
+  String? get name => r'readerabilityControllerProvider';
+}
+
+/// See also [ReaderabilityController].
+class ReaderabilityControllerProvider
+    extends AutoDisposeAsyncNotifierProviderImpl<ReaderabilityController,
+        void> {
+  /// See also [ReaderabilityController].
+  ReaderabilityControllerProvider(
+    InAppWebViewController? controller,
+  ) : this._internal(
+          () => ReaderabilityController()..controller = controller,
+          from: readerabilityControllerProvider,
+          name: r'readerabilityControllerProvider',
+          debugGetCreateSourceHash:
+              const bool.fromEnvironment('dart.vm.product')
+                  ? null
+                  : _$readerabilityControllerHash,
+          dependencies: ReaderabilityControllerFamily._dependencies,
+          allTransitiveDependencies:
+              ReaderabilityControllerFamily._allTransitiveDependencies,
+          controller: controller,
+        );
+
+  ReaderabilityControllerProvider._internal(
+    super._createNotifier, {
+    required super.name,
+    required super.dependencies,
+    required super.allTransitiveDependencies,
+    required super.debugGetCreateSourceHash,
+    required super.from,
+    required this.controller,
+  }) : super.internal();
+
+  final InAppWebViewController? controller;
+
+  @override
+  FutureOr<void> runNotifierBuild(
+    covariant ReaderabilityController notifier,
+  ) {
+    return notifier.build(
+      controller,
+    );
+  }
+
+  @override
+  Override overrideWith(ReaderabilityController Function() create) {
+    return ProviderOverride(
+      origin: this,
+      override: ReaderabilityControllerProvider._internal(
+        () => create()..controller = controller,
+        from: from,
+        name: null,
+        dependencies: null,
+        allTransitiveDependencies: null,
+        debugGetCreateSourceHash: null,
+        controller: controller,
+      ),
+    );
+  }
+
+  @override
+  AutoDisposeAsyncNotifierProviderElement<ReaderabilityController, void>
+      createElement() {
+    return _ReaderabilityControllerProviderElement(this);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return other is ReaderabilityControllerProvider &&
+        other.controller == controller;
+  }
+
+  @override
+  int get hashCode {
+    var hash = _SystemHash.combine(0, runtimeType.hashCode);
+    hash = _SystemHash.combine(hash, controller.hashCode);
+
+    return _SystemHash.finish(hash);
+  }
+}
+
+mixin ReaderabilityControllerRef on AutoDisposeAsyncNotifierProviderRef<void> {
+  /// The parameter `controller` of this provider.
+  InAppWebViewController? get controller;
+}
+
+class _ReaderabilityControllerProviderElement
+    extends AutoDisposeAsyncNotifierProviderElement<ReaderabilityController,
+        void> with ReaderabilityControllerRef {
+  _ReaderabilityControllerProviderElement(super.provider);
+
+  @override
+  InAppWebViewController? get controller =>
+      (origin as ReaderabilityControllerProvider).controller;
+}
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member

app/lib/features/web_view/presentation/services/readerability_script.dart

@@ -0,0 +1,55 @@
+import 'package:bang_navigator/features/web_view/domain/providers.dart';
+import 'package:flutter_inappwebview/flutter_inappwebview.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'readerability_script.g.dart';
+
+@Riverpod()
+class ReaderabilityScriptService extends _$ReaderabilityScriptService {
+  late Future<String> _readerabilityScript;
+
+  @override
+  Future<void> build(InAppWebViewController? controller) async {
+    _readerabilityScript = ref.watch(readerabilityScriptProvider.future);
+  }
+
+  Future<void> _injectScript() async {
+    if (controller != null) {
+      await _readerabilityScript
+          .then((script) => controller!.evaluateJavascript(source: script));
+    }
+  }
+
+  Future<void> ensureScriptInjected() async {
+    if (controller != null) {
+      final injected = await controller!.evaluateJavascript(
+        source:
+            "(typeof window !== 'undefined' && typeof window.isReaderable === 'function')",
+      ) as bool;
+
+      if (!injected) {
+        await _injectScript();
+      }
+    }
+  }
+
+  Future<bool> isReaderable() async {
+    await ensureScriptInjected();
+
+    if (controller != null) {
+      return await controller!.evaluateJavascript(
+        source: 'isReaderable();',
+      ) as bool;
+    }
+
+    return false;
+  }
+
+  Future<void> applyReaderable() async {
+    await ensureScriptInjected();
+
+    if (controller != null) {
+      await controller!.evaluateJavascript(source: 'applyReaderable();');
+    }
+  }
+}

app/lib/features/web_view/presentation/services/readerability_script.g.dart

@@ -0,0 +1,179 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'readerability_script.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$readerabilityScriptServiceHash() =>
+    r'780980e6771d8d860e261fb4bc41236a60e0aaab';
+
+/// Copied from Dart SDK
+class _SystemHash {
+  _SystemHash._();
+
+  static int combine(int hash, int value) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + value);
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x0007ffff & hash) << 10));
+    return hash ^ (hash >> 6);
+  }
+
+  static int finish(int hash) {
+    // ignore: parameter_assignments
+    hash = 0x1fffffff & (hash + ((0x03ffffff & hash) << 3));
+    // ignore: parameter_assignments
+    hash = hash ^ (hash >> 11);
+    return 0x1fffffff & (hash + ((0x00003fff & hash) << 15));
+  }
+}
+
+abstract class _$ReaderabilityScriptService
+    extends BuildlessAutoDisposeAsyncNotifier<void> {
+  late final InAppWebViewController? controller;
+
+  FutureOr<void> build(
+    InAppWebViewController? controller,
+  );
+}
+
+/// See also [ReaderabilityScriptService].
+@ProviderFor(ReaderabilityScriptService)
+const readerabilityScriptServiceProvider = ReaderabilityScriptServiceFamily();
+
+/// See also [ReaderabilityScriptService].
+class ReaderabilityScriptServiceFamily extends Family<AsyncValue<void>> {
+  /// See also [ReaderabilityScriptService].
+  const ReaderabilityScriptServiceFamily();
+
+  /// See also [ReaderabilityScriptService].
+  ReaderabilityScriptServiceProvider call(
+    InAppWebViewController? controller,
+  ) {
+    return ReaderabilityScriptServiceProvider(
+      controller,
+    );
+  }
+
+  @override
+  ReaderabilityScriptServiceProvider getProviderOverride(
+    covariant ReaderabilityScriptServiceProvider provider,
+  ) {
+    return call(
+      provider.controller,
+    );
+  }
+
+  static const Iterable<ProviderOrFamily>? _dependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get dependencies => _dependencies;
+
+  static const Iterable<ProviderOrFamily>? _allTransitiveDependencies = null;
+
+  @override
+  Iterable<ProviderOrFamily>? get allTransitiveDependencies =>
+      _allTransitiveDependencies;
+
+  @override
+  String? get name => r'readerabilityScriptServiceProvider';
+}
+
+/// See also [ReaderabilityScriptService].
+class ReaderabilityScriptServiceProvider
+    extends AutoDisposeAsyncNotifierProviderImpl<ReaderabilityScriptService,
+        void> {
+  /// See also [ReaderabilityScriptService].
+  ReaderabilityScriptServiceProvider(
+    InAppWebViewController? controller,
+  ) : this._internal(
+          () => ReaderabilityScriptService()..controller = controller,
+          from: readerabilityScriptServiceProvider,
+          name: r'readerabilityScriptServiceProvider',
+          debugGetCreateSourceHash:
+              const bool.fromEnvironment('dart.vm.product')
+                  ? null
+                  : _$readerabilityScriptServiceHash,
+          dependencies: ReaderabilityScriptServiceFamily._dependencies,
+          allTransitiveDependencies:
+              ReaderabilityScriptServiceFamily._allTransitiveDependencies,
+          controller: controller,
+        );
+
+  ReaderabilityScriptServiceProvider._internal(
+    super._createNotifier, {
+    required super.name,
+    required super.dependencies,
+    required super.allTransitiveDependencies,
+    required super.debugGetCreateSourceHash,
+    required super.from,
+    required this.controller,
+  }) : super.internal();
+
+  final InAppWebViewController? controller;
+
+  @override
+  FutureOr<void> runNotifierBuild(
+    covariant ReaderabilityScriptService notifier,
+  ) {
+    return notifier.build(
+      controller,
+    );
+  }
+
+  @override
+  Override overrideWith(ReaderabilityScriptService Function() create) {
+    return ProviderOverride(
+      origin: this,
+      override: ReaderabilityScriptServiceProvider._internal(
+        () => create()..controller = controller,
+        from: from,
+        name: null,
+        dependencies: null,
+        allTransitiveDependencies: null,
+        debugGetCreateSourceHash: null,
+        controller: controller,
+      ),
+    );
+  }
+
+  @override
+  AutoDisposeAsyncNotifierProviderElement<ReaderabilityScriptService, void>
+      createElement() {
+    return _ReaderabilityScriptServiceProviderElement(this);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return other is ReaderabilityScriptServiceProvider &&
+        other.controller == controller;
+  }
+
+  @override
+  int get hashCode {
+    var hash = _SystemHash.combine(0, runtimeType.hashCode);
+    hash = _SystemHash.combine(hash, controller.hashCode);
+
+    return _SystemHash.finish(hash);
+  }
+}
+
+mixin ReaderabilityScriptServiceRef
+    on AutoDisposeAsyncNotifierProviderRef<void> {
+  /// The parameter `controller` of this provider.
+  InAppWebViewController? get controller;
+}
+
+class _ReaderabilityScriptServiceProviderElement
+    extends AutoDisposeAsyncNotifierProviderElement<ReaderabilityScriptService,
+        void> with ReaderabilityScriptServiceRef {
+  _ReaderabilityScriptServiceProviderElement(super.provider);
+
+  @override
+  InAppWebViewController? get controller =>
+      (origin as ReaderabilityScriptServiceProvider).controller;
+}
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member

app/lib/features/web_view/presentation/widgets/web_view.dart

@@ -13,6 +13,7 @@ import 'package:bang_navigator/features/settings/data/models/settings.dart';
 import 'package:bang_navigator/features/settings/data/repositories/settings_repository.dart';
 import 'package:bang_navigator/features/web_view/domain/entities/web_view_page.dart';
 import 'package:bang_navigator/features/web_view/domain/providers.dart';
+import 'package:bang_navigator/features/web_view/presentation/controllers/readerability.dart';
 import 'package:bang_navigator/features/web_view/presentation/controllers/switch_new_tab.dart';
 import 'package:bang_navigator/features/web_view/presentation/widgets/web_page_dialog.dart';
 import 'package:bang_navigator/features/web_view/utils/download_helper.dart';
@@ -36,16 +37,45 @@ const _webViewSupportedSchemes = [
 ];
 
 class WebView extends StatefulHookConsumerWidget {
-  final ValueNotifier<WebViewPage> _valueNotifier;
+  final ValueNotifier<WebViewPage> _pageNotifier;
 
-  ValueListenable<WebViewPage> get page => _valueNotifier;
+  final ValueNotifier<bool?> _isReaderable;
+  final ValueNotifier<bool> _readerableApplied;
+
+  ValueListenable<WebViewPage> get page => _pageNotifier;
+
+  /// Don't cache this value as it depends on current value of a ValueListenable
+  InAppWebViewController? get currentController =>
+      _pageNotifier.value.controller;
+
+  ValueListenable<bool?> get isReaderable => _isReaderable;
+  ValueListenable<bool> get readerableApplied => _readerableApplied;
 
   void updatePage(WebViewPage Function(WebViewPage page) update) {
-    _valueNotifier.value = update(_valueNotifier.value);
+    _pageNotifier.value = update(_pageNotifier.value);
+  }
+
+  void resetReaderable() {
+    _isReaderable.value = null;
+    _readerableApplied.value = false;
+  }
+
+  Future<void> updateReaderableApplied(bool value) async {
+    if (value == false) {
+      await _pageNotifier.value.controller?.reload();
+    }
+
+    _readerableApplied.value = value;
+  }
+
+  void updateIsReaderable(bool value) {
+    _isReaderable.value = value;
   }
 
   WebView({required WebViewPage tab})
-      : _valueNotifier = ValueNotifier(tab),
+      : _pageNotifier = ValueNotifier(tab),
+        _isReaderable = ValueNotifier(null),
+        _readerableApplied = ValueNotifier(false),
         super(key: tab.key);
 
   @override
@@ -128,7 +158,10 @@ class _WebViewState extends ConsumerState<WebView> {
     _onLoadStopDebounce?.cancel();
     _periodicScreenshotUpdate?.cancel();
 
-    widget._valueNotifier.dispose();
+    widget._pageNotifier.dispose();
+    widget._isReaderable.dispose();
+    widget._readerableApplied.dispose();
+
     logger.i('Disposed ${widget.key} (${widget.page.value.title})');
   }
 
@@ -340,8 +373,10 @@ class _WebViewState extends ConsumerState<WebView> {
                 ),
               );
             }
+
+            widget.resetReaderable();
           },
-          onLoadStop: (controller, url) {
+          onLoadStop: (controller, url) async {
             if (url != null) {
               widget.updatePage((page) => page.copyWith.url(url));
             }
@@ -365,6 +400,12 @@ class _WebViewState extends ConsumerState<WebView> {
                 });
               });
             });
+
+            final readabilityNotifier = ref.read(
+              readerabilityControllerProvider(controller).notifier,
+            );
+
+            widget.updateIsReaderable(await readabilityNotifier.isReaderable());
           },
           onUpdateVisitedHistory: (controller, url, isReload) async {
             if (isReload != true) {

app/lib/presentation/widgets/animate_gradient_shader.dart

@@ -0,0 +1,219 @@
+import 'package:flutter/material.dart';
+
+class AnimateGradientShader extends StatefulWidget {
+  const AnimateGradientShader({
+    super.key,
+    required this.primaryColors,
+    required this.secondaryColors,
+    this.child,
+    this.primaryBegin = Alignment.topLeft,
+    this.primaryEnd = Alignment.topRight,
+    this.secondaryBegin = Alignment.bottomLeft,
+    this.secondaryEnd = Alignment.bottomRight,
+    this.primaryBeginGeometry,
+    this.primaryEndGeometry,
+    this.secondaryBeginGeometry,
+    this.secondaryEndGeometry,
+    this.textDirectionForGeometry = TextDirection.ltr,
+    this.controller,
+    this.duration = const Duration(seconds: 4),
+    this.animateAlignments = true,
+    this.reverse = true,
+  })  : assert(primaryColors.length >= 2),
+        assert(primaryColors.length == secondaryColors.length);
+
+  /// [controller]: pass this to have a fine control over the [Animation]
+  final AnimationController? controller;
+
+  /// [duration]: Time to switch between [Gradient].
+  /// By default its value is [Duration(seconds:4)]
+  final Duration duration;
+
+  /// [primaryColors]: These will be the starting colors of the [Animation].
+  final List<Color> primaryColors;
+
+  /// [secondaryColors]: These Colors are those in which the [primaryColors] will transition into.
+  final List<Color> secondaryColors;
+
+  /// [primaryBegin]: This is begin [Alignment] for [primaryColors].
+  /// By default its value is [Alignment.topLeft]
+  final Alignment primaryBegin;
+
+  /// [primaryBegin]: This is end [Alignment] for [primaryColors].
+  /// By default its value is [Alignment.topRight]
+  final Alignment primaryEnd;
+
+  /// [secondaryBegin]: This is begin [Alignment] for [secondaryColors].
+  /// By default its value is [Alignment.bottomLeft]
+  final Alignment secondaryBegin;
+
+  /// [secondaryEnd]: This is end [Alignment] for [secondaryColors].
+  /// By default its value is [Alignment.bottomRight]
+  final Alignment secondaryEnd;
+
+  /// Alternatively you can use [primaryBeginGeometry] over [primaryBegin] for better control over alignments
+  /// These are really useful for when you are builing an [rtl] app.
+  /// [primaryBeginGeometry] will have higher priority than [primaryBegin]
+  final AlignmentGeometry? primaryBeginGeometry;
+
+  /// Alternatively you can use [primaryEndGeometry] over [primaryEnd] for better control over alignments
+  /// These are really useful for when you are builing an [rtl] app.
+  /// [primaryEndGeometry] will have higher priority than [primaryEnd]
+  final AlignmentGeometry? primaryEndGeometry;
+
+  /// Alternatively you can use [secondaryBeginGeometry] over [secondaryBegin] for better control over alignments
+  /// These are really useful for when you are builing an [rtl] app.
+  /// [secondaryBeginGeometry] will have higher priority than [secondaryBegin]
+  final AlignmentGeometry? secondaryBeginGeometry;
+
+  /// Alternatively you can use [secondaryEndGeometry] over [secondaryEnd] for better control over alignments
+  /// These are really useful for when you are builing an [rtl] app.
+  /// [secondaryEndGeometry] will have higher priority than [secondaryEnd]
+  final AlignmentGeometry? secondaryEndGeometry;
+
+  /// This is the [TextDirection] which is gonna be used to resolve [AlignmentGeometry] passed through
+  /// [primaryBeginGeometry], [primaryEndGeometry], [secondaryBeginGeometry], [secondaryEndGeometry]
+  final TextDirection textDirectionForGeometry;
+
+  /// [animateAlignments]: set to false if you don't want to animate the alignments.
+  /// This can provide you way cooler animations
+  final bool animateAlignments;
+
+  /// [reverse]: set it to false if you don't want to reverse the animation.
+  /// using that it will go into one direction only
+  final bool reverse;
+
+  final Widget? child;
+
+  @override
+  State<AnimateGradientShader> createState() => _AnimateGradientShaderState();
+}
+
+class _AnimateGradientShaderState extends State<AnimateGradientShader>
+    with TickerProviderStateMixin {
+  late Animation<double> _animation;
+  late AnimationController _controller;
+
+  late List<ColorTween> _colorTween;
+
+  late AlignmentTween begin;
+  late AlignmentTween end;
+  List<Color> primaryColors = [];
+  List<Color> secondaryColors = [];
+
+  @override
+  void initState() {
+    _initialize();
+    super.initState();
+  }
+
+  @override
+  void didUpdateWidget(AnimateGradientShader oldWidget) {
+    _initialize();
+    super.didUpdateWidget(oldWidget);
+  }
+
+  void _initialize() {
+    primaryColors = widget.primaryColors;
+    secondaryColors = widget.secondaryColors;
+    _colorTween = _getColorTweens();
+    if (widget.animateAlignments) _setAlignmentTweens();
+    _setAnimations();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _animation,
+      builder: (BuildContext context, Widget? child) {
+        final gradient = LinearGradient(
+          begin: widget.animateAlignments
+              ? begin.evaluate(_animation)
+              : widget.primaryBegin,
+          end: widget.animateAlignments
+              ? end.evaluate(_animation)
+              : widget.primaryEnd,
+          colors: _evaluateColors(_animation),
+        );
+
+        return ShaderMask(
+          shaderCallback: (Rect bounds) {
+            return gradient
+                .createShader(Rect.fromLTWH(0, 0, bounds.width, bounds.height));
+          },
+          child: widget.child,
+        );
+      },
+    );
+  }
+
+  List<ColorTween> _getColorTweens() {
+    if (widget.primaryColors.length != widget.secondaryColors.length) {
+      throw Exception('primaryColors.length != secondaryColors.length');
+    }
+
+    final List<ColorTween> colorTweens = [];
+
+    for (int i = 0; i < primaryColors.length; i++) {
+      colorTweens.add(
+        ColorTween(
+          begin: primaryColors[i],
+          end: secondaryColors[i],
+        ),
+      );
+    }
+
+    return colorTweens;
+  }
+
+  List<Color> _evaluateColors(Animation<double> animation) {
+    final List<Color> colors = [];
+    for (int i = 0; i < _colorTween.length; i++) {
+      colors.add(_colorTween[i].evaluate(animation)!);
+    }
+    return colors;
+  }
+
+  void _setAlignmentTweens() {
+    final primaryBeginGeometry = widget.primaryBeginGeometry?.resolve(
+      widget.textDirectionForGeometry,
+    );
+    final primaryEndGeometry = widget.primaryEndGeometry?.resolve(
+      widget.textDirectionForGeometry,
+    );
+    final secondaryBeginGeometry = widget.secondaryBeginGeometry?.resolve(
+      widget.textDirectionForGeometry,
+    );
+    final secondaryEndGeometry = widget.secondaryEndGeometry?.resolve(
+      widget.textDirectionForGeometry,
+    );
+
+    begin = AlignmentTween(
+      begin: primaryBeginGeometry ?? widget.primaryBegin,
+      end: primaryEndGeometry ?? widget.primaryEnd,
+    );
+    end = AlignmentTween(
+      begin: secondaryBeginGeometry ?? widget.secondaryBegin,
+      end: secondaryEndGeometry ?? widget.secondaryEnd,
+    );
+  }
+
+  void _setAnimations() {
+    _controller = widget.controller ??
+        AnimationController(
+          vsync: this,
+          duration: widget.duration,
+        )
+      ..repeat(reverse: widget.reverse);
+    _animation = CurvedAnimation(
+      parent: _controller,
+      curve: Curves.easeInOut,
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+}

app/pubspec.yaml

@@ -71,9 +71,10 @@ dev_dependencies:
 flutter:
   uses-material-design: true
   assets:
-    - assets/icon/icon.png
+    - assets/icon/
     - assets/landing/
     - assets/fonts/
+    - assets/scripts/
 
 flutter_launcher_icons:
   android: "launcher_icon"