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; |
library universal_ui; |
||||||
|
|
||||||
import 'package:flutter/cupertino.dart'; |
|
||||||
import 'package:flutter/foundation.dart'; |
|
||||||
import 'package:flutter_quill/flutter_quill.dart'; |
import 'package:flutter_quill/flutter_quill.dart'; |
||||||
import 'package:flutter_quill_extensions/flutter_quill_extensions.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 '../widgets/responsive_widget.dart'; |
||||||
import 'fake_ui.dart' if (dart.library.html) 'real_ui.dart' as ui_instance; |
// import 'fake_ui.dart' if (dart.library.html) 'real_ui.dart' as ui_instance; |
||||||
|
|
||||||
class PlatformViewRegistryFix { |
// class PlatformViewRegistryFix { |
||||||
void registerViewFactory(dynamic x, dynamic y) { |
// void registerViewFactory(dynamic x, dynamic y) { |
||||||
if (kIsWeb) { |
// if (kIsWeb) { |
||||||
ui_instance.PlatformViewRegistry.registerViewFactory( |
// ui_instance.PlatformViewRegistry.registerViewFactory( |
||||||
x, |
// x, |
||||||
y, |
// y, |
||||||
); |
// ); |
||||||
} |
// } |
||||||
} |
// } |
||||||
} |
// } |
||||||
|
|
||||||
class UniversalUI { |
// class UniversalUI { |
||||||
PlatformViewRegistryFix platformViewRegistry = PlatformViewRegistryFix(); |
// PlatformViewRegistryFix platformViewRegistry = PlatformViewRegistryFix(); |
||||||
} |
// } |
||||||
|
|
||||||
var ui = UniversalUI(); |
// var ui = UniversalUI(); |
||||||
|
|
||||||
class ImageEmbedBuilderWeb extends EmbedBuilder { |
// class ImageEmbedBuilderWeb extends EmbedBuilder { |
||||||
@override |
// @override |
||||||
String get key => BlockEmbed.imageType; |
// String get key => BlockEmbed.imageType; |
||||||
|
|
||||||
@override |
// @override |
||||||
Widget build( |
// Widget build( |
||||||
BuildContext context, |
// BuildContext context, |
||||||
QuillController controller, |
// QuillController controller, |
||||||
Embed node, |
// Embed node, |
||||||
bool readOnly, |
// bool readOnly, |
||||||
bool inline, |
// bool inline, |
||||||
TextStyle textStyle, |
// TextStyle textStyle, |
||||||
) { |
// ) { |
||||||
final imageUrl = node.value.data; |
// final imageUrl = node.value.data; |
||||||
if (isImageBase64(imageUrl)) { |
// if (isImageBase64(imageUrl)) { |
||||||
// TODO: handle imageUrl of base64 |
// // TODO: handle imageUrl of base64 |
||||||
return const SizedBox(); |
// return const SizedBox(); |
||||||
} |
// } |
||||||
final size = MediaQuery.sizeOf(context); |
// final size = MediaQuery.sizeOf(context); |
||||||
UniversalUI().platformViewRegistry.registerViewFactory(imageUrl, (viewId) { |
// UniversalUI().platformViewRegistry.registerViewFactory(imageUrl, |
||||||
return html.ImageElement() |
//(viewId) { |
||||||
..src = imageUrl |
// return html.ImageElement() |
||||||
..style.height = 'auto' |
// ..src = imageUrl |
||||||
..style.width = 'auto'; |
// ..style.height = 'auto' |
||||||
}); |
// ..style.width = 'auto'; |
||||||
return Padding( |
// }); |
||||||
padding: EdgeInsets.only( |
// return Padding( |
||||||
right: ResponsiveWidget.isMediumScreen(context) |
// padding: EdgeInsets.only( |
||||||
? size.width * 0.5 |
// right: ResponsiveWidget.isMediumScreen(context) |
||||||
: (ResponsiveWidget.isLargeScreen(context)) |
// ? size.width * 0.5 |
||||||
? size.width * 0.75 |
// : (ResponsiveWidget.isLargeScreen(context)) |
||||||
: size.width * 0.2, |
// ? size.width * 0.75 |
||||||
), |
// : size.width * 0.2, |
||||||
child: SizedBox( |
// ), |
||||||
height: size.height * 0.45, |
// child: SizedBox( |
||||||
child: HtmlElementView( |
// height: size.height * 0.45, |
||||||
viewType: imageUrl, |
// child: HtmlElementView( |
||||||
), |
// viewType: imageUrl, |
||||||
), |
// ), |
||||||
); |
// ), |
||||||
} |
// ); |
||||||
} |
// } |
||||||
|
// } |
||||||
|
|
||||||
class VideoEmbedBuilderWeb extends EmbedBuilder { |
// class VideoEmbedBuilderWeb extends EmbedBuilder { |
||||||
@override |
// @override |
||||||
String get key => BlockEmbed.videoType; |
// String get key => BlockEmbed.videoType; |
||||||
|
|
||||||
@override |
// @override |
||||||
Widget build( |
// Widget build( |
||||||
BuildContext context, |
// BuildContext context, |
||||||
QuillController controller, |
// QuillController controller, |
||||||
Embed node, |
// Embed node, |
||||||
bool readOnly, |
// bool readOnly, |
||||||
bool inline, |
// bool inline, |
||||||
TextStyle textStyle, |
// TextStyle textStyle, |
||||||
) { |
// ) { |
||||||
var videoUrl = node.value.data; |
// var videoUrl = node.value.data; |
||||||
if (videoUrl.contains('youtube.com') || videoUrl.contains('youtu.be')) { |
// if (videoUrl.contains('youtube.com') || videoUrl.contains('youtu.be')) { |
||||||
final youtubeID = YoutubePlayer.convertUrlToId(videoUrl); |
// final youtubeID = YoutubePlayer.convertUrlToId(videoUrl); |
||||||
if (youtubeID != null) { |
// if (youtubeID != null) { |
||||||
videoUrl = 'https://www.youtube.com/embed/$youtubeID'; |
// videoUrl = 'https://www.youtube.com/embed/$youtubeID'; |
||||||
} |
// } |
||||||
} |
// } |
||||||
|
|
||||||
final size = MediaQuery.sizeOf(context); |
// final size = MediaQuery.sizeOf(context); |
||||||
|
|
||||||
UniversalUI().platformViewRegistry.registerViewFactory( |
// UniversalUI().platformViewRegistry.registerViewFactory( |
||||||
videoUrl, |
// videoUrl, |
||||||
(id) => html.IFrameElement() |
// (id) => html.IFrameElement() |
||||||
..width = size.width.toString() |
// ..width = size.width.toString() |
||||||
..height = size.height.toString() |
// ..height = size.height.toString() |
||||||
..src = videoUrl |
// ..src = videoUrl |
||||||
..style.border = 'none', |
// ..style.border = 'none', |
||||||
); |
// ); |
||||||
|
|
||||||
return SizedBox( |
// return SizedBox( |
||||||
height: 500, |
// height: 500, |
||||||
child: HtmlElementView( |
// child: HtmlElementView( |
||||||
viewType: videoUrl, |
// viewType: videoUrl, |
||||||
), |
// ), |
||||||
); |
// ); |
||||||
} |
// } |
||||||
} |
// } |
||||||
|
|
||||||
List<EmbedBuilder> get defaultEmbedBuildersWeb => [ |
List<EmbedBuilder> get defaultEmbedBuildersWeb => [ |
||||||
|
...FlutterQuillEmbeds.editorsWebBuilders(), |
||||||
// ImageEmbedBuilderWeb(), |
// 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