Ellet
1 year ago
parent
b9b1ecb2bd
commit
f0d011007e
25 changed files with 466 additions and 217 deletions
File diff suppressed because one or more lines are too long
@ -1,118 +1,115 @@ |
||||
library universal_ui; |
||||
|
||||
import 'package:flutter/cupertino.dart'; |
||||
import 'package:flutter/foundation.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
import 'package:flutter_quill_extensions/flutter_quill_extensions.dart'; |
||||
import 'package:universal_html/html.dart' as html; |
||||
import 'package:youtube_player_flutter/youtube_player_flutter.dart'; |
||||
|
||||
import '../widgets/responsive_widget.dart'; |
||||
import 'fake_ui.dart' if (dart.library.html) 'real_ui.dart' as ui_instance; |
||||
// import '../widgets/responsive_widget.dart'; |
||||
// import 'fake_ui.dart' if (dart.library.html) 'real_ui.dart' as ui_instance; |
||||
|
||||
class PlatformViewRegistryFix { |
||||
void registerViewFactory(dynamic x, dynamic y) { |
||||
if (kIsWeb) { |
||||
ui_instance.PlatformViewRegistry.registerViewFactory( |
||||
x, |
||||
y, |
||||
); |
||||
} |
||||
} |
||||
} |
||||
// class PlatformViewRegistryFix { |
||||
// void registerViewFactory(dynamic x, dynamic y) { |
||||
// if (kIsWeb) { |
||||
// ui_instance.PlatformViewRegistry.registerViewFactory( |
||||
// x, |
||||
// y, |
||||
// ); |
||||
// } |
||||
// } |
||||
// } |
||||
|
||||
class UniversalUI { |
||||
PlatformViewRegistryFix platformViewRegistry = PlatformViewRegistryFix(); |
||||
} |
||||
// class UniversalUI { |
||||
// PlatformViewRegistryFix platformViewRegistry = PlatformViewRegistryFix(); |
||||
// } |
||||
|
||||
var ui = UniversalUI(); |
||||
// var ui = UniversalUI(); |
||||
|
||||
class ImageEmbedBuilderWeb extends EmbedBuilder { |
||||
@override |
||||
String get key => BlockEmbed.imageType; |
||||
// class ImageEmbedBuilderWeb extends EmbedBuilder { |
||||
// @override |
||||
// String get key => BlockEmbed.imageType; |
||||
|
||||
@override |
||||
Widget build( |
||||
BuildContext context, |
||||
QuillController controller, |
||||
Embed node, |
||||
bool readOnly, |
||||
bool inline, |
||||
TextStyle textStyle, |
||||
) { |
||||
final imageUrl = node.value.data; |
||||
if (isImageBase64(imageUrl)) { |
||||
// TODO: handle imageUrl of base64 |
||||
return const SizedBox(); |
||||
} |
||||
final size = MediaQuery.sizeOf(context); |
||||
UniversalUI().platformViewRegistry.registerViewFactory(imageUrl, (viewId) { |
||||
return html.ImageElement() |
||||
..src = imageUrl |
||||
..style.height = 'auto' |
||||
..style.width = 'auto'; |
||||
}); |
||||
return Padding( |
||||
padding: EdgeInsets.only( |
||||
right: ResponsiveWidget.isMediumScreen(context) |
||||
? size.width * 0.5 |
||||
: (ResponsiveWidget.isLargeScreen(context)) |
||||
? size.width * 0.75 |
||||
: size.width * 0.2, |
||||
), |
||||
child: SizedBox( |
||||
height: size.height * 0.45, |
||||
child: HtmlElementView( |
||||
viewType: imageUrl, |
||||
), |
||||
), |
||||
); |
||||
} |
||||
} |
||||
// @override |
||||
// Widget build( |
||||
// BuildContext context, |
||||
// QuillController controller, |
||||
// Embed node, |
||||
// bool readOnly, |
||||
// bool inline, |
||||
// TextStyle textStyle, |
||||
// ) { |
||||
// final imageUrl = node.value.data; |
||||
// if (isImageBase64(imageUrl)) { |
||||
// // TODO: handle imageUrl of base64 |
||||
// return const SizedBox(); |
||||
// } |
||||
// final size = MediaQuery.sizeOf(context); |
||||
// UniversalUI().platformViewRegistry.registerViewFactory(imageUrl, |
||||
//(viewId) { |
||||
// return html.ImageElement() |
||||
// ..src = imageUrl |
||||
// ..style.height = 'auto' |
||||
// ..style.width = 'auto'; |
||||
// }); |
||||
// return Padding( |
||||
// padding: EdgeInsets.only( |
||||
// right: ResponsiveWidget.isMediumScreen(context) |
||||
// ? size.width * 0.5 |
||||
// : (ResponsiveWidget.isLargeScreen(context)) |
||||
// ? size.width * 0.75 |
||||
// : size.width * 0.2, |
||||
// ), |
||||
// child: SizedBox( |
||||
// height: size.height * 0.45, |
||||
// child: HtmlElementView( |
||||
// viewType: imageUrl, |
||||
// ), |
||||
// ), |
||||
// ); |
||||
// } |
||||
// } |
||||
|
||||
class VideoEmbedBuilderWeb extends EmbedBuilder { |
||||
@override |
||||
String get key => BlockEmbed.videoType; |
||||
// class VideoEmbedBuilderWeb extends EmbedBuilder { |
||||
// @override |
||||
// String get key => BlockEmbed.videoType; |
||||
|
||||
@override |
||||
Widget build( |
||||
BuildContext context, |
||||
QuillController controller, |
||||
Embed node, |
||||
bool readOnly, |
||||
bool inline, |
||||
TextStyle textStyle, |
||||
) { |
||||
var videoUrl = node.value.data; |
||||
if (videoUrl.contains('youtube.com') || videoUrl.contains('youtu.be')) { |
||||
final youtubeID = YoutubePlayer.convertUrlToId(videoUrl); |
||||
if (youtubeID != null) { |
||||
videoUrl = 'https://www.youtube.com/embed/$youtubeID'; |
||||
} |
||||
} |
||||
// @override |
||||
// Widget build( |
||||
// BuildContext context, |
||||
// QuillController controller, |
||||
// Embed node, |
||||
// bool readOnly, |
||||
// bool inline, |
||||
// TextStyle textStyle, |
||||
// ) { |
||||
// var videoUrl = node.value.data; |
||||
// if (videoUrl.contains('youtube.com') || videoUrl.contains('youtu.be')) { |
||||
// final youtubeID = YoutubePlayer.convertUrlToId(videoUrl); |
||||
// if (youtubeID != null) { |
||||
// videoUrl = 'https://www.youtube.com/embed/$youtubeID'; |
||||
// } |
||||
// } |
||||
|
||||
final size = MediaQuery.sizeOf(context); |
||||
// final size = MediaQuery.sizeOf(context); |
||||
|
||||
UniversalUI().platformViewRegistry.registerViewFactory( |
||||
videoUrl, |
||||
(id) => html.IFrameElement() |
||||
..width = size.width.toString() |
||||
..height = size.height.toString() |
||||
..src = videoUrl |
||||
..style.border = 'none', |
||||
); |
||||
// UniversalUI().platformViewRegistry.registerViewFactory( |
||||
// videoUrl, |
||||
// (id) => html.IFrameElement() |
||||
// ..width = size.width.toString() |
||||
// ..height = size.height.toString() |
||||
// ..src = videoUrl |
||||
// ..style.border = 'none', |
||||
// ); |
||||
|
||||
return SizedBox( |
||||
height: 500, |
||||
child: HtmlElementView( |
||||
viewType: videoUrl, |
||||
), |
||||
); |
||||
} |
||||
} |
||||
// return SizedBox( |
||||
// height: 500, |
||||
// child: HtmlElementView( |
||||
// viewType: videoUrl, |
||||
// ), |
||||
// ); |
||||
// } |
||||
// } |
||||
|
||||
List<EmbedBuilder> get defaultEmbedBuildersWeb => [ |
||||
...FlutterQuillEmbeds.editorsWebBuilders(), |
||||
// ImageEmbedBuilderWeb(), |
||||
const QuillEditorWebImageEmbedBuilder(), |
||||
VideoEmbedBuilderWeb(), |
||||
// VideoEmbedBuilderWeb(), |
||||
]; |
||||
|
||||
@ -0,0 +1,57 @@ |
||||
import 'package:flutter/widgets.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart'; |
||||
import 'package:universal_html/html.dart' as html; |
||||
import 'package:youtube_player_flutter/youtube_player_flutter.dart' |
||||
show YoutubePlayer; |
||||
|
||||
import '../../../models/config/editor/video/video_web.dart'; |
||||
import '../../utils.dart'; |
||||
import '../shims/dart_ui_fake.dart' |
||||
if (dart.library.html) 'shims/dart_ui_real.dart' as ui; |
||||
|
||||
class QuillEditorWebVideoEmbedBuilder extends EmbedBuilder { |
||||
const QuillEditorWebVideoEmbedBuilder({ |
||||
required this.configurations, |
||||
}); |
||||
|
||||
final QuillEditorWebVideoEmbedConfigurations configurations; |
||||
|
||||
@override |
||||
String get key => BlockEmbed.videoType; |
||||
|
||||
@override |
||||
Widget build( |
||||
BuildContext context, |
||||
QuillController controller, |
||||
Embed node, |
||||
bool readOnly, |
||||
bool inline, |
||||
TextStyle textStyle, |
||||
) { |
||||
var videoUrl = node.value.data; |
||||
if (isYouTubeUrl(videoUrl)) { |
||||
final youtubeID = YoutubePlayer.convertUrlToId(videoUrl); |
||||
if (youtubeID != null) { |
||||
videoUrl = 'https://www.youtube.com/embed/$youtubeID'; |
||||
} |
||||
} |
||||
|
||||
final size = MediaQuery.sizeOf(context); |
||||
|
||||
ui.PlatformViewRegistry().registerViewFactory( |
||||
videoUrl, |
||||
(id) => html.IFrameElement() |
||||
..width = size.width.toString() |
||||
..height = size.height.toString() |
||||
..src = videoUrl |
||||
..style.border = 'none', |
||||
); |
||||
|
||||
return SizedBox( |
||||
height: 500, |
||||
child: HtmlElementView( |
||||
viewType: videoUrl, |
||||
), |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
import 'package:flutter/widgets.dart' show BoxConstraints; |
||||
import 'package:meta/meta.dart' show immutable; |
||||
|
||||
@immutable |
||||
class QuillEditorWebImageEmbedConfigurations { |
||||
const QuillEditorWebImageEmbedConfigurations({ |
||||
this.constraints, |
||||
}); |
||||
|
||||
final BoxConstraints? constraints; |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
import 'package:flutter/widgets.dart' show BoxConstraints; |
||||
import 'package:meta/meta.dart' show immutable; |
||||
|
||||
@immutable |
||||
class QuillEditorWebVideoEmbedConfigurations { |
||||
const QuillEditorWebVideoEmbedConfigurations({ |
||||
this.constraints, |
||||
}); |
||||
|
||||
final BoxConstraints? constraints; |
||||
} |
||||
Loading…
Reference in new issue