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

import 'dart:io';

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: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.studio.id),
        builder: (context, state) {
          if (state.prevStudio == null &&
              state.nextStudio == null &&
              state.args.page != 0) {
            return const SizedBox();
          }
          return WillPopScope(
            onWillPop: () async {
              if (_isFullScreen) {
                await _changeFullSceen(false);
                return false;
              }
              return true;
            },
            child: DidvanScaffold(
              scrollController: _scrollController,
              backgroundColor: Theme.of(context).colorScheme.surface,
              padding: EdgeInsets.zero,
              appBarData: _isFullScreen
                  ? null
                  : AppBarData(
                      isSmall: true,
                      title: state.studio.title,
                    ),
              children: [
                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.studio.media}
                            </body>
                          </html>
                          ''',
                          mimeType: 'text/html',
                        ).toString(),
                        javascriptMode: JavascriptMode.unrestricted,
                      ),
                      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: () => Future.delayed(
                    const Duration(milliseconds: 100),
                    () => _scrollController.animateTo(
                      _scrollController.position.maxScrollExtent,
                      duration: DesignConfig.lowAnimationDuration,
                      curve: Curves.easeIn,
                    ),
                  ),
                  studio: state.studio,
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}