Added theme toggle to Admin page

The admin can switch between the two default themes without a page
reload, with a nice animation (on small screens). Preference is stored
as a cookie, so the default theme setting will still apply to others.

.gitignore

@@ -12,8 +12,10 @@ jfa/
 colors.txt
 theme.css
 jellyfin_accounts/__pycache__/
+jellyfin_accounts/data/static/*.css
 old/
 .jf-accounts/
 requirements.txt
-package-lock.json
 video/
+scss/bs5/*.css*
+scss/bs4/*.css*

config-default.ini

@@ -9,13 +9,13 @@ server = http://jellyfin.local:8096
 public_server = https://jellyf.in:443
 ; this and below settings will show on the jellyfin dashboard when the program connects. you may as well leave them alone.
 client = jf-accounts
-version = 0.3.0
+version = 0.3.2
 device = jf-accounts
-device_id = jf-accounts-0.3.0
+device_id = jf-accounts-0.3.2
 
 [ui]
 ; settings related to the ui and program functionality.
-; choose the look of jellyfin-accounts.
+; default appearance for all users.
 theme = Jellyfin (Dark)
 ; set 0.0.0.0 to run on localhost
 host = 0.0.0.0

jellyfin_accounts/__init__.py

@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-__version__ = "0.3.0"
+__version__ = "0.3.3"
 
 import secrets
 import configparser
@@ -218,7 +218,7 @@ elif "Custom" in current_theme and "custom_css" in config["files"]:
         try:
             css_path = Path(config["files"]["custom_css"])
             shutil.copy(css_path, (local_dir / "static" / css_path.name))
-            log.debug('Loaded custom CSS "{css_path.name}"')
+            log.debug(f'Loaded custom CSS "{css_path.name}"')
             css_file = css_path.name
         except FileNotFoundError:
             log.error(

jellyfin_accounts/data/config-base.json

@@ -71,7 +71,7 @@
             "description": "Settings related to the UI and program functionality."
         },
         "theme": {
-            "name": "Look",
+            "name": "Default Look",
             "required": false,
             "requires_restart": true,
             "type": "select",
@@ -81,7 +81,7 @@
                 "Custom CSS"
             ],
             "value": "Jellyfin (Dark)",
-            "description": "Choose the look of jellyfin-accounts."
+            "description": "Default appearance for all users."
         },
         "host": {
             "name": "Address",

jellyfin_accounts/data/templates/admin.html

@@ -14,7 +14,39 @@
         <meta name="theme-color" content="#ffffff">
         <!-- Bootstrap CSS -->
         
-        <link rel="stylesheet" type="text/css" href="{{ css_file }}">
+        <script>
+            function getCookie(cname) {
+                var name = cname + "=";
+                var decodedCookie = decodeURIComponent(document.cookie);
+                var ca = decodedCookie.split(';');
+                for(var i = 0; i < ca.length; i++) {
+                    var c = ca[i];
+                    while (c.charAt(0) == ' ') {
+                        c = c.substring(1);
+                    }
+                    if (c.indexOf(name) == 0) {
+                        return c.substring(name.length, c.length);
+                    } 
+                }
+                return "";
+            };
+            {% if bs5 %}
+            var bsVersion = 5;
+            {% else %}
+            var bsVersion = 4;
+            {% endif %}
+            var css = document.createElement('link');
+            css.setAttribute('rel', 'stylesheet');
+            css.setAttribute('type', 'text/css');
+            var cssCookie = getCookie("css");
+            if (cssCookie.includes('bs' + bsVersion)) {
+                css.setAttribute('href', cssCookie);
+            } else {
+                css.setAttribute('href', '{{ css_file }}');
+            };
+            document.head.appendChild(css);
+                // document.querySelectorAll('link[rel="stylesheet"][type="text/css"]')[0].href = cssCookie;
+        </script>
         {% if not bs5 %}
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
         {% endif %}
@@ -53,10 +85,27 @@
                 margin-top: 5%;
                 color: grey;
             }
+            .circle {
+                /*margin-left: 1rem;
+                width: 1rem;
+                height: 1rem;
+                border-radius: 50%;
+                z-index: 5000;*/
+                -webkit-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
+           -moz-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
+             -o-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
+                transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190); /* easeInCubic */
+            }
+            .smooth-transition {
+                -webkit-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
+           -moz-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
+             -o-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
+                transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190); /* easeInCubic */
+            }
         </style>
         <title>Admin</title>
     </head>
