Implement web

README.md

@@ -8,14 +8,16 @@ which implements both TTS and Text+Audio sync on top of the native toolkits via
 This plugin is supposed to support both EPUB and WebPubs, with or without pre-recorded audio.
 
 ## Plans
+
 We will work on the main branch on a modernized and simple API using newest toolkits and utilize much more of the toolkit functionality.
 
 See repo Issues for up-to-date progress.
 
 General TODO:
-- [X] Use Preferences API on both platforms.
-- [X] Use Decorator API for highlighting.
-- [X] Test TTS and Audio navigators for maturity, possibly replacing our own audio handlers.
+
+- [x] Use Preferences API on both platforms.
+- [x] Use Decorator API for highlighting.
+- [x] Test TTS and Audio navigators for maturity, possibly replacing our own audio handlers.
 - [ ] Finding: Readium native toolkits do not yet support MediaOverlays, making support for "karaoke books" difficult.
       We either wait for this to be implemented, or do something similar to the `nota-lyt4` branch and use `audio_service` and `just_audio` plugins for MediaOverlay playback.
 
@@ -40,7 +42,7 @@ Also, update your Android and iOS projects as follows:
   your `android/app/src/main/AndroidManifest.xml` file:
 
 ```html
-<uses-permission android:name="android.permission.WAKE_LOCK"/>
+<uses-permission android:name="android.permission.WAKE_LOCK" />
 ```
 
 ### iOS
@@ -71,6 +73,34 @@ end
 <key>NSAppTransportSecurity</key>
 <dict>
   <key>NSAllowsArbitraryLoads</key>
