Writing host tests, adding deskreen icon

README.md

@@ -5,6 +5,8 @@
 
 ## Howto:
 
+# trigger
+
 ### to generate test coverage results
 
 ```

app/Routes.tsx

@@ -6,22 +6,10 @@ import routes from './constants/routes.json';
 import App from './containers/App';
 import HomePage from './containers/HomePage';
 
-// Lazily load routes and code split with webpacck
-const LazyCounterPage = React.lazy(
-  () => import(/* webpackChunkName: "CounterPage" */ './containers/CounterPage')
-);
-
-const CounterPage = (props: Record<string, any>) => (
-  <React.Suspense fallback={<h1>Loading...</h1>}>
-    <LazyCounterPage {...props} />
-  </React.Suspense>
-);
-
 export default function Routes() {
   return (
     <App>
       <Switch>
-        <Route path={routes.COUNTER} component={CounterPage} />
         <Route path={routes.HOME} component={HomePage} />
       </Switch>
     </App>

app/__snapshots__/menu.spec.ts.snap

@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app menu MenyBuilder tests when MenyBuilder created properly when menu from buildDarwinTemplate was created should match a snapshot 1`] = `
+Array [
+  Object {
+    "label": "Deskreen",
+    "submenu": Array [
+      Object {
+        "label": "About Deskreen",
+        "selector": "orderFrontStandardAboutPanel:",
+      },
+      Object {
+        "type": "separator",
+      },
+      Object {
+        "label": "Services",
+        "submenu": Array [],
+      },
+      Object {
+        "type": "separator",
+      },
+      Object {
+        "accelerator": "Command+H",
+        "label": "Hide Deskreen",
+        "selector": "hide:",
+      },
+      Object {
+        "accelerator": "Command+Shift+H",
+        "label": "Hide Others",
+        "selector": "hideOtherApplications:",
+      },
+      Object {
+        "label": "Show All",
+        "selector": "unhideAllApplications:",
+      },
+      Object {
+        "type": "separator",
+      },
+      Object {
+        "accelerator": "Command+Q",
+        "click": [Function],
+        "label": "Quit",
+      },
+    ],
+  },
+  Object {
+    "label": "Edit",
+    "submenu": Array [
+      Object {
+        "accelerator": "Command+Z",
+        "label": "Undo",
+        "selector": "undo:",
+      },
+      Object {
+        "accelerator": "Shift+Command+Z",
+        "label": "Redo",
+        "selector": "redo:",
+      },
+      Object {
+        "type": "separator",
+      },
+      Object {
+        "accelerator": "Command+X",
+        "label": "Cut",
+        "selector": "cut:",
+      },
+      Object {
+        "accelerator": "Command+C",
+        "label": "Copy",
+        "selector": "copy:",
+      },
+      Object {
+        "accelerator": "Command+V",
+        "label": "Paste",
+        "selector": "paste:",
+      },
+      Object {
+        "accelerator": "Command+A",
+        "label": "Select All",
+        "selector": "selectAll:",
+      },
+    ],
+  },
+  Object {
+    "label": "View",
+    "submenu": Array [
+      Object {
+        "accelerator": "Ctrl+Command+F",
+        "click": [Function],
+        "label": "Toggle Full Screen",
+      },
+    ],
+  },
+  Object {
+    "label": "Window",
+    "submenu": Array [
+      Object {
+        "accelerator": "Command+M",
+        "label": "Minimize",
+        "selector": "performMiniaturize:",
+      },
+      Object {
+        "accelerator": "Command+W",
+        "label": "Close",
+        "selector": "performClose:",
+      },
+      Object {
+        "type": "separator",
+      },
+      Object {
+        "label": "Bring All to Front",
+        "selector": "arrangeInFront:",
+      },
+    ],
+  },
+  Object {
+    "label": "Help",
+    "submenu": Array [
+      Object {
+        "click": [Function],
+        "label": "Learn More",
+      },
+      Object {
+        "click": [Function],
+        "label": "Documentation",
+      },
+      Object {
+        "click": [Function],
+        "label": "Community Discussions",
+      },
+      Object {
+        "click": [Function],
+        "label": "Search Issues",
+      },
+    ],
+  },
+]
+`;

