Skip to content

Conversation

@steveseguin
Copy link
Owner

No description provided.

steveseguin and others added 23 commits November 23, 2025 14:02
Introduces a new interactive world map component (`map.html`) to visualize
real-time data, such as stream viewer locations or geographic activity.
This feature significantly enhances the project's ability to display
global impact and distribution dynamically.

Key changes include:
- **`map.html`**: A new page utilizing D3.js and TopoJSON for rendering a
  dynamic world map with customizable styling.
- **`thirdparty/d3.min.js` & `thirdparty/topojson-client.min.js`**:
  Integration of D3 and TopoJSON libraries to power map rendering and
  geographic data handling.
- **`thirdparty/iso-3166.json`**: Inclusion of a comprehensive dataset for
  mapping ISO country codes to detailed geographic and regional information.
- **WebSocket Integration**: Implements a `ConnectionManager` to establish
  WebSocket communication, enabling live updates for country highlights and
  location markers on the map.
- Provides configurable settings for map title, display of total counts,
  and a top list of active regions.

This commit represents a substantial step in developing rich data
visualization capabilities on the `beta` branch, continuing from prior
snapshot commits.

[auto-enhanced]
- Implement a new `beepfirsttime` parameter and UI option in `popup.html` to trigger a notification sound specifically for messages from first-time chatters, modifying the beep logic in `dock.html`.
- Enhance `map.html` initialization and data loading for improved reliability:
    - Introduce `pendingMessages` to queue incoming chat messages until the map overlay is fully initialized, preventing data loss or premature processing.
    - Add `loadJsonWithFallback` to fetch `iso-3166.json` and `world-110m.json`, utilizing CDN fallbacks if local file loading fails.
    - Refactor chat message processing into a dedicated `handleChatMessage` function for better modularity and reuse.
    - Allow the embedded VDO.Ninja iframe's `label` to be configured via a URL parameter, defaulting to `dock`.
    - Ensure the main socket connection is always attempted, removing the conditional check based on the `server` URL parameter.

[auto-enhanced]
Integrates Google Gemini as a new Text-to-Speech (TTS) service option,
expanding the range of AI-driven voice synthesis choices available
within the Raspberry Ninja toolkit.

This change includes:
- Updates to `popup.js` to recognize and manage Gemini-specific parameters
  (`geminikey`, `geminimodel`, `voicegemini`) in URL handling functions.
- Modification of `setupTtsProviders` to correctly detect and prioritize
  Gemini as an active TTS provider across main, featured, and secondary
  TTS configurations.
- Enhancements to `handleTTSProviderVisibility` functions to ensure
  proper display and hiding of Gemini TTS UI elements in `popup.html`.
- Increments the extension version in `manifest.json` to reflect the
  addition of this new feature.

[auto-enhanced]
- Correctly align badges and elements within the username box in `overlay1.html`. This is achieved by changing `display` to `inline-flex` and adding `margin: auto 0` for `.username-box span` within the Deuk's overlay theme.
- Remove the unused `sendToTikTok` function and its invocation from the `sendToDestinations` logic in `background.js`. This cleans up deprecated or no longer required TikTok integration code.

[auto-enhanced]
Introduce the `firsttime` property to the Event Flow Editor, allowing users to configure actions specifically for new chatters. This property is available under the 'Status' group.

Additionally, enhance the property selection UI in `EventFlowEditor.js` by:
- Adding tooltips and an info icon to properties such as `firsttime`, `highKarma`, and `lowKarma`.
- Providing clearer context on global setting requirements for these properties (e.g., "Requires First timers enabled in global settings," "Requires Add karma enabled in global settings").

This improves user experience by making prerequisite information more accessible directly within the editor.

Updates `manifest.json` version to `3.36.18`.

[auto-enhanced]
Introduces a new "Last Activity Filter" for message properties within the Event Flow system, allowing triggers to react based on a user's recent engagement. This enhances event flow flexibility by enabling conditions like "user active within X minutes" or "user last active older than Y hours."

