osuVisualizer/public/build/bundle.css.map

{
  "version": 3,
  "file": "bundle.css",
  "sources": [
    "App.svelte",
    "Menu.svelte",
    "Visualizer.svelte",
    "options.svelte"
  ],
  "sourcesContent": [
    "<script>\r\n    import Menu from \"./Menu.svelte\";\r\n    import Visualizer from \"./Visualizer.svelte\";\r\n    const Store = require('electron-store');\r\n\r\n    const store = new Store();\r\n\r\n    var songData = {};\r\n    var config = store.get(\"config\");\r\n    var osuData = {};\r\n    \r\n    (() => {\r\n        const configTemplate = {\r\n            parallax: {\r\n                enabled: true,\r\n                treshold: 10\r\n            },\r\n            rpc: true,\r\n            backgrounds: 0,\r\n            mediaSession: true,\r\n            videoBackground: true,\r\n            autohide: {\r\n                info: 2000,\r\n                volume: 2000\r\n            }\r\n        };\r\n\r\n        function checkSettings(value, template) {\r\n            if(value === undefined) return template;\r\n            if(typeof value !== \"object\") return value;\r\n\r\n            var out = {};\r\n\r\n            for(var key in template) {\r\n                if(value[key] === undefined || typeof value[key] === \"undefined\") {\r\n                    out[key] = template[key];\r\n                    continue;\r\n                }\r\n                if(typeof value[key] === \"object\") out[key] = checkSettings(value[key], template[key]);\r\n                if(typeof value[key] !== \"object\") out[key] = value[key];\r\n            }\r\n\r\n            return out;\r\n        }\r\n        config = checkSettings(config, configTemplate);\r\n    })();\r\n\r\n    $: store.set(\"config\", config);\r\n</script>\r\n\r\n<main>\r\n    <div class=\"background\">\r\n        <Visualizer bind:songData bind:osuData {config} />\r\n    </div>\r\n    <div class=\"menu\">\r\n        <Menu bind:song={songData} bind:osuData bind:config />\r\n    </div>\r\n</main>\r\n\r\n<style>\r\n    main {\r\n        position: relative;\r\n        width: 100vw;\r\n        height: 100vh;\r\n    }\r\n    .background {\r\n        position: fixed;\r\n        z-index: 0;\r\n        left: 0;\r\n        right: 0;\r\n        width: 100vw;\r\n        height: 100vh;\r\n    }\r\n    .menu {\r\n        position: absolute;\r\n        z-index: 1;\r\n        left: 0;\r\n        right: 0;\r\n        width: 100vw;\r\n        height: 100vh;\r\n    }\r\n</style>",
    "<script>\r\n    import Options from \"./components/options.svelte\";\r\n    const fs = require(\"fs\");\r\n    const osuParser = require(\"./lib/osu-parser.js\");\r\n\r\n    export var osuData;\r\n    export var song;\r\n    export var config;\r\n\r\n    var last = Date.now();\r\n    var lastVolumeUpdate = Date.now() - 5000;\r\n    var settingsOpen = false;\r\n    var now = Date.now();\r\n\r\n    setInterval(() => {\r\n        now = Date.now();\r\n    }, 800);\r\n\r\n    function resetPool() {\r\n        if(!osuData.songs) return false;\r\n        osuData.songPool = osuData.songs.filter(v => true);\r\n        let a = osuData.songPool;\r\n        for (let i = a.length - 1; i > 0; i--) { // shuffle\r\n            const j = Math.floor(Math.random() * (i + 1));\r\n            [a[i], a[j]] = [a[j], a[i]];\r\n        }\r\n        osuData.songPool.forEach(v => {\r\n            delete v.audio;\r\n            delete v.video;\r\n            v.playing = true;\r\n        })\r\n        song = osuData.songPool.shift();\r\n    }\r\n\r\n    function playNext() {\r\n        if(song.audio) {\r\n            song.audio.pause();\r\n        }\r\n        if(osuData.songPool.length) {\r\n            song = osuData.songPool.shift();\r\n        } else {\r\n            resetPool();\r\n        }\r\n    }\r\n\r\n    $: resetPool(osuData.songs);\r\n\r\n    $: console.log(song);\r\n\r\n    $: {\r\n        (() => {\r\n            if(song && song.folder && !song.audio) {\r\n                // var audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n                // song.context = audioCtx;\r\n                // song.analyser = audioCtx.createAnalyser();\r\n                song.audio = new Audio(process.env.USERPROFILE + \"/AppData/Local/osu!/Songs/\" + song.folder + \"/\" + song.audioFile);\r\n                // song.source = audioCtx.createMediaElementSource(song.audio);\r\n                // song.source.connect(song.analyser);\r\n                // song.analyser.connect(audioCtx.destination);\r\n                song.audio.play();\r\n\r\n                song.audio.onended = () => {\r\n                    playNext();\r\n                }\r\n                song.audio.onpause = () => {\r\n                    song.playing = false;\r\n                    if(song.video) song.video.pause();\r\n                }\r\n                song.audio.onplay = () => {\r\n                    song.playing = true;\r\n                    if(song.video) song.video.play();\r\n                }\r\n                if ('mediaSession' in navigator && config.mediaSession) {\r\n                    navigator.mediaSession.metadata = new MediaMetadata({\r\n                        title: song.song,\r\n                        artist: song.artist,\r\n                        album: \"Osu! visualizer\",\r\n                        artwork: [\r\n                            // { src: process.env.USERPROFILE + \"/AppData/Local/osu!/Data/bt/\" + song.id + \".jpg\", type: 'image/jpeg' },\r\n                        ]\r\n                    });\r\n\r\n                    navigator.mediaSession.setActionHandler('play', function() { song.playing = true; song.audio.play(); });\r\n                    navigator.mediaSession.setActionHandler('pause', function() { song.playing = false; song.audio.pause(); });\r\n                    navigator.mediaSession.setActionHandler('nexttrack', function() { playNext()});\r\n                }\r\n            }\r\n        })();\r\n    }\r\n\r\n    $: if(song && song.audio && config.rpc) {\r\n        if(song.playing) {\r\n            window.songActivity = {\r\n                state: \"Listening to osu! beatmaps\",\r\n                details: `${song.artist} - ${song.song}`,\r\n                startTimestamp: Date.now(),\r\n                endTimestamp: Date.now() + song.audio.duration * 1000,\r\n                instance: false,\r\n                largeImageKey: \"logo\",\r\n                largeImageText: \"Osu!visualizer\"\r\n            }\r\n        } else {\r\n            window.songActivity = {\r\n                state: \"Paused\",\r\n                details: `${song.artist} - ${song.song}`,\r\n                instance: false,\r\n                largeImageKey: \"logo\",\r\n                largeImageText: \"Osu!visualizer\"\r\n            }\r\n        }\r\n    }\r\n\r\n    function togglePlay() {\r\n        song.playing = !song.playing;\r\n        if(!song.audio) return;\r\n        if(song.playing) {\r\n            song.audio.play();\r\n        } else {\r\n            song.audio.pause();\r\n        }\r\n    }\r\n\r\n    var volume = 1;\r\n\r\n    function updateVolume(e) {\r\n        if(!song || !song.audio || !e.altKey) return;\r\n        lastVolumeUpdate = Date.now();\r\n        volume += e.deltaY * -0.0005;\r\n        volume = Math.min(1, Math.max(volume, 0));\r\n    }\r\n\r\n    $: if(song.audio) song.audio.volume = volume;\r\n\r\n    setTimeout(() => {\r\n        playNext();\r\n    }, 200);\r\n\r\n    const volumeWidth = 100;\r\n    const volumeStroke = 4;\r\n    const volumeRadius = 50;\r\n</script>\r\n\r\n<svelte:window on:mousemove={() => last = Date.now()} on:wheel={e => updateVolume(e)} />\r\n\r\n<div class=\"menu\">\r\n    {#if now - last < config.autohide.info + 1000}\r\n        <div class=\"info\" class:hidden={now - last > config.autohide.info}>\r\n            {#if song}\r\n                <div class=\"song\">\r\n                    <h2>{song.artist} - {song.song}</h2>\r\n                    <div class=\"controls\">\r\n                        <div class=\"play\" on:click={togglePlay}>\r\n                            <img src=\"images/music_{song.playing ? \"pause\" : \"play\"}.svg\" alt=\"{song.playing ? \"Pause\" : \"Play\"} music\" title=\"{song.playing ? \"Pause\" : \"Play\"} music\">\r\n                        </div>\r\n                        <div class=\"forward\" on:click={playNext}>\r\n                            <img src=\"images/music_forward.svg\" alt=\"Skip the song\" title=\"Skip the song\">\r\n                        </div>\r\n                        <div class=\"settings\" on:click={() => settingsOpen = !settingsOpen}>\r\n                            <img src=\"images/settings.svg\" alt=\"Settings\" title=\"Open settings\">\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            {/if}\r\n        </div>\r\n    {/if}\r\n    {#if now - lastVolumeUpdate < config.autohide.volume + 1000 && song && song.audio}\r\n        <div class=\"volume\" class:hidden={now - lastVolumeUpdate > config.autohide.volume}>\r\n            <div class=\"slider\">\r\n                <div class=\"percent\">\r\n                    {Math.round(song.audio.volume * 100)}%\r\n                </div>\r\n                <svg class=\"progress-ring\" width={volumeWidth} height={volumeWidth}>\r\n                    <circle\r\n                        stroke-width={volumeStroke}\r\n                        fill=\"transparent\"\r\n                        stroke=\"blue\"\r\n                        stroke-dasharray={volumeRadius * 2 * Math.PI + \" \" + volumeRadius * 2 * Math.PI}\r\n                        stroke-dashoffset={volumeRadius * 2 * Math.PI - song.audio.volume * volumeRadius * 2 * Math.PI}\r\n                        r={volumeRadius - 1}\r\n                        cx={volumeRadius - 1}\r\n                        cy={volumeRadius + 1}\r\n                    />\r\n                </svg>\r\n            </div>\r\n        </div>\r\n    {/if}\r\n    <Options bind:config={config} bind:visible={settingsOpen} />\r\n</div>\r\n\r\n<style>\r\n    .info {\r\n        opacity: 1;\r\n        position: relative;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100vw;\r\n        height: 80px;\r\n        transition: opacity 0.6s;\r\n        z-index: 2;\r\n    }\r\n\r\n    .volume {\r\n        opacity: 1;\r\n        position: fixed;\r\n        z-index: 5;\r\n        right: 0;\r\n        bottom: 0;\r\n        border-radius: 50%;\r\n        font-size: 30px;\r\n        color: white;\r\n        background-color: black;\r\n        width: 100px;\r\n        height: 100px;\r\n    }\r\n    .volume .slider {\r\n        position: relative;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n    .percent {\r\n        position: absolute;\r\n        top: 25px;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        text-align: center;\r\n    }\r\n    .progress-ring {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n    .progress-ring circle {\r\n        transition: stroke-dashoffset 0.32s;\r\n        transform: rotate(-90deg);\r\n        transform-origin: 50% 50%;\r\n        position: absolute;\r\n        top: 1px;\r\n        left: 1px;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n\r\n    .hidden {\r\n        opacity: 0;\r\n        transition: opacity 1s;\r\n    }\r\n\r\n    .info .song {\r\n        color: white;\r\n        position: absolute;\r\n        padding: 5px 5px 5px 25px;\r\n        top: 0;\r\n        right: 0;\r\n        text-align: right;\r\n        background: black;\r\n\r\n        background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 15%, rgba(0,0,0,0.5) 100%);\r\n    }\r\n\r\n    .info .song h2 {\r\n        margin: 0;\r\n    }\r\n\r\n    .info .controls {\r\n        height: 50px;\r\n        display: flex;\r\n    }\r\n    .info .controls div {\r\n        height: 100%;\r\n    }\r\n    .info .controls img {\r\n        height: 100%;\r\n        filter: invert(100%);\r\n    }\r\n    .info .controls .settings img {\r\n        height: 65%;\r\n        padding-top: 25%;\r\n    }\r\n</style>",
    "<script>\r\n    import { onMount } from 'svelte';\r\n    const fs = require(\"fs\");\r\n    const OsuDBParser = require(\"osu-db-parser\");\r\n    const osuParser = require(\"./lib/osu-parser.js\");\r\n    export var osuData;\r\n    export var songData;\r\n    export var config;\r\n\r\n    var wallpapers = [];\r\n    try {\r\n        wallpapers = fs.readdirSync(process.env.USERPROFILE + \"/AppData/Local/osu!/Data/bg\");\r\n    } catch(e) {\r\n        console.error(\"Osu backgrounds weren't found. You must have osu installed and started at least once.\", e);\r\n        alert(\"Osu backgrounds not found!\");\r\n    }\r\n\r\n    try {\r\n        osuData = (new OsuDBParser(Buffer.from(fs.readFileSync(process.env.USERPROFILE + \"/AppData/Local/osu!/osu!.db\")))).getOsuDBData();\r\n        console.log(osuData);\r\n        osuData.songs = osuData.beatmaps.map(v => ({\r\n            artist: v.artist_name,\r\n            artist_u: v.artist_name_unicode,\r\n            audioFile: v.audio_file_name,\r\n            folder: v.folder_name,\r\n            song: v.song_title,\r\n            song_u: v.song_title_unicode,\r\n            id: v.beatmapset_id,\r\n            dataFile: `${v.artist_name} - ${v.song_title} (${v.creator_name}) [${v.difficulty}].osu`.replace(/\\/|\\*|\"|:|\\?/g, \"\"),\r\n            playing: true\r\n        })).filter((v, i, a) => a.findIndex(x => x.id === v.id) === i);\r\n    } catch(e) {\r\n        console.error(\"Osu DB weren't found. You must have osu installed and started at least once.\", e);\r\n        alert(\"Osu DB not found!\");\r\n    }\r\n\r\n    var wallpaper;\r\n    function shuffleWallpapers() {\r\n        switch(config.backgrounds) {\r\n            case 0:\r\n                wallpaper = `${process.env.USERPROFILE.replace(/\\\\/g, \"/\")}/AppData/Local/osu!/Data/bg/${wallpapers[Math.floor(Math.random() * wallpapers.length)]}`;\r\n                break;\r\n            case 1:\r\n                if(songData.beatmap) {\r\n                    wallpaper = `${process.env.USERPROFILE.replace(/\\\\/g, \"/\")}/AppData/Local/osu!/Songs/${songData.folder}/${songData.beatmap.bgFilename}`;\r\n                } else {\r\n                    wallpaper = `${process.env.USERPROFILE.replace(/\\\\/g, \"/\")}/AppData/Local/osu!/Data/bg/${wallpapers[Math.floor(Math.random() * wallpapers.length)]}`;\r\n                }\r\n                break;\r\n            default:\r\n                wallpaper = `${process.env.USERPROFILE.replace(/\\\\/g, \"/\")}/AppData/Local/osu!/Data/bg/${wallpapers[Math.floor(Math.random() * wallpapers.length)]}`;\r\n        }\r\n    }\r\n    shuffleWallpapers();\r\n\r\n    var lastSong = null;\r\n    var lastBackgroundOption = null;\r\n\r\n    $: {\r\n        if(songData !== lastSong) {\r\n            lastSong = songData;\r\n            shuffleWallpapers();\r\n        }\r\n        if(config.backgrounds !== lastBackgroundOption) {\r\n            lastBackgroundOption = config.backgrounds;\r\n            shuffleWallpapers();\r\n        }\r\n    }\r\n    function fetchBeatmap() {\r\n        let file = fs.readFileSync(process.env.USERPROFILE + \"/AppData/Local/osu!/Songs/\" + songData.folder + \"/\" + songData.dataFile);\r\n        songData.beatmap = osuParser.parseContent(file);\r\n\r\n        if(config.backgrounds === 1) {\r\n            wallpaper = `${process.env.USERPROFILE.replace(/\\\\/g, \"/\")}/AppData/Local/osu!/Songs/${songData.folder}/${songData.beatmap.bgFilename}`;\r\n        }\r\n    }\r\n    $: if(songData && songData.dataFile && !songData.beatmap) fetchBeatmap();\r\n\r\n    var mouse = {\r\n        x: 0.5,\r\n        y: 0.5\r\n    };\r\n\r\n    var parallaxTreshold;\r\n    $: parallaxTreshold = config.parallax.treshold;\r\n\r\n    function updateMouse(e) {\r\n        if(!config.parallax.enabled) return;\r\n        mouse = {\r\n            x: -(e.clientX / window.innerWidth) * parallaxTreshold - parallaxTreshold/2,\r\n            y: -(e.clientY / window.innerHeight) * parallaxTreshold - parallaxTreshold/2\r\n        }\r\n    }\r\n\r\n    var isWidthSmaller = false;\r\n\r\n    function resize() {\r\n        isWidthSmaller = window.innerWidth * 9 < window.innerHeight * 16;\r\n    }\r\n    resize();\r\n\r\n    var animDuration = 0;\r\n    var kiaiTime = false;\r\n\r\n    setInterval(() => {\r\n        if(!songData) return;\r\n        if(!songData.beatmap && songData.dataFile) fetchBeatmap();\r\n        if(!songData.beatmap || !songData.audio) return;\r\n\r\n        var tp = null;\r\n        for(var t of songData.beatmap.timingPoints) {\r\n            if(t.offset > songData.audio.currentTime * 1000) break;\r\n            tp = t;\r\n        }\r\n        if(!tp) {\r\n            animDuration = 0;\r\n            kiaiTime = false;\r\n            return;\r\n        }\r\n        if(tp.beatLength/2 !== animDuration)\r\n            animDuration = tp.beatLength/2;\r\n        kiaiTime = tp.kiaiTimeActive;\r\n    }, 50);\r\n\r\n    $: {\r\n        if(!songData || !songData.beatmap || !songData.beatmap.video || !config.videoBackground) window.backgroundVideo = null;\r\n    }\r\n\r\n    $: console.log(\"Wallpaper\", wallpaper);\r\n\r\n    $: console.log(\"Beatmap\", songData.beatmap);\r\n\r\n    var backgroundVideo;\r\n\r\n    $: {\r\n        if(backgroundVideo) {\r\n            songData.video = backgroundVideo;\r\n            if(songData && songData.audio && songData.video) {\r\n                songData.video.currentTime = songData.audio.currentTime;\r\n            }\r\n        }\r\n    }\r\n</script>\r\n\r\n<svelte:window on:mousemove={updateMouse} on:resize={resize} />\r\n\r\n<div\r\n    class=\"main\"\r\n    style=\"\r\n        background-image: url('{wallpaper}');\r\n        background-size: {!isWidthSmaller ? `calc(100% + ${parallaxTreshold * 1.5}px) auto` : `auto calc(100% + ${parallaxTreshold * 1.5}px)`};\r\n        background-position: {mouse.x}px {mouse.y}px;\r\n    \"\r\n>\r\n    {#if songData && songData.beatmap && songData.beatmap.video && config.videoBackground}\r\n        <!-- svelte-ignore a11y-media-has-caption -->\r\n        <video bind:this={backgroundVideo} style=\"\r\n            width: {isWidthSmaller ? \"auto\" : `calc(100% + ${parallaxTreshold * 1.5}px)`};\r\n            height: {!isWidthSmaller ? \"auto\" : `calc(100% + ${parallaxTreshold * 1.5}px)`};\r\n            top: {mouse.y}px;\r\n            left: {mouse.x}px;\r\n        \">\r\n            <source src=\"file:///{process.env.USERPROFILE.replace(/\\\\/g, \"/\")}/AppData/Local/osu!/Songs/{songData.folder}/{songData.beatmap.video}\">\r\n        </video>\r\n    {/if}\r\n    <img src=\"images/logo.svg\" alt=\"logo\" class=\"logo\" style=\"animation-duration: {animDuration}ms;\" class:repeat={songData.playing}>\r\n    <img src=\"images/logo.svg\" alt=\"\" class=\"shadow\" style=\"animation-duration: {animDuration * 2}ms;\" class:repeat={songData.playing}>\r\n</div>\r\n\r\n<style>\r\n    .main {\r\n        width: 100%;\r\n        height: 100%;\r\n        background-size: cover;\r\n        background-repeat: no-repeat;\r\n    }\r\n\r\n    @keyframes bpm {\r\n        from {\r\n            width: 500px;\r\n            height: 500px;\r\n            top: calc(50vh - 250px);\r\n            left: calc(50vw - 250px);\r\n        }\r\n        to {\r\n            width: 525px;\r\n            height: 525px;\r\n            top: calc(50vh - 262.5px);\r\n            left: calc(50vw - 262.5px);\r\n        }\r\n    }\r\n\r\n    @keyframes bpmShadow {\r\n        0% {\r\n            width: 500px;\r\n            height: 500px;\r\n            top: calc(50vh - 250px);\r\n            left: calc(50vw - 250px);\r\n        }\r\n        70% {\r\n            width: 510px;\r\n            height: 510px;\r\n            top: calc(50vh - 255px);\r\n            left: calc(50vw - 255px);\r\n        }\r\n        100% {\r\n            width: 500px;\r\n            height: 500px;\r\n            top: calc(50vh - 250px);\r\n            left: calc(50vw - 250px);\r\n        }\r\n    }\r\n\r\n    video {\r\n        position: fixed;\r\n        z-index: 0;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100vw;\r\n        height: 100vh;\r\n    }\r\n\r\n    .main img {\r\n        position: fixed;\r\n        width: 500px;\r\n        height: 500px;\r\n        top: calc(50vh - 250px);\r\n        left: calc(50vw - 250px);\r\n        z-index: 1;\r\n    }\r\n\r\n    .main .logo {\r\n        animation-name: bpm;\r\n        animation-direction: alternate;\r\n    }\r\n\r\n    .main .shadow {\r\n        opacity: 0.2;\r\n        animation-name: bpmShadow;\r\n        animation-delay: 50ms;\r\n    }\r\n\r\n    .main .repeat {\r\n        animation-iteration-count: infinite;\r\n    }\r\n</style>",
    "<script>\r\n    export var config;\r\n    export var visible;\r\n\r\n    $: console.log(\"Config\", config);\r\n</script>\r\n\r\n<div class=\"options\">\r\n    <div class=\"bg\" class:visible={visible} on:click={() => visible = false}></div>\r\n    <nav class:visible={visible}>\r\n        <h2>Options</h2>\r\n\r\n        <div class=\"group\">\r\n            <h3>Parallax</h3>\r\n            <div class=\"row\">\r\n                <span>Enable parallax</span>\r\n                <input type=\"checkbox\" bind:checked={config.parallax.enabled}>\r\n            </div>\r\n            <div class=\"row\" class:enabled={config.parallax.enabled}>\r\n                <span>Parallax treshold</span>\r\n                <input type=\"range\" min=\"1\" max=\"30\" bind:value={config.parallax.treshold}>\r\n            </div>\r\n        </div>\r\n        <div class=\"group\">\r\n            <h3>Integrations</h3>\r\n            <div class=\"row\">\r\n                <span>Discord Rich Presence</span>\r\n                <input type=\"checkbox\" bind:checked={config.rpc}>\r\n            </div>\r\n            <div class=\"row\">\r\n                <span>MediaSession (system-wide controls)</span>\r\n                <input type=\"checkbox\" bind:checked={config.mediaSession}>\r\n            </div>\r\n        </div>\r\n        <div class=\"group\">\r\n            <h3>Backgrounds</h3>\r\n            <select bind:value={config.backgrounds}>\r\n                <option value={0}>Osu!wallpapers</option>\r\n                <option value={1}>Beatmap wallpapers</option>\r\n            </select>\r\n            <div class=\"row\">\r\n                <span>Video backgrounds</span>\r\n                <input type=\"checkbox\" bind:checked={config.videoBackground}>\r\n            </div>\r\n        </div>\r\n        <div class=\"group\">\r\n            <h3>UI</h3>\r\n            <div class=\"row\">\r\n                <span>Song info hide timeout</span>\r\n                <input type=\"range\" min=\"1000\" max=\"15000\" step=\"500\" bind:value={config.autohide.info}>\r\n            </div>\r\n            <div class=\"row\">\r\n                <span>Volume hide timeout</span>\r\n                <input type=\"range\" min=\"1000\" max=\"15000\" step=\"500\" bind:value={config.autohide.volume}>\r\n            </div>\r\n        </div>\r\n    </nav>\r\n</div>\r\n    \r\n<style>\r\n    .bg {\r\n        position: fixed;\r\n        display: none;\r\n        width: 100vw;\r\n        height: 100vh;\r\n        top: 0;\r\n        left: 0;\r\n        z-index: 3;\r\n    }\r\n    .bg.visible {\r\n        display: block;\r\n    }\r\n    nav {\r\n        position: fixed;\r\n        height: 100vh;\r\n        width: 400px;\r\n        top: 0;\r\n        left: -400px;\r\n        opacity: 0;\r\n        background: rgba(0,0,0,0.4);\r\n        color: white;\r\n        z-index: 4;\r\n        transition: opacity 0.3s, left 0.3s;\r\n    }\r\n    nav.visible {\r\n        left: 0;\r\n        opacity: 1;\r\n    }\r\n</style>"
  ],
  "names": [],
  "mappings": "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"
}