Basic redirection of unsupported browsers, rewording on landing + readme

README.md

@@ -1,7 +1,7 @@
 # Zipcall - Decentralized Video Chat
 
 [![Author](https://img.shields.io/badge/Author-ianramzy-brightgreen.svg)](https://ianramzy.com)
-![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)
+![License: CC-NC](https://img.shields.io/badge/License-CCNC-blue.svg)
 [![Donate](https://img.shields.io/badge/Donate-PayPal-brightgreen.svg)](https://paypal.me/ianramzy)
 [![Repo Link](https://img.shields.io/badge/Repo-Link-black.svg)](https://github.com/ianramzy/decentralized-video-chat)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?)](https://github.com/prettier/prettier)
@@ -60,10 +60,11 @@ npm start
 - Open `localhost:3000` in browser
 - If you want to use a client on another computer/network, make sure you publish your server on an HTTPS connection.
   You can use a service like [ngrok](https://ngrok.com/) for that.
-  
+
 ## Contributing
+
 Pull Requests are welcome!
 
-Please run prettier on all of your PRs before submitting, this can be done with `` prettier --write`` in the project directory
+Please run prettier on all of your PRs before submitting, this can be done with `prettier --write` in the project directory
 
-For communication we use Glitter Chat we can be found here: [![Join the chat at https://gitter.im/zipcall](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/zipcall)
+For communication we use Gitter Chat we can be found here: [![Join the chat at https://gitter.im/zipcall](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/zipcall)

public/chat.html

@@ -133,6 +133,7 @@
     <script src="/socket.io/socket.io.js"></script>
     <script src="../js/snackbar.js"></script>
     <script src="../js/autolink.js"></script>
+    <script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
     <script id="chatJS" src="../js/chat.js"></script>
   </body>
 </html>

public/js/chat.js

@@ -837,22 +837,29 @@ function togglePictureInPicture() {
 //Picture in picture
 
 function startUp() {
-  // Redirect mobile browsers
+  //  Try and detect in-app browsers and redirect
-  // if (
+  var ua = navigator.userAgent || navigator.vendor || window.opera;
-  //   /webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+  if (
-  //     navigator.userAgent
+    DetectRTC.isMobileDevice &&
-  //   )
+    (ua.indexOf("FBAN") > -1 ||
-  // ) {
+      ua.indexOf("FBAV") > -1 ||
-  //   alert(
+      ua.indexOf("Instagram") > -1)
-  //     "Zipcall is not currently supported on mobile. Please try again on desktop."
+  ) {
-  //   );
+    if (DetectRTC.osName === "iOS") {
-  //   window.location.href = "/notsupported";
+      window.location.href = "/notsupportedios";
-  // }
+    } else {
-  // Redirect unsupported browsers
+      window.location.href = "/notsupported";
+    }
+  }
+
+  // Redirect all iOS browsers that are not Safari
+  if (DetectRTC.isMobileDevice) {
+    if (DetectRTC.osName === "iOS" && !DetectRTC.browser.isSafari) {
+      window.location.href = "/notsupportedios";
+    }
+  }
+
   if (!isWebRTCSupported || browserName === "MSIE") {
-    alert(
-      "Your browser doesn't support Zipcall. Please use Chrome, Firefox, or Safari. If using iOS please use Safari"
-    );
     window.location.href = "/notsupported";
   }
 

public/landing.html

@@ -114,7 +114,7 @@
                     Zipcall is built radically different. We left behind slow
                     bulky servers, opting for decentralized peer to peer
                     calling. We engineered a platform with maximum video quality
-                    and low latency.
+                    and lowest latency.
                   </p>
                 </div>
               </div>
@@ -134,7 +134,7 @@
                     <div class="features-tiles-item-content">
                       <h4 class="mt-0 mb-8">Best Video Quality</h4>
                       <p class="m-0 text-sm">
-                        State of the art VP9 video compression combined with our
+                        State of the art video compression combined with our
                         scaling optimization makes your calls crystal clear.
                       </p>
                     </div>
@@ -224,8 +224,8 @@
                       <h4 class="mt-0 mb-8">No Server Needed</h4>
                       <p class="m-0 text-sm">
                         Calls are entirely between you and your caller,
-                        decentralized from any server. Data never leaves the
+                        decentralized from any server. Call data never leaves
-                        browser. Cool right?
+                        the browser. Cool right?
                       </p>
                     </div>
                   </div>

public/newcall.html

@@ -45,17 +45,6 @@
                 /></a>
               </h1>
             </div>
-            <button
-              id="header-nav-toggle"
-              class="header-nav-toggle"
-              aria-controls="primary-menu"
-              aria-expanded="false"
-            >
-              <span class="screen-reader">Menu</span>
-              <span class="hamburger"
-                ><span class="hamburger-inner"></span
-              ></span>
-            </button>
           </div>
         </div>
       </header>

public/notsupported.html

@@ -44,17 +44,6 @@
                 /></a>
               </h1>
             </div>
-            <button
-              id="header-nav-toggle"
-              class="header-nav-toggle"
-              aria-controls="primary-menu"
-              aria-expanded="false"
-            >
-              <span class="screen-reader">Menu</span>
-              <span class="hamburger"
-                ><span class="hamburger-inner"></span
-              ></span>
-            </button>
           </div>
         </div>
       </header>
@@ -71,8 +60,8 @@
                       class="mt-0 mb-16 reveal-from-bottom"
                       data-reveal-delay="150"
                     >
-                      Your browser is not supported. Please try Chrome, Safari,
+                      Your browser is not supported. Try updating your browser
-                      or Firefox on a desktop/laptop browser.
+                      or try Chrome, Safari, or Firefox.
                     </h1>
                   </div>
                   <style>

public/notsupportedios.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Zipcall</title>
+    <link rel="stylesheet" href="css/landing.css" />
+    <link rel="shortcut icon" href="images/logo.svg" />
+    <meta property="og:title" content="Zipcall - Decentralized video calls" />
+    <meta
+      property="og:description"
+      content="Decentralized video
+                                    calling provides real-time HD quality and latency simply
+                                    not available with traditional technology."
+    />
+    <meta property="og:image" content="https://zipcall.io/images/preview.png" />
+    <meta property="og:url" content="https://zipcall.io/" />
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-162048272-1"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+
+      gtag("js", new Date());
+      gtag("config", "UA-162048272-1");
+    </script>
+  </head>
+  <body class="has-animations">
+    <div class="body-wrap">
+      <header class="site-header reveal-from-top">
+        <div class="container">
+          <div class="site-header-inner">
+            <div class="brand">
+              <h1 class="m-0">
+                <a href="/"
+                  ><img src="images/logo.svg" alt="Neon" width="32" height="32"
+                /></a>
+              </h1>
+            </div>
+          </div>
+        </div>
+      </header>
+      <main class="site-content">
+        <section class="hero section illustration-section-01">
+          <div class="container">
+            <div class="hero-inner section-inner">
+              <div class="split-wrap invert-mobile">
+                <div class="split-item">
+                  <div
+                    class="hero-content split-item-content center-content-mobile"
+                  >
+                    <h1
+                      class="mt-0 mb-16 reveal-from-bottom"
+                      data-reveal-delay="150"
+                    >
+                      Your browser is unsupported. Please open Zipcall in the
+                      Safari app.
+                    </h1>
+                  </div>
+                  <style>
+                    @media (min-width: 641px) {
+                      .hero .split-wrap .split-item {
+                        min-height: 492px;
+                      }
+                    }
+                  </style>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <footer class="site-footer center-content-mobile">
+        <div class="container">
+          <div class="site-footer-inner">
+            <div class="footer-top space-between text-xxs">
+              <div class="brand">
+                <a href="/"
+                  ><img src="images/logo.svg" alt="Neon" width="32" height="32"
+                /></a>
+              </div>
+              <div class="footer-social">
+                <div>
+                  <a
+                    target="_blank"
+                    href="https://github.com/ianramzy/decentralized-video-chat"
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <title>GitHub</title>
+                      <path
+                        d="M7.95 0C3.578 0 0 3.578 0 7.95c0 3.479 2.286 6.46 5.466 7.553.397.1.497-.199.497-.397v-1.392c-2.187.497-2.683-.994-2.683-.994-.398-.894-.895-1.192-.895-1.192-.696-.497.1-.497.1-.497.795.1 1.192.795 1.192.795.696 1.292 1.888.894 2.286.696.1-.497.298-.895.497-1.093-1.79-.2-3.578-.895-3.578-3.976 0-.894.298-1.59.795-2.087-.1-.198-.397-.993.1-2.086 0 0 .695-.2 2.186.795a6.408 6.408 0 0 1 1.987-.299c.696 0 1.392.1 1.988.299 1.49-.994 2.186-.795 2.186-.795.398 1.093.199 1.888.1 2.086.496.597.795 1.292.795 2.087 0 3.081-1.889 3.677-3.677 3.876.298.398.596.895.596 1.59v2.187c0 .198.1.496.596.397C13.714 14.41 16 11.43 16 7.95 15.9 3.578 12.323 0 7.95 0z"
+                      />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div
+              class="footer-bottom space-between text-xxs invert-order-desktop"
+            >
+              <nav class="footer-nav">
+                <ul class="list-reset">
+                  <li>
+                    <a target="_blank" href="https://ianramzy.com"
+                      >Made with ❤️ by Ian Ramzy</a
+                    >
+                  </li>
+                  <!--                                          <li><a href="#">Contact</a></li>-->
+                  <!--                                                <li><a href="#">About us</a></li>-->
+                  <!--                                                <li><a href="#">FAQ's</a></li>-->
+                  <!--                                                <li><a href="#">Support</a></li>-->
+                </ul>
+              </nav>
+              <div class="footer-copyright">
+                &copy; 2020 Zipcall, all rights reserved
+              </div>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+    <script src="js/landing.js"></script>
+  </body>
+</html>

server.js

@@ -52,6 +52,10 @@ app.get("/notsupported", function (req, res) {
   res.sendFile(path.join(public, "notsupported.html"));
 });
 
+app.get("/notsupportedios", function (req, res) {
+  res.sendFile(path.join(public, "notsupportedios.html"));
+});
+
 // Serve static files in the public directory
 app.use(express.static("public"));