- **`actions/EventFlowSystem.js`**: Implements the core logic for evaluating the `lastActivityFilter`. It checks if a user's last known activity timestamp falls within or is older than a configured time window (minutes, hours, days).
- **`actions/EventFlowEditor.js`**: Updates the Event Flow editor UI to include configuration options for the last activity filter. This involves adding controls for enabling/disabling the filter, setting the amount and unit of time, defining the mode (within/older), and providing quick-select buttons. The node summary also now reflects the active filter settings.
- **`background.js`**: Enhances the message processing pipeline to populate messages with `lastactivity` timestamps. This includes modifying `messageStoreDB.checkUserTypeExists` to return last activity data and seeding a `lastactivity` timestamp for first-time chatters at their initial message time, ensuring the filter has data to operate on.
- This feature continues the ongoing enhancements to the event flow system, providing more sophisticated control over trigger conditions, as seen in other recent updates on the `beta` branch.

[auto-enhanced]
When the `EventFlowSystem` evaluates a flow, the `message` object in the evaluation context could be `null`, especially when triggered by scheduler ticks. This fix ensures that `overallResult.message` is always initialized as a mutable object, preventing potential runtime errors when subsequent flow actions attempt to access or modify its properties.

[auto-enhanced]
The condition for identifying a 'first-time chatter' in `background.js` within `applyBotActions` was updated.

- Explicitly adds `data.chatmessage` to the `firsttimers` check.
- Ensures a user is only considered a 'first-time chatter' if they have actually sent a message, rather than merely having a `chatname` and `type`.
- Prevents potential false positives where a user might be flagged without having initiated chat, aligning with the intent of the feature introduced in recent `event-flow` commits.

[auto-enhanced]
Replaced `document.referrer` checks with a new `isEmbeddedPopout()` function.

Twitch now sets the referrer to the popout URL even for standalone tabs,
causing the previous detection logic to incorrectly identify standalone
popouts as embedded.

The new `isEmbeddedPopout()` function leverages frame context
(`window.self !== window.top || !!window.frameElement`) to accurately
determine if the script is running within an actual embedded frame. This
ensures features like `focusChat` and `onElementInsertedTwitch` correctly
apply only when truly embedded, preventing unintended side effects in
standalone popouts.

[auto-enhanced]
Refine how map projections are determined based on active markers and preferences.

- Modify `getMarkerBoundsCollection` to accept an optional `tallyOverride`, enabling
  different data sources (e.g., `countryTally`) to be used for bounds calculation.
- Implement fallback logic in map rendering to use `countryTally` for marker
  bounds if the primary `activeTally` yields no markers for fitting.
- Adjust `preferMarkerFit` behavior:
    - When `preferMarkerFit` is true, the map will always adjust its zoom to
      display all markers, even if it means zooming out.
    - When `preferMarkerFit` is false, marker bounds will only be considered
      if they result in an equivalent or tighter (zoomed-in) view compared
      to the region bounds.
- Add `fitMode` variable and debug logging to provide clearer insights into
  the chosen projection strategy.

This improves the responsiveness and accuracy of map displays, particularly for
dynamic marker data or explicit fitting preferences. Continues enhancements
to the `map.html` component on the `beta` branch.

[auto-enhanced]
- Introduce a new `typewriter` URL parameter to enable and configure a character-by-character typing animation for chat messages.
- Allow customization of the typing speed (per-character delay) directly through the `typewriter` parameter.
- Add CSS definitions for the `.typewriter-active` class and the blinking `.typewriter-caret` to `dock.html`.
- Implement JavaScript logic within `dock.html` to manage a queue (`typewriterQueue`) and sequentially animate messages using the `processTypewriterQueue` function.
- Integrate the typewriter enqueueing into the message processing flow, ensuring new messages respect the typing animation if enabled.
- Update `popup.html` to include a user interface toggle for the new typewriter feature.
- Document the `typewriter` parameter and its usage in `parameters.md`.
- This enhancement provides a more dynamic and engaging visual presentation for incoming chat messages.

