feat(HUD): subtitles

src-theme/public/components/subtitles.json

@@ -0,0 +1,14 @@
+{
+  "name": "Subtitles",
+  "enabled": false,
+  "singleton": true,
+  "alignment": {
+    "horizontalAlignment": "Right",
+    "horizontalOffset": 15,
+    "verticalAlignment": "Bottom",
+    "verticalOffset": 15
+  },
+  "tweaks": [
+    "DISABLE_SUBTITLES_HUD"
+  ]
+}

src-theme/public/metadata.json

@@ -37,7 +37,8 @@
     "Taco",
     "Image",
     "Text",
-    "KeyBinds"
+    "KeyBinds",
+    "Subtitles"
   ],
   "fonts": [
     "Inter-Black.ttf",

src-theme/src/colors.scss

@@ -43,3 +43,6 @@ $item-damage-base-color: black;
 $keybinds-base-color: black;
 $keybinds-text-color: white;
 $keybinds-enabled-color: #4dac68;
+
+$subtitles-base-color: rgba(black, 0.5);
+$subtitles-direction-color: white;

src-theme/src/integration/events.ts

@@ -7,12 +7,11 @@ import type {
     Proxy,
     Screen,
     Server,
-    Session, Setting,
+    Session, Setting, SoundListenerTransform, SubtitlesHudEntry,
     TextComponent,
 } from "./types";
 
 
-
 export interface EventMap {
     socketReady: void;
 
@@ -56,6 +55,7 @@ export interface EventMap {
     subtitle: TitleEventSubtitle;
     titleFade: TitleEventFade;
     clearTitle: TitleEventClear;
+    subtitlesHudEntries: SubtitlesHudEntriesEvent;
 
     //GameEvents.kt
     key: KeyEvent;
@@ -260,6 +260,11 @@ export interface TitleEventClear {
     reset: boolean;
 }
 
+export interface SubtitlesHudEntriesEvent {
+    soundListenerTransform: SoundListenerTransform;
+    audibleEntries: SubtitlesHudEntry[];
+}
+
 export interface VirtualScreenEvent {
     type: string;
     action: "open" | "close";

src-theme/src/integration/types.ts

@@ -433,6 +433,20 @@ export interface ClientUpdate {
 export interface Browser {
     url: string
 }
+export interface SoundListenerTransform {
+    position: Vec3;
+    forward: Vec3;
+    up: Vec3;
+}
+
+export interface SubtitlesHudEntry {
+    text: TextComponent | string;
+    range: number | 'Infinity' | '-Infinity';
+    sounds: {
+        location: Vec3;
+        time: number;
+    }[];
+}
 
 export interface HitResult {
     type: "block" | "entity" | "miss";

src-theme/src/routes/hud/Hud.svelte

@@ -19,6 +19,7 @@
     import DraggableComponent from "./elements/DraggableComponent.svelte";
     import KeyBinds from "./elements/KeyBinds.svelte";
     import GenericPlayerInventory from "./elements/inventory/GenericPlayerInventory.svelte";
+    import Subtitles from "./elements/Subtitles.svelte";
 
     let zoom = 100;
     let metadata: Metadata;
@@ -93,6 +94,8 @@
                     <img alt="" src="{c.settings.uRL}" style="scale: {c.settings.scale};">
                 {:else if c.name === "KeyBinds"}
                     <KeyBinds/>
+                {:else if c.name === "Subtitles"}
+                    <Subtitles/>
                 {/if}
             </DraggableComponent>
         {/if}

src-theme/src/routes/hud/elements/Subtitles.svelte

@@ -0,0 +1,88 @@
+<!--
+  - This file is part of LiquidBounce (https://github.com/CCBlueX/LiquidBounce)
+  -
+  - Copyright (c) 2015 - 2025 CCBlueX
+  -
+  - LiquidBounce is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU General Public License as published by
+  - the Free Software Foundation, either version 3 of the License, or
+  - (at your option) any later version.
+  -
+  - LiquidBounce is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU General Public License for more details.
+  -
+  - You should have received a copy of the GNU General Public License
+  - along with LiquidBounce. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import {listen} from "../../../integration/ws";
+    import type {SoundListenerTransform, SubtitlesHudEntry} from "../../../integration/types";
+    import {fade} from "svelte/transition";
+    import {flip} from "svelte/animate";
+    import TextComponent from "../../menu/common/TextComponent.svelte";
+    import {crossProduct, dotProduct, minus, normalize} from "../../../util/math_utils";
+
+    let soundListenerTransform: SoundListenerTransform = $state({
+        position: {x: 0, y: 0, z: 0},
+        forward: {x: 0, y: 0, z: 0},
+        up: {x: 0, y: 0, z: 0},
+    });
+    let audibleEntries: SubtitlesHudEntry[] = $state([]);
+
+    // SoundListenerTransform#right
+    const right = (soundListenerTransform: SoundListenerTransform) => crossProduct(soundListenerTransform.forward, soundListenerTransform.up);
+
+    // Handle sound update
+    listen("subtitlesHudEntries", (event) => {
+        soundListenerTransform = event.soundListenerTransform;
+        audibleEntries = event.audibleEntries;
+    });
+</script>
+
+{#if audibleEntries.length}
+    <div class="subtitles-container" transition:fade={{duration: 200}}>
+        {#each audibleEntries as entry (entry.text)}
+            {@const directions = entry.sounds.map(sound =>
+                dotProduct(normalize(minus(sound.location, soundListenerTransform.position)), right(soundListenerTransform)))}
+            <div class="subtitles-entry" transition:fade={{duration: 200}} animate:flip={{duration: 200}}>
+                {#if directions.some(direction => direction && direction > 0)}
+                    <span class="direction">&lt;</span>
+                {/if}
+                <TextComponent textComponent={entry.text} fontSize={14}/>
+                {#if directions.some(direction => direction && direction < 0)}
+                    <span class="direction">&gt;</span>
+                {/if}
+            </div>
+        {/each}
+    </div>
+{/if}
+
+<style lang="scss">
+  @use "../../../colors.scss" as *;
+
+  .subtitles-container {
+    background-color: $subtitles-base-color;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .subtitles-entry {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+
+    .direction {
+      color: $subtitles-direction-color;
+    }
+  }
+</style>

src-theme/src/util/math_utils.ts

@@ -0,0 +1,80 @@
+/*
+ * This file is part of LiquidBounce (https://github.com/CCBlueX/LiquidBounce)
+ *
+ * Copyright (c) 2015 - 2025 CCBlueX
+ *
+ * LiquidBounce is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * LiquidBounce is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with LiquidBounce. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import type {PlayerData, Vec3} from "../integration/types";
+
+export const distanceSq = (pos1: Vec3, pos2: Vec3): number =>
+    (pos1.x - pos2.x) ** 2 + (pos1.y - pos2.y) ** 2 + (pos1.z - pos2.z) ** 2;
+
+export const distance = (pos1: Vec3, pos2: Vec3): number =>
+    Math.sqrt(distanceSq(pos1, pos2));
+
+export const normalize = (v: Vec3): Vec3 => {
+    const length = Math.sqrt(v.x ** 2 + v.y ** 2 + v.z ** 2);
+    return {
+        x: v.x / length,
+        y: v.y / length,
+        z: v.z / length,
+    };
+};
+
+export const minus = (v1: Vec3, v2: Vec3): Vec3 => ({
+    x: v1.x - v2.x,
+    y: v1.y - v2.y,
+    z: v1.z - v2.z,
+});
+
+export const dotProduct = (v1: Vec3, v2: Vec3): number =>
+    v1.x * v2.x + v1.y * v2.y + v1.z * v2.z;
+
+export const crossProduct = (v1: Vec3, v2: Vec3): Vec3 => ({
+    x: v1.y * v2.z - v1.z * v2.y,
+    y: v1.z * v2.x - v1.x * v2.z,
+    z: v1.x * v2.y - v1.y * v2.x,
+});
+
+/**
+ * @param centerX center (zero) X
+ * @param centerZ center (zero) Z
+ * @param yaw yaw in degrees. positive-Z = 0 deg.
+ * @param targetX target (object) X
+ * @param targetZ target (object) Z
+ * @return angle difference in radians
+ */
+const calculateRelativeDirection = (centerX: number, centerZ: number, yaw: number, targetX: number, targetZ: number) => {
+    const dx = targetX - centerX;
+    const dz = targetZ - centerZ;
+    const targetAngleRad = Math.atan2(-dx, dz);
+
+    // -\pi to \pi
+    let angleDiff = targetAngleRad - yaw * Math.PI / 180;
+
+    // normalize
+    angleDiff = (angleDiff + 2 * Math.PI) % (2 * Math.PI);
+
+    return angleDiff;
+}
+
+export const calculatePlayerRelativeDirection = (playerData?: PlayerData, position?: Vec3) => {
+    if (playerData && position) {
+        return calculateRelativeDirection(playerData.position.x, playerData.position.z, playerData.yaw, position.x, position.z);
+    } else {
+        return undefined;
+    }
+}

src/main/java/net/ccbluex/liquidbounce/injection/mixins/minecraft/gui/MixinSubtitlesHud.java

@@ -0,0 +1,114 @@
+/*
+ * This file is part of LiquidBounce (https://github.com/CCBlueX/LiquidBounce)
+ *
+ * Copyright (c) 2015 - 2025 CCBlueX
+ *
+ * LiquidBounce is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * LiquidBounce is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with LiquidBounce. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package net.ccbluex.liquidbounce.injection.mixins.minecraft.gui;
+
+import net.ccbluex.liquidbounce.event.EventManager;
+import net.ccbluex.liquidbounce.event.events.SubtitlesHudEntriesEvent;
+import net.ccbluex.liquidbounce.injection.mixins.minecraft.gui.custom.MixinSubtitlesHudEntryAccessor;
+import net.ccbluex.liquidbounce.integration.theme.component.ComponentManager;
+import net.ccbluex.liquidbounce.integration.theme.component.ComponentTweak;
+import net.minecraft.client.MinecraftClient;
+import net.minecraft.client.gui.DrawContext;
+import net.minecraft.client.gui.hud.SubtitlesHud;
+import org.spongepowered.asm.mixin.Final;
+import org.spongepowered.asm.mixin.Mixin;
+import org.spongepowered.asm.mixin.Shadow;
+import org.spongepowered.asm.mixin.Unique;
+import org.spongepowered.asm.mixin.injection.At;
+import org.spongepowered.asm.mixin.injection.Inject;
+import org.spongepowered.asm.mixin.injection.callback.CallbackInfo;
+
+import java.util.Arrays;
+import java.util.List;
+
+@Mixin(SubtitlesHud.class)
+public abstract class MixinSubtitlesHud {
+
+    @Shadow
+    @Final
+    private List<SubtitlesHud.SubtitleEntry> entries;
+
+    @Shadow
+    @Final
+    private MinecraftClient client;
+
+    @Shadow
+    @Final
+    private List<SubtitlesHud.SubtitleEntry> audibleEntries;
+
+    @Inject(
+        method = "render",
+        at = @At(value = "INVOKE", target = "Lnet/minecraft/client/gui/DrawContext;createNewRootLayer()V", shift = At.Shift.BEFORE),
+        cancellable = true
+    )
+    private void applyTweak(DrawContext context, CallbackInfo ci) {
+        if (ComponentManager.isTweakEnabled(ComponentTweak.DISABLE_SUBTITLES_HUD)) {
+            ci.cancel();
+        }
+    }
+
+    @Inject(
+        method = {/*"onSoundPlayed", */"render"},
+        at = @At("RETURN")
+    )
+    private void applyEvent(CallbackInfo ci) {
+        liquid_bounce$fireEvent(this.client, this.audibleEntries);
+    }
+
+    @Unique
+    @SuppressWarnings({"unchecked", "rawtypes"})
+    private void liquid_bounce$fireEvent(MinecraftClient client, List<SubtitlesHud.SubtitleEntry> entries) {
+        var soundListenerTransform = client.getSoundManager().getListenerTransform();
+        if (entries.isEmpty()) {
+            EventManager.INSTANCE.callEvent(new SubtitlesHudEntriesEvent(soundListenerTransform, List.of()));
+            return;
+        }
+
+        var array = entries.toArray(); // Prevent concurrent modification
+        for (int i = 0, arrayLength = array.length; i < arrayLength; i++) {
+            var it = array[i];
+            var subtitleEntry = (SubtitlesHud.SubtitleEntry & MixinSubtitlesHudEntryAccessor) it;
+            var sounds = subtitleEntry.getSounds();
+            List<SubtitlesHudEntriesEvent.SoundEntry> innerList;
+            if (sounds.isEmpty()) {
+                innerList = List.of();
+            } else {
+                var innerArray = sounds.toArray();
+                for (int j = 0, innerArrayLength = innerArray.length; j < innerArrayLength; j++) {
+                    innerArray[j] = new SubtitlesHudEntriesEvent.SoundEntry(
+                        ((SubtitlesHud.SoundEntry) innerArray[j]).location(),
+                        ((SubtitlesHud.SoundEntry) innerArray[j]).time()
+                    );
+                }
+                innerList = (List<SubtitlesHudEntriesEvent.SoundEntry>) (List) Arrays.asList(innerArray);
+            }
+            array[i] = new SubtitlesHudEntriesEvent.Entry(
+                subtitleEntry.getText(),
+                subtitleEntry.getRange(),
+                innerList
+            );
+        }
+
+        EventManager.INSTANCE.callEvent(
+            new SubtitlesHudEntriesEvent(soundListenerTransform, (List<SubtitlesHudEntriesEvent.Entry>) (List) Arrays.asList(array))
+        );
+    }
+
+}