Merge pull request #798 from johankwarnmarksymphony/master

feat: SDA-1560 RTC: New screen sharing indicator

spec/__snapshots__/screenSharingIndicator.spec.ts.snap

@@ -4,24 +4,20 @@ exports[`screen sharing indicator should render correctly 1`] = `
 <div
   className="ScreenSharingIndicator mac"
 >
-  <span
-    className="drag-area"
-  />
   <span
     className="text-label"
   >
-    You are sharing your screen on Symphony
+    You are sharing your screen on 
+    <span
+      className="text-label2"
+    >
+       
+      Symphony
+    </span>
   </span>
   <span
     className="buttons"
   >
-    <a
-      className="hide-button"
-      href="#"
-      onClick={[Function]}
-    >
-      Hide
-    </a>
     <button
       className="stop-sharing-button"
       onClick={[Function]}

spec/screenSharingIndicator.spec.ts

@@ -16,7 +16,6 @@ describe('screen sharing indicator', () => {
     const onEventLabel = 'on';
     const removeListenerEventLabel = 'removeListener';
     const sendEventLabel = 'send';
-    const symphonyAPIEventLabel = 'symphony-api';
     const screenSharingIndicatorDataEventLabel = 'screen-sharing-indicator-data';
     // state moked
     const screenSharingIndicatorStateMock = { id: 10 };
@@ -26,20 +25,6 @@ describe('screen sharing indicator', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
-    it('should call `close` correctly', () => {
-        const customSelector = 'a.hide-button';
-        const closeIpcRendererMock = {
-            cmd: 'close-window',
-            windowType: 'screen-sharing-indicator',
-            winKey: 'id-123',
-        };
-        const spy = jest.spyOn(ipcRenderer, sendEventLabel);
-        const wrapper = shallow(React.createElement(ScreenSharingIndicator));
-        wrapper.setState({ streamId: 'id-123' });
-        wrapper.find(customSelector).simulate('click');
-        expect(spy).lastCalledWith(symphonyAPIEventLabel, closeIpcRendererMock);
-    });
-
     it('should call `stopScreenShare` correctly', () => {
         const customSelector = 'button.stop-sharing-button';
         const stopScreenSharingEventLabel = 'stop-screen-sharing';

src/app/window-handler.ts

@@ -359,8 +359,9 @@ export class WindowHandler {
             case 'screen-sharing-indicator':
                 if (winKey) {
                     const browserWindow = this.windows[winKey];
+
                     if (browserWindow && windowExists(browserWindow)) {
-                        browserWindow.close();
+                        browserWindow.destroy();
                     }
                 }
                 break;
@@ -665,11 +666,13 @@ export class WindowHandler {
             (displayId && electron.screen.getAllDisplays().filter((d) =>
                 displayId.includes(d.id.toString()))[0]) || electron.screen.getPrimaryDisplay();
 
+        const topPositionOfIndicatorScreen = 16;
+
         const screenRect = indicatorScreen.workArea;
         // Set stream id as winKey to link stream to the window
         let opts = {
             ...this.getWindowOpts({
-                width: 620,
+                width: 592,
                 height: 48,
                 show: false,
                 modal: true,
@@ -680,6 +683,10 @@ export class WindowHandler {
                 resizable: false,
                 alwaysOnTop: true,
                 fullscreenable: false,
+                titleBarStyle: 'customButtonsOnHover',
+                minimizable: false,
+                maximizable: false,
+                closable: false,
             }, {
                 devTools: false,
             }), ...{winKey: streamId},
@@ -687,9 +694,10 @@ export class WindowHandler {
         if (opts.width && opts.height) {
             opts = Object.assign({}, opts, {
                 x: screenRect.x + Math.round((screenRect.width - opts.width) / 2),
-                y: screenRect.y + screenRect.height - opts.height,
+                y: screenRect.y + topPositionOfIndicatorScreen,
             });
         }
+
         this.screenSharingIndicatorWindow = createComponentWindow('screen-sharing-indicator', opts);
         this.screenSharingIndicatorWindow.setVisibleOnAllWorkspaces(true);
         this.screenSharingIndicatorWindow.webContents.once('did-finish-load', () => {

src/renderer/components/screen-sharing-indicator.tsx

@@ -37,12 +37,13 @@ export default class ScreenSharingIndicator extends React.Component<{}, IState>
     public render(): JSX.Element {
         const { id } = this.state;
         const namespace = 'ScreenSharingIndicator';
+
         return (
             <div className={classNames('ScreenSharingIndicator', { mac: isMac })}>
-                <span className='drag-area'/>
+                <span className='text-label'>{(i18n.t(`You are sharing your screen on {appName}`, namespace)({ appName: remote.app.getName()})).replace(remote.app.getName(), '')}
-                <span className='text-label'>{i18n.t(`You are sharing your screen on {appName}`, namespace)({ appName: remote.app.getName() })}</span>
+                    <span className='text-label2'>&nbsp;{remote.app.getName()}</span>
+                </span>
                 <span className='buttons'>
-                    <a className='hide-button' href='#' onClick={this.eventHandlers.onClose}>{i18n.t('Hide', namespace)()}</a>
                     <button className='stop-sharing-button' onClick={this.eventHandlers.onStopScreenSharing(id)}>
                         {i18n.t('Stop sharing', namespace)()}
                     </button>

src/renderer/styles/screen-sharing-indicator.less

@@ -1,7 +1,7 @@
 @white: rgba(255,255,255, 1);
 @background: #6b717c;
 @button-color: #303237;
-@stop-sharing-background: #107ccc;
+@stop-sharing-background:#EE3D3D;
 @font: "system";
 
 @font-face {
@@ -14,62 +14,56 @@ body {
   font-family: @font;
   font-size: 13px;
   padding: 0;
-  margin: 10px;
+  margin: 0px;
   user-select: none;
   -webkit-app-region: drag;
-  background: rgba(255, 255, 255, 0.9);
+  width: 100%;
+  height: 100%;
 }
 
 .ScreenSharingIndicator {
-
+  background: #FFFFFF;
-  .window-border {
+  width: 584px;
-    border: 2px solid rgba(68, 68, 68, 1);
+  height: 40px;
-  }
+  border-radius: 24px;
-
+  border: 4px solid @stop-sharing-background;
-  .buttons {
-    float: right;
-    font-size: 12px;
-    font-weight: bold;
-  }
 
   .stop-sharing-button {
     text-transform: uppercase;
     background: @stop-sharing-background;
     color: @white;
     border: none;
-    font-size: inherit;
+    width: 152px;
-    border-radius: 14px;
+    height: 32px;
-    height: 28px;
+    border-radius: 16px;
+    position: absolute;
+    left: 432px;
+    top: 8px;
+    font-size: 12px;
+    line-height: 14px;
+    text-align: center;
+
     padding: 6px 14px;
     outline: none;
     cursor: pointer;
     -webkit-app-region: no-drag;
   }
 
-  .hide-button {
-    text-decoration: none;
-    text-transform: uppercase;
-    color: @background;
-    margin-right: 29px;
-    -webkit-app-region: no-drag;
-  }
-
   .text-label {
-    position: relative;
+    position: absolute;
-    top: -2px;
+    width: 450px;
-    left: 16px;
+    height: 17px;
+    left: 24px;
+    top: 16px;
     font-size: 14px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    color: #000000;
   }
 
-  .drag-area {
+  .text-label2 {
-    display: inline-block;
+    font-weight: bold
-    width: 8px;
-    height: 22px;
-    position: relative;
-    cursor: move;
-    top: 3px;
-    text-transform: uppercase;
-    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0.12) 1px, rgba(0, 0, 0, 0.12) 2px);
   }
 
   .mac {