Delay the projector not loaded error.

CHANGELOG

@@ -56,6 +56,8 @@ Core:
 - Highlight list entries in a light blue, if a related object is projected
   (e. g. a list of speakers of a motion) [#3301].
 - Select the projector resolution with a slider and an aspect ratio [#3311].
+- Delay the 'could not load projector' error 3 seconds to not irritate users
+  with a slow internet connection [#3323]
 
 Mediafiles:
 - Fixed reloading of PDF on page change [#3274].

openslides/core/static/js/core/projector.js

@@ -104,11 +104,12 @@ angular.module('OpenSlidesApp.core.projector', ['OpenSlidesApp.core'])
 // Projector Container Controller
 .controller('ProjectorContainerCtrl', [
     '$scope',
+    '$timeout',
     '$location',
     'gettext',
     'Projector',
-    function($scope, $location, gettext, Projector) {
+    function($scope, $timeout, $location, gettext, Projector) {
-        $scope.error = '';
+        $scope.showError = true;
 
         // watch for changes in Projector
         $scope.$watch(function () {
@@ -116,12 +117,20 @@ angular.module('OpenSlidesApp.core.projector', ['OpenSlidesApp.core'])
         }, function () {
             var projector = Projector.get($scope.projectorId);
             if (projector) {
-                $scope.error = '';
+                $scope.showError = false;
                 $scope.projectorWidth = projector.width;
                 $scope.projectorHeight = projector.height;
                 $scope.recalculateIframe();
             } else {
-                $scope.error = gettext('Can not open the projector.');
+                $scope.showError = true;
+                // delay displaying the error message, because with a slow internet
+                // connection, the autoupdate with the projector may be delayed. We
+                // de not want to irritate the user by showing this error to early.
+                $timeout(function () {
+                    if ($scope.showError) {
+                        $scope.error = gettext('Can not open the projector.');
+                    }
+                }, 3000);
             }
         });
 

openslides/core/static/templates/projector-container.html

@@ -38,12 +38,12 @@
       }
     </style>
 
-    <div id="iframewrapper" ng-hide="error">
+    <div id="iframewrapper" ng-hide="showError">
       <iframe id="iframe" ng-src="{{ '/real-projector/' + projectorId + '/'}}" frameborder="0"></iframe>
       <div id="iframeoverlay"></div>
     </div>
 
-    <div class="error" ng-show="error">
+    <div class="error" ng-show="showError">
       <p>{{ error | translate }}</p>
     </div>
   </div>