diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/MediaSource.tsx | 82 | ||||
-rw-r--r-- | src/components/services/content/ServiceView.tsx | 2 |
2 files changed, 84 insertions, 0 deletions
diff --git a/src/components/MediaSource.tsx b/src/components/MediaSource.tsx new file mode 100644 index 000000000..ceb7701b9 --- /dev/null +++ b/src/components/MediaSource.tsx | |||
@@ -0,0 +1,82 @@ | |||
1 | import { ipcRenderer } from 'electron'; | ||
2 | import { useEffect, useState } from 'react'; | ||
3 | import { SCREENSHARE_CANCELLED_BY_USER } from '../config'; | ||
4 | import type Service from '../models/Service'; | ||
5 | |||
6 | export interface IProps { | ||
7 | service: Service; | ||
8 | } | ||
9 | |||
10 | export default function MediaSource(props: IProps) { | ||
11 | const { service } = props; | ||
12 | const [sources, setSources] = useState<any>([]); | ||
13 | const [show, setShow] = useState<boolean>(false); | ||
14 | const [trackerId, setTrackerId] = useState<string | null>(null); | ||
15 | |||
16 | ipcRenderer.on(`select-capture-device:${service.id}`, (_event, data) => { | ||
17 | setShow(true); | ||
18 | setTrackerId(data.trackerId); | ||
19 | }); | ||
20 | |||
21 | useEffect(() => { | ||
22 | ipcRenderer | ||
23 | .invoke('get-desktop-capturer-sources') | ||
24 | .then(sources => setSources(sources)); | ||
25 | }, []); | ||
26 | |||
27 | if (sources.length === 0 || !show) { | ||
28 | return null; | ||
29 | } | ||
30 | |||
31 | const handleOnClick = (e: any) => { | ||
32 | const { id } = e.currentTarget.dataset; | ||
33 | window['ferdium'].actions.service.sendIPCMessage({ | ||
34 | serviceId: service.id, | ||
35 | channel: `selected-media-source:${trackerId}`, | ||
36 | args: { | ||
37 | mediaSourceId: id, | ||
38 | }, | ||
39 | }); | ||
40 | |||
41 | setShow(false); | ||
42 | setTrackerId(null); | ||
43 | }; | ||
44 | |||
45 | return ( | ||
46 | <div className="desktop-capturer-selection"> | ||
47 | <ul className="desktop-capturer-selection__list"> | ||
48 | {sources.map(({ id, name, thumbnail }) => ( | ||
49 | <li className="desktop-capturer-selection__item" key={id}> | ||
50 | <button | ||
51 | type="button" // Add explicit type attribute | ||
52 | className="desktop-capturer-selection__btn" | ||
53 | data-id={id} | ||
54 | title={name} | ||
55 | onClick={handleOnClick} | ||
56 | > | ||
57 | <img | ||
58 | alt="Desktop capture preview" | ||
59 | className="desktop-capturer-selection__thumbnail" | ||
60 | src={thumbnail.toDataURL()} | ||
61 | /> | ||
62 | <span className="desktop-capturer-selection__name">{name}</span> | ||
63 | </button> | ||
64 | </li> | ||
65 | ))} | ||
66 | <li className="desktop-capturer-selection__item"> | ||
67 | <button | ||
68 | type="button" // Add explicit type attribute | ||
69 | className="desktop-capturer-selection__btn" | ||
70 | data-id={SCREENSHARE_CANCELLED_BY_USER} | ||
71 | title="Cancel" | ||
72 | onClick={handleOnClick} | ||
73 | > | ||
74 | <span className="desktop-capturer-selection__name desktop-capturer-selection__name--cancel"> | ||
75 | Cancel | ||
76 | </span> | ||
77 | </button> | ||
78 | </li> | ||
79 | </ul> | ||
80 | </div> | ||
81 | ); | ||
82 | } | ||
diff --git a/src/components/services/content/ServiceView.tsx b/src/components/services/content/ServiceView.tsx index 577473b5d..b7f539a5d 100644 --- a/src/components/services/content/ServiceView.tsx +++ b/src/components/services/content/ServiceView.tsx | |||
@@ -7,6 +7,7 @@ import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config'; | |||
7 | import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen'; | 7 | import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen'; |
8 | import type ServiceModel from '../../../models/Service'; | 8 | import type ServiceModel from '../../../models/Service'; |
9 | import type { RealStores } from '../../../stores'; | 9 | import type { RealStores } from '../../../stores'; |
10 | import MediaSource from '../../MediaSource'; | ||
10 | import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl'; | 11 | import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl'; |
11 | import WebviewLoader from '../../ui/WebviewLoader'; | 12 | import WebviewLoader from '../../ui/WebviewLoader'; |
12 | import ServiceDisabled from './ServiceDisabled'; | 13 | import ServiceDisabled from './ServiceDisabled'; |
@@ -164,6 +165,7 @@ class ServiceView extends Component<IProps, IState> { | |||
164 | ) : ( | 165 | ) : ( |
165 | <> | 166 | <> |
166 | {showNavBar && <WebControlsScreen service={service} />} | 167 | {showNavBar && <WebControlsScreen service={service} />} |
168 | <MediaSource service={service} /> | ||
167 | <ServiceWebview | 169 | <ServiceWebview |
168 | service={service} | 170 | service={service} |
169 | setWebviewReference={setWebviewRef} | 171 | setWebviewReference={setWebviewRef} |