My problem:
I have no idea which standard to use when writing code, how to write tests etc.

The solution i would like:
Adding a CONTRIBUTING.md or / and CODE_OF_CONDUCT.md which describes the workflow etc. This way i can contribute with (hopefully) clean code that meets your requirements.

LIVE: continuation.actions[index].addChatItemAction.item.clientId in request to get_live_chat?key={hash}.

VOD: seems like the entire chat archive is sent in bulk, in a request to live_chat_replay?continuation={hash} which returns an HTML document, which contains a script that sets window["ytInitialData"] to a big json object. The client id is located at continuationContents.liveChatContinuation.actions[index >= 1].replayChatItemAction.Actions[index = 0].addChatItemAction.clientId
Contains multiple chat messages

• Livestream viewer count
• Livestream uptime

Should not be displayed when viewing a VOD (and I doubt the information is available on VODs)

When you click 'Blacklist User' on a Chat message, it will correctly update the user filter in the settings to show that the user is blacklisted, however, if the user is a channel moderator, messages they send will continue to show up (when the 'Show Mod Messages' option is enabled, if it's not, it woks as intended).

Describe the bug
Can't comment on members only chat even tho I'm a member

To Reproduce
Steps to reproduce the behavior:

1. Go to video with members only chat
2. Click on liveTL
3. "Members-only mode is on" appears and can't comment (I can by using the pop-up chat option)

Expected behavior
https://i.imgur.com/yaqZKry.png

Screenshots
https://i.imgur.com/YGSMg2f.png

Desktop (please complete the following information):

• OS: w10
• Browser Brave
• whatever the newest is

Edit:
Tried to delete all cookies but changed nothing

Is your feature request related to a problem? Please describe.
Translators always need to prefix their chat messages with tags such as [EN] or TL: , ...etc.
Which can be cumbersome having to type those (special) characters if they are trying to translate quickly.

Describe the solution you'd like
It would be cool if in LiveTL you could configure that whenever you send any chat messages, a preselected prefix would always be appended e.g. Is she always like that? -> [EN]: Is she always like that?.

This prefix could be a simple textbox in the settings, or a selection of default prefix types based on supported languages.

The chat should have an option to toggle translations timestamps visibility, it would help with following what is happening in stream

Is your feature request related to a problem? Please describe.
Sometimes I want to watch 2 streams, but I only have 1 monitor.
Current layout for left/right will make the video quite small.

Portrail will make the chat quite small.

Describe the solution you'd like
Is it possible to have additional layout for the chat something like this (rough edit using chrome dev tool):

Comparison with edited and original.

Add the feature of detecting whether the extension is installed to the LiveTL website. If the extension is not installed, prompt the user to install the extension from the appropriate extension store.

mod messages shouldn't appear in captions, there should be a way u can differentiate between translations and mod/custom user filters and only display translations in captions.

Add a feature in which if the streamer is detected to be Houshou Marine, the favicon is changed to BL. A BL favicon is in img/blfavicon.ico.

Describe the solution you'd like
Add an option that allows you to add your custom language/TL tags for the extension to filter out/use for autoprefixes. Some of translators use tags like [Trans/trans] on some VTuber channels.

Describe alternatives you've considered
As an alternative for now, I just manually add translator usernames to the user filter.

Additional context

Describe the bug
[英訳/EN] is not captured.

To Reproduce

1. Go to a livestream
2. Post something with [英訳/EN].
3. Realise it's not captured.

Expected behavior
Message being captured.

Desktop (please complete the following information):

• Firefox 84

Describe the bug
When watching a VOD (archived streams) with LiveTL, translations from 5-10 seconds in the "future" of the current chat replay are shown, instead of following the current video timestamp.

To Reproduce
Steps to reproduce the behavior:

1. Open a VOD with LiveTL.
2. Look at the timestamps of translations in LiveTL VS the current video timestamp.

Expected behavior
Translations are shown at the correct timestamp.

Desktop (please complete the following information):

• OS: Windows 10 1909
• Browser: Firefox 84.0
• Version: LiveTL 3.0.4

Additional context & Screenshots
Here's a couple of VODs I've tried to reproduce this in, with timestamps to nearby translation(s):
https://youtu.be/rsgvyBckwZw?t=3283

https://youtu.be/IW2t52ps27s?t=1282

Is your feature request related to a problem? Please describe.
The YouTube UI will always display the region language in the extension, despite any user settings.

Describe the solution you'd like
A language selector in LiveTL preferences that allows users to select the language that the YouTube chat UI uses.

Additional context
Suggested by gvarph on Discord

Dark mode would be nice.

Similar to what we're doing for moderators

If this autoplay setting is not set to "Allow Video and Audio", video will not be able to play even after pressing play manually. Audio will work.

Tested on both Windows and GNU/Linux versions of Firefox.

Is your feature request related to a problem? Please describe.
We have many integration-level bugs.

Describe the solution you'd like
The solution is to have integration tests using Selenium or similar software to automatically test various scenarios for common bugs.

Describe alternatives you've considered
We could have human testers, but that is too slow of a feedback loop and human testing can be unreliable. We could still have human testers testing developer builds after they are integration tested.

Additional context
n/a

Describe the bug
On a Fubuki stream one of the most "famous" translators doesnt get visualized on the embed

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Firefox
• Version latest

I'm not sure why, but YouTube chat frequently freezes for me. On YouTube, hiding and showing the chat fixes it. However, in the LiveTL interface, there doesn't seem to be a way to do this other than refreshing the page. I don't know how common this problem is, but it would be nice to have a button to refresh just the chat.

When it said that it saved preferences, I assumed that it also meant user filters, so I added a bunch of custom users that appear in other vtuber streams I watch, but that wasn't the case. I think this is an important thing that needs to be added.

Describe the bug
Cannot resize chat windows horizontally - vertically (resizing the live vs translated chat) works. LiveTL loads in like this:

Any attempt to resize the chat window left and right results in this(while holding down mouse button):

and then this screen when mouse button is let go:

To Reproduce
Steps to reproduce the behavior:

1. Go to a stream in LiveTL
2. Try to resize chat window horizontally

I am not fully sure what causes this - some stream chats work fine but most streams I cannot resize correctly.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
Before moving chat left and right:

While moving left and right AND mouse is held down:

After letting go of mouse after attempting to resize left and right:

If I try to resize again, it stays as this ^ above screenshot

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: Version 87.0.4280.88

Describe the bug
When the chat side is set to left, the sizes of the panels are not persisted and go to 50%. Firefox and Chrome are affected.

To Reproduce
Steps to reproduce the behavior:

1. Go to any live stream
2. Open in LiveTL
3. Click Chat side: left in settings
4. Resize the panel horizontally
5. Reload the page
6. Notice that the horizontal panel size was not persisted

Expected behavior
The horizontal panel size should stay the same after the reload.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version v4.0.23

Additional context
Reported by RingMaster23 in the Discord.

Is your feature request related to a problem? Please describe.
When concatenating files, one has to manually add new files to the Makefile for the build.

Describe the solution you'd like
We can transition to samepack. It will keep the bundle readable so our review times stay low.

Describe the bug
I'm probably doing this wrong, but I can't get the extension working unpacked. I'd like to run the extension from source, but my browser won't load the extension with the message that ./js/collect.js is missing. I've tried using the chrome zip from the release page, and also building from source, but both cause the same error.

To Reproduce
Steps to reproduce the behavior:

1. clone the repo

git clone https://github.com/kentonishi/livetl

2. run make

cd livetl
make

3. Open chrome://extensions in the browser
4. enable developer mode
5. click "load unpacked extension"
6. Navigate to the repo, and select the livetl/build/chrome/LiveTL folder
7. Observe that it doesn't load

Expected behavior
I expected the extension to load.

Screenshots

Desktop (please complete the following information):

• OS: arch linux
• Browser: Vivaldi
• Version: Latest develop branch (v4.0.18, aka commit 3739be5)

Additional context
Add any other context about the problem here.

Sometimes, translators use the above string for the prefix on their translation messages, which currently doesn't get caught by filter.js under its current rules.

I'd assume that this issue exists for other languages as well; it would be more flexible to be able to instead specify a custom prefix to watch for (in the event that for one particular instance of a stream, somebody decides to use a prefix that doesn't fall under a good set of rules). Ideally, custom prefix(es) would work on top of the existing preset prefixes instead of replacing or overriding the currently selected prefix.

