feat(uploader): Optionally link match videos on The Blue Alliance (#57)

Co-authored-by: Evan Strat <[email protected]>
gafirst · Oct 16, 2023 · b4073f8 · b4073f8
1 parent dc9c496
commit b4073f8
Show file tree

Hide file tree

Showing 22 changed files with 330 additions and 37 deletions.
diff --git a/client/src/components/matches/MatchVideoListItem.vue b/client/src/components/matches/MatchVideoListItem.vue
@@ -15,6 +15,11 @@
              color="error"
              size="large"
       />
+      <VIcon v-else-if="video.uploaded && !matchStore.postUploadStepsSucceeded(video)"
+             icon="mdi-alert"
+             color="warning"
+             size="large"
+      />
       <VIcon v-else-if="video.uploaded"
              icon="mdi-cloud-check-variant"
              color="success"
@@ -82,7 +87,28 @@ const uploadStatus = computed(() => {
 });
 
 const subtitle = computed(() => {
-  return `${uploadStatus.value} | ${props.video.path}`;
+  let postUploadStatus = "";
+  let playlistStatus = "";
+  let tbaStatus = "";
+  if (props.video.postUploadSteps) {
+    const playlist = props.video.postUploadSteps.addToYouTubePlaylist;
+    const tba = props.video.postUploadSteps.linkOnTheBlueAlliance;
+
+    if (playlist && tba) {
+      postUploadStatus = "Post-upload steps completed | ";
+    } else {
+      if (!playlist) {
+        playlistStatus = "Add to YouTube playlist failed | ";
+      }
+
+      if (!tba) {
+        tbaStatus = "TBA link failed | ";
+      }
+      postUploadStatus = `${playlistStatus}${tbaStatus}`;
+    }
+  }
+
+  return `${uploadStatus.value} | ${postUploadStatus}${props.video.path}`;
 });
 </script>
 <style scoped>

diff --git a/client/src/components/matches/MatchVideosUploader.vue b/client/src/components/matches/MatchVideosUploader.vue
@@ -40,6 +40,14 @@
         An error occurred while fetching the video description for this match. You may want to confirm its accuracy
         before uploading.
       </VAlert>
+      <VAlert v-if="matchStore.allMatchVideosUploaded"
+              color="success"
+              variant="tonal"
+              icon="mdi-check-circle"
+              class="mt-2 mb-4"
+      >
+        All videos uploaded!
+      </VAlert>
       <VBtn :color="settingsStore.settings?.sandboxModeEnabled ? 'warning' : 'success'"
             size="large"
             :prepend-icon="matchStore.uploadInProgress ? 'mdi-loading mdi-spin' : ''"

diff --git a/client/src/stores/match.ts b/client/src/stores/match.ts
@@ -103,6 +103,7 @@ export const useMatchStore = defineStore("match", () => {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
+        matchKey: selectedMatchKey.value,
         videoPath: video.path,
         videoTitle: video.videoTitle,
         label: video.videoLabel ?? "Unlabeled",
@@ -118,6 +119,7 @@ export const useMatchStore = defineStore("match", () => {
       video.uploaded = true;
       video.youTubeVideoId = result.videoId;
       video.youTubeVideoUrl = `https://www.youtube.com/watch?v=${result.videoId}`;
+      video.postUploadSteps = result.postUploadSteps;
       video.uploadError = "";
     } else {
       // Catches if the server returns parameter validation errors
@@ -183,9 +185,17 @@ export const useMatchStore = defineStore("match", () => {
   }
 
   const allowMatchUpload = computed(() => {
-    return uploadInProgress.value && matchVideos.value.length || !descriptionLoading.value || description.value;
+    return !uploadInProgress.value
+      && matchVideos.value.length
+      && !descriptionLoading.value
+      && description.value
+      && !allMatchVideosUploaded.value;
   });
 
+  function postUploadStepsSucceeded (video: MatchVideoInfo): boolean {
+    return !!video.postUploadSteps?.addToYouTubePlaylist && !!video.postUploadSteps?.linkOnTheBlueAlliance;
+  }
+
   return {
     advanceMatch,
     allMatchVideosUploaded,
@@ -199,6 +209,7 @@ export const useMatchStore = defineStore("match", () => {
     matchVideos,
     matchVideosLoading,
     matches,
+    postUploadStepsSucceeded,
     selectMatch,
     selectedMatchKey,
     uploadInProgress,

diff --git a/client/src/types/IObfuscatedSecrets.ts b/client/src/types/IObfuscatedSecrets.ts
@@ -3,5 +3,7 @@ export interface IObfuscatedSecrets {
     googleAccessToken: boolean,
     googleRefreshToken: boolean,
     theBlueAllianceReadApiKey: boolean,
+    theBlueAllianceTrustedApiAuthId: boolean,
+    theBlueAllianceTrustedApiAuthSecret: boolean,
     [key: string]: boolean,
 }
diff --git a/client/src/types/ISettings.ts b/client/src/types/ISettings.ts
@@ -10,6 +10,7 @@ export interface ISettings {
   googleAuthStatus: string,
   sandboxModeEnabled: boolean,
   youTubeVideoPrivacy: string,
+  linkVideosOnTheBlueAlliance: boolean;
   [key: string]: string | boolean,
 }
 

diff --git a/client/src/types/MatchVideoInfo.ts b/client/src/types/MatchVideoInfo.ts
@@ -8,4 +8,8 @@ export interface MatchVideoInfo {
     uploadError: string | null;
     youTubeVideoId: string | null;
     youTubeVideoUrl: string | null;
+    postUploadSteps: {
+      addToYouTubePlaylist: boolean;
+      linkOnTheBlueAlliance: boolean;
+    } | null;
 }
diff --git a/client/src/types/MatchVideoUploadInfo.ts b/client/src/types/MatchVideoUploadInfo.ts
diff --git a/client/src/views/Settings.vue b/client/src/views/Settings.vue
@@ -57,14 +57,67 @@
         />
 
         <h2 class="mt-4">The Blue Alliance (TBA)</h2>
+        <h3>Read API</h3>
         <AutosavingTextInput :key="`theBlueAllianceReadApiKey-${dataRefreshKey}`"
                              :on-submit="submit"
                              initial-value=""
                              name="theBlueAllianceReadApiKey"
                              label="TBA read API key"
                              input-type="password"
                              setting-type="secret"
-                             :help-text="theBlueAllianceReadApiKeyHelpText"
+                             :help-text="tbaReadApiKeyHelpText"
+        />
+
+        <h3 class="mt-2">Trusted (write) API</h3>
+        <p>
+          You can use TBA's trusted API to associate uploaded videos with matches on TBA. To use this feature,
+          you must request write tokens for your event on
+          <a href="https://www.thebluealliance.com/request/apiwrite/">
+            https://www.thebluealliance.com/request/apiwrite/
+          </a>
+        </p>
+
+        <p class="mt-4">Link match videos on TBA</p>
+        <AutosavingBtnSelectGroup :choices="['On', 'Off']"
+                                  :default-value="settingsStore.settings?.linkVideosOnTheBlueAlliance ? 'On' : 'Off'"
+                                  :loading="savingTbaLinkVideos"
+                                  @on-choice-selected="saveTbaLinkVideos"
+        />
+
+        <VAlert v-if="!settingsStore.settings?.linkVideosOnTheBlueAlliance"
+                color="info"
+                variant="tonal"
+                class="mt-4 mb-4"
+        >
+          Before you can enter your TBA trusted API auth ID and secret, you need to enable this feature using the
+          toggle above.
+        </VAlert>
+
+        <AutosavingTextInput v-if="
+                               settingsStore.settings?.linkVideosOnTheBlueAlliance"
+                             :key="`theBlueAllianceTrustedApiAuthId-${dataRefreshKey}`"
+                             :on-submit="submit"
+                             initial-value=""
+                             name="theBlueAllianceTrustedApiAuthId"
+                             label="TBA trusted API auth ID"
+                             input-type="password"
+                             setting-type="secret"
+                             :help-text="settingsStore.obfuscatedSecrets?.theBlueAllianceTrustedApiAuthId ?
+                               'Current value hidden' :
+                               ''"
+        />
+
+        <AutosavingTextInput v-if="settingsStore.settings?.linkVideosOnTheBlueAlliance"
+                             :key="`theBlueAllianceTrustedApiAuthSecret-${dataRefreshKey}`"
+                             :on-submit="submit"
+                             initial-value=""
+                             name="theBlueAllianceTrustedApiAuthSecret"
+                             label="TBA trusted API auth secret"
+                             input-type="password"
+                             setting-type="secret"
+                             :help-text="settingsStore.obfuscatedSecrets?.theBlueAllianceTrustedApiAuthId ?
+                               'Current value hidden' :
+                               ''"
         />
 
         <h2 class="mt-4">
@@ -228,7 +281,17 @@ async function saveUploadPrivacy(value: string): Promise<void> {
   savingUploadPrivacy.value = false;
 }
 
-const theBlueAllianceReadApiKeyHelpText = computed((): string => {
+// TODO(Evan): Move into its own component
+const savingTbaLinkVideos = ref(false);
+
+async function saveTbaLinkVideos(value: string): Promise<void> {
+  savingTbaLinkVideos.value = true;
+  await submit("linkVideosOnTheBlueAlliance", value === "On", "setting");
+  await refreshData(false);
+  savingTbaLinkVideos.value = false;
+}
+
+const tbaReadApiKeyHelpText = computed((): string => {
   const baseText = "Generate a read API key from your account page on The Blue Alliance.";
 
   if (settingsStore.obfuscatedSecrets?.theBlueAllianceReadApiKey) {

diff --git a/server/package.json b/server/package.json
@@ -57,7 +57,7 @@
     "@types/jasmine": "^4.3.2",
     "@types/mock-fs": "^4.13.1",
     "@types/morgan": "^1.9.4",
-    "@types/node": "^18.15.11",
+    "@types/node": "^20.8.6",
     "@types/node-fetch": "2",
     "@types/supertest": "^2.0.12",
     "@typescript-eslint/eslint-plugin": "5.43.0",

diff --git a/server/settings/secrets.example.json b/server/settings/secrets.example.json
@@ -1 +1,9 @@
-{"googleClientSecret":  "", "googleAccessToken":  "", "googleRefreshToken":  "","theBlueAllianceReadApiKey":  ""}
+{
+  "googleClientSecret": "",
+  "googleAccessToken": "",
+  "googleRefreshToken": "",
+  "googleTokenExpiry": "",
+  "theBlueAllianceReadApiKey": "",
+  "theBlueAllianceTrustedApiAuthId": "",
+  "theBlueAllianceTrustedApiAuthSecret": ""
+}
diff --git a/server/settings/settings.example.json b/server/settings/settings.example.json
@@ -1 +1,11 @@
-{"eventName":"Demo Event","eventTbaCode":"","videoSearchDirectory":"./videos","googleClientId":"","googleAuthStatus":"Not started", "sandboxModeEnabled": true, "playoffsType":"Double elimination playoff", "youTubeVideoPrivacy": "private"}
+{
+  "eventName": "Demo Event",
+  "eventTbaCode": "",
+  "videoSearchDirectory": "./videos",
+  "googleClientId": "",
+  "googleAuthStatus": "Not started",
+  "sandboxModeEnabled": true,
+  "playoffsType": "Double elimination playoff",
+  "youTubeVideoPrivacy": "private",
+  "linkVideosOnTheBlueAlliance": false
+}
diff --git a/server/spec/tests/repos/JsonStorageRepo.spec.ts b/server/spec/tests/repos/JsonStorageRepo.spec.ts
@@ -9,6 +9,10 @@ const sampleSettings: ISettings = {
   videoSearchDirectory: "./videos",
   googleAuthStatus: "",
   googleClientId: "",
+  playoffsType: "Double elimination playoff",
+  sandboxModeEnabled: false,
+  youTubeVideoPrivacy: "private",
+  linkVideosOnTheBlueAlliance: false,
 };
 
 describe("readSettingsJson", () => {

diff --git a/server/spec/tests/repos/MatchKey.spec.ts b/server/spec/tests/repos/MatchKey.spec.ts
diff --git a/server/spec/tests/repos/TbaTrustedApi.spec.ts b/server/spec/tests/repos/TbaTrustedApi.spec.ts
@@ -0,0 +1,18 @@
+import { TheBlueAllianceTrustedRepo } from "@src/repos/TheBlueAllianceTrustedRepo";
+
+describe("TBA request signature", () => {
+    it("should be correct for a sample request", () => {
+        // This tests the signature for the sample request listed on https://www.thebluealliance.com/apidocs/trusted/v1
+        // These API credentials are NOT real.
+
+        const fakeAuthId = "rosssssssssss";
+        const fakeAuthSecret =
+            "ExqeZK3Gbo9v95YnqmsiADzESo9HNgyhIOYSMyRpqJqYv13EazNRaDIPPJuOXrQp"; // This is NOT a real secret!
+        const tbaTrustedRepo = new TheBlueAllianceTrustedRepo(fakeAuthId, fakeAuthSecret);
+
+        const path = "/api/trusted/v1/event/2014casj/matches/delete";
+        const body = JSON.stringify(["qm1"]);
+
+        expect(tbaTrustedRepo.generateRequestSignature(path, body)).toBe("ca5c3e5c1b0e7132e4af13f805eca0be");
+    });
+});
diff --git a/server/src/models/MatchKey.ts b/server/src/models/MatchKey.ts
@@ -48,21 +48,46 @@ class MatchKey {
         );
     }
 
-    get matchKey(): string {
+    private generateMatchKey(includeEventInfo = true): string {
         // TODO: We should add tests to ensure this value is correct
         const compLevel = abbreviatedCompLevel(this.compLevel);
         const setNumber = this.setNumber === null ? "" : this.setNumber;
 
-        return `${this.year}${this.eventCode}_${compLevel}${setNumber}m${this.matchNumber}`;
+        const eventInfo = includeEventInfo ? `${this.year}${this.eventCode}_` : "";
+
+        return `${eventInfo}${compLevel}${setNumber}m${this.matchNumber}`;
+    }
+
+    /**
+     * Compute the event key for this match. Example: 2020gadal
+     */
+    get eventKey(): string {
+        return `${this.year}${this.eventCode}`;
+    }
+
+    /**
+     * Get the full match key for this match. Example: 2020gadal_qm1
+     */
+    get matchKey(): string {
+        return this.generateMatchKey(true);
+    }
+
+    /**
+     * Compute the match number portion of the match key. Used for The Blue Alliance's trusted (write) API, which
+     * refers to this as a partial match key.
+     * Example: qm1
+     */
+    get partialMatchKey(): string {
+        return this.generateMatchKey(false);
     }
 
     /**
      * Get the playoff round for this match, if we're able to calculate it.
      *
      * @returns The playoff round, or null if:
-     * - The match is a qualification match
-     * - There is no set number for the match
-     * - The match is a playoff match, but the playoffs type is not double elimination
+     * - The match is a qualification match, or
+     * - There is no set number for the match, or
+     * - The match is a playoff match, but the playoffs type is not double elimination.
      */
     get playoffsRound(): number | null {
         if (this.playoffsType === PlayoffsType.DoubleElimination && this.compLevel === CompLevel.Semifinal &&

diff --git a/server/src/models/Settings.ts b/server/src/models/Settings.ts
@@ -7,6 +7,7 @@ export interface ISettings {
     playoffsType: string,
     sandboxModeEnabled: boolean,
     youTubeVideoPrivacy: string,
+    linkVideosOnTheBlueAlliance: boolean;
 }
 
 export type SettingsKey = keyof ISettings;
@@ -17,6 +18,8 @@ export interface ISecretSettings {
     googleRefreshToken: string,
     googleTokenExpiry: string,
     theBlueAllianceReadApiKey: string,
+    theBlueAllianceTrustedApiAuthId: string,
+    theBlueAllianceTrustedApiAuthSecret: string,
     [key: string]: string,
 }
 

diff --git a/server/src/models/YouTubePostUploadSteps.ts b/server/src/models/YouTubePostUploadSteps.ts
@@ -1,4 +1,6 @@
 export interface YouTubePostUploadSteps {
     // Indicates if the video was successfully added to the YouTube playlist corresponding to the video's label
     addToYouTubePlaylist: boolean,
+    // Indicates if the video was successfully associated with the match to the Blue Alliance
+    linkOnTheBlueAlliance: boolean,
 }