feat: essential sources and more, details follow

* Add Game Capture and Chat Box to essential sources, remove Event List and Screen Capture from essentials list. * Sort essential sources by specified order. * Rename tabs to "All Sources", "Media Categories", the rest remain the same. * Narrow section margin from modal to accomodate for descriptions. * Rename "Video Capture Device" to "Camera / Capture Card". * Rename "Application Audio Capture" to "Application Audio". * Remove clarification from Spout2 capture, moved to short description. * Restyle Source card to fit descriptions. * Display short descriptions even if the source type is not essential. * Add translations where necessary, old labels remain.
stream-labs · Dec 12, 2024 · 258b46f · 258b46f
1 parent a21206b
commit 258b46f
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 48 deletions.
diff --git a/app/components-react/windows/source-showcase/SourceGrid.m.less b/app/components-react/windows/source-showcase/SourceGrid.m.less
@@ -4,14 +4,15 @@
     padding-right: 0;
   }
 
-  :global(.ant-collapse-content-box .source-tag) {
-    margin-bottom: 8px;
-  }
-
   :global(.collapse-section) {
     display: flex;
     flex: 1;
     flex-wrap: wrap;
+
+  }
+
+  :global(.collapse-section .ant-col-8) {
+    margin-bottom: 8px;
   }
 
   :global(.ant-collapse-header) {

diff --git a/app/components-react/windows/source-showcase/SourceGrid.tsx b/app/components-react/windows/source-showcase/SourceGrid.tsx
@@ -100,16 +100,25 @@ export default function SourceGrid(p: { activeTab: string }) {
     });
   }, []);
 
+  const essentialSourcesOrder = ['game_capture', 'dshow_input', 'ffmpeg_source'];
+
   const essentialSources = useMemo(() => {
-    const essentialDefaults = availableSources.filter(source =>
-      [
-        'dshow_input',
-        'ffmpeg_source',
-        byOS({ [OS.Windows]: 'screen_capture', [OS.Mac]: 'window_capture' }),
-      ].includes(source.value),
-    );
+    const essentialDefaults = availableSources
+      .filter(source =>
+        [
+          'dshow_input',
+          'ffmpeg_source',
+          'game_capture',
+          //byOS({ [OS.Windows]: 'screen_capture', [OS.Mac]: 'window_capture' }),
+        ].includes(source.value),
+      )
+      .sort(
+        (s1, s2) =>
+          essentialSourcesOrder.indexOf(s1.value) - essentialSourcesOrder.indexOf(s2.value),
+      );
+
     const essentialWidgets = iterableWidgetTypes.filter(type =>
-      [WidgetType.AlertBox, WidgetType.EventList].includes(WidgetType[type]),
+      [WidgetType.AlertBox, WidgetType.ChatBox].includes(WidgetType[type]),
     );
     return { essentialDefaults, essentialWidgets };
   }, []);
