SolarNetwork/App
3
3
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

💄 Optimize embed view renderer loading logic

Browse Source
This commit is contained in:
LittleSheep
2025-09-08 15:48:10 +08:00
parent 7cd10118cc
commit edb0a25f34
1 changed files with 178 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
lib/widgets/post/embed_view_renderer.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/models/post.dart';
@@ -22,6 +23,10 @@ class EmbedViewRenderer extends HookConsumerWidget {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
// State management for lazy loading
final shouldLoad = useState(false);
final isLoading = useState(false);
return Container(
constraints: BoxConstraints(maxHeight: maxHeight ?? 400),
decoration: BoxDecoration(
@@ -93,11 +98,17 @@ class EmbedViewRenderer extends HookConsumerWidget {
),
),
// WebView content
// WebView content with lazy loading
AspectRatio(
aspectRatio: embedView.aspectRatio ?? 1,
child: InAppWebView(
initialUrlRequest: URLRequest(url: WebUri(embedView.uri)),
child:
shouldLoad.value
? Stack(
children: [
InAppWebView(
initialUrlRequest: URLRequest(
url: WebUri(embedView.uri),
),
initialSettings: InAppWebViewSettings(
javaScriptEnabled: true,
mediaPlaybackRequiresUserGesture: false,
@@ -110,7 +121,8 @@ class EmbedViewRenderer extends HookConsumerWidget {
builtInZoomControls: false,
displayZoomControls: false,
minimumFontSize: 12,
preferredContentMode: UserPreferredContentMode.RECOMMENDED,
preferredContentMode:
UserPreferredContentMode.RECOMMENDED,
allowsBackForwardNavigationGestures: false,
allowsLinkPreview: false,
isInspectable: false,
@@ -125,9 +137,10 @@ class EmbedViewRenderer extends HookConsumerWidget {
);
},
onLoadStart: (controller, url) {
// Handle load start
isLoading.value = true;
},
onLoadStop: (controller, url) async {
isLoading.value = false;
// Inject CSS to improve mobile display and remove borders
await controller.evaluateJavascript(
source: '''
@@ -190,14 +203,23 @@ class EmbedViewRenderer extends HookConsumerWidget {
);
},
onLoadError: (controller, url, code, message) {
// Handle load errors
isLoading.value = false;
},
onLoadHttpError: (controller, url, statusCode, description) {
// Handle HTTP errors
onLoadHttpError: (
controller,
url,
statusCode,
description,
) {
isLoading.value = false;
},
shouldOverrideUrlLoading: (controller, navigationAction) async {
shouldOverrideUrlLoading: (
controller,
navigationAction,
) async {
final uri = navigationAction.request.url;
if (uri != null && uri.toString() != embedView.uri) {
if (uri != null &&
uri.toString() != embedView.uri) {
// Open external links in browser
// You might want to use url_launcher here
return NavigationActionPolicy.CANCEL;
@@ -209,9 +231,48 @@ class EmbedViewRenderer extends HookConsumerWidget {
},
onConsoleMessage: (controller, consoleMessage) {
// Handle console messages for debugging
debugPrint('WebView Console: ${consoleMessage.message}');
debugPrint(
'WebView Console: ${consoleMessage.message}',
);
},
),
if (isLoading.value)
Container(
color: colorScheme.surfaceContainerLowest,
child: const Center(
child: CircularProgressIndicator(),
),
),
],
)
: GestureDetector(
onTap: () {
shouldLoad.value = true;
},
child: Container(
color: colorScheme.surfaceContainerLowest,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Symbols.play_arrow,
size: 48,
color: colorScheme.onSurfaceVariant.withOpacity(
0.6,
),
),
const SizedBox(height: 8),
Text(
'Tap to load content',
style: theme.textTheme.bodyMedium?.copyWith(
color: colorScheme.onSurfaceVariant
.withOpacity(0.6),
),
),
],
),
),
),
),
],
),