implemented reader mode

2024-07-12 10:59:18 +02:00
parent 1704a4fa89
commit 3087bdbd8c
22 changed files with 6935 additions and 20 deletions
@@ -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 {
@@ -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(),
+        ),
+      );
+}
@@ -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
@@ -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();
+    });
+  }
+}
@@ -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
@@ -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();');
+    }
+  }
+}
@@ -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
@@ -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) {