From eae3c1c49660ea75c19157109e6e3e61722cebe9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 08:32:51 +0100 Subject: [PATCH 01/20] Get screen-sharing working, somehow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../_DesktopCapturerSourcePicker.scss | 73 ++++++++++++ src/CallHandler.tsx | 25 +++- .../elements/DesktopCapturerSourcePicker.tsx | 109 ++++++++++++++++++ 3 files changed, 206 insertions(+), 1 deletion(-) create mode 100644 res/css/views/elements/_DesktopCapturerSourcePicker.scss create mode 100644 src/components/views/elements/DesktopCapturerSourcePicker.tsx diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss new file mode 100644 index 0000000000..c23fbdf6ac --- /dev/null +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -0,0 +1,73 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_streamSelectorDialog { + -ms-text-overflow: ellipsis; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin: 0 auto; + padding-right: 80px; +} +.desktop-capturer-selection-scroller { + width: 100%; + max-height: 100vh; + overflow-y: auto; +} +.desktop-capturer-selection-list { + max-width: calc(100% - 100px); + margin: 0 50px 0 50px; + padding: 0; + display: flex; + flex-wrap: wrap; + list-style: none; + overflow: hidden; + justify-content: center; +} +.desktop-capturer-selection-item { + display: flex; + margin: 4px; +} +.desktop-capturer-selection-button { + display: flex; + flex-direction: column; + align-items: stretch; + width: 145px; + margin: 0; + border: 0; + border-radius: 4px; + padding: 4px; + background: #20262b; + color: #ffffff; + text-align: left; + transition: background-color .15s, box-shadow .15s; +} +.desktop-capturer-selection-button:hover, +.desktop-capturer-selection-button:focus { + background: #363c43; +} +.desktop-capturer-selection-thumbnail { + width: 100%; + height: 81px; + object-fit: cover; +} +.desktop-capturer-selection-name { + margin: 6px 0 6px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 504dae5c84..83af34c165 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -82,6 +82,13 @@ import CountlyAnalytics from "./CountlyAnalytics"; import {UIFeature} from "./settings/UIFeature"; import { CallError } from "matrix-js-sdk/src/webrtc/call"; import { logger } from 'matrix-js-sdk/src/logger'; +import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker" + +export interface ElectronDesktopCapturerSource { + display_id: string; + id: string; + name: string; +} enum AudioID { Ring = 'ringAudio', @@ -474,7 +481,23 @@ export default class CallHandler { }); return; } - call.placeScreenSharingCall(remoteElement, localElement); + + const selectDesktopCapturerSource = async ( + sources: Array, + ): Promise => { + console.log(DesktopCapturerSourcePicker); + const params = { + sources: sources, + }; + + const {finished} = Modal.createDialog(DesktopCapturerSourcePicker, params); + + const [source] = await finished; + console.log("Dialog closed with", source); + return source; + }; + + call.placeScreenSharingCall(remoteElement, localElement, selectDesktopCapturerSource); } else { console.error("Unknown conf call type: %s", type); } diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx new file mode 100644 index 0000000000..a1d57884e1 --- /dev/null +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -0,0 +1,109 @@ +/* +Copyright 2015, 2016 OpenMarket Ltd +Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from 'react'; +import { _td } from '../../../languageHandler'; +import BaseDialog from "..//dialogs/BaseDialog" + +export interface DesktopCapturerSourceIProps { + source: ElectronDesktopCapturerSource, + onSelect(source: ElectronDesktopCapturerSource): void, +} + +export class DesktopCapturerSource extends React.Component { + constructor(props) { + super(props); + } + + onClick = (ev) => { + //ev.stopPropagation(); + this.props.onSelect(this.props.source); + } + + render() { + return ( + + ); + } +} + +export interface ElectronDesktopCapturerSource { + display_id: string; + id: string; + name: string; + thumbnail, + appIcon, +} + + +export interface DesktopCapturerSourcePickerIProps { + sources: Array; + onFinished(source: ElectronDesktopCapturerSource): void, +} + +// TODO: Figure out a way to update sources for live preview + +export default class DesktopCapturerSourcePicker extends React.Component { + constructor(props) { + super(props); + } + + onSelect = (source) => { + this.props.onFinished(source); + } + + render() { + const screens = this.props.sources + .filter((source) => { + return source.id.startsWith("screen"); + }) + .map((source) => { + return ; + }); + + const windows = this.props.sources + .filter((source) => { + return source.id.startsWith("window"); + }) + .map((source) => { + return ; + }); + + return ( + +

{_td("Screens")}

+
+ { screens } +
+

{_td("Windows")}

+
+ { windows } +
+ + ); + } +} From 1dc1bc68dbab8e0cd193167a99ee9de7b149fdcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 08:40:58 +0100 Subject: [PATCH 02/20] Clean up MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/CallHandler.tsx | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 83af34c165..3958420329 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -482,22 +482,14 @@ export default class CallHandler { return; } - const selectDesktopCapturerSource = async ( - sources: Array, - ): Promise => { - console.log(DesktopCapturerSourcePicker); - const params = { - sources: sources, - }; - - const {finished} = Modal.createDialog(DesktopCapturerSourcePicker, params); - - const [source] = await finished; - console.log("Dialog closed with", source); - return source; - }; - - call.placeScreenSharingCall(remoteElement, localElement, selectDesktopCapturerSource); + call.placeScreenSharingCall( + remoteElement, + localElement, + async (sources: Array) : Promise => { + const {finished} = Modal.createDialog(DesktopCapturerSourcePicker, {sources}); + const [source] = await finished; + return source; + }); } else { console.error("Unknown conf call type: %s", type); } From 675ca58eef8e2032bf0937655de1cd760f9f7fed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 16:56:25 +0100 Subject: [PATCH 03/20] Improve UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/_components.scss | 1 + .../_DesktopCapturerSourcePicker.scss | 73 ++++++----- .../elements/DesktopCapturerSourcePicker.tsx | 118 ++++++++++++------ 3 files changed, 123 insertions(+), 69 deletions(-) diff --git a/res/css/_components.scss b/res/css/_components.scss index d8bc238db5..d2000b0e23 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -106,6 +106,7 @@ @import "./views/elements/_AddressTile.scss"; @import "./views/elements/_DesktopBuildsNotice.scss"; @import "./views/elements/_DirectorySearchBox.scss"; +@import "./views/elements/_DesktopCapturerSourcePicker.scss"; @import "./views/elements/_Dropdown.scss"; @import "./views/elements/_EditableItemList.scss"; @import "./views/elements/_ErrorBoundary.scss"; diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index c23fbdf6ac..9f2c23eb48 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -21,53 +21,60 @@ limitations under the License. white-space: nowrap; overflow: hidden; margin: 0 auto; - padding-right: 80px; } -.desktop-capturer-selection-scroller { + +.mx_streamSelectorDialog_tabLabels { + display: flex; + padding: 0 0 8px 0; +} + +.mx_streamSelectorDialog_tabLabel, +.mx_streamSelectorDialog_tabLabel_selected +{ width: 100%; - max-height: 100vh; - overflow-y: auto; + text-align: center; + border-radius: 8px; + padding: 8px 0; + border-radius: 8px; + font-size: $font-13px; + position: relative; } -.desktop-capturer-selection-list { - max-width: calc(100% - 100px); - margin: 0 50px 0 50px; - padding: 0; + +.mx_streamSelectorDialog_tabLabel_selected { + background-color: $tab-label-active-bg-color; + color: $tab-label-active-fg-color; +} + +.mx_streamSelectorDialog_panel { display: flex; flex-wrap: wrap; - list-style: none; - overflow: hidden; justify-content: center; + align-items: flex-start; + height: 500px; + overflow: overlay; } -.desktop-capturer-selection-item { - display: flex; - margin: 4px; -} -.desktop-capturer-selection-button { + +.mx_streamSelectorDialog_stream_button { display: flex; flex-direction: column; - align-items: stretch; - width: 145px; - margin: 0; - border: 0; + margin: 8px; border-radius: 4px; - padding: 4px; - background: #20262b; - color: #ffffff; - text-align: left; - transition: background-color .15s, box-shadow .15s; } -.desktop-capturer-selection-button:hover, -.desktop-capturer-selection-button:focus { - background: #363c43; + +.mx_streamSelectorDialog_stream_button:hover, +.mx_streamSelectorDialog_stream_button:focus { + background: $roomtile-selected-bg-color; } -.desktop-capturer-selection-thumbnail { - width: 100%; - height: 81px; - object-fit: cover; + +.mx_streamSelectorDialog_stream_thumbnail { + margin: 4px; + width: 312px; } -.desktop-capturer-selection-name { - margin: 6px 0 6px; + +.mx_streamSelectorDialog_stream_name { + margin: 0 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; + width: 312px; } diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index a1d57884e1..399aec1e2c 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -18,7 +18,19 @@ limitations under the License. import React from 'react'; import { _td } from '../../../languageHandler'; import BaseDialog from "..//dialogs/BaseDialog" +import AccessibleButton from './AccessibleButton'; +export enum Tabs { + Screens = "screens", + Windows = "windows", +} +export interface ElectronDesktopCapturerSource { + display_id: string; + id: string; + name: string; + thumbnail, + appIcon, +} export interface DesktopCapturerSourceIProps { source: ElectronDesktopCapturerSource, onSelect(source: ElectronDesktopCapturerSource): void, @@ -36,30 +48,25 @@ export class DesktopCapturerSource extends React.Component - {this.props.source.name} - + {this.props.source.name} + ); } } -export interface ElectronDesktopCapturerSource { - display_id: string; - id: string; - name: string; - thumbnail, - appIcon, + +export interface DesktopCapturerSourcePickerIState { + selectedTab: Tabs; } - - export interface DesktopCapturerSourcePickerIProps { sources: Array; onFinished(source: ElectronDesktopCapturerSource): void, @@ -67,41 +74,80 @@ export interface DesktopCapturerSourcePickerIProps { // TODO: Figure out a way to update sources for live preview -export default class DesktopCapturerSourcePicker extends React.Component { +export default class DesktopCapturerSourcePicker extends React.Component< + DesktopCapturerSourcePickerIProps, + DesktopCapturerSourcePickerIState + > { constructor(props) { super(props); + + this.state = { + selectedTab: Tabs.Screens, + } } onSelect = (source) => { this.props.onFinished(source); } - render() { - const screens = this.props.sources - .filter((source) => { - return source.id.startsWith("screen"); - }) - .map((source) => { - return ; - }); + onScreensClick = (ev) => { + this.setState({selectedTab: Tabs.Screens}); + } - const windows = this.props.sources - .filter((source) => { - return source.id.startsWith("window"); - }) - .map((source) => { - return ; - }); + onWindowsClick = (ev) => { + this.setState({selectedTab: Tabs.Windows}); + } + + onCloseClick = (ev) => { + this.props.onFinished(null); + } + + render() { + let sources; + if (this.state.selectedTab === Tabs.Screens) { + sources = this.props.sources + .filter((source) => { + return source.id.startsWith("screen"); + }) + .map((source) => { + return ; + }); + } else { + sources = this.props.sources + .filter((source) => { + return source.id.startsWith("window"); + }) + .map((source) => { + return ; + }); + } + const buttonStyle = "mx_streamSelectorDialog_tabLabel"; + const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : ""); + const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : ""); + console.log(screensButtonStyle, windowsButtonStyle); return ( - -

{_td("Screens")}

-
- { screens } + +
+ + {_td("Screens")} + + + {_td("Windows")} +
-

{_td("Windows")}

-
- { windows } +
+ { sources }
); From 322afe6450b136dfc6a77d55e9f6c077ae4db499 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 18:00:08 +0100 Subject: [PATCH 04/20] Remove log MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 399aec1e2c..b9e5037dee 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -124,7 +124,6 @@ export default class DesktopCapturerSourcePicker extends React.Component< const buttonStyle = "mx_streamSelectorDialog_tabLabel"; const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : ""); const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : ""); - console.log(screensButtonStyle, windowsButtonStyle); return ( Date: Sat, 26 Dec 2020 18:10:50 +0100 Subject: [PATCH 05/20] Type cleanup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/@types/global.d.ts | 9 ++++++++ src/CallHandler.tsx | 8 +------ .../elements/DesktopCapturerSourcePicker.tsx | 23 +++++++------------ 3 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 741798761f..72b9ee56fb 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -66,6 +66,15 @@ declare global { mxModalWidgetStore: ModalWidgetStore; } + export interface DesktopCapturerSource { + id: string; + name: string; + thumbnail; + // This property is not camelcase and isn't used, therefore it is commented + //display_id: string; + appIcon; + } + interface Document { // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess hasStorageAccess?: () => Promise; diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index 3958420329..a8f121dfb9 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -84,12 +84,6 @@ import { CallError } from "matrix-js-sdk/src/webrtc/call"; import { logger } from 'matrix-js-sdk/src/logger'; import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker" -export interface ElectronDesktopCapturerSource { - display_id: string; - id: string; - name: string; -} - enum AudioID { Ring = 'ringAudio', Ringback = 'ringbackAudio', @@ -485,7 +479,7 @@ export default class CallHandler { call.placeScreenSharingCall( remoteElement, localElement, - async (sources: Array) : Promise => { + async (sources: Array) : Promise => { const {finished} = Modal.createDialog(DesktopCapturerSourcePicker, {sources}); const [source] = await finished; return source; diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index b9e5037dee..a134df6d68 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -24,19 +24,13 @@ export enum Tabs { Screens = "screens", Windows = "windows", } -export interface ElectronDesktopCapturerSource { - display_id: string; - id: string; - name: string; - thumbnail, - appIcon, -} + export interface DesktopCapturerSourceIProps { - source: ElectronDesktopCapturerSource, - onSelect(source: ElectronDesktopCapturerSource): void, + source: DesktopCapturerSource, + onSelect(source: DesktopCapturerSource): void, } -export class DesktopCapturerSource extends React.Component { +export class ExistingSource extends React.Component { constructor(props) { super(props); } @@ -63,13 +57,12 @@ export class DesktopCapturerSource extends React.Component; - onFinished(source: ElectronDesktopCapturerSource): void, + sources: Array; + onFinished(source: DesktopCapturerSource): void, } // TODO: Figure out a way to update sources for live preview @@ -110,7 +103,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< return source.id.startsWith("screen"); }) .map((source) => { - return ; + return ; }); } else { sources = this.props.sources @@ -118,7 +111,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< return source.id.startsWith("window"); }) .map((source) => { - return ; + return ; }); } const buttonStyle = "mx_streamSelectorDialog_tabLabel"; From b24464269f4e054258bdbbe96dcd335bcb24caff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 18:28:53 +0100 Subject: [PATCH 06/20] i18n MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/i18n/strings/en_EN.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 507f3e071f..51757a89c1 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1831,6 +1831,9 @@ "Use the Desktop app to search encrypted messages": "Use the Desktop app to search encrypted messages", "This version of %(brand)s does not support viewing some encrypted files": "This version of %(brand)s does not support viewing some encrypted files", "This version of %(brand)s does not support searching encrypted messages": "This version of %(brand)s does not support searching encrypted messages", + "Share your screen": "Share your screen", + "Screens": "Screens", + "Windows": "Windows", "Join": "Join", "No results": "No results", "Please create a new issue on GitHub so that we can investigate this bug.": "Please create a new issue on GitHub so that we can investigate this bug.", From eff26600e8e3bbe68f2f738fcb09b99f6d0c7805 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 18:33:23 +0100 Subject: [PATCH 07/20] Linting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_DesktopCapturerSourcePicker.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index 9f2c23eb48..8a257b697c 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -29,13 +29,11 @@ limitations under the License. } .mx_streamSelectorDialog_tabLabel, -.mx_streamSelectorDialog_tabLabel_selected -{ +.mx_streamSelectorDialog_tabLabel_selected { width: 100%; text-align: center; border-radius: 8px; padding: 8px 0; - border-radius: 8px; font-size: $font-13px; position: relative; } From 14a3b884972768da3280fc2e7a4b7a64bf295f92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 28 Dec 2020 08:15:54 +0100 Subject: [PATCH 08/20] Consistent formatting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/elements/DesktopCapturerSourcePicker.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index a134df6d68..3d9068727e 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -26,8 +26,8 @@ export enum Tabs { } export interface DesktopCapturerSourceIProps { - source: DesktopCapturerSource, - onSelect(source: DesktopCapturerSource): void, + source: DesktopCapturerSource; + onSelect(source: DesktopCapturerSource): void; } export class ExistingSource extends React.Component { @@ -62,7 +62,7 @@ export interface DesktopCapturerSourcePickerIState { } export interface DesktopCapturerSourcePickerIProps { sources: Array; - onFinished(source: DesktopCapturerSource): void, + onFinished(source: DesktopCapturerSource): void; } // TODO: Figure out a way to update sources for live preview From 95d93d143ed27e58a3af28bdab650bf8f3df5b6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 28 Dec 2020 08:38:29 +0100 Subject: [PATCH 09/20] Clean up the SCSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_DesktopCapturerSourcePicker.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index 8a257b697c..4cb984e83c 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -16,11 +16,7 @@ limitations under the License. */ .mx_streamSelectorDialog { - -ms-text-overflow: ellipsis; - text-overflow: ellipsis; - white-space: nowrap; overflow: hidden; - margin: 0 auto; } .mx_streamSelectorDialog_tabLabels { @@ -35,7 +31,6 @@ limitations under the License. border-radius: 8px; padding: 8px 0; font-size: $font-13px; - position: relative; } .mx_streamSelectorDialog_tabLabel_selected { From efd889c09abf125dd83aadfe3597b6fc348d33cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 19:32:59 +0100 Subject: [PATCH 10/20] Remove commented line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 3d9068727e..46155f1cbc 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -36,7 +36,6 @@ export class ExistingSource extends React.Component } onClick = (ev) => { - //ev.stopPropagation(); this.props.onSelect(this.props.source); } From 8652c2e65366b9ffbdb6da0f9111e6bcc47b4874 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 19:49:09 +0100 Subject: [PATCH 11/20] Fixed class names MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../_DesktopCapturerSourcePicker.scss | 22 +++++++++---------- .../elements/DesktopCapturerSourcePicker.tsx | 14 ++++++------ 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index 4cb984e83c..f4ceedbd11 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -15,17 +15,17 @@ See the License for the specific language governing permissions and limitations under the License. */ -.mx_streamSelectorDialog { +.mx_desktopCapturerSourcePicker { overflow: hidden; } -.mx_streamSelectorDialog_tabLabels { +.mx_desktopCapturerSourcePicker_tabLabels { display: flex; padding: 0 0 8px 0; } -.mx_streamSelectorDialog_tabLabel, -.mx_streamSelectorDialog_tabLabel_selected { +.mx_desktopCapturerSourcePicker_tabLabel, +.mx_desktopCapturerSourcePicker_tabLabel_selected { width: 100%; text-align: center; border-radius: 8px; @@ -33,12 +33,12 @@ limitations under the License. font-size: $font-13px; } -.mx_streamSelectorDialog_tabLabel_selected { +.mx_desktopCapturerSourcePicker_tabLabel_selected { background-color: $tab-label-active-bg-color; color: $tab-label-active-fg-color; } -.mx_streamSelectorDialog_panel { +.mx_desktopCapturerSourcePicker_panel { display: flex; flex-wrap: wrap; justify-content: center; @@ -47,24 +47,24 @@ limitations under the License. overflow: overlay; } -.mx_streamSelectorDialog_stream_button { +.mx_desktopCapturerSourcePicker_stream_button { display: flex; flex-direction: column; margin: 8px; border-radius: 4px; } -.mx_streamSelectorDialog_stream_button:hover, -.mx_streamSelectorDialog_stream_button:focus { +.mx_desktopCapturerSourcePicker_stream_button:hover, +.mx_desktopCapturerSourcePicker_stream_button:focus { background: $roomtile-selected-bg-color; } -.mx_streamSelectorDialog_stream_thumbnail { +.mx_desktopCapturerSourcePicker_stream_thumbnail { margin: 4px; width: 312px; } -.mx_streamSelectorDialog_stream_name { +.mx_desktopCapturerSourcePicker_stream_name { margin: 0 4px; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 46155f1cbc..e1586c881f 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -42,15 +42,15 @@ export class ExistingSource extends React.Component render() { return ( - {this.props.source.name} + {this.props.source.name} ); } @@ -113,17 +113,17 @@ export default class DesktopCapturerSourcePicker extends React.Component< return ; }); } - const buttonStyle = "mx_streamSelectorDialog_tabLabel"; + const buttonStyle = "mx_desktopCapturerSourcePicker_tabLabel"; const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : ""); const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : ""); return ( -
+
-
+
{ sources }
From d497594a6f1981272836924e2f10301e07cf9123 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 19:55:08 +0100 Subject: [PATCH 12/20] Remove unnecessary line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index e1586c881f..d398b8ba0d 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -43,7 +43,6 @@ export class ExistingSource extends React.Component return ( Date: Tue, 5 Jan 2021 20:27:11 +0100 Subject: [PATCH 13/20] Fixed translation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/elements/DesktopCapturerSourcePicker.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index d398b8ba0d..ea0573eb4a 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -16,7 +16,7 @@ limitations under the License. */ import React from 'react'; -import { _td } from '../../../languageHandler'; +import { _t } from '../../../languageHandler'; import BaseDialog from "..//dialogs/BaseDialog" import AccessibleButton from './AccessibleButton'; @@ -120,20 +120,20 @@ export default class DesktopCapturerSourcePicker extends React.Component<
- {_td("Screens")} + {_t("Screens")} - {_td("Windows")} + {_t("Windows")}
From bb7e76f69e9cf901acf041b00e12b0c2542278d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 20:36:54 +0100 Subject: [PATCH 14/20] Hopefully fixed copyrights MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_DesktopCapturerSourcePicker.scss | 5 ++--- .../views/elements/DesktopCapturerSourcePicker.tsx | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index f4ceedbd11..b5e148ee47 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -1,12 +1,11 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> +Copyright 2021 Šimon Brandner Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 +http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index ea0573eb4a..4ed27cad8c 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -1,12 +1,11 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2019 Michael Telatynski <7t3chguy@gmail.com> +Copyright 2021 Šimon Brandner Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at - http://www.apache.org/licenses/LICENSE-2.0 +http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, From b1010189be9a0e47a8d04735be3f32f0c52e32b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 20:41:33 +0100 Subject: [PATCH 15/20] Tabbed copyright link MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_DesktopCapturerSourcePicker.scss | 2 +- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index b5e148ee47..69dde5925e 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss @@ -5,7 +5,7 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at -http://www.apache.org/licenses/LICENSE-2.0 + http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 4ed27cad8c..acb6376887 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -5,7 +5,7 @@ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at -http://www.apache.org/licenses/LICENSE-2.0 + http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, From 20b17202584f384d0397759481bf813dabd08457 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Tue, 5 Jan 2021 21:08:25 +0100 Subject: [PATCH 16/20] Added a line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index acb6376887..b6fbad62f1 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -111,6 +111,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< return ; }); } + const buttonStyle = "mx_desktopCapturerSourcePicker_tabLabel"; const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : ""); const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : ""); From 8f91b04eb34992d47ce01329acc56b16c8b09568 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 14 Jan 2021 08:35:04 +0100 Subject: [PATCH 17/20] Use contextBridge MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index b6fbad62f1..b04b50ca99 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -46,7 +46,7 @@ export class ExistingSource extends React.Component onClick={this.onClick} > {this.props.source.name} From eca8ef3b3505f52aadb356ff5718054c725a207c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Thu, 14 Jan 2021 12:44:48 +0100 Subject: [PATCH 18/20] Update thumbnails MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/CallHandler.tsx | 4 +-- .../elements/DesktopCapturerSourcePicker.tsx | 26 ++++++++++++++----- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index e9ccd6ef20..804c6a6699 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -513,8 +513,8 @@ export default class CallHandler { call.placeScreenSharingCall( remoteElement, localElement, - async (sources: Array) : Promise => { - const {finished} = Modal.createDialog(DesktopCapturerSourcePicker, {sources}); + async () : Promise => { + const {finished} = Modal.createDialog(DesktopCapturerSourcePicker); const [source] = await finished; return source; }); diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index b04b50ca99..70c5fbaa8d 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -18,6 +18,7 @@ import React from 'react'; import { _t } from '../../../languageHandler'; import BaseDialog from "..//dialogs/BaseDialog" import AccessibleButton from './AccessibleButton'; +import {getDesktopCapturerSources} from "matrix-js-sdk/src/webrtc/call"; export enum Tabs { Screens = "screens", @@ -56,24 +57,37 @@ export class ExistingSource extends React.Component export interface DesktopCapturerSourcePickerIState { selectedTab: Tabs; + sources: Array; } export interface DesktopCapturerSourcePickerIProps { - sources: Array; onFinished(source: DesktopCapturerSource): void; } -// TODO: Figure out a way to update sources for live preview - export default class DesktopCapturerSourcePicker extends React.Component< DesktopCapturerSourcePickerIProps, DesktopCapturerSourcePickerIState > { + interval; + constructor(props) { super(props); this.state = { selectedTab: Tabs.Screens, - } + sources: [], + }; + } + + componentDidMount() { + this.interval = setInterval(async () => { + this.setState({ + sources: await getDesktopCapturerSources(), + }); + }, 500); + } + + componentWillUnmount() { + clearInterval(this.interval); } onSelect = (source) => { @@ -95,7 +109,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< render() { let sources; if (this.state.selectedTab === Tabs.Screens) { - sources = this.props.sources + sources = this.state.sources .filter((source) => { return source.id.startsWith("screen"); }) @@ -103,7 +117,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< return ; }); } else { - sources = this.props.sources + sources = this.state.sources .filter((source) => { return source.id.startsWith("window"); }) From 28ff4e6955dba3eea69ef14a03a4d7647150161c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 1 Feb 2021 15:53:53 +0100 Subject: [PATCH 19/20] Move DesktopCapturerSource MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/@types/global.d.ts | 9 --------- .../views/elements/DesktopCapturerSourcePicker.tsx | 6 ++++++ 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 72b9ee56fb..741798761f 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -66,15 +66,6 @@ declare global { mxModalWidgetStore: ModalWidgetStore; } - export interface DesktopCapturerSource { - id: string; - name: string; - thumbnail; - // This property is not camelcase and isn't used, therefore it is commented - //display_id: string; - appIcon; - } - interface Document { // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess hasStorageAccess?: () => Promise; diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 70c5fbaa8d..384befbb01 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -20,6 +20,12 @@ import BaseDialog from "..//dialogs/BaseDialog" import AccessibleButton from './AccessibleButton'; import {getDesktopCapturerSources} from "matrix-js-sdk/src/webrtc/call"; +export interface DesktopCapturerSource { + id: string; + name: string; + thumbnailURL; +} + export enum Tabs { Screens = "screens", Windows = "windows", From 022781e9bcaef4a35d1b4d242b2e57f0f71ef57a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Mon, 1 Feb 2021 16:03:20 +0100 Subject: [PATCH 20/20] Added a comment about updating thumbnails MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- src/components/views/elements/DesktopCapturerSourcePicker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index 384befbb01..e53683b0ef 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx @@ -85,6 +85,7 @@ export default class DesktopCapturerSourcePicker extends React.Component< } componentDidMount() { + // We update the sources every 500ms to get newer thumbnails this.interval = setInterval(async () => { this.setState({ sources: await getDesktopCapturerSources(),