TS3 SyncWatch 1.4-1

Da ich nun mit der Entwicklung recht weit vorangeschritten bin, wollte ich nun mein Ergebnis mal präsentieren:

Es ist ein Webinterface für den Sinusbot, das den Sinn hat, Youtube-Videos gemeinsam und zeitgleich (Latenz < 100ms) ansehen zu können. Das Video bzw. der Player wird dazu synchron mit dem aktuell abgespeilten Track des Sinusbot gehalten.

Wenn ein Video mal auf youtube nicht gefunden wird oder die Rechte fehlen, wird ein Audio-Stream aufgemacht.

Auf der Weboberfläche gibt es in der Sidebar einige Möglichkeiten den Bot zu steuern - sofern man die entsprechenden Rechte dafür vergibt. Eingeloggt muss man dazu auch sein.

Wenn was nicht direkt klappt, einfach mal die Seite neu laden oder neu aus- und einloggen - ich werde weiter an Fixes arbeiten, um sowas in Zukunft auszumerzen.

Kritik, Verbesserungsvorschläge oder sonstige Anmerkungen werden immer gerne gesehen! Bugs natürlich nicht, aber bringt sie mir bitte, wenn ihr welche findet

Since I have progressed with the development quite far, I wanted to present my results now:

A web interface for the Sinusbot, which enables you to watch the currently playing title (has to be loaded per !ytdl or !yt) synchronized to the bot in a youtube window with a latency of less than 100ms.
Also, there is webstream support now for audio-files that cannot be located on youtube and a fallback for tracks that have been played via !yt.

Just have a look at the webinterface, especially the sidebar that you can open up after logging in to see what you can do.

Criticism, suggestions for improvement or other comments are always welcome! Bugs of course not, but bring me please if you find some

Install
1. Install the script like any other by dropping the script *.js file and the folder from the archive into your sinusbot/scripts folder.

a. Edit the server configuration file (config.ini) and edit/set the following values:
IsProxied = true // depends on your use-case
EnableWebStream = true // if you want to use it, otherwise leave it
[Scripts]
AllowReload = true // optional, but can be used via !ytr-chatcommand
EnableTimer = true // was required once, not sure about it now
DisableLegacyEvents = false // not sure if needed

2. Create a user for the webinterface so the sinusbot-script is able to generate a token from it. This step is optional because you can use the login dialog on the webinterface.

a. Give permissions: You basically only need to give [LOGIN] permission for the script to work, but if you want to control the bot via UI you also have to allow [PLAYBACK] and [MANAGE INSTANCES]. If you specify admin credentials or a user with full permissions, you have to be careful, since advanced users could read out the token and control your bot with it (or maybe worse).



b. let your bot listen to commands if you want to use them



c. If no token is given and you try to login to the webinterface, then the webinterface will ask for username and password to store until the token invalidates or you log out.

3. Activate the script in your sinusbot script settings and configure the script settings. Save.


The custom chat message option may not be available to you yet! Just wait for a new release.

4. Enjoy!



Basic Usage
- Write !sw to the ts3-bot via teamspeak private message and you will get back an authenticated Link to the web interface.
- Write !swc and everyone in bot channel will get a link
Note: If that does not work, you can go also open it via your sinusbot script settings by clicking the name of the script or navigate to /scripts/syncwatch manually.

Public URL (re-)routing (optional)
If you provided a custom url via config, you will most probably need to setup your routing for it to work. I can provide you with my apache virtualhost config at least:

ProxyPass /api http://localhost:8087/api
ProxyPassReverse /api http://localhost:8087/api

ProxyPass / http://localhost:8087/scripts/syncwatch/
ProxyPassReverse / http://localhost:8087/scripts/syncwatch/

Webinterface

• Login via Username and Password or URL parameters (generated through text-chat command !sw or !swc)
• Instance-Selection
• Media-Player that is being synchronized to the sinusbot instance
  • !ytdl and !yt supported
  • WebStream-fallback for titles not found on youtube (audio only)
• Sidebar with bot-controls, tools and settings
  • Search for tracks in library
  • Play/Pause/Stop/Previous controls
  • Add new download or streaming job
  • TS3-Channel-list with possibility to navigate through channels and see whos online

Chatcommands

• see below

You can use these chatcommands on sinusbot that listens to chatcommands via teamspeak.

• !sw: returns a link to SyncWatch in private chat
• !swc : posts the link in channel chat
• !swr : reloads all scripts

TODO
- html5-player-theme
- volume controls
- instance respawn buttons (start, stop instance)
- chatroom on webinterface?
- handle yt-(player-)errors in a more efficient way

DONE
- added possibility to download and stream new tracks via webinterface
- better fallback mechanism in case of media errors (e.g. youtube-permissions)
- added support for streaming tracks played via !yt
- improved overall layout, style and stability
- migrated code and configs for compatibility with sinusbot 1.0a6
- verified sinusbot 1.0 integration
- added progress-stepper
- re-implemented mediaplayers
- re-implemented player-controls
- re-implemented instance-selection
- re-implemented login interface
- re-implemented sidebar
- re-integrated job-list
- re-integrated ts-list
- refactored and refurbished components: mediaplayer, trackinfo, bot-controls, login, instance-selection
- moved from vue to react
- added teamspeak3 channel list in sidebar
- upgrade to sinusbot 0.13.37
- adjustable syncing intervals
- implement web-streaming
- moved controls to sidebar
- added overlay when in sync mode
- moved to vue
- minified most parts for performance
- fix sync when running in background (to prevent lagging)
- improve prev play stop track control
- fix ui bugs when using controls too much
- add instance selection
- finish login
- implemented en-/disabling of some sections in certain contexts
- implemented authorization via web interface
- added dropdown for better track selection
- added an input field for playing already loaded tracks on submit
- added play, stop, prev buttons for controlling the sinusbot instance
- added currently running track info
- implemented url routing for authorization via teamspeak-link
- implemented synchronization from sinusbot (server) to youtube-player (client) for !ytdl-title
- embedded youtube player
- added seconds parameter
- added configuration parameters for username and password to be used by the script
- created sinusbot script for generating link to the youtube title running