[auto-enhanced]
Implement mutual exclusivity between 'First-time chatter' and 'Last activity window' filters in the Event Flow Editor. This prevents contradictory filter configurations and ensures accurate message processing based on user activity.

- **`actions/EventFlowEditor.js`**:
    - Added UI logic to dynamically disable one filter control when the other is enabled, ensuring a clear and consistent user experience.
    - Updated event listeners for required properties and activity filters to maintain this mutual exclusivity in the node configuration.
    - Improved help text to clarify the interaction between these filters.
- **`actions/EventFlowSystem.js`**:
    - Introduced a robust `normalizeLastActivityMs` function to consistently interpret `lastActivity` timestamps (from seconds, milliseconds, or microseconds) for accurate activity window comparisons.
- **`background.js`**:
    - Added `normalizeTimestampToSeconds` to process `lastActivity` from the message store, ensuring consistent data handling before filter application.
    - Removed the logic that would seed `lastactivity` for first-time chatters with the current message's timestamp; first-time chatters now correctly have no prior `lastactivity` data, causing them to fail the 'last activity window' requirement by default.
- **`popup.html`**:
    - Updated help text for the 'First-timers' global setting to reflect its role in tracking last chat-activity, which is essential for certain trigger filters.

[auto-enhanced]
Adds a new text glow styling option, configurable via URL parameters and the
popup UI. This enhances visual customization for text, allowing for a halo
effect around characters.

- Introduce `--text-glow` CSS variable in `dock.html` to apply a glow effect.
- Add `glowwidth` and `glowcolor` URL parameters for customizing the glow.
- Integrate logic in `dock.html` to apply the text glow based on these parameters.
- Refactor how text shadows are applied in `dock.html` (e.g., `nooutline`, `bolder`, `thinner`) to consistently use the `--text-shadow` CSS variable, enabling better compatibility with the new `--text-glow` variable.
- Introduce new UI controls in `popup.html` under "Text Glow" for:
    - Enabling/disabling the glow via a checkbox (`textglow`).
    - Setting the `glowcolor` with a text input, color picker, and alpha slider.
    - Adjusting the `glowwidth` (size/softness) with a number input.
- Adjust the default `typewriterSpeed` in `dock.html` from 35ms to 30ms.
- Update `popup.html`'s typewriter checkbox to set `typewriter=30` by default when enabled.

[auto-enhanced]
- Introduce `isMetaOnlyPayload` method in `EventFlowSystem` to detect messages containing only metadata (e.g., viewer count updates, follower counts) without actual chat, donation, or other specific event data.
- Filter out these meta-only payloads in `EventFlowSystem.processMessage` and `EventFlowSystem.evaluateTrigger` to prevent them from inadvertently triggering event flows. This ensures flows are only activated by intended messages or events, improving the predictability and stability of the event system.
- Update the default `audioUrl` for `playAudioClip` nodes in `EventFlowEditor.js` to a VDO.Ninja hosted sample (`https://vdo.ninja/media/join.wav`), providing a more practical and immediately usable default.

[auto-enhanced]
Introduces a new global setting and API action to filter incoming chat messages, displaying only recognized emotes and emojis. Messages that become empty after filtering (i.e., contain no emotes, donations, or content images) are now discarded.

- Adds `emoteonly` API action to `api.md` with support for `toggle`, `true`, and `false` values to programmatically control the filter.
- Implements `buildEmoteOnlyMessage` in `background.js` to process messages, identifying and preserving BTTV, SevenTV, FFZ, and standard emojis.
- Integrates the emote-only logic into `applyBotActions` in `background.js`, ensuring messages are filtered before final processing.
- Adds a new "Emote-only" checkbox setting to `popup.html` for user control.
- Updates `sampleapi.html` with example buttons to manage the emote-only mode via the API.

[auto-enhanced]
This commit introduces several enhancements across different UI components:

- **Event Flow Editor (`actions/EventFlowEditor.js`, `actions/index.html`):**
  - Adds new options to the test message builder, including 'First-time chatter' and 'Set last activity' with configurable timeframes (minutes, hours, days).
  - Updates the `displayTestResults` function to accurately compare modified properties against the original test message.
  - Corrects the guide link opening logic within `/actions/` paths to ensure proper navigation.

