Camera stream controls

assets/js/cameraImgViewHelper.js

@@ -1,25 +0,0 @@
-var messageChannel = 'HA_entity_id_placeholder';
-
-function fixCameraImgView() {
-    window.clearInterval(window.bodyDetectInterval);
-    var img = document.getElementsByTagName('img');
-
-    if (img && img.length) {
-        img[0].setAttribute('width', document.body.clientWidth);
-        img[0].removeAttribute('style');
-        setTimeout(function() {
-            window[messageChannel].postMessage(document.body.clientWidth / img[0].offsetHeight);
-        }, 200);
-        setTimeout(function() {
-            document.body.style.pointerEvents = 'none';
-            document.body.style.overflow = 'hidden';
-            window.onscroll = function () { window.scrollTo(0, 0); };
-        }, 200);
-    }
-}
-
-window.bodyDetectInterval = setInterval(function() {
-    if (document.body != null && document.getElementsByTagName('img').length) {
-        fixCameraImgView();
-    }
-}, 100);

lib/entities/camera/widgets/camera_stream_view.dart

@@ -2,7 +2,9 @@ part of '../../../main.dart';
 
 class CameraStreamView extends StatefulWidget {
 
-  CameraStreamView({Key key}) : super(key: key);
+  final bool withControls;
+
+  CameraStreamView({Key key, this.withControls: true}) : super(key: key);
 
   @override
   _CameraStreamViewState createState() => _CameraStreamViewState();
@@ -11,145 +13,220 @@ class CameraStreamView extends StatefulWidget {
 class _CameraStreamViewState extends State<CameraStreamView> {
 
   CameraEntity _entity;
-  String streamUrl = "";
+  String _streamUrl = "";
-  WebViewController webViewController;
+  WebViewController _webViewController;
-  VideoPlayerController videoPlayerController;
+  VideoPlayerController _videoPlayerController;
-  Timer monitorTimer;
+  Timer _monitorTimer;
-  bool started = false;
+  bool _isLoaded = false;
-  double aspectRatio = 1.33;
+  double _aspectRatio = 1.33;
-  String htmlView;
+  String _webViewHtml;
-  String messageChannelName = 'unknown';
+  String _jsMessageChannelName = 'unknown';
+  String _playerInfo = '';
+  Completer _loading;
 
   @override
   void initState() {
     super.initState();
   }
 
-  void loadResources() {
+  Future _loadResources() {
+    if (_loading != null && !_loading.isCompleted) {
+      Logger.d("[Camera Player] Resources loading is not finished yet");
+      return _loading.future;  
+    }
     Logger.d("[Camera Player] Loading resources");
+    _loading = Completer();
+    _entity = EntityModel
+          .of(context)
+          .entityWrapper
+          .entity;
     if (_entity.supportStream) {
       HomeAssistant().getCameraStream(_entity.entityId)
         .then((data) {
-          Logger.d("[Camera Player] Stream url: ${ConnectionManager().httpWebHost}${data["url"]}");
+          if (_videoPlayerController != null) {
-          if (videoPlayerController != null) {
+            _videoPlayerController.dispose().then((_) => createPlayer(data));
-            videoPlayerController.dispose().then((_) => createPlayer(data));
           } else {
             createPlayer(data);
           }
         })
-        .catchError((e) => Logger.e("[Camera Player] $e"));
+        .catchError((e) {
+          _loading.completeError(e);
+          Logger.e("[Camera Player] $e");
+        });
     } else {
-      streamUrl = '${ConnectionManager().httpWebHost}/api/camera_proxy_stream/${_entity
+      _streamUrl = '${ConnectionManager().httpWebHost}/api/camera_proxy_stream/${_entity
           .entityId}?token=${_entity.attributes['access_token']}';
-      messageChannelName = 'HA_${_entity.entityId.replaceAll('.', '_')}';
+      _jsMessageChannelName = 'HA_${_entity.entityId.replaceAll('.', '_')}';
       rootBundle.loadString('assets/html/cameraView.html').then((file) {
-        htmlView = Uri.dataFromString(
+        _webViewHtml = Uri.dataFromString(
-            file.replaceFirst('{{stream_url}}', streamUrl).replaceFirst('{{message_channel}}', messageChannelName),
+            file.replaceFirst('{{stream_url}}', _streamUrl).replaceFirst('{{message_channel}}', _jsMessageChannelName),
             mimeType: 'text/html',
             encoding: Encoding.getByName('utf-8')
         ).toString();
-        setState((){
+        _loading.complete();
-          started = true;
-        });
       });
     }
+    return _loading.future;
   }
 
   void createPlayer(data) {
-    videoPlayerController = VideoPlayerController.network("${ConnectionManager().httpWebHost}${data["url"]}");
+    _videoPlayerController = VideoPlayerController.network("${ConnectionManager().httpWebHost}${data["url"]}");
-    videoPlayerController.initialize().then((_) {
+    _videoPlayerController.initialize().then((_) {
       setState((){
-        started = true;
+        _aspectRatio = _videoPlayerController.value.aspectRatio;
-        aspectRatio = videoPlayerController.value.aspectRatio;
       });
+      _loading.complete();
       autoPlay();
       startMonitor();
     }).catchError((e) {
+      _loading.completeError(e);
       Logger.e("[Camera Player] Error player init. Retrying");
-      loadResources();
+      _loadResources();
     });
   }
 
   void autoPlay() {
-    if (!videoPlayerController.value.isPlaying) {
+    if (!_videoPlayerController.value.isPlaying) {
-      videoPlayerController.play();
+      _videoPlayerController.play();
     }
   }
 
   void startMonitor() {
-    monitorTimer = Timer.periodic(Duration(milliseconds: 500), (timer) {
+    _monitorTimer?.cancel();
-      if (videoPlayerController.value.hasError) {
+    _monitorTimer = Timer.periodic(Duration(milliseconds: 500), (timer) {
+      if (_videoPlayerController.value.hasError) {
+        timer.cancel();
         setState(() {
-          timer.cancel();
+          _isLoaded = false;  
-          started = false;
+        });
+      } else {
+        setState(() {
+          _playerInfo = '${_videoPlayerController.value.position}/${_videoPlayerController.value.duration}';
         });
       }
     });
   }
 
-  Widget buildLoading() {
+  Widget _buildScreen() {
-    return AspectRatio(
+    Widget screenWidget;
-      aspectRatio: aspectRatio,
+    if (!_isLoaded) {
-      child: Center(
+      screenWidget = Center(
+        child: CircularProgressIndicator()
+      );
+    } else if (_entity.supportStream) {
+      if (_videoPlayerController.value.initialized) {
+        screenWidget = VideoPlayer(_videoPlayerController);
+      } else {
+        screenWidget = Center(
           child: CircularProgressIndicator()
-        )
+        );
+      }
+    } else {
+      screenWidget = WebView(
+        initialUrl: _webViewHtml,
+        initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
+        debuggingEnabled: Logger.isInDebugMode,
+        gestureNavigationEnabled: false,
+        javascriptMode: JavascriptMode.unrestricted,
+        javascriptChannels: {
+          JavascriptChannel(
+            name: _jsMessageChannelName,
+            onMessageReceived: ((message) {
+              setState((){
+                _aspectRatio = double.tryParse(message.message) ?? 1.33;
+              });
+            })
+          )
+        },
+        onWebViewCreated: (WebViewController controller) {
+          _webViewController = controller;
+        }
+      );
+    }
+    return AspectRatio(
+      aspectRatio: _aspectRatio,
+      child: screenWidget
     );
   }
 
-  @override
+  Widget _buildControls() {
-  Widget build(BuildContext context) {
+    if (widget.withControls) {
-    if (!started) {
+      Widget playControl;
-      _entity = EntityModel
+      if (_entity.supportStream) {
-          .of(context)
+        playControl = Center(
-          .entityWrapper
+          child: IconButton(
-          .entity;
+            icon: Icon((_videoPlayerController != null && _videoPlayerController.value.isPlaying) ? Icons.pause_circle_outline : Icons.play_circle_outline),
-      loadResources();
+            iconSize: 60,
-      return buildLoading();
+            color: Colors.amberAccent,
-    } else if (_entity.supportStream) {
+            onPressed: (_videoPlayerController == null || _videoPlayerController.value.hasError || !_isLoaded) ? null :
-      if (videoPlayerController.value.initialized) {
+              () {
-        return AspectRatio(
+                setState(() {
-          aspectRatio: aspectRatio,
+                  if (_videoPlayerController != null && _videoPlayerController.value.isPlaying) {
-          child: VideoPlayer(videoPlayerController),
+                    _videoPlayerController.pause();
+                  } else {
+                    _videoPlayerController.play();
+                  }
+                });
+              },
+          ),
         );
       } else {
-        return buildLoading();
+        playControl = Container();
       }
-    } else {
+      return Row(
-      return AspectRatio(
+        mainAxisSize: MainAxisSize.max,
-        aspectRatio: aspectRatio,
+        crossAxisAlignment: CrossAxisAlignment.center,
-        child: WebView(
+        mainAxisAlignment: MainAxisAlignment.center,
-          initialUrl: htmlView,
+        children: <Widget>[
-          initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
+          IconButton(
-          debuggingEnabled: Logger.isInDebugMode,
+            icon: Icon(Icons.refresh),
-          gestureNavigationEnabled: false,
+            iconSize: 40,
-          javascriptMode: JavascriptMode.unrestricted,
+            color: Colors.amberAccent,
-          javascriptChannels: {
+            onPressed: _isLoaded ? () {
-            JavascriptChannel(
+              setState(() {
-              name: messageChannelName,
+                _isLoaded = false;  
-              onMessageReceived: ((message) {
+              });
-                setState((){
+            } : null,
-                  aspectRatio = double.tryParse(message.message) ?? 1.33;
+          ),
-                });
+          Expanded(
-              })
+            child: playControl,
-            )
+          ),
-          },
+          IconButton(
-          onWebViewCreated: (WebViewController controller) {
+            icon: Icon(Icons.fullscreen),
-            webViewController = controller;
+            iconSize: 40,
-          },
+            color: Colors.amberAccent,
-          onPageStarted: (url) {
+            onPressed: _isLoaded ? () {
-            /*rootBundle.loadString('assets/js/cameraImgViewHelper.js').then((js){
+              setState(() {});
-              webViewController.evaluateJavascript(js.replaceFirst('entity_id_placeholder', _entity.entityId.replaceAll('.', '_')));
+            } : null,
-            });*/
+          )
-          },
+        ],
-        ),
       );
+    } else {
+      return Container();
     }
   }
 
+  @override
+  Widget build(BuildContext context) {
+    if (!_isLoaded && (_loading == null || _loading.isCompleted)) {
+      _loadResources().then((_) => setState((){ _isLoaded = true; }));
+    }
+    return Card(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          _buildScreen(),
+          _buildControls(),
+          Text(_playerInfo)
+        ],
+      ),
+    );
+  }
+
   @override
   void dispose() {
-    monitorTimer?.cancel();
+    _monitorTimer?.cancel();
-    videoPlayerController?.dispose();
+    _videoPlayerController?.dispose();
     super.dispose();
   }
 }

pubspec.yaml

@@ -51,7 +51,6 @@ flutter:
   assets:
     - images/hassio-192x192.png
     - assets/js/externalAuth.js
-    - assets/js/cameraImgViewHelper.js
     - assets/html/cameraView.html
 
   fonts: