storm/bragi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Further attempts to integrate

Browse Source
This commit is contained in:
Tyler Vigario 2020-05-29 21:07:41 -07:00
parent 28817b5ad5
commit eba9ef2397
No known key found for this signature in database
GPG Key ID: 4D670648A0376AA4
16 changed files with 572 additions and 534 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
static/css/dark.css Normal file
View File

File diff suppressed because one or more lines are too long

26
static/js/main.js
View File

File diff suppressed because one or more lines are too long

2
templates/index.html
View File

File diff suppressed because one or more lines are too long

2
templates/need_token.html
View File

@ -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
View File

File diff suppressed because it is too large Load Diff

14
web/package.json
View File

@ -1,11 +1,12 @@
{
"name": "botamusique",
"private": true,
"type": "module",
"scripts": {
"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",
"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"
},
"repository": {
@ -19,8 +20,10 @@
},
"homepage": "https://github.com/azlux/botamusique#readme",
"devDependencies": {
"@babel/core": "^7.10.0",
"@babel/preset-env": "^7.10.0",
"@babel/core": "^7.10.1",
"@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",
"babel-loader": "^8.1.0",
"core-js": "^3.6.5",
@ -29,7 +32,7 @@
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"regenerator-runtime": "^0.13.5",
"sass": "^1.26.5",
"sass": "^1.26.7",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
@ -37,6 +40,7 @@
},
"dependencies": {
"bootstrap": "^4.5.0",
"bootswatch": "^4.5.0",
"jquery": "^3.5.1",
"jquery-migrate": "^3.3.0",
"popper.js": "^1.16.1"

10
web/src/js/app.js
View File

@ -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
View 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
View File

@ -0,0 +1,9 @@
import Theme from './theme';
document.addEventListener('DOMContentLoaded', () => {
Theme.init();
document.getElementById('theme-switch-btn').addEventListener('click', () => {
Theme.swap();
});
});

31
web/src/js/main.js → web/src/js/main.mjs
View File

@ -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 ------
// ---------------------
@ -1103,8 +1074,6 @@ function secondsToStr(seconds) {
return ("00" + mins).slice(-2) + ":" + ("00" + secs).slice(-2);
}
themeInit();
updateResults();
$(document).ready(updatePlaylist);

42
web/src/js/theme.mjs Normal file
View 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
View 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
View File

File diff suppressed because one or more lines are too long

30
web/src/templates/index.html
View File

@ -6,16 +6,16 @@
<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>
<body>
<div class="container page-header mb-5" id="banner">
<div class="row">
<div class="col-auto">
<img src="static/img/logo.png" height="200px">
<img src="../static/img/logo.png" height="200px">
</div>
<div class="col my-auto">
<h1>botamusique Web Interface</h1>
@ -88,12 +88,12 @@
<tbody id="playlist-table" class="playlist-table">
<tr id="playlist-loading">
<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>
</tr>
<tr id="playlist-empty" class="d-none">
<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>
</tr>
<tr class="playlist-expand table-dark d-none">
@ -108,7 +108,7 @@
<td>
<input hidden type="text" class="playlist-item-id" value="" />
<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 class="playlist-artwork">
<b class="playlist-item-title"></b>
@ -207,17 +207,17 @@
<div class="card-body">
<div id="library-group" class="list-group library-group" style="overflow: auto;">
<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 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 id="library-item" style="display: none;" class="list-group-item library-item">
<input hidden type="text" class="library-item-id" value="" />
<div class="library-thumb-col">
<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 class="btn-group-vertical library-thumb-grp">
<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-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 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 id="library-item" style="display: none;" class="list-group-item library-item">
<input hidden type="text" class="library-item-id" value="" />
@ -438,7 +438,7 @@
<i class="fas fa-play" aria-hidden="true"></i>
</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>
</div>
@ -451,8 +451,8 @@
</button>
</div>
<div class="toast-body" id="playerContainer">
<img id="playerArtworkIdle" src="static/img/empty_box.svg" />
<img id="playerArtwork" src="static/img/unknown-album.png" style="display: none;" />
<img id="playerArtworkIdle" src="../static/img/empty_box.svg" />
<img id="playerArtwork" src="../static/img/unknown-album.png" style="display: none;" />
<div id="playerInfo">
<div id="playerActionBox">
<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 }}" />
<script src="static/js/main.js"></script>
<script src="../static/js/main.js"></script>
</body>
</html>

7
web/src/templates/need_token.html
View File

@ -8,7 +8,6 @@
<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>
@ -39,11 +38,7 @@
</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>
<script src="static/js/main.js"></script>
</body>
</html>

17
web/webpack.config.js → web/webpack.config.cjs
View File

@ -1,14 +1,17 @@
const path = require('path');
const webpack = require('webpack');
//const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: [
'./src/js/app.js',
'./src/sass/app.scss',
'./src/js/app.mjs',
'./src/sass/app.scss'
],
dark: [
'./src/sass/app-dark.scss'
]
},
output: {
filename: 'static/js/[name].js',
@ -16,11 +19,11 @@ module.exports = {
//ecmaVersion: 5,
},
plugins: [
new webpack.ProvidePlugin({
/*new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
//Popper: 'popper.js',
}),
}),*/
new MiniCssExtractPlugin({
filename: 'static/css/[name].css',
}),
@ -70,6 +73,10 @@ module.exports = {
},
],
],
plugins: [
//'@babel/plugin-proposal-private-methods',
'@babel/plugin-proposal-class-properties',
],
},
},
},