comunicmobile/lib/ui/screens/call_screen.dart

import 'dart:async';

import 'package:comunic/helpers/calls_helper.dart';
import 'package:comunic/helpers/conversations_helper.dart';
import 'package:comunic/helpers/events_helper.dart';
import 'package:comunic/helpers/users_helper.dart';
import 'package:comunic/lists/call_members_list.dart';
import 'package:comunic/lists/users_list.dart';
import 'package:comunic/models/call_config.dart';
import 'package:comunic/models/call_member.dart';
import 'package:comunic/models/conversation.dart';
import 'package:comunic/plugins_interface/wake_lock.dart';
import 'package:comunic/ui/routes/main_route.dart';
import 'package:comunic/ui/widgets/safe_state.dart';
import 'package:comunic/utils/account_utils.dart';
import 'package:comunic/utils/intl_utils.dart';
import 'package:comunic/utils/ui_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webrtc/rtc_peerconnection.dart';
import 'package:flutter_webrtc/webrtc.dart';

/// Call screen
///
/// @author Pierre Hubert

enum _PopupMenuOption { STOP_STREAMING, SWITCH_CAMERA }

class CallScreen extends StatefulWidget {
  final int convID;

  const CallScreen({Key key, @required this.convID})
      : assert(convID != null),
        assert(convID > 0),
        super(key: key);

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

class _CallScreenState extends SafeState<CallScreen> {
  // Widget properties
  int get convID => widget.convID;

  // State properties
  Conversation _conversation;
  String _convName;
  CallConfig _conf;
  var _error = false;
  CallMembersList _membersList;
  UsersList _usersList;
  final _peersConnections = Map<int, RTCPeerConnection>();
  final _renderers = Map<int, RTCVideoRenderer>();
  MediaStream _localStream;
  var _isLocalStreamVisible = true;
  var _hideMenuBars = false;

  bool get _canHideMenuBar =>
      _hideMenuBars &&
      _canMakeVideoCall &&
      _renderers.keys.where((f) => f != userID()).length > 0;

  bool get _canMakeVideoCall =>
      _conversation.callCapabilities == CallCapabilities.VIDEO;

  bool get isStreamingAudio =>
      _localStream != null && _localStream.getAudioTracks().length > 0;

  bool get isStreamingVideo =>
      _localStream != null && _localStream.getVideoTracks().length > 0;

  bool get isAudioMuted =>
      isStreamingAudio && !_localStream.getAudioTracks()[0].enabled;

  bool get isVideoMuted =>
      isStreamingVideo && !_localStream.getVideoTracks()[0].enabled;

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

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

  void _initCall() async {
    try {
      setState(() => _error = false);

      // First, load information about the conversation
      _conversation =
          await ConversationsHelper().getSingleOrThrow(convID, force: true);
      _convName =
          await ConversationsHelper.getConversationNameAsync(_conversation);
      assert(_convName != null);

      setState(() {});

      // Join the call
      await CallsHelper.join(convID);

      // Get call configuration
      _conf = await CallsHelper.getConfig();

      // Get current members of the call
      final membersList = await CallsHelper.getMembers(convID);
      membersList.removeUser(userID());
      _usersList = await UsersHelper().getListWithThrow(membersList.usersID);
      _membersList = membersList;

      setState(() {});

      // Register to events
      this.listen<UserJoinedCallEvent>((e) async {
        if (e.callID != convID) return;
        try {
          if (!_usersList.hasUser(e.userID))
            _usersList.add(await UsersHelper().getSingleWithThrow(e.userID));
          setState(() => _membersList.add(CallMember(userID: e.userID)));
        } catch (e, stack) {
          print("$e\n$stack");
        }
      });

      this.listen<UserLeftCallEvent>((e) {
        if (e.callID == convID) _removeMember(e.userID);
      });

      this.listen<NewCallSignalEvent>((e) {
        if (e.callID == convID) _newSignal(e);
      });

      this.listen<CallPeerReadyEvent>((e) {
        if (e.callID == convID) _memberReady(e.peerID);
      });

      this.listen<CallPeerInterruptedStreamingEvent>((e) {
        if (e.callID == convID) _removeRemotePeerConnection(e.peerID);
      });

      this.listen<CallClosedEvent>((e) {
        if (e.callID == convID) _leaveCall(needConfirm: false);
      });

      // Connect to ready peers
      for (final peer in _membersList.readyPeers)
        await this._memberReady(peer.userID);

      setState(() {});

      // Lock device await
      await setWakeLock(true);
    } catch (e, stack) {
      print("Could not initialize call! $e\n$stack");
      setState(() => _error = true);
    }
  }

  /// Do clean up operations when call screen is destroyed
  void _endCall() async {
    try {
      await setWakeLock(false);

      // Close all ready members
      for (final member in _membersList.readyPeers)
        await _removeMember(member.userID);

      // Close local stream
      await _stopStreaming();

      // Leave the call
      await CallsHelper.leave(convID);
    } catch (e, stack) {
      print("Could not end call properly! $e\n$stack");
    }
  }

  /// Make us leave the call
  void _leaveCall({bool needConfirm = true}) async {
    if (needConfirm &&
        !await showConfirmDialog(
            context: context,
            message: tr("Do you really want to leave this call ?"))) return;

    MainController.of(context).popPage();
  }

  /// Start streaming on our end
  Future<void> _startStreaming(bool includeVideo) async {
    try {
      await _stopStreaming();

      // Request user media
      _localStream = await navigator.getUserMedia({
        "audio": true,
        "video": !includeVideo
            ? false
            : {
                "mandatory": {
                  "maxWidth": '320',
                  "maxHeight": '240',
                  "minFrameRate": '24',
                },
                "facingMode": "user",
                "optional": [],
              }
      });

      // Start renderer
      _renderers[userID()] = RTCVideoRenderer();
      await _renderers[userID()].initialize();
      _renderers[userID()].srcObject = _localStream;
      setState(() {});

      // Open stream
      final peerConnection = await createPeerConnection(_conf.pluginConfig, {
        "mandatory": {},
        "optional": [],
      });

      _peersConnections[userID()] = peerConnection;
      await peerConnection.addStream(_localStream);

      peerConnection.onAddStream =
          (s) => throw Exception("Got a new stream on main peer connection!");
      peerConnection.onIceCandidate =
          (c) => CallsHelper.sendIceCandidate(convID, userID(), c);
      peerConnection.onIceConnectionState = (c) {
        print("New connection state: $c");

        if (c == RTCIceConnectionState.RTCIceConnectionStateConnected) {
          // Add a delay of two seconds to avoid racing
          Timer(Duration(seconds: 2), () => CallsHelper.markPeerReady(convID));
        }
      };
      peerConnection.onSignalingState = (c) => print("New signaling state: $c");

      // Create & send offer
      final offer = await peerConnection.createOffer({
        "mandatory": {
          "OfferToReceiveAudio": true,
          "OfferToReceiveVideo": includeVideo,
        },
        "optional": [],
      });
      await peerConnection.setLocalDescription(offer);

      await CallsHelper.sendSessionDescription(convID, userID(), offer);
    } catch (e, stack) {
      print("Could not start streaming! $e\n$stack");
      showSimpleSnack(context, tr("Could not start streaming!"));
    }
  }

  /// Stop local streaming
  Future<void> _stopStreaming() async {
    // Close peer connection
    if (_peersConnections.containsKey(userID())) {
      _peersConnections[userID()].close();
      _peersConnections.remove(userID());

      await CallsHelper.notifyStoppedStreaming(convID);
    }

    // Stop local stream
    if (_localStream != null) {
      await _localStream.dispose();
      _localStream = null;
    }

    // Close renderer
    if (_renderers.containsKey(userID())) {
      await _renderers[userID()].dispose();
      _renderers.remove(userID());
    }
  }

  /// Toggle menubar visibility
  void _toggleMenuBarsVisibility() {
    setState(() {
      _hideMenuBars = !_hideMenuBars;
    });
  }

  /// Toggle local video streaming
  Future<void> _toggleStreaming(bool isVideo) async {
    if (isVideo && !_canMakeVideoCall) {
      print("Attempting to switch video call on a non-capable video stream!");
      return;
    }

    // Start streaming if required
    if (!isStreamingAudio || (!isStreamingVideo && isVideo)) {
      await _startStreaming(isVideo);
    }

    // Toggle appropriate mute
    else {
      if (!isVideo)
        _localStream.getAudioTracks()[0].enabled =
            !_localStream.getAudioTracks()[0].enabled;
      else
        _localStream.getVideoTracks()[0].enabled =
            !_localStream.getVideoTracks()[0].enabled;
    }

    setState(() {});
  }

