flutter-sport/lib/widgets/video.dart

import 'dart:math';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:provider/provider.dart';
import 'package:sport/application.dart';
import 'package:sport/bean/carousel.dart';
import 'package:sport/bean/game.dart';
import 'package:sport/pages/game/game_detail.dart';
import 'package:sport/provider/game_model.dart';
import 'package:sport/router/navigator_util.dart';
import 'package:sport/widgets/image.dart';
import 'package:umeng_common_sdk/umeng_common_sdk.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:video_player/video_player.dart';
import 'package:visibility_detector/visibility_detector.dart';

class VideoWidget extends StatefulWidget {
  final Carousel carousel;
  final bool autoPlay;
  final bool loop;

  const VideoWidget({Key? key, required this.carousel, this.autoPlay = false, this.loop = false}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _VideoState();
}

class _VideoState extends State<VideoWidget> {
  late VideoPlayerController _videoPlayerController;
  double _opacity = 0.0;

  @override
  void initState() {
    _videoPlayerController = VideoPlayerController.network(widget.carousel.url)
      ..addListener(() {
        VideoPlayerValue value = _videoPlayerController.value;
        if (value.isInitialized && mounted) {
          setState(() {
            _opacity = value.isPlaying ? 0.0 : 1.0;
          });
        }
      })
      ..initialize().then((_) {
        setState(() {});
        _videoPlayerController.setLooping(widget.loop);
        if (widget.autoPlay) _videoPlayerController.play();
      });
    super.initState();
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    super.dispose();
  }

  void _handleVisibilityChanged(VisibilityInfo info) {
    if (_videoPlayerController.value.isInitialized != true) return;
    if (!mounted) return;
    if (info.visibleFraction == 0) {
      _videoPlayerController.pause();
    } else {
      // _videoPlayerController.play();
    }
  }

  @override
  Widget build(BuildContext context) {
    return VisibilityDetector(
      key: ValueKey(widget.carousel.url),
      onVisibilityChanged: _handleVisibilityChanged,
      child: Stack(
        fit: StackFit.expand,
        children: [
          Center(child: AspectRatio(aspectRatio: max(1.78, _videoPlayerController.value.aspectRatio), child: VideoPlayer(_videoPlayerController))),
          ValueListenableBuilder<VideoPlayerValue>(
              valueListenable: _videoPlayerController,
              builder: (context, v, __) {
                if (v.isInitialized) {
                  return GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      _videoPlayerController.pause();
                    },
                    child: AnimatedOpacity(
                      duration: new Duration(seconds: 1),
                      opacity: _opacity,
                      child: Container(
                        width: double.infinity,
                        height: double.infinity,
                        decoration: BoxDecoration(color: const Color(0xFF040404).withOpacity(.4)),
                        child: Stack(
                          fit: StackFit.expand,
                          children: <Widget>[
                            if (_opacity > 0)
                              Center(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Padding(
                                      padding: const EdgeInsets.all(20.0),
                                      child: InkWell(
                                        child: Image.asset(
                                          v.isPlaying ? "lib/assets/img/game_icon_suspend.png" : "lib/assets/img/game_icon_play.png",
                                          height: 50.0,
                                        ),
                                        onTap: () {
                                          if (v.isPlaying) {
                                            _videoPlayerController.pause();
                                          } else {
                                            if (_videoPlayerController.value.position.compareTo(_videoPlayerController.value.duration) == 0) {
                                              _videoPlayerController.seekTo(Duration.zero);
                                            }
                                            _videoPlayerController.play();
                                          }
                                        },
                                      ),
                                    ),
                                    if (widget.carousel.gameId > 0)
                                      InkWell(
                                        onTap: () async {
                                          GameModel gameModel = GetIt.I<GameModel>();
                                          GameInfoData? game = await gameModel.getGame(widget.carousel.gameId);
                                          if (game != null) NavigatorUtil.goPage(context, (context) => GameDetailsPage(game));

                                          UmengCommonSdk.onEvent("game_start_video", {"id": "${game?.id}"});
                                        },
                                        child: Container(
                                          child: Text(
                                            "前往运动",
                                            style: Theme.of(context).textTheme.headline6?.copyWith(fontSize: 12.0),
                                          ),
                                          decoration: BoxDecoration(borderRadius: BorderRadius.circular(100.0), color: Theme.of(context).colorScheme.secondary),
                                          padding: EdgeInsets.symmetric(horizontal: 20, vertical: 6),
                                        ),
                                      )
                                  ],
                                ),
                              ),
                          ],
                        ),
                      ),
                    ),
                  );
                } else {
                  if (widget.carousel.cover?.isNotEmpty == true) {
                    return Container(
                      width: double.infinity,
                      child: Center(
                        child: CachedNetworkImage(
                          imageUrl: widget.carousel.cover!,
                          fit: BoxFit.fitWidth,
                        ),
                      ),
                    );
                  }
                  return Center(child: CircularProgressIndicator());
                }
              }),
        ],
      ),
    );
  }
}