Twitch Auth: Improve custom scopes handling (#486)

Author: negue

CHANGELOG.md

@@ -3,18 +3,14 @@
 ### Feature
 
 * [x] Show Errors in the Dashboard - incl. a way to create a GitHub Issue from that
-* [ ] Ability to re-authenticate even when you are not in the normal ports
+* [x] Twitch Auth: Improve custom scopes handling (if any were already configured, these will be always applied)
 * [ ] Tell the Streamer with warnings / dialogs that the Token will expire in X Days
-* [ ] Twitch Auth: Improve custom scopes handling
+* [ ] Ability to re-authenticate even when you are not in the normal ports
 
-* [ ] Recipe: more Twitch Command Blocks: Announce, Clear Chat, Start Commercial, Create Stream Marker, Slow Mode, Chat Settings
 * [ ] Recipe: more Obs Command Blocks: TBD
 * [ ] if easy/fast todo: Support for new OBS-websocket(.js) v5
 
-### Misc
 
-* [ ] Added a Twitch Raid Script Example
-* [ ] Recipe Example: Panic Button
 
 ## 2022.1-beta2
 

README.md

@@ -167,19 +167,7 @@ See finished and upcoming changes in:
 - [CHANGELOG.md](CHANGELOG.md)
 - [`Milestone 2022.1`](https://github.com/negue/meme-box/milestone/5)
 
-### 2022.2
-* [ ] Labels on or around the Media, each with their own Position / Animation
-  * [ ] Changeable by Trigger Variables
-  * [ ] Can be placed like in the Arrange View
-* [ ] OBS Websockets
-  * [ ] Screen Arrange View gets the current OBS-Scene as Background to move stuff around
-* [ ] Overview of local media files not existing anymore
-* [ ] Replace all selected Trigger Action with an inline Recipes #439
-
-### Future, if you want to help open a PR :)
-* [ ] Change media options by triggered variables (e.g. different style, or something)
-* [ ] Stats per commands / media / or something last cheerer and so on
-* [ ] more to be added :)
+### [Future Version](ROADMAP.md)
 
 ## How to help / contribute?
 * Improve Docs / Translations

ROADMAP.md

@@ -0,0 +1,24 @@
+This list might be changed in future, depending on the amount of work that needs to be done for these Features.
+
+### 2022.2 and later
+* [ ] Labels on or around the Media, each with their own Position / Animation
+  * [ ] Changeable by Trigger Variables
+  * [ ] Can be placed like in the Arrange View
+* [ ] OBS Websockets
+  * [ ] Screen Arrange View gets the current OBS-Scene as Background to move stuff around
+* [ ] Overview of local media files not existing anymore
+* [ ] Replace all selected Trigger Action with an inline Recipes #439
+* [ ] Recipe: more Twitch Command Blocks: Announce, Clear Chat, Start Commercial, Create Stream Marker, Slow Mode, Chat Settings
+  * [ ] Dependency: Twitch Scope System - for Scripts and Command Block Checks
+
+### Misc
+
+* [ ] Added a Twitch Raid Script Example
+  * [ ] Dependency: Twitch Scope System
+* [ ] Recipe Example: Panic Button
+  * [ ] Dependency: Twitch Scope System & New Command Blocks
+
+### Future, if you want to help open a PR :)
+* [ ] Change media options by triggered variables (e.g. different style, or something)
+* [ ] Stats per commands / media / or something last cheerer and so on
+* [ ] more to be added :)

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

@@ -1,5 +1,26 @@
 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
+ *
+ * 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
+ */
+
 export function registerTwitchCommandBlocks (
   registry: RecipeCommandBlockRegistry
 ): void {

src/app/shared/dialogs/twitch-connection-edit/twitch-connection-edit.component.html

@@ -84,7 +84,7 @@ <h4>Twitch Main:
             mat-stroked-button color="primary"
             class="auth-buttons"
             (click)="tryAuthentication('main', true)" >
-            Auth with Twitch (custom scopes)
+            Config: Custom Scopes
           </button>
         </div>
 

src/app/shared/dialogs/twitch-connection-edit/twitch-connection-edit.component.ts

@@ -175,8 +175,8 @@ export class TwitchConnectionEditComponent implements OnInit {
     });
   }
 
-  async tryAuthentication(type: string, withCustomScope = false) {
-    if (withCustomScope) {
+  async tryAuthentication(type: string, showCustomScopeConfig = false) {
+    if (showCustomScopeConfig) {
       const newScopes = await this.dialogService.openTwitchScopeSelection({
         scopes: this._customScopes
       });
@@ -216,9 +216,7 @@ export class TwitchConnectionEditComponent implements OnInit {
     }
 
     const scopesForThisToken = [...DEFAULT_TWITCH_SCOPES];
-    if (withCustomScope) {
-      scopesForThisToken.push(...this._customScopes);
-    }
+    scopesForThisToken.push(...this._customScopes);
 
     const oauthHandler = new TwitchOAuthHandler(
       TWITCH_CLIENT_ID, scopesForThisToken.join('+'), currentUrl, true

src/app/shared/dialogs/twitch-scope-selection/twitch-scope-selection.component.scss

@@ -10,7 +10,11 @@ mat-dialog-actions {
   flex: 1;
 }
 
-gewd-markdown {
-  display: block;
-  min-height: 360px;
+.scope-row {
+  display: flex;
+  align-items: center;
+
+  mat-form-field {
+    flex: 1;
+  }
 }