Automatic Discord webhook screenshots

src-electron/util/app-settings.ts

@@ -95,6 +95,8 @@ export type Settings = {
     openOnUpload: boolean;
     uploadUnlisted: boolean;
     includeRegion: boolean;
+    uploadDiscord: boolean;
+    discordWebhook: string;
   };
   damageMeter: {
     functionality: {
@@ -187,6 +189,8 @@ const defaultSettings: Settings = {
     openOnUpload: false,
     uploadUnlisted: true,
     includeRegion: false,
+    uploadDiscord: false,
+    discordWebhook: "",
   },
   damageMeter: {
     functionality: {

src/components/SettingsPage/UploadPage.vue

@@ -107,6 +107,49 @@
       </q-item-section>
     </q-item>
 
+    <q-item
+      :disable="settingsStore.settings.uploads.discordWebhook.length == 0"
+      tag="label"
+    >
+      <q-item-section side top>
+        <q-checkbox
+          v-model="settingsStore.settings.uploads.uploadDiscord"
+          :disable="settingsStore.settings.uploads.discordWebhook.length == 0"
+        />
+      </q-item-section>
+
+      <q-item-section>
+        <q-item-label>
+          Upload Screenshot to Discord
+        </q-item-label>
+        <q-item-label caption>
+          Automatically upload a screenshot of the meter to a Discord webhook
+          after each encounter.
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item tag="label">
+      <q-item-section left>
+        <q-item-label>Discord Webhook</q-item-label>
+        <q-item-label caption>
+          A Discord webhook URL to upload screenshots to.<br/>
+          Go to a Discord Channel's settings, then "Integrations", then
+          "Webhooks", then "New Webhook".
+        </q-item-label>
+      </q-item-section>
+      <q-item-section right>
+        <q-input
+          v-model="discordWebhook"
+          type=text
+          label="Discord Webhook URL"
+          clearable
+          @clear="discordWebhook = ''"
+        >
+        </q-input>
+      </q-item-section>
+    </q-item>
+
     <q-separator spaced />
 
     <q-item tag="label">
@@ -195,6 +238,7 @@ const settingsStore = useSettingsStore();
 
 const isPwd = ref(true);
 const uploadKey = ref("");
+const discordWebhook = ref("");
 const showAdvanced = ref(false);
 
 window.messageApi.receive("settings-changed", (value) => {
@@ -206,8 +250,14 @@ watch(uploadKey, (newVal, oldVal) => {
   settingsStore.settings.uploads.uploadKey = newVal;
 });
 
+watch(discordWebhook, (newVal, oldVal) => {
+  if (newVal.length == 0) settingsStore.settings.uploads.uploadDiscord = false;
+  settingsStore.settings.uploads.discordWebhook = newVal;
+});
+
 onMounted(() => {
   uploadKey.value = settingsStore.settings.uploads.uploadKey;
+  discordWebhook.value = settingsStore.settings.uploads.discordWebhook;
 });
 /**
  * @param {'api' | 'site' | 'endpoint'} type

src/layouts/DamageMeter.vue

@@ -127,6 +127,19 @@
         </div>
       </div>
       <div v-if="!isTakingScreenshot" style="margin-left: auto">
+        <q-btn
+          v-if="!isMinimized && settingsStore.settings.uploads.discordWebhook.length !== 0"
+          round
+          icon="discord"
+          @click="toggleDiscordScreenshot"
+          flat
+          :glossy=settingsStore.settings.uploads.uploadDiscord
+          size="sm"
+        >
+          <q-tooltip ref="discordScreenshotTooltip">
+            Toggle Discord screenshot upload
+          </q-tooltip>
+        </q-btn>
         <q-btn
           v-if="!isMinimized"
           round
@@ -299,6 +312,8 @@ import { useSettingsStore } from "src/stores/settings";
 import DamageMeterTable from "src/components/DamageMeter/DamageMeterTable.vue";
 import { DamageType } from "src/util/helpers";
 
+import axios from "axios";
+
 const logoImg = new URL("../assets/images/logo.png", import.meta.url).href;
 
 const settingsStore = useSettingsStore();
@@ -396,6 +411,73 @@ async function takeScreenshot() {
   });
 }
 
+function toggleDiscordScreenshot() {
+  settingsStore.settings.uploads.uploadDiscord =
+    !settingsStore.settings.uploads.uploadDiscord;
+  settingsStore.saveSettings();
+}
+
+let lastScreenshotPacket = 0;
+async function uploadDiscordScreenshot() {
+  const oldDamageType = damageType.value;
+  damageType.value = "dmg";
+  isTakingScreenshot.value = true;
+  await sleep(600);
+  if (damageMeterRef.value === null) return;
+  const screenshot = await html2canvas(damageMeterRef.value, {
+    backgroundColor: "#121212",
+  });
+
+  screenshot.toBlob(
+    (blob) => {
+      if (!blob) return;
+
+      let msg = sessionState.value.currentBoss?.name || "No Boss";
+      msg += "\n";
+      msg += "Uploaded by ";
+      msg += sessionState.value.localPlayer || "Unknown";
+
+      void axios.postForm(
+        settingsStore.settings.uploads.discordWebhook,
+        {
+          "payload_json": JSON.stringify({
+            content: msg,
+            attachments: [{
+              id: 0,
+              filename: "screenshot.png",
+              content_type: "image/png",
+            }]
+          }),
+          "files[0]": blob,
+        }
+      );
+
+    },
+    "image/png",
+    1
+  );
+
+  damageType.value = oldDamageType;
+
+  isTakingScreenshot.value = false;
+  Notify.create({
+    message: "<center>Screenshot sent to Discord.</center>",
+    color: "primary",
+    html: true,
+    actions: [
+      {
+        label: "Dismiss",
+        color: "white",
+        handler: () => {
+          /* ... */
+        },
+      },
+    ],
+  });
+
+  return "Screenshot sent to Discord."
+}
+
 function requestSessionRestart() {
   window.messageApi.send("window-to-main", { message: "reset-session" });
 }
@@ -526,6 +608,18 @@ onMounted(() => {
             });
           }
         }
+
+        if (
+          !isMinimized.value &&
+          settingsStore.settings.uploads.uploadDiscord &&
+          sessionState.value.currentBoss && // Only upload bosses
+          sessionState.value.lastCombatPacket !== lastScreenshotPacket && // No repeat uploads
+          sessionState.value.lastCombatPacket -
+            sessionState.value.currentBoss.lastUpdate < 3000 // Avoids uploading trash mobs
+          ) {
+            lastScreenshotPacket = sessionState.value.lastCombatPacket;
+            void uploadDiscordScreenshot()
+        }
       }
     } else {
       Notify.create({

src/stores/settings.ts

@@ -52,6 +52,8 @@ export const useSettingsStore = defineStore("settings", {
         openOnUpload: false,
         uploadUnlisted: true,
         includeRegion: false,
+        uploadDiscord: false,
+        discordWebhook: "",
       },
       damageMeter: {
         functionality: {