- **Dock UI (`dock.html`):**
  - Refactors Google Font loading (`loadGoogleFonts`) to support multiple font families when specified via a comma-separated `googlefont` URL parameter.
  - Improves font parsing and application to the `--font-family` CSS variable for better control over typography.

- **Event Display (`events.html`):**
  - Implements dedicated handling for TikTok-specific metadata (emotes, subscriptions), collapsing them into concise summaries.
  - Introduces logic (`shouldSkipEventMetaField`) to filter out irrelevant or redundant meta fields from being displayed in events.
  - Applies various style refinements to event type badges and specific event fields for improved visual clarity and consistency, including updated colors, padding, font sizes, and letter spacing.

[auto-enhanced]
Introduces a `setTextShadow` helper function in `dock.html` to consistently apply the `--text-shadow` CSS variable to both `documentElement` and `body`. This refactoring resolves issues with text outline rendering and visibility, particularly when using light mode themes or other style overrides, ensuring outlines appear as intended.

Additionally, enhances the testing interface in `background.html` with new message properties:
- Add 'First-time chatter' checkbox for simulating new user interactions.
- Implement 'Set last activity' options, allowing for configurable time values (minutes, hours, days) to test activity-based filters more accurately.
These additions enhance the event flow testing capabilities on the `beta` branch.

[auto-enhanced]
Introduces an optional audio notification when a user sends their first message or returns after 8 hours of inactivity.

- Adds `beepreturning` setting to enable/disable the feature for enhanced host awareness.
- Triggers `audio/join.wav` playback for new or returning chatters based on `data.firsttime` or inactivity duration checks within `background.js`.
- Implements a playback cooldown (`RETURNING_BEEP_COOLDOWN_MS`) to prevent notification spam.
- Displays a user hint via `messagePopup` to guide users on enabling background audio playback in their browser.
- Skips notifications for internal system messages or events (e.g., `reflection`, `replay`, `bot`, `host`) to reduce noise.
- Incorporates new general audio assets (`bell.wav`, `chime.wav`, `join.wav`, `leave.wav`) with `join.wav` being used for this specific feature.

[auto-enhanced]
Adds a new setting and functionality to allow users to select a specific audio
output device directly from YouTube watch pages.

- Introduces a "youtubeAudioPicker" toggle setting in `popup.html` for user control.
- `background.js` is updated to recognize and push changes for the new setting.
- `sources/static/youtube_static.js` contains the core logic for the in-page picker:
    - Renders a button and a dynamic panel for listing and selecting audio output devices.
    - Utilizes `navigator.mediaDevices.selectAudioOutput()` for device enumeration and selection capabilities.
    - Applies the chosen audio output device to the active YouTube video element.
- The audio picker runs only when enabled via the new extension setting, ensuring it's not always active.

[auto-enhanced]
-   **background.js**: Modify the `processIncomingMessage` function to conditionally assign `message.tid`. The originating tab ID will now only be set if `message.tid` is currently `undefined` or `null`. This prevents an existing tab ID from being inadvertently overwritten, ensuring more accurate tracking and attribution of messages to their source tabs. This is crucial for reliable viewer count metrics and event processing.
-   **events.html**: Adjust logging within the event overlay to specifically output `e.data.dataReceived.overlayNinja`. This change streamlines debugging efforts by focusing the log output on relevant event data impacting the overlay display, aiding in the validation of viewer-related information.

[auto-enhanced]
Introduces a new configurable feature to display live viewer counts for various sources (e.g., Twitch, YouTube) directly on the events dashboard.

- Implements a dynamic `#topbar` on `events.html` to show viewer icons and their respective counts.
- Utilizes `viewer_update` and `viewer_updates` events to refresh viewer data, including an icon timeout (TTL) for stale entries.
- Adds `upsertViewerIcon` function for creating and updating viewer count elements based on `data.type`.
- Introduces a new "Show viewer count bar in the top-right" checkbox setting in `popup.html` to enable/disable this feature via the `showviewercount` URL parameter.
- Includes responsive CSS updates for the events dashboard header (`h1.large`, `h1.small`) to adapt to different screen widths.

[auto-enhanced]
- Implement `tabSourceCache` in `background.js` to store tab source types,
  reducing redundant content script queries and improving chat message processing speed.
- Refine returning user beep logic in `background.js`:
  - Ensure the beep only triggers for genuinely first-time users or after 8 hours of inactivity.
  - Skip the beep for system/bot messages (reflection, replay, history, reload, bot, host).
  - Persist `returningBeepHintShown` state in local storage.
- Add a debugging `console.log` statement to `dock.html` for message sending.
- Bump extension version in `manifest.json`.

[auto-enhanced]
Introduces a mechanism to prevent viewer counts from unauthorized or non-opted-in sources from being aggregated and displayed. This ensures that only relevant and permitted viewer data contributes to the dashboard and other displays.

- Integrates `checkIfAllowed` calls into `background.js` within key viewer count processing functions:
    - `sendToDestinations`: Skips individual `viewer_update` events from disallowed sources.
    - `updateViewerCount`: Filters aggregated `viewer_updates` and legacy single `viewer_update` data.
    - `combineHypeData`: Excludes chatters and viewers from disallowed sources during hype data combination.
- Prevents unintended inclusion of viewer data, particularly relevant for the recently added real-time viewer count feature.

[auto-enhanced]
Introduces a new documentation page (`docs/custom-fonts.html`) that
provides a detailed walkthrough for integrating custom fonts into
Social Stream Ninja overlays.

This guide covers:
- Methods for self-hosting font files (TTF, OTF, WOFF2) from various platforms.
- Loading custom fonts into `dock.html` and `featured.html` via URL
  parameters or OBS custom CSS.
- Key CSS variables for tuning overlay text sizing and layout.
- Common troubleshooting steps for font integration issues.

Updates `README.md` with a direct link to the new guide for improved
discoverability of font customization options.

[auto-enhanced]
- Introduce a new "blockedwords" URL parameter and associated settings in `popup.html`.
- Implement client-side logic in `dock.html` to filter incoming chat messages and usernames against the configured list of blocked words.
- Messages or names containing blocked words are either blurred (if a blurring mode is active) or completely hidden from view.
- Provide an intuitive user interface in `popup.html` with an input field and dynamic tags for adding and removing words/phrases to be blocked.
- Develop `popup.js` functions (`updateBlockedWordsList`, `addBlockedWord`, `removeBlockedWord`, `setupBlockedWordsInput`) to manage this interactive tag system for blocked words.
- This feature enhances content moderation capabilities, giving users more control over displayed chat content.

[auto-enhanced]
This commit integrates Text-to-Speech (TTS) capabilities into the `actions.html`
event flow and significantly refactors the media fullscreen playback logic
for enhanced flexibility.

- **Text-to-Speech Integration**:
    - Includes `tts.js` script in `actions.html`.
    - Configures TTS dynamically using URL parameters upon page initialization,
      enabling the actions page to vocalize specific event payloads.
- **Media Overlay Refactor**:
    - Overhauls the `playMediaFullscreen` function to provide more precise
      and flexible control over media element (images, iframes) positioning
      and sizing.
    - Now supports `vw` and `vh` units for width, height, x, and y
      coordinates, along with `randomX` and `randomY` options for dynamic
      placement within the viewport.
    - Includes improved handling for legacy centered media display, ensuring
      backward compatibility while introducing advanced options.
- **Project Version Update**:
    - Increments the `manifest.json` version from `3.36.23` to `3.36.24`.

[auto-enhanced]
- Introduce `continueAsync` action to `EventFlowEditor.js` and implement its execution logic in `EventFlowSystem.js`. This enables event flows to execute actions asynchronously, preventing blocking for complex operations.
- Enhance `EventFlowEditor.js` with comprehensive UI for `lastActivityFilter` on trigger nodes. This allows users to filter triggers based on user activity within a specified timeframe (e.g., "first time seen," "last activity within 5 minutes"), including quick action buttons and mutual exclusion logic.
- Integrate dedicated UI for `counter` trigger configurations (e.g., `countType`) within the `EventFlowEditor.js` properties panel.
- Refactor `EventFlowSystem.js` to process the new `continueAsync` action and integrate updated logic for various existing actions, including `setProperty`, `incrementCounter`, `checkCounter`, and `removeText`.

[auto-enhanced]
- Broaden the list of detected system fonts in `popup.js` to include a wider range of Windows UI, developer, and popular sans/serif/monospace font families. This increases the variety of instantly available fonts for users.
- Add detailed, platform-specific instructions (Windows, macOS, Linux) for installing custom fonts to `fonts.html`. This section guides users on how to make self-hosted fonts available to the browser and, consequently, to Raspberry Ninja.
- Update font-related "note" messages within `popup.html` to provide more direct installation advice and link users to the comprehensive `fonts.html` page for further assistance.
- This enhancement improves font customizability and user experience by making more fonts discoverable and providing clear guidance on how to integrate custom fonts. It builds upon the recent custom font documentation.

[auto-enhanced]
Enhance the `font` URL parameter to accept a comma-separated list of font
families. This provides greater flexibility for users to define a custom
font stack directly in the URL, improving the overall custom font support.

- Update `bot.html` and `dock.html` to parse comma-separated font strings
  from the `font` URL parameter. Each font in the list is cleaned, escaped,
  and applied to the `--font-family` CSS variable.
- This change continues the effort to expand font customization options
  introduced in previous `feat(fonts)` commits on the `beta` branch.

[auto-enhanced]
Adds the `kwai.png` image to the `sources/images` directory.
This asset provides the official logo for the recently implemented Kwai
streaming platform integration, enabling its display within the UI.
This commit continues the work on Kwai support, which began with commit c7e7b91.

[auto-enhanced]
- In `poll.html`, added a call to `updatePollVisibility()` within the `startPoll()`
  function. This ensures the poll's visual state is correctly rendered and
  updated immediately upon initiation or reset.
- Reordered `totalVotes` and `results` initialization within `startPoll()`
  for consistency.
- Updated the debug log message for `startPoll()` to accurately reflect its operation.
- Also includes an update to the `sources/images/kwai.png` asset.

[auto-enhanced]
Introduces several new settings to customize the appearance and behavior of the map display in `map.html`.

-   **Hide Vote Count Numbers:** Adds a `hideNumbers` parameter to toggle the visibility of numerical vote counts on map markers, allowing for a cleaner "dots only" view.
-   **Color Intensity for Markers:** Implements a `colorIntensity` parameter that applies a red color gradient to markers based on their vote count. Higher counts result in a darker, more intense red.
-   **Map HUD Scale:** Adds a `mapScale` parameter to adjust the overall scale of the map's HUD elements (e.g., markers, labels).
-   **UI Integration:** Provides new controls in `popup.html` for users to configure these settings:
    -   Checkboxes for `Hide vote count numbers` and `Red color intensity`.
    -   A dropdown selector for `HUD Scale` with various percentage options.
-   **Improved Settings Handling:** Updates `map.html` to robustly apply these new settings from URL parameters, payload updates, and individual popup setting changes.
-   **Poll Preset Retrieval:** Streamlines the `getpollpresets` callback logic in `background.js` by removing a redundant UUID check, improving the consistency of poll preset data handling.

[auto-enhanced]
Previously, the Kwai integration utilized a single `MutationObserver` instance
to monitor both chat comments and feed events. This could lead to issues
where only one type of event was reliably observed or where the observer
was unnecessarily reset.

This change introduces dedicated `MutationObserver` instances for Kwai chat
(`info-chat-comment`) and feed (`info-feed-list`) containers in `sources/kwai.js`.

- Replaced single `observer` and `isWatching` variables with `chatObserver` and `feedObserver`.
- Ensures both chat messages and feed events are continuously monitored without conflict.
- Improves reliability and efficiency of Kwai event processing, building on recent Kwai support.

[auto-enhanced]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants