[Plugin] BetterChat v2.5.0

Exopandora · August 11, 2022, 7:24pm

BetterChat

BetterChat is an unofficial addon for TeamSpeak 5 and aims to provide a better chat experience for the TeamSpeak 5 client. It enables support for BBCodes, improving messages sent by TeamSpeak 3 users, and automatic rich embeds for any website, including dedicated embeds for video, audio, image and twitter content. It works in both compact and detailed view.

BBCode support

BetterChat readds support for BBCodes in chat, just like in TeamSpeak 3. Currently the following tags are supported:

Name	Syntax	Example
bold	[b]text[/b]
code	[code]text[/code]
color	[color=hexcode]text[/color] or [color=color]text[/color]
italic	[i]text[/i]
spoiler	[spoiler]text[/spoiler]
strike	[s]text[/s]
underline	[u]text[/u]
url	[url]link[/url] or [url=link]text[/url]

Rich Embeds

BetterChat supports automatic rich embeds for any website, including dedicated embeds for video, audio, image and twitter content. Due to technical limitations, not all video and audio formats are supported at the moment.

Video Embed

Audio Embed

Twitter Embed

Generic Embed

Styling

Custom styling for the image preview can be changed in the style.css.
Rich embeds use the already existing css classes of the TeamSpeak client and should be compatible with already existing themes.

Installation

Notes:

Manual installation only works for TeamSpeak 5 beta 70

Depending on your installation directory you may need elevated permission privileges

The installation process needs to be repeated after each TeamSpeak update

Please check the compatibility section before installing BetterChat

Installer

Installation steps:

Download the installer for your operating system from here
Start the installer
Select your TeamSpeak installation directory
Select “BetterChat”
Click on “Install”

Manual

Installation steps:

Navigate to your TeamSpeak installation directory
Navigate to ./html/client_ui/
Open index.html in that directory with an editor and copy all contents from the index.html of this repository before </head> and save the file
Create a new folder named betterchat
Copy all contents from src/ into the newly created folder
And you are done! You can now start TeamSpeak

Configuration

BetterChat can be enabled and disabled while TeamSpeak is running.
Just go to the settings menu inside TeamSpeak and navigate to Chats.
There you can toggle specific features, like BBCode support or Rich Embeds, or enable and disable the addon entirely.

Compatibility

TeamSpeak	Windows	Linux	MacOS
Beta 77	2.5.0+	2.5.0+	2.5.0+
Beta 76	2.4.0+	2.4.0+	2.4.0+
Beta 75	2.3.0+	2.3.0+	2.3.0+
Beta 74	2.1.0 - 2.2.1	2.1.0 - 2.2.1	2.1.0 - 2.2.1
Beta 73	1.2.0 - 2.2.1	1.2.0 - 2.2.1	1.2.0 - 2.2.1
Beta 72	1.1.0 - 2.2.1	1.1.0 - 2.2.1	n/a
Beta 71			n/a
Beta 70	1.0.0 - 1.0.4	1.0.0 - 1.0.4	1.0.0 - 1.0.4

Acknowledgements

This addon is inspired by the TeamSpeak UNOFFICIAL Plugin Installer by Gamer9200

Gamer92000 · August 11, 2022, 7:49pm

So, I didn’t look too deep at your code, but it looks really well written!
It seems you manipulate the actual DOM the same way I do.
For me, this results in some problems with the virtual scroller of the chat when rendering Twitter embeds.
Technically you can access the vuejs virtual scroller content and manipulate the render function directly. This would even eliminate the need for the MutationObserver and greatly improve performance. Seeing your dedication to this project, this would be an awesome next step.

Also, your README suggests that MP4 (and others) are supported while in fact, it can’t be, as TeamSpeak’s CEF is compiled without proprietary codec support.

Exopandora · August 11, 2022, 8:35pm

Thank you!

I would be very thankful if you would show me a proof of concept!

Good catch! I thought that the website would only list the available codecs. Technically you can get mp4 support in ts5 if you recompile cef with propietary codecs enabled, although its pretty complicated (but it works).

Gamer92000 · August 16, 2022, 8:44pm

It took some considerable time to figure all this vuejs stuff out, but I got there!
By modifying the component loader in the vendors.js file you can manipulate components before they are created or mounted. In this POC I opted to manipulate the tsv-virtual-list-item component. Keep in mind that the component IDs generated by webpack sadly change per update and thus you will need to reverse the main.js after each update.

POC

vendor.js after formatting

--- a/vendor.js
+++ b/vendor.js
@@ -2,7 +2,125 @@

