PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Rewrite using TabbedView and improve TS

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-16 20:50:29 +02:00
parent d512a83a6c
commit 77c8425c3c
No known key found for this signature in database
GPG key ID: CC823428E9B582FB
1 changed files with 29 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/components/views/elements/DesktopCapturerSourcePicker.tsx
View file

@ -22,6 +22,7 @@ import classNames from 'classnames';
import AccessibleButton from './AccessibleButton'; import AccessibleButton from './AccessibleButton';
import { getDesktopCapturerSources } from "matrix-js-sdk/src/webrtc/call"; import { getDesktopCapturerSources } from "matrix-js-sdk/src/webrtc/call";
import { replaceableComponent } from "../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../utils/replaceableComponent";
import TabbedView, { Tab, TabLocation } from '../../structures/TabbedView';
export interface DesktopCapturerSource { export interface DesktopCapturerSource {
id: string; id: string;
@ -41,11 +42,11 @@ export interface ExistingSourceIProps {
} }
export class ExistingSource extends React.Component<ExistingSourceIProps> { export class ExistingSource extends React.Component<ExistingSourceIProps> {
constructor(props) { constructor(props: ExistingSourceIProps) {
super(props); super(props);
} }
onClick = (ev) => { private onClick = (): void => {
this.props.onSelect(this.props.source); this.props.onSelect(this.props.source);
}; };
@ -59,7 +60,8 @@ export class ExistingSource extends React.Component<ExistingSourceIProps> {
<AccessibleButton <AccessibleButton
className={classes} className={classes}
title={this.props.source.name} title={this.props.source.name}
onClick={this.onClick} > onClick={this.onClick}
>
<img <img
className="mx_desktopCapturerSourcePicker_stream_thumbnail" className="mx_desktopCapturerSourcePicker_stream_thumbnail"
src={this.props.source.thumbnailURL} src={this.props.source.thumbnailURL}
@ -84,9 +86,9 @@ export default class DesktopCapturerSourcePicker extends React.Component<
PickerIProps, PickerIProps,
PickerIState PickerIState
> { > {
interval; interval: number;
constructor(props) { constructor(props: PickerIProps) {
super(props); super(props);
this.state = { this.state = {
@ -116,39 +118,24 @@ export default class DesktopCapturerSourcePicker extends React.Component<
clearInterval(this.interval); clearInterval(this.interval);
} }
onSelect = (source) => { private onSelect = (source: DesktopCapturerSource): void => {
this.setState({ selectedSource: source }); this.setState({ selectedSource: source });
}; };
onShare = () => { private onShare = (): void => {
this.props.onFinished(this.state.selectedSource); this.props.onFinished(this.state.selectedSource);
}; };
onScreensClick = () => { private onTabChange = (): void => {
if (this.state.selectedTab === Tabs.Screens) return; this.setState({ selectedSource: null });
this.setState({
selectedTab: Tabs.Screens,
selectedSource: null,
});
}; };
onWindowsClick = () => { private onCloseClick = (): void => {
if (this.state.selectedTab === Tabs.Windows) return;
this.setState({
selectedTab: Tabs.Windows,
selectedSource: null,
});
};
onCloseClick = () => {
this.props.onFinished(null); this.props.onFinished(null);
}; };
render() { private getTab(type: "screen" | "window", label: string): Tab {
const sources = this.state.sources.filter((source) => { const sources = this.state.sources.filter((source) => source.id.startsWith(type)).map((source) => {
return source.id.startsWith(this.state.selectedTab);
});
const sourceElements = sources.map((source) => {
return ( return (
<ExistingSource <ExistingSource
selected={this.state.selectedSource?.id === source.id} selected={this.state.selectedSource?.id === source.id}
@ -159,33 +146,26 @@ export default class DesktopCapturerSourcePicker extends React.Component<
); );
}); });
const buttonStyle = "mx_desktopCapturerSourcePicker_tabLabel"; return new Tab(type, label, null, (
const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : ""); <div className="mx_desktopCapturerSourcePicker_panel">
const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : ""); { sources }
</div>
));
}
render() {
const tabs = [
this.getTab("screen", _t("Share entire screen")),
this.getTab("window", _t("Application window")),
];
return ( return (
<BaseDialog <BaseDialog
className="mx_desktopCapturerSourcePicker" className="mx_desktopCapturerSourcePicker"
onFinished={this.onCloseClick} onFinished={this.onCloseClick}
title={_t("Share your screen")} title={_t("Share content")}
> >
<div className="mx_desktopCapturerSourcePicker_tabLabels"> <TabbedView tabs={tabs} tabLocation={TabLocation.TOP} onChange={this.onTabChange} />
<AccessibleButton
className={screensButtonStyle}
onClick={this.onScreensClick}
>
{_t("Screens")}
</AccessibleButton>
<AccessibleButton
className={windowsButtonStyle}
onClick={this.onWindowsClick}
>
{_t("Windows")}
</AccessibleButton>
</div>
<div className="mx_desktopCapturerSourcePicker_panel">
{ sourceElements }
</div>
<DialogButtons <DialogButtons
primaryButton={_t("Share")} primaryButton={_t("Share")}
hasCancel={true} hasCancel={true}