  /// Call this when a user started to stream media
  Future<void> _memberReady(int memberID) async {
    try {
      _membersList.getUser(memberID).status = MemberStatus.READY;
      setState(() {});

      // Create peer connection
      final peerConnection = await createPeerConnection(_conf.pluginConfig, {
        "mandatory": {
          "OfferToReceiveAudio": true,
          "OfferToReceiveVideo": _canMakeVideoCall,
        },
        "optional": [],
      });

      _peersConnections[memberID] = peerConnection;

      // Create a renderer
      _renderers[memberID] = RTCVideoRenderer();
      await _renderers[memberID].initialize();

      // Register callbacks
      peerConnection.onIceCandidate =
          (c) => CallsHelper.sendIceCandidate(convID, memberID, c);
      peerConnection.onAddStream = (s) {
        setState(() {
          _membersList.getUser(memberID).stream = s;
          _renderers[memberID].srcObject = s;
        });
      };

      // Request an offer to establish a peer connection
      await CallsHelper.requestOffer(convID, memberID);

      setState(() {});
    } catch (e, stack) {
      print("Could not connect to remote peer $e\n$stack!");
      showSimpleSnack(context, tr("Could not connect to a remote peer!"));
    }
  }

  /// Call this method each time we get a new signal
  void _newSignal(NewCallSignalEvent ev) async {
    try {
      // Check if we can process this message
      if (!_peersConnections.containsKey(ev.peerID)) {
        print(
            "Could not process a signal for the connection with peer ${ev.peerID}!");
        return;
      }

      // Check the kind of signal
      // SessionDescription
      if (ev.sessionDescription != null) {
        await _peersConnections[ev.peerID]
            .setRemoteDescription(ev.sessionDescription);

        // Send answer if required
        if (ev.sessionDescription.type == "offer") {
          final answer = await _peersConnections[ev.peerID].createAnswer({});
          await _peersConnections[ev.peerID].setLocalDescription(answer);

          await CallsHelper.sendSessionDescription(convID, ev.peerID, answer);
        }
      }

      // Ice Candidate
      else {
        await _peersConnections[ev.peerID].addCandidate(ev.candidate);
      }
    } catch (e, stack) {
      print("Error while handling new signal ! $e\n$stack");
      showSimpleSnack(context, tr("Error while processing new signal!"));
    }
  }

  /// Call this when a user has interrupted streaming
  Future<void> _removeRemotePeerConnection(int memberID) async {
    final member = _membersList.getUser(memberID);
    member.status = MemberStatus.JOINED;
    setState(() {});

    if (_peersConnections.containsKey(memberID)) {
      await _peersConnections[memberID].close();
      _peersConnections.remove(memberID);
    }

    if (_renderers.containsKey(memberID)) {
      await _renderers[memberID].dispose();
      _renderers.remove(memberID);
    }

    if (member.stream != null) {
      member.stream.dispose();
      member.stream = null;
    }
  }

  /// Call this when a member has completely left the call
  Future<void> _removeMember(int memberID) async {
    await _removeRemotePeerConnection(memberID);

    _membersList.removeUser(memberID);

    setState(() {});
  }

  /// Toggle local stream visibility
  void _toggleLocalStreamVisibility() {
    setState(() {
      _isLocalStreamVisible = !_isLocalStreamVisible;
    });
  }

  /// Handles menu selection
  void _handleSelectedMenuOption(_PopupMenuOption option) async {
    switch (option) {
      // Switch camera
      case _PopupMenuOption.SWITCH_CAMERA:
        await _localStream.getVideoTracks()[0].switchCamera();
        break;

      // Stop streaming
      case _PopupMenuOption.STOP_STREAMING:
        await _stopStreaming();
        setState(() {});
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onDoubleTap: () => _toggleMenuBarsVisibility(),
      child: Scaffold(
        appBar: _canHideMenuBar
            ? null
            : AppBar(
                leading: IconButton(
                  icon: Icon(Icons.arrow_back),
                  onPressed: () => _leaveCall(),
                ),
                title: _convName == null
                    ? CircularProgressIndicator()
                    : Text(_convName),
              ),
        body: _buildBody(),
      ),
    );
  }

