add osu folder, update

.gitignore

@@ -9,6 +9,10 @@ lerna-debug.log*
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
+pnpm-lock.yaml
+package-lock.json
+.envrc
+
 # build
 public/build
 public/build/*

package.json

@@ -4,6 +4,7 @@
   "version": "0.2.0",
   "description": "Osu! visualizer",
   "main": "src/index.js",
+  "repository": "github:danbulant/osuVisualizer",
   "scripts": {
     "start": "concurrently \"npm:svelte-dev\" \"electron-forge start\"",
     "package": "electron-forge package",

public/build/bundle.css

@@ -1,6 +1,6 @@
 main.svelte-5atqf{position:relative;width:100vw;height:100vh}.background.svelte-5atqf{position:fixed;z-index:0;left:0;right:0;width:100vw;height:100vh}.menu.svelte-5atqf{position:absolute;z-index:1;left:0;right:0;width:100vw;height:100vh}
 .info.svelte-1qt5obi.svelte-1qt5obi{opacity:1;position:relative;top:0;left:0;width:100vw;height:80px;transition:opacity 0.6s;z-index:2}.volume.svelte-1qt5obi.svelte-1qt5obi{opacity:1;position:fixed;z-index:5;right:0;bottom:0;border-radius:50%;font-size:30px;color:white;background-color:black;width:100px;height:100px}.volume.svelte-1qt5obi .slider.svelte-1qt5obi{position:relative;top:0;left:0;width:100%;height:100%}.percent.svelte-1qt5obi.svelte-1qt5obi{position:absolute;top:25px;left:0;width:100%;height:100%;text-align:center}.progress-ring.svelte-1qt5obi.svelte-1qt5obi{position:absolute;top:0;left:0;width:100%;height:100%}.progress-ring.svelte-1qt5obi circle.svelte-1qt5obi{transition:stroke-dashoffset 0.32s;transform:rotate(-90deg);transform-origin:50% 50%;position:absolute;top:1px;left:1px;width:100%;height:100%}.hidden.svelte-1qt5obi.svelte-1qt5obi{opacity:0;transition:opacity 1s}.info.svelte-1qt5obi .song.svelte-1qt5obi{color:white;position:absolute;padding:5px 5px 5px 25px;top:0;right:0;text-align:right;background:black;background:linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 15%, rgba(0,0,0,0.5) 100%)}.info.svelte-1qt5obi .song h2.svelte-1qt5obi{margin:0}.info.svelte-1qt5obi .controls.svelte-1qt5obi{height:50px;display:flex}.info.svelte-1qt5obi .controls div.svelte-1qt5obi{height:100%}.info.svelte-1qt5obi .controls img.svelte-1qt5obi{height:100%;filter:invert(100%)}.info.svelte-1qt5obi .controls .settings img.svelte-1qt5obi{height:65%;padding-top:25%}
 .main.svelte-18bmol8.svelte-18bmol8{width:100%;height:100%;background-size:cover;background-repeat:no-repeat}@keyframes svelte-18bmol8-bpm{from{width:500px;height:500px;top:calc(50vh - 250px);left:calc(50vw - 250px)}to{width:525px;height:525px;top:calc(50vh - 262.5px);left:calc(50vw - 262.5px)}}@keyframes svelte-18bmol8-bpmShadow{0%{width:500px;height:500px;top:calc(50vh - 250px);left:calc(50vw - 250px)}70%{width:510px;height:510px;top:calc(50vh - 255px);left:calc(50vw - 255px)}100%{width:500px;height:500px;top:calc(50vh - 250px);left:calc(50vw - 250px)}}video.svelte-18bmol8.svelte-18bmol8{position:fixed;z-index:0;top:0;left:0;width:100vw;height:100vh}.main.svelte-18bmol8 img.svelte-18bmol8{position:fixed;width:500px;height:500px;top:calc(50vh - 250px);left:calc(50vw - 250px);z-index:1}.main.svelte-18bmol8 .logo.svelte-18bmol8{animation-name:svelte-18bmol8-bpm;animation-direction:alternate}.main.svelte-18bmol8 .shadow.svelte-18bmol8{opacity:0.2;animation-name:svelte-18bmol8-bpmShadow;animation-delay:50ms}.main.svelte-18bmol8 .repeat.svelte-18bmol8{animation-iteration-count:infinite}
-.bg.svelte-1895ym0{position:fixed;display:none;width:100vw;height:100vh;top:0;left:0;z-index:3}.bg.visible.svelte-1895ym0{display:block}nav.svelte-1895ym0{position:fixed;height:100vh;width:400px;top:0;left:-400px;opacity:0;background:rgba(0,0,0,0.4);color:white;z-index:4;transition:opacity 0.3s, left 0.3s}nav.visible.svelte-1895ym0{left:0;opacity:1}
+.bg.svelte-1h7gt2z{position:fixed;display:none;width:100vw;height:100vh;top:0;left:0;z-index:3}.bg.visible.svelte-1h7gt2z{display:block}nav.svelte-1h7gt2z{position:fixed;height:100vh;width:400px;top:0;left:-400px;opacity:0;background:rgba(0,0,0,0.4);color:white;z-index:4;padding-left:1rem;transition:opacity 0.3s, left 0.3s}nav.visible.svelte-1h7gt2z{left:0;opacity:1}
 
 /*# sourceMappingURL=bundle.css.map */