-  <true/>
+  <true />
 </dict>
 ```
+
+### Web
+
+To use this plugin for web, follow these steps to ensure everything works correctly:
+
+#### 1. Copy the JavaScript File
+
+To use the JavaScript file from the plugin in your Flutter web app, run the following command in your terminal from the root directory of your app:
+
+```bash
+dart run flutter_readium:copy_js_file <destination_directory>
+```
+
+It is recommended to place the destination directory within the `web` directory or a subdirectory of it. Avoid saving it outside the `web` directory.
+
+#### 2. Add Scripts to `index.html`
+
+After copying the JavaScript file to your app, add Flutter's initialization JS code and the plugin JS to the `head` section of your `index.html` file:
+
+```html
+<!-- Flutter initialization JS code -->
+<script src="flutter.js" defer></script>
+
+<!-- Plugin JS code -->
+<script src="readiumReader.js" defer></script>
+```
+
+If the plugin's JS file is not saved in the same directory as `index.html`, update the source path accordingly.

bin/build_js

@@ -0,0 +1,5 @@
+# Build for flutter_readium web
+echo "Building flutter_readium web"
+cd ./flutter_readium/
+npm i
+npm run build

bin/code_gen

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+set -e
+
+cd ./flutter_readium_platform_interface; dart run build_runner build --delete-conflicting-outputs

bin/forAll

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+if [ "x$1" == "x" ]
+then
+	echo "Possible usage:"
+	echo "  $0 dart pub outdated"
+	echo "  $0 dart pub upgrade"
+	exit 1
+fi
+
+dir=(
+  "./flutter_readium"
+	"./flutter_readium_platform_interface"
+	"./flutter_readium_web"
+)
+for i in "${dir[@]}"; do
+	echo -e "\033[35;1m=== $@ $i ===\033[0m"
+  (cd "$i" || exit; $@)
+done

bin/install

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+set -e
+
+./bin/forAll flutter pub get
+
+# this is not working as expected
+if [ "$(uname)" == "Darwin" ]; then
+  (cd ./flutter_readium/example/ios; pod install --repo-update)
+fi
+
+
+./bin/build_js

flutter_readium/README.md

@@ -12,3 +12,19 @@ Android and/or iOS.
 For help getting started with Flutter development, view the
 [online documentation](https://docs.flutter.dev), which offers tutorials,
 samples, guidance on mobile development, and a full API reference.
+
+## Editing on web
+
+When making changes to the TypeScript files, convert the main TypeScript file (`ReadiumReader.ts`) to JavaScript using:
+
+```bash
+npm run build
+```
+
+Run this command from the root of the plugin.
+
+To test the changes, follow the installation instructions in the example app directory.
+
+```bash
+dart run flutter_readium:copy_js_file <destination_directory>
+```

flutter_readium/android/src/main/kotlin/dk/nota/flutter_readium/ReadiumExtensions.kt

@@ -75,7 +75,8 @@ fun epubPreferencesFromMap(
       fontWeight = prefMap["fontWeight"]?.toDoubleOrNull() ?: defaults?.fontWeight,
       scroll = prefMap["verticalScroll"]?.toBoolean() ?: defaults?.scroll,
       backgroundColor = prefMap["backgroundColor"]?.let { readiumColorFromCSS(it) } ?: defaults?.backgroundColor,
-      textColor = prefMap["textColor"]?.let { readiumColorFromCSS(it) } ?: defaults?.textColor
+      textColor = prefMap["textColor"]?.let { readiumColorFromCSS(it) } ?: defaults?.textColor,
+      pageMargins = prefMap["pageMargins"]?.toDoubleOrNull() ?: defaults?.pageMargins,
     )
     return newPreferences
   } catch (ex: Exception) {

flutter_readium/bin/copy_js_file.dart

@@ -0,0 +1,42 @@
+// ignore_for_file: avoid_print
+
+import 'dart:io';
+import 'dart:isolate';
+
+void main(List<String> args) async {
+  if (args.isEmpty) {
+    print('Usage: dart run flutter_readium:copy_js_file <destination_directory>');
+    return;
+  }
+
+  final destinationDir = args[0];
+  final packageUri = Uri.parse('package:flutter_readium/helpers/readiumReader.js');
+  final resolvedUri = await Isolate.resolvePackageUri(packageUri);
+
+  if (resolvedUri == null) {
+    print('Error: Could not resolve package URI');
+    return;
+  }
+
+  final sourcePath = resolvedUri.toFilePath();
+  final sourceFile = File(sourcePath);
+
+  if (!sourceFile.existsSync()) {
+    print('Error: Source file not found: $sourcePath');
+    return;
+  }
+
+  final destinationPath = '$destinationDir/readiumReader.js';
+  // final destinationFile = File(destinationPath);
+
+  try {
+    // Ensure the destination directory exists
+    Directory(destinationDir).createSync(recursive: true);
+
+    // Copy the file
+    sourceFile.copySync(destinationPath);
+    print('File copied to $destinationPath');
+  } catch (e) {
+    print('Error copying file: $e');
+  }
+}

flutter_readium/example/assets/webManifestList.json

@@ -0,0 +1,4 @@
+[
+  "https://merkur.live.dbb.dk/opds2/publication/free/merkur:libraryid:37881/manifest.json",
+  "https://publication-server.readium.org/bW9ieS1kaWNrLmVwdWI/manifest.json"
+]

flutter_readium/example/lib/main.dart

@@ -4,7 +4,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:hydrated_bloc/hydrated_bloc.dart';
 import 'package:path_provider/path_provider.dart';
 
-import 'extensions/text_settings_theme.dart' show themes;
 import 'pages/index.dart';
 import 'state/index.dart';
 
@@ -29,7 +28,11 @@ Future<void> main() async {
           lazy: false,
         ),
         BlocProvider(
-          create: (final _) => TextSettingsBloc()..add(ChangeTheme(themes[0])),
+          create: (final _) {
+            final bloc = TextSettingsBloc();
+            bloc.setDefaultPreferences();
+            return bloc;
+          },
         ),
         // BlocProvider(
         //   create: (final _) => TtsSettingsBloc(),

flutter_readium/example/lib/pages/bookshelf.page.dart

@@ -1,7 +1,9 @@
+import 'dart:convert';
 import 'dart:io';
 
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -19,40 +21,47 @@ class BookshelfPage extends StatefulWidget {
 
 class BookshelfPageState extends State<BookshelfPage> {
   final _flutterReadiumPlugin = FlutterReadium();
+  final ScrollController _scrollController = ScrollController();
   List<Publication> _testPublications = [];
   bool _isLoading = true;
   // Pubs loaded from assets folder should not be delete-able as they would just be re-added on restart
   // we should probably make it so they will only be loaded once
   final List<String> _identifiersFromAsset = ['dk-nota-714304'];
 
-  // TODO: find a better solution for initialLocator.
-  final initialLocator = Locator(
-    href: '/OPS/main2.xml',
-    title: 'Test',
-    // locations: Locations(cssSelector: '#chapter_245810 > div > p:nth-child(19)'),
-    locations: Locations(
-      progression: 0.38461538461538464,
-      position: 26,
-      totalProgression: 0.176056338028169,
-    ),
-    type: 'text/html',
-  );
-
   @override
   void initState() {
     super.initState();
     _initialize();
   }
 
   Future<void> _initialize() async {
-    // should only be done first time app is started. how to do that?
-    final localPublications = await PublicationUtils.moveAssetPublicationsToReadiumStorage();
     final loadedPublications = <Publication>[];
 
-    for (String localPubPath in localPublications) {
-      Publication? publication = await openPublicationFromUrl(localPubPath);
-      if (publication != null) {
-        loadedPublications.add(publication);
+    if (kIsWeb) {
+      // Web: Load publications from JSON asset
+      final String response = await rootBundle.loadString('assets/webManifestList.json');
+      final List<dynamic> manifestHrefs = json.decode(response);
+      for (final href in manifestHrefs) {
+        try {
+          Publication? pub;
+          pub = await openPublicationFromUrl(href.toString());
+          if (pub != null) {
+            loadedPublications.add(pub);
+            await _flutterReadiumPlugin.closePublication(pub.identifier);
+          }
+        } on Exception catch (e) {
+          debugPrint('Error opening publication: $e');
+        }
+      }
+    } else {
+      // should only be done first time app is started. how to do that?
+      final localPublications = await PublicationUtils.moveAssetPublicationsToReadiumStorage();
+
+      for (String localPubPath in localPublications) {
+        Publication? publication = await openPublicationFromUrl(localPubPath);
+        if (publication != null) {
+          loadedPublications.add(publication);
+        }
       }
     }
 
@@ -64,7 +73,9 @@ class BookshelfPageState extends State<BookshelfPage> {
 
   Future<Publication?> openPublicationFromUrl(String pubUrl) async {
     try {
-      Publication pub = await _flutterReadiumPlugin.openPublication(pubUrl);
+      Publication pub = kIsWeb
+          ? await _flutterReadiumPlugin.getPublication(pubUrl)
+          : await _flutterReadiumPlugin.openPublication(pubUrl);
       debugPrint('openPublication success: ${pub.metadata.title}');
       return pub;
     } on PlatformException catch (e) {
@@ -73,6 +84,12 @@ class BookshelfPageState extends State<BookshelfPage> {
     }
   }
 
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(final BuildContext context) => Scaffold(
         restorationId: 'bookshelf_page',
@@ -87,9 +104,11 @@ class BookshelfPageState extends State<BookshelfPage> {
                   children: [
                     Expanded(
                       child: CupertinoScrollbar(
+                        controller: _scrollController,
                         thickness: 5.0,
                         thumbVisibility: true,
                         child: ListView.builder(
+                          controller: _scrollController,
                           itemCount: _testPublications.length,
                           itemBuilder: (final context, final index) {
                             final publication = _testPublications[index];

flutter_readium/example/lib/pages/player.page.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_readium/flutter_readium.dart';
+import 'package:pointer_interceptor/pointer_interceptor.dart';
 
 import '../state/index.dart';
 import '../widgets/index.dart';
@@ -66,7 +67,7 @@ class _PlayerPageState extends State<PlayerPage> with RestorationMixin {
             showModalBottomSheet(
               context: context,
               isScrollControlled: true,
-              builder: (final context) => const TextSettingsWidget(),
+              builder: (final context) => PointerInterceptor(child: const TextSettingsWidget()),
             );
           },
           tooltip: 'Open text style settings',