-function e(r) { 
-  var o = n[r];
-  if (void 0 !== o) return o.exports;
-  var i = (n[r] = { id: r, loaded: !1, exports: {} });
-  return t[r].call(i.exports, i, i.exports, e), (i.loaded = !0), i.exports;
-}
+function oldE(r) {
+  var o = n[r];
+  if (void 0 !== o) return o.exports;
+  var i = (n[r] = { id: r, loaded: !1, exports: {} });
+  return t[r].call(i.exports, i, i.exports, e), (i.loaded = !0), i.exports;
+}
+
+const linkRegex =
+  /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
+
+const contentTypeMap = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  webp: "image/webp",
+  svg: "image/svg+xml",
+};
+
+function e(r) {
+  let result = oldE(r);
+  if (r === 661163) {
+    result = {
+      s: function () {
+        var e = this,
+          t = e._self._c;
+        e._self._setupProxy;
+
+        const item = e.item;
+
+        const children = [
+          e.item
+            ? t(
+                e.component,
+                e._g(
+                  e._b(
+                    {
+                      key: e.uniqueId,
+                      tag: "component",
+                      style: { opacity: e.finalHeight ? "1" : "0" },
+                      attrs: { role: "listitem" },
+                    },
+                    "component",
+                    e.filteredProps,
+                    !1
+                  ),
+                  e.wrappedListeners
+                )
+              )
+            : e._e(),
+        ];
+
+        try {
+          if (
+            !item.isSystem &&
+            !item.parsedItem?.hideText &&
+            !(item.parsedItem?.attachments?.length || false)
+          ) {
+            const text = item.original || item.body;
+            if (text.match(linkRegex)) {
+              console.error(this);
+              const extension = text.split(".").pop().split("?")[0];
+              const filename = text.split("/").pop().split("?")[0];
+              if (
+                ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(extension)
+              ) {
+                children.push(
+                  t(
+                    "div",
+                    {
+                      staticClass: "test",
+                      style: { "padding-left": "70px" },
+                    },
+                    [
+                      t("img", {
+                        attrs: { src: text },
+                        style: {
+                          width: "100%",
+                          "max-width": "350px",
+                          cursor: "pointer",
+                        },
+                        on: {
+                          click() {
+                            e.$root.appController.events.onInvokeLightboxEmitter.fire(
+                              {
+                                invocation: {
+                                  url: text,
+                                  thumbnailUrl: text,
+                                  contentType: contentTypeMap[extension],
+                                  contentSize: 0,
+                                  footerActions: [],
+                                  headerLabel: filename,
+                                  bodyLabel: "ᴱᵐᵇᵉᵈ ᵖᵒʷᵉʳᵉᵈ ᵇʸ ᴳᵃᵐᵉʳ⁹²⁰⁰⁰",
+                                },
+                              }
+                            );
+                          },
+                        },
+                      }),
+                    ]
+                  )
+                );
+              }
+            }
+          }
+        } catch (e) {
+          console.error(e);
+        }
+
+        return t(
+          "div",
+          {
+            ref: "itemRef",
+            staticClass: "tsv-virtual-list-item",
+            style: e.itemStyles,
+          },
+          children
+        );
+      },
+      x: result.x,
+    };
+  }
+  return result;
+}

This will crudely embed images and allow you to click on them just like other shared images.
TeamSpeak_FP3MfLvkhp

I actually did this once. But sadly you can neither distribute such a self-compiled version nor can you expect the users to do so. Also I wouldn’t want to compile this for a windows target…

EDIT: changed the POC to do something actually useful.
EDIT2: I just couldn’t stop myself…
Now the embed uses the native overlay to display a larger version of the image when clicked on.

Exopandora · August 17, 2022, 6:49pm

I think this could also be done without modifying the vendor.js. You can access the vue instance with document.body.querySelector("#app").__vue__ or call $0.__vue__ on any other component.

Gamer92000 · August 17, 2022, 7:53pm

Well, I’m not that proficient with vuejs + webpack compiled and bundled code.
So I don’t think you could patch the component loader this way.
Nonetheless, whether you modify the index.html or vendor.js is not much of a difference, is it?

My main problem was that I needed to modify the component loader before the vendor.js was actually loaded in order for it to actually use the patched version. Otherwise, the original version was just everywhere in the call stack and referenced from everywhere directly.

Tioek · August 18, 2022, 6:15pm

awesome work!
sadly i couldn’t make it work with channel description, only chats.

Exopandora · January 8, 2023, 10:59pm

We updated the Installer and BetterChat to be compatible with the latest version of TeamSpeak (5.0.0-beta72). We also fixed the issue with the vuejs virtual scroller (hopefully).

Exopandora · March 27, 2023, 6:24pm

We updated the Installer and BetterChat to be compatible with the latest version of TeamSpeak (5.0.0-beta73).

Exopandora · May 9, 2023, 9:25pm

We updated the Installer and BetterChat to be compatible with the latest version of TeamSpeak (5.0.0-beta74).

Exopandora · October 7, 2023, 11:35am

We updated the Installer and BetterChat to be compatible with the latest version of TeamSpeak (5.0.0-beta75).

Exopandora · October 26, 2023, 7:00pm

We updated the Installer and BetterChat to be compatible with the latest version of TeamSpeak (5.0.0-beta76).

lks901 · November 21, 2023, 12:00pm

You said you updated the installer to version 76 but the installer is not releasing the new version, can you send us a new link so we can get the correct installer?

lks901 · November 21, 2023, 2:29pm

I see that I have now installed the installer, it is working, everything is OK, but can you make the Plugin read these Chat effects in the descriptions of a server’s rooms?
Follow the example below:

Exopandora · December 13, 2023, 9:17pm

We updated the Installer and BetterChat to be compatible with the latest version of TeamSpeak (5.0.0-beta77).

Exopandora · December 13, 2023, 9:19pm

Sorry for the late reply, I didn’t see your message! When I post about a version update in this thread, it is available for download. I noticed that GitHub does some strange ordering with the releases, where the latest version is not always at the top. I will update description to link to the latest release.

EDIT: I added them to the update notice.

Exopandora · December 13, 2023, 9:20pm

Thanks for the suggestion. I will look into it.

Exopandora · December 18, 2023, 6:57pm

BBCodes are supported natively by TS5 in server and channel descriptions, on both TS5 servers and TS3 servers. However, your description looks like it is not properly formatted. For example, the headline is missing a closing [/b] tag. Additionally, tables are not supported by TS5 and neither by BetterChat.