-    <body>
+    <body class="smooth-transition">
         <div class="modal fade" id="login" role="dialog" aria-labelledby="login" aria-hidden="true" data-backdrop="static">
             <div class="modal-dialog modal-dialog-centered" role="document">
                 <div class="modal-content">
@@ -171,9 +220,11 @@
             <h1>
                 Accounts admin
             </h1>
-            <button type="button" class="btn btn-secondary" id="openSettings">
-                Settings <i class="fa fa-cog"></i>
-            </button>
+            <div class="btn-group" role="group" id="headerButtons">
+                <button type="button" class="btn btn-primary" id="openSettings">
+                    Settings <i class="fa fa-cog"></i>
+                </button>
+            </div>
             <div class="card mb-3 linkGroup">
                 <div class="card-header">Current Invites</div>
                 <ul class="list-group list-group-flush" id="invites">

jellyfin_accounts/data/templates/admin.js

@@ -1,5 +1,96 @@
-var bsVersion = {{ bsVersion }};
+function getCookie(cname) {
+    var name = cname + "=";
+    var decodedCookie = decodeURIComponent(document.cookie);
+    var ca = decodedCookie.split(';');
+    for(var i = 0; i <ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        } 
+    }
+    return "";
+}
+function whichTransitionEvent(){
+    var t;
+    var el = document.createElement('fakeelement');
+    var transitions = {
+      'transition':'transitionend',
+      'OTransition':'oTransitionEnd',
+      'MozTransition':'transitionend',
+      'WebkitTransition':'webkitTransitionEnd'
+    };
 
+    for(t in transitions){
+        if( el.style[t] !== undefined ){
+            return transitions[t];
+        };
+    };
+};
+function toggleCSS() {
+    var cssEl = document.querySelectorAll('link[rel="stylesheet"][type="text/css"]')[0];
+    if (cssEl.href.includes("bs" + bsVersion + "-jf")) {
+        var href = "bs" + bsVersion + ".css";
+    } else {
+        var href = "bs" + bsVersion + "-jf.css";
+    };
+    cssEl.href = href;
+    document.cookie = "css=" + href;
+};
+var buttonWidth = 0;
+var inTransition = false;
+function toggleCSSAnim(el) {
+    var switchToColor = window.getComputedStyle(document.body, null).backgroundColor;
+    if (window.innerWidth < 1500) { 
+        var radius = Math.sqrt(Math.pow(window.innerWidth, 2) + Math.pow(window.innerHeight, 2));
+        var currentRadius = el.getBoundingClientRect().width / 2;
+        var scale = radius / currentRadius;
+        buttonWidth = window.getComputedStyle(el, null).width;
+        document.body.classList.remove('smooth-transition');
+        el.style.transform = 'scale(' + scale + ')';
+        el.style.color = switchToColor;
+        var transitionEnd = whichTransitionEvent();
+        el.addEventListener(transitionEnd, function() {
+            if (this.style.transform.length != 0) {
+                toggleCSS();
+                this.style.removeProperty('transform');
+                document.body.classList.add('smooth-transition');
+            };
+        }, false);
+    } else {
+        toggleCSS();
+        el.style.color = switchToColor;
+    };
+};
+var cssFile = "{{ css_file }}";
+var buttonColor = 'custom';
+if (cssFile.includes('jf')) {
+    buttonColor = 'rgb(255,255,255)';
+} else if (cssFile.length == 7) {
+    buttonColor = 'rgb(16,16,16)';
+}
+if (buttonColor != 'custom') {
+    var fakeButton = document.createElement('i');
+    fakeButton.classList.add('fa', 'fa-circle', 'circle');
+    // fakeButton.style.color = buttonColor;
+    // fakeButton.style.marginLeft = '2rem;'
+    fakeButton.style = 'color: ' + buttonColor + '; margin-left: 0.4rem;';
+    fakeButton.id = 'fakeButton';
+    var switchButton = document.createElement('button');
+    switchButton.classList.add('btn', 'btn-secondary');
+    switchButton.textContent = 'Theme';
+    switchButton.onclick = function() {
+        var fb = document.getElementById('fakeButton')
+        toggleCSSAnim(fb); 
+    };
+    var group = document.getElementById('headerButtons');
+    switchButton.appendChild(fakeButton);
+    group.appendChild(switchButton);
+};
+
+var bsVersion = {{ bsVersion }};
 if (bsVersion == 5) {
     function createModal(id, find = false) {
         if (find) {
@@ -22,13 +113,6 @@ if (bsVersion == 5) {
             });
         });
     };
