SimpleWebRTC Talky Sample App, July 29 2019 release.

src/components/DisplayNameInput.tsx

@@ -12,7 +12,18 @@ function setLocalDisplayName(displayName: string) {
 }
 
 function getLocalDisplayName() {
-  return localStorage.getItem(DISPLAY_NAME_SETTINGS_KEY) || '';
+  const name = localStorage.getItem(DISPLAY_NAME_SETTINGS_KEY) || '';
+
+  // The old talky-core saved all data by first JSON stringifying,
+  // then JSON parsing on load. So we need to convert old data to
+  // the new format:
+  if (name === '"null"') {
+    return null;
+  }
+  if (name.startsWith('"') && name.endsWith('"')) {
+    return name.substring(1, name.length - 1); 
+  }
+  return name;
 }
 
 const DisplayNameInput: React.SFC<Props> = ({

src/components/Linkify.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const re = /((?:(?:https|http):\/\/)?(?:[a-z0-9.]*\.[a-z]+))/gi;
+const re = /((?:(?:https|http):\/\/)?(?:[a-z0-9.]*\.[a-z]+)(\/[^\s]*)?)/gi;
 
 function getUrls(text: string) {
   const matches = [];
@@ -15,6 +15,8 @@ function getUrls(text: string) {
 interface DetectedUrls {
   url?: string;
   text?: string;
+  scheme?: boolean;
+  slashes?: boolean;
 }
 
 function getTextSegments(text: string): DetectedUrls[] {
@@ -29,8 +31,13 @@ function getTextSegments(text: string): DetectedUrls[] {
     if (match.index === 0) {
       segments.push({ url: match[0] });
     } else if (match.index > 0) {
+      const url = match[0];
       segments.push({ text: text.slice(currentIndex, match.index) });
-      segments.push({ url: match[0] });
+      segments.push({
+        url,
+        scheme: url.startsWith('http:') || url.startsWith('http:'),
+        slashes: url.startsWith('//')
+      });
       currentIndex = match.index + match[0].length;
     }
     currentIndex = match.index + match[0].length;
@@ -55,7 +62,7 @@ const Linkify = React.memo<Props>(({ text }) => {
           return (
             <a
               key={s.url}
-              href={s.url}
+              href={s.scheme ? s.url : s.slashes ? s.url : `https://${s.url}`}
               target="_blank"
               rel="noopener noreferrer"
             >

src/components/ScreenshareControls.tsx

@@ -1,15 +1,10 @@
-import { RequestDisplayMedia, screensharing } from '@andyet/simplewebrtc';
+import { RequestDisplayMedia } from '@andyet/simplewebrtc';
 import ShareScreenIcon from 'material-icons-svg/components/baseline/ScreenShare';
 import React from 'react';
 import styled from 'styled-components';
-import { buttonBase, TalkyButton } from '../styles/button';
+import { TalkyButton } from '../styles/button';
 import mq from '../styles/media-queries';
 
-const EXTENSION_ID =
-  process.env.NODE_ENV === 'production'
-    ? 'kochadnnpmbkfdhlaajaemgjmkjfhfkb'
-    : 'ikljcimogjdaoojhmkbioipmffflodgk';
-
 const Button = styled(TalkyButton)({
   display: 'none',
   [mq.SMALL_DESKTOP]: {
@@ -17,15 +12,6 @@ const Button = styled(TalkyButton)({
   }
 });
 
-const ButtonLink = styled.a({
-  ...buttonBase,
-  display: 'none',
-  [mq.SMALL_DESKTOP]: {
-    display: 'block'
-  },
-  alignItems: 'center'
-});
-
 const EmptySpacer = styled.span({
   width: '120px'
 });
@@ -35,32 +21,17 @@ const EmptySpacer = styled.span({
 // required by the user's browser.
 const ScreenshareControls: React.SFC = () => (
   <RequestDisplayMedia
-    extensionId={EXTENSION_ID}
     render={(getDisplayMedia, sharing) => {
-      if (sharing.ready) {
-        return (
-          <Button title="Screen Share" onClick={getDisplayMedia}>
-            <ShareScreenIcon fill="#505658" />
-            <span>Share screen</span>
-          </Button>
-        );
-      }
-      if (sharing.extensionRequired && !sharing.extensionInstalled) {
-        return (
-          <ButtonLink
-            target="_blank"
-            rel="noopener"
-            onClick={() => sharing.listenForInstallation!()}
-            href={screensharing.getExtensionURL(EXTENSION_ID)}
-          >
-            <ShareScreenIcon fill="#505658" />
-            <span>Share screen</span>
-          </ButtonLink>
-        );
-      }
       if (!sharing.available) {
         return <EmptySpacer />;
       }
+
+      return (
+        <Button title="Screen Share" onClick={getDisplayMedia}>
+          <ShareScreenIcon fill="#505658" />
+          <span>Share screen</span>
+        </Button>
+      );
     }}
   />
 );