Describe the bug
The favicon for LiveTL gets messed up by horny mode.

To Reproduce
1 - Use LiveTL to watch a Marine stream
2 - Notice that when you open other streams in LiveTL, sometimes the BL favicon will be used and sometimes, the favicon will go away.

Expected behavior
The BL favicon should only appear when watching Houshou Marine.

Screenshots

Additional context
Reported by SPCresent in the Discord

Describe the bug
When using brave browser, on holotools, when you click the expand translations button, YTC and LiveTL does not render correctly.

To Reproduce
Steps to reproduce the behavior:

1. Open a stream on holotools in Brave Browser
2. Click on expand translations

Expected behavior
The translations pane appears like in other browsers

Screenshots
Screenshot of incorrect rendering

Desktop (please complete the following information):

• Browser: Brave
• Version: v4.0.21

Additional context
Add any other context about the problem here.

Browser: Chrome 87.0.4280.66
OS: Windows 10
Adblock: disabled

The "sharing LiveTL with your friends" link currently doesn't do anything. Looking at the href it's currently pointing to javascript:void(0);. I imagine this isn't so much a bug as just something you haven't gotten to yet.

Add functionality to index.html to detect user agent and redirect to the proper extension store or redirect to the GitHub repo or FAQ if the browser is not supported.