  /// Build widget body
  Widget _buildBody() {
    // Handle errors
    if (_error)
      return buildErrorCard(tr("Could not initialize call!"), actions: [
        MaterialButton(
          onPressed: () => _initCall(),
          child: Text(tr("Try again").toUpperCase()),
        )
      ]);

    // Check if are not ready to show call UI
    if (_membersList == null) return buildCenteredProgressBar();

    return Column(
      children: <Widget>[
        _canHideMenuBar ? Container() : _buildMembersArea(),
        _buildVideosArea()
      ],
    );
  }

  /// Build members area
  Widget _buildMembersArea() {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: RichText(
            text: TextSpan(
                children: _membersList
                    .map((f) => TextSpan(
                        text: _usersList.getUser(f.userID).displayName + " ",
                        style: TextStyle(
                            color: f.status == MemberStatus.JOINED
                                ? null
                                : Colors.green)))
                    .toList())),
      ),
    );
  }

  /// Videos area
  Widget _buildVideosArea() {
    return Expanded(
      child: Stack(
        fit: StackFit.expand,
        children: [
          // Remove peers videos
          Column(
            children: _membersList.readyPeers
                .where(
                    (f) => f.hasVideoStream && _renderers.containsKey(f.userID))
                .map((f) => _buildMemberVideo(f.userID))
                .toList(),
          ),

          // Local peer video
          isStreamingVideo && _isLocalStreamVisible
              ? _buildLocalVideo()
              : Container(),

          // Buttons bar
          _canHideMenuBar ? Container() : _buildFooterArea()
        ],
      ),
    );
  }

  Widget _buildMemberVideo(int peerID) {
    return Expanded(child: RTCVideoView(_renderers[peerID]));
  }

  Widget _buildLocalVideo() {
    return Positioned(
      child: RTCVideoView(_renderers[userID()]),
      height: 50,
      width: 50,
      right: 10,
      bottom: (_canHideMenuBar ? 10 : 80),
    );
  }

  /// Footer area
  Widget _buildFooterArea() {
    return Positioned(
      bottom: 10,
      right: 0,
      left: 0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          // Show / hide user video button
          _FooterButton(
            visible: _canMakeVideoCall,
            icon: Icon(_isLocalStreamVisible
                ? Icons.visibility
                : Icons.visibility_off),
            onPressed: () => _toggleLocalStreamVisibility(),
          ),

          // Toggle audio button
          _FooterButton(
            onPressed: () => _toggleStreaming(false),
            icon: Icon(
                isStreamingAudio && !isAudioMuted ? Icons.mic : Icons.mic_off),
          ),

          // Hang up call
          _FooterButton(
            width: 60,
            icon: Icon(Icons.phone),
            bgColor: Colors.red.shade900,
            onPressed: () => _leaveCall(),
          ),

          // Toggle video button
          _FooterButton(
            visible: _canMakeVideoCall,
            icon: Icon(isStreamingVideo && !isVideoMuted
                ? Icons.videocam
                : Icons.videocam_off),
            onPressed: () => _toggleStreaming(true),
          ),

          // Interrupt local streaming
          PopupMenuButton<_PopupMenuOption>(
            offset: Offset(0, -110),
            itemBuilder: (c) => [
              // Switch camera
              PopupMenuItem(
                  enabled: isStreamingVideo,
                  child: Text(tr("Switch camera")),
                  value: _PopupMenuOption.SWITCH_CAMERA),

              // Interrupt streaming
              PopupMenuItem(
                  child: Text(tr("Stop streaming")),
                  value: _PopupMenuOption.STOP_STREAMING)
            ],
            child: _FooterButton(icon: Icon(Icons.menu), onPressed: null),
            onSelected: (d) => _handleSelectedMenuOption(d),
          )
        ],
      ),
    );
  }
}

class _FooterButton extends StatelessWidget {
  final Function() onPressed;
  final Widget icon;
  final bool visible;
  final double width;
  final Color bgColor;

  const _FooterButton(
      {Key key,
      @required this.icon,
      @required this.onPressed,
      this.visible = true,
      this.width = 45,
      this.bgColor = Colors.black})
      : assert(icon != null),
        assert(visible != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    if (!visible) return Container();
    return Padding(
      padding: const EdgeInsets.only(left: 6, right: 6),
      child: Container(
        width: width,
        child: FloatingActionButton(
          child: icon,
          foregroundColor: Colors.white,
          onPressed: onPressed == null ? null : () => onPressed(),
          backgroundColor: bgColor,
        ),
      ),
    );
  }
}