Abstracted play functions, added auto-play/stop on toggle ↞ [auto-sync from https://github.com/adamlui/ai-web-extensions/tree/main/chatgpt-auto-talk]

kudo-sync-bot · kudo-sync-bot · commit 78cd988a958b · 2025-10-04T22:19:40.000-07:00
diff --git a/chatgpt/chatgpt-auto-talk/chatgpt-auto-talk.user.js b/chatgpt/chatgpt-auto-talk/chatgpt-auto-talk.user.js
@@ -225,7 +225,7 @@
 // @description:zu      Dlala izimpendulo ze-ChatGPT ngokuzenzakalela
 // @author              Adam Lui
 // @namespace           https://github.com/adamlui
-// @version             2025.10.4.1
+// @version             2025.10.4.2
 // @license             MIT
 // @icon                data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%22180%22%20fill=%22none%22%3E%3Cstyle%3E:root%7B--primary-fill:%23000;--secondary-fill:%23fff;%7D@media%20(prefers-color-scheme:dark)%7B:root%7B--primary-fill:%23fff;--secondary-fill:%23000;%7D%7D%3C/style%3E%3Cg%20clip-path=%22url(%23a)%22%3E%3Crect%20width=%22180%22%20height=%22180%22%20fill=%22var(--primary-fill)%22%20rx=%2290%22/%3E%3Cg%20clip-path=%22url(%23b)%22%3E%3Cpath%20fill=%22var(--secondary-fill)%22%20d=%22M75.91%2073.628V62.232c0-.96.36-1.68%201.199-2.16l22.912-13.194c3.119-1.8%206.838-2.639%2010.676-2.639%2014.394%200%2023.511%2011.157%2023.511%2023.032%200%20.839%200%201.799-.12%202.758l-23.752-13.914c-1.439-.84-2.879-.84-4.318%200L75.91%2073.627Zm53.499%2044.383v-27.23c0-1.68-.72-2.88-2.159-3.719L97.142%2069.55l9.836-5.638c.839-.48%201.559-.48%202.399%200l22.912%2013.195c6.598%203.839%2011.035%2011.995%2011.035%2019.912%200%209.116-5.397%2017.513-13.915%2020.992v.001Zm-60.577-23.99-9.836-5.758c-.84-.48-1.2-1.2-1.2-2.16v-26.39c0-12.834%209.837-22.55%2023.152-22.55%205.039%200%209.716%201.679%2013.676%204.678L70.993%2055.516c-1.44.84-2.16%202.039-2.16%203.719v34.787-.002Zm21.173%2012.234L75.91%2098.339V81.546l14.095-7.917%2014.094%207.917v16.793l-14.094%207.916Zm9.056%2036.467c-5.038%200-9.716-1.68-13.675-4.678l23.631-13.676c1.439-.839%202.159-2.038%202.159-3.718V85.863l9.956%205.757c.84.48%201.2%201.2%201.2%202.16v26.389c0%2012.835-9.957%2022.552-23.27%2022.552v.001Zm-28.43-26.75L47.72%20102.778c-6.599-3.84-11.036-11.996-11.036-19.913%200-9.236%205.518-17.513%2014.034-20.992v27.35c0%201.68.72%202.879%202.16%203.718l29.989%2017.393-9.837%205.638c-.84.48-1.56.48-2.399%200Zm-1.318%2019.673c-13.555%200-23.512-10.196-23.512-22.792%200-.959.12-1.919.24-2.879l23.63%2013.675c1.44.84%202.88.84%204.32%200l30.108-17.392v11.395c0%20.96-.361%201.68-1.2%202.16l-22.912%2013.194c-3.119%201.8-6.837%202.639-10.675%202.639Zm29.748%2014.274c14.515%200%2026.63-10.316%2029.39-23.991%2013.434-3.479%2022.071-16.074%2022.071-28.91%200-8.396-3.598-16.553-10.076-22.43.6-2.52.96-5.039.96-7.557%200-17.153-13.915-29.99-29.989-29.99-3.239%200-6.358.48-9.477%201.56-5.398-5.278-12.835-8.637-20.992-8.637-14.515%200-26.63%2010.316-29.39%2023.991-13.434%203.48-22.07%2016.074-22.07%2028.91%200%208.396%203.598%2016.553%2010.075%2022.431-.6%202.519-.96%205.038-.96%207.556%200%2017.154%2013.915%2029.989%2029.99%2029.989%203.238%200%206.357-.479%209.476-1.559%205.397%205.278%2012.835%208.637%2020.992%208.637Z%22/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id=%22a%22%3E%3Cpath%20d=%22M0%200h180v180H0z%22/%3E%3C/clipPath%3E%3CclipPath%20id=%22b%22%3E%3Cpath%20d=%22M29.487%2029.964h121.035v119.954H29.487z%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E
 // @icon64              data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%22180%22%20fill=%22none%22%3E%3Cstyle%3E:root%7B--primary-fill:%23000;--secondary-fill:%23fff;%7D@media%20(prefers-color-scheme:dark)%7B:root%7B--primary-fill:%23fff;--secondary-fill:%23000;%7D%7D%3C/style%3E%3Cg%20clip-path=%22url(%23a)%22%3E%3Crect%20width=%22180%22%20height=%22180%22%20fill=%22var(--primary-fill)%22%20rx=%2290%22/%3E%3Cg%20clip-path=%22url(%23b)%22%3E%3Cpath%20fill=%22var(--secondary-fill)%22%20d=%22M75.91%2073.628V62.232c0-.96.36-1.68%201.199-2.16l22.912-13.194c3.119-1.8%206.838-2.639%2010.676-2.639%2014.394%200%2023.511%2011.157%2023.511%2023.032%200%20.839%200%201.799-.12%202.758l-23.752-13.914c-1.439-.84-2.879-.84-4.318%200L75.91%2073.627Zm53.499%2044.383v-27.23c0-1.68-.72-2.88-2.159-3.719L97.142%2069.55l9.836-5.638c.839-.48%201.559-.48%202.399%200l22.912%2013.195c6.598%203.839%2011.035%2011.995%2011.035%2019.912%200%209.116-5.397%2017.513-13.915%2020.992v.001Zm-60.577-23.99-9.836-5.758c-.84-.48-1.2-1.2-1.2-2.16v-26.39c0-12.834%209.837-22.55%2023.152-22.55%205.039%200%209.716%201.679%2013.676%204.678L70.993%2055.516c-1.44.84-2.16%202.039-2.16%203.719v34.787-.002Zm21.173%2012.234L75.91%2098.339V81.546l14.095-7.917%2014.094%207.917v16.793l-14.094%207.916Zm9.056%2036.467c-5.038%200-9.716-1.68-13.675-4.678l23.631-13.676c1.439-.839%202.159-2.038%202.159-3.718V85.863l9.956%205.757c.84.48%201.2%201.2%201.2%202.16v26.389c0%2012.835-9.957%2022.552-23.27%2022.552v.001Zm-28.43-26.75L47.72%20102.778c-6.599-3.84-11.036-11.996-11.036-19.913%200-9.236%205.518-17.513%2014.034-20.992v27.35c0%201.68.72%202.879%202.16%203.718l29.989%2017.393-9.837%205.638c-.84.48-1.56.48-2.399%200Zm-1.318%2019.673c-13.555%200-23.512-10.196-23.512-22.792%200-.959.12-1.919.24-2.879l23.63%2013.675c1.44.84%202.88.84%204.32%200l30.108-17.392v11.395c0%20.96-.361%201.68-1.2%202.16l-22.912%2013.194c-3.119%201.8-6.837%202.639-10.675%202.639Zm29.748%2014.274c14.515%200%2026.63-10.316%2029.39-23.991%2013.434-3.479%2022.071-16.074%2022.071-28.91%200-8.396-3.598-16.553-10.076-22.43.6-2.52.96-5.039.96-7.557%200-17.153-13.915-29.99-29.989-29.99-3.239%200-6.358.48-9.477%201.56-5.398-5.278-12.835-8.637-20.992-8.637-14.515%200-26.63%2010.316-29.39%2023.991-13.434%203.48-22.07%2016.074-22.07%2028.91%200%208.396%203.598%2016.553%2010.075%2022.431-.6%202.519-.96%205.038-.96%207.556%200%2017.154%2013.915%2029.989%2029.99%2029.989%203.238%200%206.357-.479%209.476-1.559%205.397%205.278%2012.835%208.637%2020.992%208.637Z%22/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath%20id=%22a%22%3E%3Cpath%20d=%22M0%200h180v180H0z%22/%3E%3C/clipPath%3E%3CclipPath%20id=%22b%22%3E%3Cpath%20d=%22M29.487%2029.964h121.035v119.954H29.487z%22/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E
@@ -625,15 +625,77 @@
         }
     }
 
