☰

X Spaces + r

Addon for X Spaces with custom emojis, enhanced transcript including mute/unmute, hand raise/lower, mic invites, join/leave events, and speaker queuing.

当前为 2025-03-25 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         X Spaces + r 
  3. // @namespace    Violentmonkey Scripts
  4. // @version      1.91
  5. // @description  Addon for X Spaces with custom emojis, enhanced transcript including mute/unmute, hand raise/lower, mic invites, join/leave events, and speaker queuing.
  6. // @author       x.com/blankspeaker and x.com/PrestonHenshawX
  7. // @match        https://twitter.com/*
  8. // @match        https://x.com/*
  9. // @run-at       document-start
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.  
  16.     // [Previous unchanged code omitted for brevity: WebSocket, XMLHttpRequest, variables, fetchReplayUrl, debounce, getSpaceIdFromUrl, etc.]
  17.  
  18.     // [Keeping all other functions unchanged until formatTranscriptForDownload]
  19.  
  20.     async function formatTranscriptForDownload() {
  21.         let transcriptText = '--- Space URLs ---\n';
  22.         
  23.         // Append live URL
  24.         if (dynamicUrl) {
  25.             transcriptText += `Live URL: ${dynamicUrl}\n`;
  26.         } else {
  27.             transcriptText += 'Live URL: Not available\n';
  28.         }
  29.  
  30.         // Append replay URL (async fetch)
  31.         try {
  32.             const replayUrl = await fetchReplayUrl(dynamicUrl);
  33.             transcriptText += `Replay URL: ${replayUrl}\n`;
  34.         } catch (e) {
  35.             transcriptText += 'Replay URL: Failed to generate\n';
  36.         }
  37.  
  38.         transcriptText += '-----------------\n\n';
  39.  
  40.         let previousSpeaker = { username: '', handle: '' };
  41.         const combinedData = [
  42.             ...captionsData.map(item => ({ ...item, type: 'caption' })),
  43.             ...emojiReactions.map(item => ({ ...item, type: 'emoji' }))
  44.         ].sort((a, b) => a.timestamp - b.timestamp);
  45.  
  46.         combinedData.forEach((item, i) => {
  47.             let { displayName, handle } = item;
  48.             if (displayName === 'Unknown' && previousSpeaker.username) {
  49.                 displayName = previousSpeaker.username;
  50.                 handle = previousSpeaker.handle;
  51.             }
  52.             if (i > 0 && previousSpeaker.username !== displayName && item.type === 'caption') {
  53.                 transcriptText += '\n----------------------------------------\n';
  54.             }
  55.             if (item.type === 'caption') {
  56.                 transcriptText += `${displayName} ${handle}\n${item.text}\n\n`;
  57.             } else if (item.type === 'emoji') {
  58.                 transcriptText += `${displayName} reacted with ${item.emoji}\n`;
  59.             }
  60.             previousSpeaker = { username: displayName, handle };
  61.         });
  62.         return transcriptText;
  63.     }
  64.  
  65.     // [Unchanged functions: filterTranscript]
  66.  
  67.     function updateTranscriptPopup() {
  68.         if (!transcriptPopup || transcriptPopup.style.display !== 'block') return;
  69.  
  70.         let queueContainer = transcriptPopup.querySelector('#queue-container');
  71.         let searchContainer = transcriptPopup.querySelector('#search-container');
  72.         let scrollArea = transcriptPopup.querySelector('#transcript-scrollable');
  73.         let saveButton = transcriptPopup.querySelector('.save-button');
  74.         let textSizeContainer = transcriptPopup.querySelector('.text-size-container');
  75.         let systemToggleButton = transcriptPopup.querySelector('#system-toggle-button');
  76.         let emojiToggleButton = transcriptPopup.querySelector('#emoji-toggle-button');
  77.         let currentScrollTop = scrollArea ? scrollArea.scrollTop : 0;
  78.         let wasAtBottom = scrollArea ? (scrollArea.scrollHeight - scrollArea.scrollTop - scrollArea.clientHeight < 50) : true;
  79.  
  80.         let showEmojis = localStorage.getItem(STORAGE_KEYS.SHOW_EMOJIS) !== 'false';
  81.         let showSystemMessages = localStorage.getItem(STORAGE_KEYS.SHOW_SYSTEM_MESSAGES) !== 'false';
  82.  
  83.         if (!queueContainer || !searchContainer || !scrollArea || !saveButton || !textSizeContainer || !systemToggleButton || !emojiToggleButton) {
  84.             transcriptPopup.innerHTML = '';
  85.  
  86.             queueContainer = document.createElement('div');
  87.             queueContainer.id = 'queue-container';
  88.             queueContainer.style.marginBottom = '10px';
  89.             transcriptPopup.appendChild(queueContainer);
  90.  
  91.             searchContainer = document.createElement('div');
  92.             searchContainer.id = 'search-container';
  93.             searchContainer.style.display = 'none';
  94.             searchContainer.style.marginBottom = '5px';
  95.  
  96.             const searchInput = document.createElement('input');
  97.             searchInput.type = 'text';
  98.             searchInput.placeholder = 'Search transcript...';
  99.             searchInput.style.width = '87%';
  100.             searchInput.style.padding = '5px';
  101.             searchInput.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
  102.             searchInput.style.border = 'none';
  103.             searchInput.style.borderRadius = '5px';
  104.             searchInput.style.color = 'white';
  105.             searchInput.style.fontSize = '14px';
  106.             searchInput.addEventListener('input', (e) => {
  107.                 searchTerm = e.target.value.trim();
  108.                 updateTranscriptPopup();
  109.             });
  110.  
  111.             searchContainer.appendChild(searchInput);
  112.             transcriptPopup.appendChild(searchContainer);
  113.  
  114.             scrollArea = document.createElement('div');
  115.             scrollArea.id = 'transcript-scrollable';
  116.             scrollArea.style.flex = '1';
  117.             scrollArea.style.overflowY = 'auto';
  118.             scrollArea.style.maxHeight = '300px';
  119.  
  120.             const captionWrapper = document.createElement('div');
  121.             captionWrapper.id = 'transcript-output';
  122.             captionWrapper.style.color = '#e7e9ea';
  123.             captionWrapper.style.fontFamily = 'Arial, sans-serif';
  124.             captionWrapper.style.whiteSpace = 'pre-wrap';
  125.             captionWrapper.style.fontSize = `${currentFontSize}px`;
  126.             scrollArea.appendChild(captionWrapper);
  127.  
  128.             const controlsContainer = document.createElement('div');
  129.             controlsContainer.style.display = 'flex';
  130.             controlsContainer.style.alignItems = 'center';
  131.             controlsContainer.style.justifyContent = 'space-between';
  132.             controlsContainer.style.padding = '5px 0';
  133.             controlsContainer.style.borderTop = '1px solid rgba(255, 255, 255, 0.3)';
  134.  
  135.             saveButton = document.createElement('div');
  136.             saveButton.className = 'save-button';
  137.             saveButton.textContent = '💾 Save Transcript';
  138.             saveButton.style.color = '#1DA1F2';
  139.             saveButton.style.fontSize = '14px';
  140.             saveButton.style.cursor = 'pointer';
  141.             saveButton.addEventListener('click', async () => { // Updated to async
  142.                 saveButton.textContent = '💾 Saving...'; // Feedback during async operation
  143.                 const transcriptContent = await formatTranscriptForDownload();
  144.                 const blob = new Blob([transcriptContent], { type: 'text/plain' });
  145.                 const url = URL.createObjectURL(blob);
  146.                 const a = document.createElement('a');
  147.                 a.href = url;
  148.                 a.download = `transcript_${new Date().toISOString().replace(/[:.]/g, '-')}.txt`;
  149.                 document.body.appendChild(a);
  150.                 a.click();
  151.                 document.body.removeChild(a);
  152.                 URL.revokeObjectURL(url);
  153.                 saveButton.textContent = '💾 Save Transcript'; // Reset button text
  154.             });
  155.             saveButton.addEventListener('mouseover', () => saveButton.style.color = '#FF9800');
  156.             saveButton.addEventListener('mouseout', () => saveButton.style.color = '#1DA1F2');
  157.  
  158.             textSizeContainer = document.createElement('div');
  159.             textSizeContainer.className = 'text-size-container';
  160.             textSizeContainer.style.display = 'flex';
  161.             textSizeContainer.style.alignItems = 'center';
  162.  
  163.             systemToggleButton = document.createElement('span');
  164.             systemToggleButton.id = 'system-toggle-button';
  165.             systemToggleButton.style.position = 'relative';
  166.             systemToggleButton.style.fontSize = '14px';
  167.             systemToggleButton.style.cursor = 'pointer';
  168.             systemToggleButton.style.marginRight = '5px';
  169.             systemToggleButton.style.width = '14px';
  170.             systemToggleButton.style.height = '14px';
  171.             systemToggleButton.style.display = 'inline-flex';
  172.             systemToggleButton.style.alignItems = 'center';
  173.             systemToggleButton.style.justifyContent = 'center';
  174.             systemToggleButton.title = 'Toggle System Messages';
  175.             systemToggleButton.innerHTML = '📢';
  176.  
  177.             const systemNotAllowedOverlay = document.createElement('span');
  178.             systemNotAllowedOverlay.style.position = 'absolute';
  179.             systemNotAllowedOverlay.style.width = '14px';
  180.             systemNotAllowedOverlay.style.height = '14px';
  181.             systemNotAllowedOverlay.style.border = '2px solid red';
  182.             systemNotAllowedOverlay.style.borderRadius = '50%';
  183.             systemNotAllowedOverlay.style.transform = 'rotate(45deg)';
  184.             systemNotAllowedOverlay.style.background = 'transparent';
  185.             systemNotAllowedOverlay.style.display = showSystemMessages ? 'none' : 'block';
  186.  
  187.             const systemSlash = document.createElement('span');
  188.             systemSlash.style.position = 'absolute';
  189.             systemSlash.style.width = '2px';
  190.             systemSlash.style.height = '18px';
  191.             systemSlash.style.background = 'red';
  192.             systemSlash.style.transform = 'rotate(-45deg)';
  193.             systemSlash.style.top = '-2px';
  194.             systemSlash.style.left = '6px';
  195.             systemNotAllowedOverlay.appendChild(systemSlash);
  196.  
  197.             systemToggleButton.appendChild(systemNotAllowedOverlay);
  198.  
  199.             systemToggleButton.addEventListener('click', () => {
  200.                 showSystemMessages = !showSystemMessages;
  201.                 systemNotAllowedOverlay.style.display = showSystemMessages ? 'none' : 'block';
  202.                 localStorage.setItem(STORAGE_KEYS.SHOW_SYSTEM_MESSAGES, showSystemMessages);
  203.                 updateTranscriptPopup();
  204.             });
  205.  
  206.             emojiToggleButton = document.createElement('span');
  207.             emojiToggleButton.id = 'emoji-toggle-button';
  208.             emojiToggleButton.style.position = 'relative';
  209.             emojiToggleButton.style.fontSize = '14px';
  210.             emojiToggleButton.style.cursor = 'pointer';
  211.             emojiToggleButton.style.marginRight = '5px';
  212.             emojiToggleButton.style.width = '14px';
  213.             emojiToggleButton.style.height = '14px';
  214.             emojiToggleButton.style.display = 'inline-flex';
  215.             emojiToggleButton.style.alignItems = 'center';
  216.             emojiToggleButton.style.justifyContent = 'center';
  217.             emojiToggleButton.title = 'Toggle Emoji Capturing';
  218.             emojiToggleButton.innerHTML = '🙂';
  219.  
  220.             const emojiNotAllowedOverlay = document.createElement('span');
  221.             emojiNotAllowedOverlay.style.position = 'absolute';
  222.             emojiNotAllowedOverlay.style.width = '14px';
  223.             emojiNotAllowedOverlay.style.height = '14px';
  224.             emojiNotAllowedOverlay.style.border = '2px solid red';
  225.             emojiNotAllowedOverlay.style.borderRadius = '50%';
  226.             emojiNotAllowedOverlay.style.transform = 'rotate(45deg)';
  227.             emojiNotAllowedOverlay.style.background = 'transparent';
  228.             emojiNotAllowedOverlay.style.display = showEmojis ? 'none' : 'block';
  229.  
  230.             const emojiSlash = document.createElement('span');
  231.             emojiSlash.style.position = 'absolute';
  232.             emojiSlash.style.width = '2px';
  233.             emojiSlash.style.height = '18px';
  234.             emojiSlash.style.background = 'red';
  235.             emojiSlash.style.transform = 'rotate(-45deg)';
  236.             emojiSlash.style.top = '-2px';
  237.             emojiSlash.style.left = '6px';
  238.             emojiNotAllowedOverlay.appendChild(emojiSlash);
  239.  
  240.             emojiToggleButton.appendChild(emojiNotAllowedOverlay);
  241.  
  242.             emojiToggleButton.addEventListener('click', () => {
  243.                 showEmojis = !showEmojis;
  244.                 emojiNotAllowedOverlay.style.display = showEmojis ? 'none' : 'block';
  245.                 localStorage.setItem(STORAGE_KEYS.SHOW_EMOJIS, showEmojis);
  246.                 updateTranscriptPopup();
  247.             });
  248.  
  249.             const magnifierEmoji = document.createElement('span');
  250.             magnifierEmoji.textContent = '🔍';
  251.             magnifierEmoji.style.marginRight = '5px';
  252.             magnifierEmoji.style.fontSize = '14px';
  253.             magnifierEmoji.style.cursor = 'pointer';
  254.             magnifierEmoji.title = 'Search transcript';
  255.             magnifierEmoji.addEventListener('click', () => {
  256.                 searchContainer.style.display = searchContainer.style.display === 'none' ? 'block' : 'none';
  257.                 if (searchContainer.style.display === 'block') searchInput.focus();
  258.                 else {
  259.                     searchTerm = '';
  260.                     searchInput.value = '';
  261.                     updateTranscriptPopup();
  262.                 }
  263.             });
  264.  
  265.             const textSizeSlider = document.createElement('input');
  266.             textSizeSlider.type = 'range';
  267.             textSizeSlider.min = '12';
  268.             textSizeSlider.max = '18';
  269.             textSizeSlider.value = currentFontSize;
  270.             textSizeSlider.style.width = '50px';
  271.             textSizeSlider.style.cursor = 'pointer';
  272.             textSizeSlider.title = 'Adjust transcript text size';
  273.             textSizeSlider.addEventListener('input', () => {
  274.                 currentFontSize = parseInt(textSizeSlider.value, 10);
  275.                 const captionWrapper = transcriptPopup.querySelector('#transcript-output');
  276.                 if (captionWrapper) captionWrapper.style.fontSize = `${currentFontSize}px`;
  277.                 localStorage.setItem('xSpacesCustomReactions_textSize', currentFontSize);
  278.             });
  279.  
  280.             const savedTextSize = localStorage.getItem('xSpacesCustomReactions_textSize');
  281.             if (savedTextSize) {
  282.                 currentFontSize = parseInt(savedTextSize, 10);
  283.                 textSizeSlider.value = currentFontSize;
  284.             }
  285.  
  286.             textSizeContainer.appendChild(systemToggleButton);
  287.             textSizeContainer.appendChild(emojiToggleButton);
  288.             textSizeContainer.appendChild(magnifierEmoji);
  289.             textSizeContainer.appendChild(textSizeSlider);
  290.  
  291.             controlsContainer.appendChild(saveButton);
  292.             controlsContainer.appendChild(textSizeContainer);
  293.  
  294.             transcriptPopup.appendChild(queueContainer);
  295.             transcriptPopup.appendChild(searchContainer);
  296.             transcriptPopup.appendChild(scrollArea);
  297.             transcriptPopup.appendChild(controlsContainer);
  298.         }
  299.  
  300.         const { captions: filteredCaptions, emojis: filteredEmojis } = filterTranscript(captionsData, emojiReactions, searchTerm);
  301.         const combinedData = [
  302.             ...filteredCaptions.map(item => ({ ...item, type: 'caption' })),
  303.             ...(showEmojis ? filteredEmojis.map(item => ({ ...item, type: 'emoji' })) : [])
  304.         ].sort((a, b) => a.timestamp - b.timestamp);
  305.  
  306.         // Find the previous speaker before the last 200 entries
  307.         let previousSpeaker = lastSpeaker || { username: '', handle: '' };
  308.         if (combinedData.length > 200) {
  309.             for (let i = combinedData.length - 201; i >= 0; i--) {
  310.                 if (combinedData[i].type === 'caption') {
  311.                     previousSpeaker = { username: combinedData[i].displayName, handle: combinedData[i].handle };
  312.                     break;
  313.                 }
  314.             }
  315.         }
  316.  
  317.         // Limit to the last 200 entries
  318.         const recentData = combinedData.slice(-200);
  319.  
  320.         // Group consecutive emojis within the 200 entries
  321.         let emojiGroups = [];
  322.         let currentGroup = null;
  323.         recentData.forEach(item => {
  324.             if (item.type === 'caption') {
  325.                 if (currentGroup) {
  326.                     emojiGroups.push(currentGroup);
  327.                     currentGroup = null;
  328.                 }
  329.                 emojiGroups.push(item);
  330.             } else if (item.type === 'emoji' && showEmojis) {
  331.                 if (currentGroup && currentGroup.displayName === item.displayName && currentGroup.emoji === item.emoji &&
  332.                     Math.abs(item.timestamp - currentGroup.items[currentGroup.items.length - 1].timestamp) < 50) {
  333.                     currentGroup.count++;
  334.                     currentGroup.items.push(item);
  335.                 } else {
  336.                     if (currentGroup) emojiGroups.push(currentGroup);
  337.                     currentGroup = { displayName: item.displayName, emoji: item.emoji, count: 1, items: [item] };
  338.                 }
  339.             }
  340.         });
  341.         if (currentGroup) emojiGroups.push(currentGroup);
  342.  
  343.         // Build the HTML string
  344.         let html = '';
  345.         if (combinedData.length > 200) {
  346.             html += '<div style="color: #FFD700; font-size: 12px; margin-bottom: 10px;">Showing the last 200 lines. Save transcript to see the full conversation.</div>';
  347.         }
  348.         emojiGroups.forEach((group, i) => {
  349.             if (group.type === 'caption') {
  350.                 let { displayName, handle, text } = group;
  351.                 if (displayName === 'Unknown' && previousSpeaker.username) {
  352.                     displayName = previousSpeaker.username;
  353.                     handle = previousSpeaker.handle;
  354.                 }
  355.                 if (i > 0 && previousSpeaker.username !== displayName) {
  356.                     html += '<div style="border-top: 1px solid rgba(255, 255, 255, 0.3); margin: 5px 0;"></div>';
  357.                 }
  358.                 html += `<span style="font-size: ${currentFontSize}px; color: #1DA1F2">${displayName}</span> ` +
  359.                         `<span style="font-size: ${currentFontSize}px; color: #808080">${handle}</span><br>` +
  360.                         `<span style="font-size: ${currentFontSize}px; color: ${displayName === 'System' ? '#FF4500' : '#FFFFFF'}">${text}</span><br><br>`;
  361.                 previousSpeaker = { username: displayName, handle };
  362.             } else if (showEmojis) {
  363.                 let { displayName, emoji, count } = group;
  364.                 if (displayName === 'Unknown' && previousSpeaker.username) {
  365.                     displayName = previousSpeaker.username;
  366.                 }
  367.                 const countText = count > 1 ? ` <span style="font-size: ${currentFontSize}px; color: #FFD700">x${count}</span>` : '';
  368.                 html += `<span style="font-size: ${currentFontSize}px; color: #FFD700">${displayName}</span> ` +
  369.                         `<span style="font-size: ${currentFontSize}px; color: #FFFFFF">reacted with ${emoji}${countText}</span><br>`;
  370.                 previousSpeaker = { username: displayName, handle: group.items[0].handle };
  371.             }
  372.         });
  373.  
  374.         // Update the DOM once
  375.         const captionWrapper = scrollArea.querySelector('#transcript-output');
  376.         if (captionWrapper) {
  377.             captionWrapper.innerHTML = html;
  378.             lastSpeaker = previousSpeaker;
  379.  
  380.             // Maintain scroll position
  381.             if (wasAtBottom && !searchTerm) scrollArea.scrollTop = scrollArea.scrollHeight;
  382.             else scrollArea.scrollTop = currentScrollTop;
  383.  
  384.             scrollArea.onscroll = () => {
  385.                 isUserScrolledUp = scrollArea.scrollHeight - scrollArea.scrollTop - scrollArea.clientHeight > 50;
  386.             };
  387.         }
  388.  
  389.         if (handQueuePopup && handQueuePopup.style.display === 'block') {
  390.             updateHandQueueContent(handQueuePopup.querySelector('#hand-queue-content'));
  391.         }
  392.     }
  393.  
  394.     // [Unchanged functions: updateHandQueueContent, init, etc. omitted for brevity]
  395.  
  396.     if (document.readyState === 'loading') {
  397.         document.addEventListener('DOMContentLoaded', init);
  398.     } else {
  399.         init();
  400.     }
  401. })();