diff --git a/src/renderer/components/ScreenSharePicker.tsx b/src/renderer/components/ScreenSharePicker.tsx
index acdc593..ef0c942 100644
--- a/src/renderer/components/ScreenSharePicker.tsx
+++ b/src/renderer/components/ScreenSharePicker.tsx
@@ -23,11 +23,13 @@ import { Node } from "@vencord/venmic";
import type { Dispatch, SetStateAction } from "react";
import { addPatch } from "renderer/patches/shared";
import { useSettings } from "renderer/settings";
-import { isLinux, isWindows } from "renderer/utils";
+import { classNameFactory, isLinux, isWindows } from "renderer/utils";
const StreamResolutions = ["480", "720", "1080", "1440", "2160"] as const;
const StreamFps = ["15", "30", "60"] as const;
+const cl = classNameFactory("vcd-screen-picker-");
+
const MediaEngineStore = findStoreLazy("MediaEngineStore");
export type StreamResolution = (typeof StreamResolutions)[number];
@@ -161,13 +163,21 @@ export function openScreenSharePicker(screens: Source[], skipPicker: boolean) {
function ScreenPicker({ screens, chooseScreen }: { screens: Source[]; chooseScreen: (id: string) => void }) {
return (
-
+
@@ -187,11 +197,13 @@ function AudioSettingsModal({
return (
-
- Venmic Settings
+
+
+ Venmic Settings
+
-
+
(Settings.audio = { ...Settings.audio, workaround: v })}
@@ -295,7 +307,7 @@ function AudioSettingsModal({
Device Selection
-
+
Back
@@ -304,6 +316,34 @@ function AudioSettingsModal({
);
}
+function OptionRadio(props: {
+ options: Array | ReadonlyArray;
+ labels?: Array;
+ settingsKey: string;
+ settings: StreamSettings;
+ setSettings: Dispatch>;
+}) {
+ const { options, setSettings, settings, settingsKey, labels } = props;
+
+ return (
+
+ {(options as string[]).map((option, idx) => (
+
+ {labels?.[idx] ?? option}
+ setSettings(s => ({ ...s, [settingsKey]: option }))}
+ />
+
+ ))}
+
+ );
+}
+
function StreamSettings({
source,
settings,
@@ -340,88 +380,47 @@ function StreamSettings({
return (
What you're streaming
-
-
+
+
{source.name}
Stream Settings
-
-
-
+
+
-
-
+
+
Content Type
-
-
- Prefer Smoothness
- setSettings(s => ({ ...s, contentHint: "motion" }))}
- />
-
-
- Prefer Clarity
- setSettings(s => ({ ...s, contentHint: "detail" }))}
- />
-
-
-
+
+
Choosing "Prefer Clarity" will result in a significantly lower framerate in exchange
for a much sharper and clearer image.
@@ -433,7 +432,7 @@ function StreamSettings({
value={settings.audio}
onChange={checked => setSettings(s => ({ ...s, audio: checked }))}
hideBorder
- className="vcd-screen-picker-audio"
+ className={cl("audio")}
>
Stream With Audio
@@ -639,7 +638,7 @@ function AudioSourcePickerLinux({
return (
<>
-
+
{loading ? "Loading Sources..." : "Audio Sources"}
)}
-
+
Open Audio Settings
>
@@ -710,11 +705,11 @@ function ModalComponent({
return (
-
+
ScreenShare
-
+
{!selected ? (
) : (
@@ -726,7 +721,7 @@ function ModalComponent({
/>
)}
-
+
{
diff --git a/src/renderer/components/screenSharePicker.css b/src/renderer/components/screenSharePicker.css
index e3dc7d2..c5ab147 100644
--- a/src/renderer/components/screenSharePicker.css
+++ b/src/renderer/components/screenSharePicker.css
@@ -2,7 +2,7 @@
padding: 1em;
}
-.vcd-screen-picker-header h1 {
+.vcd-screen-picker-header-title {
margin: 0;
}
@@ -15,23 +15,20 @@
flex-grow: 1;
}
-.vcd-screen-picker-grid {
+
+/* Screen Grid */
+.vcd-screen-picker-screen-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2em 1em;
}
-.vcd-screen-picker-grid input {
+.vcd-screen-picker-screen-radio {
appearance: none;
cursor: pointer;
}
-.vcd-screen-picker-selected img {
- border: 2px solid var(--brand-500);
- border-radius: 3px;
-}
-
-.vcd-screen-picker-grid label {
+.vcd-screen-picker-screen-label {
overflow: hidden;
padding: 8px;
cursor: pointer;
@@ -39,11 +36,11 @@
justify-items: center;
}
-.vcd-screen-picker-grid label:hover {
+.vcd-screen-picker-screen-label:hover {
outline: 2px solid var(--brand-500);
}
-.vcd-screen-picker-grid div {
+.vcd-screen-picker-screen-name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -75,37 +72,48 @@
margin-bottom: 1em;
}
-.vcd-screen-picker-radio input {
- display: none;
+
+/* Option Radios */
+
+.vcd-screen-picker-option-radios {
+ display: flex;
+ width: 100%;
+ border-radius: 3px;
}
-.vcd-screen-picker-radio {
+.vcd-screen-picker-option-radio {
+ flex: 1 1 auto;
+ text-align: center;
background-color: var(--background-secondary);
border: 1px solid var(--primary-800);
padding: 0.3em;
cursor: pointer;
}
-.vcd-screen-picker-radio h2 {
- margin: 0;
+.vcd-screen-picker-option-radio:first-child {
+ border-radius: 3px 0 0 3px;
}
-.vcd-screen-picker-radio[data-checked="true"] {
+.vcd-screen-picker-option-radio:last-child {
+ border-radius: 0 3px 3px 0;
+}
+
+.vcd-screen-picker-option-input {
+ display: none;
+}
+
+.vcd-screen-picker-option-radio[data-checked="true"] {
background-color: var(--brand-500);
border-color: var(--brand-500);
}
-.vcd-screen-picker-radio[data-checked="true"] h2 {
- color: var(--interactive-active);
-}
-
.vcd-screen-picker-quality {
display: flex;
gap: 1em;
margin-bottom: 0.5em;
}
-.vcd-screen-picker-quality section {
+.vcd-screen-picker-quality-section {
flex: 1 1 auto;
}
@@ -114,24 +122,6 @@
margin-top: 0.3rem;
}
-.vcd-screen-picker-radios {
- display: flex;
- width: 100%;
- border-radius: 3px;
-}
-
-.vcd-screen-picker-radios label {
- flex: 1 1 auto;
- text-align: center;
-}
-
-.vcd-screen-picker-radios label:first-child {
- border-radius: 3px 0 0 3px;
-}
-
-.vcd-screen-picker-radios label:last-child {
- border-radius: 0 3px 3px 0;
-}
.vcd-screen-picker-audio {
margin-bottom: 0;
diff --git a/src/renderer/fixes.css b/src/renderer/fixes.css
index 20e80aa..9411321 100644
--- a/src/renderer/fixes.css
+++ b/src/renderer/fixes.css
@@ -1,15 +1,3 @@
-/* Download Desktop button in guilds list */
-[class^=listItem_]:has([data-list-item-id=guildsnav___app-download-button]),
-[class^=listItem_]:has(+ [class^=listItem_] [data-list-item-id=guildsnav___app-download-button]) {
- display: none;
-}
-
-/* FIXME: remove this once Discord fixes their css to not explode scrollbars on chromium >=121 */
-* {
- scrollbar-width: unset !important;
- scrollbar-color: unset !important;
-}
-
/* Workaround for making things in the draggable area clickable again on macOS */
.platform-osx [class*=topic_], .platform-osx [class*=notice_] button {
-webkit-app-region: no-drag;
diff --git a/src/renderer/utils.ts b/src/renderer/utils.ts
index 967fe88..16c8480 100644
--- a/src/renderer/utils.ts
+++ b/src/renderer/utils.ts
@@ -18,3 +18,26 @@ const { platform } = navigator;
export const isWindows = platform.startsWith("Win");
export const isMac = platform.startsWith("Mac");
export const isLinux = platform.startsWith("Linux");
+
+type ClassNameFactoryArg = string | string[] | Record | false | null | undefined | 0 | "";
+/**
+ * @param prefix The prefix to add to each class, defaults to `""`
+ * @returns A classname generator function
+ * @example
+ * const cl = classNameFactory("plugin-");
+ *
+ * cl("base", ["item", "editable"], { selected: null, disabled: true })
+ * // => "plugin-base plugin-item plugin-editable plugin-disabled"
+ */
+export const classNameFactory =
+ (prefix: string = "") =>
+ (...args: ClassNameFactoryArg[]) => {
+ const classNames = new Set();
+ for (const arg of args) {
+ if (arg && typeof arg === "string") classNames.add(arg);
+ else if (Array.isArray(arg)) arg.forEach(name => classNames.add(name));
+ else if (arg && typeof arg === "object")
+ Object.entries(arg).forEach(([name, value]) => value && classNames.add(name));
+ }
+ return Array.from(classNames, name => prefix + name).join(" ");
+ };