app/api/config.ts

@@ -1,4 +1,5 @@
 /* istanbul ignore file */
+
 let host;
 let protocol;
 let port;

app/api/urlGenerator.ts

@@ -1,4 +1,5 @@
 /* istanbul ignore file */
+
 import config from './config';
 
 export default (resourceName = '') => {

app/app.global.css

@@ -154,7 +154,9 @@ div.class-allow-device-to-connect-alert
   > svg
   > path {
   color: #a82a2a;
-  -webkit-animation: blink 0.75s infinite alternate; /* to blink 3 times instead of infinite write just 3 */
+  -webkit-animation: blink 0.75s infinite alternate;
+
+  /* to blink 3 times instead of infinite write just 3 */
   -moz-animation: blink 0.75s infinite alternate;
   -ms-animation: blink 0.75s infinite alternate;
   -o-animation: blink 0.75s infinite alternate;
@@ -165,38 +167,47 @@ div.class-allow-device-to-connect-alert
   from {
     color: #a82a2a;
   }
+
   to {
     color: #f55656;
   }
 }
+
 @-moz-keyframes blink {
   from {
     color: #a82a2a;
   }
+
   to {
     color: #f55656;
   }
 }
+
 @-ms-keyframes blink {
   from {
     color: #a82a2a;
   }
+
   to {
     color: #f55656;
   }
 }
+
 @-o-keyframes blink {
   from {
     color: #a82a2a;
   }
+
   to {
     color: #f55656;
   }
 }
+
 @keyframes blink {
   from {
     color: #a82a2a;
   }
+
   to {
     color: #f55656;
   }
@@ -412,3 +423,19 @@ a:hover {
   text-decoration: none;
   cursor: pointer;
 }
+
+#new-version-header {
+  background: rgba(0, 255, 54, 0.48);
+  width: fit-content;
+  border-radius: 100px;
+  padding: 5px;
+}
+
+#new-version-header:hover {
+  background: rgba(0, 255, 54, 0.78);
+  cursor: pointer;
+}
+
+.bp3-tab-list {
+  height: calc(100vh - 30%);
+}

app/client/public/index.html

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Deskreen Viewer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

