Fix: Remove WebView from Collabora implementation and fix font loading errors

- Reverted WebViewWidget approach that was causing null check errors
- Show placeholder UI for Office documents until proper WOPI support is implemented
- Fixed web/index.html to only load PixelatedElegance font that actually exists
- Removed references to non-existent fonts causing OTS parsing errors
This commit is contained in:
Leon Bösche
2026-01-12 00:56:38 +01:00
parent f0fe439c3b
commit 3e0094b11c
5 changed files with 122 additions and 106 deletions

View File

@@ -11,7 +11,6 @@ import '../injection.dart';
import 'package:syncfusion_flutter_pdfviewer/pdfviewer.dart';
import 'package:go_router/go_router.dart';
import 'package:http/http.dart' as http;
import 'package:webview_flutter/webview_flutter.dart';
// Modal version for overlay display
class DocumentViewerModal extends StatefulWidget {
@@ -326,33 +325,65 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
}
Widget _buildCollaboraViewer(String documentUrl, String token) {
// Collabora Online viewer URL format
// Pass document URL and token to Collabora
final Uri collaboraUri = Uri.parse('https://of.b0esche.cloud/browser/dist/index.html').replace(
queryParameters: {
'url': documentUrl,
'token': token,
},
);
return WebViewWidget(
controller: WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(
NavigationDelegate(
onPageStarted: (String url) {
// Page started loading
},
onPageFinished: (String url) {
// Page finished loading
},
onWebResourceError: (WebResourceError error) {
// Handle errors
debugPrint('WebView error: ${error.description}');
},
),
)
..loadRequest(collaboraUri),
// Build HTML to embed Collabora Online viewer
// For now, we'll show the document download option with a link to open in Collabora
// A proper implementation would require WOPI protocol support
return Container(
color: AppTheme.primaryBackground,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.description,
size: 64,
color: AppTheme.accentColor,
),
const SizedBox(height: 16),
Text(
'Office Document',
style: TextStyle(
color: AppTheme.primaryText,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
'Collabora Online Viewer',
style: TextStyle(
color: AppTheme.secondaryText,
fontSize: 14,
),
),
const SizedBox(height: 16),
Text(
'Opening document in Collabora...',
style: TextStyle(
color: AppTheme.secondaryText,
fontSize: 12,
),
),
const SizedBox(height: 24),
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
AppTheme.accentColor,
),
),
const SizedBox(height: 24),
ElevatedButton.icon(
icon: const Icon(Icons.download),
label: const Text('Download File'),
onPressed: () {
// Open file download
// In a real implementation, you'd use url_launcher
// launchUrl(state.viewUrl);
},
),
],
),
),
);
}
@@ -639,33 +670,65 @@ class _DocumentViewerState extends State<DocumentViewer> {
}
Widget _buildCollaboraViewerPage(String documentUrl, String token) {
// Collabora Online viewer URL format
// Pass document URL and token to Collabora
final Uri collaboraUri = Uri.parse('https://of.b0esche.cloud/browser/dist/index.html').replace(
queryParameters: {
'url': documentUrl,
'token': token,
},
);
return WebViewWidget(
controller: WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(
NavigationDelegate(
onPageStarted: (String url) {
// Page started loading
},
onPageFinished: (String url) {
// Page finished loading
},
onWebResourceError: (WebResourceError error) {
// Handle errors
debugPrint('WebView error: ${error.description}');
},
),
)
..loadRequest(collaboraUri),
// Build HTML to embed Collabora Online viewer
// For now, we'll show the document download option with a link to open in Collabora
// A proper implementation would require WOPI protocol support
return Container(
color: AppTheme.primaryBackground,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.description,
size: 64,
color: AppTheme.accentColor,
),
const SizedBox(height: 16),
Text(
'Office Document',
style: TextStyle(
color: AppTheme.primaryText,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
'Collabora Online Viewer',
style: TextStyle(
color: AppTheme.secondaryText,
fontSize: 14,
),
),
const SizedBox(height: 16),
Text(
'Opening document in Collabora...',
style: TextStyle(
color: AppTheme.secondaryText,
fontSize: 12,
),
),
const SizedBox(height: 24),
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
AppTheme.accentColor,
),
),
const SizedBox(height: 24),
ElevatedButton.icon(
icon: const Icon(Icons.download),
label: const Text('Download File'),
onPressed: () {
// Open file download
// In a real implementation, you'd use url_launcher
// launchUrl(state.viewUrl);
},
),
],
),
),
);
}

