followthemoney1/iframe.dart

## iframe.dart
import 'dart:html' as html;
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'dart:math' as math;

// class IframeView extends StatefulWidget {
//   final String html;
//   const IframeView({
//     Key? key,
//     required this.html,
//   }) : super(key: key);

//   @override
//   _IframeViewState createState() => _IframeViewState();
// }

class IframeView extends StatefulWidget {
  final String htmlSource;
  IframeView({
    Key? key,
    required this.htmlSource,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return IframeViewState();
  }
}

class IframeViewState extends State<IframeView> with AutomaticKeepAliveClientMixin {
  final id = math.Random().nextInt(300).toString() + '_twitchIframe';

  @override
  void initState() {
    super.initState();
    html.Element.iframe()..slot = id;
    //ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      id,
      (int viewId) => html.Element.html(widget.htmlSource,
          validator: new html.NodeValidatorBuilder()
            ..allowHtml5()
            ..allowElement('video', attributes: ['*'])
            ..allowElement('webview', attributes: ['*'])
            ..allowElement('iframe', attributes: ['*']))
        ..style.width = '100%'
        ..style.height = '100%',
    );
  }

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(
      // key: ValueKey(id),
      viewType: id,
      // onPlatformViewCreated: ,
    );
  }
}

## ytb_player.dart
import 'dart:developer';
import 'dart:math' as math;
import 'dart:ui';

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:sport_news/ui/widgets/video_players/html_view.dart';
import 'package:webviewx/webviewx.dart';

class YoutubePlayer extends StatelessWidget {
  final divId = math.Random().nextInt(300);

  String url;
  YoutubePlayer({
    required this.url,
  });

  var showedViewDelay = false;
  late String? tempUrl;
  WebViewXController? controller;

  @override
  Widget build(BuildContext context) {
    // if (!showedViewDelay || tempUrl == null)
    //   return Card(
    //     color: Colors.white.withOpacity(0.1),
    //   );
    log('get youtube: get link');
    tempUrl = _getYoutubeId(url);
    return LayoutBuilder(builder: (BuildContext ctx, BoxConstraints constraints) {
      log('get youtube: build youtube');
      Size playerSize = Size(
        constraints.maxWidth,
        constraints.maxHeight,
      );
      log('sizes; ${playerSize}');
      final resUrl = 'https://www.youtube.com/embed/' + tempUrl! + "?enablejsapi=1&origin=https://nemesis.wtf";
      var loadData = """
       <html>
            <body>
                  <iframe
                  src="${resUrl}"
                  frameborder="0"
                  height="${playerSize.height.round() - 20}"
                  width="${playerSize.width.round() - 15}"

                   frameborder="0"
                  allowfullscreen="true"/>
             </body>
      </html>
        """;
      if (controller != null) {
        controller!.reload();
        controller!.loadContent(loadData, SourceType.html);
      }

      //   child: WebViewX(
      //     onWebViewCreated: (controller) {
      //       log("loaded web view");
      //       this.controller = controller;
      //     },
      //   ),
      // );
      return Container(
        constraints: BoxConstraints(maxHeight: playerSize.height.round() - 20),
        child: IframeView(
          htmlSource: loadData,
        ),
      );
    });
  }

  String? _getYoutubeId(String link) {
    RegExp regExp = new RegExp(
      r'.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*',
      caseSensitive: false,
      multiLine: false,
    );

    final match = regExp.firstMatch(link)?.group(1); // <- This is the fix
    // print('$link -> $match');
    return match;
  }
}
	import 'dart:html' as html;
	import 'dart:ui' as ui;

	import 'package:flutter/material.dart';
	import 'dart:math' as math;

	// class IframeView extends StatefulWidget {
	// final String html;
	// const IframeView({
	// Key? key,
	// required this.html,
	// }) : super(key: key);

	// @override
	// _IframeViewState createState() => _IframeViewState();
	// }

	class IframeView extends StatefulWidget {
	final String htmlSource;
	IframeView({
	Key? key,
	required this.htmlSource,
	}) : super(key: key);

	@override
	State<StatefulWidget> createState() {
	// TODO: implement createState
	return IframeViewState();
	}
	}

	class IframeViewState extends State<IframeView> with AutomaticKeepAliveClientMixin {
	final id = math.Random().nextInt(300).toString() + '_twitchIframe';

	@override
	void initState() {
	super.initState();
	html.Element.iframe()..slot = id;
	//ignore: undefined_prefixed_name
	ui.platformViewRegistry.registerViewFactory(
	id,
	(int viewId) => html.Element.html(widget.htmlSource,
	validator: new html.NodeValidatorBuilder()
	..allowHtml5()
	..allowElement('video', attributes: ['*'])
	..allowElement('webview', attributes: ['*'])
	..allowElement('iframe', attributes: ['*']))
	..style.width = '100%'
	..style.height = '100%',
	);
	}

	@override
	bool get wantKeepAlive => true;

	@override
	Widget build(BuildContext context) {
	return HtmlElementView(
	// key: ValueKey(id),
	viewType: id,
	// onPlatformViewCreated: ,
	);
	}
	}
	import 'dart:developer';
	import 'dart:math' as math;
	import 'dart:ui';

	import 'package:auto_size_text/auto_size_text.dart';
	import 'package:flutter/material.dart';
	import 'package:sport_news/ui/widgets/video_players/html_view.dart';
	import 'package:webviewx/webviewx.dart';

	class YoutubePlayer extends StatelessWidget {
	final divId = math.Random().nextInt(300);

	String url;
	YoutubePlayer({
	required this.url,
	});

	var showedViewDelay = false;
	late String? tempUrl;
	WebViewXController? controller;

	@override
	Widget build(BuildContext context) {
	// if (!showedViewDelay \|\| tempUrl == null)
	// return Card(
	// color: Colors.white.withOpacity(0.1),
	// );
	log('get youtube: get link');
	tempUrl = _getYoutubeId(url);
	return LayoutBuilder(builder: (BuildContext ctx, BoxConstraints constraints) {
	log('get youtube: build youtube');
	Size playerSize = Size(
	constraints.maxWidth,
	constraints.maxHeight,
	);
	log('sizes; ${playerSize}');
	final resUrl = 'https://www.youtube.com/embed/' + tempUrl! + "?enablejsapi=1&origin=https://nemesis.wtf";
	var loadData = """
	<html>
	<body>
	<iframe
	src="${resUrl}"
	frameborder="0"
	height="${playerSize.height.round() - 20}"
	width="${playerSize.width.round() - 15}"

	frameborder="0"
	allowfullscreen="true"/>
	</body>
	</html>
	""";
	if (controller != null) {
	controller!.reload();
	controller!.loadContent(loadData, SourceType.html);
	}

	// child: WebViewX(
	// onWebViewCreated: (controller) {
	// log("loaded web view");
	// this.controller = controller;
	// },
	// ),
	// );
	return Container(
	constraints: BoxConstraints(maxHeight: playerSize.height.round() - 20),
	child: IframeView(
	htmlSource: loadData,
	),
	);
	});
	}

	String? _getYoutubeId(String link) {
	RegExp regExp = new RegExp(
	r'.(?:(?:youtu\.be\/\|v\/\|vi\/\|u\/\w\/\|embed\/)\|(?:(?:watch)?\?v(?:i)?=\|\&v(?:i)?=))([^#\&\?]).*',
	caseSensitive: false,
	multiLine: false,
	);

	final match = regExp.firstMatch(link)?.group(1); // <- This is the fix
	// print('$link -> $match');
	return match;
	}
	}