@@ -267,10 +276,7 @@ export default function SourceGrid(p: { activeTab: string }) {
 
   return (
     <Scrollable style={{ height: 'calc(100% - 64px)' }} className={styles.sourceGrid}>
-      <Row
-        gutter={[8, 8]}
-        style={{ marginLeft: '24px', marginRight: '24px', paddingBottom: '24px' }}
-      >
+      <Row gutter={[8, 8]} style={{ marginLeft: '8px', marginRight: '8px', paddingBottom: '24px' }}>
         {p.activeTab === 'all' ? (
           <>
             <Col span={24}>
@@ -280,7 +286,7 @@ export default function SourceGrid(p: { activeTab: string }) {
                 onChange={xs => setExpandedSections(xs as string[])}
               >
                 <Panel
-                  header={$t('Essential Sources')}
+                  header={$t('Essentials')}
                   key="essentialSources"
                   collapsible="disabled"
                   showArrow={false}

diff --git a/app/components-react/windows/source-showcase/SourceShowcase.m.less b/app/components-react/windows/source-showcase/SourceShowcase.m.less
@@ -24,6 +24,7 @@
   text-overflow: ellipsis;
   min-height: 56px;
   display: flex;
+  flex-direction: column;
 
   i {
     margin-right: 8px;

diff --git a/app/components-react/windows/source-showcase/SourceTag.tsx b/app/components-react/windows/source-showcase/SourceTag.tsx
@@ -48,13 +48,21 @@ export default function SourceTag(p: {
         onDoubleClick={() => selectInspectedSource()}
         data-name={displayData?.name || p.name}
       >
-        <div className={styles.iconWrapper}>
-          {displayData?.icon && <i className={displayData?.icon} />}
-        </div>
-        <div className={styles.displayName}>
-          {displayData?.name || p.name}
-          {p.essential && <div style={{ opacity: '0.5' }}>{displayData?.shortDesc}</div>}
+        <div style={{ display: 'flex', flexDirection: 'row' }}>
+          <div className={styles.iconWrapper}>
+            {displayData?.icon && <i className={displayData?.icon} />}
+          </div>
+          <div className={styles.displayName}>{displayData?.name || p.name}</div>
         </div>
+        {displayData?.shortDesc && (
+          <div
+            style={{
+              opacity: '0.5',
+            }}
+          >
+            {displayData?.shortDesc}
+          </div>
+        )}
       </div>
     </Col>
   );

diff --git a/app/components-react/windows/source-showcase/index.tsx b/app/components-react/windows/source-showcase/index.tsx
@@ -51,8 +51,8 @@ function SourcesShowcaseModal() {
             mode="horizontal"
             style={{ marginBottom: '16px' }}
           >
-            <Menu.Item key="all">{$t('All')}</Menu.Item>
-            <Menu.Item key="general">{$t('General')}</Menu.Item>
+            <Menu.Item key="all">{$t('All Sources')}</Menu.Item>
+            <Menu.Item key="general">{$t('Media Categories')}</Menu.Item>
             <Menu.Item key="widgets">{$t('Widgets')}</Menu.Item>
             {availableAppSources.length > 0 && <Menu.Item key="apps">{$t('Apps')}</Menu.Item>}
           </Menu>

diff --git a/app/i18n/en-US/source-props.json b/app/i18n/en-US/source-props.json
@@ -1,17 +1,18 @@
 {
- "Image": "Image",
- "Color Block": "Color Block",
- "Browser Source": "Browser Source",
- "Media File": "Media File",
- "Image Slide Show": "Image Slide Show",
- "Text (GDI+)": "Text (GDI+)",
- "Text (FreeType 2)": "Text (FreeType 2)",
- "Display Capture": "Display Capture",
- "Window Capture": "Window Capture",
- "Game Capture": "Game Capture",
- "Video Capture Device": "Video Capture Device",
- "Audio Input Capture": "Audio Input Capture",
- "Audio Output Capture": "Audio Output Capture",
- "Blackmagic Device": "Blackmagic Device",
- "NDI Source": "NDI Source"
+  "Image": "Image",
+  "Color Block": "Color Block",
+  "Browser Source": "Browser Source",
+  "Media File": "Media File",
+  "Image Slide Show": "Image Slide Show",
+  "Text (GDI+)": "Text (GDI+)",
+  "Text (FreeType 2)": "Text (FreeType 2)",
+  "Display Capture": "Display Capture",
+  "Window Capture": "Window Capture",
+  "Game Capture": "Game Capture",
+  "Video Capture Device": "Video Capture Device",
+  "Camera / Capture Card": "Camera / Capture Card",
+  "Audio Input Capture": "Audio Input Capture",
+  "Audio Output Capture": "Audio Output Capture",
+  "Blackmagic Device": "Blackmagic Device",
+  "NDI Source": "NDI Source"
 }
diff --git a/app/i18n/en-US/sources.json b/app/i18n/en-US/sources.json
@@ -22,6 +22,7 @@
   "Primary monitor": "Primary monitor",
   "Secondary monitor": "Secondary monitor",
   "Capture a game you're playing on your computer.": "Capture a game you're playing on your computer.",
+  "Capture your game": "Capture your game",
   "Built in works with most modern computer games": "Built in works with most modern computer games",
   "Allow you to capture NDI output streams.": "Allow you to capture NDI output streams.",
   "Any device that attaches to a computer for the purpose of capturing sound, such as music or speech.": "Any device that attaches to a computer for the purpose of capturing sound, such as music or speech.",
@@ -50,6 +51,7 @@
   "YouTube Subscribers": "YouTube Subscribers",
   "Chat Box": "Chat Box",
   "Include your channel's chat into your stream.": "Include your channel's chat into your stream.",
+  "Display chatters on screen": "Display chatters on screen",
   "Twitch chat": "Twitch chat",
   "YouTube chat": "YouTube chat",
   "Trovo chat": "Trovo chat",
@@ -71,6 +73,8 @@
   "Stream Label": "Stream Label",
   "This is a placeholder description for Stream Labels.": "Include text into your stream, such as follower count, last donation, and many others.",
   "Application Audio Capture (BETA)": "Application Audio Capture (BETA)",
+  "Application Audio": "Application Audio",
+  "Beta": "Beta",
   "Capture the audio coming from a specific application.": "Capture the audio coming from a specific application.",
   "New Cheers": "New Cheers",
   "New Donations": "New Donations",
@@ -205,11 +209,16 @@
   "Capture Window": "Capture Window",
   "Supports:": "Supports:",
   "Essential Sources": "Essential Sources",
+  "Essentials": "Essentials",
+  "All Sources": "All Sources",
+  "Media Categories": "Media Categories",
   "General Sources": "General Sources",
   "Add media": "Add media",
   "Your webcam device": "Your webcam device",
+  "Display device video": "Display device video",
   "Capture games and apps": "Capture games and apps",
   "Dynamic, live alerts": "Dynamic, live alerts",
+  "Dynamic live alerts": "Dynamic live alerts",
   "Display recent events": "Display recent events",
   "Viewer shoutouts": "Viewer shoutouts",
   "Capture an application window": "Capture an application window",
@@ -363,6 +372,8 @@
   "Composite mode": "Composite mode",
   "Poll time for new senders": "Poll time for new senders",
   "Spout2 capture (Vtube support)": "Spout2 capture (Vtube support)",
+  "Spout2 capture": "Spout2 capture",
+  "Vtube support": "Vtube support",
   "Virtual avatar capture source. Enables high resolution, zero-compression and zero-latency video capture from VTube third-party software.": "Virtual avatar capture source. Enables high resolution, zero-compression and zero-latency video capture from VTube third-party software.",
   "Learn how to set it up": "Learn how to set it up",
   "Lock/Unlock Source": "Lock/Unlock Source",

diff --git a/app/services/sources/sources-data.ts b/app/services/sources/sources-data.ts
@@ -82,12 +82,14 @@ export const SourceDisplayData = (): { [key: string]: ISourceDisplayData } => ({
   game_capture: {
     name: $t('Game Capture'),
     description: $t("Capture a game you're playing on your computer."),
+    shortDesc: $t('Capture your game'),
     demoFilename: 'game-capture.png',
     supportList: [$t('Built in works with most modern computer games')],
     icon: 'fas fa-gamepad',
   },
   dshow_input: {
-    name: $t('Video Capture Device'),
+    name: $t('Camera / Capture Card'),
+    shortDesc: $t('Display device video'),
     description: $t('Display video from webcams, capture cards, and other devices.'),
     demoFilename: 'video-capture.png',
     supportList: [
@@ -96,7 +98,6 @@ export const SourceDisplayData = (): { [key: string]: ISourceDisplayData } => ({
       $t('Capture cards (Elgato, Avermedia, BlackMagic)'),
     ],
     icon: 'icon-webcam',
-    shortDesc: $t('Your webcam device'),
   },
   ndi_source: {
     name: $t('NDI source'),
@@ -202,7 +203,8 @@ export const SourceDisplayData = (): { [key: string]: ISourceDisplayData } => ({
     icon: 'icon-audio',
   },
   av_capture_input: {
-    name: $t('Video Capture Device'),
+    name: $t('Camera / Capture Card'),
+    shortDesc: $t('Display device video'),
     description: $t('Display video from webcams, capture cards, and other devices.'),
     demoFilename: 'video-capture.png',
     supportList: [
@@ -278,12 +280,14 @@ export const SourceDisplayData = (): { [key: string]: ISourceDisplayData } => ({
     icon: 'icon-team-2',
   },
   wasapi_process_output_capture: {
-    name: $t('Application Audio Capture (BETA)'),
+    name: $t('Application Audio'),
+    shortDesc: $t('Beta'),
     description: $t('Capture the audio coming from a specific application.'),
     icon: 'fas fa-user',
   },
   spout_capture: {
-    name: $t('Spout2 capture (Vtube support)'),
+    name: $t('Spout2 capture'),
+    shortDesc: $t('Vtube support'),
     description: $t(
       'Virtual avatar capture source. Enables high resolution, zero-compression and zero-latency video capture from VTube third-party software.',
     ),

diff --git a/app/services/widgets/widgets-data.ts b/app/services/widgets/widgets-data.ts
@@ -543,7 +543,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
     demoFilename: 'source-alertbox.png',
     supportList: [$t('Donations'), $t('Subscriptions'), $t('Follows'), $t('Bits')],
     icon: 'icon-alert-box',
-    shortDesc: $t('Dynamic, live alerts'),
+    shortDesc: $t('Dynamic live alerts'),
   },
   [WidgetType.DonationGoal]: {
     name: $t('Tip Goal'),
@@ -631,6 +631,7 @@ export const WidgetDisplayData = (platform?: string): { [x: number]: IWidgetDisp
   [WidgetType.ChatBox]: {
     name: $t('Chat Box'),
     description: $t("Include your channel's chat into your stream."),
+    shortDesc: $t('Display chatters on screen'),
     demoVideo: false,
     demoFilename: 'source-chatbox.png',
     supportList: [$t('Twitch chat'), $t('YouTube chat'), $t('Facebook chat'), $t('Trovo chat')],

diff --git a/test/regular/sources.ts b/test/regular/sources.ts
@@ -264,9 +264,9 @@ test('Create/Remove Game Capture and view Source Properties', async t => {
 });
 
 test('Create/Remove Video Capture Device and view Source Properties', async t => {
-  const sourceName = 'Video Capture Device';
+  const sourceName = 'Camera / Capture Card';
 
-  await addSource('Video Capture Device', sourceName);
+  await addSource('Camera / Capture Card', sourceName);
   await focusMain();
 
   await selectSource(sourceName);