Add a frequently asked questions page with the common questions such as dark mode and mobile support. This will be in about/ and linked to in README.md.

Describe the bug
As of https://github.com/KentoNishi/LiveTL/pull/45 being merged the buttons for LiveTL not longer appear under chat in Firefox.

To Reproduce
Steps to reproduce the behavior:

1. Use Firefox
2. Open any live stream
3. Ensure chat loads
4. No buttons appear

Expected behavior
Expected result is for the buttons to appear under the chat once the chat has been loaded.

Screenshots
https://cdn.discordapp.com/attachments/783899546718699561/785740022279438336/unknown.png

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Version 84.0

Is your feature request related to a problem? Please describe.
When watching streams, it is sometimes hard to concentrate on translations and the content.

Describe the solution you'd like
I propose an optional text to speech mode in which translations are spoken by the computer. An example partial implementation in javascript is

function speak(text) {
  const utterance = new SpeechSynthesisUtterance(text);
  speechSynthesis.speak(utterance);
}
speak("translation");

Describe alternatives you've considered
n/a

Additional context
n/a

Describe the bug
When running multiple streams in holotools translations from a stream appear in all translation windows for each channel.

To Reproduce
Steps to reproduce the behavior:

1. Go to holotools
2. Click on multiple streams and expand translations.
3. Wait for a Translation
4. See error

Expected behavior
Each translation pannel should show only the translations for their respective streams

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version Version 87.0.4280.88

In the full-window TL mode on PC, selecting to block/report user makes the menu appear but the entire chat gets darkened. Clicking anything closes both the report/block menu and the dark overlay without being able to use them.

Screenshots

Desktop:

• OS: Windows 7 64bit
• Browser: Vivaldi
• Version: 2.11.1811.52 (Stable channel) (32-bit)

Is your feature request related to a problem? Please describe.
When developing the extension, if there are not translators in chat, one has to write test translation in chat which negatively affects the experiences of other LiveTL users.

Describe the solution you'd like
Add a developer caption. ex: [dev]

Describe alternatives you've considered
n/a

Additional context
n/a

Describe the bug
When the chat mode is switched from Top Chat to Live Chat, the auto-prefix functionality doesn't work.

To Reproduce
Steps to reproduce the behavior:

1. Open LiveTL
2. Enable auto-prefix
3. Switch chat to Live Chat
4. Auto-prefix doesn't work

Expected behavior
Auto-prefix should work

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Version 86

Additional context
Reported by Majima in Discord.

Is your feature request related to a problem? Please describe.
Read aloud mode has a fixed volume.

Describe the solution you'd like
Have a volume slider for read-aloud mode.

Describe alternatives you've considered
n/a

Additional context
Idea from Fortune in the Discord.