Add action to start commercial

server/src/actions/set-title.js

@@ -6,7 +6,6 @@ module.exports = {
     /***
      * @param {ActionSuccessCallback} success
      * @param {ActionErrorCallback} error
-     * @param {PredictionAction} predictionAction
      * @param {number?} autoLockAfter
      * @param {ClientData} client
      * @param {CacheGetFunction} get
@@ -15,8 +14,7 @@ module.exports = {
      * @returns {Promise<void>}
      */
     // eslint-disable-next-line no-empty-pattern
-    async handler(success, error, { predictionAction, autoLockAfter = 120 }, { client }, { get, auth }) {
-
+    async handler(success, error, { }, { client }, { get, auth }) {
         const broadcast = await get(client?.broadcast?.[0]);
         if (!broadcast) return error("No broadcast associated");
         if (!broadcast.channel) return error("No channel associated with broadcast");

server/src/actions/start-commercial.js

@@ -0,0 +1,44 @@
+const { ApiClient } = require("@twurple/api");
+const { StaticAuthProvider } = require("@twurple/auth");
+module.exports = {
+    key: "start-commercial",
+    auth: ["client"],
+    requiredParams: ["commercialDuration"],
+    /***
+     * @param {ActionSuccessCallback} success
+     * @param {ActionErrorCallback} error
+     * @param {30 | 60 | 90 | 120 | 150 | 180} commercialDuration
+     * @param {ClientData} client
+     * @param {CacheGetFunction} get
+     * @param {CacheAuthFunctions} auth
+     * @param {SimpleUpdateRecord} updateRecord
+     * @returns {Promise<void>}
+     */
+    // eslint-disable-next-line no-empty-pattern
+    async handler(success, error, { commercialDuration }, { client, user }, { get, auth }) {
+        if (!user.airtable?.website_settings?.includes("Full broadcast permissions")) return error("You don't have permission to start a commercial", 403);
+
+        const broadcast = await get(client?.broadcast?.[0]);
+        if (!broadcast) return error("No broadcast associated");
+        if (!broadcast.channel) return error("No channel associated with broadcast");
+
+        const channel = await auth.getChannel(broadcast?.channel?.[0]);
+        if (!channel.twitch_refresh_token) return error("No twitch auth token associated with channel");
+        if (!channel.channel_id || !channel.name || !channel.twitch_scopes) return error("Invalid channel data");
+        let scopes = channel.twitch_scopes.split(" ");
+        if (!["channel:edit:commercial"].every(scope => scopes.includes(scope))) return error("Token doesn't have the required scopes");
+
+        const accessToken = await auth.getTwitchAccessToken(channel);
+
+        const authProvider = new StaticAuthProvider(process.env.TWITCH_CLIENT_ID, accessToken);
+        const api = new ApiClient({authProvider});
+
+        try {
+            await api.channels.startChannelCommercial(channel.channel_id, commercialDuration);
+        } catch (e) {
+            console.log(e);
+            return error("Failed to start commercial");
+        }
+        return success();
+    }
+};

website/src/components/website/dashboard/Commercials.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="mt-2">
+        <b-button-group>
+            <b-button class="label-button"><i class="fas fa-fw fa-dollar-sign"></i> Start Commercial</b-button>
+            <b-button @click="commercial(30)">30s</b-button>
+            <b-button @click="commercial(60)">1m</b-button>
+            <b-button @click="commercial(90)">1m30</b-button>
+            <b-button @click="commercial(120)">2m</b-button>
+            <b-button @click="commercial(150)">2m30</b-button>
+            <b-button @click="commercial(180)">3m</b-button>
+        </b-button-group>
+
+    </div>
+</template>
+
+<script>
+import { startCommercial } from "@/utils/dashboard";
+import { BButton, BButtonGroup } from "bootstrap-vue";
+
+export default {
+    name: "Commercials",
+    props: ["client"],
+    components: { BButton, BButtonGroup },
+    methods: {
+        async commercial(commercialDuration) {
+            await startCommercial(this.$root.auth, "self", commercialDuration);
+        }
+    }
+};
+</script>
+
+<style scoped>
+.label-button {
+    pointer-events: none;
+}
+</style>

website/src/utils/dashboard.js

@@ -45,6 +45,14 @@ export async function managePred(auth, client, predictionAction) {
     });
 }
 
+export async function startCommercial(auth, client, commercialDuration) {
+    if (!auth?.user) return { error: true, errorMessage: "Not authenticated" };
+    return await authenticatedRequest(auth, "actions/start-commercial", {
+        client: client.id || client,
+        commercialDuration
+    });
+}
+
 export async function updateAutomaticTitle(auth, client) {
     if (!auth?.user) return { error: true, errorMessage: "Not authenticated" };
     return await authenticatedRequest(auth, "actions/set-title", {

website/src/views/Dashboard.vue

@@ -13,6 +13,7 @@
             <MatchEditor :match="liveMatch"></MatchEditor>
         </div>
         <Predictions v-if="liveMatch" :client="client"/>
+        <Commercials v-if="hasPermission('Full broadcast permissions')" :client="client" />
         <b-button class="mt-2" variant="secondary" @click="updateTitle">
             <i class="fal fa-fw fa-wand-magic mr-1"></i>Update title
         </b-button>
@@ -28,10 +29,11 @@ import MatchEditor from "@/components/website/dashboard/MatchEditor";
 import { BButton, BFormCheckbox } from "bootstrap-vue";
 import { togglePlayerCams, updateAutomaticTitle } from "@/utils/dashboard";
 import Predictions from "@/components/website/dashboard/Predictions";
+import Commercials from "@/components/website/dashboard/Commercials";
 
 export default {
     name: "Dashboard",
-    components: { Predictions, MatchEditor, MatchThumbnail, BroadcastSwitcher, BFormCheckbox, BButton },
+    components: { Commercials, Predictions, MatchEditor, MatchThumbnail, BroadcastSwitcher, BFormCheckbox, BButton },
     computed: {
         user() {
             if (!this.$root.auth.user?.airtableID) return {};
@@ -74,9 +76,11 @@ export default {
     methods: {
         url,
         togglePlayerCams,
-
         async updateTitle() {
             await updateAutomaticTitle(this.$root.auth, "self", "create");
+        },
+        hasPermission(permission) {
+            return (this.user.website_settings || []).includes(permission);
         }
     }
 };