Merged staging into vcam-custom-sources-realm

app/app-services.ts

@@ -78,6 +78,7 @@ export { RestreamService } from 'services/restream';
 export { TwitterService } from 'services/integrations/twitter';
 export { TwitterPlatformService } from 'services/platforms/twitter';
 export { InstagramService } from 'services/platforms/instagram';
+export { KickService } from 'services/platforms/kick';
 export { UsageStatisticsService } from './services/usage-statistics';
 export { GameOverlayService } from 'services/game-overlay';
 export { SharedStorageService } from 'services/integrations/shared-storage';
@@ -205,6 +206,7 @@ import { MarkersService } from 'services/markers';
 import { SharedStorageService } from 'services/integrations/shared-storage';
 import { RealmService } from 'services/realm';
 import { InstagramService } from 'services/platforms/instagram';
+import { KickService } from 'services/platforms/kick';
 import { TwitchStudioImporterService } from 'services/ts-importer';
 import { RemoteControlService } from 'services/api/remote-control-api';
 import { UrlService } from 'services/hosts';
@@ -241,6 +243,7 @@ export const AppServices = {
   TwitchContentClassificationService,
   TrovoService,
   InstagramService,
+  KickService,
   DismissablesService,
   HighlighterService,
   GrowService,

app/components-react/root/LiveDock.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import * as remote from '@electron/remote';
 import cx from 'classnames';
 import Animation from 'rc-animate';
-import { Menu } from 'antd';
+import { Button, Menu } from 'antd';
 import pick from 'lodash/pick';
 import { initStore, useController } from 'components-react/hooks/zustand';
 import { EStreamingState } from 'services/streaming';
@@ -356,6 +356,33 @@ function LiveDock(p: { onLeft: boolean }) {
       return <></>;
     }
 
+    const showKickInfo =
+      visibleChat === 'kick' || (visibleChat === 'default' && primaryChat === 'kick');
+    if (showKickInfo) {
+      return (
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            marginTop: '30px',
+          }}
+        >
+          <div style={{ marginBottom: '5px' }}>
+            {$t('Access chat for Kick in the Stream Dashboard.')}
+          </div>
+          <Button
+            style={{
+              width: '200px',
+              marginBottom: '10px',
+            }}
+            onClick={() => remote.shell.openExternal(Services.KickService.chatUrl)}
+          >
+            {$t('Open Kick Chat')}
+          </Button>
+        </div>
+      );
+    }
+
     return (
       <Chat
         restream={isRestreaming && visibleChat === 'restream'}
@@ -449,7 +476,8 @@ function LiveDock(p: { onLeft: boolean }) {
             </div>
             {!hideStyleBlockers &&
               (isPlatform(['twitch', 'trovo']) ||
-                (isStreaming && isPlatform(['youtube', 'facebook', 'twitter', 'tiktok']))) && (
+                (isStreaming &&
+                  isPlatform(['youtube', 'facebook', 'twitter', 'tiktok', 'kick']))) && (
                 <div className={styles.liveDockChat}>
                   {hasChatTabs && <ChatTabs visibleChat={visibleChat} setChat={setChat} />}
 
@@ -465,7 +493,8 @@ function LiveDock(p: { onLeft: boolean }) {
                 </div>
               )}
             {(!ctrl.platform ||
-              (isPlatform(['youtube', 'facebook', 'twitter', 'tiktok']) && !isStreaming)) && (
+              (isPlatform(['youtube', 'facebook', 'twitter', 'tiktok', 'kick']) &&
+                !isStreaming)) && (
               <div className={cx('flex flex--center flex--column', styles.liveDockChatOffline)}>
                 <img className={styles.liveDockChatImgOffline} src={ctrl.offlineImageSrc} />
                 {!hideStyleBlockers && <span>{$t('Your chat is currently offline')}</span>}

app/components-react/root/ShareStreamLink.m.less

@@ -12,4 +12,9 @@
     width: 16px;
     height: 16px;
   }
+
+  :global(i.kick) {
+    width: 16px;
+    height: 16px;
+  }
 }

app/components-react/shared/PlatformLogo.m.less

@@ -77,3 +77,11 @@
   background-size: contain;
   background-repeat: no-repeat;
 }
+.kick {
+  background-image: url('https://slobs-cdn.streamlabs.com/media/kick-logo.png');
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  background-size: contain;
+  background-repeat: no-repeat;
+}

app/components-react/shared/PlatformLogo.tsx

@@ -35,6 +35,7 @@ export default function PlatformLogo(p: IProps & HTMLAttributes<unknown>) {
       twitter: 'twitter',
       streamlabs: 'icon-streamlabs',
       instagram: 'instagram',
+      kick: 'kick',
     }[p.platform];
   }
   const size = p.size && (sizeMap[p.size] ?? p.size);

app/components-react/sidebar/NavTools.m.less

@@ -156,6 +156,10 @@
       width: 13px;
       height: 13px;
     }
