Streamer Ui Added

This commit is contained in:
devl0rd 2020-04-15 21:58:28 -06:00
parent 3d13c1ebb9
commit d88aff995a
17 changed files with 140 additions and 69 deletions

1
.gitignore vendored
View file

@ -7,3 +7,4 @@ build/*
.DS_Store
*node_modules
SkyNX-Streamer/NxStreamingService/NxStreamingService.exe
SkyNX-Streamer/SkyNXStreamer-win32-x64

BIN
Screenshots/Streamer.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 KiB

View file

@ -1 +0,0 @@
node_modules

4
SkyNX-Streamer/Build.bat Normal file
View file

@ -0,0 +1,4 @@
@echo off
cls
electron-packager . SkyNXStreamer --platform=win32 --arch=x64
pause

View file

@ -1,4 +0,0 @@
@echo off
cls
.\NxStreamingService.exe /ip 172.16.0.10 /q 10
pause

View file

@ -1,11 +0,0 @@
{
"debug": true,
"accentColor": {
"r": 50,
"g": 50,
"b": 50,
"a": 0.9
},
"rainbowEnabled": false,
"devToolsOnStartup": false
}

View file

@ -1,4 +0,0 @@
@echo off
cls
electron-packager . Base-Electron-App --platform=win32 --arch=x64
pause

View file

@ -0,0 +1,6 @@
#main {
padding: 8px;
}
label {
color: white;
}

View file

@ -41,11 +41,18 @@ textarea:focus, input:focus{
margin: 0px;
box-shadow: 0px 4px 14px 0px rgba(0,0,0,0.9);
}
#titleIcon {
position: fixed;
top: 7px;
left: 6px;
width: 20px;
height: 20px;
}
#title {
position: fixed;
top: 7px;
left: 6px;
left: 35px;
color: white;
font-size: 12px;
font-weight:bold;

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

View file

@ -3,16 +3,18 @@
<head>
<meta charset="UTF-8">
<title>DevL0rd's Base Electron App</title>
<title>SkyNX Streamer</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/fa-svg-with-js.css">
<link rel="stylesheet" href="css/windowStyle.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav id="title-bar" class="rainbowBackgroundColor">
<div id="title">DevL0rd's Base Electron App</div>
<img id="titleIcon" src="./img/iconTransparent.png">
<div id="title">SkyNX Streamer</div>
<div id="title-bar-btns">
<button id="rld-btn" class="title-bar-tools" style="display: none;"><i class="fas fa-sync-alt"></i></button>
<button id="dev-btn" class="title-bar-tools" style="display: none;"><i class="fab fa-dev"></i></button>
@ -25,13 +27,24 @@
<div id="navBar" class="customScroll rainbowScrollColor">
<button id="main-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
title="Plugins"><i class="fas fa-desktop"></i></button>
<button id="settings-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
title="Settings"><i class="fas fa-cogs"></i></button>
<!-- <button id="settings-btn" class="navBar-btns" data-toggle="tooltip" data-placement="right" data-html="true"
title="Settings"><i class="fas fa-cogs"></i></button> -->
</div>
<div id="main" class="contentArea">
<div class="form-group">
<label for="ipInput">Switch IP Address</label>
<input id="ipInput" type="text" class="form-control" placeholder="Switch IP">
</div>
<div id="settings" class="contentArea" style="display: none;">
<form class="form-group">
<label id="qualityLabel" for="qualitySlider">Quality: 5M</label>
<input id="qualitySlider" type="range" class="custom-range" min="1" max="80" value="5" />
</form>
<form class="form-group">
<button id="startBtn" type="button" class="btn btn-dark btn-lg btn-block">Start Streamer</button>
</form>
</div>
<!-- <div id="settings" class="contentArea" style="display: none;">
<input id="settingsSearch" type="text" placeholder="Search settings">
<h2>Settings</h2>
<div class="row">
@ -75,7 +88,7 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
<div id="statusbar" class="rainbowBackgroundColor2">
<span id="statusbartext">Ready!</span>

View file

@ -0,0 +1,43 @@
var ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('close', function (event, data) {
$("#startBtn").addClass('btn-dark').removeClass('btn-danger');
$("#startBtn").html("Start Streamer");
running = false;
});
ipcRenderer.on('started', function (event, data) {
$('#startBtn').addClass('btn-danger').removeClass('btn-dark');
$("#startBtn").html("End Streamer");
running = true;
})
var running = false;
function connect() {
ipcRenderer.send('connect', { ip: clientSettings.ip, q: clientSettings.quality });
}
function disconnect() {
ipcRenderer.send('kill');
}
function restart() {
ipcRenderer.send('restart', { ip: clientSettings.ip, q: clientSettings.quality });
}
$('#startBtn').click(function () {
if (!running) {
connect();
} else {
disconnect();
}
});
var qualityChangeTimeout;
$(document).on('input', '#qualitySlider', function () {
$('#qualityLabel').html("Quality: " + $(this).val() + "M");
clientSettings.quality = $(this).val();
saveClientSettings();
if (running) {
clearTimeout(qualityChangeTimeout);
qualityChangeTimeout = setTimeout(restart, 1000)
}
});
$(document).on('input', '#ipInput', function () {
clientSettings.ip = $(this).val();
saveClientSettings();
});

View file

@ -1,15 +1,17 @@
var debug = true;
var clientSettings = {
"debug": true,
"debug": false,
"accentColor": {
"r": 50,
"g": 50,
"b": 50,
"a": 0.9
},
"rainbowEnabled": false,
"devToolsOnStartup": false
"rainbowEnabled": true,
"devToolsOnStartup": false,
"ip": "172.16.0.10",
"quality": 5
};
var clientSettingsPath = "./settings.json";
if (fs.existsSync(clientSettingsPath)) {
@ -34,6 +36,9 @@ function loadClientSettings() {
$("#debugEnabled").prop("checked", clientSettings.debug);
$("#rainbowEnabled").prop("checked", clientSettings.rainbowEnabled);
$("#devToolsOnStartup").prop("checked", clientSettings.devToolsOnStartup);
$("#qualitySlider").val(clientSettings.quality);
$('#qualityLabel').html("Quality: " + clientSettings.quality + "M");
$("#ipInput").val(clientSettings.ip);
applyClientSettings();
if (clientSettings.devToolsOnStartup) {
openDevTools();

View file

@ -44,15 +44,10 @@ window.addEventListener('load', function () {
//PROJECT CODE STARTS HERE
var ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.on('exampleMessage', function (event, data) {
});
$("#main-btn").click(function () {
$(".contentArea").hide();
$("#plugins").fadeIn(400);
$("#main").fadeIn(400);
$('#main-btn').tooltip('hide');
});
$("#settings-btn").click(function () {

View file

@ -1,9 +1,8 @@
const DB = require('./Devlord_modules/DB.js');
const { spawn } = require("child_process");
const windowStateKeeper = require('electron-window-state');
const fs = require('fs');
const DB = require('./Devlord_modules/DB.js');
// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain } = require('electron')
// Keep a global reference of the window object, if you don't, the window will
@ -14,22 +13,24 @@ var usingUI = true;
function createWindow() {
// Load the previous state with fallback to defaults
let mainWindowState = windowStateKeeper({
defaultWidth: 720,
defaultHeight: 500
defaultWidth: 350,
defaultHeight: 250
});
// Create the browser window.
mainWindow = new BrowserWindow({
x: mainWindowState.x,
y: mainWindowState.y,
width: mainWindowState.width,
height: mainWindowState.height,
minWidth: 720,
minHeight: 500,
// width: mainWindowState.width,
// height: mainWindowState.height,
width: 350,
height: 280,
// minWidth: 350,
// minHeight: 300,
webPreferences: {
nodeIntegration: true
},
transparent: true,
resizable: true,
resizable: false,
frame: false
})
mainWindowState.manage(mainWindow);
@ -45,6 +46,7 @@ function createWindow() {
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
streamerProcess.kill();
});
}
@ -58,6 +60,7 @@ app.on('window-all-closed', function () {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') app.quit()
streamerProcess.kill();
})
app.on('activate', function () {
@ -69,22 +72,35 @@ app.on('activate', function () {
app.on('browser-window-created', function (e, window) {
window.setMenu(null);
});
ffmpegProcess = spawn(
"./lib/NxStreamingService.exe",
["-ip", "172.10.0.10"],
{ stdio: "pipe" }
var streamerProcess;
var clientSender;
function startStreamer(arg) {
streamerProcess = spawn(
"./NxStreamingService.exe",
["/ip", arg.ip, "/q", arg.q],
{ cwd: './NxStreamingService/', stdio: "pipe" }
);
ffmpegProcess.stdout.on("data", chunk => {
streamerProcess.stdout.on("data", data => {
console.log(`${data}`);
});
ffmpegProcess.stderr.on('data', (data) => {
//console.error(`stderr: ${data}`);
streamerProcess.stderr.on('data', (data) => {
console.error(`streamerProcess Error: ${data}`);
});
ffmpegProcess.on('close', (code) => {
console.log(`ffmpegProcess process exited with code ${code}`);
streamerProcess.on('close', (code) => {
clientSender.send("close");
console.log(`streamerProcess process exited with code ${code}`);
});
ipcMain.on('exampleMessage', (event, arg) => {
clientSender.send("started");
}
ipcMain.on('connect', (event, arg) => {
clientSender = event.sender;
startStreamer(arg);
})
ipcMain.on('restart', (event, arg) => {
streamerProcess.kill();
startStreamer(arg);
});
ipcMain.on('kill', (event, arg) => {
streamerProcess.kill();
});

View file

@ -41,8 +41,7 @@
"boolean": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.1.tgz",
"integrity": "sha512-HRZPIjPcbwAVQvOTxR4YE3o8Xs98NqbbL1iEZDCz7CL8ql0Lt5iOyJFxfnAB0oFs8Oh02F/lLlg30Mexv46LjA==",
"optional": true
"integrity": "sha512-HRZPIjPcbwAVQvOTxR4YE3o8Xs98NqbbL1iEZDCz7CL8ql0Lt5iOyJFxfnAB0oFs8Oh02F/lLlg30Mexv46LjA=="
},
"bootstrap": {
"version": "4.4.1",

View file

@ -1,11 +1,13 @@
{
"debug": true,
"debug": false,
"accentColor": {
"r": 50,
"g": 50,
"b": 50,
"a": 0.9
},
"rainbowEnabled": false,
"devToolsOnStartup": false
"rainbowEnabled": true,
"devToolsOnStartup": false,
"ip": "172.16.0.10",
"quality": "15"
}