From fbaf6d4b8cb5eec5f6f88b6ff47141344efd51cb Mon Sep 17 00:00:00 2001 From: Thomas Fransolet Date: Wed, 25 Jan 2023 18:50:42 +0100 Subject: [PATCH] Fix bug + Web working + wip youtube --- lib/Screens/MainView/main_view.dart | 2 +- lib/Screens/Menu/menu_view.dart | 4 +- lib/Screens/Video/video_view.dart | 31 +++++++++++-- lib/Screens/Web/web_view.dart | 71 ++++++++++++++++++++--------- pubspec.lock | 8 ---- pubspec.yaml | 1 - 6 files changed, 78 insertions(+), 39 deletions(-) diff --git a/lib/Screens/MainView/main_view.dart b/lib/Screens/MainView/main_view.dart index cc7c648..ba8e1bd 100644 --- a/lib/Screens/MainView/main_view.dart +++ b/lib/Screens/MainView/main_view.dart @@ -92,7 +92,7 @@ class _MainViewWidget extends State { children: [ Container( width: size.width, - color: Colors.pink, + height: size.height * 0.12, child: Row( children: [ Padding( diff --git a/lib/Screens/Menu/menu_view.dart b/lib/Screens/Menu/menu_view.dart index 3a57cc9..122406d 100644 --- a/lib/Screens/Menu/menu_view.dart +++ b/lib/Screens/Menu/menu_view.dart @@ -79,7 +79,7 @@ class _MenuViewWidget extends State { Center( child: Container( width: size.width, - height: size.height * 0.8, + height: kIsWeb ? size.height * 0.8 : size.height * 0.8, decoration: selectedSection!.type != SectionType.video && selectedSection!.type != SectionType.web && selectedSection!.type != SectionType.slider && selectedSection!.type != SectionType.map ? BoxDecoration( color: kBackgroundLight, shape: BoxShape.rectangle, @@ -137,7 +137,7 @@ class _MenuViewWidget extends State { return Center( child: GridView.builder( shrinkWrap: true, - gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 1.4), + gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: kIsWeb ? 1.7 : 1.4), itemCount: menuDTO.sections!.length, itemBuilder: (BuildContext context, int index) { return InkWell( diff --git a/lib/Screens/Video/video_view.dart b/lib/Screens/Video/video_view.dart index 30e3113..68fbb86 100644 --- a/lib/Screens/Video/video_view.dart +++ b/lib/Screens/Video/video_view.dart @@ -3,7 +3,8 @@ import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:manager_api/api.dart'; import 'package:tablet_app/constants.dart'; -import 'package:youtube_player_flutter/youtube_player_flutter.dart'; +import 'package:youtube_player_iframe/youtube_player_iframe.dart'; +//import 'package:youtube_player_flutter/youtube_player_flutter.dart'; class VideoViewWidget extends StatefulWidget { final SectionDTO? section; @@ -25,9 +26,29 @@ class _VideoViewWidget extends State { String? videoId; if (videoDTO!.source_ != null && videoDTO!.source_!.length > 0 ) { - videoId = YoutubePlayer.convertUrlToId(videoDTO!.source_!); + //videoId = YoutubePlayer.convertUrlToId(videoDTO!.source_!); - YoutubePlayerController _controller = YoutubePlayerController( + final _controller = YoutubePlayerController( + params: YoutubePlayerParams( + mute: false, + showControls: true, + showFullscreenButton: false, + showVideoAnnotations: false, + strictRelatedVideos: true, + pointerEvents: PointerEvents.auto + ), + ); + + _controller.loadVideo(videoDTO!.source_!);//.loadVideoById(videoId: "3vBwRfQbXkg"); // Auto Play + +// If the requirement is just to play a single video. + /*final _controller = YoutubePlayerController.fromVideoId( + videoId: '', + autoPlay: false, + params: const YoutubePlayerParams(showFullscreenButton: true), + );*/ + + /*YoutubePlayerController _controller = YoutubePlayerController( initialVideoId: videoId!, flags: YoutubePlayerFlags( autoPlay: true, @@ -36,11 +57,11 @@ class _VideoViewWidget extends State { hideControls: false, hideThumbnail: false, ), - ); + );*/ _videoView = YoutubePlayer( controller: _controller, - showVideoProgressIndicator: false, + //showVideoProgressIndicator: false, /*progressIndicatorColor: Colors.amber, progressColors: ProgressBarColors( playedColor: Colors.amber, diff --git a/lib/Screens/Web/web_view.dart b/lib/Screens/Web/web_view.dart index 0ecdf08..91710d8 100644 --- a/lib/Screens/Web/web_view.dart +++ b/lib/Screens/Web/web_view.dart @@ -1,8 +1,13 @@ import 'dart:convert'; +import 'dart:html'; +import 'dart:ui' as ui; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:manager_api/api.dart'; import 'package:webview_flutter/webview_flutter.dart'; +import 'package:webview_flutter_platform_interface/webview_flutter_platform_interface.dart'; +//import 'package:webview_flutter_web/webview_flutter_web.dart'; class WebView extends StatefulWidget { final SectionDTO? section; @@ -13,9 +18,11 @@ class WebView extends StatefulWidget { } class _WebViewWidget extends State { + final IFrameElement _iframeElement = IFrameElement(); //WebView _webView; WebDTO webDTO = WebDTO(); WebViewController? controller; + PlatformWebViewController? controllerWeb; @override void initState() { @@ -23,27 +30,38 @@ class _WebViewWidget extends State { webDTO = WebDTO.fromJson(jsonDecode(widget.section!.data!))!; print(webDTO); - controller = WebViewController() - ..setJavaScriptMode(JavaScriptMode.unrestricted) - ..setBackgroundColor(const Color(0x00000000)) - ..setNavigationDelegate( - NavigationDelegate( - onProgress: (int progress) { - // Update loading bar. - }, - onPageStarted: (String url) {}, - onPageFinished: (String url) {}, - onWebResourceError: (WebResourceError error) {}, - onNavigationRequest: (NavigationRequest request) { - if (request.url != webDTO.source_) { - print('blocking navigation to $request}'); - return NavigationDecision.prevent; - } - return NavigationDecision.navigate; - }, - ), - ) - ..loadRequest(Uri.parse(webDTO.source_!)); + if(kIsWeb) { + _iframeElement.src = webDTO.source_!; + _iframeElement.style.border = 'none'; + + //ignore: undefined_prefixed_name + ui.platformViewRegistry.registerViewFactory( + webDTO.source_!, //use source as registered key to ensure uniqueness + (int viewId) => _iframeElement, + ); + } else { + controller = WebViewController() + ..setJavaScriptMode(JavaScriptMode.unrestricted) + ..setBackgroundColor(const Color(0x00000000)) + ..setNavigationDelegate( + NavigationDelegate( + onProgress: (int progress) { + // Update loading bar. + }, + onPageStarted: (String url) {}, + onPageFinished: (String url) {}, + onWebResourceError: (WebResourceError error) {}, + onNavigationRequest: (NavigationRequest request) { + if (request.url != webDTO.source_) { + print('blocking navigation to $request}'); + return NavigationDecision.prevent; + } + return NavigationDecision.navigate; + }, + ), + ) + ..loadRequest(Uri.parse(webDTO.source_!)); + } super.initState(); /*_webView = WebView( @@ -68,6 +86,15 @@ class _WebViewWidget extends State { super.dispose(); } + @override - Widget build(BuildContext context) => webDTO.source_ != null && webDTO.source_!.length > 0 ? WebViewWidget(controller: controller!) : Center(child: Text("La page internet ne peut pas être affichée, l'url est incorrecte ou vide")); + Widget build(BuildContext context) => webDTO.source_ != null && webDTO.source_!.length > 0 ? + kIsWeb ? + HtmlElementView( + key: UniqueKey(), + viewType: webDTO.source_!, + ) : + //WebViewWidget(controller: controller!) + Text("sousou"): + Center(child: Text("La page internet ne peut pas être affichée, l'url est incorrecte ou vide")); } //_webView \ No newline at end of file diff --git a/pubspec.lock b/pubspec.lock index 345766a..55ba266 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -932,14 +932,6 @@ packages: url: "https://pub.dev" source: hosted version: "2.0.1" - webview_flutter_web: - dependency: "direct main" - description: - name: webview_flutter_web - sha256: d9d751a95add61aa87616aa88d7fceb7b8dbd15f1d17145ca3edae95572e9a92 - url: "https://pub.dev" - source: hosted - version: "0.2.1" webview_flutter_wkwebview: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index be270a6..1de0cc0 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -31,7 +31,6 @@ dependencies: youtube_player_flutter: ^8.1.1 # Specific mobile # Specific Web - webview_flutter_web: ^0.2.1 # Specific WEB google_maps_flutter_web: ^0.4.0+5 # Specific WEB youtube_player_iframe: ^4.0.1 # Handle mobile and web here => TO TEST