didvan-app/lib/views/home/studio/studio_details/studio_details.web.dart

import 'dart:io';
import 'dart:ui' as ui;

import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/models/view/app_bar_data.dart';
import 'package:didvan/views/home/studio/studio_details/studio_details_state.dart';
import 'package:didvan/views/home/studio/studio_details/widgets/studio_details_widget.dart';
import 'package:didvan/views/widgets/didvan/scaffold.dart';
import 'package:didvan/views/widgets/state_handlers/state_handler.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:universal_html/html.dart' as html;
import 'package:webview_flutter/webview_flutter.dart';

class StudioDetails extends StatefulWidget {
  final Map<String, dynamic> pageData;

  const StudioDetails({Key? key, required this.pageData}) : super(key: key);

  @override
  State<StudioDetails> createState() => _StudioDetailsState();
}

class _StudioDetailsState extends State<StudioDetails> {
  final _scrollController = ScrollController();

  bool _isFullScreen = false;
  bool _isInit = true;

  double _dwInPortrait = 0;
  double _scaleInPortrait = 1;

  @override
  void initState() {
    final state = context.read<StudioDetailsState>();
    Future.delayed(
      Duration.zero,
      () => state.getStudioDetails(widget.pageData['id']),
    );
    state.args = widget.pageData['args'];
    if (!kIsWeb && Platform.isAndroid) WebView.platform = AndroidWebView();
    super.initState();
  }

  Future<void> _changeFullSceen(bool value) async {
    if (value) {
      await SystemChrome.setEnabledSystemUIMode(
        SystemUiMode.manual,
        overlays: [],
      );
      SystemChrome.setSystemUIOverlayStyle(
        const SystemUiOverlayStyle(
          systemNavigationBarColor: Colors.black,
        ),
      );
      await SystemChrome.setPreferredOrientations(
        [DeviceOrientation.landscapeLeft],
      );
    } else {
      await SystemChrome.setEnabledSystemUIMode(
        SystemUiMode.manual,
        overlays: [SystemUiOverlay.bottom, SystemUiOverlay.top],
      );
      await SystemChrome.setPreferredOrientations(
        [DeviceOrientation.portraitUp],
      );
      DesignConfig.updateSystemUiOverlayStyle();
    }
    setState(() {
      _isFullScreen = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    final ds = MediaQuery.of(context).size;
    if (_isInit) {
      _dwInPortrait = MediaQuery.of(context).size.width;
      _scaleInPortrait = _dwInPortrait / 576;
      _isInit = false;
    }

    return Consumer<StudioDetailsState>(
      builder: (context, state, child) => StateHandler<StudioDetailsState>(
        state: state,
        onRetry: () => state.getStudioDetails(state.currentStudio.id),
        builder: (context, state) {
          if (state.studios.isEmpty) {
            return const SizedBox();
          }
          if (kIsWeb) {
            // ignore: undefined_prefixed_name
            ui.platformViewRegistry.registerViewFactory(
              "video",
              (int viewId) => html.IFrameElement()
                ..allowFullscreen = true
                ..src = Uri.dataFromString(
                  '<style>*{padding: 0 ; margin: 0; background: black;}</style>' +
                      state.currentStudio.media,
                  mimeType: 'text/html',
                ).toString()
                ..style.border = 'none',
            );
          }
          return WillPopScope(
            onWillPop: () async {
              if (_isFullScreen) {
                await _changeFullSceen(false);
                return false;
              }
              return true;
            },
            child: DidvanScaffold(
              scrollController: _scrollController,
              padding: EdgeInsets.zero,
              appBarData: _isFullScreen
                  ? null
                  : AppBarData(
                      isSmall: true,
                      title: state.currentStudio.title,
                    ),
              children: [
                if (kIsWeb)
                  const AspectRatio(
                    aspectRatio: 16 / 9,
                    child: HtmlElementView(viewType: 'video'),
                  ),
                if (!kIsWeb)
                  SizedBox(
                    width: ds.width,
                    height: _isFullScreen ? ds.height : ds.width * 9 / 16,
                    child: Stack(
                      children: [
                        WebView(
                          backgroundColor: Theme.of(context).colorScheme.black,
                          allowsInlineMediaPlayback: true,
                          initialUrl: Uri.dataFromString(
                            '''
                          <html>
                            <head>
                              <meta
                                name="viewport"
                                content="width=device-width, initial-scale=$_scaleInPortrait"
                              />
                              <style>
                                * {
                                  padding: 0;
                                  margin: 0;
                                  overflow: hidden;
                                }
                                iframe {
                                  max-height: 100vh;
                                }
                                .r1_iframe_embed {
                                  height: ${MediaQuery.of(context).size.width / _scaleInPortrait}px !important;
                                  padding-top: 0 !important;
                                }
                                @media(max-width:580px){
                                  .r1_iframe_embed {
                                    height: ${_dwInPortrait * 9 / 16 / _scaleInPortrait}px !important;
                                    padding-top: 0 !important;
                                  }
                                }
                              </style>
                            </head>
                            <body>
                              ${state.currentStudio.media}
                            </body>
                          </html>
                          ''',
                            mimeType: 'text/html',
                          ).toString(),
                          javascriptMode: JavascriptMode.unrestricted,
                        ),
                        if (!kIsWeb)
                          Positioned(
                            right: 42,
                            bottom: 8,
                            child: GestureDetector(
                              onTap: () => _changeFullSceen(!_isFullScreen),
                              child: Container(
                                color: Colors.transparent,
                                width: 24,
                                height: 30,
                              ),
                            ),
                          ),
                      ],
                    ),
                  ),
                const SizedBox(height: 20),
                StudioDetailsWidget(
                  onCommentsTabSelected: () => _scrollController.animateTo(
                    _scrollController.position.maxScrollExtent,
                    duration: DesignConfig.lowAnimationDuration,
                    curve: Curves.easeIn,
                  ),
                  studio: state.currentStudio,
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}