feat(tts): trigger TTS on higlighted message

Makefile

@@ -22,6 +22,7 @@ patch:
 	# How to create node_modules patch: https://opensource.christmas/2019/4
 	patch --forward node_modules/twitch-js/types/index.d.ts < patches/twitch-js-types.patch
 	patch --forward node_modules/twitch-js/types/index.d.ts < patches/twitch-js-types-2.patch
+	patch --forward node_modules/twitch-js/types/index.d.ts < patches/twitch-js-add-highlight-msgId.patch
 
 eslint:
 	@echo -ne "\n\t ----- Checking eslint\n"

d.ts/index.d.ts

@@ -1,4 +1,5 @@
 type UserStateTags = import('twitch-js').UserStateTags;
+type KnownNoticeMessageIds = import('twitch-js').KnownNoticeMessageIds;
 
 type DiscordJsTextChannel = import('discord.js').TextChannel;
 type DiscordJsUser = import('discord.js').User;
@@ -149,7 +150,7 @@ interface CommandResponse {
 }
 
 interface CommandOptions {
-  sender: UserStateTags & { userId: number } & {
+  sender: UserStateTags & { userId: number; msgId?: KnownNoticeMessageIds } & {
     discord?: { author: DiscordJsUser; channel: DiscordJsTextChannel };
   };
   command: string;

locales/en/ui/overlays/texttospeech.json

@@ -7,6 +7,7 @@
     },
     "volume": "Volume",
     "rate": "Rate",
-    "pitch": "Pitch"
+    "pitch": "Pitch",
+    "triggerTTSByHighlightedMessage": "Text to Speech will be triggered by highlighted message"
   }
 }

patches/twitch-js-add-highlight-msgId.patch

@@ -0,0 +1,12 @@
+--- node_modules/twitch-js/types/index.d.ts	1985-10-26 10:15:00.000000000 +0200
++++ patches/index.d.ts	2020-05-10 01:22:11.660551000 +0200
+@@ -402,7 +402,8 @@
+     TIMEOUT_SUCCESS = "timeout_success",
+     UNBAN_SUCCESS = "unban_success",
+     UNRAID_SUCCESS = "unraid_success",
+-    UNRECOGNIZED_CMD = "unrecognized_cmd"
++    UNRECOGNIZED_CMD = "unrecognized_cmd",
++    HIGHLIGHTED_MESSAGE = "highlighted-message"
+ }
+ declare const NoticeEvents: DistributeKeys<typeof KnownNoticeMessageIds>;
+ declare type NoticeEvents = keyof typeof NoticeEvents;

src/bot/overlays/textToSpeech.ts

@@ -1,6 +1,6 @@
 import Overlay from './_interface';
 
-import { command, default_permission, settings, ui } from '../decorators';
+import { command, default_permission, parser, settings, ui } from '../decorators';
 
 import { default as ResponsiveVoice } from '../integrations/responsivevoice';
 import { permission } from '../helpers/permissions';
@@ -46,6 +46,12 @@ class TextToSpeech extends Overlay {
   })
   @settings('settings')
   pitch = 1.0;
+  @ui({
+    type: 'toggle-enable',
+    if: () => ResponsiveVoice.key.trim().length > 0,
+  })
+  @settings('settings')
+  triggerTTSByHighlightedMessage = false;
 
   @ui({
     type: 'link',
@@ -68,6 +74,19 @@ class TextToSpeech extends Overlay {
     });
     return [];
   }
+
+
+  /**
+   * Parsers text to speech
+   * Inspired by: https://discordapp.com/channels/317348946144002050/317349069024395264/707237020342419507
+   * @param opts
+   */
+  @parser({ fireAndForget: true })
+  async checkTriggerTTSByHighlightedMessage(opts: ParserOptions) {
+    if (opts.sender.msgId && opts.sender.msgId === 'highlighted-message' && this.triggerTTSByHighlightedMessage) {
+      this.textToSpeech({ parameters: opts.message, command: '!tts', createdAt: Date.now(), sender: opts.sender, attr: {} });
+    }
+  }
 }
 
 export default new TextToSpeech();

src/panel/views/managers/commands/commands-list.vue

@@ -109,7 +109,6 @@ import { CommandsInterface } from 'src/bot/database/entity/commands';
 @Component({
   components: {
     loading: () => import('../../../components/loading.vue'),
-    toggle: () => import('../../../components/toggle-enable.vue'),
     'text-with-tags': () => import('../../../components/textWithTags.vue'),
     'hold-button': () => import('../../../components/holdButton.vue'),
   },

src/panel/views/registries/text-overlay/text-overlay-list.vue

@@ -86,7 +86,6 @@ import 'prismjs/themes/prism.css'
 @Component({
   components: {
     'loading': () => import('../../../components/loading.vue'),
-    'toggle-enable': () => import('../../../components/toggle-enable.vue'),
     'hold-button': () => import('../../../components/holdButton.vue'),
     'prism': Prism,
   },

src/panel/components/toggle-enable.vue → src/panel/views/settings/components/interface/toggle-enable.vue

@@ -12,9 +12,9 @@
     <button
       :disabled="disabled"
       class="btn form-control"
-      v-bind:class="{'btn-success': this.value, 'btn-danger': !this.value}"
+      v-bind:class="{'btn-success': currentValue, 'btn-danger': !currentValue}"
       v-on:click="update()">
-      <template v-if="this.value">{{ translate('enabled') }}</template>
+      <template v-if="currentValue">{{ translate('enabled') }}</template>
       <template v-else>{{ translate('disabled') }}</template>
     </button>
   </div>
@@ -29,8 +29,11 @@ export default class toggleEnable extends Vue {
   @Prop() readonly title: any;
   @Prop() readonly disabled !: boolean;
 
+  currentValue = this.value;
+
   update() {
-    this.$emit('update', !this.value);
+    this.currentValue = !this.currentValue
+    this.$emit('update', { value: this.currentValue });
   }
 }
 </script>

src/panel/views/settings/interface.vue

@@ -268,7 +268,7 @@ enum State {
     'textarea-from-array': () => import('./components/interface/textarea-from-array.vue'),
     'uuid-generator': () => import('./components/interface/uuid-generator.vue'),
     'voice': () => import('./components/interface/voice.vue'),
-    'toggle-enable': () => import('../../components/toggle-enable.vue'),
+    'toggle-enable': () => import('./components/interface/toggle-enable.vue'),
     }
 })
 export default class interfaceSettings extends Vue {