app/client/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Deskreen",
+  "name": "Deskreen Makes Any Device a Second Screen For Your Computer",
   "icons": [
     {
       "src": "favicon.ico",

app/client/sonar-project.properties

@@ -1,8 +1,8 @@
 sonar.projectKey=deskreen-viewer
 sonar.typescript.lcov.reportPaths=coverage/lcov.info
 sonar.sources=src
-sonar.cpd.exclusions=src/**/mocks/*,src/**/*.spec.ts,src/**/*.spec.tsx,src/**/*.test.ts,src/**/*.test.tsx,src/serviceWorker.ts,src/index.tsx
-sonar.coverage.exclusions=src/**/mocks/*,src/**/*.spec.ts,src/**/*.spec.tsx,src/**/*.test.ts,src/**/*.test.tsx,src/serviceWorker.ts,src/index.tsx
+sonar.cpd.exclusions=src/config/*,src/**/__mocks__/*,src/**/mocks/*,src/**/*.spec.ts,src/**/*.spec.tsx,src/**/*.test.ts,src/**/*.test.tsx,src/serviceWorker.ts,src/index.tsx
+sonar.coverage.exclusions=src/config/*,src/**/__mocks__/*,src/**/mocks/*,src/**/*.spec.ts,src/**/*.spec.tsx,src/**/*.test.ts,src/**/*.test.tsx,src/serviceWorker.ts,src/index.tsx
 sonar.host.url=http://localhost:9000
 sonar.login=e3b5f73b8778290f7074c40a4159c32b7f15a8e6
 sonar.exclusions=src/serviceWorker.ts,node_modules/**

app/client/src/components/PlayerControlPanel/__snapshots__/index.spec.tsx.snap

@@ -23,6 +23,7 @@ exports[`should match exact snapshot 1`] = `
           <button
             className="bp3-button bp3-minimal"
             onBlur={[Function]}
+            onClick={[Function]}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
             tabIndex={0}
@@ -45,7 +46,7 @@ exports[`should match exact snapshot 1`] = `
                   <img
                     alt="logo"
                     height={42}
-                    src="deskreen_logo_128x128.png"
+                    src="http://localhost/logo192.png"
                     width={42}
                   />
                 </div>
@@ -81,6 +82,7 @@ exports[`should match exact snapshot 1`] = `
           <button
             className="bp3-button"
             onBlur={[Function]}
+            onClick={[Function]}
             onKeyDown={[Function]}
             onKeyUp={[Function]}
             style={

app/client/src/components/PlayerControlPanel/index.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import PlayerControlPanel from '.';
+import ScreenSharingSource from '../../features/PeerConnection/ScreenSharingSourceEnum';
 import { VideoQuality } from '../../features/VideoAutoQualityOptimizer/VideoQualityEnum';
 
 jest.useFakeTimers();
@@ -16,7 +17,7 @@ it('should match exact snapshot', () => {
         handleClickPlayPause={() => {}}
         setVideoQuality={() => {}}
         selectedVideoQuality={VideoQuality.Q_100_PERCENT}
-        screenSharingSourceType={'screen'}
+        screenSharingSourceType={ScreenSharingSource.SCREEN}
         toaster={undefined}
       />
     </>

app/client/src/components/PlayerControlPanel/index.tsx

@@ -21,13 +21,13 @@ import {
 } from '@blueprintjs/core';
 import FullScreenEnter from '../../images/fullscreen_24px.svg';
 import FullScreenExit from '../../images/fullscreen_exit-24px.svg';
-import DeskreenIconPNG from '../../images/deskreen_logo_128x128.png';
 import RedHeartTwemojiPNG from '../../images/red_heart_2764_twemoji_120x120.png';
 import { Col, Row } from 'react-flexbox-grid';
 import screenfull from 'screenfull';
 import { VideoQuality } from '../../features/VideoAutoQualityOptimizer/VideoQualityEnum';
 import handlePlayerToggleFullscreen from './handlePlayerToggleFullscreen';
 import initScreenfullOnChange from './initScreenfullOnChange';
+import ScreenSharingSource from '../../features/PeerConnection/ScreenSharingSourceEnum';
 
 const videoQualityButtonStyle: React.CSSProperties = {
   width: '100%',
@@ -80,11 +80,16 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
               content="Click to visit our website"
               position={Position.BOTTOM}
             >
-              <Button minimal>
+              <Button
+                minimal
+                onClick={() => {
+                  window.open('https://www.deskreen.com', '_blank');
+                }}
+              >
                 <Row middle="xs" style={{ opacity: '0.75' }}>
                   <Col xs={4}>
                     <img
-                      src={DeskreenIconPNG}
+                      src={window.location.origin + '/logo192.png'}
                       width={42}
                       height={42}
                       alt="logo"
@@ -100,7 +105,12 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
               content="If you like Deskreen, consider donating! Deskreen is free and opensource forever! You can help us to make Deskreen even better!"
               position={Position.BOTTOM}
             >
-              <Button style={{ borderRadius: '100px' }}>
+              <Button
+                style={{ borderRadius: '100px' }}
+                onClick={() => {
+                  window.open('https://www.patreon.com/deskreen', '_blank');
+                }}
+              >
                 <Row start="xs">
                   <Col xs>
                     <img
@@ -174,7 +184,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
                       borderBottom: '1px solid #ffffffa8',
                     }}
                   />
-                  {screenSharingSourceType === 'window' ? (
+                  {screenSharingSourceType === ScreenSharingSource.WINDOW ? (
                     <Tooltip
                       content="You can't change video quality when sharing a window. You can change quality only when shering entire screen."
                       position={Position.BOTTOM}