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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user