Deploying to gh-pages from @ 7ebdc6d 🚀

BarryCarlyon · Jul 29, 2024 · ac0b826 · ac0b826
1 parent eb83675
commit ac0b826
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 16 deletions.
diff --git a/panel/broadcaster.js b/panel/broadcaster.js
@@ -0,0 +1,35 @@
+sendchat.addEventListener('submit', (e) => {
+    e.preventDefault();
+
+    sendChat();
+});
+
+async function sendChat() {
+    master_log('Sending Chat Message');
+
+    let req = await fetch(
+        'https://api.twitch.tv/helix/extensions/chat',
+        {
+            method: 'POST',
+            headers: {
+                ...gojwt,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                broadcaster_id: channelId,
+                text: 'Test message',
+                extension_id: gojwt['Client-ID'],
+                extension_version: extensionVersion
+            })
+        }
+    );
+
+    //master_log(`Sent Chat Message: ${req.status}`);
+    if (req.status == 204) {
+        master_log('Send Chat Message OK');
+        return;
+    }
+    master_log(`Failed to send chat message: ${req.status}`);
+    let data = await req.json();
+    master_log(`Response: ${data.message}`);
+}
diff --git a/panel/index.html b/panel/index.html
@@ -23,42 +23,56 @@
             <option value="helix_page">Helix Page</option>
             <option value="config_page">Config Page</option>
             <option value="bits_page">Bits Page</option>
+            <option value="broadcaster_page">Broadcaster Page</option>
         </select>
         <div id="pages">
             <div id="main_page" class="page active">
                 <h2>Main Data</h2>
 
+                <p>Iterating Various Things</p>
+
                 <div id="buttons">
                     <p>Actions</p>
-                    <button id="share">Login/Logout</button>
+                    <button title="window.Twitch.ext.actions.requestIdShare" id="share">Login/Logout</button>
                 </div>
 
                 <table>
-                    <tr><td>onAuthorized</td><td id="onAuthorized"></td></tr>
-                    <tr><td>isLinked</td><td id="isLinked"></td></tr>
+                    <tr><td>onAuthorized</td><td>LastAt: <span id="onAuthorized"></span></td></tr>
+                    <tr><td>isLinked</td><td>Viewer Shared: <span id="isLinked"></span></td></tr>
                 </table>
 
-                <p>onAuthorized Data</p>
+                <h2>Callbacks</h2>
+
+                <p>window.Twitch.ext.onAuthorized Data</p>
+                <p>Iterates the onAuthorized callback</p>
                 <table id="onAuthorizedData"><tr><td>NoData</td></tr></table>
-                <p>context data</p>
-                <table id="context"><tr><td>NoData</td></tr></table>
+                <p>window.Twitch.ext.onContext data</p>
+                <p>Iterates the onContext callback</p>
+                <table id="onContext"><tr><td>NoData</td></tr></table>
 
-                <p>onHighlightChanged data</p>
+                <p>window.Twitch.ext.onHighlightChanged data</p>
+                <p>Video Overlay and Component only</p>
                 <table id="onHighlightChanged"><tr><td>NoData</td></tr></table>
-                <p>onVisibilityChanged data</p>
+                <p>window.Twitch.ext.onVisibilityChanged data</p>
+                <p>When extension is hidden/reshown</p>
                 <table id="onVisibilityChanged"><tr><td>NoData</td></tr></table>
 
                 <p>features/featureflags data</p>
+                <p>Iterates <pre>window.Twitch.ext.features</pre></p>
                 <table id="features"><tr><td>NoData</td></tr></table>
                 <p>features/featureflags onchanged data</p>
+                <p>Iterates the <pre>window.Twitch.ext.features.onChanged</pre> callback</p>
                 <table id="features_onchanged"><tr><td>NoData</td></tr></table>
 
                 <p>viewer data</p>
+                <p>Iterates the <pre>window.Twitch.ext.viewer</pre> object</p>
                 <table id="viewer"><tr><td>NoData</td></tr></table>
                 <p>viewer onchanged data</p>
+                <p>Iterates the <pre>window.Twitch.ext.viewer.onChanged</pre> object when it occurs</p>
                 <table id="viewer_onchanged"><tr><td>NoData</td></tr></table>
 
                 <p>Query Params</p>
+                <p>Iterate the Query parameters passed to the extension <a href="https://dev.twitch.tv/docs/extensions/reference/#client-query-parameters" target=_blank">Read More</a></p>
                 <div id="query_params"></div>
             </div>
 
@@ -71,8 +85,11 @@ <h2>PubSub Data</h2>
             </div>
 
             <div id="helix_page" class="page">
+                <p>Testing <a href="https://dev.twitch.tv/docs/extensions/frontend-api-usage/" target="_blank">Frontend API Usage</a></a></p>
+                <p>Using the helix token to get the channel the extension is on data from <a href="https://dev.twitch.tv/docs/api/reference/#get-users" target="_blank">Get Users</a></a></p>
                 <h2>Helix Data Channel</h2>
                 <div id="helix_log_channel"></div>
+                <p>Using the helix token to get the viewer of the extension data, if logged in from <a href="https://dev.twitch.tv/docs/api/reference/#get-users" target="_blank">Get Users</a></a></p>
                 <h2>Helix Data User</h2>
                 <div id="helix_log_user"></div>
             </div>
@@ -128,6 +145,19 @@ <h4>A Receipt</h4>
                 <div id="bits_products_count"></div>
                 <div id="bits_products"></div>
             </div>
+
+            <div id="broadcaster_page" class="page">
+                <form id="sendchat">
+                    <div>
+                        <label>Message</label>
+                        <input type="text" name="chatmessage">
+                    </div>
+                    <div>
+                        <input type="submit" />
+                    </div>
+                    <div id="sendchatresponse"></div>
+                </form>
+            </div>
         </div>
     </div>
 
@@ -139,6 +169,8 @@ <h4>A Receipt</h4>
     <script src="helix.js"></script>
     <script src="bits.js"></script>
 
+    <script src="broadcaster.js"></script>
+
     <script src="config_service.js"></script>
 </body>
 </html>
diff --git a/panel/script.js b/panel/script.js
@@ -25,6 +25,12 @@ iterateObject(document.getElementById('query_params'), p);
 master_log('Read query_params');
 
 let helix = false;
+let gojwt = false;
+let channelId = false;
+// this has to be hardcoded
+// it's hardcoded for my test build/test
+let extensionVersion = '0.0.3';
+
 window.Twitch.ext.onAuthorized((auth) => {
     master_log('Read onAuthorized');
     document.getElementById('onAuthorized').textContent = new Date();
@@ -37,13 +43,18 @@ window.Twitch.ext.onAuthorized((auth) => {
             'Authorization': 'Extension ' + auth.helixToken
         }
     }
+    gojwt = {
+        'Client-ID': auth.clientId,
+        'Authorization': 'Bearer ' + auth.token
+    }
+    channelId = auth.channelId;
 
     if (window.Twitch.ext.viewer.isLinked) {
-        document.getElementById('isLinked').textContent = 'isLinked';
+        document.getElementById('isLinked').textContent = 'Shared';
     } else {
-        document.getElementById('isLinked').textContent = 'isUnLinked';
+        document.getElementById('isLinked').textContent = 'Not Shared';
     }
-    master_log('Read isLinked');
+    master_log('Read window.Twitch.ext.viewer.isLinked');
 
     iterateObject(document.getElementById('viewer'), window.Twitch.ext.viewer);
     window.Twitch.ext.viewer.onChanged(() => {
@@ -74,7 +85,12 @@ window.Twitch.ext.onAuthorized((auth) => {
 window.Twitch.ext.onContext((ctx) => {
     console.log(ctx);
     // don't master log coz SPAM
-    iterateObject(document.getElementById('context'), ctx);
+    iterateObject(document.getElementById('onContext'), ctx);
+    if (ctx.theme == 'dark') {
+        document.body.classList.add('twitch_dark');
+    } else {
+        document.body.classList.remove('twitch_dark');
+    }
 });
 window.Twitch.ext.onError((err) => {
     master_log('Read onError! Check console');

diff --git a/panel/style.css b/panel/style.css
@@ -4,17 +4,15 @@ html, body, #content {
     left: 0px;
     right: 0px;
     bottom: 0px;
-    font-size: 20px;
 }
 #content {
     overflow: scroll;
 }
 body {
-
     background: #EEEEEE;
     color: #111111;
 
-    font-size: 20px;
+    font-size: 14px;
     font-family: Verdana;
 }
 body.twitch_dark {
@@ -34,7 +32,7 @@ body.twitch_dark {
     width: 100%;
 }
 
-#pagecontrol {
+select, input, label {
     width: 100%;
     display: block;
 }