mirror of
https://github.com/DevL0rd/SkyNX
synced 2024-11-13 23:17:06 +00:00
Streamer Ui Added
This commit is contained in:
parent
3d13c1ebb9
commit
d88aff995a
17 changed files with 140 additions and 69 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -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
BIN
Screenshots/Streamer.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 308 KiB |
1
SkyNX-Streamer/.gitignore
vendored
1
SkyNX-Streamer/.gitignore
vendored
|
@ -1 +0,0 @@
|
|||
node_modules
|
4
SkyNX-Streamer/Build.bat
Normal file
4
SkyNX-Streamer/Build.bat
Normal file
|
@ -0,0 +1,4 @@
|
|||
@echo off
|
||||
cls
|
||||
electron-packager . SkyNXStreamer --platform=win32 --arch=x64
|
||||
pause
|
|
@ -1,4 +0,0 @@
|
|||
@echo off
|
||||
cls
|
||||
.\NxStreamingService.exe /ip 172.16.0.10 /q 10
|
||||
pause
|
|
@ -1,11 +0,0 @@
|
|||
{
|
||||
"debug": true,
|
||||
"accentColor": {
|
||||
"r": 50,
|
||||
"g": 50,
|
||||
"b": 50,
|
||||
"a": 0.9
|
||||
},
|
||||
"rainbowEnabled": false,
|
||||
"devToolsOnStartup": false
|
||||
}
|
|
@ -1,4 +0,0 @@
|
|||
@echo off
|
||||
cls
|
||||
electron-packager . Base-Electron-App --platform=win32 --arch=x64
|
||||
pause
|
6
SkyNX-Streamer/css/styles.css
Normal file
6
SkyNX-Streamer/css/styles.css
Normal file
|
@ -0,0 +1,6 @@
|
|||
#main {
|
||||
padding: 8px;
|
||||
}
|
||||
label {
|
||||
color: white;
|
||||
}
|
|
@ -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;
|
||||
|
|
BIN
SkyNX-Streamer/img/iconTransparent.png
Normal file
BIN
SkyNX-Streamer/img/iconTransparent.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 7.1 KiB |
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
});
|
|
@ -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();
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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" }
|
||||
);
|
||||
ffmpegProcess.stdout.on("data", chunk => {
|
||||
|
||||
});
|
||||
ffmpegProcess.stderr.on('data', (data) => {
|
||||
//console.error(`stderr: ${data}`);
|
||||
});
|
||||
ffmpegProcess.on('close', (code) => {
|
||||
console.log(`ffmpegProcess process exited with code ${code}`);
|
||||
});
|
||||
|
||||
ipcMain.on('exampleMessage', (event, arg) => {
|
||||
|
||||
var streamerProcess;
|
||||
var clientSender;
|
||||
function startStreamer(arg) {
|
||||
streamerProcess = spawn(
|
||||
"./NxStreamingService.exe",
|
||||
["/ip", arg.ip, "/q", arg.q],
|
||||
{ cwd: './NxStreamingService/', stdio: "pipe" }
|
||||
);
|
||||
streamerProcess.stdout.on("data", data => {
|
||||
console.log(`${data}`);
|
||||
});
|
||||
streamerProcess.stderr.on('data', (data) => {
|
||||
console.error(`streamerProcess Error: ${data}`);
|
||||
});
|
||||
streamerProcess.on('close', (code) => {
|
||||
clientSender.send("close");
|
||||
console.log(`streamerProcess process exited with code ${code}`);
|
||||
});
|
||||
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();
|
||||
});
|
||||
|
|
3
SkyNX-Streamer/package-lock.json
generated
3
SkyNX-Streamer/package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
}
|
Loading…
Reference in a new issue