Merge pull request #150 from LordTocs/tocs

UI Improvements, Analytics, Read Me, and First Time Setup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "castmate",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0",
   "private": "true",
   "description": "CastMate is a broadcaster tool that allows Twitch viewers to interact with a broadcasters stream components through Chat Commands, Channel Point rewards, and more.",
   "author": "LordTocs & FitzBro",

src/components/automations/AutomationFullInput.vue

@@ -103,10 +103,12 @@ export default {
   },
   computed: {
     isInline() {
-      return this.value instanceof Object;
+      return this.value instanceof Object || !this.value;
     },
     actions() {
-      if (this.isInline) {
+      if (!this.value) {
+        return [];
+      } else if (this.isInline) {
         return this.value.actions;
       } else if (this.loadedAutomation) {
         return this.loadedAutomation.actions;

src/components/triggers/TriggerEditModal.vue

@@ -112,11 +112,13 @@ export default {
         automation: null,
       };
       this.localTriggerType = _cloneDeep(this.triggerType);
+      this.trackAnalytic("openTrigger");
       this.dialog = true;
     },
     async apply() {
       await this.$refs.automationInput.saveAutomation();
       this.$emit("mapping", this.localTriggerType, this.localMapping);
+      this.trackAnalytic("saveTrigger", { type: this.localTriggerType });
       this.dialog = false;
     },
     cancel() {

src/components/triggers/TriggerList.vue

@@ -69,7 +69,9 @@
       </v-alert>
     </v-card-text>
     <v-card-actions>
-      <v-btn @click="$refs.addModal.open()"> Add Trigger </v-btn>
+      <v-btn @click="$refs.addModal.open()" color="primary">
+        Add Trigger
+      </v-btn>
     </v-card-actions>
     <trigger-edit-modal
       header="Add Trigger"

src/components/wizard/WelcomeDialog.vue

@@ -89,22 +89,39 @@
       </v-card-text>
       <v-card-text v-if="stage == 'done'">
         <span class="text-h5">
-          CastMate uses a profile system to set up "Triggers". Triggers let you
-          set what should happen when certain events occurs. Events such as a
-          chat command, a raid, someone follows, or someone subscribes.
-        </span>
-        <img src="../../assets/triggers.png" style="width: 98%; height: auto"/>
-        <hr class="my-2"/>
-        <span class="text-h5">
-          CastMate uses "Automations" to determine what should happen when a
-          trigger is activated. Automations are a sequence of actions. Actions
-          are things like playing a sound, toggling an OBS filter, changing your
-          lights color, or running text to speech.
+          CastMate uses "Triggers" to run automations based on viewer
+          activities. Triggers are grouped together in "Profiles". Profiles can
+          be set to automatically enable and disable the whole group of
+          triggers. To get you started, we've created the main profile for you.
+          <br />
+          <br />
+          Try adding a new trigger to it. When you add a trigger, on the left
+          you can specify when you'd like the automation to run. In the center
+          you can put the actions you'd like to happen. Actions are things like
+          playing a sound, toggling an OBS filter, changing your lights color,
+          or running text to speech.
         </span>
+        <p class="text-h5 text-center my-5">
+          For more help join our discord!
+          <v-btn
+            x-large
+            link
+            to="https://discord.gg/txt4DUzYJM"
+            target="_blank"
+            color="#5865F2"
+            class="mx-5"
+          >
+            <v-icon> mdi-discord </v-icon> Discord
+          </v-btn>
+        </p>
+        <hr class="my-3" />
         <img
-          src="../../assets/automation.png"
+          src="../../assets/new-trigger.png"
           style="width: 98%; height: auto"
         />
+        <hr class="my-3" />
+        <img src="../../assets/triggers.png" style="width: 98%; height: auto" />
+
       </v-card-text>
       <v-card-actions v-if="stage != 'welcome' && stage != 'done'">
         <v-btn small @click="moveNext"> Skip </v-btn>
@@ -115,7 +132,7 @@
       </v-card-actions>
       <v-card-actions v-if="stage == 'done'">
         <v-spacer />
-        <v-btn x-large color="primary" @click="cancel"> Get Creating </v-btn>
+        <v-btn x-large color="primary" @click="finish"> Get Creating </v-btn>
         <v-spacer />
       </v-card-actions>
     </v-card>
@@ -127,6 +144,7 @@ import { mapGetters } from "vuex";
 import Twitch from "../plugins/twitch.vue";
 import ObsSettings from "./ObsSettings.vue";
 import { isFirstRun } from "../../utils/firstRun";
+import { createNewProfile, profileExists } from "../../utils/fileTools";
 export default {
   components: { Twitch, ObsSettings },
   data() {
@@ -155,6 +173,11 @@ export default {
     open() {
       this.dialog = true;
     },
+    async createMainProfile() {
+      if (!(await profileExists("Main"))) {
+        await createNewProfile("Main");
+      }
+    },
     moveNext() {
       if (this.stage == "welcome") {
         this.stage = "twitch";
@@ -166,12 +189,17 @@ export default {
       }
       if (this.stage == "obs") {
         this.stage = "done";
+        this.createMainProfile();
         return;
       }
     },
     cancel() {
       this.dialog = false;
     },
+    finish() {
+      this.dialog = false;
+      this.$router.push("/profiles/Main");
+    },
   },
   async mounted() {
     if (await isFirstRun(this.paths.userFolder)) {

src/core/plugins/kofi.js

@@ -47,7 +47,7 @@ module.exports = {
 			config: {
 				type: Object,
 				properties: {
-					amount: { type: "Range", name: "Currency Donated" },
+					amount: { type: "Range", name: "Currency Donated", default: { min: 0} },
 				}
 			},
 			context: {

src/core/plugins/obs.js

@@ -57,6 +57,7 @@ module.exports = {
 		});
 		this.obs.on("StreamStarted", () => {
 			this.state.streaming = true;
+			this.analytics.track("goLive");
 		})
 		this.obs.on("StreamStopped", () => {
 			this.state.streaming = false;

src/core/plugins/time.js

@@ -111,8 +111,8 @@ module.exports = {
 			config: {
 				type: Object,
 				properties: {
-					delay: { type: "Duration", name: "Delay" },
-					interval: { type: "Duration", name: "Interval" },
+					delay: { type: "Duration", name: "Delay", default: "" },
+					interval: { type: "Duration", name: "Interval", default: "" },
 				}
 			},
 			context: {

src/core/plugins/twitch.js

@@ -923,7 +923,7 @@ module.exports = {
 			config: {
 				type: Object,
 				properties: {
-					months: { type: "Range", name: "Months Subbed" },
+					months: { type: "Range", name: "Months Subbed", default: { min: 1 } },
 				},
 			},
 			context: {
@@ -945,7 +945,7 @@ module.exports = {
 			config: {
 				type: Object,
 				properties: {
-					subs: { type: "Range", name: "Subs Gifted" },
+					subs: { type: "Range", name: "Subs Gifted", default: { min: 1 } },
 				},
 			},
 			context: {
@@ -964,7 +964,7 @@ module.exports = {
 			config: {
 				type: Object,
 				properties: {
-					bits: { type: "Range", name: "Bits Cheered" },
+					bits: { type: "Range", name: "Bits Cheered", default: { min: 1 } },
 				},
 			},
 			context: {
@@ -986,7 +986,7 @@ module.exports = {
 			config: {
 				type: Object,
 				properties: {
-					raiders: { type: "Range", name: "Raiders" },
+					raiders: { type: "Range", name: "Raiders", default: { min: 1 } },
 				},
 			},
 			context: {

src/views/About.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { app } from "@electron/remote/main";
+import { app } from "@electron/remote";
 import { ipcRenderer } from "electron";
 import WelcomeDialog from "../components/wizard/WelcomeDialog.vue";
 export default {
@@ -54,6 +54,7 @@ export default {
     },
   },
   mounted() {
+    app
     this.version = app.getVersion();
   },
 };