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
     );
   }
 
+  Widget _buildControls() {
+    if (widget.withControls) {
+      Widget playControl;
+      if (_entity.supportStream) {
+        playControl = Center(
+          child: IconButton(
+            icon: Icon((_videoPlayerController != null && _videoPlayerController.value.isPlaying) ? Icons.pause_circle_outline : Icons.play_circle_outline),
+            iconSize: 60,
+            color: Colors.amberAccent,
+            onPressed: (_videoPlayerController == null || _videoPlayerController.value.hasError || !_isLoaded) ? null :
+              () {
+                setState(() {
+                  if (_videoPlayerController != null && _videoPlayerController.value.isPlaying) {
+                    _videoPlayerController.pause();
+                  } else {
+                    _videoPlayerController.play();
+                  }
+                });
+              },
+          ),
+        );
+      } else {
+        playControl = Container();
+      }
+      return Row(
+        mainAxisSize: MainAxisSize.max,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          IconButton(
+            icon: Icon(Icons.refresh),
+            iconSize: 40,
+            color: Colors.amberAccent,
+            onPressed: _isLoaded ? () {
+              setState(() {
+                _isLoaded = false;  
+              });
+            } : null,
+          ),
+          Expanded(
+            child: playControl,
+          ),
+          IconButton(
+            icon: Icon(Icons.fullscreen),
+            iconSize: 40,
+            color: Colors.amberAccent,
+            onPressed: _isLoaded ? () {
+              setState(() {});
+            } : null,
+          )
+        ],
+      );
+    } else {
+      return Container();
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
-    if (!started) {
+    if (!_isLoaded && (_loading == null || _loading.isCompleted)) {
-      _entity = EntityModel
+      _loadResources().then((_) => setState((){ _isLoaded = true; }));
-          .of(context)
+    }
-          .entityWrapper
+    return Card(
-          .entity;
+      child: Column(
-      loadResources();
+        mainAxisSize: MainAxisSize.min,
-      return buildLoading();
+        children: <Widget>[
-    } else if (_entity.supportStream) {
+          _buildScreen(),
-      if (videoPlayerController.value.initialized) {
+          _buildControls(),
-        return AspectRatio(
+          Text(_playerInfo)
-          aspectRatio: aspectRatio,
+        ],
-          child: VideoPlayer(videoPlayerController),
+      ),
-        );
+    );
-      } else {
-        return buildLoading();
-      }
-    } else {
-      return AspectRatio(
-        aspectRatio: aspectRatio,
-        child: WebView(
-          initialUrl: htmlView,
-          initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
-          debuggingEnabled: Logger.isInDebugMode,
-          gestureNavigationEnabled: false,
-          javascriptMode: JavascriptMode.unrestricted,
-          javascriptChannels: {
-            JavascriptChannel(
-              name: messageChannelName,
-              onMessageReceived: ((message) {
-                setState((){
-                  aspectRatio = double.tryParse(message.message) ?? 1.33;
-                });
-              })
-            )
-          },
-          onWebViewCreated: (WebViewController controller) {
-            webViewController = controller;
-          },
-          onPageStarted: (url) {
-            /*rootBundle.loadString('assets/js/cameraImgViewHelper.js').then((js){
-              webViewController.evaluateJavascript(js.replaceFirst('entity_id_placeholder', _entity.entityId.replaceAll('.', '_')));
-            });*/
-          },
-        ),
-      );
-    }     
   }
 
   @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: