more twitch comannds (#535)

* Fix using spaces in filter - prevent toggling the filter

* add more twitch scopes for more commands + Twitch Command-Block: Announcement

* Twitch Command-Block: Clear Chat

* Twitch Command-Block: Start Commercial, Create Marker, Change Chat Settings

* Improve UI of Command Blocks (and Settings)

Author: negue

projects/action-variables-ui/src/lib/action-variable-input/action-variable-input.component.html

@@ -27,7 +27,8 @@
   <ng-container *ngSwitchCase="'boolean'">
     <mat-slide-toggle [checked]="!!value"
                       (change)="value = $event.checked; valueChanged.emit($event.checked)">
-      {{label}}
+      <strong *ngIf="boldLabel">{{label}}</strong>
+      <ng-container *ngIf="!boldLabel">{{label}}</ng-container>
     </mat-slide-toggle>
   </ng-container>
 

projects/action-variables-ui/src/lib/action-variable-input/action-variable-input.component.scss

@@ -0,0 +1,5 @@
+:host(.full-width){
+  mat-form-field {
+    width: 100%
+  }
+}

projects/action-variables-ui/src/lib/action-variable-input/action-variable-input.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
+import {Component, EventEmitter, HostBinding, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
 import {DialogService} from "../../../../../src/app/shared/dialogs/dialog.service";
 import {ActionAssigningMode} from "@memebox/contracts";
 import {BehaviorSubject, combineLatest} from "rxjs";
@@ -22,6 +22,13 @@ export class ActionVariableInputComponent implements OnInit, OnChanges {
   @Input()
   public value: unknown;
 
+  @Input()
+  public boldLabel: boolean;
+
+  @Input()
+  @HostBinding('class.full-width')
+  public fullWidth: boolean;
+
   @Output()
   public readonly valueChanged = new EventEmitter<unknown>();
 

projects/contracts/src/lib/constants.ts

@@ -104,9 +104,72 @@ export const TWITCH_BOT_RESPONSE_CONSTS = {
 
 export const TWITCH_CLIENT_ID = 'zmqh0d2kwa9r24eecywm5uhhryggm4';
 
-export const DEFAULT_TWITCH_SCOPES = [
-  // 'user:read:email',            // ???
-  'chat:read',                     // TMI - Chat
-  'chat:edit',                     // TMI - Write to chat?
-  'channel:read:redemptions',      // PubSub Channelpoints Event
+export interface TwitchScopeMetadata {
+  scope: string;
+  features: string[];
+}
+
+export const DEFAULT_TWITCH_SCOPES: TwitchScopeMetadata[] = [
+  {
+    scope: 'chat:read',
+    features: [
+      'Listening to chat messages ...duh'
+    ]
+  },
+  {
+    scope: 'chat:edit',
+    features: [
+      'Writing in the Chat'
+    ]
+  },
+  {
+    scope: 'channel:read:redemptions',
+    features:[
+      'Trigger: Channel Point Redemption'
+    ]
+  },
+  {
+    // https://dev.twitch.tv/docs/api/reference#send-chat-announcement
+    scope: 'moderator:manage:announcements',
+    features: [
+      'Ability to write Chat Announcements'
+    ]
+  },
+  {
+    // https://dev.twitch.tv/docs/api/reference#delete-chat-messages
+    scope: 'moderator:manage:chat_messages',
+    features: [
+      'Clear the chat'
+    ]
+  },
+  {
+    // https://dev.twitch.tv/docs/api/reference#start-commercial
+    scope: 'channel:edit:commercial',
+    features: [
+      'Start Commercial'
+    ]
+  },
+  /*{
+    // https://dev.twitch.tv/docs/api/reference#start-a-raid
+    scope: 'channel:manage:raids',
+    features: [
+      'Start a raid'
+    ]
+  },*/
+  {
+    // https://dev.twitch.tv/docs/api/reference#create-stream-marker
+    scope: 'channel:manage:broadcast',
+    features: [
+      'Create Stream Marker'
+    ]
+  },
+  {
+    // https://dev.twitch.tv/docs/api/reference#update-chat-settings
+    scope: 'moderator:manage:chat_settings',
+    features: [
+      'Update Chat Settings: Slow, Sub only, Follower only, Unique'
+    ]
+  }
 ];
+
+export const DEFAULT_TWITCH_SCOPE_LIST = DEFAULT_TWITCH_SCOPES.map(s => s.scope);

projects/recipe-core/src/lib/command-blocks.generic.ts

@@ -17,7 +17,7 @@ export function registerGenericCommandBlocks(
     ],
     toScriptCode: (step, context) => `sleep.secondsAsync(${step.payload.seconds});`,
     commandEntryLabelAsync: (queries, payload, parentStep) => {
-      return Promise.resolve(`sleep: ${payload.seconds} seconds`);
+      return Promise.resolve(`wait ${payload.seconds} seconds`);
     },
     entryIcon: () => 'hourglass_top'
   };
@@ -35,7 +35,7 @@ export function registerGenericCommandBlocks(
     ],
     toScriptCode: (step, context) => `sleep.msAsync(${step.payload.ms});`,
     commandEntryLabelAsync: (queries, payload, parentStep) => {
-      return Promise.resolve(`sleep: ${payload.ms}ms`);
+      return Promise.resolve(`wait ${payload.ms}ms`);
     },
     entryIcon: () => 'hourglass_top'
   };

projects/recipe-core/src/lib/command-blocks.twitch.ts

@@ -1,24 +1,11 @@
 import {RecipeCommandBlockRegistry} from "./recipe.types";
 
-/*
- * Announcements: moderator:manage:announcements
- * https://dev.twitch.tv/docs/api/reference#send-chat-announcement
- *
- * Clear chat: moderator:manage:chat_messages
- * https://dev.twitch.tv/docs/api/reference#delete-chat-messages
- *
- * Start Commercial: channel:edit:commercial
- * https://dev.twitch.tv/docs/api/reference#start-commercial
+/* Command Block Ideas
  *
  * Start a Raid: channel:manage:raids
  * https://dev.twitch.tv/docs/api/reference#start-a-raid
- *
- * Create Stream Marker: channel:manage:broadcast
- * https://dev.twitch.tv/docs/api/reference#create-stream-marker
- *
- * Chat Settings: moderator:manage:chat_settings
- * https://dev.twitch.tv/docs/api/reference#update-chat-settings
- * Slow, Sub only, Follower only, unique
+ * Dependency:
+ *    Resolve BroadcasterID based on a username
  */
 
 export function registerTwitchCommandBlocks (
@@ -30,7 +17,7 @@ export function registerTwitchCommandBlocks (
     configArguments: [
       {
         name: "text",
-        label: "Message to say",
+        label: "Message to write",
         type: "textarea"
       }
     ],
@@ -42,7 +29,177 @@ export function registerTwitchCommandBlocks (
     commandEntryLabelAsync: (queries, payload) => {
       const textToSay = payload.text as string;
 
-      return Promise.resolve('Twitch: Say: '+ textToSay);
-    }
+      return Promise.resolve('Write in Chat: '+ textToSay);
+    },
+    entryIcon: () => 'twitch',
+  };
+
+  // https://dev.twitch.tv/docs/api/reference#send-chat-announcement
+  registry['twitch:sendAnnouncement'] = {
+    pickerLabel: "Send a Chat Announcement",
+    commandGroup: "twitch",
+    configArguments: [
+      {
+        name: "text",
+        label: "Announcement to send",
+        type: "textarea"
+      },
+      {
+        name: "color",
+        label: "Color of this announcement",
+        type: "selectionStatic",
+        defaultSelected: 'primary',
+        entries: [
+          {
+            id: 'primary',
+            label: 'Primary',
+
+          },
+          {
+            id: 'blue',
+            label: 'Blue',
+          },
+          {
+            id: 'green',
+            label: 'Green',
+          },
+          {
+            id: 'orange',
+            label: 'Orange',
+          },
+          {
+            id: 'purple',
+            label: 'Purple',
+          }
+        ]
+      }
+    ],
+    toScriptCode: (step) => {
+      const textToSay = step.payload.text as string;
+      const color = step.payload.color as string;
+
+      return `twitch.sendAnnouncement('${textToSay}','${color}');`;
+    },
+    commandEntryLabelAsync: (queries, payload) => {
+      const textToSay = payload.text as string;
+      const color = payload.color as string;
+
+      return Promise.resolve(`${color} Announcement: ${textToSay}`);
+    },
+    entryIcon: () => 'twitch',
+  };
+
+  // https://dev.twitch.tv/docs/api/reference#delete-chat-messages
+  registry['twitch:clearChat'] = {
+    pickerLabel: "Clear Chat",
+    commandGroup: "twitch",
+    configArguments: [],
+    toScriptCode: () => {
+      return `twitch.clearChat();`;
+    },
+    commandEntryLabelAsync: (queries, payload) => {
+      return Promise.resolve(`Clear Chat`);
+    },
+    entryIcon: () => 'twitch',
+  };
+
+
+  // https://dev.twitch.tv/docs/api/reference#start-commercial
+  registry['twitch:startCommercial'] = {
+    pickerLabel: "Start Commercial",
+    commandGroup: "twitch",
+    configArguments: [
+      {
+        name: "length",
+        label: "Commercial Length",
+        type: "selectionStatic",
+        defaultSelected: '30',
+        entries: [
+          {
+            id: '30',
+            label: '30 Seconds',
+          },
+          {
+            id: '60',
+            label: '60 Seconds',
+          },
+          {
+            id: '90',
+            label: '90 Seconds',
+          },
+          {
+            id: '120',
+            label: '120 Seconds',
+          },
+          {
+            id: '150',
+            label: '150 Seconds',
+          },
+          {
+            id: '180',
+            label: '180 Seconds',
+          }
+        ]
+      }
+    ],
+    toScriptCode: (command) => {
+      const length = command.payload.length as string;
+      return `twitch.startCommercial(${+length});`;
+    },
+    commandEntryLabelAsync: (queries, payload) => {
+      const length = payload.length as string;
+      return Promise.resolve(`Start Commercial for ${length} Seconds`);
+    },
+    entryIcon: () => 'twitch',
+  };
+
+  // https://dev.twitch.tv/docs/api/reference#create-stream-marker
+  registry['twitch:createMarker'] = {
+    pickerLabel: "Create Marker",
+    commandGroup: "twitch",
+    configArguments: [],
+    toScriptCode: () => {
+      return `twitch.createMarker();`;
+    },
+    commandEntryLabelAsync: (queries, payload) => {
+      return Promise.resolve(`Create Marker`);
+    },
+    entryIcon: () => 'twitch',
+  };
+
+  // https://dev.twitch.tv/docs/api/reference#update-chat-settings
+  registry['twitch:changeChatSettings'] = {
+    pickerLabel: "Change Chat Settings",
+    commandGroup: "twitch",
+    configArguments: [
+      {
+        name: "emote_mode",
+        label: "Emote Mode",
+        type: "boolean"
+      },   {
+        name: "follower_mode",
+        label: "Follower Mode",
+        type: "boolean"
+      },   {
+        name: "slow_mode",
+        label: "Slow Mode",
+        type: "boolean"
+      },   {
+        name: "subscriber_mode",
+        label: "Subscriber Mode",
+        type: "boolean"
+      },   {
+        name: "unique_chat_mode",
+        label: "Unique Chatter Mode",
+        type: "boolean"
+      },
+    ],
+    toScriptCode: (step) => {
+      return `twitch.updateChatSettings(${JSON.stringify(step.payload)});`;
+    },
+    commandEntryLabelAsync: (queries, payload) => {
+      return Promise.resolve(`Update Chat Settings`);
+    },
+    entryIcon: () => 'twitch',
   };
 }

projects/recipe-core/src/lib/recipeStepConfigArgument.ts

@@ -21,6 +21,12 @@ export interface RecipeStepConfigNumberArgument extends RecipeStepConfigArgument
   type: 'number';
 }
 
+export interface RecipeStepConfigStaticSelectionArgument extends RecipeStepConfigArgument {
+  type: 'selectionStatic';
+  entries: {id: string, label: string}[];
+  defaultSelected: string;
+}
+
 export interface RecipeStepConfigActionArgument extends RecipeStepConfigArgument {
   type: 'action';
   flags: {
@@ -46,6 +52,7 @@ export interface RecipeStepConfigObsFilterArgument extends RecipeStepConfigArgum
 export type RecipeStepConfigArguments =
   RecipeStepConfigBooleanArgument |RecipeStepConfigTextArgument|
   RecipeStepConfigTextareaArgument|RecipeStepConfigNumberArgument|
+  RecipeStepConfigStaticSelectionArgument|
   RecipeStepConfigActionArgument|RecipeStepConfigActionListArgument|
 RecipeStepConfigObsSceneArgument|RecipeStepConfigObsSourceArgument|
   RecipeStepConfigObsFilterArgument

projects/recipe-ui/src/lib/command-setting-dialog/action-list-settings/action-list-settings.component.scss

@@ -36,3 +36,8 @@
 .type-of-selection {
   margin-right: 1rem;
 }
+
+mat-card-title {
+  min-width: 250px;
+  max-width: 400px;
+}

projects/recipe-ui/src/lib/command-setting-dialog/action-selection/action-selection.component.scss

@@ -3,3 +3,7 @@
     display: flex;
   }
 }
+
+mat-form-field {
+  width: 100%;
+}