Try to detect incompatible web browsers

5 files changed, 39 insertions, 11 deletions

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index f95103365..5d8e8badf 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -44,6 +44,8 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit () {
+    document.getElementById('incompatible-browser').className += 'browser-ok'
+
     const pathname = window.location.pathname
     if (!pathname || pathname === '/') {
       this.redirectService.redirectToHomepage()
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 5750c5fca..7951e3927 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -49,8 +49,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   shortVideoDescription: string
   videoHTMLDescription = ''
   likesBarTooltipText = ''
+  hasAlreadyAcceptedPrivacyConcern = false
 
-  private hasAlreadyAcceptedPrivacyConcern = false
   private otherVideos: Video[] = []
   private paramsSub: Subscription
 
@@ -260,6 +260,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       )
   }
 
+  acceptedPrivacyConcern () {
+    localStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
+    this.hasAlreadyAcceptedPrivacyConcern = true
+  }
+
   private updateVideoDescription (description: string) {
     this.video.description = description
     this.setVideoDescriptionHTML()
@@ -470,9 +475,4 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     // Be sure the autoPlay is set to false
     return this.user.autoPlayVideo !== false
   }
-
-  private acceptedPrivacyConcern () {
-    localStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
-    this.hasAlreadyAcceptedPrivacyConcern = true
-  }
 }
diff --git a/client/src/index.html b/client/src/index.html
index a824a39e2..cd9f76cf9 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -34,6 +34,21 @@
       </p>
     </noscript>
 
+    <div id="incompatible-browser" class="alert alert-danger" style="display: none">
+      <p>We are sorry but it seems that PeerTube is not compatible with your web browser.</p>
+      <p>Please try with the latest version of <a href="https://www.mozilla.org" target="_blank">Mozilla Firefox</a>.</p>
+      <p>If you think this is a mistake, do not hesitate <a href="https://github.com/Chocobozzz/PeerTube/issues/new" target="_blank">to report it</a>.</p>
+    </div>
+
+    <script type="text/javascript">
+      window.onerror = function () {
+        var elem = document.getElementById('incompatible-browser')
+        if (elem.className.indexOf('browser-ok') === -1) {
+          elem.style.display = 'block'
+        }
+      }
+    </script>
+
     <my-app>
     </my-app>
 
diff --git a/client/src/main.ts b/client/src/main.ts
index 4b18d163c..e1a69e4a4 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -20,11 +20,14 @@ const bootstrap = () => platformBrowserDynamic()
     //     .catch(err => console.error('Cannot register service worker.', err))
     // }
 
-    navigator.serviceWorker.getRegistrations().then(registrations => {
-      for (const registration of registrations) {
-        registration.unregister()
-      }
-    })
+    if (navigator.serviceWorker) {
+      navigator.serviceWorker.getRegistrations()
+        .then(registrations => {
+          for (const registration of registrations) {
+            registration.unregister()
+          }
+        })
+    }
 
     return bootstrapModule
   })
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 438990a40..f2d9f7201 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -24,6 +24,14 @@ body {
   color: #000;
 }
 
+#incompatible-browser {
+  display: none;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  top: 45%;
+}
+
 strong {
   font-weight: $font-semibold;
 }