csharpfritz / fritz.streamtools

Handy tools for managing my live stream, built with ASP.NET Core

Fritz.StreamTools

Handy tools for managing my a live video stream and outputting video widgets that can be used directly in OBS or other streaming tools.

Features

The project is intended to be built as a Docker container and configured with a series of environment variables. It is intended to support a single-user, and not run on the public-facing internet.

The following features are supported by this project:

• A checklist rundown of segments of the show (/rundown) that is updated from another page (/admin)
• A followers count API that reports the total number of followers: GET /api/Followers
• A followers count page that can be easily styled and formatted at /Followers/Count
• A followers goal meter that can be sized and have its goal caption and value set, complete with configuration screen at /Followers/Goal/Configuration

Services Supported

The project supports reading stream metrics from the following services:

• Mixer
• Twitch

Contributing

This application was built with ASP.NET Core 2.0 and can be built on Mac, Linux, and Windows. Download the .NET SDK and grab a copy of Visual Studio Code to get started on any platform.

How to contribute

1. Open new issue or find some interesting,
2. Fork repository,
3. Create new branch in your fork from dev,
4. Code something awesome,
5. Create pull-request from your branch to our dev branch,
6. In pull request write what you did and why, if it requires an explanation,
7. (Optional) Answer questions or correct your code if needed,
8. Celebrate that you are new Contributor :)

More about forking

Building and running locally

1. Ensure pre-requisites:
   1. .NET Core 2.1 SDK
   2. Docker
2. Fork repository
3. Clone
4. (Recommended) Open in editor such as Visual Studio or Visual Studio Code
5. Add GitHub > User and AuthenticationToken to Fritz.StreamTools\appsettings.json (no scopes needed)
6. Run dotnet build .\Fritz.StreamTools.sln to confirm build success
   1. If error: A compatible SDK version for global.json version, update the version in global.json to match your .NET version.
   2. If error: \Fritz.StreamTools\Test\Test.csproj : error NU1605: Detected package downgrade, update the version numbers to match what is expected based on the error.
7. Run docker-compose -f "docker-compose.yml" -f "docker-compose.override.yml" up -d --build
8. Run docker ps to find the port (for example: "32768" in "0.0.0.0:32768->80/tcp")
9. Browse to http://localhost[port]

Configuration

Google Fonts Api

To use your own Google Fonts Api key without modifying the Fritz.StreamTools\appSettings.json you can place your key in the secrets.json file in the path appropriate for your OS.

The userSecretsId is 78c713a0-80e0-4e16-956a-33cf16f08a02 and can be found in Fritz.StreamTools\Fritz.StreamTools.csproj.

If you are using Visual Studio you can use the integrated User Secrets management UI

The secrets.json file should look like this

{
  "GoogleFontsApi": {
    "Key": "<YOUR API KEY>"
  }
}

Naming guideline for unit tests

• Create a folder for each "logical class"
• Create a test class for each feature to test - end with "Should"
• Test Methods should describe what they are inspecting and what they're given, if anything.. ending with "_Given..." Example: StreamService.CurrentFollowerCountShould.MatchCurrentFollowerCount_GivenOneService

fritz.streamtools's Issues

Resume with adding SignalR to Followers Goal

Friztbot URL Checking

Could we setup Fritzbot to allow only certain URL's into the chat window.

List allowed url's in the config

suggestion for non package manager

this project looks really interesting

https://github.com/RendleLabs/dotnet-unpkg

Docker and 2.1 preview (https hosting)

Hi

I try to catch your videos on YouTube. Not always possible to do it live.

I'm looking at doing some work in 2.1, but struggling with Docker files (and port 443 and Https).

Any chance you could do a brief chat on setting up from scratch?

Thanks

Need to update follower goal documentation

This file is out of date: /Views/Followers/Docs_Goal.cshtml

Preview.js still contains magic strings for Model properties

The function loadPreview() builds up the GET string using hard coded strings instead of referencing the ConfigurationModel

Problem with .gitattributes

The .gitattributes file added in the last commit is causing file modifications on checkout on Windows.

If you take a fresh clone on Windows you start with 32 modified files in branch master, which is not great.

I don't know the correct way to resolve this, or if it is going to be a recurring problem, but thought I would mention it as I spent ages trying to get my fork in line with this repo and kept thinking I was doing something wrong when I had 32 modified files every time!

FritzBot needs a !skeet command

Should be able to clone the QuoteCommand and build a very similar interface

Suggestion/Discussion: Decouple Fonts from Google Fonts

To clarify: Having the chance to also enter a system/browser font and enable Google Fonts as a feature, maybe with a checkbox.

Currently all font names are validated against Google Fonts.

Use NameOf to pass followerGoalConfiguration properties

/Views/Followers/GoalConfiguration.cshtml

Fix for saving background colours was dropped

Part of the fix for saving background colours in the FollowerGoalConfiguration page was lost in the refactoring.

Line 206 of GoalConfiguration.js needs to be changed again to reference index 1 of the array.

bgBlendField = newNode.getElementsByTagName('input')[1];

Create and save settings

Upgrade to dotnetcore 2.1

Not wanting to spoil the fun, this is NOT a PR, but just confirming that the move to 2.1 does work with just a few changes, and leaving this here as a reference in case it is useful.

https://github.com/SQL-MisterMagoo/Fritz.StreamTools/commits/feature-dotnetcore2.1

Follower Goal does not automatically update

FritzBot needs to handle markdown

BUG: FollowerGoal does not show the current number of Followers

Without an override on CurrentValue, no value is shown

Feature: Moderators should be able to adjust volume

Moderators should be able to execute a command to adjust the volume of the music on stream

Need a "DummyService" for Development

Not everyone has access to Twitch and Mixer... for UI development, it would be handy to have a DummyService that outputs simple data

Need to set font-color for filled in bar elements

New Merged EventList

It would be great if we could mimic the eventlist from StreamLabs, and include merged events from all sources

ex: Follow on Twitch, Follow on Mixer

FritzBot doesn't stay connected to services

The bot silently drops its connection to Twitch. Perhaps Mixer also...

Need to handle HTTP 500 errors from TwitchService

Review "lost PR"

The contents of PR #28 have been dropped... need to relocate and re-merge

Add docs for Follower Goal

Document the new configuration options including empty bar color

GoalConfiguration: Allow arrow keys and selection of fonts from Font textbox

This should function similarly to other autocomplete textboxes.

/Views/Followers/GoalConfiguration.cshtml

Add features to Follower Goal configuration

Add features like:

• Font
• Empty Font Color
• Empty Bar colors
• Gradient number of colors and blend

Need to automate construction of wwwroot/lib/signalr

Convert usage of XHR to fetch

In the configuration pages for Followers and Follower goal we use the XHR object. It would be nice to use the newer fetch API instead

Feature: A Marquee widget

What about a marquee to display some of the dynamic information displayed on screen? For example, the uptime, the goal progress, number of followers, and the music playing in the background.

Custom colors for follower bar progress

From @kirkdmo:

Would be nice to have the follower goal progress bar change colors (or have an option to do this) as it gets closer to the goal number.

For example

Follower Goal of 500
1 to 100 be red
100 to 200 orange
200 to 300 yellow
400 to 500 green

Bundling & Minification

@csharpfritz, Can you explain bundling and minification concept and how to configure them in live stream please?

Write TagHelper to include SignalR script

Should read the version number from configuration or the filename itself

Dev branch csproj references missing ClientApp folder

The files were moved to wwwroot/js/GoalConfiguration, so should this reference to ClientApp be removed?

Feature: Now Playing

Need a label to display the track now playing

Feature Suggestion: Add commands via page UI and or Chat

The commands right now are hardcoded, and to add new commands you need to modify the project and rebuild, but sometimes commands are a one time thing in the middle of a stream, or in a particular stream.

So my suggestion is to have a page where you can name the command and have helpers to do common things like read/write to a file, play a sound/video/gif, randomize, send message/whisper to chat/user, set a timer to do a command x times or every x minutes, track a user to do like currency, etc, and maybe you can also code what you want either in the page or by following a set of rules in chat and probably only moderatos and streamer are allow to add, edit or remove commands.

Also streamers may have a particular way they use commands and may have hundreds of them and its way easier to do them in a visual way.

Consider using AutoFixture to improve setup in unit test

Since random values are being used in unit tests, look at using AutoFixture to simplify unit test setup. Here is a link to the project on GitHub:
https://github.com/AutoFixture/AutoFixture

Here is one example how this could be used in a unit test:

[Fact]
public void ShouldCountSeparately() {

	// arrange
	var jeffStreams = _fixture.Create<StreamServiceDouble>();
	var otherStream = _fixture.Create<StreamServiceDouble>();

	// act
	var sut = new Fritz.StreamTools.Services.StreamService(new[] {
		jeffStreams, otherStreamService });
	var count = sut.FollowerCountByService;

	// assert
	Assert.Equal(2, count.Count());
	Assert.Contains(count, c => c.service == jeffStreams.Name);
	Assert.Contains(count, c => c.service == otherStream.Name);
	Assert.Equal(jeffStreams.CurrentFollowerCount, count.First(c => c.service == jeffStreams.Name).count);
	Assert.Equal(otherStream.CurrentFollowerCount, count.First(c => c.service == otherStream.Name).count);


}

Add .editorconfig

Would be helpful for contributers

Scoreboard?

It would be fun to have a "scoreboard" widget that shows the top 5 Git Committers on our repositories over the last week / month / year / all-time

Current Viewers Widget

Name of this project?

It's becoming more than just a rundown of the stream, should we call it something more like "StreamTools"?

Docs needed

Theme Support

Need a way to configure widgets CSS

Feature Suggestion: Popup notification for new followers and subs

It would be great if we could mimic the popup notification from StreamLabs, the one that pops up on new followers as Steve saying "Developers, Developers, Developers" or the DotNetBot on Subscriptions.

That way its one step closer to replacing StreamLabs.

Upgrade to the latest TwitchLib package

Feature Suggestion: configuration for Follower count and Viewer count

Follower Count style is hardcoded in the css, and there is no style in Current Viewers, so it would be good to add configuration like in Follower Goal Configuration and that way the Follower Count and Viewer Count can change font, color, background, size, text, etc.

Branches, issue labels

Hi everyone,

First of all i'am new here that's why some things may be not obvious to me.
I see that some issues are related to specific branches, there is branch feature_FritzBot which looks the most up-to-date, but there are also feature_SignalR, feature-bot, feature-unittests.
I understand github flow but it is not obvious to me which branch and issue are related to each other.
Another question if the title has the word "Feature" should i create new branch from dev?

I think it would be very helpful to add a section in the readme about "How to contribute" with short word about every main branch, and maybe some labels for issue if they are related which concrete branch, or label for new features etc.

Regards

Feature Suggestion: Adjust font color based on background color

It might be a neat feature to auto adjust the font color based on the background color. Probably should add a checkbox to toggle this feature to avoid frustration.

I will look for code to do this

Refactor Goal Configuration JavaScript

Create several external files that can be bundled together and outside the View

Detect errors in FollowersController.Goal and report

The documentation page should report errors if invalid parameters (NOT empty parameters) were passed

Need to cache locally the contents of the Google Font CSS files

This takes a long time to download, and it would be nice to cache this locally on some periodic basis.

Perhaps expiring once a week?