Further attempts to integrate
This commit is contained in:
Tyler Vigario
parent
28817b5ad5
commit
eba9ef2397
7
static/css/dark.css
Normal file
7
static/css/dark.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
|||||||
<!doctype html><head><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta charset="UTF-8"><title>botamusique web interface</title><link rel="icon" href="static/img/favicon.ico"/><link id="pagestyle" rel="stylesheet" href="static/css/bootstrap.min.css"><link rel="stylesheet" href="static/css/main.css"></head><body><div class="container" style="max-width: 800px"><div class="col-8" style="margin: auto; padding-top: 50px;"><div class="card"><div class="card-header">Token Required</div><div class="card-body"><h3>Token Required!</h3>You are accessing the web interface of {{ name }}. A token is needed to grant you access.<br/>Please send "{{ command }}" to the bot in mumble to acquire one.<form action="."><div class="form-group mt-3"><label for="token_input">Token</label><div class="input-group"><input type="password" class="form-control btn-space" id="token_input" name="token" placeholder="xxxxxxx"> <button type="submit" class="btn btn-primary">Submit</button></div></div></form></div></div></div></div><script src="static/js/jquery-3.5.1.min.js"></script><script src="static/js/popper.min.js"></script><script src="static/js/bootstrap.min.js"></script><script src="static/js/fontawesome.all.min.js"></script></body>
|
<!doctype html><head><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta charset="UTF-8"><title>botamusique web interface</title><link rel="icon" href="static/img/favicon.ico"/><link rel="stylesheet" href="static/css/main.css"></head><body><div class="container" style="max-width: 800px"><div class="col-8" style="margin: auto; padding-top: 50px;"><div class="card"><div class="card-header">Token Required</div><div class="card-body"><h3>Token Required!</h3>You are accessing the web interface of {{ name }}. A token is needed to grant you access.<br/>Please send "{{ command }}" to the bot in mumble to acquire one.<form action="."><div class="form-group mt-3"><label for="token_input">Token</label><div class="input-group"><input type="password" class="form-control btn-space" id="token_input" name="token" placeholder="xxxxxxx"> <button type="submit" class="btn btn-primary">Submit</button></div></div></form></div></div></div></div><script src="static/js/main.js"></script></body>
|
||||||
869
web/package-lock.json
generated
869
web/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "botamusique",
|
"name": "botamusique",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "npm run development",
|
"dev": "npm run development",
|
||||||
"development": "webpack --mode=development --config webpack.config.js --progress",
|
"development": "webpack --mode=development --config webpack.config.cjs --progress",
|
||||||
"prod": "npm run production",
|
"prod": "npm run production",
|
||||||
"production": "webpack --mode=production --config webpack.config.js --progress",
|
"production": "webpack --mode=production --config webpack.config.cjs --progress",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
@ -19,8 +20,10 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/azlux/botamusique#readme",
|
"homepage": "https://github.com/azlux/botamusique#readme",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.10.0",
|
"@babel/core": "^7.10.1",
|
||||||
"@babel/preset-env": "^7.10.0",
|
"@babel/plugin-proposal-class-properties": "^7.10.1",
|
||||||
|
"@babel/plugin-proposal-private-methods": "^7.10.1",
|
||||||
|
"@babel/preset-env": "^7.10.1",
|
||||||
"autoprefixer": "^9.8.0",
|
"autoprefixer": "^9.8.0",
|
||||||
"babel-loader": "^8.1.0",
|
"babel-loader": "^8.1.0",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
@ -29,7 +32,7 @@
|
|||||||
"mini-css-extract-plugin": "^0.9.0",
|
"mini-css-extract-plugin": "^0.9.0",
|
||||||
"postcss-loader": "^3.0.0",
|
"postcss-loader": "^3.0.0",
|
||||||
"regenerator-runtime": "^0.13.5",
|
"regenerator-runtime": "^0.13.5",
|
||||||
"sass": "^1.26.5",
|
"sass": "^1.26.7",
|
||||||
"sass-loader": "^8.0.2",
|
"sass-loader": "^8.0.2",
|
||||||
"style-loader": "^1.2.1",
|
"style-loader": "^1.2.1",
|
||||||
"webpack": "^4.43.0",
|
"webpack": "^4.43.0",
|
||||||
@ -37,6 +40,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^4.5.0",
|
"bootstrap": "^4.5.0",
|
||||||
|
"bootswatch": "^4.5.0",
|
||||||
"jquery": "^3.5.1",
|
"jquery": "^3.5.1",
|
||||||
"jquery-migrate": "^3.3.0",
|
"jquery-migrate": "^3.3.0",
|
||||||
"popper.js": "^1.16.1"
|
"popper.js": "^1.16.1"
|
||||||
|
|||||||
@ -1,10 +0,0 @@
|
|||||||
import 'jquery-migrate';
|
|
||||||
|
|
||||||
// Popper 1.x
|
|
||||||
import 'popper.js';
|
|
||||||
|
|
||||||
// Boostrap 4.x
|
|
||||||
import 'bootstrap';
|
|
||||||
|
|
||||||
// Application code
|
|
||||||
import './main.js';
|
|
||||||
17
web/src/js/app.mjs
Normal file
17
web/src/js/app.mjs
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
// jQuery 3.x
|
||||||
|
import {$, jQuery} from 'jquery/src/jquery';
|
||||||
|
|
||||||
|
// jQuery Migrate 3.x
|
||||||
|
import 'jquery-migrate/src/migrate';
|
||||||
|
|
||||||
|
// Popper 1.x
|
||||||
|
import 'popper.js';
|
||||||
|
|
||||||
|
// Boostrap 4.x
|
||||||
|
import 'bootstrap/js/src/index';
|
||||||
|
|
||||||
|
// Old application code
|
||||||
|
import './main';
|
||||||
|
|
||||||
|
// New application code
|
||||||
|
import './index';
|
||||||
9
web/src/js/index.mjs
Normal file
9
web/src/js/index.mjs
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import Theme from './theme';
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
Theme.init();
|
||||||
|
|
||||||
|
document.getElementById('theme-switch-btn').addEventListener('click', () => {
|
||||||
|
Theme.swap();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -320,35 +320,6 @@ function changePlayMode(mode) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// ----------------------
|
|
||||||
// --- THEME SWITCHER ---
|
|
||||||
// ----------------------
|
|
||||||
function themeInit() {
|
|
||||||
let theme = localStorage.getItem("theme");
|
|
||||||
if (theme !== null) {
|
|
||||||
setPageTheme(theme);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function switchTheme() {
|
|
||||||
let theme = localStorage.getItem("theme");
|
|
||||||
if (theme === "light" || theme === null) {
|
|
||||||
setPageTheme("dark");
|
|
||||||
localStorage.setItem("theme", "dark");
|
|
||||||
} else {
|
|
||||||
setPageTheme("light");
|
|
||||||
localStorage.setItem("theme", "light");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setPageTheme(theme) {
|
|
||||||
return;
|
|
||||||
if (theme === "light")
|
|
||||||
document.getElementById("pagestyle").setAttribute("href", "static/css/bootstrap.min.css");
|
|
||||||
else if (theme === "dark")
|
|
||||||
document.getElementById("pagestyle").setAttribute("href", "static/css/bootstrap.darkly.min.css");
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------------------
|
// ---------------------
|
||||||
// ------ Browser ------
|
// ------ Browser ------
|
||||||
// ---------------------
|
// ---------------------
|
||||||
@ -1103,8 +1074,6 @@ function secondsToStr(seconds) {
|
|||||||
return ("00" + mins).slice(-2) + ":" + ("00" + secs).slice(-2);
|
return ("00" + mins).slice(-2) + ":" + ("00" + secs).slice(-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
themeInit();
|
|
||||||
updateResults();
|
updateResults();
|
||||||
$(document).ready(updatePlaylist);
|
$(document).ready(updatePlaylist);
|
||||||
|
|
||||||
42
web/src/js/theme.mjs
Normal file
42
web/src/js/theme.mjs
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
export default class {
|
||||||
|
/**
|
||||||
|
* Internal state for dark theme activation.
|
||||||
|
* @property {boolean}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
static #dark = false;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Inialize the theme class.
|
||||||
|
*/
|
||||||
|
static init() {
|
||||||
|
// Check LocalStorage for dark theme selection
|
||||||
|
if (localStorage.getItem('darkTheme') === 'true') {
|
||||||
|
// Update internal state
|
||||||
|
this.#dark = true;
|
||||||
|
|
||||||
|
// Update page theme
|
||||||
|
this.set(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set page theme and update local storage variable.
|
||||||
|
* @param {boolean} dark Whether to activate dark theme.
|
||||||
|
*/
|
||||||
|
static set(dark = false) {
|
||||||
|
// Swap CSS to selected theme
|
||||||
|
document.getElementById('pagestyle')
|
||||||
|
.setAttribute('href', '../static/css/' + (dark ? 'dark' : 'main') + '.css');
|
||||||
|
|
||||||
|
// Update local storage
|
||||||
|
localStorage.setItem('darkTheme', dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Swap page theme.
|
||||||
|
*/
|
||||||
|
static swap() {
|
||||||
|
this.set(!this.#dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
5
web/src/sass/app-dark.scss
Normal file
5
web/src/sass/app-dark.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
@import '~bootswatch/dist/darkly/variables';
|
||||||
|
@import '~bootstrap/scss/bootstrap';
|
||||||
|
@import '~bootswatch/dist/darkly/bootswatch';
|
||||||
|
|
||||||
|
@import './main';
|
||||||
12
web/src/sass/bootstrap.darkly.min.css
vendored
12
web/src/sass/bootstrap.darkly.min.css
vendored
File diff suppressed because one or more lines are too long
@ -6,16 +6,16 @@
|
|||||||
|
|
||||||
<title>botamusique web interface</title>
|
<title>botamusique web interface</title>
|
||||||
|
|
||||||
<link rel="icon" href="static/img/favicon.ico" />
|
<link rel="icon" href="../static/img/favicon.ico" />
|
||||||
|
|
||||||
<link rel="stylesheet" href="static/css/main.css">
|
<link id="pagestyle" rel="stylesheet" href="../static/css/main.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container page-header mb-5" id="banner">
|
<div class="container page-header mb-5" id="banner">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto">
|
<div class="col-auto">
|
||||||
<img src="static/img/logo.png" height="200px">
|
<img src="../static/img/logo.png" height="200px">
|
||||||
</div>
|
</div>
|
||||||
<div class="col my-auto">
|
<div class="col my-auto">
|
||||||
<h1>botamusique Web Interface</h1>
|
<h1>botamusique Web Interface</h1>
|
||||||
@ -88,12 +88,12 @@
|
|||||||
<tbody id="playlist-table" class="playlist-table">
|
<tbody id="playlist-table" class="playlist-table">
|
||||||
<tr id="playlist-loading">
|
<tr id="playlist-loading">
|
||||||
<td colspan="4" class="text-center">
|
<td colspan="4" class="text-center">
|
||||||
<img style="margin: auto; width: 35px;" src="static/img/loading.svg" />
|
<img style="margin: auto; width: 35px;" src="../static/img/loading.svg" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="playlist-empty" class="d-none">
|
<tr id="playlist-empty" class="d-none">
|
||||||
<td colspan="4" class="text-center">
|
<td colspan="4" class="text-center">
|
||||||
<img style="margin: auto; width: 35px;" src="static/img/empty_box.svg" />
|
<img style="margin: auto; width: 35px;" src="../static/img/empty_box.svg" />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr class="playlist-expand table-dark d-none">
|
<tr class="playlist-expand table-dark d-none">
|
||||||
@ -108,7 +108,7 @@
|
|||||||
<td>
|
<td>
|
||||||
<input hidden type="text" class="playlist-item-id" value="" />
|
<input hidden type="text" class="playlist-item-id" value="" />
|
||||||
<div class="float-left">
|
<div class="float-left">
|
||||||
<img width="80" class="playlist-item-thumbnail" src="static/img/unknown-album.png" />
|
<img width="80" class="playlist-item-thumbnail" src="../static/img/unknown-album.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="playlist-artwork">
|
<div class="playlist-artwork">
|
||||||
<b class="playlist-item-title"></b>
|
<b class="playlist-item-title"></b>
|
||||||
@ -207,17 +207,17 @@
|
|||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div id="library-group" class="list-group library-group" style="overflow: auto;">
|
<div id="library-group" class="list-group library-group" style="overflow: auto;">
|
||||||
<div id="library-item-loading" class="list-group-item library-item">
|
<div id="library-item-loading" class="list-group-item library-item">
|
||||||
<img style="margin: auto; width: 35px;" src="static/img/loading.svg" />
|
<img style="margin: auto; width: 35px;" src="../static/img/loading.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div id="library-item-empty" style="display: none" class="list-group-item library-item">
|
<div id="library-item-empty" style="display: none" class="list-group-item library-item">
|
||||||
<img style="margin: auto; width: 35px;" src="static/img/empty_box.svg" />
|
<img style="margin: auto; width: 35px;" src="../static/img/empty_box.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div id="library-item" style="display: none;" class="list-group-item library-item">
|
<div id="library-item" style="display: none;" class="list-group-item library-item">
|
||||||
<input hidden type="text" class="library-item-id" value="" />
|
<input hidden type="text" class="library-item-id" value="" />
|
||||||
|
|
||||||
<div class="library-thumb-col">
|
<div class="library-thumb-col">
|
||||||
<div class="library-thumb-img">
|
<div class="library-thumb-img">
|
||||||
<img class="library-item-thumb library-thumb-img" src="static/img/unknown-album.png" />
|
<img class="library-item-thumb library-thumb-img" src="../static/img/unknown-album.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group-vertical library-thumb-grp">
|
<div class="btn-group-vertical library-thumb-grp">
|
||||||
<div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
|
<div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
|
||||||
@ -250,10 +250,10 @@
|
|||||||
|
|
||||||
<div id="library-group" class="list-group library-group" style="overflow: auto;">
|
<div id="library-group" class="list-group library-group" style="overflow: auto;">
|
||||||
<div id="library-item-loading" class="list-group-item library-item">
|
<div id="library-item-loading" class="list-group-item library-item">
|
||||||
<img style="margin: auto; width: 35px;" src="static/img/loading.svg" />
|
<img style="margin: auto; width: 35px;" src="../static/img/loading.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div id="library-item-empty" style="display: none" class="list-group-item library-item">
|
<div id="library-item-empty" style="display: none" class="list-group-item library-item">
|
||||||
<img style="margin: auto; width: 35px;" src="static/img/empty_box.svg" />
|
<img style="margin: auto; width: 35px;" src="../static/img/empty_box.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div id="library-item" style="display: none;" class="list-group-item library-item">
|
<div id="library-item" style="display: none;" class="list-group-item library-item">
|
||||||
<input hidden type="text" class="library-item-id" value="" />
|
<input hidden type="text" class="library-item-id" value="" />
|
||||||
@ -438,7 +438,7 @@
|
|||||||
<i class="fas fa-play" aria-hidden="true"></i>
|
<i class="fas fa-play" aria-hidden="true"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="floating-button" style="bottom: 50px;" onclick="switchTheme()">
|
<div id="theme-switch-btn" class="floating-button" style="bottom: 50px;">
|
||||||
<i class="fas fa-lightbulb" aria-hidden="true"></i>
|
<i class="fas fa-lightbulb" aria-hidden="true"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -451,8 +451,8 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="toast-body" id="playerContainer">
|
<div class="toast-body" id="playerContainer">
|
||||||
<img id="playerArtworkIdle" src="static/img/empty_box.svg" />
|
<img id="playerArtworkIdle" src="../static/img/empty_box.svg" />
|
||||||
<img id="playerArtwork" src="static/img/unknown-album.png" style="display: none;" />
|
<img id="playerArtwork" src="../static/img/unknown-album.png" style="display: none;" />
|
||||||
<div id="playerInfo">
|
<div id="playerInfo">
|
||||||
<div id="playerActionBox">
|
<div id="playerActionBox">
|
||||||
<button id="playerPlayBtn" class="btn btn-primary btn-sm btn-space" style="display: none"
|
<button id="playerPlayBtn" class="btn btn-primary btn-sm btn-space" style="display: none"
|
||||||
@ -569,7 +569,7 @@
|
|||||||
|
|
||||||
<input type="hidden" id="maxUploadFileSize" value="{{ max_upload_file_size }}" />
|
<input type="hidden" id="maxUploadFileSize" value="{{ max_upload_file_size }}" />
|
||||||
|
|
||||||
<script src="static/js/main.js"></script>
|
<script src="../static/js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -8,7 +8,6 @@
|
|||||||
|
|
||||||
<link rel="icon" href="static/img/favicon.ico" />
|
<link rel="icon" href="static/img/favicon.ico" />
|
||||||
|
|
||||||
<link id="pagestyle" rel="stylesheet" href="static/css/bootstrap.min.css">
|
|
||||||
<link rel="stylesheet" href="static/css/main.css">
|
<link rel="stylesheet" href="static/css/main.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -39,11 +38,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="static/js/main.js"></script>
|
||||||
<script src="static/js/jquery-3.5.1.min.js"></script>
|
|
||||||
<script src="static/js/popper.min.js"></script>
|
|
||||||
<script src="static/js/bootstrap.min.js"></script>
|
|
||||||
<script src="static/js/fontawesome.all.min.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,14 +1,17 @@
|
|||||||
const path = require('path');
|
const path = require('path');
|
||||||
const webpack = require('webpack');
|
//const webpack = require('webpack');
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
main: [
|
main: [
|
||||||
'./src/js/app.js',
|
'./src/js/app.mjs',
|
||||||
'./src/sass/app.scss',
|
'./src/sass/app.scss'
|
||||||
],
|
],
|
||||||
|
dark: [
|
||||||
|
'./src/sass/app-dark.scss'
|
||||||
|
]
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
filename: 'static/js/[name].js',
|
filename: 'static/js/[name].js',
|
||||||
@ -16,11 +19,11 @@ module.exports = {
|
|||||||
//ecmaVersion: 5,
|
//ecmaVersion: 5,
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.ProvidePlugin({
|
/*new webpack.ProvidePlugin({
|
||||||
$: 'jquery',
|
$: 'jquery',
|
||||||
jQuery: 'jquery',
|
jQuery: 'jquery',
|
||||||
//Popper: 'popper.js',
|
//Popper: 'popper.js',
|
||||||
}),
|
}),*/
|
||||||
new MiniCssExtractPlugin({
|
new MiniCssExtractPlugin({
|
||||||
filename: 'static/css/[name].css',
|
filename: 'static/css/[name].css',
|
||||||
}),
|
}),
|
||||||
@ -70,6 +73,10 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
],
|
],
|
||||||
|
plugins: [
|
||||||
|
//'@babel/plugin-proposal-private-methods',
|
||||||
|
'@babel/plugin-proposal-class-properties',
|
||||||
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
Loading…
x
Reference in New Issue
Block a user