Git Product home page Git Product logo

twitchtvchat's People

Contributors

pardoman avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

twitchtvchat's Issues

Changing channel prevents extension from re-setting the overlay

This happens because chaning the current channel may happen through ajax, and a new video player is created. However, the extension is still loaded and keeping a reference to a no-longer-in-stage canvas2d.

Solution: detect when the cached player gets removed from dom and clear extension's internal variables.

Display user name with messages

Might be cool to have.
Maybe have an option to toggle it on/off

Finally, using some sort of color to distinguish the name from the message could be nice. Will have to try and see if it actually works.

Text lines overlap each other too much

This is because it relies on some simple Math.random() logic, which will never be great.

What we need is some sort of priority queue, that takes into account the length of the text, so that short text can co-live in the same line while long text can occupy a line without any other new text jumping on it.

Upon tabbing back to tab, overlay text would be pilled up together to the right.

To better repro this issue, inject overlay to an active stream chat.
For example, a tournament event

Repro steps:

  1. Inject overlay
  2. Change browser tab to something else (google.com for example)
  3. Wait about 10 seconds.
  4. tab back to twitch stream

RESULT: Notice that new text will show up and pilled up to the left.
EXPECTED: Chats should not be piled to the right. Some texts should be midway through their path, other leaving the screen on the left.

Change implementation from Canvas to Dom or Svg

Canvas is actually not great when it comes to performance.
There's way too much re-rendering of the whole area, specially in fullscreen mode.

A better approach is to leverage browser's native text rendering.

Full screen support

Ideally this extension should work on fullscreen mode. The problem is that the video player is flash, and drawing html on top of flash is not doable afaik.

Maybe when the html5 video player is available we can look into it.

Channel rehosting breaks extension

Steps:

  1. Enter a channel
  2. Wait until it finishes and rehosts some other one (lol)

RESULT: The extension fails to re-inject itself to the rehosted stream
EXPECTED: The extension re-injects to the rehosted steam smoothly.

WORKAROUND: Refresh the page.

Support chat icons

image

Would be nice to have icons within the bullet text, like those from JustinBob4 in the image above.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.