1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
import { ipcRenderer } from 'electron';
import { useEffect, useState } from 'react';
import { SCREENSHARE_CANCELLED_BY_USER } from '../config';
import type Service from '../models/Service';
export interface IProps {
service: Service;
}
export default function MediaSource(props: IProps) {
const { service } = props;
const [sources, setSources] = useState<any>([]);
const [show, setShow] = useState<boolean>(false);
const [trackerId, setTrackerId] = useState<string | null>(null);
ipcRenderer.on(`select-capture-device:${service.id}`, (_event, data) => {
setShow(true);
setTrackerId(data.trackerId);
});
useEffect(() => {
ipcRenderer
.invoke('get-desktop-capturer-sources')
.then(sources => setSources(sources));
}, []);
if (sources.length === 0 || !show) {
return null;
}
const handleOnClick = (e: any) => {
const { id } = e.currentTarget.dataset;
window['ferdium'].actions.service.sendIPCMessage({
serviceId: service.id,
channel: `selected-media-source:${trackerId}`,
args: {
mediaSourceId: id,
},
});
setShow(false);
setTrackerId(null);
};
return (
<div className="desktop-capturer-selection">
<ul className="desktop-capturer-selection__list">
{sources.map(({ id, name, thumbnail }) => (
<li className="desktop-capturer-selection__item" key={id}>
<button
type="button" // Add explicit type attribute
className="desktop-capturer-selection__btn"
data-id={id}
title={name}
onClick={handleOnClick}
>
<img
alt="Desktop capture preview"
className="desktop-capturer-selection__thumbnail"
src={thumbnail.toDataURL()}
/>
<span className="desktop-capturer-selection__name">{name}</span>
</button>
</li>
))}
<li className="desktop-capturer-selection__item">
<button
type="button" // Add explicit type attribute
className="desktop-capturer-selection__btn"
data-id={SCREENSHARE_CANCELLED_BY_USER}
title="Cancel"
onClick={handleOnClick}
>
<span className="desktop-capturer-selection__name desktop-capturer-selection__name--cancel">
Cancel
</span>
</button>
</li>
</ul>
</div>
);
}
|
