Implement Collabora Online iframe viewer with WOPI integration

- Added dart:html and dart:ui_web imports for iframe support
- Created _buildCollaboraIframe() method to register and display iframe
- Set proper sandbox and allow attributes for Collabora functionality
- Full-screen iframe embedding of Collabora Online document editor
- Replaces placeholder UI with actual document viewing capability
This commit is contained in:
Leon Bösche
2026-01-12 01:30:53 +01:00
parent dbbad29f2f
commit d52307c792

View File

@@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:html' as html;
import 'dart:ui_web' as ui;
import '../theme/app_theme.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../blocs/document_viewer/document_viewer_bloc.dart';
@@ -450,49 +452,39 @@ class _DocumentViewerModalState extends State<DocumentViewerModal> {
}
}
Widget _buildCollaboraIframe(String collaboraUrl) {
// Register the iframe element
const String viewType = 'collabora-iframe';
// Create the iframe with proper attributes for Collabora Online
ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
final iframe = html.IFrameElement()
..src = collaboraUrl
..style.border = 'none'
..style.width = '100%'
..style.height = '100%'
..style.margin = '0'
..style.padding = '0'
..setAttribute(
'allow',
'microphone; camera; usb; autoplay; clipboard-read; clipboard-write',
);
// Prevent sandbox restrictions that might block Collabora
iframe.setAttribute(
'sandbox',
'allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation allow-pointer-lock allow-presentation allow-modals',
);
return iframe;
});
return HtmlElementView(viewType: viewType);
}
Widget _buildWebView(String url) {
// For now, show a message with the Collabora URL
// In a full implementation, you would use webview_flutter or similar
return Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.description,
size: 64,
color: AppTheme.accentColor,
),
const SizedBox(height: 16),
Text(
'Collabora Online Viewer',
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 8),
Text(
'Document URL: ${url.substring(0, 100)}...',
style: Theme.of(context).textTheme.bodySmall,
textAlign: TextAlign.center,
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
// You can implement opening in browser or using webview here
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Collabora viewer loading...'),
),
);
},
child: const Text('Open Document'),
),
],
),
),
),
);
// Embed Collabora Online in an iframe for web platform
return _buildCollaboraIframe(url);
}
@override