Added new target.

app/app-services.ts

@@ -74,6 +74,7 @@ export {
 export { FacebookService } from 'services/platforms/facebook';
 export { TikTokService } from 'services/platforms/tiktok';
 export { TrovoService } from 'services/platforms/trovo';
+export { KickService } from 'services/platforms/kick';
 export { RestreamService } from 'services/restream';
 export { TwitterService } from 'services/integrations/twitter';
 export { TwitterPlatformService } from 'services/platforms/twitter';
@@ -208,6 +209,7 @@ import { InstagramService } from 'services/platforms/instagram';
 import { TwitchStudioImporterService } from 'services/ts-importer';
 import { RemoteControlService } from 'services/api/remote-control-api';
 import { UrlService } from 'services/hosts';
+import { KickService } from 'services/platforms/kick';
 
 export const AppServices = {
   AppService,
@@ -240,6 +242,7 @@ export const AppServices = {
   TwitchTagsService,
   TwitchContentClassificationService,
   TrovoService,
+  KickService,
   InstagramService,
   DismissablesService,
   HighlighterService,

app/components-react/pages/onboarding/Connect.tsx

@@ -63,7 +63,7 @@ export function Connect() {
   // streamlabs and trovo are added separarely on markup below
   const platforms = RecordingModeService.views.isRecordingModeEnabled
     ? ['youtube']
-    : ['twitch', 'youtube', 'facebook', 'twitter', 'tiktok'];
+    : ['twitch', 'youtube', 'tiktok', 'kick', 'facebook', 'twitter'];
 
   const shouldAddTrovo = !RecordingModeService.views.isRecordingModeEnabled;
 
@@ -132,7 +132,9 @@ export function Connect() {
                     loading={loading}
                     onClick={() => authPlatform(platform, afterLogin)}
                     key={platform}
-                    logoSize={['twitter', 'tiktok', 'youtube'].includes(platform) ? 15 : undefined}
+                    logoSize={
+                      ['twitter', 'tiktok', 'youtube', 'kick'].includes(platform) ? 15 : undefined
+                    }
                   >
                     <Translate
                       message={$t('Log in with <span>%{platform}</span>', {
@@ -263,7 +265,9 @@ export class LoginModule {
 
     const result = await this.UserService.startAuth(
       platform,
-      ['youtube', 'twitch', 'twitter', 'tiktok'].includes(platform) ? 'external' : 'internal',
+      ['youtube', 'twitch', 'twitter', 'tiktok', 'kick'].includes(platform)
+        ? 'external'
+        : 'internal',
       merge,
     );
 

app/components-react/pages/onboarding/PrimaryPlatformSelect.tsx

@@ -22,7 +22,7 @@ export function PrimaryPlatformSelect() {
     isPrime: UserService.state.isPrime,
   }));
   const { loading, authInProgress, authPlatform, finishSLAuth } = useModule(LoginModule);
-  const platforms = ['twitch', 'youtube', 'facebook', 'twitter', 'tiktok', 'trovo'];
+  const platforms = ['twitch', 'youtube', 'tiktok', 'kick', 'facebook', 'twitter', 'trovo'];
   const platformOptions = [
     {
       value: 'twitch',
@@ -54,6 +54,11 @@ export function PrimaryPlatformSelect() {
       label: 'TikTok',
       image: <PlatformLogo platform="tiktok" size={14} />,
     },
+    {
+      value: 'kick',
+      label: 'Kick',
+      image: <PlatformLogo platform="kick" size={14} />,
+    },
   ].filter(opt => {
     return linkedPlatforms.includes(opt.value as TPlatform);
   });

app/components-react/root/LiveDock.tsx

@@ -27,6 +27,7 @@ class LiveDockController {
   private youtubeService = Services.YoutubeService;
   private facebookService = Services.FacebookService;
   private trovoService = Services.TrovoService;
+  private kickService = Services.KickService;
   private tiktokService = Services.TikTokService;
   private userService = Services.UserService;
   private customizationService = Services.CustomizationService;
@@ -159,6 +160,7 @@ class LiveDockController {
     // Twitter & Tiktok don't support editing title after going live
     if (this.isPlatform('twitter') && !this.isRestreaming) return false;
     if (this.isPlatform('tiktok') && !this.isRestreaming) return false;
+    if (this.isPlatform('kick') && !this.isRestreaming) return false;
 
     return (
       this.streamingService.views.isMidStreamMode ||
@@ -181,6 +183,7 @@ class LiveDockController {
     if (this.platform === 'youtube') url = this.youtubeService.streamPageUrl;
     if (this.platform === 'facebook') url = this.facebookService.streamPageUrl;
     if (this.platform === 'trovo') url = this.trovoService.streamPageUrl;
+    if (this.platform === 'kick') url = this.kickService.streamPageUrl;
     if (this.platform === 'tiktok') url = this.tiktokService.streamPageUrl;
     remote.shell.openExternal(url);
   }
@@ -419,7 +422,7 @@ function LiveDock(p: { onLeft: boolean }) {
                     <i onClick={() => ctrl.showEditStreamInfo()} className="icon-edit" />
                   </Tooltip>
                 )}
-                {isPlatform(['youtube', 'facebook', 'trovo', 'tiktok']) && isStreaming && (
+                {isPlatform(['youtube', 'facebook', 'trovo', 'tiktok', 'kick']) && isStreaming && (
                   <Tooltip
                     title={$t('View your live stream in a web browser')}
                     placement="right"
@@ -440,7 +443,7 @@ function LiveDock(p: { onLeft: boolean }) {
                 )}
               </div>
               <div className="flex">
-                {(isPlatform(['twitch', 'trovo', 'facebook']) ||
+                {(isPlatform(['twitch', 'trovo', 'facebook', 'kick']) ||
                   (isPlatform(['youtube', 'twitter']) && isStreaming) ||
                   (isPlatform(['tiktok']) && isRestreaming)) && (
                   <a onClick={() => ctrl.refreshChat()}>{$t('Refresh Chat')}</a>
@@ -449,7 +452,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 +469,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/PlatformIndicator.m.less

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

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,36 @@
+import React from 'react';
+import { CommonPlatformFields } from '../CommonPlatformFields';
+import Form from '../../../shared/inputs/Form';
+import { createBinding, InputComponent } from '../../../shared/inputs';
+import PlatformSettingsLayout, { IPlatformComponentParams } from './PlatformSettingsLayout';
+import { IKickStartStreamOptions } from '../../../../services/platforms/kick';
+
+/***
+ * Stream Settings for Kick
+ */
+export const KickEditStreamInfo = InputComponent((p: IPlatformComponentParams<'kick'>) => {
+  function updateSettings(patch: Partial<IKickStartStreamOptions>) {
+    p.onChange({ ...kickSettings, ...patch });
+  }
+
+  const kickSettings = p.value;
+  const bind = createBinding(kickSettings, newKickSettings => updateSettings(newKickSettings));
+
+  return (
+    <Form name="kick-settings">
+      <PlatformSettingsLayout
+        layoutMode={p.layoutMode}
+        commonFields={
+          <CommonPlatformFields
+            key="common"
+            platform="kick"
+            layoutMode={p.layoutMode}
+            value={kickSettings}
+            onChange={updateSettings}
+          />
+        }
+        requiredFields={<div key={'empty-kick'} />}
+      />
+    </Form>
+  );
+});

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/Stream.tsx

@@ -217,7 +217,7 @@ class StreamSettingsModule {
   }
 
   async platformMergeInline(platform: TPlatform) {
-    const mode = ['youtube', 'twitch', 'twitter', 'tiktok'].includes(platform)
+    const mode = ['youtube', 'twitch', 'twitter', 'tiktok', 'kick'].includes(platform)
       ? 'external'
       : 'internal';
 
@@ -472,7 +472,7 @@ function Platform(p: { platform: TPlatform }) {
         style={{
           backgroundColor: `var(--${platform})`,
           borderColor: 'transparent',
-          color: ['trovo', 'instagram'].includes(platform) ? 'black' : 'inherit',
+          color: ['trovo', 'instagram', 'kick'].includes(platform) ? 'black' : 'inherit',
         }}
       >
         {$t('Connect')}

app/components/shared/PlatformLogo.m.less

@@ -36,4 +36,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/shared/PlatformLogo.tsx

@@ -21,6 +21,7 @@ export default class PlatformLogo extends TsxComponent<LogoProps> {
       nimotv: 'nimotv',
       streamlabs: 'icon-streamlabs',
       trovo: 'trovo',
+      kick: 'kick',
       twitter: 'twitter',
       instagram: 'instagram',
     }[this.props.platform];

app/i18n/en-US/common.json

@@ -154,6 +154,7 @@
   "Instagram": "Instagram",
   "Instagram Live": "Instagram Live",
   "X (Twitter)": "X (Twitter)",
+  "Kick": "Kick",
   "Facebook Profiles": "Facebook Profiles",
   "Facebook Pages": "Facebook Pages",
   "Alert Box": "Alert Box",

app/services/platforms/index.ts

@@ -10,6 +10,7 @@ import { WidgetType } from '../widgets';
 import { ITrovoStartStreamOptions, TrovoService } from './trovo';
 import { TDisplayType } from 'services/settings-v2';
 import { $t } from 'services/i18n';
+import { KickService, IKickStartStreamOptions } from './kick';
 
 export type Tag = string;
 export interface IGame {
@@ -151,7 +152,8 @@ export type TStartStreamOptions =
   | Partial<IFacebookStartStreamOptions>
   | Partial<ITikTokStartStreamOptions>
   | Partial<ITrovoStartStreamOptions>
-  | Partial<IInstagramStartStreamOptions>;
+  | Partial<IInstagramStartStreamOptions>
+  | Partial<IKickStartStreamOptions>;
 
 // state applicable for all platforms
 export interface IPlatformState {
@@ -242,6 +244,7 @@ export enum EPlatform {
   Trovo = 'trovo',
   Twitter = 'twitter',
   Instagram = 'instagram',
+  Kick = 'kick',
 }
 
 export type TPlatform =
@@ -251,7 +254,8 @@ export type TPlatform =
   | 'tiktok'
   | 'trovo'
   | 'twitter'
-  | 'instagram';
+  | 'instagram'
+  | 'kick';
 
 export const platformList = [
   EPlatform.Facebook,
@@ -261,6 +265,7 @@ export const platformList = [
   EPlatform.YouTube,
   EPlatform.Twitter,
   EPlatform.Instagram,
+  EPlatform.Kick,
 ];
 
 export const platformLabels = (platform: TPlatform | string) =>
@@ -273,6 +278,7 @@ export const platformLabels = (platform: TPlatform | string) =>
     // TODO: translate
     [EPlatform.Twitter]: 'Twitter',
     [EPlatform.Instagram]: $t('Instagram'),
+    [EPlatform.Kick]: $t('Kick'),
   }[platform]);
 
 export function getPlatformService(platform: TPlatform): IPlatformService {
@@ -282,6 +288,7 @@ export function getPlatformService(platform: TPlatform): IPlatformService {
     facebook: FacebookService.instance,
     tiktok: TikTokService.instance,
     trovo: TrovoService.instance,
+    kick: KickService.instance,
     twitter: TwitterPlatformService.instance,
     instagram: InstagramService.instance,
   }[platform];