+ Replay',
+ )}
+ >
+
+ HighlighterService.actions.installAiHighlighter(false, 'Go-live-flow', p.game)
+ }
+ >
+ {'Replay'}
+
+
+ }
+ />
+
+
- {gameIsSupported ? (
+
+
+
+
) {
const platformSettings = p.value;
p.onChange({ ...platformSettings, ...patch });
}
- /**
- * Toggle the "Use different title and description " checkbox
- **/
- function toggleUseCustom() {
- assertIsDefined(p.platform);
- const isEnabled = p.value.useCustomFields;
- updatePlatform({ useCustomFields: !isEnabled });
- }
-
function updateCommonField(fieldName: TCustomFieldName, value: string) {
updatePlatform({ [fieldName]: value });
}
const view = Services.StreamingService.views;
- const hasCustomCheckbox = p.layoutMode === 'multiplatformAdvanced';
- const fieldsAreVisible = !hasCustomCheckbox || p.value.useCustomFields;
+ const fieldsAreVisible = !p.platform || p.value.useCustomFields || false;
const descriptionIsRequired =
typeof p.descriptionIsRequired === 'boolean'
? p.descriptionIsRequired
@@ -79,10 +59,17 @@ export const CommonPlatformFields = InputComponent((rawProps: IProps) => {
const fields = p.value;
- // find out the best title for common fields
- const title = hasDescription
- ? $t('Use different title and description')
- : $t('Use different title');
+ const height = useMemo(() => {
+ if (!fieldsAreVisible) {
+ return '0px';
+ }
+
+ if (hasDescription) {
+ return '162px';
+ }
+
+ return '71px';
+ }, [fieldsAreVisible, hasDescription]);
// determine max character length for title by enabled platform limitation
let maxCharacters = 120;
@@ -93,10 +80,6 @@ export const CommonPlatformFields = InputComponent((rawProps: IProps) => {
maxCharacters = 140;
}
- if (!enabledPlatforms.includes('twitch') && HighlighterService.views.useAiHighlighter) {
- HighlighterService.actions.setAiHighlighter(false);
- }
-
const titleTooltip = useMemo(() => {
if (enabledPlatforms.includes('tiktok')) {
return $t('Only 32 characters of your title will display on TikTok');
@@ -106,63 +89,44 @@ export const CommonPlatformFields = InputComponent((rawProps: IProps) => {
}, [enabledPlatforms]);
return (
- ) {
+ const platformSettings = p.value;
+ p.onChange({ ...platformSettings, ...patch });
+ }
+
+ /**
+ * Toggle the "Use different title and description " checkbox
+ **/
+ const toggleUseCustom = useCallback(() => {
+ assertIsDefined(p.platform);
+ const isEnabled = p.value.useCustomFields;
+ updatePlatform({ useCustomFields: !isEnabled });
+ }, [p.platform, p.value.useCustomFields, updatePlatform]);
+
+ // Memoize the values of `hasDescription` to avoid unnecessary re-renders of the component
+ // but it never needs to be updated after the first render because supported fields for platforms
+ // can't change without updating the service
+ const hasDescription = useMemo(
+ () =>
+ p.platform
+ ? Services.StreamingService.views.supports('description', [p.platform])
+ : Services.StreamingService.views.supports('description'),
+ [],
+ );
+
+ // Same as above for `title`
+ const title = useMemo(
+ () => (hasDescription ? $t('Use different title and description') : $t('Use different title')),
+ [],
+ );
+
+ const showCheckbox = useMemo(() => {
+ return p.enabledPlatformsCount && p.enabledPlatformsCount > 1;
+ }, [p.enabledPlatformsCount]);
+
+ const layout = p.layout ?? 'vertical';
+
+ return showCheckbox ? (
+
+
+ ) : (
+ <>
+ );
+});
diff --git a/app/components-react/windows/go-live/DestinationSwitchers.m.less b/app/components-react/windows/go-live/DestinationSwitchers.m.less
index 13cad0d42f3b..7b8e93886123 100644
--- a/app/components-react/windows/go-live/DestinationSwitchers.m.less
+++ b/app/components-react/windows/go-live/DestinationSwitchers.m.less
@@ -2,66 +2,91 @@
@import '../../../styles/mixins.less';
.destination-logo {
- font-size: 34px;
+ font-size: 16px !important;
+ margin-top: 4px;
}
.platform-logo-twitch {
- font-size: 34px;
+ font-size: 16px !important;
+ margin-top: 5px;
}
.platform-logo-youtube {
- font-size: 31px;
- margin-top: 9px;
- width: 34px;
- height: 34px;
+ font-size: 15px !important;
+ margin-top: 4px !important;
+ width: 16px !important;
+ height: 16px !important;
}
.platform-logo-facebook {
- font-size: 34px;
+ font-size: 16px !important;
}
.platform-logo-tiktok {
- font-size: 34px;
- margin-left: 5px;
- width: 34px;
- height: 34px;
+ font-size: 16px !important;
+ margin-left: 1px;
+ width: 16px !important;
+ height: 16px !important;
}
.platform-logo-instagram {
- font-size: 34px;
- width: 34px;
- height: 34px;
+ font-size: 16px !important;
+ width: 16px !important;
+ height: 16px !important;
}
.platform-logo-twitter {
- width: 32px;
- height: 32px;
+ width: 15px !important;
+ height: 15px !important;
}
.platform-logo-kick {
- width: 34px;
- height: 34px;
+ width: 16px !important;
+ height: 16px !important;
+ margin-top: 3px;
}
.platform-logo-trovo {
- width: 34px;
- height: 34px;
+ width: 16px !important;
+ height: 16px !important;
+ margin-top: 5px;
}
.platform-logo {
- align-self: center;
- display: flex;
- margin-right: 10px;
- min-width: 36px;
+ margin: 0px 10px 0px 0px;
}
.platform-switcher {
- .radius();
-
display: flex;
- height: 54px;
- background: var(--card) !important;
+ flex-direction: column;
+ border-radius: 8px;
+ background: var(--card-target);
transition: transform 0.05s;
cursor: pointer;
margin-bottom: 15px;
padding: 8px 10px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+
+ .destination-info {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+
+ :global(.ant-form-item) {
+ margin: 0px;
+ }
+
+ :global(.ant-form-item-control-input) {
+ align-items: flex-start;
+ }
+ }
+
+ .col-info {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .col-account {
+ display: flex;
+ align-items: center;
+ }
.col-input {
- padding-top: 3px;
padding-right: 16px;
- width: 52px;
}
.col-primary {
@@ -69,23 +94,14 @@
text-align: center;
}
- .col-account {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- align-self: center;
- flex: 1;
- }
-
.platform-name {
color: var(--title);
+ font-weight: 500;
+ display: flex;
+ align-items: center;
}
}
-.switch-wrapper {
- padding: 0px 15px;
-}
-
.switch-wrapper:last-child {
padding-bottom: 55px;
}
@@ -94,29 +110,20 @@
margin-bottom: 0px;
}
-.platform-disabled {
- background: var(--card-disabled) !important;
-}
-
-.platform-enabled {
- transition: 0.3 ease-in-out;
- background: var(--card-active) !important;
-}
-
-.platform-name {
- font-size: 14px;
-}
-
.platform-handle {
font-size: 12px;
line-height: 18px;
+ margin: 5px 0px 3px 0px;
}
.display-selector-wrapper {
- align-self: center;
+ :global(.ant-form-item) {
+ margin-bottom: 0px;
+ }
}
-.dual-output-display-selector {
+.display-selector {
+ margin-top: 6px;
margin-bottom: 0px !important;
display: flex;
align-self: flex-end;
diff --git a/app/components-react/windows/go-live/DestinationSwitchers.tsx b/app/components-react/windows/go-live/DestinationSwitchers.tsx
index a96a71af0af3..f8b28b4f823b 100644
--- a/app/components-react/windows/go-live/DestinationSwitchers.tsx
+++ b/app/components-react/windows/go-live/DestinationSwitchers.tsx
@@ -1,22 +1,35 @@
-import React, { useRef, useMemo, MouseEvent } from 'react';
+import React, {
+ useRef,
+ useMemo,
+ useImperativeHandle,
+ forwardRef,
+ MouseEvent,
+ memo,
+ useCallback,
+} from 'react';
import { getPlatformService, platformLabels, TPlatform } from '../../../services/platforms';
import cx from 'classnames';
import { $t } from '../../../services/i18n';
import styles from './DestinationSwitchers.m.less';
import { ICustomStreamDestination } from '../../../services/settings/streaming';
import { Services } from '../../service-provider';
-import { SwitchInput } from '../../shared/inputs';
import PlatformLogo from '../../shared/PlatformLogo';
import { useDebounce } from '../../hooks';
import { useGoLiveSettings } from './useGoLiveSettings';
import DisplaySelector from 'components-react/shared/DisplaySelector';
-import ConnectButton from 'components-react/shared/ConnectButton';
-import { message, Tooltip } from 'antd';
+import { message } from 'antd';
+import {
+ SwitcherCard,
+ ISwitcherCardHandle,
+ ISwitcherCardHandle as IDestinationSwitcherHandle,
+} from './SwitcherCard';
+import AnimatedWrapper from 'components-react/shared/AnimatedWrapper';
+import Utils from 'services/utils';
/**
* Allows enabling/disabling platforms and custom destinations for the stream
*/
-export function DestinationSwitchers() {
+export const DestinationSwitchers = memo(() => {
const {
linkedPlatforms,
enabledPlatforms,
@@ -27,22 +40,20 @@ export function DestinationSwitchers() {
isPlatformLinked,
isPrimaryPlatform,
isRestreamEnabled,
- isDualOutputMode,
+ isStreamShiftMode,
isPrime,
alwaysEnabledPlatforms,
alwaysShownPlatforms,
isTwitchDualStreaming,
} = useGoLiveSettings();
- // use these references to apply debounce
- // for error handling and switch animation
+ // Use these references to apply debounce for error handling and switch animation
const enabledPlatformsRef = useRef(enabledPlatforms);
enabledPlatformsRef.current = enabledPlatforms;
const enabledDestRef = useRef(enabledDestinations);
enabledDestRef.current = enabledDestinations;
- // some platforms are always shown, even if not linked
- // add them to the list of platforms to display
+ // Some platforms are always shown, even if not linked so add them to the list of platforms to display
const platforms = useMemo(() => {
const unlinkedAlwaysShownPlatforms = alwaysShownPlatforms.filter(
platform => !isPlatformLinked(platform),
@@ -50,21 +61,15 @@ export function DestinationSwitchers() {
return unlinkedAlwaysShownPlatforms.length
? linkedPlatforms.concat(unlinkedAlwaysShownPlatforms)
: linkedPlatforms;
- }, [linkedPlatforms, enabledPlatformsRef.current, isDualOutputMode, isPrime]);
+ }, [linkedPlatforms, enabledPlatformsRef.current, enabledPlatforms]);
- // Disable custom destination switchers when restream is not available
- // or for a non-ultra user is in single output mode. The one exception
- // for a non-ultra user in single output mode is if TikTok is the only enabled platform
+ // Disable custom destination switchers when restream is not available, such as for a non-ultra user.
+ // The one exception for a non-ultra user in single output mode is if TikTok is the only enabled platform
const disableCustomDestinationSwitchers =
- !isRestreamEnabled &&
- !isDualOutputMode &&
- !isEnabled('tiktok') &&
- enabledPlatformsRef.current.length > 1;
+ !isRestreamEnabled && !isEnabled('tiktok') && enabledPlatformsRef.current.length > 1;
const disableNonUltraSwitchers =
- isDualOutputMode &&
- !isPrime &&
- enabledPlatformsRef.current.length + enabledDestRef.current.length >= 2;
- const disablePlatformSwitchers = isDualOutputMode && isTwitchDualStreaming;
+ !isPrime && enabledPlatformsRef.current.length + enabledDestRef.current.length >= 2;
+ const disablePlatformSwitchers = isTwitchDualStreaming && !Utils.isPreview();
const emitSwitch = useDebounce(500, (ind?: number, enabled?: boolean) => {
if (ind !== undefined && enabled !== undefined) {
@@ -83,25 +88,17 @@ export function DestinationSwitchers() {
}
function togglePlatform(platform: TPlatform, enabled: boolean) {
- // In dual output mode, only allow non-ultra users to have 2 platforms, or 1 platform and 1 custom destination enabled
+ // Only allow non-ultra users to have 2 platforms, or 1 platform and 1 custom destination enabled
if (!isPrime) {
- if (isDualOutputMode) {
- if (enabledPlatformsRef.current.length + enabledDestRef.current.length <= 2) {
- enabledPlatformsRef.current.push(platform);
- } else {
- enabledPlatformsRef.current = enabledPlatformsRef.current.filter(p => p !== platform);
- }
+ if (enabled && alwaysEnabledPlatforms.includes(platform)) {
+ enabledPlatformsRef.current.push(platform);
+ } else if (enabled) {
+ enabledPlatformsRef.current = enabledPlatformsRef.current.filter(p =>
+ alwaysEnabledPlatforms.includes(p),
+ );
+ enabledPlatformsRef.current.push(platform);
} else {
- if (enabled && alwaysEnabledPlatforms.includes(platform)) {
- enabledPlatformsRef.current.push(platform);
- } else if (enabled) {
- enabledPlatformsRef.current = enabledPlatformsRef.current.filter(p =>
- alwaysEnabledPlatforms.includes(p),
- );
- enabledPlatformsRef.current.push(platform);
- } else {
- enabledPlatformsRef.current = enabledPlatformsRef.current.filter(p => p !== platform);
- }
+ enabledPlatformsRef.current = enabledPlatformsRef.current.filter(p => p !== platform);
}
if (!enabledPlatformsRef.current.length) {
@@ -109,7 +106,7 @@ export function DestinationSwitchers() {
}
emitSwitch();
- return;
+ return enabledPlatformsRef.current.includes(platform);
}
// user can always stream to tiktok in single output mode
@@ -133,18 +130,19 @@ export function DestinationSwitchers() {
}
emitSwitch();
+ return enabledPlatformsRef.current.includes(platform);
}
function toggleDestination(index: number, enabled: boolean) {
// In dual output mode, only allow non-ultra users to have 2 platforms, or 1 platform and 1 custom destination enabled
- if (isDualOutputMode && !isPrime) {
+ if (!isPrime) {
if (enabledPlatformsRef.current.length + enabledDestRef.current.length < 2) {
enabledDestRef.current.push(index);
} else {
enabledDestRef.current = enabledDestRef.current.filter((dest, i) => i !== index);
}
emitSwitch(index, enabled);
- return;
+ return enabledDestRef.current.includes(index);
}
enabledDestRef.current = enabledDestRef.current.filter((dest, i) => i !== index);
@@ -154,16 +152,17 @@ export function DestinationSwitchers() {
}
emitSwitch(index, enabled);
+ return enabledDestRef.current.includes(index);
}
return (
- e.stopPropagation()}
+ height="35px"
+ >
+
+
+ );
+ }),
+);
diff --git a/app/components-react/windows/go-live/GameSelector.tsx b/app/components-react/windows/go-live/GameSelector.tsx
index acd4784cd356..9f6c1ba266f6 100644
--- a/app/components-react/windows/go-live/GameSelector.tsx
+++ b/app/components-react/windows/go-live/GameSelector.tsx
@@ -10,8 +10,12 @@ import { $t } from '../../../services/i18n';
import { IListOption } from '../../shared/inputs/ListInput';
import { Services } from '../../service-provider';
import { injectState, useModule } from 'slap';
+import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
-type TProps = TSlobsInputProps<{ platform: TPlatform; layout?: TInputLayout }, string>;
+type TProps = TSlobsInputProps<
+ { platform: TPlatform; layout?: TInputLayout; description?: string | React.ReactNode },
+ string
+>;
export default function GameSelector(p: TProps) {
const { platform } = p;
@@ -148,6 +152,9 @@ export default function GameSelector(p: TProps) {
allowClear
layout={p.layout}
size="large"
+ style={p.style}
+ suffixIcon={isSearching ?
+
{/*LEFT COLUMN*/}
{shouldShowLeftCol && (
-
+
+ Click here")}
+ style={{ fontSize: '12px' }}
+ >
+
+
+
);
-}
-
-function TikTokDenied() {
- return (
- {
- openConfirmation();
- Services.UsageStatisticsService.recordAnalyticsEvent('TikTokApplyPrompt', {
- component: 'NotGrantedBannerDismissed',
- });
- }}
- dismissableKey={EDismissable.TikTokRejected}
- />
- );
-}
+});
function TikTokInfo() {
return (
<>
- openInfoPage()}>
- {$t('Go live to TikTok with a single click. Click here to learn more.')}
-
- Learn more',
+ )}
+ >
+
+
+
);
}
@@ -190,6 +239,41 @@ function TikTokButtons(p: { denied: boolean }) {
);
}
+const TikTokRequired = memo((p: IPlatformComponentParams<'tiktok'>) => {
+ return (
+ <>
+
+ {$t('Streamlabs Access')}
+ ) {
/>
}
requiredFields={
- ) {
+ p.onChange({ ...twSettings, ...patch });
+ }
+
const bind = createBinding(twSettings, updatedSettings => updateSettings(updatedSettings));
const isDualStream = useMemo(() => {
@@ -45,6 +90,7 @@ export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) {
const enhancedBroadcastingEnabled = useMemo(() => {
if (isDualStream) return true;
+ if (Utils.isPreview()) return true;
if (multiplePlatformEnabled) return false;
if (p.isStreamShiftMode) return false;
return twSettings?.isEnhancedBroadcasting;
@@ -55,63 +101,38 @@ export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) {
p.isStreamShiftMode,
]);
- const optionalFields = (
- ) {
/>
}
requiredFields={
-
-
+ >
+
+
);
-}
+});
diff --git a/app/components-react/windows/go-live/CommonPlatformFields.tsx b/app/components-react/windows/go-live/CommonPlatformFields.tsx
index 1e9ae0633ca1..354278f9bf22 100644
--- a/app/components-react/windows/go-live/CommonPlatformFields.tsx
+++ b/app/components-react/windows/go-live/CommonPlatformFields.tsx
@@ -1,19 +1,11 @@
import { TPlatform } from '../../../services/platforms';
import { $t } from '../../../services/i18n';
import React, { useMemo } from 'react';
-import {
- CheckboxInput,
- InputComponent,
- TextAreaInput,
- TextInput,
- TInputLayout,
-} from '../../shared/inputs';
-import { assertIsDefined } from '../../../util/properties-type-guards';
-import InputWrapper from '../../shared/inputs/InputWrapper';
-import Animate from 'rc-animate';
+import { InputComponent, TextAreaInput, TextInput, TInputLayout } from '../../shared/inputs';
import { TLayoutMode } from './platforms/PlatformSettingsLayout';
import { Services } from '../../service-provider';
import { Tooltip } from 'antd';
+import AnimatedWrapper from 'components-react/shared/AnimatedWrapper';
interface ICommonPlatformSettings {
title: string;
@@ -45,29 +37,17 @@ export const CommonPlatformFields = InputComponent((rawProps: IProps) => {
const defaultProps = { layoutMode: 'singlePlatform' as TLayoutMode };
const p: IProps = { ...defaultProps, ...rawProps };
- const { HighlighterService } = Services;
-
function updatePlatform(patch: Partial
+
+ 
+
+
+ )}
+ setIsExpanded(!isExpanded)}> + {$t('Get stream highlights!')} +
-
-
-
- {isExpanded && (
- <>
-
-
+ {$t('Install AI Highlighter')}
+
+ )}
-
-
-
- setIsExpanded(!isExpanded)}> - {$t('Get stream highlights!')} -
- - {highlighterVersion !== '' ? ( - setIsExpanded(!isExpanded)} style={{ cursor: 'pointer' }}>
- {isExpanded ? (
-
-
-
- - {$t('Auto-generate game highlight reels of your stream')} -
- + ) : ( +
- {!useHighlighter ? (
-
+ {isExpanded && (
+ <>
+
- {gameConfig?.importModalConfig?.horizontalExampleVideo &&
- gameConfig?.importModalConfig?.verticalExampleVideo ? (
- <>
-
+
-
-
-
+ setIsExpanded(!isExpanded)} style={{ cursor: 'pointer' }}>
+ {isExpanded ? (
+
+
+
+ + {$t('Auto-generate game highlight reels of your stream')} +
+
+ {$t('Beta')}
+
+
+ {!useHighlighter ? (
+
- ) : (
- <>
- )}
+ ) : (
+
+ {gameConfig?.importModalConfig?.horizontalExampleVideo &&
+ gameConfig?.importModalConfig?.verticalExampleVideo ? (
+ <>
+
- ) : (
-
+
+
+
-
-
+
+
-
-
-
-
-
-
- {' '}
-
-
-
- ) : (
-
- )}
-
-
-
- ⚠️
- {$t('Game language must be English')}
-
{' '}
-
- {' '}
- ⚠️
- {$t('Game must be fullscreen')}{' '}
+
-
- )}
-
+
-
- {' '}
- ⚠️
- {$t('Game mode must be supported')}
+
+
+ ) : (
+
)}
-
+
-
- {gameConfig?.gameModes && `(${gameConfig?.gameModes})`}
-
+ {' '}
+
- {/*
+
+ )}
+
+ ⚠️
+ {$t('Game language must be English')}
+
{' '}
+
+ {' '}
+ ⚠️
+ {$t('Game must be fullscreen')}{' '}
+
+
+ {' '}
+ ⚠️
+ {$t('Game mode must be supported')}
+
+
+
+ {gameConfig?.gameModes && `(${gameConfig?.gameModes})`}
+
+
+ {/*
- {/* USE CUSTOM CHECKBOX */}
- {hasCustomCheckbox && (
-
-
+
+ {/*TITLE*/}
+ updateCommonField('title', val)}
+ label={
+ titleTooltip ? (
+
+ {$t('Title')}
+
+
+ ) : (
+ $t('Title')
+ )
+ }
+ required={true}
+ max={maxCharacters}
+ layout={p.layout}
+ style={{ marginTop: !p.platform ? '0px' : '10px' }}
+ size="large"
+ />
+
+ {/*DESCRIPTION*/}
+ {hasDescription && (
+ updateCommonField('description', val)}
+ name="description"
+ label={$t('Description')}
+ required={descriptionIsRequired}
+ layout={p.layout}
+ />
)}
-
-
- {fieldsAreVisible && (
-
-
+
);
});
diff --git a/app/components-react/windows/go-live/CustomFieldsCheckbox.tsx b/app/components-react/windows/go-live/CustomFieldsCheckbox.tsx
new file mode 100644
index 000000000000..8c398a7704e4
--- /dev/null
+++ b/app/components-react/windows/go-live/CustomFieldsCheckbox.tsx
@@ -0,0 +1,86 @@
+import { TPlatform } from '../../../services/platforms';
+import React, { useMemo, useCallback } from 'react';
+import { InputComponent, TInputLayout } from '../../shared/inputs';
+import { TLayoutMode } from './platforms/PlatformSettingsLayout';
+import InputWrapper from '../../shared/inputs/InputWrapper';
+import { CheckboxInput } from 'components-react/shared/inputs/CheckboxInput';
+import { $t } from 'services/i18n';
+import { assertIsDefined } from 'util/properties-type-guards';
+import { Services } from 'components-react/service-provider';
+
+interface ICommonPlatformSettings {
+ title: string;
+ description?: string;
+ useCustomFields?: boolean;
+}
+
+interface IProps {
+ /**
+ * if provided then change props only for the provided platform
+ */
+ platform?: TPlatform;
+ value: ICommonPlatformSettings;
+ descriptionIsRequired?: boolean;
+ enabledPlatformsCount?: number;
+ layout?: TInputLayout;
+ hasCustomCheckbox?: boolean;
+ onChange: (newValue: ICommonPlatformSettings) => unknown;
+}
+
+/**
+ * Component for modifying common platform fields such as "Title" and "Description"
+ * if "props.platform" is provided it changes props for a single platform
+ * otherwise it changes props for all enabled platforms
+ */
+export const CustomFieldsCheckbox = InputComponent((p: IProps) => {
+ function updatePlatform(patch: Partial
- {/*TITLE*/}
- updateCommonField('title', val)}
- label={
- titleTooltip ? (
-
- {$t('Title')}
-
-
- ) : (
- $t('Title')
- )
- }
- required={true}
- max={maxCharacters}
- layout={p.layout}
- size="large"
- />
-
- {/*DESCRIPTION*/}
- {hasDescription && (
- updateCommonField('description', val)}
- name="description"
- label={$t('Description')}
- required={descriptionIsRequired}
- layout={p.layout}
- />
- )}
-
- {/* {aiHighlighterFeatureEnabled &&
- enabledPlatforms &&
- !enabledPlatforms.includes('twitch') && (
-
- )}
-
+ (null);
- const containerRef = useRef(null);
- const platform = typeof p.destination === 'string' ? (p.destination as TPlatform) : null;
- const disabled = p?.switchDisabled;
- const label = platform
- ? $t('Toggle %{platform}', { platform: platformLabels(platform) })
- : $t('Toggle Destination');
-
- function onClickHandler(ev: MouseEvent) {
- // If we're disabling the switch we shouldn't be emitting anything past below
- if (disabled) {
- if (!Services.UserService.state.isPrime) {
- message.info({
- key: 'switcher-info-alert',
- content: (
- ((p, ref) => {
+ const cardRef = useRef(null);
+
+ useImperativeHandle(ref, () => ({
+ toggle: () => cardRef.current?.toggle(),
+ enable: () => cardRef.current?.enable(),
+ disable: () => cardRef.current?.disable(),
+ }));
+
+ const platform = typeof p.destination === 'string' ? (p.destination as TPlatform) : null;
+ const disabled = p?.switchDisabled;
+ const label = platform
+ ? $t('Toggle %{platform}', { platform: platformLabels(platform) })
+ : $t('Toggle Destination');
+
+ const onClickHandler = useCallback(
+ (e: MouseEvent) => {
+ // If we're disabling the switch we shouldn't be emitting anything past below
+ if (disabled) {
+ if (!Services.UserService.state.isPrime) {
+ message.info({
+ key: 'switcher-info-alert',
+ content: (
+
- }
+ name={platform ?? `destination${p?.index}`}
+ label={label}
+ title={title}
+ description={description}
+ className={cx({ [styles.disabled]: disabled })}
+ tooltipTitle={
+ p.showTwitchTooltip ? $t('Disable Twitch dual stream to add another platform') : undefined
+ }
>
- {/* SWITCH */}
-
-
- );
-});
+
{platforms.map((platform, ind) => (
);
-}
+});
interface IDestinationSwitcherProps {
destination: TPlatform | ICustomStreamDestination;
enabled: boolean;
- onChange: (enabled: boolean) => unknown;
+ onChange: (enabled: boolean) => boolean;
switchDisabled?: boolean;
index: number;
- isDualOutputMode: boolean;
- isUnlinked?: boolean;
+ isStreamShiftMode: boolean;
showTwitchTooltip?: boolean;
}
+export type { IDestinationSwitcherHandle };
+
/**
* Render a single switcher
*/
// disable `func-call-spacing` and `no-spaced-func` rules
// to pass back reference to addClass function
// eslint-disable-next-line
-const DestinationSwitcher = React.forwardRef<{}, IDestinationSwitcherProps>((p, ref) => {
- const switchInputRef = useRef
-
- ),
- className: styles.infoAlert,
- onClick: () => message.destroy('switcher-info-alert'),
- });
- }
- return;
- }
+const DestinationSwitcher = memo(
+ forwardRef
- {$t(
- "You've selected the two streaming destinations. Disable a destination to enable a different one. \nYou can always upgrade to Ultra for multistreaming.",
- )}
-
-
-
-
+
+ ),
+ className: styles.infoAlert,
+ onClick: () => message.destroy('switcher-info-alert'),
+ });
+ }
+ return p.enabled;
+ }
- const enable = !p.enabled;
- p.onChange(enable);
- // always proxy the click to the SwitchInput
- // so it can play a transition animation
- switchInputRef.current?.click();
- }
+ const enable = !p.enabled;
+ return p.onChange(enable);
+ },
+ [p.enabled, p.onChange],
+ );
- const { title, description, Controller, Logo } = (() => {
- const { UserService } = Services;
+ const { title, description, Logo } = (() => {
+ const { UserService } = Services;
- if (platform) {
- // define slots for a platform switcher
- const service = getPlatformService(platform);
- const platformAuthData = UserService.state.auth?.platforms[platform];
- const username = platformAuthData?.username ?? '';
+ if (platform) {
+ // define slots for a platform switcher
+ const service = getPlatformService(platform);
+ const platformAuthData = UserService.state.auth?.platforms[platform];
+ const username = platformAuthData?.username ?? '';
- return {
- title: service.displayName,
- description: username,
- Logo: () => (
-
+ {$t(
+ "You've selected the two streaming destinations. Disable a destination to enable a different one. \nYou can always upgrade to Ultra for multistreaming.",
+ )}
+
+
+
+
-
-
- {/* PLATFORM LOGO */}
-
-
-
- {/* PLATFORM TITLE AND ACCOUNT/URL */}
-
-
-
{/* DISPLAY TOGGLES */}
- {p.isDualOutputMode && !p?.isUnlinked && (
- {title}
- {description}
- e.stopPropagation()}>
-
- )}
-
- {/* CONNECT BUTTON */}
- {p?.isUnlinked && platform && (
-
-
-
-
-
- )}
-
-
-
-
-
- {shouldShowAddDestButton && (
-
- {headerText}
-
- {!isPrime && {headerText}
+ {!isPrime && ( +
-
- {recommendedColorSpaceWarnings && (
-
-
- )}
-
- {/* Spacer is as scrollable padding-bottom */}
-
-
- {showTweet &&
+ {recommendedColorSpaceWarnings && (
+
+
+ )}
+
)}
diff --git a/app/components-react/windows/go-live/GoLiveWindow.tsx b/app/components-react/windows/go-live/GoLiveWindow.tsx
index c20d00394348..6787d6442299 100644
--- a/app/components-react/windows/go-live/GoLiveWindow.tsx
+++ b/app/components-react/windows/go-live/GoLiveWindow.tsx
@@ -19,6 +19,7 @@ import { useGoLiveSettings, useGoLiveSettingsRoot } from './useGoLiveSettings';
import { inject } from 'slap';
import RecordingSwitcher from './RecordingSwitcher';
import { promptAction } from 'components-react/modals';
+import TwitterInput from './Twitter';
export default function GoLiveWindow() {
const { lifecycle, form } = useGoLiveSettingsRoot().extend(module => ({
@@ -34,7 +35,7 @@ export default function GoLiveWindow() {
const shouldShowChecklist = ['runChecklist', 'live'].includes(lifecycle);
return (
- ) {
- const title = p.title;
-
- // render header and section wrapper in advanced mode
- if (!p.isSimpleMode) {
- return (
- ((p, ref) => {
+ const valueRef = useRef(null);
+ const [displayValue, setDisplayValue] = useState(p.value);
+
+ useImperativeHandle(ref, () => ({
+ toggle: () => animateSwitch(!displayValue),
+ enable: () => animateSwitch(true),
+ disable: () => animateSwitch(false),
+ }));
+
+ useEffect(() => {
+ valueRef.current = null;
+ setDisplayValue(p.value);
+ }, [p.value]);
+
+ const animateSwitch = useCallback((nextValue: boolean, resolvedValue = nextValue) => {
+ valueRef.current = resolvedValue !== nextValue ? resolvedValue : null;
+ setDisplayValue(nextValue);
+ }, []);
+
+ const handleTransitionEnd = useCallback((e: React.TransitionEvent) => {
+ const target = e.target;
+
+ if (!(target instanceof HTMLElement) || valueRef.current === null) {
+ return;
+ }
+
+ setDisplayValue(valueRef.current);
+ valueRef.current = null;
+ }, []);
+
+ const handleClick = useCallback(
+ (e: MouseEvent) => {
+ if (p.disabled) {
+ p.onClick(e);
+ return;
+ }
+
+ const nextValue = !p.value;
+ const resolvedValue = p.onClick(e);
+ animateSwitch(nextValue, typeof resolvedValue === 'boolean' ? resolvedValue : nextValue);
+ },
+ [p.disabled, p.value, p.onClick, animateSwitch],
+ );
+
+ return (
+
+
+ );
+});
diff --git a/app/components-react/windows/go-live/Twitter.tsx b/app/components-react/windows/go-live/Twitter.tsx
index 2c864b953d06..571bdb9454ef 100644
--- a/app/components-react/windows/go-live/Twitter.tsx
+++ b/app/components-react/windows/go-live/Twitter.tsx
@@ -43,11 +43,7 @@ export default function TwitterInput() {
);
return (
-
+
+ {
isDualOutputMode?: boolean;
isAiHighlighterEnabled?: boolean;
isStreamShiftMode?: boolean;
+ isMidStreamMode?: boolean;
}
diff --git a/app/components-react/windows/go-live/platforms/TiktokEditStreamInfo.tsx b/app/components-react/windows/go-live/platforms/TiktokEditStreamInfo.tsx
index 664210d795e3..e4f261bb2418 100644
--- a/app/components-react/windows/go-live/platforms/TiktokEditStreamInfo.tsx
+++ b/app/components-react/windows/go-live/platforms/TiktokEditStreamInfo.tsx
@@ -1,43 +1,36 @@
-import React from 'react';
+import React, { memo } from 'react';
import Form from '../../../shared/inputs/Form';
import { $t } from '../../../../services/i18n';
import { Services } from '../../../service-provider';
import { Button, Tooltip } from 'antd';
+import Tabs from 'components-react/shared/Tabs';
import InputWrapper from '../../../shared/inputs/InputWrapper';
import PlatformSettingsLayout, { IPlatformComponentParams } from './PlatformSettingsLayout';
import * as remote from '@electron/remote';
import { CommonPlatformFields } from '../CommonPlatformFields';
import { ITikTokStartStreamOptions } from 'services/platforms/tiktok';
import { RadioInput, TextInput, createBinding } from 'components-react/shared/inputs';
-import InfoBanner from 'components-react/shared/InfoBanner';
+import Translate from 'components-react/shared/Translate';
import GameSelector from '../GameSelector';
-import { EDismissable } from 'services/dismissables';
-import styles from './TikTokEditStreamInfo.m.less';
-import cx from 'classnames';
+import { CustomFieldsCheckbox } from '../CustomFieldsCheckbox';
+import InfoBadge from 'components-react/shared/InfoBadge';
/**
* @remark The filename for this component is intentionally not consistent with capitalization to preserve the commit history
*/
export function TikTokEditStreamInfo(p: IPlatformComponentParams<'tiktok'>) {
- const { TikTokService } = Services;
const ttSettings = p.value;
- const approved = TikTokService.scope === 'approved';
- const denied = TikTokService.scope === 'denied';
- const controls = TikTokService.audienceControls;
function updateSettings(patch: Partial) {
p.onChange({ ...ttSettings, ...patch });
}
-
- const bind = createBinding(ttSettings, updatedSettings => updateSettings(updatedSettings));
-
return (
);
}
-export function TikTokEnterCredentialsFormInfo(
- p: IPlatformComponentParams<'tiktok'> & { denied: boolean },
-) {
+const TikTokLiveAccessForm = memo((p: IPlatformComponentParams<'tiktok'>) => {
+ const { TikTokService } = Services;
const bind = createBinding(p.value, updatedSettings =>
p.onChange({ ...p.value, ...updatedSettings }),
);
+ const controls = TikTokService.audienceControls;
+ const approved = TikTokService.scope === 'approved';
+
return (
<>
+ {approved ? (
+ See Guide',
+ )}
+ >
+
+
@@ -86,8 +136,10 @@ export function TikTokEnterCredentialsFormInfo(
}
required
{...bind.serverUrl}
- layout={p.layout}
+ layout="horizontal"
size="large"
+ labelAlign="left"
+ style={{ marginTop: '24px', fontSize: '14px' }}
/>
- {p.denied ?
- }
- layout={p.layout}
- className={cx({ [styles.hideLabel]: p.layout === 'vertical' })}
- >
-
-
-
-
-
+
+ {showTopAddDestination && (
+
+
)}
{/*RIGHT COLUMN*/}
+
-
- {title && (
-
-
- )}
-
- );
- }
-
- // render content only in simple mode
- return {title}
-{p.children}
- {p.children}
;
+ return (
+
+ {p.title &&
+ );
}
diff --git a/app/components-react/windows/go-live/SwitcherCard.tsx b/app/components-react/windows/go-live/SwitcherCard.tsx
new file mode 100644
index 000000000000..2e996544ec10
--- /dev/null
+++ b/app/components-react/windows/go-live/SwitcherCard.tsx
@@ -0,0 +1,125 @@
+import React, {
+ ReactNode,
+ forwardRef,
+ MouseEvent,
+ useEffect,
+ useImperativeHandle,
+ useRef,
+ useState,
+ useCallback,
+} from 'react';
+import cx from 'classnames';
+import styles from './DestinationSwitchers.m.less';
+import { Tooltip } from 'antd';
+import { SwitchInput } from '../../shared/inputs';
+
+export interface ISwitcherCardHandle {
+ toggle: () => void;
+ enable: () => void;
+ disable: () => void;
+}
+
+interface ISwitcherCardProps {
+ children?: ReactNode;
+ icon?: string | ReactNode;
+ label?: string;
+ title: string | ReactNode;
+ name: string;
+ description: string;
+ value: boolean;
+ onClick: (e: MouseEvent) => boolean | void | unknown;
+ tooltipTitle?: string;
+ className?: string;
+ switchClassName?: string;
+ disabled?: boolean;
+}
+
+/**
+ * Render a reusable switcher card shell.
+ * Pass a `controller` (e.g. a SwitchInput) for the left column and
+ * any content as `children` for the right column.
+ */
+export const SwitcherCard = forwardRef{p.title}
} +{p.children}
+
+
+
+
+
+
+
+
+
+
+ {/* PLATFORM LOGO AND NAME*/}
+ {typeof p.icon === 'string' ? (
+
+ ) : (
+ p.icon
+ )}
+ {/* PLATFORM HANDLE */}
+
+ {p.title}
+ {p.description}
+ {p?.children}
+
{!isUpdateMode && (
<>
{shouldShowDestinationType && (
@@ -421,7 +421,7 @@ function OptionalFields() {
);
}
-function Events() {
+function Events(p: IPlatformComponentParams<'facebook'>) {
const {
bind,
shouldShowEvents,
@@ -454,6 +454,7 @@ function Events() {
size="large"
/>
)}
+
);
}
diff --git a/app/components-react/windows/go-live/platforms/InstagramEditStreamInfo.tsx b/app/components-react/windows/go-live/platforms/InstagramEditStreamInfo.tsx
index 74c0481d9f87..9430809c9891 100644
--- a/app/components-react/windows/go-live/platforms/InstagramEditStreamInfo.tsx
+++ b/app/components-react/windows/go-live/platforms/InstagramEditStreamInfo.tsx
@@ -42,7 +42,7 @@ export function InstagramEditStreamInfo(p: Props) {
/>
{!isStreamSettingsWindow && (
+
}
/>
diff --git a/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx b/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx
index 3188533e2c9a..df12ac62be79 100644
--- a/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx
+++ b/app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import { TPlatform } from '../../../../services/platforms';
import { ITwitchStartStreamOptions } from '../../../../services/platforms/twitch';
import { IYoutubeStartStreamOptions } from '../../../../services/platforms/youtube';
@@ -18,24 +18,11 @@ export default function PlatformSettingsLayout(p: {
essentialOptionalFields?: JSX.Element;
layout?: TInputLayout;
}) {
- let layoutItems = [];
- switch (p.layoutMode) {
- case 'singlePlatform':
- layoutItems = [
- p.essentialOptionalFields,
- p.commonFields,
- p.requiredFields,
- p.optionalFields,
- p.layout,
- ];
- break;
- case 'multiplatformSimple':
- layoutItems = [p.requiredFields, p.layout];
- return p.requiredFields;
- case 'multiplatformAdvanced':
- layoutItems = [p.essentialOptionalFields, p.requiredFields, p.optionalFields, p.commonFields];
- break;
- }
+ const layoutItems = useMemo(
+ () => [p.essentialOptionalFields, p.commonFields, p.requiredFields, p.optionalFields, p.layout],
+ [p.essentialOptionalFields, p.commonFields, p.requiredFields, p.optionalFields, p.layout],
+ );
+
return <>{layoutItems.map(item => item)};
}
@@ -59,4 +46,5 @@ export interface IPlatformComponentParams
+
+
+ {$t('Streamlabs access enabled')}
+
+ }
+ />
+ Learn more',
+ )}
+ style={{ fontSize: '14px', fontStyle: 'normal' }}
+ >
+
+
+ }
+ />
+
+ {!controls.disable && (
+
+ ) : (
+
+
}
/>
diff --git a/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx b/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx
index df015cb7a55a..62ef762104bd 100644
--- a/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx
+++ b/app/components-react/windows/go-live/platforms/TwitchEditStreamInfo.tsx
@@ -1,5 +1,5 @@
import { CommonPlatformFields } from '../CommonPlatformFields';
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
import { $t } from '../../../../services/i18n';
import { TwitchTagsInput } from './TwitchTagsInput';
import GameSelector from '../GameSelector';
@@ -12,8 +12,8 @@ import TwitchContentClassificationInput from './TwitchContentClassificationInput
import AiHighlighterToggle from '../AiHighlighterToggle';
import Badge from 'components-react/shared/DismissableBadge';
import { EDismissable } from 'services/dismissables';
-import styles from './TwitchEditStreamInfo.m.less';
-import cx from 'classnames';
+import { CustomFieldsCheckbox } from '../CustomFieldsCheckbox';
+import Utils from 'services/utils';
export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) {
const twSettings = p.value;
@@ -22,6 +22,51 @@ export function TwitchEditStreamInfo(p: IPlatformComponentParams<'twitch'>) {
p.onChange({ ...twSettings, ...patch });
}
+ return (
+
+ );
+}
+
+const TwitchRequiredFields = memo((p: IPlatformComponentParams<'twitch'>) => {
+ const bind = createBinding(p.value, updatedSettings =>
+ p.onChange({ ...p.value, ...updatedSettings }),
+ );
+
+ return (
+ <>
+
+
+ {p.isAiHighlighterEnabled && (
+
-
-
- {process.platform !== 'darwin' && (
-
-
+
+ )}
+
+
);
-}
+});
diff --git a/app/components-react/windows/go-live/platforms/TwitchTagsInput.tsx b/app/components-react/windows/go-live/platforms/TwitchTagsInput.tsx
index 185d97db2c31..b202a5ff95c9 100644
--- a/app/components-react/windows/go-live/platforms/TwitchTagsInput.tsx
+++ b/app/components-react/windows/go-live/platforms/TwitchTagsInput.tsx
@@ -58,6 +58,7 @@ export function TwitchTagsInput(p: TTwitchTagsInputProps) {
dropdownStyle={{ display: 'none' }}
layout={p.layout}
size="large"
+ style={{ flex: 1 }}
/>
);
}
diff --git a/app/components-react/windows/go-live/platforms/TwitterEditStreamInfo.tsx b/app/components-react/windows/go-live/platforms/TwitterEditStreamInfo.tsx
index 91fc6e4c0b5f..cdc4d70e31ad 100644
--- a/app/components-react/windows/go-live/platforms/TwitterEditStreamInfo.tsx
+++ b/app/components-react/windows/go-live/platforms/TwitterEditStreamInfo.tsx
@@ -8,6 +8,7 @@ import { ListInput, createBinding } from '../../../shared/inputs';
import Form from '../../../shared/inputs/Form';
import { CommonPlatformFields } from '../CommonPlatformFields';
import { $t } from 'services/i18n';
+import { CustomFieldsCheckbox } from '../CustomFieldsCheckbox';
export function TwitterEditStreamInfo(p: IPlatformComponentParams<'twitter'>) {
const twSettings = p.value;
@@ -24,7 +25,7 @@ export function TwitterEditStreamInfo(p: IPlatformComponentParams<'twitter'>) {
layoutMode={p.layoutMode}
commonFields={
+
+
- )}
-
- );
-
- return (
-
+
+
) {
layout={p.layout}
size="large"
/>
+
}
/>
diff --git a/app/components-react/windows/go-live/platforms/YoutubeEditStreamInfo.tsx b/app/components-react/windows/go-live/platforms/YoutubeEditStreamInfo.tsx
index 727db5444702..036d43f811bc 100644
--- a/app/components-react/windows/go-live/platforms/YoutubeEditStreamInfo.tsx
+++ b/app/components-react/windows/go-live/platforms/YoutubeEditStreamInfo.tsx
@@ -16,8 +16,7 @@ import { IYoutubeStartStreamOptions, YoutubeService } from '../../../../services
import PlatformSettingsLayout, { IPlatformComponentParams } from './PlatformSettingsLayout';
import { assertIsDefined } from '../../../../util/properties-type-guards';
import { inject, injectQuery, useModule } from 'slap';
-import styles from './YoutubeEditStreamInfo.m.less';
-import cx from 'classnames';
+import { CustomFieldsCheckbox } from '../CustomFieldsCheckbox';
/***
* Stream Settings for YT
@@ -89,7 +88,7 @@ export const YoutubeEditStreamInfo = InputComponent((p: IPlatformComponentParams
function renderCommonFields() {
return (
+
{!isScheduleMode && (
+ = {
+ 'night-theme': 'golive-night-theme',
+ 'day-theme': 'golive-day-theme',
+ 'prime-dark': 'golive-prime-dark',
+ 'prime-light': 'golive-prime-light',
+ };
+
+ private activeGoLiveTheme: Theme | null = null;
+
+ private applyGoLiveThemeIfNeeded(componentName: string | undefined) {
+ const isGoLive = componentName === 'GoLiveWindow';
+ if (isGoLive && !this.isGoLiveActive) {
+ const goLiveTheme = ChildWindow.goLiveThemeMap[this.theme] ?? 'golive-night-theme';
+ antdThemes[this.theme].unuse();
+ antdThemes[goLiveTheme].use();
+ this.activeGoLiveTheme = goLiveTheme;
+ this.isGoLiveActive = true;
+ } else if (!isGoLive && this.isGoLiveActive) {
+ this.restoreAppTheme();
+ }
+ }
+
+ private restoreAppTheme() {
+ if (!this.isGoLiveActive || !this.activeGoLiveTheme) return;
+ antdThemes[this.activeGoLiveTheme].unuse();
+ antdThemes[this.theme].use();
+ this.activeGoLiveTheme = null;
+ this.isGoLiveActive = false;
+ }
+
render() {
return (
{!isMidStreamMode && (
<>
+
+
);
}
diff --git a/app/components-react/windows/go-live/useGoLiveSettings.ts b/app/components-react/windows/go-live/useGoLiveSettings.ts
index 802ab3f24758..992577409811 100644
--- a/app/components-react/windows/go-live/useGoLiveSettings.ts
+++ b/app/components-react/windows/go-live/useGoLiveSettings.ts
@@ -449,6 +449,14 @@ export class GoLiveSettingsModule {
return;
}
+ // Disable AI Highlighter if Twitch is not enabled, because it's a Twitch-only feature
+ if (
+ Services.HighlighterService.aiHighlighterFeatureEnabled &&
+ !this.state.isEnabled('twitch')
+ ) {
+ Services.HighlighterService.actions.setAiHighlighter(false);
+ }
+
try {
await getDefined(this.form).validateFields();
return true;
diff --git a/app/components/windows/ChildWindow.tsx b/app/components/windows/ChildWindow.tsx
index 3850f3b7283d..857d8fa8cbdf 100644
--- a/app/components/windows/ChildWindow.tsx
+++ b/app/components/windows/ChildWindow.tsx
@@ -19,6 +19,7 @@ export default class ChildWindow extends Vue {
components: IWindowOptions[] = [];
private refreshingTimeout: number;
private modalOptions: IModalOptions = { renderFn: null };
+ private isGoLiveActive = false;
unbind: () => void;
@@ -62,6 +63,14 @@ export default class ChildWindow extends Vue {
@Watch('theme')
updateAntd(newTheme: Theme, oldTheme: Theme) {
+ if (this.isGoLiveActive && this.activeGoLiveTheme) {
+ // Swap to the Go Live variant matching the new app theme
+ const newGoLiveTheme = ChildWindow.goLiveThemeMap[newTheme] ?? 'golive-night-theme';
+ antdThemes[this.activeGoLiveTheme].unuse();
+ antdThemes[newGoLiveTheme].use();
+ this.activeGoLiveTheme = newGoLiveTheme;
+ return;
+ }
antdThemes[oldTheme].unuse();
antdThemes[newTheme].use();
}
@@ -92,11 +101,14 @@ export default class ChildWindow extends Vue {
window.removeEventListener('resize', this.windowSizeHandler);
// If the window was closed, just clear the stack
if (!options.isShown) {
+ this.restoreAppTheme();
this.clearComponentStack();
WindowsService.hideModal();
return;
}
+ this.applyGoLiveThemeIfNeeded(options.componentName);
+
if (options.preservePrevWindow) {
this.handlePreservePrevWindow(options);
return;
@@ -140,6 +152,36 @@ export default class ChildWindow extends Vue {
window.addEventListener('resize', this.windowSizeHandler);
}
+ private static readonly goLiveThemeMap: Record
{!isScheduleMode && !isMidStreamMode && (
-
+
)}
{!isScheduleMode && (
+
+
+ )}
+
{!isMidStreamMode && (
<>
-
+
+
+
)}
-
+
- {$t( - "Features like personalized ads and live chat won't be available on live streams made for kids.", - )} -
- )} ++ {$t( + "Features like personalized ads and live chat won't be available on live streams made for kids.", + )} +
+ )} +
diff --git a/app/i18n/en-US/common.json b/app/i18n/en-US/common.json
index 078978ca5136..45134f0ebd38 100644
--- a/app/i18n/en-US/common.json
+++ b/app/i18n/en-US/common.json
@@ -175,5 +175,6 @@
"Upgrade": "Upgrade",
"Edit Data": "Edit Data",
"Edit Reactive Data": "Edit Reactive Data",
- "Reactive Data Editor": "Reactive Data Editor"
+ "Reactive Data Editor": "Reactive Data Editor",
+ "Destinations": "Destinations"
}
diff --git a/app/i18n/en-US/highlighter.json b/app/i18n/en-US/highlighter.json
index e68a1048f7b0..3882b63c5bc4 100644
--- a/app/i18n/en-US/highlighter.json
+++ b/app/i18n/en-US/highlighter.json
@@ -209,5 +209,7 @@
"YouTube Chapter Markers (for recording)": "YouTube Chapter Markers (for recording)",
"Export Markers": "Export Markers",
"Timeline starts from 01:00:00 (default)": "Timeline starts from 01:00:00 (default)",
- "Export full highlight duration as marker range": "Export full highlight duration as marker range"
-}
\ No newline at end of file
+ "Export full highlight duration as marker range": "Export full highlight duration as marker range",
+ "Replay": "Replay",
+ "Automatically capture highlights of your game with Replay ": "Automatically capture highlights of your game with Replay "
+}
diff --git a/app/i18n/en-US/settings.json b/app/i18n/en-US/settings.json
index 19bbb79a478a..db00e5feb2da 100644
--- a/app/i18n/en-US/settings.json
+++ b/app/i18n/en-US/settings.json
@@ -289,5 +289,7 @@
"Select Codec": "Select Codec",
"%{videoCodec} codec is not supported for Multistream. Would you like to proceed with the H.264 codec or select another codec?": "%{videoCodec} codec is not supported for Multistream. Would you like to proceed with the H.264 codec or select another codec?",
"%{videoCodec} codec is not supported for Stream Shift. Would you like to proceed with the H.264 codec or select another codec?": "%{videoCodec} codec is not supported for Stream Shift. Would you like to proceed with the H.264 codec or select another codec?",
- "%{videoCodec} codec is not supported for Dual Output. Would you like to proceed with the H.264 codec or select another codec?": "%{videoCodec} codec is not supported for Dual Output. Would you like to proceed with the H.264 codec or select another codec?"
+ "%{videoCodec} codec is not supported for Dual Output. Would you like to proceed with the H.264 codec or select another codec?": "%{videoCodec} codec is not supported for Dual Output. Would you like to proceed with the H.264 codec or select another codec?",
+ "Live Settings": "Live Settings",
+ "Channel Settings": "Channel Settings"
}
diff --git a/app/i18n/en-US/streaming.json b/app/i18n/en-US/streaming.json
index 3ae40c7e4317..6178b58dd685 100644
--- a/app/i18n/en-US/streaming.json
+++ b/app/i18n/en-US/streaming.json
@@ -339,5 +339,8 @@
"Unlock unlimited multistreaming with Ultra and grow your audience faster": "Unlock unlimited multistreaming with Ultra and grow your audience faster",
"Dual Output is enabled - you must stream to one horizontal and one vertical platform": "Dual Output is enabled - you must stream to one horizontal and one vertical platform",
"Streaming to a custom ingest is advanced functionality. Multistreaming is disabled while streaming to a custom ingest and some features may stop working as expected. Switch to recommended settings to multistream to a custom RTMP destination.": "Streaming to a custom ingest is advanced functionality. Multistreaming is disabled while streaming to a custom ingest and some features may stop working as expected. Switch to recommended settings to multistream to a custom RTMP destination.",
- "%{platform} Error": "%{platform} Error"
+ "%{platform} Error": "%{platform} Error",
+ "Manage output destinations mid-stream.": "Manage output destinations mid-stream.",
+ "Switch between devices while live.": "Switch between devices while live.",
+ "Live output editing": "Live output editing"
}
diff --git a/app/i18n/en-US/tiktok.json b/app/i18n/en-US/tiktok.json
index a3b22c997cd4..6738e67fb528 100644
--- a/app/i18n/en-US/tiktok.json
+++ b/app/i18n/en-US/tiktok.json
@@ -29,5 +29,13 @@
"Connect your TikTok account to stream to TikTok and one other platform for free. Haven't applied to stream on TikTok Live yet? Start the process here.": "Connect your TikTok account to stream to TikTok and one other platform for free. Haven't applied to stream on TikTok Live yet? Start the process here.",
"Reapply for TikTok Live Permission. Reapply here.": "Reapply for TikTok Live Permission. Reapply here.",
"Failed to authenticate with TikTok, re-login or re-merge TikTok account": "Failed to authenticate with TikTok, re-login or re-merge TikTok account",
- "Stream Shift Error: TikTok is not live": "Stream Shift Error: TikTok is not live"
+ "Stream Shift Error: TikTok is not live": "Stream Shift Error: TikTok is not live",
+ "Streamlabs access enabled": "Streamlabs access enabled",
+ "Streamlabs Access": "Streamlabs Access",
+ "Stream with TikTok Stream Key": "Stream with TikTok Stream Key",
+ "Stream at least 50% gaming content to maintain TikTok streaming access. Learn more": "Stream at least 50% gaming content to maintain TikTok streaming access. Learn more",
+ "Use your TikTok stream key to stream. Stream Keys are granted by TikTok and renew after each session. See Guide": "Use your TikTok stream key to stream. Stream Keys are granted by TikTok and renew after each session. See Guide",
+ "Can't find your stream key? Click here": "Can't find your stream key? Click here",
+ "Request streaming access through Streamlabs": "Request streaming access through Streamlabs",
+ "Request access to stream without a stream key directly through Streamlabs. You must stream at least 50% gaming content continuously. Learn more": "Request access to stream without a stream key directly through Streamlabs. You must stream at least 50% gaming content continuously. Learn more"
}
diff --git a/app/services/customization.ts b/app/services/customization.ts
index 2097bdf9dd51..2ce735a03da8 100644
--- a/app/services/customization.ts
+++ b/app/services/customization.ts
@@ -11,7 +11,25 @@ import { RealmObject } from './realm';
import { ObjectSchema } from 'realm';
import { Theme } from 'styles/antd';
-export type TApplicationTheme = 'night-theme' | 'day-theme' | 'prime-dark' | 'prime-light';
+export type TGoLiveTheme =
+ | 'golive-night-theme'
+ | 'golive-day-theme'
+ | 'golive-prime-dark'
+ | 'golive-prime-light';
+
+export type TApplicationTheme =
+ | 'night-theme'
+ | 'day-theme'
+ | 'prime-dark'
+ | 'prime-light'
+ | TGoLiveTheme;
+
+const GO_LIVE_THEME_BACKGROUNDS = {
+ 'golive-night-theme': { r: 0, g: 0, b: 0 },
+ 'golive-day-theme': { r: 255, g: 255, b: 255 },
+ 'golive-prime-dark': { r: 17, g: 17, b: 17 },
+ 'golive-prime-light': { r: 243, g: 243, b: 243 },
+};
// Maps to --background
const THEME_BACKGROUNDS = {
@@ -19,6 +37,14 @@ const THEME_BACKGROUNDS = {
'prime-dark': { r: 17, g: 17, b: 17 },
'day-theme': { r: 245, g: 248, b: 250 },
'prime-light': { r: 243, g: 243, b: 243 },
+ ...GO_LIVE_THEME_BACKGROUNDS,
+};
+
+const GO_LIVE_SECTION_BACKGROUNDS = {
+ 'golive-night-theme': { r: 0, g: 0, b: 0 },
+ 'golive-day-theme': { r: 255, g: 255, b: 255 },
+ 'golive-prime-dark': { r: 37, g: 37, b: 37 },
+ 'golive-prime-light': { r: 255, g: 255, b: 255 },
};
// Maps to --section
@@ -27,6 +53,14 @@ const SECTION_BACKGROUNDS = {
'prime-dark': { r: 0, g: 0, b: 0 },
'day-theme': { r: 227, g: 232, b: 235 },
'prime-light': { r: 255, g: 255, b: 255 },
+ ...GO_LIVE_SECTION_BACKGROUNDS,
+};
+
+const GO_LIVE_DISPLAY_BACKGROUNDS = {
+ 'golive-night-theme': { r: 0, g: 0, b: 0 },
+ 'golive-day-theme': { r: 255, g: 255, b: 255 },
+ 'golive-prime-dark': { r: 17, g: 17, b: 17 },
+ 'golive-prime-light': { r: 243, g: 243, b: 243 },
};
// Doesn't map 1:1
@@ -35,6 +69,7 @@ const DISPLAY_BACKGROUNDS = {
'prime-dark': { r: 37, g: 37, b: 37 },
'day-theme': { r: 227, g: 232, b: 235 },
'prime-light': { r: 255, g: 255, b: 255 },
+ ...GO_LIVE_DISPLAY_BACKGROUNDS,
};
export interface IPinnedStatistics {
diff --git a/app/services/incremental-rollout.ts b/app/services/incremental-rollout.ts
index 3d42a1eb6eaa..828e18c0ecc8 100644
--- a/app/services/incremental-rollout.ts
+++ b/app/services/incremental-rollout.ts
@@ -24,6 +24,7 @@ export enum EAvailableFeatures {
streamShift = 'slobs--stream-shift',
twitchDualStream = 'slobs--twitch-dual-stream',
twitchDualStreamPreview = 'slobs--twitch-dual-stream-preview',
+ liveOutputEditing = 'slobs--live-output-editing',
/**
* There are two flags because one is used for beta access and
diff --git a/app/services/platforms/tiktok.ts b/app/services/platforms/tiktok.ts
index 1317e91d647d..8cca682994ac 100644
--- a/app/services/platforms/tiktok.ts
+++ b/app/services/platforms/tiktok.ts
@@ -118,7 +118,7 @@ export class TikTokService
readonly apiBase = 'https://open.tiktokapis.com/v2';
readonly platform = 'tiktok';
readonly displayName = 'TikTok';
- readonly capabilities = new Set(['title', 'game', 'viewerCount']);
+ readonly capabilities = new Set(['title', 'game', 'viewerCount', 'chat']);
readonly liveDockFeatures = new Set([
'view-stream',
'dashboard',
diff --git a/app/services/platforms/twitch.ts b/app/services/platforms/twitch.ts
index 7f4bfef70c93..a33adf204475 100644
--- a/app/services/platforms/twitch.ts
+++ b/app/services/platforms/twitch.ts
@@ -147,7 +147,11 @@ export class TwitchService
'dualStream',
]);
- readonly liveDockFeatures = new Set(['chat-offline', 'refresh-chat']);
+ readonly liveDockFeatures = new Set([
+ 'chat-offline',
+ 'refresh-chat',
+ 'chat-streaming',
+ ]);
authWindowOptions: Electron.BrowserWindowConstructorOptions = {
width: 600,
diff --git a/app/services/streaming/streaming-view.ts b/app/services/streaming/streaming-view.ts
index bbe8673c2e43..91900a3fa151 100644
--- a/app/services/streaming/streaming-view.ts
+++ b/app/services/streaming/streaming-view.ts
@@ -11,12 +11,13 @@ import { UserService } from '../user';
import { RestreamService, TStreamShiftStatus } from '../restream';
import { DualOutputService, TDisplayPlatforms, TDisplayDestinations } from '../dual-output';
import { getPlatformService, TPlatform, TPlatformCapability, platformList } from '../platforms';
-import { TwitchService, TwitterService } from '../../app-services';
+import { IncrementalRolloutService, TwitchService, TwitterService } from '../../app-services';
import cloneDeep from 'lodash/cloneDeep';
import difference from 'lodash/difference';
import { Services } from '../../components-react/service-provider';
import { getDefined } from '../../util/properties-type-guards';
import { TDisplayType } from 'services/settings-v2';
+import { EAvailableFeatures } from 'services/incremental-rollout';
/**
* The stream info view is responsible for keeping
@@ -53,6 +54,10 @@ export class StreamInfoView extends ViewHandler {
return this.getServiceViews(DualOutputService);
}
+ private get incrementalRolloutView() {
+ return this.getServiceViews(IncrementalRolloutService);
+ }
+
private get streamingState() {
return Services.StreamingService.state;
}
@@ -513,17 +518,6 @@ export class StreamInfoView extends ViewHandler {
};
}
- get isAdvancedMode(): boolean {
- return (this.isMultiplatformMode || this.isDualOutputMode) && this.settings.advancedMode;
- }
-
- get canShowAdvancedMode() {
- if (this.isStreamShiftMode) {
- return this.enabledPlatforms.length > 1;
- }
- return this.isMultiplatformMode || this.isDualOutputMode;
- }
-
/**
* Returns common fields for the stream such as title, description, game
*/
@@ -777,4 +771,8 @@ export class StreamInfoView extends ViewHandler {
get selectiveRecording() {
return this.streamingState.selectiveRecording;
}
+
+ get canEditLiveOutputs() {
+ return this.incrementalRolloutView.featureIsEnabled(EAvailableFeatures.liveOutputEditing);
+ }
}
diff --git a/app/services/streaming/streaming.ts b/app/services/streaming/streaming.ts
index 300e517267ab..dfda5d8c84a0 100644
--- a/app/services/streaming/streaming.ts
+++ b/app/services/streaming/streaming.ts
@@ -1394,8 +1394,8 @@ export class StreamingService
* Prefill fields with data if `prepopulateOptions` provided
*/
showGoLiveWindow(prepopulateOptions?: IGoLiveSettings['prepopulateOptions']) {
- const height = 750;
- const width = 800;
+ const height = 800;
+ const width = 910;
this.windowsService.showWindow({
componentName: 'GoLiveWindow',
diff --git a/app/styles/antd/golive-day-theme.lazy.less b/app/styles/antd/golive-day-theme.lazy.less
new file mode 100644
index 000000000000..1e5f14fac2e2
--- /dev/null
+++ b/app/styles/antd/golive-day-theme.lazy.less
@@ -0,0 +1,126 @@
+@import '~antd/dist/antd.less';
+@import '../colors';
+@import './antd.less';
+@import '../go-live.less';
+
+// ANTD COLOR MAPPING
+@primary-color: @teal-light;
+@info-color: @yellow-light;
+@success-color: @teal-light;
+@processing-color: @teal-light;
+@error-color: @red-light;
+@highlight-color: @purple-light;
+@warning-color: @yellow-light;
+@normal-color: @light-5;
+@disabled-color: fade(@dark-4, 50%);
+@disabled-bg: fade(@dark-5, 50%);
+
+@primary-1: lighten(@teal-light, 4%);
+@primary-2: lighten(@teal-light, 4%);
+@primary-5: lighten(@teal-light, 4%);
+@primary-7: lighten(@teal-light, 4%);
+
+@text-color: @dark-4;
+@text-color-secondary: @dark-4;
+@text-color-dark: @dark-4;
+@text-color-secondary-dark: @dark-4;
+@icon-color: @light-5;
+@icon-color-hover: @light-5;
+@heading-color: @dark-2;
+
+@component-background: @light-2;
+@popover-background: @light-2;
+@background-color-light: @light-2;
+@background-color-base: @light-2;
+@border-color-split: @light-4;
+
+@item-active-bg: darken(@light-1, 4%);
+@item-hover-bg: darken(@light-1, 4%);
+
+@link-color: @dark-2;
+@link-hover-color: @dark-2;
+@link-active-color: @dark-2;
+
+@border-color-base: @light-4;
+@border-color-split: @light-4;
+@border-color-inverse: @light-4;
+
+@shadow-color: rgba(55, 71, 79, 0.12);
+@shadow-color-inverse: rgba(55, 71, 79, 0.12);
+@btn-shadow: rgba(55, 71, 79, 0.12);
+@btn-primary-shadow: rgba(55, 71, 79, 0.12);
+@btn-text-shadow: rgba(55, 71, 79, 0.12);
+
+@btn-danger-color: @red-light;
+@btn-danger-bg: fade(@red-light, 28%);
+@btn-text-hover-bg: transparent;
+@btn-default-bg: @light-4;
+
+@radio-button-hover-color: @primary-1;
+
+@checkbox-check-color: @dark-2;
+
+@radio-dot-disabled-color: @light-2;
+@radio-disabled-button-checked-bg: @light-2;
+
+@select-multiple-item-disabled-color: @dark-4;
+@select-item-selected-color: @white;
+@select-dropdown-bg: @light-1;
+@select-item-active-bg: @light-3;
+@select-item-selected-bg: fade(@teal-light, 12%);
+@select-background: @light-2;
+@select-clear-background: @light-2;
+@select-selection-item-bg: @light-3;
+@select-selection-item-border-color: @light-4;
+
+@slider-rail-background-color: @dark-2;
+@slider-rail-background-color-hover: @dark-2;
+@slider-track-background-color: @teal-light;
+@slider-track-background-color-hover: @teal-light;
+@slider-handle-background-color: @light-5;
+@slider-handle-color: @light-5;
+@slider-handle-color-hover: @light-5;
+@slider-handle-color-focus: @light-5;
+@slider-handle-color-focus-shadow: rgba(55, 71, 79, 0.12);
+@slider-handle-color-tooltip-open: @light-5;
+@slider-dot-border-color-active: @light-4;
+
+@input-placeholder-color: @dark-4;
+@input-number-handler-active-bg: @dark-4;
+@input-icon-hover-color: @light-5;
+@input-disabled-color: @disabled-color;
+
+@layout-body-background: @light-3;
+@layout-header-background: @light-3;
+@layout-trigger-background: @light-3;
+@layout-trigger-color: @dark-4;
+@layout-sider-background-light: @light-3;
+@layout-trigger-background-light: @light-3;
+
+@divider-color: @light-4;
+
+@tooltip-color: @dark-4;
+@tooltip-bg: @light-2;
+@tooltip-arrow-width: 4px;
+
+@modal-mask-bg: rgba(0, 0, 0, 0.3);
+
+@alert-success-border-color: @teal-light;
+@alert-success-bg-color: fade(@teal-light, 8%);
+@alert-success-icon-color: @teal-light;
+@alert-info-border-color: @yellow-light;
+@alert-info-bg-color: fade(@yellow-dark, 8%);
+@alert-info-icon-color: @yellow-light;
+@alert-warning-border-color: @red-light;
+@alert-warning-bg-color: fade(@red-light, 28%);
+@alert-warning-icon-color: @red-light;
+@alert-error-border-color: @red-light;
+@alert-error-bg-color: fade(@red-light, 28%);
+@alert-error-icon-color: @red-light;
+@alert-message-color: @dark-2;
+
+@image-bg: transparent;
+@image-color: transparent;
+
+@border-radius-base: 4px;
+@font-family: 'Roboto', sans-serif;
diff --git a/app/styles/antd/golive-night-theme.lazy.less b/app/styles/antd/golive-night-theme.lazy.less
new file mode 100644
index 000000000000..697a9b1e0435
--- /dev/null
+++ b/app/styles/antd/golive-night-theme.lazy.less
@@ -0,0 +1,126 @@
+@import '~antd/dist/antd.dark.less';
+@import '../colors';
+@import './antd.less';
+@import '../go-live.less';
+
+// ANTD COLOR MAPPING
+@primary-color: @teal-dark;
+@info-color: @yellow-dark;
+@success-color: @teal-dark;
+@processing-color: @teal-dark;
+@error-color: @red-dark;
+@highlight-color: @purple-dark;
+@warning-color: @yellow-dark;
+@normal-color: @dark-5;
+@disabled-color: fade(@light-4, 50%);
+@disabled-bg: fade(@dark-5, 50%);
+
+@primary-1: darken(@teal-dark, 4%);
+@primary-2: darken(@teal-dark, 4%);
+@primary-5: darken(@teal-dark, 4%);
+@primary-7: darken(@teal-dark, 4%);
+
+@text-color: @light-4;
+@text-color-secondary: @light-4;
+@text-color-dark: @light-4;
+@text-color-secondary-dark: @light-4;
+@icon-color: @light-5;
+@icon-color-hover: @light-5;
+@heading-color: @light-1;
+
+@component-background: @dark-3;
+@popover-background: @dark-3;
+@background-color-light: @dark-3;
+@background-color-base: @dark-3;
+@border-color-split: @dark-4;
+
+@item-active-bg: darken(@dark-4, 4%);
+@item-hover-bg: darken(@dark-4, 4%);
+
+@link-color: @light-1;
+@link-hover-color: @light-1;
+@link-active-color: @light-1;
+
+@border-color-base: @dark-5;
+@border-color-split: @dark-4;
+@border-color-inverse: @dark-4;
+
+@shadow-color: rgba(1, 2, 2, 0.16);
+@shadow-color-inverse: rgba(1, 2, 2, 0.16);
+@btn-shadow: rgba(1, 2, 2, 0.16);
+@btn-primary-shadow: rgba(1, 2, 2, 0.16);
+@btn-text-shadow: rgba(1, 2, 2, 0.16);
+
+@btn-danger-color: @red-dark;
+@btn-danger-bg: fade(@red-dark, 28%);
+@btn-text-hover-bg: transparent;
+@btn-default-bg: @dark-5;
+@btn-primary-color: @dark-2;
+
+@radio-button-hover-color: @primary-1;
+
+@checkbox-check-color: @light-1;
+
+@radio-dot-disabled-color: @dark-3;
+@radio-disabled-button-checked-bg: @dark-3;
+
+@select-multiple-item-disabled-color: @light-4;
+@select-item-selected-color: @white;
+@select-dropdown-bg: @dark-2;
+@select-item-active-bg: @dark-4;
+@select-item-selected-bg: fade(@teal-dark, 15%);
+@select-background: @dark-3;
+@select-clear-background: @dark-3;
+@select-selection-item-bg: @dark-4;
+@select-selection-item-border-color: @dark-5;
+
+@slider-rail-background-color: @dark-5;
+@slider-rail-background-color-hover: @dark-5;
+@slider-track-background-color: @teal-dark;
+@slider-track-background-color-hover: @teal-dark;
+@slider-handle-background-color: @light-5;
+@slider-handle-color: @light-5;
+@slider-handle-color-hover: @light-5;
+@slider-handle-color-focus: @light-5;
+@slider-handle-color-focus-shadow: rgba(1, 2, 2, 0.16);
+@slider-handle-color-tooltip-open: @light-5;
+@slider-dot-border-color-active: @dark-4;
+
+// FORM
+@label-color: @primelight-4;
+@input-placeholder-color: @light-4;
+@input-number-handler-active-bg: @light-4;
+@input-icon-hover-color: @light-5;
+@input-disabled-color: @disabled-color;
+
+@layout-body-background: @dark-4;
+@layout-header-background: @dark-4;
+@layout-trigger-background: @dark-4;
+@layout-trigger-color: @light-4;
+@layout-sider-background-light: @dark-4;
+@layout-trigger-background-light: @dark-4;
+
+@divider-color: @dark-4;
+
+@tooltip-color: @light-4;
+@tooltip-bg: @dark-3;
+@tooltip-arrow-width: 4px;
+
+@modal-mask-bg: rgba(0, 0, 0, 0.5);
+
+@alert-success-border-color: @teal-dark;
+@alert-success-bg-color: fade(@teal-dark, 8%);
+@alert-success-icon-color: @teal-dark;
+@alert-info-border-color: fade(@yellow-dark, 15%);
+@alert-info-bg-color: fade(@yellow-dark, 8%);
+@alert-info-icon-color: @yellow-dark;
+@alert-warning-border-color: @red-dark;
+@alert-warning-bg-color: fade(@red-dark, 28%);
+@alert-warning-icon-color: @red-dark;
+@alert-error-border-color: @red-dark;
+@alert-error-bg-color: fade(@red-dark, 28%);
+@alert-error-icon-color: @red-dark;
+@alert-message-color: @light-1;
+
+@border-radius-base: 4px;
+@font-family: 'Roboto', sans-serif;
diff --git a/app/styles/antd/golive-prime-dark.lazy.less b/app/styles/antd/golive-prime-dark.lazy.less
new file mode 100644
index 000000000000..0b0ec5e47d23
--- /dev/null
+++ b/app/styles/antd/golive-prime-dark.lazy.less
@@ -0,0 +1,128 @@
+@import '~antd/dist/antd.dark.less';
+@import '../colors';
+@import './antd.less';
+@import '../go-live.less';
+
+// ANTD COLOR MAPPING
+@primary-color: @prime-dark;
+@info-color: @prime-dark;
+@success-color: @prime-dark;
+@processing-color: @prime-dark;
+@error-color: @red-dark;
+@highlight-color: @prime-dark;
+@warning-color: @prime-dark;
+@normal-color: @primedark-5;
+@disabled-color: fade(@primelight-3, 50%);
+@disabled-bg: fade(@primedark-5, 50%);
+
+@primary-1: darken(@prime-dark, 4%);
+@primary-2: darken(@prime-dark, 4%);
+@primary-5: darken(@prime-dark, 4%);
+@primary-7: darken(@prime-dark, 4%);
+
+@text-color: @primelight-3;
+@text-color-secondary: @primelight-3;
+@text-color-dark: @primelight-3;
+@text-color-secondary-dark: @primelight-3;
+@icon-color: @prime-dark;
+@icon-color-hover: @prime-dark;
+@heading-color: @primelight-1;
+
+@component-background: @primedark-3;
+@popover-background: @primedark-3;
+@background-color-light: @primedark-3;
+@background-color-base: @primedark-3;
+
+@item-active-bg: darken(@primedark-4, 4%);
+@item-hover-bg: darken(@primedark-4, 4%);
+
+@link-color: @primelight-1;
+@link-hover-color: @primelight-1;
+@link-active-color: @primelight-1;
+
+@border-color-base: @primelight-5;
+@border-color-split: @primedark-4;
+@border-color-inverse: @primedark-4;
+
+@shadow-color: rgba(1, 2, 2, 0.16);
+@shadow-color-inverse: rgba(1, 2, 2, 0.16);
+@btn-shadow: rgba(1, 2, 2, 0.16);
+@btn-primary-shadow: rgba(1, 2, 2, 0.16);
+@btn-text-shadow: rgba(1, 2, 2, 0.16);
+
+@btn-danger-color: @red-dark;
+@btn-danger-bg: fade(@red-dark, 28%);
+@btn-text-hover-bg: transparent;
+@btn-default-bg: @primelight-5;
+@btn-primary-color: @primedark-2;
+
+@radio-button-hover-color: @primary-1;
+
+@checkbox-check-color: @primelight-1;
+
+@radio-dot-disabled-color: @primedark-3;
+@radio-disabled-button-checked-bg: @primedark-3;
+
+@select-multiple-item-disabled-color: @primelight-3;
+@select-item-selected-color: @white;
+@select-dropdown-bg: @primedark-2;
+@select-item-active-bg: @primedark-4;
+@select-item-selected-bg: fade(@prime-dark, 15%);
+@select-background: @primedark-3;
+@select-clear-background: @primedark-3;
+@select-selection-item-bg: @primedark-4;
+@select-selection-item-border-color: @primedark-5;
+
+@slider-rail-background-color: @prime-dark;
+@slider-rail-background-color-hover: @prime-dark;
+@slider-track-background-color: @prime-dark;
+@slider-track-background-color-hover: @prime-dark;
+@slider-handle-background-color: @prime-dark;
+@slider-handle-color: @prime-dark;
+@slider-handle-color-hover: @prime-dark;
+@slider-handle-color-focus: @prime-dark;
+@slider-handle-color-focus-shadow: rgba(1, 2, 2, 0.16);
+@slider-handle-color-tooltip-open: @prime-dark;
+@slider-dot-border-color-active: @primedark-4;
+
+// FORM
+@label-color: @primelight-3;
+@input-placeholder-color: @primelight-3;
+@input-number-handler-active-bg: @primelight-3;
+@input-icon-hover-color: @prime-dark;
+@input-disabled-color: @disabled-color;
+
+@layout-body-background: @primedark-4;
+@layout-header-background: @primedark-4;
+@layout-trigger-background: @primedark-4;
+@layout-trigger-color: @primelight-3;
+@layout-sider-background-light: @primedark-4;
+@layout-trigger-background-light: @primedark-4;
+
+@divider-color: @primedark-4;
+
+@tooltip-color: @primelight-3;
+@tooltip-bg: @primedark-3;
+@tooltip-arrow-width: 4px;
+
+@modal-mask-bg: rgba(0, 0, 0, 0.5);
+
+@alert-success-border-color: @prime-dark;
+@alert-success-bg-color: fade(@prime-dark, 8%);
+@alert-success-icon-color: @prime-dark;
+@alert-info-border-color: @prime-dark;
+@alert-info-bg-color: fade(@yellow-dark, 8%);
+@alert-info-icon-color: @prime-dark;
+@alert-warning-border-color: @red-dark;
+@alert-warning-bg-color: fade(@red-dark, 28%);
+@alert-warning-icon-color: @red-dark;
+@alert-error-border-color: @red-dark;
+@alert-error-bg-color: fade(@red-dark, 28%);
+@alert-error-icon-color: @red-dark;
+@alert-message-color: @primelight-1;
+
+@image-bg: transparent;
+@image-color: transparent;
+
+@border-radius-base: 4px;
+@font-family: 'Roboto', sans-serif;
diff --git a/app/styles/antd/golive-prime-light.lazy.less b/app/styles/antd/golive-prime-light.lazy.less
new file mode 100644
index 000000000000..54b505b911cc
--- /dev/null
+++ b/app/styles/antd/golive-prime-light.lazy.less
@@ -0,0 +1,126 @@
+@import '~antd/dist/antd.less';
+@import '../colors';
+@import './antd.less';
+@import '../go-live.less';
+
+// ANTD COLOR MAPPING
+@primary-color: @prime-light;
+@info-color: @prime-light;
+@success-color: @prime-light;
+@processing-color: @prime-light;
+@error-color: @red-light;
+@highlight-color: @prime-light;
+@warning-color: @prime-light;
+@normal-color: @primelight-5;
+@disabled-color: fade(@primedark-4, 50%);
+@disabled-bg: fade(@primelight-3, 50%);
+
+@primary-1: lighten(@prime-light, 4%);
+@primary-2: lighten(@prime-light, 4%);
+@primary-5: lighten(@prime-light, 4%);
+@primary-7: lighten(@prime-light, 4%);
+
+@text-color: @primedark-4;
+@text-color-secondary: @primedark-4;
+@text-color-dark: @primedark-4;
+@text-color-secondary-dark: @primedark-4;
+@icon-color: @prime-light;
+@icon-color-hover: @prime-light;
+@heading-color: @primedark-2;
+
+@component-background: @primelight-1;
+@popover-background: @primelight-1;
+@background-color-light: @primelight-1;
+@background-color-base: @primelight-1;
+@border-color-split: @primelight-4;
+
+@item-active-bg: darken(@primelight-1, 4%);
+@item-hover-bg: darken(@primelight-1, 4%);
+
+@link-color: @primedark-2;
+@link-hover-color: @primedark-2;
+@link-active-color: @primedark-2;
+
+@border-color-base: @primelight-4;
+@border-color-split: @primelight-4;
+@border-color-inverse: @primelight-4;
+
+@shadow-color: rgba(55, 71, 79, 0.12);
+@shadow-color-inverse: rgba(55, 71, 79, 0.12);
+@btn-shadow: rgba(55, 71, 79, 0.12);
+@btn-primary-shadow: rgba(55, 71, 79, 0.12);
+@btn-text-shadow: rgba(55, 71, 79, 0.12);
+
+@btn-danger-color: @red-light;
+@btn-danger-bg: fade(@red-light, 28%);
+@btn-text-hover-bg: transparent;
+@btn-default-bg: @primelight-3;
+
+@radio-button-hover-color: @primary-1;
+
+@checkbox-check-color: @primedark-2;
+
+@radio-dot-disabled-color: @primelight-1;
+@radio-disabled-button-checked-bg: @primelight-1;
+
+@select-multiple-item-disabled-color: @primedark-4;
+@select-item-selected-color: @white;
+@select-dropdown-bg: @primelight-2;
+@select-item-active-bg: @primelight-3;
+@select-item-selected-bg: fade(@prime-light, 12%);
+@select-background: @primelight-1;
+@select-clear-background: @primelight-1;
+@select-selection-item-bg: @primelight-3;
+@select-selection-item-border-color: @primelight-4;
+
+@slider-rail-background-color: @prime-light;
+@slider-rail-background-color-hover: @prime-light;
+@slider-track-background-color: @prime-light;
+@slider-track-background-color-hover: @prime-light;
+@slider-handle-background-color: @prime-light;
+@slider-handle-color: @prime-light;
+@slider-handle-color-hover: @prime-light;
+@slider-handle-color-focus: @prime-light;
+@slider-handle-color-focus-shadow: rgba(55, 71, 79, 0.12);
+@slider-handle-color-tooltip-open: @prime-light;
+@slider-dot-border-color-active: @primelight-4;
+
+@input-placeholder-color: @primedark-4;
+@input-number-handler-active-bg: @primedark-4;
+@input-icon-hover-color: @prime-light;
+@input-disabled-color: @disabled-color;
+
+@layout-body-background: @primelight-3;
+@layout-header-background: @primelight-3;
+@layout-trigger-background: @primelight-3;
+@layout-trigger-color: @primedark-4;
+@layout-sider-background-light: @primelight-3;
+@layout-trigger-background-light: @primelight-3;
+
+@divider-color: @primelight-4;
+
+@tooltip-color: @primedark-4;
+@tooltip-bg: @primelight-1;
+@tooltip-arrow-width: 4px;
+
+@modal-mask-bg: rgba(0, 0, 0, 0.5);
+
+@alert-success-border-color: @prime-light;
+@alert-success-bg-color: fade(@prime-light, 8%);
+@alert-success-icon-color: @prime-light;
+@alert-info-border-color: @prime-light;
+@alert-info-bg-color: fade(@yellow-dark, 8%);
+@alert-info-icon-color: @prime-light;
+@alert-warning-border-color: @red-light;
+@alert-warning-bg-color: fade(@red-light, 28%);
+@alert-warning-icon-color: @red-light;
+@alert-error-border-color: @red-light;
+@alert-error-bg-color: fade(@red-light, 28%);
+@alert-error-icon-color: @red-light;
+@alert-message-color: @primedark-2;
+
+@image-bg: transparent;
+@image-color: transparent;
+
+@border-radius-base: 4px;
+@font-family: 'Roboto', sans-serif;
diff --git a/app/styles/antd/index.ts b/app/styles/antd/index.ts
index c666b01b23ea..0ecc2d5254f9 100644
--- a/app/styles/antd/index.ts
+++ b/app/styles/antd/index.ts
@@ -2,12 +2,20 @@ import antdNightTheme from './night-theme.lazy.less';
import antdDayTheme from './day-theme.lazy.less';
import antdPrimeDark from './prime-dark.lazy.less';
import antdPrimeLight from './prime-light.lazy.less';
+import antdGoLiveNightTheme from './golive-night-theme.lazy.less';
+import antdGoLiveDayTheme from './golive-day-theme.lazy.less';
+import antdGoLivePrimeDark from './golive-prime-dark.lazy.less';
+import antdGoLivePrimeLight from './golive-prime-light.lazy.less';
const themes = {
['night-theme']: antdNightTheme,
['day-theme']: antdDayTheme,
['prime-dark']: antdPrimeDark,
['prime-light']: antdPrimeLight,
+ ['golive-night-theme']: antdGoLiveNightTheme,
+ ['golive-day-theme']: antdGoLiveDayTheme,
+ ['golive-prime-dark']: antdGoLivePrimeDark,
+ ['golive-prime-light']: antdGoLivePrimeLight,
};
export type Theme = keyof typeof themes;
diff --git a/app/styles/colors.less b/app/styles/colors.less
index cf1fbca5149b..f72ac2e5cba4 100644
--- a/app/styles/colors.less
+++ b/app/styles/colors.less
@@ -1,64 +1,66 @@
// LESS Color Varaibles -- DO NOT REFERENCE DIRECTLY
// Brand colors-- postfix indicates with which type of UI the color should be used with
-@teal-dark: #80F5D2;
+@teal-dark: #80f5d2;
@teal-light: #128079;
-@red-dark: #F85640;
-@red-light: #B14334;
-@yellow-dark: #E3973E;
-@yellow-light: #A96311;
-@blue-dark: #36ADE0;
-@blue-light: #2B5BD7;
-@blue-2-dark: #72D5FF;
-@cyan: #00F2EA;
-@pink-dark: #EB7777;
-@pink-light: #C22571;
-@purple-dark: #C57BFF;
-@purple-light: #5E3BEC;
-@lavender-dark: #BE99FF;
-@lavender-light: #5E3BEC;
-@navy: #233A4A;
-@dark-navy: #14252E;
-@prime-dark: #CAA368;
-@prime-light: #8F6F3F;
+@red-dark: #f85640;
+@red-light: #b14334;
+@yellow-dark: #e3973e;
+@yellow-light: #a96311;
+@blue-dark: #36ade0;
+@blue-light: #2b5bd7;
+@blue-2-dark: #72d5ff;
+@cyan: #00f2ea;
+@pink-dark: #eb7777;
+@pink-light: #c22571;
+@purple-dark: #c57bff;
+@purple-light: #5e3bec;
+@lavender-dark: #be99ff;
+@lavender-light: #5e3bec;
+@navy: #233a4a;
+@navy-dark: #14252e;
+@navy-light: #2d373f;
+@prime-dark: #caa368;
+@prime-light: #8f6f3f;
@black: #000;
-@white: #FFF;
+@white: #fff;
+@ultra: linear-gradient(123.53deg, #2de8b0 0%, #cbe953 48.8%, #ffab48 75.86%, #ff5151 100%);
-@video-editor: #FF5151;
-@podcast-editor: #5EE57C;
-@link-space: #FF9B4A;
-@talk-studio: #45D2FF;
-@cross-clip: #FF50A4;
+@video-editor: #ff5151;
+@podcast-editor: #5ee57c;
+@link-space: #ff9b4a;
+@talk-studio: #45d2ff;
+@cross-clip: #ff50a4;
@light-1: #ffffff;
-@light-2: #F5F8FA;
-@light-3: #E3E8EB;
-@light-4: #BDC2C4;
-@light-5: #91979A;
+@light-2: #f5f8fa;
+@light-3: #e3e8eb;
+@light-4: #bdc2c4;
+@light-5: #91979a;
-@dark-1: #050D12;
-@dark-2: #09161D;
-@dark-3: #17242D;
-@dark-4: #2B383F;
-@dark-5: #4F5E65;
+@dark-1: #050d12;
+@dark-2: #09161d;
+@dark-3: #17242d;
+@dark-4: #2b383f;
+@dark-5: #4f5e65;
-@primedark-1: #0D0D0D;
+@primedark-1: #0d0d0d;
@primedark-2: #000000;
@primedark-3: #111111;
@primedark-4: #252525;
@primedark-5: #969696;
-@primelight-1: #F3F3F3;
-@primelight-2: #FFFFFF;
-@primelight-3: #D3D3D3;
-@primelight-4: #C3C4C6;
+@primelight-1: #f3f3f3;
+@primelight-2: #ffffff;
+@primelight-3: #d3d3d3;
+@primelight-4: #c3c4c6;
@primelight-5: #767676;
-@twitch: #9146FF;
-@facebook: #1778F2;
-@youtube: #FF0000;
-@twitter: #1DA1F2;
+@twitch: #9146ff;
+@facebook: #1778f2;
+@youtube: #ff0000;
+@twitter: #1da1f2;
@tiktok: white;
-@trovo: #19D06D;
-@kick: #54FC1F;
+@trovo: #19d06d;
+@kick: #54fc1f;
@instagram: white;
diff --git a/app/styles/go-live.less b/app/styles/go-live.less
new file mode 100644
index 000000000000..1dd68001a6fa
--- /dev/null
+++ b/app/styles/go-live.less
@@ -0,0 +1,255 @@
+// GO LIVE WINDOW STYLE
+h2 {
+ color: var(--title);
+ font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 16px;
+ letter-spacing: 0.3px;
+}
+
+h3 {
+ letter-spacing: 0.3px;
+ margin-bottom: 0px;
+}
+
+// ADDITIONAL STYLES
+.ant-modal-footer {
+ background-color: var(--section);
+}
+
+// Form inputs
+.ant-row.ant-form-item {
+ margin-top: 8px;
+ margin-bottom: 0px;
+}
+
+label.ant-form-item-no-colon {
+ font-size: 12px;
+}
+
+label.ant-form-item-required {
+ flex-direction: row-reverse;
+}
+
+label.ant-form-item-required::before {
+ margin-left: 4px;
+}
+
+.ant-form-item-label > label {
+ height: unset;
+}
+
+.ant-input-group-addon {
+ background-color: var(--button);
+}
+
+// Checkbox
+
+label.ant-checkbox-wrapper {
+ font-size: 13px;
+}
+
+.ant-checkbox-inner {
+ background-color: var(--section);
+}
+
+.ant-checkbox-checked .ant-checkbox-inner::after {
+ border: 2px solid @dark-2;
+ border-top: 0;
+ border-left: 0;
+}
+
+.ant-checkbox-checked .ant-checkbox-inner {
+ background-color: var(--secondary-checkbox);
+ border-color: var(--secondary-checkbox);
+}
+
+.ant-checkbox-input:focus + .ant-checkbox-inner {
+ color: var(--secondary-checkbox);
+}
+
+.ant-checkbox-wrapper:hover .ant-checkbox-inner,
+.ant-checkbox:hover .ant-checkbox-inner {
+ border-color: var(--teal) !important;
+}
+
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+ color: @dark-2;
+}
+
+.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+ background-color: var(--section-alt);
+}
+
+.ant-select-selection-placeholder {
+ font-size: 14px;
+}
+
+// make button text not disappear on hover
+.ant-btn:hover,
+.ant-btn:focus {
+ color: var(--title);
+}
+.ant-btn-primary:hover,
+.ant-btn-primary:focus {
+ color: @dark-2;
+}
+
+// Select component styling
+.ant-select-selection-item {
+ color: var(--title);
+}
+
+.ant-select-lg {
+ font-size: 14px;
+ color: var(--title);
+}
+
+.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector {
+ background-color: var(--button);
+}
+
+.ant-select-arrow {
+ color: @light-5;
+}
+
+.ant-select-dropdown {
+ background-color: @btn-primary-color;
+ border: 1px solid @dark-4;
+}
+
+.ant-select-item {
+ color: @light-4;
+}
+
+.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+ background-color: @dark-4;
+}
+
+// Switch component styling
+.ant-form-item-control-input-content {
+ color: var(--card-text);
+}
+
+.ant-switch-checked {
+ background-color: var(--title);
+}
+
+.ant-switch-handle::before {
+ background-color: var(--section);
+}
+
+.ant-select-clear {
+ border-radius: 50%;
+}
+
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+ color: var(--card-text);
+ font-weight: 500;
+}
+
+// Radio
+.ant-form-item-control-input {
+ min-height: 20px;
+}
+
+.ant-radio-group.ant-radio-group-outline {
+ margin: 0px !important;
+}
+
+// Tabs
+.ant-tabs-nav-list {
+ width: 100%;
+
+ > *:first-child {
+ border-radius: 8px 0px 0px 8px !important;
+ }
+
+ > *:nth-last-child(2) {
+ border-radius: 0px 8px 8px 0px !important;
+ }
+}
+
+.ant-tabs-tab {
+ border: 0px !important;
+ padding: 8px;
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ cursor: pointer;
+ background-color: var(--section-alt);
+ flex: 1;
+ justify-content: center;
+ margin: 0px !important;
+}
+
+.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
+ background-color: var(--button);
+}
+
+.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+ color: var(--title) !important;
+ font-weight: 500;
+ text-shadow: unset;
+}
+
+.ant-tabs-nav-operations {
+ display: none !important;
+}
+
+.ant-tabs-ink-bar {
+ display: none !important;
+}
+
+// Modal body
+.ant-modal-body {
+ padding: 16px;
+}
+
+// change color for the search box
+#mainWrapper .ant-select-selector input {
+ color: @light-4; // var(--paragraph)
+}
+
+// scrollbar
+.os-scrollbar,
+::-webkit-scrollbar {
+ width: 4px;
+ height: 4px;
+
+ &:hover,
+ &:active {
+ width: 6px;
+ }
+}
+
+.section {
+ background-color: var(--card);
+ padding: 8px;
+ border-radius: 8px;
+ color: var(--paragraph);
+ font-size: 12px;
+ margin-bottom: 16px;
+}
+
+.flex__horizontal {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ flex-wrap: wrap;
+
+ &.margin > * {
+ flex: 1;
+ margin-top: 0px;
+ margin-left: 8px;
+ margin-right: 8px;
+ }
+
+ &.margin > *:last-child {
+ margin-top: 0px;
+ margin-right: 0px;
+ }
+
+ &.margin > *:first-child {
+ margin-top: 0px;
+ margin-left: 0px;
+ }
+}
diff --git a/app/themes.g.less b/app/themes.g.less
index 7ffd3dfa0418..24b68d55b09c 100644
--- a/app/themes.g.less
+++ b/app/themes.g.less
@@ -37,7 +37,7 @@
--prime-hover: darken(@prime-light, 8%);
--new-badge: fade(@purple-light, 15%);
--new-badge-text: @purple-light;
- --info-badge: @dark-navy;
+ --info-badge: @navy-dark;
--info-badge-text: @blue-dark;
--beta-text: @purple-light;
--badge: @purple-dark;
@@ -92,8 +92,11 @@
--secondary-checkbox: @dark-2;
--bg-column: @light-2;
--card: @light-3;
- --card-active: @light-1;
+ --card-active: @light-5;
+ --card-text: @dark-3;
+ --card-title: @primedark-4;
--card-disabled: @light-3;
+ --card-target: @light-3;
// 3rd Party Colors
--twitch: @twitch;
@@ -146,7 +149,7 @@
--prime-hover: lighten(@prime-dark, 8%);
--new-badge: fade(@purple-dark, 15%);
--new-badge-text: @purple-dark;
- --info-badge: @dark-navy;
+ --info-badge: @navy-dark;
--info-badge-text: @blue-dark;
--beta-text: @purple-dark;
--badge: @purple-dark;
@@ -194,7 +197,10 @@
--bg-column: @dark-2;
--card: @dark-4;
--card-active: @dark-3;
+ --card-text: @light-3;
+ --card-title: @primelight-4;
--card-disabled: @dark-4;
+ --card-target: @navy-light;
// 3rd Party Colors
--tiktok: @black;
@@ -231,7 +237,7 @@
--prime-hover: lighten(@prime-dark, 8%);
--new-badge: @prime-dark;
--new-badge-text: @primelight-1;
- --info-badge: @dark-navy;
+ --info-badge: @navy-dark;
--info-badge-text: @blue-dark;
--beta-text: @prime-dark;
--badge: @purple-dark;
@@ -275,9 +281,12 @@
--secondary-bg: @black;
--secondary-checkbox: @light-1;
--bg-column: @primedark-2;
- --card: @primedark-1;
+ --card: @primedark-2;
+ --card-text: @primelight-3;
+ --card-title: @primelight-4;
--card-active: @primedark-4;
--card-disabled: @primedark-1;
+ --card-target: @primedark-2;
--ultra: @ultra;
--ultra-no-red: @ultra-no-red;
@@ -316,7 +325,7 @@
--prime-hover: darken(@prime-light, 8%);
--new-badge: @prime-light;
--new-badge-text: @primelight-1;
- --info-badge: @dark-navy;
+ --info-badge: @navy-dark;
--info-badge-text: @blue-dark;
--beta-text: @prime-light;
--badge: @purple-dark;
@@ -361,9 +370,12 @@
--secondary-bg: @primelight-1;
--secondary-checkbox: @dark-2;
--bg-column: @primelight-1;
- --card: @primelight-3;
+ --card: darken(@primelight-3, 8%);
--card-active: @primelight-2;
+ --card-title: @primedark-4;
+ --card-text: @primedark-3;
--card-disabled: @primelight-2;
+ --card-target: @primelight-3;
--ultra: @ultra-light;
--ultra-no-red: @ultra-no-red-light;
diff --git a/test/regular/streaming/dual-output.ts b/test/regular/streaming/dual-output.ts
index 993186bf4dc4..9a04db621de8 100644
--- a/test/regular/streaming/dual-output.ts
+++ b/test/regular/streaming/dual-output.ts
@@ -318,7 +318,7 @@ test('Dual Output Go Live Non-Ultra', async t => {
// Clean up the dummy account
await showSettingsWindow('Stream', async () => {
await waitForDisplayed('h2=Stream Destinations');
- await clickWhenDisplayed('[data-name="instagramUnlink"]');
+ await clickWhenDisplayed('[data-name="instagramUnlink"]', { timeout: 3000 });
});
// Vertical display is hidden after logging out
diff --git a/test/regular/streaming/multistream.ts b/test/regular/streaming/multistream.ts
index e6ea97722806..22d43592f4f8 100644
--- a/test/regular/streaming/multistream.ts
+++ b/test/regular/streaming/multistream.ts
@@ -32,8 +32,12 @@ import { sleep } from '../../helpers/sleep';
// eslint-disable-next-line react-hooks/rules-of-hooks
useWebdriver();
-async function enableAllPlatforms() {
+async function enableAllPlatforms(skipYoutube: boolean = false) {
for (const platform of ['twitch', 'youtube', 'trovo']) {
+ if (platform === 'youtube' && skipYoutube) {
+ continue;
+ }
+
await fillForm({ [platform]: true });
await sleep(500);
await waitForSettingsWindowLoaded();
@@ -47,7 +51,7 @@ async function goLiveWithMultistream() {
// YouTube accounts fail for reasons unrelated to the tests. Check for the bypass prompt, which is
// shown when setting up a multistream fails, including for errors from YouTube
// Try toggling off YouTube and going live again
- const bypassPrompted = await isDisplayed('button=Bypass and Go Live', { timeout: 2000 });
+ const bypassPrompted = await isDisplayed('button=Bypass and Go Live', { timeout: 5000 });
if (bypassPrompted) {
await clickButton('Close');
@@ -70,30 +74,31 @@ async function goLiveWithStreamShift(t: TExecutionContext, multistream: boolean)
await waitForSettingsWindowLoaded();
if (multistream) {
- await enableAllPlatforms();
+ // Skip streaming to due to limited accounts
+ await enableAllPlatforms(true);
await waitForSettingsWindowLoaded();
await fillForm({
title: 'Test stream',
- description: 'Test stream description',
twitchGame: 'Fortnite',
trovoGame: 'Doom',
streamShift: true,
});
- await goLiveWithMultistream();
} else {
await fillForm({ twitch: true });
await waitForSettingsWindowLoaded();
await fillForm({ title: 'Test stream', twitchGame: 'Fortnite', streamShift: true });
- await waitForSettingsWindowLoaded();
- await submit();
- await waitForDisplayed('span=Configure the Multistream service', { timeout: 10000 });
- await waitForDisplayed("h1=You're live!", { timeout: 60000 });
- // Confirm chat loads
- await waitForStreamStart();
- await focusMain();
- await chatIsVisible();
}
+ await waitForSettingsWindowLoaded();
+ await submit();
+ await waitForDisplayed('span=Configure the Multistream service', { timeout: 10000 });
+ await waitForDisplayed("h1=You're live!", { timeout: 60000 });
+
+ // Confirm chat loads
+ await waitForStreamStart();
+ await focusMain();
+ await chatIsVisible();
+
await stopStream();
await waitForStreamStop();
}
@@ -174,7 +179,9 @@ test(
},
);
-test(
+// The current iteration of the go live window only has one mode, so this test is skipped unless
+// the advanced mode is reactivated.
+test.skip(
'Multistream advanced mode',
withUser('twitch', { prime: true, multistream: true }),
async t => {