View File

@@ -17,7 +17,6 @@ import sqflite_darwin
import super_native_extensions
import syncfusion_pdfviewer_macos
import url_launcher_macos
import webview_flutter_wkwebview
func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
ConnectivityPlusPlugin.register(with: registry.registrar(forPlugin: "ConnectivityPlusPlugin"))
@@ -32,5 +31,4 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
SuperNativeExtensionsPlugin.register(with: registry.registrar(forPlugin: "SuperNativeExtensionsPlugin"))
SyncfusionFlutterPdfViewerPlugin.register(with: registry.registrar(forPlugin: "SyncfusionFlutterPdfViewerPlugin"))
UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))
WebViewFlutterPlugin.register(with: registry.registrar(forPlugin: "WebViewFlutterPlugin"))
}

View File

@@ -1453,38 +1453,6 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.2.1"
webview_flutter:
dependency: "direct main"
description:
name: webview_flutter
sha256: a3da219916aba44947d3a5478b1927876a09781174b5a2b67fa5be0555154bf9
url: "https://pub.dev"
source: hosted
version: "4.13.1"
webview_flutter_android:
dependency: transitive
description:
name: webview_flutter_android
sha256: eeeb3fcd5f0ff9f8446c9f4bbc18a99b809e40297528a3395597d03aafb9f510
url: "https://pub.dev"
source: hosted
version: "4.10.11"
webview_flutter_platform_interface:
dependency: transitive
description:
name: webview_flutter_platform_interface
sha256: "63d26ee3aca7256a83ccb576a50272edd7cfc80573a4305caa98985feb493ee0"
url: "https://pub.dev"
source: hosted
version: "2.14.0"
webview_flutter_wkwebview:
dependency: transitive
description:
name: webview_flutter_wkwebview
sha256: e49f378ed066efb13fc36186bbe0bd2425630d4ea0dbc71a18fdd0e4d8ed8ebc
url: "https://pub.dev"
source: hosted
version: "3.23.5"
win32:
dependency: transitive
description:

View File

@@ -55,7 +55,6 @@ dependencies:
infinite_scroll_pagination: ^5.1.1
collection: ^1.18.0
syncfusion_flutter_pdfviewer: ^31.1.21
webview_flutter: ^4.10.0
dev_dependencies:
flutter_test:

View File

@@ -30,26 +30,14 @@
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<!-- Preload fonts -->
<link rel="preload" href="assets/fonts/veteran-typewriter/veteran_typewriter.ttf" as="font" type="font/ttf"
<!-- Preload PixelatedElegance brand font -->
<link rel="preload" href="assets/fonts/pixelated-elegance/PixelatedEleganceRegular-ovyAA.ttf" as="font" type="font/ttf"
crossorigin>
<link rel="preload" href="assets/fonts/animal-park/animal_park.otf" as="font" type="font/otf" crossorigin>
<link rel="preload" href="assets/fonts/renoire-demo/renoire_demo.otf" as="font" type="font/otf" crossorigin>
<style>
@font-face {
font-family: 'VeteranTypewriter';
src: url('assets/fonts/veteran-typewriter/veteran_typewriter.ttf') format('truetype');
}
@font-face {
font-family: 'AnimalPark';
src: url('assets/fonts/animal-park/animal_park.otf') format('opentype');
}
@font-face {
font-family: 'RenoireDemo';
src: url('assets/fonts/renoire-demo/renoire_demo.otf') format('opentype');
font-family: 'PixelatedElegance';
src: url('assets/fonts/pixelated-elegance/PixelatedEleganceRegular-ovyAA.ttf') format('truetype');
}
</style>