src/App.svelte

@@ -8,6 +8,7 @@
     var songData = {};
     var config = store.get("config");
     var osuData = {};
+    const osuFolder = process.env.OSU_FOLDER || process.env.USERPROFILE + "/AppData/Local/osu!";
     
     (() => {
         const configTemplate = {
@@ -50,10 +51,10 @@
 
 <main>
     <div class="background">
-        <Visualizer bind:songData bind:osuData {config} />
+        <Visualizer bind:songData bind:osuData {config} {osuFolder} />
     </div>
     <div class="menu">
-        <Menu bind:song={songData} bind:osuData bind:config />
+        <Menu bind:song={songData} bind:osuData bind:config {osuFolder} />
     </div>
 </main>
 

src/Menu.svelte

@@ -1,11 +1,10 @@
 <script>
     import Options from "./components/options.svelte";
-    const fs = require("fs");
-    const osuParser = require("./lib/osu-parser.js");
 
     export var osuData;
     export var song;
     export var config;
+    export var osuFolder;
 
     var last = Date.now();
     var lastVolumeUpdate = Date.now() - 5000;
@@ -53,7 +52,7 @@
                 // var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                 // song.context = audioCtx;
                 // song.analyser = audioCtx.createAnalyser();
-                song.audio = new Audio(process.env.USERPROFILE + "/AppData/Local/osu!/Songs/" + song.folder + "/" + song.audioFile);
+                song.audio = new Audio(`${osuFolder}/Songs/${song.folder}/${song.audioFile}`);
                 // song.source = audioCtx.createMediaElementSource(song.audio);
                 // song.source.connect(song.analyser);
                 // song.analyser.connect(audioCtx.destination);
@@ -76,7 +75,7 @@
                         artist: song.artist,
                         album: "Osu! visualizer",
                         artwork: [
-                            // { src: process.env.USERPROFILE + "/AppData/Local/osu!/Data/bt/" + song.id + ".jpg", type: 'image/jpeg' },
+                            { src: `${osuFolder}/Data/bt/${song.id}.jpg`, type: 'image/jpeg' },
                         ]
                     });
 
@@ -184,7 +183,7 @@
             </div>
         </div>
     {/if}
-    <Options bind:config={config} bind:visible={settingsOpen} />
+    <Options bind:config={config} bind:visible={settingsOpen} {osuFolder} />
 </div>
 
 <style>

src/Visualizer.svelte

@@ -1,22 +1,22 @@
 <script>
-    import { onMount } from 'svelte';
     const fs = require("fs");
     const OsuDBParser = require("osu-db-parser");
     const osuParser = require("./lib/osu-parser.js");
     export var osuData;
     export var songData;
     export var config;
+    export var osuFolder;
 
     var wallpapers = [];
     try {
-        wallpapers = fs.readdirSync(process.env.USERPROFILE + "/AppData/Local/osu!/Data/bg");
+        wallpapers = fs.readdirSync(`${osuFolder}/Data/bg`);
     } catch(e) {
         console.error("Osu backgrounds weren't found. You must have osu installed and started at least once.", e);
         alert("Osu backgrounds not found!");
     }
 
     try {
-        osuData = (new OsuDBParser(Buffer.from(fs.readFileSync(process.env.USERPROFILE + "/AppData/Local/osu!/osu!.db")))).getOsuDBData();
+        osuData = (new OsuDBParser(Buffer.from(fs.readFileSync(`${osuFolder}/osu!.db`)))).getOsuDBData();
         console.log(osuData);
         osuData.songs = osuData.beatmaps.map(v => ({
             artist: v.artist_name,
@@ -37,18 +37,16 @@
     var wallpaper;
     function shuffleWallpapers() {
         switch(config.backgrounds) {
-            case 0:
-                wallpaper = `${process.env.USERPROFILE.replace(/\\/g, "/")}/AppData/Local/osu!/Data/bg/${wallpapers[Math.floor(Math.random() * wallpapers.length)]}`;
-                break;
             case 1:
                 if(songData.beatmap) {
-                    wallpaper = `${process.env.USERPROFILE.replace(/\\/g, "/")}/AppData/Local/osu!/Songs/${songData.folder}/${songData.beatmap.bgFilename}`;
+                    wallpaper = `${osuFolder}/Songs/${songData.folder}/${songData.beatmap.bgFilename}`;
                 } else {
-                    wallpaper = `${process.env.USERPROFILE.replace(/\\/g, "/")}/AppData/Local/osu!/Data/bg/${wallpapers[Math.floor(Math.random() * wallpapers.length)]}`;
+                    wallpaper = `${osuFolder}/Data/bg/${wallpapers[Math.floor(Math.random() * wallpapers.length)]}`;
                 }
                 break;
+            case 0:
             default:
-                wallpaper = `${process.env.USERPROFILE.replace(/\\/g, "/")}/AppData/Local/osu!/Data/bg/${wallpapers[Math.floor(Math.random() * wallpapers.length)]}`;
+                wallpaper = `${osuFolder}/Data/bg/${wallpapers[Math.floor(Math.random() * wallpapers.length)]}`;
         }
     }
     shuffleWallpapers();
@@ -67,11 +65,11 @@
         }
     }
     function fetchBeatmap() {
-        let file = fs.readFileSync(process.env.USERPROFILE + "/AppData/Local/osu!/Songs/" + songData.folder + "/" + songData.dataFile);
+        let file = fs.readFileSync(`${osuFolder}/Songs/${songData.folder}/${songData.dataFile}`);
         songData.beatmap = osuParser.parseContent(file);
 
         if(config.backgrounds === 1) {
-            wallpaper = `${process.env.USERPROFILE.replace(/\\/g, "/")}/AppData/Local/osu!/Songs/${songData.folder}/${songData.beatmap.bgFilename}`;
+            wallpaper = `${osuFolder}/Songs/${songData.folder}/${songData.beatmap.bgFilename}`;
         }
     }
     $: if(songData && songData.dataFile && !songData.beatmap) fetchBeatmap();
@@ -160,7 +158,7 @@
             top: {mouse.y}px;
             left: {mouse.x}px;
         ">
-            <source src="file:///{process.env.USERPROFILE.replace(/\\/g, "/")}/AppData/Local/osu!/Songs/{songData.folder}/{songData.beatmap.video}">
+            <source src="file://{osuFolder}/Songs/{songData.folder}/{songData.beatmap.video}">
         </video>
     {/if}
     <img src="images/logo.svg" alt="logo" class="logo" style="animation-duration: {animDuration}ms;" class:repeat={songData.playing}>

src/components/options.svelte

@@ -1,6 +1,7 @@
 <script>
     export var config;
     export var visible;
+    export var osuFolder;
 
     $: console.log("Config", config);
 </script>
@@ -54,6 +55,7 @@
                 <input type="range" min="1000" max="15000" step="500" bind:value={config.autohide.volume}>
             </div>
         </div>
+        <span>Osu folder used: <code>{osuFolder}</code></span>
     </nav>
 </div>
     
@@ -80,6 +82,7 @@
         background: rgba(0,0,0,0.4);
         color: white;
         z-index: 4;
+        padding-left: 1rem;
         transition: opacity 0.3s, left 0.3s;
     }
     nav.visible {

src/index.js

@@ -11,6 +11,8 @@ if (require('electron-squirrel-startup')) { // eslint-disable-line global-requir
 
 if (!isDev) require('update-electron-app')()
 
+console.log("isDev?", isDev);
+
 app.commandLine.appendSwitch('autoplay-policy', 'no-user-gesture-required');
 
 var mainWindow;
@@ -32,7 +34,10 @@ const createWindow = () => {
     mainWindow.loadFile(path.join(__dirname, '../public/index.html'));
 
     // Open the DevTools.
-    if(isDev) mainWindow.webContents.openDevTools();
+    if(isDev) mainWindow.webContents.openDevTools({
+        activate: true,
+        mode: 'detach'
+    });
 };
 
 require('electron-reload')(__dirname, {
@@ -72,7 +77,7 @@ async function setActivity() {
 
     const activity = await mainWindow.webContents.executeJavaScript('window.songActivity');
 
-    rpc.setActivity(activity);
+    rpc.setActivity(activity).catch((e) => { console.error(e); });
 }
 
 rpc.on('ready', () => {