fluffychat/lib/pages/dialer/dialer.dart

/*
 *   Famedly
 *   Copyright (C) 2019, 2020, 2021 Famedly GmbH
 *
 *   This program is free software: you can redistribute it and/or modify
 *   it under the terms of the GNU Affero General Public License as
 *   published by the Free Software Foundation, either version 3 of the
 *   License, or (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 *   GNU Affero General Public License for more details.
 *
 *   You should have received a copy of the GNU Affero General Public License
 *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

import 'dart:async';
import 'dart:math';

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

import 'package:assets_audio_player/assets_audio_player.dart';
import 'package:flutter_webrtc/flutter_webrtc.dart';
import 'package:matrix/matrix.dart';
import 'package:pedantic/pedantic.dart';
import 'package:universal_html/html.dart' as darthtml;
import 'package:wakelock/wakelock.dart';

import 'package:fluffychat/utils/platform_infos.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'pip/pip_view.dart';

class _StreamView extends StatelessWidget {
  const _StreamView(this.wrappedStream,
      {Key? key, this.mainView = false, required this.matrixClient})
      : super(key: key);

  final WrappedMediaStream wrappedStream;
  final Client matrixClient;

  final bool mainView;

  Uri? get avatarUrl => wrappedStream.getUser().avatarUrl;

  String? get displayName => wrappedStream.displayName;

  String get avatarName => wrappedStream.avatarName;

  bool get isLocal => wrappedStream.isLocal();

  bool get mirrored =>
      wrappedStream.isLocal() &&
      wrappedStream.purpose == SDPStreamMetadataPurpose.Usermedia;

  bool get audioMuted => wrappedStream.audioMuted;

  bool get videoMuted => wrappedStream.videoMuted;

  bool get isScreenSharing =>
      wrappedStream.purpose == SDPStreamMetadataPurpose.Screenshare;

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: const BoxDecoration(
          color: Colors.black54,
        ),
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            if (videoMuted)
              Container(
                color: Colors.transparent,
              ),
            if (!videoMuted)
              RTCVideoView(
                // yes, it must explicitly be casted even though I do not feel
                // comfortable with it...
                wrappedStream.renderer as RTCVideoRenderer,
                mirror: mirrored,
                objectFit: RTCVideoViewObjectFit.RTCVideoViewObjectFitContain,
              ),
            if (videoMuted)
              Positioned(
                  child: Avatar(
                mxContent: avatarUrl,
                name: displayName,
                size: mainView ? 96 : 48,
                client: matrixClient,
                // textSize: mainView ? 36 : 24,
                // matrixClient: matrixClient,
              )),
            if (!isScreenSharing)
              Positioned(
                left: 4.0,
                bottom: 4.0,
                child: Icon(audioMuted ? Icons.mic_off : Icons.mic,
                    color: Colors.white, size: 18.0),
              )
          ],
        ));
  }
}

class Calling extends StatefulWidget {
  final VoidCallback? onClear;
  final BuildContext context;
  final String callId;
  final CallSession call;
  final Client client;

  const Calling(
      {required this.context,
      required this.call,
      required this.client,
      required this.callId,
      this.onClear,
      Key? key})
      : super(key: key);

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

class _MyCallingPage extends State<Calling> {
  Room? get room => call?.room;

  String get displayName => call?.displayName ?? '';

  String get callId => widget.callId;

  CallSession? get call => widget.call;

  MediaStream? get localStream {
    if (call != null && call!.localUserMediaStream != null) {
      return call!.localUserMediaStream!.stream!;
    }
    return null;
  }

  MediaStream? get remoteStream {
    if (call != null && call!.getRemoteStreams.isNotEmpty) {
      return call!.getRemoteStreams[0].stream!;
    }
    return null;
  }

  bool get speakerOn => call?.speakerOn ?? false;

  bool get isMicrophoneMuted => call?.isMicrophoneMuted ?? false;

  bool get isLocalVideoMuted => call?.isLocalVideoMuted ?? false;

  bool get isScreensharingEnabled => call?.screensharingEnabled ?? false;

  bool get isRemoteOnHold => call?.remoteOnHold ?? false;

  bool get voiceonly => call == null || call?.type == CallType.kVoice;

  bool get connecting => call?.state == CallState.kConnecting;

  bool get connected => call?.state == CallState.kConnected;

  bool get mirrored => call?.facingMode == 'user';

  List<WrappedMediaStream> get streams => call?.streams ?? [];
  double? _localVideoHeight;
  double? _localVideoWidth;
  EdgeInsetsGeometry? _localVideoMargin;
  CallState? _state;

  void _playCallSound() async {
    const path = 'assets/sounds/call.ogg';
    if (kIsWeb) {
      darthtml.AudioElement()
        ..src = 'assets/$path'
        ..autoplay = true
        ..load();
    } else if (PlatformInfos.isMobile) {
      await AssetsAudioPlayer.newPlayer().open(Audio(path));
    } else {
      Logs().w('Playing sound not implemented for this platform!');
    }
  }

  @override
  void initState() {
    super.initState();
    initialize();
    _playCallSound();
  }

  void initialize() async {
    final call = this.call;
    if (call == null) return;

    call.onCallStateChanged.listen(_handleCallState);
    call.onCallEventChanged.listen((event) {
      if (event == CallEvent.kFeedsChanged) {
        setState(() {
          call.tryRemoveStopedStreams();
        });
      } else if (event == CallEvent.kLocalHoldUnhold ||
          event == CallEvent.kRemoteHoldUnhold) {
        setState(() {});
        Logs().i(
            'Call hold event: local ${call.localHold}, remote ${call.remoteOnHold}');
      }
    });
    _state = call.state;

    if (call.type == CallType.kVideo) {
      try {
        // Enable wakelock (keep screen on)
        unawaited(Wakelock.enable());
      } catch (_) {}
    }
  }

  void cleanUp() {
    Timer(
      const Duration(seconds: 2),
      () => widget.onClear?.call(),
    );
    if (call?.type == CallType.kVideo) {
      try {
        unawaited(Wakelock.disable());
      } catch (_) {}
    }
  }

  @override
  void dispose() {
    super.dispose();
    call?.cleanUp.call();
  }

  void _resizeLocalVideo(Orientation orientation) {
    final shortSide = min(
        MediaQuery.of(context).size.width, MediaQuery.of(context).size.height);
    _localVideoMargin = remoteStream != null
        ? const EdgeInsets.only(top: 20.0, right: 20.0)
        : EdgeInsets.zero;
    _localVideoWidth = remoteStream != null
        ? shortSide / 3
        : MediaQuery.of(context).size.width;
    _localVideoHeight = remoteStream != null
        ? shortSide / 4
        : MediaQuery.of(context).size.height;
  }

  void _handleCallState(CallState state) {
    Logs().v('CallingPage::handleCallState: ${state.toString()}');
    if (mounted) {
      setState(() {
        _state = state;
        if (_state == CallState.kEnded) cleanUp();
      });
    }
  }

  void _answerCall() {
    setState(() {
      call?.answer();
    });
  }

  void _hangUp() {
    _playCallSound();
    setState(() {
      if (call != null && (call?.isRinging ?? false)) {
        call?.reject();
      } else {
        call?.hangup();
      }
    });
  }

  void _muteMic() {
    setState(() {
      call?.setMicrophoneMuted(!call!.isMicrophoneMuted);
    });
  }

  void _screenSharing() {
    setState(() {
      call?.setScreensharingEnabled(!call!.screensharingEnabled);
    });
  }

  void _remoteOnHold() {
    setState(() {
      call?.setRemoteOnHold(!call!.remoteOnHold);
    });
  }

  void _muteCamera() {
    setState(() {
      call?.setLocalVideoMuted(!call!.isLocalVideoMuted);
    });
  }

  void _switchCamera() async {
    if (call!.localUserMediaStream != null) {
      await Helper.switchCamera(
          call!.localUserMediaStream!.stream!.getVideoTracks()[0]);
      if (PlatformInfos.isMobile) {
        call!.facingMode == 'user'
            ? call!.facingMode = 'environment'
            : call!.facingMode = 'user';
      }
    }
    setState(() {});
  }

  /*
  void _switchSpeaker() {
    setState(() {
      session.setSpeakerOn();
    });
  }
  */

  List<Widget> _buildActionButtons(bool isFloating) {
    if (isFloating || call == null) {
      return [];
    }

    final switchCameraButton = FloatingActionButton(
      heroTag: 'switchCamera',
      onPressed: _switchCamera,
      backgroundColor: Colors.black45,
      child: const Icon(Icons.switch_camera),
    );
    /*
    var switchSpeakerButton = FloatingActionButton(
      heroTag: 'switchSpeaker',
      child: Icon(_speakerOn ? Icons.volume_up : Icons.volume_off),
      onPressed: _switchSpeaker,
      foregroundColor: Colors.black54,
      backgroundColor: Theme.of(context).backgroundColor,
    );
    */
    final hangupButton = FloatingActionButton(
      heroTag: 'hangup',
      onPressed: _hangUp,
      tooltip: 'Hangup',
      backgroundColor: _state == CallState.kEnded ? Colors.black45 : Colors.red,
      child: const Icon(Icons.call_end),
    );

    final answerButton = FloatingActionButton(
      heroTag: 'answer',
      onPressed: _answerCall,
      tooltip: 'Answer',
      backgroundColor: Colors.green,
      child: const Icon(Icons.phone),
    );

    final muteMicButton = FloatingActionButton(
      heroTag: 'muteMic',
      onPressed: _muteMic,
      foregroundColor: isMicrophoneMuted ? Colors.black26 : Colors.white,
      backgroundColor: isMicrophoneMuted ? Colors.white : Colors.black45,
      child: Icon(isMicrophoneMuted ? Icons.mic_off : Icons.mic),
    );

    final screenSharingButton = FloatingActionButton(
      heroTag: 'screenSharing',
      onPressed: _screenSharing,
      foregroundColor: isScreensharingEnabled ? Colors.black26 : Colors.white,
      backgroundColor: isScreensharingEnabled ? Colors.white : Colors.black45,
      child: const Icon(Icons.desktop_mac),
    );

    final holdButton = FloatingActionButton(
      heroTag: 'hold',
      onPressed: _remoteOnHold,
      foregroundColor: isRemoteOnHold ? Colors.black26 : Colors.white,
      backgroundColor: isRemoteOnHold ? Colors.white : Colors.black45,
      child: const Icon(Icons.pause),
    );

    final muteCameraButton = FloatingActionButton(
      heroTag: 'muteCam',
      onPressed: _muteCamera,
      foregroundColor: isLocalVideoMuted ? Colors.black26 : Colors.white,
      backgroundColor: isLocalVideoMuted ? Colors.white : Colors.black45,
      child: Icon(isLocalVideoMuted ? Icons.videocam_off : Icons.videocam),
    );

    switch (_state) {
      case CallState.kRinging:
      case CallState.kInviteSent:
      case CallState.kCreateAnswer:
      case CallState.kConnecting:
        return call!.isOutgoing
            ? <Widget>[hangupButton]
            : <Widget>[answerButton, hangupButton];
      case CallState.kConnected:
        return <Widget>[
          muteMicButton,
          //switchSpeakerButton,
          if (!voiceonly && !kIsWeb) switchCameraButton,
          if (!voiceonly) muteCameraButton,
          if (kIsWeb) screenSharingButton,
          holdButton,
          hangupButton,
        ];
      case CallState.kEnded:
        return <Widget>[
          hangupButton,
        ];
      case CallState.kFledgling:
        // TODO: Handle this case.
        break;
      case CallState.kWaitLocalMedia:
        // TODO: Handle this case.
        break;
      case CallState.kCreateOffer:
        // TODO: Handle this case.
        break;
      case null:
        // TODO: Handle this case.
        break;
    }
    return <Widget>[];
  }

  List<Widget> _buildContent(Orientation orientation, bool isFloating) {
    final stackWidgets = <Widget>[];

    final call = this.call;
    if (call == null || call.callHasEnded) {
      return stackWidgets;
    }

    if (call.localHold || call.remoteOnHold) {
      var title = '';
      if (call.localHold) {
        title = '${call.displayName} held the call.';
      } else if (call.remoteOnHold) {
        title = 'You held the call.';
      }
      stackWidgets.add(Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          const Icon(
            Icons.pause,
            size: 48.0,
            color: Colors.white,
          ),
          Text(
            title,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 24.0,
            ),
          )
        ]),
      ));
      return stackWidgets;
    }

    var primaryStream = call.remoteScreenSharingStream ??
        call.localScreenSharingStream ??
        call.remoteUserMediaStream ??
        call.localUserMediaStream;

    if (!connected) {
      primaryStream = call.localUserMediaStream;
    }

    if (primaryStream != null) {
      stackWidgets.add(Center(
        child: _StreamView(primaryStream,
            mainView: true, matrixClient: widget.client),
      ));
    }

    if (isFloating || !connected) {
      return stackWidgets;
    }

    _resizeLocalVideo(orientation);

    if (call.getRemoteStreams.isEmpty) {
      return stackWidgets;
    }

    final secondaryStreamViews = <Widget>[];

    if (call.remoteScreenSharingStream != null) {
      final remoteUserMediaStream = call.remoteUserMediaStream;
      secondaryStreamViews.add(SizedBox(
        width: _localVideoWidth,
        height: _localVideoHeight,
        child: _StreamView(remoteUserMediaStream!, matrixClient: widget.client),
      ));
      secondaryStreamViews.add(const SizedBox(height: 10));
    }

    final localStream =
        call.localUserMediaStream ?? call.localScreenSharingStream;
    if (localStream != null && !isFloating) {
      secondaryStreamViews.add(SizedBox(
        width: _localVideoWidth,
        height: _localVideoHeight,
        child: _StreamView(localStream, matrixClient: widget.client),
      ));
      secondaryStreamViews.add(const SizedBox(height: 10));
    }

    if (call.localScreenSharingStream != null && !isFloating) {
      secondaryStreamViews.add(SizedBox(
        width: _localVideoWidth,
        height: _localVideoHeight,
        child: _StreamView(call.remoteUserMediaStream!,
            matrixClient: widget.client),
      ));
      secondaryStreamViews.add(const SizedBox(height: 10));
    }

    if (secondaryStreamViews.isNotEmpty) {
      stackWidgets.add(Container(
        padding: const EdgeInsets.fromLTRB(0, 20, 0, 120),
        alignment: Alignment.bottomRight,
        child: Container(
          width: _localVideoWidth,
          margin: _localVideoMargin,
          child: Column(
            children: secondaryStreamViews,
          ),
        ),
      ));
    }

    return stackWidgets;
  }

  @override
  Widget build(BuildContext context) {
    return PIPView(builder: (context, isFloating) {
      return Scaffold(
          resizeToAvoidBottomInset: !isFloating,
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerFloat,
          floatingActionButton: SizedBox(
              width: 320.0,
              height: 150.0,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: _buildActionButtons(isFloating))),
          body: OrientationBuilder(
              builder: (BuildContext context, Orientation orientation) {
            return Container(
                decoration: const BoxDecoration(
                  color: Colors.black87,
                ),
                child: Stack(children: [
                  ..._buildContent(orientation, isFloating),
                  if (!isFloating)
                    Positioned(
                        top: 24.0,
                        left: 24.0,
                        child: IconButton(
                          color: Colors.black45,
                          icon: const Icon(Icons.arrow_back),
                          onPressed: () {
                            PIPView.of(context)?.setFloating(true);
                          },
                        ))
                ]));
          }));
    });
  }
}