+    &-kick {
+      width: 15px;
+      height: 15px;
+    }
     &-streamlabs {
       color: var(--teal) !important;
     }

app/components-react/sidebar/NavTools.tsx

@@ -80,8 +80,9 @@ export default function SideNav() {
   const throttledOpenDashboard = throttle(openDashboard, 2000, { trailing: false });
 
   // Instagram doesn't provide a username, since we're not really linked, pass undefined for a generic logout msg w/o it
+  // Kick doesn't provide a username, since we're not really linked, pass undefined for a generic logout msg w/o it
   const username =
-    isLoggedIn && UserService.views.auth!.primaryPlatform !== 'instagram'
+    isLoggedIn && !['instagram', 'kick'].includes(UserService.views.auth!.primaryPlatform)
       ? UserService.username
       : undefined;
 

app/components-react/sidebar/PlatformIndicator.m.less

@@ -11,7 +11,7 @@
   &-facebook {
     color: var(--facebook) !important;
   }
-  &-trovo, &-twitter, &-tiktok, &-instagram, &-youtube {
+  &-trovo, &-twitter, &-tiktok, &-instagram, &-youtube, &-kick {
     width: 15px;
     height: 15px;
   }

app/components-react/sidebar/PlatformIndicator.tsx

@@ -46,7 +46,8 @@ export default function PlatformIndicator({ platform }: IPlatformIndicatorProps)
 }
 
 const SinglePlatformIndicator = ({ platform }: Pick<IPlatformIndicatorProps, 'platform'>) => {
-  const username = platform?.type === 'instagram' ? undefined : platform?.username;
+  const username =
+    platform?.type === 'instagram' || platform?.type === 'kick' ? undefined : platform?.username;
 
   return (
     <>

app/components-react/widgets/common/useWidget.tsx

@@ -293,7 +293,7 @@ export class WidgetModule<TWidgetState extends IWidgetState = IWidgetState> {
     ]);
 
     this.setStaticConfig(staticConfig);
-    if (staticConfig) {
+    if (staticConfig?.data?.custom_code) {
       // I miss lenses
       const makeLenses = (type: 'html' | 'css' | 'js') => {
         const prop = `custom_${type}`;

app/components-react/windows/MultistreamChatInfo.tsx

@@ -57,6 +57,12 @@ export default function MultistreamChatInfo() {
       read: false,
       write: false,
     },
+    {
+      icon: 'kick',
+      name: $t('Kick'),
+      read: true,
+      write: false,
+    },
   ];
 
   return (

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

@@ -13,6 +13,7 @@ import { getDefined } from '../../../util/properties-type-guards';
 import { TrovoEditStreamInfo } from './platforms/TrovoEditStreamInfo';
 import { TwitterEditStreamInfo } from './platforms/TwitterEditStreamInfo';
 import { InstagramEditStreamInfo } from './platforms/InstagramEditStreamInfo';
+import { KickEditStreamInfo } from './platforms/KickEditStreamInfo';
 import AdvancedSettingsSwitch from './AdvancedSettingsSwitch';
 
 export default function PlatformSettings() {
@@ -104,6 +105,7 @@ export default function PlatformSettings() {
               {platform === 'tiktok' && isTikTokConnected && (
                 <TikTokEditStreamInfo {...createPlatformBinding('tiktok')} />
               )}
+              {platform === 'kick' && <KickEditStreamInfo {...createPlatformBinding('kick')} />}
               {platform === 'trovo' && <TrovoEditStreamInfo {...createPlatformBinding('trovo')} />}
               {platform === 'twitter' && (
                 <TwitterEditStreamInfo {...createPlatformBinding('twitter')} />

app/components-react/windows/go-live/platforms/KickEditStreamInfo.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { $t } from 'services/i18n';
+import Form from '../../../shared/inputs/Form';
+import { createBinding } from '../../../shared/inputs';
+import { IPlatformComponentParams } from './PlatformSettingsLayout';
+import { clipboard } from 'electron';
+import { TextInput } from 'components-react/shared/inputs';
+import { Alert, Button } from 'antd';
+
+/**
+ * Note: The implementation for this component is a light refactor of the InstagramEditStreamInfo component.
+ */
+
+type Props = IPlatformComponentParams<'kick'> & {
+  isStreamSettingsWindow?: boolean;
+};
+
+export function KickEditStreamInfo(p: Props) {
+  const bind = createBinding(p.value, updatedSettings =>
+    p.onChange({ ...p.value, ...updatedSettings }),
+  );
+
+  const { isStreamSettingsWindow } = p;
+  const streamKeyLabel = $t(isStreamSettingsWindow ? 'Stream Key' : 'Kick Stream Key');
+  const streamUrlLabel = $t(isStreamSettingsWindow ? 'Stream URL' : 'Kick Stream URL');
+
+  return (
+    <Form name="kick-settings">
+      <TextInput
+        {...bind.streamUrl}
+        required
+        label={streamUrlLabel}
+        addonAfter={<PasteButton onPaste={bind.streamUrl.onChange} />}
+      />
+
+      <TextInput
+        {...bind.streamKey}
+        required
+        label={streamKeyLabel}
+        isPassword
+        placeholder={$t('Remember to update your Stream Key')}
+        addonAfter={<PasteButton onPaste={bind.streamKey.onChange} />}
+      />
+      {!isStreamSettingsWindow && (
+        <Alert
+          style={{ marginBottom: 8 }}
+          message={$t(
+            'Remember to open Kick in browser and enter your Stream URL and Key to start streaming!',
+          )}
+          type="warning"
+          showIcon
+          closable
+        />
+      )}
+    </Form>
+  );
+}
+
+function PasteButton({ onPaste }: { onPaste: (text: string) => void }) {
+  return (
+    <Button title={$t('Paste')} onClick={() => onPaste(clipboard.readText())}>
+      <i className="fa fa-paste" />
+    </Button>
+  );
+}

app/components-react/windows/go-live/platforms/PlatformSettingsLayout.tsx

@@ -5,6 +5,7 @@ import { IYoutubeStartStreamOptions } from '../../../../services/platforms/youtu
 import { IFacebookStartStreamOptions } from '../../../../services/platforms/facebook';
 import { ITikTokStartStreamOptions } from '../../../../services/platforms/tiktok';
 import { ITrovoStartStreamOptions } from '../../../../services/platforms/trovo';
+import { IKickStartStreamOptions } from '../../../../services/platforms/kick';
 
 export type TLayoutMode = 'singlePlatform' | 'multiplatformAdvanced' | 'multiplatformSimple';
 
@@ -36,6 +37,7 @@ export interface IPlatformSettings extends Partial<Record<TPlatform, any>> {
   facebook?: IFacebookStartStreamOptions;
   tiktok?: ITikTokStartStreamOptions;
   trovo?: ITrovoStartStreamOptions;
+  kick?: IKickStartStreamOptions;
 }
 
 export interface IPlatformComponentParams<T extends TPlatform> {

app/components-react/windows/settings/General.tsx

@@ -99,6 +99,8 @@ function ExtraSettings() {
   }
 
   function importFromObs() {
+    // TODO: there's no check that OBS is installed like in Onboarding
+    OnboardingService.actions.setImport('obs');
     OnboardingService.actions.start({ isImport: true });
     WindowsService.actions.closeChildWindow();
   }