+    // Define PLAY functions
+
+    function getLastMoreOptionsBtn() {
+        const moreOptionsBtns = document.querySelectorAll(btnSelectors.moreOptions)
+        return moreOptionsBtns[moreOptionsBtns.length -1]
+    }
+
+    function getTalkingMsgDiv() {
+        return getLastMoreOptionsBtn()?.closest('article')?.querySelector('div[data-message-author-role]')
+    }
+
+    function openLastMoreOptionsMenu() {
+        const lastMoreOptionsBtn = getLastMoreOptionsBtn()
+        if (!lastMoreOptionsBtn
+            || lastMoreOptionsBtn.getAttribute('data-testid') == 'conversation-options-button' // skip master btn
+        ) return
+        lastMoreOptionsBtn.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+    }
+
+    function playLastMsg() {
+        openLastMoreOptionsMenu()
+        dom.get.loadedElem(btnSelectors.play).then(playBtn => {
+            playBtn.click() ; document.querySelector('textarea')?.click()
+            if (config.outlineText) {
+                const talkingMsgDiv = getTalkingMsgDiv() ; if (!talkingMsgDiv) return
+                const outlineColor = chatgpt.isDarkMode() ? 'rgba(223, 225, 227, 0.7)'
+                                                          : 'rgba(0, 157, 255, 0.7)'
+                const iniDelay = 500 // ms
+                const pulseDuration = 5 // s
+                setTimeout(() => talkingMsgDiv.style.cssText = `
+                    box-shadow: 0 0 0 0 ${outlineColor} ;
+                    animation: pulse-glow ${pulseDuration}s ease-in-out ; border-radius: 8px`,
+                iniDelay)
+                ;(window.pulseGlowStyles ||= dom.create.style()).textContent = `
+                    @keyframes pulse-glow {
+                        0%   { box-shadow: 0 0 0 0   ${outlineColor} }
+                        50%  { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0) }
+                        100% { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0) }
+                    }`
+                if (!window.pulseGlowStyles.isConnected) document.head.append(window.pulseGlowStyles)
+            }
+        })
+    }
+
+    async function stopPlayingMsg() {
+        openLastMoreOptionsMenu()
+        const actionBtn = await Promise.race([
+            dom.get.loadedElem(btnSelectors.stop), dom.get.loadedElem(btnSelectors.play)])
+        if (actionBtn.matches(btnSelectors.stop)) { // stop playing, rid outline
+            actionBtn.click()
+            if (config.outlineText) {
+                const talkingMsgDiv = getLastMoreOptionsBtn()?.closest('article')
+                    ?.querySelector('div[data-message-author-role]')
+                if (!talkingMsgDiv) return
+                talkingMsgDiv.style.cssText = ''
+            }
+        }
+        document.querySelector('textarea')?.click()
+    }
+
     // Define UI functions
 
     function getScheme() {
         return /\b(light|dark)\b/.exec(document.documentElement.className)?.[1]
             || ( window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' )
     }
 
-    function syncConfigToUI() {
+    function syncConfigToUI(options) {
         toggles.sidebar.update.state() // based on config.autoTalkDisabled + config.toggleHidden
+        if (options.updatedKey == 'autoTalkDisabled') {
+            if (config.autoTalkDisabled) stopPlayingMsg() ; else playLastMsg() }
         toolbarMenu.refresh() // prefixes/suffixes
     }
 
@@ -809,7 +871,11 @@
 
     // Observe body for need to AUTO-PLAY response
     let locationPath = location.pathname // to track nav
-    const btnSelectors = { moreOptions: 'button:has(path[d^="M15.498"])', play: 'div[data-testid*=voice-play]' }
+    const btnSelectors = {
+        moreOptions: 'button:has(path[d^="M15.498"])',
+        play: 'div[data-testid*=voice-play]',
+        stop: 'div:has(> svg > path[d^="M10 2.08496C14.3713"])'
+    }
     new MutationObserver(mutations => {
         if (config.autoTalkDisabled
             || !navigator.userActivation?.hasBeenActive // auto-play not allowed by browser
@@ -825,33 +891,6 @@
             playLastMsg()
         }
     }).observe(document.body, { childList: true, subtree: true })
-    function playLastMsg() {
-        const moreOptionsBtns = document.querySelectorAll(btnSelectors.moreOptions),
-              lastMoreOptionsBtn = moreOptionsBtns[moreOptionsBtns.length -1]
-        if (lastMoreOptionsBtn.getAttribute('data-testid') == 'conversation-options-button') return // skip master btn
-        lastMoreOptionsBtn.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
-        dom.get.loadedElem(btnSelectors.play).then(playBtn => {
-            playBtn.click() ; document.querySelector('textarea')?.click()
-            if (config.outlineText) {
-                const talkingMsgDiv = lastMoreOptionsBtn.closest('article')
-                        ?.querySelector('div[data-message-author-role]')
-                if (!talkingMsgDiv) return
-                const outlineColor = chatgpt.isDarkMode() ? 'rgba(223, 225, 227, 0.7)'
-                                                          : 'rgba(0, 157, 255, 0.7)'
-                setTimeout(() => talkingMsgDiv.style.cssText = `
-                    box-shadow: 0 0 0 0 ${outlineColor} ;
-                    animation: pulse-glow 5s ease-in-out ; border-radius: 8px`,
-                500)
-                ;(window.pulseGlowStyles ||= dom.create.style()).textContent = `
-                    @keyframes pulse-glow {
-                        0%   { box-shadow: 0 0 0 0   ${outlineColor} }
-                        50%  { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0) }
-                        100% { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0) }
-                    }`
-                if (!window.pulseGlowStyles.isConnected) document.head.append(window.pulseGlowStyles)
-            }
-        })
-    }
 
     // Monitor NODE CHANGES to maintain sidebar toggle visibility
     new MutationObserver(() => {
