Clean up platform logic dealing with lviedock features (#5401)

* Port LiveDock Component

* Fix import errors and tabs

* Add to ReactComponentList

* Fix strict nulls

* Fix import error

* Fix reactivity issues

* Fix positioning and styling

* Begin 1 to 1 port

* Define variables and functions

* Add missing classNames

* Fix non-modal redlines

* Add modals to react

* Import components

* Fix rendering bugs

* Add misssing classes

* Change scope of windowWidth

* Remove props from main window

* Move to native react rendering

* Revert to Vue wrapper component

* Fix stale style blockers

* Add css aliases

* Begin livedock restructure

* Fix rendering livedock

* Use Realm

* Fix compilation error

* Fix Livedock breaking render

* Use realm props binding

* fix: pass theme to `Loader`

* chore: uncoment main rendering

* fix(main): restore wrappers, should fix resizing behavior

* Restores main wrappers from the original Vue component, some of these
  are needed to preserve layout, while also in some cases separating the
  styles from the rendered component, e.g. footer, sidebar, where styles
  would be merged weirdly.
* `overflow: auto` is apparently required and that's what it seems to
  fix the cutoff at the bottom, combined with the above.
* Cleanup needed.

* Re-add ChatTabs

* Fix index typing for customization service

* Fix typing in Studio.tsx

* Fix resizing problem

* Fix css on resize bar

* Fix footer clipping at small sizes

* Fix livedock collapse

* Refactor resizebar into main window

* Get resize working

* Refactor to add collapse

* Fix dock resizing

* Add perf optimizations

* Add animation

* Fix non-editor size weirdness

* Fix chat disappearing

* Fix strict nulls issue

* Fix strict nulls again

* Fix strict nulls last time pls

* Address CR

* Clean up platform logic dealing with lviedock features

* Fix tests

---------

Co-authored-by: gettinToasty <sbeyer@logitech.com>
Co-authored-by: Adrian Perez <adrian@adrianperez.org>

Author: 3 people

app/components-react/root/LiveDock.tsx

@@ -6,7 +6,7 @@ import pick from 'lodash/pick';
 import { initStore, useController } from 'components-react/hooks/zustand';
 import { EStreamingState } from 'services/streaming';
 import { EAppPageSlot, ILoadedApp } from 'services/platform-apps';
-import { getPlatformService, TPlatform } from 'services/platforms';
+import { getPlatformService, TLiveDockFeature, TPlatform } from 'services/platforms';
 import { $t } from 'services/i18n';
 import { Services } from '../service-provider';
 import Chat from './Chat';
@@ -22,11 +22,6 @@ const LiveDockCtx = React.createContext<LiveDockController | null>(null);
 
 class LiveDockController {
   private streamingService = Services.StreamingService;
-  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;
   private platformAppsService = Services.PlatformAppsService;
@@ -80,6 +75,11 @@ class LiveDockController {
     return this.userService.platform?.type;
   }
 
+  get platformService() {
+    if (!this.platform) return;
+    return getPlatformService(this.platform);
+  }
+
   get offlineImageSrc() {
     const mode = this.customizationService.isDarkTheme ? 'night' : 'day';
     return $i(`images/sleeping-kevin-${mode}.png`);
@@ -189,21 +189,14 @@ class LiveDockController {
   }
 
   openPlatformStream() {
-    let url = '';
-    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;
+    const url = this.platformService?.streamPageUrl;
+    if (!url) return;
     remote.shell.openExternal(url);
   }
 
   openPlatformDash() {
-    let url = '';
-    if (this.platform === 'youtube') url = this.youtubeService.dashboardUrl;
-    if (this.platform === 'facebook') url = this.facebookService.streamDashboardUrl;
-    if (this.platform === 'tiktok') url = this.tiktokService.dashboardUrl;
-    if (this.platform === 'kick') url = this.kickService.dashboardUrl;
+    const url = this.platformService?.dashboardUrl;
+    if (!url) return;
     remote.shell.openExternal(url);
   }
 
@@ -239,6 +232,10 @@ class LiveDockController {
   showMultistreamChatInfo() {
     this.chatService.actions.showMultistreamChatWindow();
   }
+
+  hasLiveDockFeature(feature: TLiveDockFeature) {
+    return this.platformService?.hasLiveDockFeature(feature);
+  }
 }
 
 export default function LiveDockWithContext() {
@@ -258,6 +255,7 @@ function LiveDock() {
 
   const {
     isPlatform,
+    hasLiveDockFeature,
     isStreaming,
     isRestreaming,
     hasChatTabs,
@@ -267,7 +265,6 @@ function LiveDock() {
     currentViewers,
     pageSlot,
     liveText,
-    isPopOutAllowed,
     streamingStatus,
   } = useVuex(() =>
     pick(ctrl, [
@@ -281,7 +278,7 @@ function LiveDock() {
       'pageSlot',
       'currentViewers',
       'liveText',
-      'isPopOutAllowed',
+      'hasLiveDockFeature',
       'streamingStatus',
     ]),
   );
@@ -384,7 +381,7 @@ function LiveDock() {
                 <i onClick={() => ctrl.showEditStreamInfo()} className="icon-edit" />
               </Tooltip>
             )}
-            {isPlatform(['youtube', 'facebook', 'trovo', 'tiktok', 'kick']) && isStreaming && (
+            {hasLiveDockFeature('view-stream') && isStreaming && (
               <Tooltip
                 title={$t('View your live stream in a web browser')}
                 placement="right"
@@ -393,8 +390,7 @@ function LiveDock() {
                 <i onClick={() => ctrl.openPlatformStream()} className="icon-studio" />
               </Tooltip>
             )}
-            {isStreaming && <ShareStreamLink />}
-            {isPlatform(['youtube', 'facebook', 'tiktok']) && isStreaming && (
+            {hasLiveDockFeature('dashboard') && isStreaming && (
               <Tooltip
                 title={$t('Go to Live Dashboard')}
                 placement="right"
@@ -405,16 +401,16 @@ function LiveDock() {
             )}
           </div>
           <div className="flex">
-            {(isPlatform(['twitch', 'trovo', 'facebook', 'kick']) ||
-              (isPlatform(['youtube', 'twitter']) && isStreaming) ||
-              (isPlatform(['tiktok']) && isRestreaming)) && (
+            {(hasLiveDockFeature('refresh-chat') ||
+              (hasLiveDockFeature('refresh-chat-streaming') && isStreaming) ||
+              (hasLiveDockFeature('refresh-chat-restreaming') && isRestreaming)) && (
               <a onClick={() => ctrl.refreshChat()}>{$t('Refresh Chat')}</a>
             )}
           </div>
         </div>
         {!hideStyleBlockers &&
-          (isPlatform(['twitch', 'trovo']) ||
-            (isStreaming && isPlatform(['youtube', 'facebook', 'twitter', 'tiktok', 'kick']))) && (
+          (hasLiveDockFeature('chat-offline') ||
+            (isStreaming && hasLiveDockFeature('chat-streaming'))) && (
             <div className={styles.liveDockChat}>
               {hasChatTabs && <ChatTabs visibleChat={visibleChat} setChat={setChat} />}
               {!applicationLoading && !collapsed && chat}
@@ -429,8 +425,7 @@ function LiveDock() {
             </div>
           )}
       </div>
-      {(!ctrl.platform ||
-        (isPlatform(['youtube', 'facebook', 'twitter', 'tiktok', 'kick']) && !isStreaming)) && (
+      {(!ctrl.platform || (hasLiveDockFeature('chat-streaming') && !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/services/platforms/base-platform.ts

@@ -6,6 +6,7 @@ import {
   TPlatformCapability,
   TStartStreamOptions,
   TPlatformCapabilityMap,
+  TLiveDockFeature,
 } from './index';
 import { StreamingService } from 'services/streaming';
 import { UserService } from 'services/user';
@@ -41,11 +42,18 @@ export abstract class BasePlatformService<T extends IPlatformState> extends Stat
 
   abstract capabilities: Set<TPlatformCapability>;
 
+  abstract liveDockFeatures: Set<TLiveDockFeature>;
+
   @ExecuteInCurrentWindow()
   hasCapability<T extends TPlatformCapability>(capability: T): this is TPlatformCapabilityMap[T] {
     return this.capabilities.has(capability);
   }
 
+  @ExecuteInCurrentWindow()
+  hasLiveDockFeature(feature: TLiveDockFeature) {
+    return this.liveDockFeatures.has(feature);
+  }
+
   get mergeUrl() {
     const host = this.hostsService.streamlabs;
     const token = this.userService.apiToken;

app/services/platforms/facebook.ts

@@ -2,7 +2,14 @@ import moment from 'moment';
 import flatten from 'lodash/flatten';
 import * as remote from '@electron/remote';
 import { mutation, InheritMutations, ViewHandler } from '../core/stateful-service';
-import { IPlatformService, IGame, TPlatformCapability, IPlatformRequest, IPlatformState } from '.';
+import {
+  IPlatformService,
+  IGame,
+  TPlatformCapability,
+  IPlatformRequest,
+  IPlatformState,
+  TLiveDockFeature,
+} from '.';
 import { HostsService } from 'services/hosts';
 import { Inject } from 'services/core/injector';
 import { authorizedHeaders } from 'util/requests';
@@ -169,6 +176,12 @@ export class FacebookService
     'themes',
     'viewerCount',
   ]);
+  readonly liveDockFeatures = new Set<TLiveDockFeature>([
+    'chat-streaming',
+    'refresh-chat',
+    'dashboard',
+    'view-stream',
+  ]);
 
   authWindowOptions: Electron.BrowserWindowConstructorOptions = { width: 800, height: 800 };
 
@@ -248,7 +261,7 @@ export class FacebookService
     return this.state.streamPageUrl;
   }
 
-  get streamDashboardUrl(): string {
+  get dashboardUrl(): string {
     return this.state.streamDashboardUrl;
   }
 

app/services/platforms/index.ts

@@ -174,6 +174,7 @@ export interface IPlatformState {
 export interface IPlatformService {
   capabilities: Set<TPlatformCapability>;
   hasCapability<T extends TPlatformCapability>(capability: T): this is TPlatformCapabilityMap[T];
+  hasLiveDockFeature(feature: TLiveDockFeature): boolean;
 
   authWindowOptions: Electron.BrowserWindowConstructorOptions;
 
@@ -222,6 +223,7 @@ export interface IPlatformService {
   readonly mergeUrl: string;
   readonly streamPageUrl: string;
   readonly chatUrl: string;
+  readonly dashboardUrl?: string;
 
   /**
    * the list of widgets supported by the platform
@@ -245,6 +247,15 @@ export interface IUserInfo {
   username?: string;
 }
 
+export type TLiveDockFeature =
+  | 'chat-offline'
+  | 'chat-streaming'
+  | 'dashboard'
+  | 'view-stream'
+  | 'refresh-chat'
+  | 'refresh-chat-streaming'
+  | 'refresh-chat-restreaming';
+
 export enum EPlatform {
   Twitch = 'twitch',
   YouTube = 'youtube',

app/services/platforms/instagram.ts

@@ -8,6 +8,7 @@ import {
   TPlatformCapability,
   TStartStreamOptions,
   EPlatformCallResult,
+  TLiveDockFeature,
 } from '.';
 import { BasePlatformService } from './base-platform';
 import { IGoLiveSettings } from 'services/streaming';
@@ -40,6 +41,7 @@ export class InstagramService
   readonly platform = 'instagram';
   readonly displayName = 'Instagram';
   readonly capabilities = new Set<TPlatformCapability>(['resolutionPreset', 'title']);
+  readonly liveDockFeatures = new Set<TLiveDockFeature>();
 
   static initialState: IInstagramServiceState = {
     ...BasePlatformService.initialState,

app/services/platforms/kick.ts

@@ -7,6 +7,7 @@ import {
   IPlatformState,
   TPlatform,
   TPlatformCapability,
+  TLiveDockFeature,
 } from './index';
 import { authorizedHeaders, jfetch } from '../../util/requests';
 import { StreamError, throwStreamError } from '../streaming/stream-error';
@@ -123,6 +124,11 @@ export class KickService
   readonly platform = 'kick';
   readonly displayName = 'Kick';
   readonly capabilities = new Set<TPlatformCapability>(['title', 'chat', 'game', 'viewerCount']);
+  readonly liveDockFeatures = new Set<TLiveDockFeature>([
+    'view-stream',
+    'refresh-chat',
+    'chat-streaming',
+  ]);
 
   authWindowOptions: Electron.BrowserWindowConstructorOptions = {
     width: 600,

app/services/platforms/tiktok.ts

@@ -7,6 +7,7 @@ import {
   IPlatformService,
   IPlatformState,
   TPlatformCapability,
+  TLiveDockFeature,
 } from './index';
 import { authorizedHeaders, jfetch } from '../../util/requests';
 import {
@@ -119,6 +120,12 @@ export class TikTokService
   readonly platform = 'tiktok';
   readonly displayName = 'TikTok';
   readonly capabilities = new Set<TPlatformCapability>(['title', 'viewerCount']);
+  readonly liveDockFeatures = new Set<TLiveDockFeature>([
+    'view-stream',
+    'dashboard',
+    'refresh-chat-restreaming',
+    'chat-streaming',
+  ]);
 
   authWindowOptions: Electron.BrowserWindowConstructorOptions = {
     width: 600,

app/services/platforms/trovo.ts

@@ -6,6 +6,7 @@ import {
   IPlatformService,
   IPlatformState,
   TPlatformCapability,
+  TLiveDockFeature,
 } from './index';
 import { authorizedHeaders, jfetch } from '../../util/requests';
 import { throwStreamError } from '../streaming/stream-error';
@@ -62,6 +63,11 @@ export class TrovoService
     'streamlabels',
     'viewerCount',
   ]);
+  readonly liveDockFeatures = new Set<TLiveDockFeature>([
+    'chat-offline',
+    'refresh-chat',
+    'view-stream',
+  ]);
   readonly apiBase = 'https://open-api.trovo.live/openplatform';
   readonly rtmpServer = 'rtmp://livepush.trovo.live/live/';
   readonly platform = 'trovo';

app/services/platforms/twitch.ts

@@ -4,6 +4,7 @@ import {
   IPlatformRequest,
   IPlatformService,
   IPlatformState,
+  TLiveDockFeature,
   TPlatformCapability,
 } from '.';
 import { HostsService } from 'services/hosts';
@@ -120,6 +121,8 @@ export class TwitchService
     'viewerCount',
   ]);
 
+  readonly liveDockFeatures = new Set<TLiveDockFeature>(['chat-offline', 'refresh-chat']);
+
   authWindowOptions: Electron.BrowserWindowConstructorOptions = {
     width: 600,
     height: 800,

app/services/platforms/twitter.ts

@@ -1,6 +1,12 @@
 import { InheritMutations, Inject, mutation, Service } from '../core';
 import { BasePlatformService } from './base-platform';
-import { IPlatformRequest, IPlatformService, IPlatformState, TPlatformCapability } from './index';
+import {
+  IPlatformRequest,
+  IPlatformService,
+  IPlatformState,
+  TPlatformCapability,
+  TLiveDockFeature,
+} from './index';
 import { authorizedHeaders, jfetch } from '../../util/requests';
 import { throwStreamError } from '../streaming/stream-error';
 import { platformAuthorizedRequest } from './utils';
@@ -49,6 +55,10 @@ export class TwitterPlatformService
   };
 
   readonly capabilities = new Set<TPlatformCapability>(['title', 'viewerCount']);
+  readonly liveDockFeatures = new Set<TLiveDockFeature>([
+    'refresh-chat-streaming',
+    'chat-streaming',
+  ]);
   readonly apiBase = 'https://api.x.com/2';
   readonly domain = 'https://x.com';
   readonly platform = 'twitter';