Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Clicking the fullscreen controls button causes crashes or weird behavior on iOS only #172

Closed
Ayman-Kortobaa opened this issue Mar 8, 2020 · 4 comments
Assignees
Labels
bug Something isn't working fixed

Comments

@Ayman-Kortobaa
Copy link

Bug description
I have created a production app using this plugin and I have to thank you for all the great work you have done with it, but I found an issue on iOS devices only and that is when the fullscreen button is clicked the app crashes on some iOS versions (before 13) it doesn't even print error logs and on other iOS versions (13) the app rotates but the video keeps stuttering and showing weird behavior.
This issue only happens on iOS devices, Android devices are not affected by it at all.

Code
I am posting the code I am using, maybe it is an implementation error (I doubt it since it works perfectly fine on Android)

youtube_player.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class YoutubePlayerContainer extends StatefulWidget {
  const YoutubePlayerContainer(
      {Key key, @required this.youtubeController, @required this.thumbnail})
      : super(key: key);

  final YoutubePlayerController youtubeController;
  final String thumbnail;

  @override
  _YoutubePlayerContainerState createState() => _YoutubePlayerContainerState();
}

class _YoutubePlayerContainerState extends State<YoutubePlayerContainer> {
  bool loading;
  @override
  void initState() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight
    ]);
    loading = true;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Center(
        child: YoutubePlayer(
          bottomActions: <Widget>[
            CurrentPosition(),
            ProgressBar(isExpanded: true),
          ],
          controller: widget.youtubeController,
          showVideoProgressIndicator: true,
          onReady: () async {
            await Future.delayed(Duration(milliseconds: 700));
            setState(() {
              loading = false;
            });
          },
          progressIndicatorColor: Theme.of(context).primaryColor,
        ),
      ),
      if (loading)
        Center(
          child: Container(
            height: 60,
            width: 60,
            child: CircularProgressIndicator(
              strokeWidth: 6,
            ),
          ),
        ),
    ]);
  }

  @override
  void dispose() {
    widget.youtubeController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }
}

And here is where I call the previous widget passing in the controller

YoutubePlayerContainer(
                          thumbnail: thumbnail,
                          youtubeController: YoutubePlayerController(
                              initialVideoId:
                                  YoutubePlayer.convertUrlToId(videoUrl),
                              flags: YoutubePlayerFlags(enableCaption: false)),
                        )

Technical Details:

  • Device: iPhone (different versions)
  • OS: iOS 13 and before
@Ayman-Kortobaa Ayman-Kortobaa added the bug Something isn't working label Mar 8, 2020
@srinivasii
Copy link

@Ayman-Kortobaa hi, I am also facing the same issue, any work around solution

@Ayman-Kortobaa
Copy link
Author

@Ayman-Kortobaa hi, I am also facing the same issue, any work around solution

The only workaround which really doesn't achieve what I wanted was to remove the fullscreen button and make the screen rotatable, the code snippets are in the original post. I hope someone can find a better workaround or a solution.

@Ayman-Kortobaa
Copy link
Author

Ayman-Kortobaa commented Mar 19, 2020

@srinivasii I have found a better workaround and it works perfectly, using RotatedBox, I'll post the whole code snippet below because I hope that it helps.
I am not closing the issue yet as the default behaviour of the plugin is causing it.

Here's the code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class YoutubePlayerContainer extends StatefulWidget {
  const YoutubePlayerContainer({Key key, @required this.youtubeController})
      : super(key: key);

  final YoutubePlayerController youtubeController;

  @override
  _YoutubePlayerContainerState createState() => _YoutubePlayerContainerState();
}

class _YoutubePlayerContainerState extends State<YoutubePlayerContainer> {
  int _rotation;
  @override
  void initState() {
    _rotation = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: _rotation,
      child: Stack(
        children: <Widget>[
          SizedBox.expand(
            child: YoutubePlayer(
              bottomActions: <Widget>[
                IconButton(
                  icon: Icon(
                    _rotation == 0 ? Icons.fullscreen : Icons.fullscreen_exit,
                    color: Colors.white,
                  ),
                  onPressed: () async {
                    widget.youtubeController.pause();
                    if (_rotation == 0) {
                      setState(() {
                        _rotation = 1;
                      });
                    } else {
                      setState(() {
                        _rotation = 0;
                      });
                    }
                  },
                ),
                RemainingDuration(),
                ProgressBar(isExpanded: true),
                CurrentPosition(),
              ],
              controller: widget.youtubeController,
              showVideoProgressIndicator: true,
              progressIndicatorColor: Theme.of(context).primaryColor,
            ),
          ),
          Align(
            alignment: Alignment.topRight,
            child: IconButton(
              icon: Icon(
                Icons.close,
                color: Colors.white,
              ),
              onPressed: () => Navigator.of(context).pop(),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    widget.youtubeController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitDown,
      DeviceOrientation.portraitUp,
    ]);
    super.dispose();
  }
}

@sarbagyastha
Copy link
Owner

Should fix with v7.0.0. Feel free to reopen if the issue persists.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working fixed
Projects
None yet
Development

No branches or pull requests

3 participants