-
-
-//     var loginModal = new bootstrap.Modal(document.getElementById('login'));
-//     var settingsModal = new bootstrap.Modal(document.getElementById('settingsMenu'));
-//     var userDefaultsModal = new bootstrap.Modal(document.getElementById('userDefaults'));
-//     var usersModal = new bootstrap.Modal(document.getElementById('users'));
-//     var restartModal = new bootstrap.Modal(document.getElementById('restartModal'));
 } else if (bsVersion == 4) {
     document.getElementById('send_to_address_enabled').classList.remove('form-check-input');
     function createModal(id, find = false) {

jellyfin_accounts/web.py

@@ -6,6 +6,12 @@ from jellyfin_accounts import web_log as log
 from jellyfin_accounts.web_api import config, checkInvite, validator
 
 
+if config.getboolean("ui", "bs5"):
+    bsVersion = 5
+else:
+    bsVersion = 4
+
+
 @app.errorhandler(404)
 def page_not_found(e):
     return (
@@ -35,11 +41,13 @@ def admin():
 def static_proxy(path):
     if "html" not in path:
         if "admin.js" in path:
-            if config.getboolean("ui", "bs5"):
-                bsVersion = 5
-            else:
-                bsVersion = 4
-            return render_template("admin.js", bsVersion=bsVersion)
+            return (
+                render_template("admin.js",
+                                bsVersion=bsVersion,
+                                css_file=css_file),
+                200,
+                {"Content-Type": "text/javascript"},
+            )
         return app.send_static_file(path)
     return (
         render_template(

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "jellyfin-accounts",
+  "version": "1.0.0",
+  "description": "This is only used for grabbing scss build dependencies, and isn't a real package.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hrfee/jellyfin-accounts.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/hrfee/jellyfin-accounts/issues"
+  },
+  "homepage": "https://github.com/hrfee/jellyfin-accounts#readme",
+  "dependencies": {
+    "autoprefixer": "^9.8.4",
+    "bootstrap": "^5.0.0-alpha1",
+    "bootstrap4": "npm:bootstrap@^4.5.0",
+    "clean-css-cli": "^4.3.0",
+    "postcss-cli": "^7.1.1"
+  }
+}

poetry.lock

@@ -162,6 +162,17 @@ MarkupSafe = ">=0.23"
 [package.extras]
 i18n = ["Babel (>=0.8)"]
 
+[[package]]
+category = "dev"
+description = "Sass for Python: A straightforward binding of libsass for Python."
+name = "libsass"
+optional = false
+python-versions = "*"
+version = "0.20.0"
+
+[package.dependencies]
+six = "*"
+
 [[package]]
 category = "main"
 description = "Safely add untrusted strings to HTML/XML markup."
@@ -332,6 +343,17 @@ optional = false
 python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*"
 version = "1.15.0"
 
+[[package]]
+category = "dev"
+description = "tasks runner for python projects"
+name = "taskipy"
+optional = false
+python-versions = ">=3.6,<4.0"
+version = "1.2.1"
+
+[package.dependencies]
+toml = ">=0.10.0,<0.11.0"
+
 [[package]]
 category = "dev"
 description = "Python Library for Tom's Obvious, Minimal Language"
@@ -400,7 +422,7 @@ dev = ["pytest", "pytest-timeout", "coverage", "tox", "sphinx", "pallets-sphinx-
 watchdog = ["watchdog"]
 
 [metadata]
-content-hash = "847ce2a6a3927efdfb3b78935b348e9b4dc63d7e60959af6cc8b9fbc5a24567b"
+content-hash = "fa8b5fb1ded41b673b8062a2bfc6467e6a484ff62b578147bec001d7d9d8ca16"
 python-versions = "^3.6"
 
 [metadata.files]
@@ -518,6 +540,21 @@ jinja2 = [
     {file = "Jinja2-2.11.2-py2.py3-none-any.whl", hash = "sha256:f0a4641d3cf955324a89c04f3d94663aa4d638abe8f733ecd3582848e1c37035"},
     {file = "Jinja2-2.11.2.tar.gz", hash = "sha256:89aab215427ef59c34ad58735269eb58b1a5808103067f7bb9d5836c651b3bb0"},
 ]
+libsass = [
+    {file = "libsass-0.20.0-cp27-cp27m-macosx_10_14_intel.whl", hash = "sha256:107c409524c6a4ed14410fa9dafa9ee59c6bd3ecae75d73af749ab2b75685726"},
+    {file = "libsass-0.20.0-cp27-cp27m-win32.whl", hash = "sha256:98f6dee9850b29e62977a963e3beb3cfeb98b128a267d59d2c3d675e298c8d57"},
+    {file = "libsass-0.20.0-cp27-cp27m-win_amd64.whl", hash = "sha256:b077261a04ba1c213e932943208471972c5230222acb7fa97373e55a40872cbb"},
+    {file = "libsass-0.20.0-cp27-cp27mu-manylinux1_x86_64.whl", hash = "sha256:e6a547c0aa731dcb4ed71f198e814bee0400ce04d553f3f12a53bc3a17f2a481"},
+    {file = "libsass-0.20.0-cp36-abi3-manylinux1_x86_64.whl", hash = "sha256:74f6fb8da58179b5d86586bc045c16d93d55074bc7bb48b6354a4da7ac9f9dfd"},
+    {file = "libsass-0.20.0-cp36-cp36m-win32.whl", hash = "sha256:a43f3830d83ad9a7f5013c05ce239ca71744d0780dad906587302ac5257bce60"},
+    {file = "libsass-0.20.0-cp36-cp36m-win_amd64.whl", hash = "sha256:fd19c8f73f70ffc6cbcca8139da08ea9a71fc48e7dfc4bb236ad88ab2d6558f1"},
+    {file = "libsass-0.20.0-cp37-abi3-macosx_10_14_x86_64.whl", hash = "sha256:8cf72552b39e78a1852132e16b706406bc76029fe3001583284ece8d8752a60a"},
+    {file = "libsass-0.20.0-cp37-cp37m-win32.whl", hash = "sha256:7555d9b24e79943cfafac44dbb4ca7e62105c038de7c6b999838c9ff7b88645d"},
+    {file = "libsass-0.20.0-cp37-cp37m-win_amd64.whl", hash = "sha256:794f4f4661667263e7feafe5cc866e3746c7c8a9192b2aa9afffdadcbc91c687"},
+    {file = "libsass-0.20.0-cp38-cp38-win32.whl", hash = "sha256:3bc0d68778b30b5fa83199e18795314f64b26ca5871e026343e63934f616f7f7"},
+    {file = "libsass-0.20.0-cp38-cp38-win_amd64.whl", hash = "sha256:5c8ff562b233734fbc72b23bb862cc6a6f70b1e9bf85a58422aa75108b94783b"},
+    {file = "libsass-0.20.0.tar.gz", hash = "sha256:b7452f1df274b166dc22ee2e9154c4adca619bcbbdf8041a7aa05f372a1dacbc"},
+]
 markupsafe = [
     {file = "MarkupSafe-1.1.1-cp27-cp27m-macosx_10_6_intel.whl", hash = "sha256:09027a7803a62ca78792ad89403b1b7a73a01c8cb65909cd876f7fcebd79b161"},
     {file = "MarkupSafe-1.1.1-cp27-cp27m-manylinux1_i686.whl", hash = "sha256:e249096428b3ae81b08327a63a485ad0878de3fb939049038579ac0ef61e17e7"},
@@ -645,6 +682,10 @@ six = [
     {file = "six-1.15.0-py2.py3-none-any.whl", hash = "sha256:8b74bedcbbbaca38ff6d7491d76f2b06b3592611af620f8426e82dddb04a5ced"},
     {file = "six-1.15.0.tar.gz", hash = "sha256:30639c035cdb23534cd4aa2dd52c3bf48f06e5f4a941509c8bafd8ce11080259"},
 ]
+taskipy = [
+    {file = "taskipy-1.2.1-py3-none-any.whl", hash = "sha256:99bdaf5b19791c2345806847147e0fc2d28e1ac9446058def5a8b6b3fc9f23e2"},
+    {file = "taskipy-1.2.1.tar.gz", hash = "sha256:5eb2c3b1606c896c7fa799848e71e8883b880759224958d07ba760e5db263175"},
+]
 toml = [
     {file = "toml-0.10.1-py2.py3-none-any.whl", hash = "sha256:bda89d5935c2eac546d648028b9901107a595863cb36bae0c73ac804a9b4ce88"},
     {file = "toml-0.10.1.tar.gz", hash = "sha256:926b612be1e5ce0634a2ca03470f95169cf16f939018233a670519cb4ac58b0f"},

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "jellyfin-accounts"
-version = "0.3.0"
+version = "0.3.3"
 readme = "README.md"
 description = "A simple account management system for Jellyfin"
 authors = ["Harvey Tindall <harveyltindall@gmail.com>"]
@@ -8,7 +8,7 @@ license = "MIT"
 homepage = "https://github.com/hrfee/jellyfin-accounts"
 repository = "https://github.com/hrfee/jellyfin-accounts"
 keywords = ["jellyfin", "jf-accounts"]
-include = ["jellyfin_accounts/data/*"]
+include = ["jellyfin_accounts/data/*", "jellyfin_accounts/data/static/*.css"]
 exclude = ["images/*", "scss/*"]
 classifiers = [
         "Programming Language :: Python :: 3",
@@ -16,7 +16,6 @@ classifiers = [
         "Operating System :: OS Independent",
 ]
 
-
 [tool.poetry.dependencies]
 python = "^3.6"
 pyopenssl = "^19.1.0"
@@ -34,11 +33,17 @@ packaging = "^20.4"
 [tool.poetry.dev-dependencies]
 neovim = "^0.3.1"
 black = "^19.10b0"
-
+taskipy = "^1.2.1"
+libsass = "^0.20.0"
 
 [tool.poetry.scripts]
 jf-accounts = 'jellyfin_accounts:main'
 
+[tool.taskipy.tasks]
+pre_compile-css = "task get-npm-deps"
+compile-css = "python scss/compile.py"
+get-npm-deps = "python scss/get_node_deps.py"
+
 [build-system]
 requires = ["poetry>=0.12"]
 build-backend = "poetry.masonry.api"

scss/README.md

@@ -2,15 +2,9 @@
 
 * `bs<4/5>-jf.scss` contains the source for the customizations to bootstrap. To customize the UI, you can make modifications to this file and then compile it.
 
-**Note**: For BS5, it is assumed that bootstrap is installed in `../../node_modules/bootstrap` relative to itself.
-For BS4, it assumes that bootstrap is installed in `../../node_modules/bootstrap4` relative to itself (`npm install bootstrap4@npm:bootstrap`).
-* Compilation requires a sass compiler of your choice, and `postcss-cli`, `autoprefixer` + `clean-css-cli` from npm.
-* If you're using `sassc`, run `./compile.sh bs<4/5>-jf.scss` in this directory. This will create a .css file, and minified .css file.
-* For `node-sass`, replace the `sassc` line in `compile.sh` with 
-```
-node-sass --output-style expanded --precision 6 $1 $css_file
-```
-and run as above.
-* If you're building from source, copy the minified css to `<jf-accounts git directory>/jellyfin_accounts/data/static/bs<4/5>-jf.css`.
-* If you're just customizing your install, set `custom_css` in your config as the path to your minified css and change the `theme` option to `Custom CSS`.
+**Note**: It is assumed that Bootstrap 5 is installed in `../../node_modules/bootstrap` relative to itself, and Bootstrap 4 in `../../node_modules/bootstrap4`.
+
+* Compilation requires dev dependencies (`poetry update`), bootstrap and some extra npm packages.
+* If you're buildings from source, you can simply run `poetry run task compile-css` before building to automatically get deps and compile CSS.
+* If you are creating custom css, run `poetry run task get-npm-deps` to only install the necessary dependencies. Follow along with the commands `scss/compile.py` runs to build your css and then set `custom_css` in your config as the path to your minified css and change the `theme` option to `Custom CSS`.
 

scss/bs4/compile.sh

@@ -1,10 +0,0 @@
-#!/bin/bash
-css_file=$(echo $1 | sed 's/scss/css/g')
-min_file=$(echo $1 | sed 's/scss/min.css/g')
-sassc -t expanded -p 6 $1 $css_file
-echo "Compiled."
-postcss $css_file --replace --use autoprefixer
-echo "Prefixed."
-echo "Written to $css_file."
-cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output $min_file $css_file
-echo "Minified version written to $min_file."

scss/bs5/compile.sh

@@ -1,10 +0,0 @@
-#!/bin/bash
-css_file=$(echo $1 | sed 's/scss/css/g')
-min_file=$(echo $1 | sed 's/scss/min.css/g')
-sassc -t expanded -p 6 $1 $css_file
-echo "Compiled."
-postcss $css_file --replace --use autoprefixer
-echo "Prefixed."
-echo "Written to $css_file."
-cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output $min_file $css_file
-echo "Minified version written to $min_file."

scss/compile.py

@@ -0,0 +1,35 @@
+#!/usr/bin/env python3
+import sass
+import subprocess
+import shutil
+from pathlib import Path
+
+def runcmd(cmd):
+    proc = subprocess.Popen(cmd.split(), stdout=subprocess.PIPE)
+    return proc.communicate()
+
+local_path = Path(__file__).resolve().parent
+node_bin = local_path.parent / 'node_modules' / '.bin'
+
+for bsv in [d for d in local_path.iterdir() if 'bs' in d.name]:
+    scss = bsv / f'{bsv.name}-jf.scss'
+    css = bsv / f'{bsv.name}-jf.css'
+    min_css = bsv.parents[1] / 'jellyfin_accounts' / 'data' / 'static' / f'{bsv.name}-jf.css'
+    with open(css, 'w') as f:
+        f.write(sass.compile(filename=str(scss.resolve()),
+                             output_style='expanded',
+                             precision=6))
+    if css.exists():
+        print(f'{bsv.name}: Compiled.')
+        runcmd(f'{str((node_bin / "postcss").resolve())} {str(css.resolve())} --replace --use autoprefixer')
+        print(f'{bsv.name}: Prefixed.')
+        runcmd(f'{str((node_bin / "cleancss").resolve())} --level 1 --format breakWith=lf --output {str(min_css.resolve())} {str(css.resolve())}')
+        if min_css.exists():
+            print(f'{bsv.name}: Minified and copied to {str(min_css.resolve())}.')
+
+for v in [('bootstrap', 'bs5'), ('bootstrap4', 'bs4')]:
+    new_path = str((local_path.parent / 'jellyfin_accounts' / 'data' / 'static' / (v[1] + '.css')).resolve())
+    shutil.copy(str((local_path.parent / 'node_modules' / v[0] / 'dist' / 'css' / 'bootstrap.min.css').resolve()),
+                new_path)
+    print(f'Copied {v[1]} to {new_path}')
+

scss/get_node_deps.py

@@ -0,0 +1,17 @@
+#!/usr/bin/env python3
+
+import subprocess
+from pathlib import Path
+
+def runcmd(cmd):
+    proc = subprocess.Popen(cmd.split(), stdout=subprocess.PIPE)
+    return proc.communicate()
+
+print('Installing npm packages')
+
+root_path = Path(__file__).parents[1]
+runcmd(f'npm install --prefix {root_path}')
+
+if (root_path / 'node_modules' / 'cleancss').exists():
+    print(f'Installed successfully in {str((root_path / "node_modules").resolve())}.')
+