Streaming error alert and bypass. (#5308)

* Streaming error alert and bypass.

* Fix error UI.

* Fix Kick external.

* Add default error message.

Author: michelinewu

app/components-react/pages/PlatformMerge.tsx

@@ -38,7 +38,7 @@ export default function PlatformMerge(p: IPlatformMergeProps) {
 
   async function mergePlatform() {
     if (!platform) return;
-    const mode = ['youtube', 'twitch', 'twitter', 'tiktok'].includes(platform)
+    const mode = ['youtube', 'twitch', 'twitter', 'tiktok', 'kick'].includes(platform)
       ? 'external'
       : 'internal';
     await UserService.actions.return

app/components-react/windows/go-live/GoLiveError.m.less

@@ -20,21 +20,15 @@
   font-family: monospace;
   text-align: right;
   align-self: center !important;
+  margin-top: 10px;
 }
 
 .go-prime-btn {
   background-color: var(--prime-hover);
 }
 
 .cta-btn {
-  display: grid;
+  display: flex;
   flex-direction: row;
-  justify-content: space-between;
-
-  p {
-    justify-self: flex-end;
-    align-self: flex-end;
-    margin: 0px;
-    position: absolute;
-  }
+  justify-content: flex-end;
 }

app/components-react/windows/go-live/GoLiveError.tsx

@@ -9,6 +9,7 @@ import { $t } from '../../../services/i18n';
 import Translate from '../../shared/Translate';
 import css from './GoLiveError.m.less';
 import * as remote from '@electron/remote';
+import { ENotificationType } from 'services/notifications';
 
 /**
  * Shows an error and troubleshooting suggestions
@@ -198,11 +199,47 @@ export default function GoLiveError() {
   }
 
   function renderRestreamError(error: IStreamError) {
+    Services.NotificationsService.actions.push({
+      message: `${$t('Multistream Error')}: ${error.details}`,
+      type: ENotificationType.WARNING,
+      lifeTime: 5000,
+    });
+
+    function skipSettingsUpdateAndGoLive() {
+      StreamingService.actions.finishStartStreaming();
+      WindowsService.actions.closeChildWindow();
+    }
+
+    const details =
+      !error.details || error.details === ''
+        ? [
+            $t(
+              'One of destinations might have incomplete permissions. Reconnect the destinations in settings and try again.',
+            ),
+          ]
+        : error.details.split('\n');
+
     return (
-      <MessageLayout error={error}>
-        {$t(
-          'Please try again. If the issue persists, you can stream directly to a single platform instead.',
+      <MessageLayout
+        error={error}
+        hasButton={true}
+        message={$t(
+          'Please try again. If the issue persists, you can stream directly to a single platform instead or click the button below to bypass and go live.',
         )}
+      >
+        {`${$t('Issues')}:`}
+        <ul>
+          {details.map((detail: string, index: number) => (
+            <li key={`detail-${index}`}>{detail}</li>
+          ))}
+        </ul>
+        <button
+          className="button button--warn"
+          style={{ marginTop: '8px' }}
+          onClick={() => skipSettingsUpdateAndGoLive()}
+        >
+          {$t('Bypass and Go Live')}
+        </button>
       </MessageLayout>
     );
   }

app/components-react/windows/go-live/MessageLayout.tsx

@@ -62,19 +62,17 @@ export default function MessageLayout(p: IMessageLayoutProps & HTMLAttributes<un
         <div>{p.children}</div>
         <div className={cx({ [styles.ctaBtn]: hasButton })}>
           {details && !isErrorDetailsShown && (
-            <p style={{ textAlign: 'right' }}>
-              <a className={styles.link} onClick={() => setDetailsShown(true)}>
-                {$t('Show details')}
-              </a>
-            </p>
+            <a className={styles.link} onClick={() => setDetailsShown(true)}>
+              {$t('Show details')}
+            </a>
           )}
           {details && isErrorDetailsShown && (
-            <p className={styles.details}>
+            <div className={styles.details}>
               {details}
               <br />
               <br />
               {error?.status} {error?.statusText} {error?.url}
-            </p>
+            </div>
           )}
         </div>
       </div>

app/i18n/ar-SA/settings.json

@@ -261,5 +261,6 @@
   "Idle": "Idle",
   "Please connect platforms directly from Streamlabs Desktop instead of adding Streamlabs Multistream as a custom destination": "Please connect platforms directly from Streamlabs Desktop instead of adding Streamlabs Multistream as a custom destination",
   "Audio Encoder": "Audio Encoder",
-  "Additional Settings": "Additional Settings"
+  "Additional Settings": "Additional Settings",
+  "Recording Audio Encoder": "Recording Audio Encoder"
 }

app/i18n/en-US/streaming.json

@@ -280,5 +280,10 @@
   "Copy stream link": "Copy stream link",
   "Copy %{platform} link": "Copy %{platform} link",
   "Copied to clipboard": "Copied to clipboard",
-  "Twitch Followers": "Twitch Followers"
+  "Twitch Followers": "Twitch Followers",
+  "Bypass and Go Live": "Bypass and Go Live",
+  "Please try again. If the issue persists, you can stream directly to a single platform instead or click the button below to bypass and go live.": "Please try again. If the issue persists, you can stream directly to a single platform instead or click the button below to bypass and go live.",
+  "Issues": "Issues",
+  "Multistream Error": "Multistream Error",
+  "One of destinations might have incomplete permissions. Reconnect the destinations in settings and try again.": "One of destinations might have incomplete permissions. Reconnect the destinations in settings and try again."
 }

app/services/platforms/kick.ts

@@ -19,12 +19,6 @@ import { getDefined } from 'util/properties-type-guards';
 import { WindowsService } from 'services/windows';
 import { DiagnosticsService } from 'services/diagnostics';
 
-interface IKickGame {
-  id: number;
-  name: string;
-  thumbnail: string;
-}
-
 interface IKickStartStreamResponse {
   id?: string;
   rtmp: string;
@@ -141,33 +135,26 @@ export class KickService
     const kickSettings = getDefined(goLiveSettings.platforms.kick);
     const context = display ?? kickSettings?.display;
 
-    try {
-      const streamInfo = await this.startStream(
-        goLiveSettings.platforms.kick ?? this.state.settings,
+    const streamInfo = await this.startStream(goLiveSettings.platforms.kick ?? this.state.settings);
+
+    this.SET_INGEST(streamInfo.rtmp);
+    this.SET_STREAM_KEY(streamInfo.key);
+    this.SET_CHAT_URL(streamInfo.chat_url);
+    this.SET_PLATFORM_ID(streamInfo.platform_id);
+
+    if (!this.streamingService.views.isMultiplatformMode) {
+      this.streamSettingsService.setSettings(
+        {
+          streamType: 'rtmp_custom',
+          key: streamInfo.key,
+          server: streamInfo.rtmp,
+        },
+        context,
       );
-
-      this.SET_INGEST(streamInfo.rtmp);
-      this.SET_STREAM_KEY(streamInfo.key);
-      this.SET_CHAT_URL(streamInfo.chat_url);
-      this.SET_PLATFORM_ID(streamInfo.platform_id);
-
-      if (!this.streamingService.views.isMultiplatformMode) {
-        this.streamSettingsService.setSettings(
-          {
-            streamType: 'rtmp_custom',
-            key: streamInfo.key,
-            server: streamInfo.rtmp,
-          },
-          context,
-        );
-      }
-
-      this.SET_STREAM_SETTINGS(kickSettings);
-      this.setPlatformContext('kick');
-    } catch (e: unknown) {
-      console.error('Error starting stream: ', e);
-      throwStreamError('PLATFORM_REQUEST_FAILED', e as any);
     }
+
+    this.SET_STREAM_SETTINGS(kickSettings);
+    this.setPlatformContext('kick');
   }
 
   async afterStopStream(): Promise<void> {
@@ -253,8 +240,21 @@ export class KickService
         if (!e) throwStreamError('PLATFORM_REQUEST_FAILED', defaultError);
 
         // check if the error is an IKickError
-        if (typeof e === 'object' && e.hasOwnProperty('success')) {
+        if (typeof e === 'object' && e.hasOwnProperty('result')) {
           const error = e as IKickError;
+
+          if (error.result && error.result.data.code === 401) {
+            const message = error.statusText !== '' ? error.statusText : error.result.data.message;
+            throwStreamError(
+              'KICK_SCOPE_OUTDATED',
+              {
+                status: error.status,
+                statusText: message,
+              },
+              error.result.data.message,
+            );
+          }
+
           throwStreamError(
             'PLATFORM_REQUEST_FAILED',
             {
@@ -266,7 +266,7 @@ export class KickService
           );
         }
 
-        throwStreamError('PLATFORM_REQUEST_FAILED', e as any, defaultError.statusText);
+        throwStreamError('PLATFORM_REQUEST_FAILED', e);
       });
   }
 
@@ -291,20 +291,16 @@ export class KickService
       .catch(e => {
         console.warn('Error fetching Kick info: ', e);
 
-        if (e.hasOwnProperty('result')) {
-          if (e.result.data.code === 401) {
-            const message = e.statusText !== '' ? e.statusText : e.result.data.message;
-            throwStreamError(
-              'KICK_SCOPE_OUTDATED',
-              {
-                status: e.status,
-                statusText: message,
-              },
-              e.result.data.message,
-            );
-          }
-
-          throwStreamError('PLATFORM_REQUEST_FAILED', e);
+        if (e.result && e.result.data.code === 401) {
+          const message = e.statusText !== '' ? e.statusText : e.result.data.message;
+          throwStreamError(
+            'KICK_SCOPE_OUTDATED',
+            {
+              status: e.status,
+              statusText: message,
+            },
+            e.result.data.message,
+          );
         }
       });
   }
@@ -324,7 +320,6 @@ export class KickService
     return jfetch<IKickStreamInfoResponse>(request)
       .then(async res => {
         const data = res as IKickStreamInfoResponse;
-        console.log('data', JSON.stringify(data, null, 2));
 
         if (data.categories && data.categories.length > 0) {
           const games = await Promise.all(

app/services/streaming/stream-error.ts

@@ -311,7 +311,7 @@ export function formatStreamErrorMessage(
       messages.user.push(details);
     }
 
-    message = error.message.replace(/\s*\.$/, '');
+    message = error.message.replace(/\.*$/, '');
     // trim trailing periods so that the message joins correctly
     const errorMessage = (error as any)?.action ? `${message}, ${(error as any).action}` : message;
 

app/services/streaming/streaming.ts

@@ -701,17 +701,23 @@ export class StreamingService
   }
 
   handleTypedStreamError(
-    e: unknown,
+    e: StreamError | unknown,
     type: TStreamErrorType,
     message: string,
   ): StreamError | TStreamErrorType {
-    console.error(message, e as any);
-
     // restream errors returns an object with key value pairs for error details
-    if (e instanceof StreamError && type.split('_').includes('RESTREAM')) {
+    const defaultMessage =
+      this.state.info.error?.message ??
+      $t(
+        'One of destinations might have incomplete permissions. Reconnect the destinations in settings and try again.',
+      );
+
+    if (e && typeof e === 'object' && type.split('_').includes('RESTREAM')) {
       const messages: string[] = [];
       const details: string[] = [];
 
+      details.push(defaultMessage);
+
       Object.entries(e).forEach(([key, value]: [string, string]) => {
         const name = capitalize(key.replace(/([A-Z])/g, ' $1'));
         // only show the error message for the stream key and server url to the user for security purposes
@@ -722,8 +728,7 @@ export class StreamingService
         }
       });
 
-      e.message = messages.join('. ');
-      e.details = details.join('.');
+      return createStreamError(type, { status: 400, statusText: message }, details.join('\n'));
     }
 
     return e instanceof StreamError ? { ...e, type } : type;