/* * SPDX-License-Identifier: GPL-3.0 * Vesktop, a desktop app aiming to give you a snappier Discord Experience * Copyright (c) 2023 Vendicated and Vencord contributors */ import "./screenSharePicker.css"; import { closeModal, Logger, Margins, Modals, ModalSize, openModal, useAwaiter } from "@vencord/types/utils"; import { findStoreLazy, onceReady } from "@vencord/types/webpack"; import { Button, Card, FluxDispatcher, Forms, Select, Switch, Text, UserStore, useState } from "@vencord/types/webpack/common"; import { Node } from "@vencord/venmic"; import type { Dispatch, SetStateAction } from "react"; import { addPatch } from "renderer/patches/shared"; import { isLinux, isWindows } from "renderer/utils"; const StreamResolutions = ["480", "720", "1080", "1440"] as const; const StreamFps = ["15", "30", "60"] as const; const MediaEngineStore = findStoreLazy("MediaEngineStore"); export type StreamResolution = (typeof StreamResolutions)[number]; export type StreamFps = (typeof StreamFps)[number]; type SpecialSource = "None" | "Entire System"; type AudioSource = SpecialSource | Node; type AudioSources = SpecialSource | Node[]; interface AudioItem { name: string; value: AudioSource; } interface StreamSettings { resolution: StreamResolution; fps: StreamFps; audio: boolean; audioSources?: AudioSources; contentHint?: string; workaround?: boolean; onlyDefaultSpeakers?: boolean; granularSelect?: boolean; } export interface StreamPick extends StreamSettings { id: string; } interface Source { id: string; name: string; url: string; } export let currentSettings: StreamSettings | null = null; const logger = new Logger("VesktopScreenShare"); addPatch({ patches: [ { find: "this.localWant=", replacement: { match: /this.localWant=/, replace: "$self.patchStreamQuality(this);$&" } } ], patchStreamQuality(opts: any) { if (!currentSettings) return; const framerate = Number(currentSettings.fps); const height = Number(currentSettings.resolution); const width = Math.round(height * (16 / 9)); Object.assign(opts, { bitrateMin: 500000, bitrateMax: 8000000, bitrateTarget: 600000 }); if (opts?.encode) { Object.assign(opts.encode, { framerate, width, height, pixelCount: height * width }); } Object.assign(opts.capture, { framerate, width, height, pixelCount: height * width }); } }); if (isLinux) { onceReady.then(() => { FluxDispatcher.subscribe("STREAM_CLOSE", ({ streamKey }: { streamKey: string }) => { const owner = streamKey.split(":").at(-1); if (owner !== UserStore.getCurrentUser().id) { return; } VesktopNative.virtmic.stop(); }); }); } export function openScreenSharePicker(screens: Source[], skipPicker: boolean) { let didSubmit = false; return new Promise((resolve, reject) => { const key = openModal( props => ( { didSubmit = true; if (v.audioSources && v.audioSources !== "None") { if (v.audioSources === "Entire System") { await VesktopNative.virtmic.startSystem(v.workaround); } else { await VesktopNative.virtmic.start(v.audioSources, v.workaround); } } resolve(v); }} close={() => { props.onClose(); if (!didSubmit) reject("Aborted"); }} skipPicker={skipPicker} /> ), { onCloseRequest() { closeModal(key); reject("Aborted"); } } ); }); } function ScreenPicker({ screens, chooseScreen }: { screens: Source[]; chooseScreen: (id: string) => void }) { return (
{screens.map(({ id, name, url }) => ( ))}
); } function StreamSettings({ source, settings, setSettings, skipPicker }: { source: Source; settings: StreamSettings; setSettings: Dispatch>; skipPicker: boolean; }) { const [thumb] = useAwaiter( () => (skipPicker ? Promise.resolve(source.url) : VesktopNative.capturer.getLargeThumbnail(source.id)), { fallbackValue: source.url, deps: [source.id] } ); return (
What you're streaming {source.name} Stream Settings
Resolution
{StreamResolutions.map(res => ( ))}
Frame Rate
{StreamFps.map(fps => ( ))}
Content Type

Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange for a much sharper and clearer image.

{isWindows && ( setSettings(s => ({ ...s, audio: checked }))} hideBorder className="vcd-screen-picker-audio" > Stream With Audio )}
{isLinux && ( setSettings(s => ({ ...s, audioSources: sources }))} setWorkaround={value => setSettings(s => ({ ...s, workaround: value }))} setOnlyDefaultSpeakers={value => setSettings(s => ({ ...s, onlyDefaultSpeakers: value }))} setGranularSelect={value => setSettings(s => ({ ...s, granularSelect: value }))} /> )}
); } function isSpecialSource(value?: AudioSource | AudioSources): value is SpecialSource { return typeof value === "string"; } function hasMatchingProps(value: Node, other: Node) { return Object.keys(value).every(key => value[key] === other[key]); } function mapToAudioItem(node: AudioSource, granularSelect?: boolean): AudioItem[] { if (isSpecialSource(node)) { return [{ name: node, value: node }]; } const rtn: AudioItem[] = []; const name = node["application.name"]; if (name) { rtn.push({ name: name, value: { "application.name": name } }); } if (!granularSelect) { return rtn; } const binary = node["application.process.binary"]; if (!name) { rtn.push({ name: binary, value: { "application.process.binary": binary } }); } const pid = node["application.process.id"]; const first = rtn[0]; const firstValues = first.value as Node; rtn.push({ name: `${first.name} (${pid})`, value: { ...firstValues, "application.process.id": pid } }); const mediaName = node["media.name"]; if (!mediaName) { return rtn; } rtn.push({ name: `${first.name} [${mediaName}]`, value: { ...firstValues, "media.name": mediaName } }); return rtn; } function AudioSourcePickerLinux({ audioSources, workaround, onlyDefaultSpeakers, granularSelect, setAudioSources, setWorkaround, setOnlyDefaultSpeakers, setGranularSelect }: { audioSources?: AudioSources; workaround?: boolean; onlyDefaultSpeakers?: boolean; granularSelect?: boolean; setAudioSources(s: AudioSources): void; setWorkaround(b: boolean): void; setOnlyDefaultSpeakers(b: boolean): void; setGranularSelect(b: boolean): void; }) { const properties = granularSelect ? ["application.process.id"] : undefined; const [sources, _, loading] = useAwaiter(() => VesktopNative.virtmic.list(properties), { fallbackValue: { ok: true, targets: [], hasPipewirePulse: true } }); const specialSources: SpecialSource[] = ["None", "Entire System"]; const allSources = sources.ok ? [...specialSources, ...sources.targets] : null; const hasPipewirePulse = sources.ok ? sources.hasPipewirePulse : true; const [ignorePulseWarning, setIgnorePulseWarning] = useState(false); const isSelected = (value: AudioSource) => { if (!audioSources) { return false; } if (isSpecialSource(audioSources) || isSpecialSource(value)) { return audioSources === value; } return audioSources.some(source => hasMatchingProps(source, value)); }; const update = (value: SpecialSource | Node) => { if (isSpecialSource(value)) { setAudioSources(value); return; } if (isSpecialSource(audioSources)) { setAudioSources([value]); return; } if (isSelected(value)) { setAudioSources(audioSources?.filter(x => !hasMatchingProps(x, value)) ?? "None"); return; } setAudioSources([...(audioSources || []), value]); }; const uniqueName = (value: AudioItem, index: number, list: AudioItem[]) => list.findIndex(x => x.name === value.name) === index; return ( <> Audio Settings {loading ? ( Loading Audio Sources... ) : ( Audio Source )} {!sources.ok && sources.isGlibCxxOutdated && ( Failed to retrieve Audio Sources because your C++ library is too old to run venmic . See{" "} this guide {" "} for possible solutions. )} {hasPipewirePulse || ignorePulseWarning ? ( allSources && (