import 'dart:io' as io;

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Issue reproduction',
    home: IssueHome(
      videos: <String>[
        '/path/to/first/video.mp4',
        '/path/to/second/video.mp4',
      ],
    ),
  ));
}

class IssueHome extends StatefulWidget {
  const IssueHome({super.key, required this.videos});

  final List<String> videos;

  @override
  State<IssueHome> createState() => _IssueHomeState();
}

class _IssueHomeState extends State<IssueHome> {
  int? selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: selectedIndex == null
                ? Container()
                : VideoArea(item:  widget.videos[selectedIndex!]),
          ),
          const Divider(height: 1),
          SizedBox(
            height: 175,
            child: ListView.builder(
              itemExtent: 175,
              scrollDirection: Axis.horizontal,
              itemCount: widget.videos.length,
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  onTap: () => setState(() => selectedIndex = index),
                  child: ItemSelector(
                    index: index,
                    isSelected: selectedIndex == index,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class ItemSelector extends StatelessWidget {
  ItemSelector({
    required this.index,
    required this.isSelected,
  }) : super(key: ValueKey<int>(index));

  final int index;
  final bool isSelected;

  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.passthrough,
      children: <Widget>[
        Placeholder(
          child: Text(index.toString()),
        ),
        if (isSelected)
          DecoratedBox(
            decoration: BoxDecoration(border: Border.all(width: 10, color: Colors.white)),
            child: const ColoredBox(color: Color(0x440000ff)),
          ),
      ],
    );
  }
}

class VideoArea extends StatefulWidget {
  const VideoArea({
    super.key,
    required this.item,
  });

  final String item;

  @override
  State<VideoArea> createState() => _VideoAreaState();
}

class _VideoAreaState extends State<VideoArea> {
  late VideoPlayerController _videoController;

  void _handlePlayPauseVideo() {
    setState(() {
      if (_videoController.value.isPlaying) {
        _videoController.pause();
      } else {
        _videoController.play();
      }
    });
  }

  void _initializeVideoController() {
    _videoController = VideoPlayerController.file(io.File(widget.item));
    _videoController.setLooping(true);
    _videoController.initialize().then((void _) {
      setState(() {});
    });
  }

  @override
  void initState() {
    super.initState();
    _initializeVideoController();
  }

  @override
  void didUpdateWidget(covariant VideoArea oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.item != oldWidget.item) {
      _videoController.pause();
      _videoController.dispose();
      _initializeVideoController();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    if (!_videoController.value.isInitialized) {
      return Container();
    } else {
      return GestureDetector(
        onTap: _handlePlayPauseVideo,
        child: Center(
          child: AspectRatio(
            aspectRatio: _videoController.value.aspectRatio,
            child: VideoPlayer(_videoController),
          ),
        ),
      );
    }
  }
}

_videoController.initialize().then((void _) {
  setState(() {});
});

_videoController.initialize().then((void _) {
  setState(() {});
  SchedulerBinding.instance.scheduleForcedFrame();
  SchedulerBinding.instance.scheduleFrameCallback((timeStamp) {
    setState(() {});
    SchedulerBinding.instance.scheduleForcedFrame();
    SchedulerBinding.instance.scheduleFrameCallback((timeStamp) {
      setState(() {});
    });
  });
});