From abcd8eb7b54d73f61aee44d18f8f153589270911 Mon Sep 17 00:00:00 2001
From: Shiny Nematoda <shiny_nematoda@codeberg.org>
Date: Mon, 23 May 2022 22:23:41 +0530
Subject: [PATCH] Preferences Improvements, Error Handling...

---
 index.html                   |   1 +
 public/bg_music.svg          |   1 -
 public/bg_playlist.svg       |  37 ------------
 src/App.vue                  |  49 ++++++++++++----
 src/assets/base.css          |  81 +++++++++++++++-----------
 src/components/Lyrics.vue    |  31 ++++++++--
 src/components/NavBar.vue    |   5 ++
 src/components/Playlists.vue |   5 +-
 src/components/Prefs.vue     | 107 ++++++++++++++++++++++++++++++-----
 src/components/SearchBar.vue |   7 ++-
 src/components/StatusBar.vue |  71 ++++++++++++++++-------
 src/scripts/db.js            |   1 +
 src/scripts/util.js          |  22 +++++--
 13 files changed, 285 insertions(+), 133 deletions(-)
 delete mode 100644 public/bg_music.svg
 delete mode 100644 public/bg_playlist.svg

diff --git a/index.html b/index.html
index 982f95b..fa62400 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
     <link rel="preconnect" href="https://hyperpipeapi.onrender.com" />
     <link rel="dns-prefetch" href="https://hyperpipe-proxy.onrender.com" />
+    <link rel="dns-prefetch" href="https://piped-instances.kavin.rocks" />
 
     <link rel="manifest" href="/manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/public/bg_music.svg b/public/bg_music.svg
deleted file mode 100644
index 7170801..0000000
--- a/public/bg_music.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="634.30979" height="664.89511" viewBox="0 0 634.30979 664.89511" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="428.96615" cy="433.53675" r="13.08937" fill="#6c63ff"/><path d="M822.13393,580.0736H702.61983a3.89775,3.89775,0,1,1,0-7.7955h119.5141a3.89775,3.89775,0,1,1,0,7.7955Z" transform="translate(-282.84511 -117.55244)" fill="#e6e6e6"/><path d="M732.3035,595.47555H702.61983a3.89794,3.89794,0,1,1,0-7.79588H732.3035a3.89794,3.89794,0,1,1,0,7.79588Z" transform="translate(-282.84511 -117.55244)" fill="#e6e6e6"/><path d="M729.22291,459.6466H461.21277a8.07557,8.07557,0,0,1-8.06636-8.06636V246.71265a8.07531,8.07531,0,0,1,8.06636-8.066H729.22291a8.07531,8.07531,0,0,1,8.06635,8.066V451.58024A8.07557,8.07557,0,0,1,729.22291,459.6466Z" transform="translate(-282.84511 -117.55244)" fill="#fff"/><path d="M729.22272,460.6466H461.213a9.077,9.077,0,0,1-9.0664-9.06641V246.71251a9.07652,9.07652,0,0,1,9.0664-9.06591H729.22272a9.07653,9.07653,0,0,1,9.06641,9.06591V451.58019A9.077,9.077,0,0,1,729.22272,460.6466Zm-268.00977-221a7.07423,7.07423,0,0,0-7.0664,7.06591V451.58019a7.07434,7.07434,0,0,0,7.0664,7.06641H729.22272a7.07435,7.07435,0,0,0,7.06641-7.06641V246.71251a7.07424,7.07424,0,0,0-7.06641-7.06591Z" transform="translate(-282.84511 -117.55244)" fill="#f0f0f0"/><path d="M453.76546,420.6466v30.93379a7.45828,7.45828,0,0,0,7.44716,7.44716H729.22306a7.45828,7.45828,0,0,0,7.44716-7.44716V420.6466Z" transform="translate(-282.84511 -117.55244)" fill="#f0f0f0"/><rect x="595.21119" y="163.94027" width="1.99962" height="333.55961" transform="translate(-286.6331 536.9647) rotate(-57.37135)" fill="#f0f0f0"/><path d="M916.16168,154.10493H283.83832a1.01559,1.01559,0,0,1,0-2.03069H916.16168a1.01559,1.01559,0,0,1,0,2.03069Z" transform="translate(-282.84511 -117.55244)" fill="#cacaca"/><ellipse cx="23.34831" cy="11.16881" rx="10.92534" ry="11.16881" fill="#3f3d56"/><ellipse cx="61.09038" cy="11.16881" rx="10.92534" ry="11.16881" fill="#3f3d56"/><ellipse cx="98.83246" cy="11.16881" rx="10.92534" ry="11.16881" fill="#3f3d56"/><path d="M893.54466,120.32075h-26.81a2.0304,2.0304,0,0,0,0,4.06h26.81a2.0304,2.0304,0,0,0,0-4.06Z" transform="translate(-282.84511 -117.55244)" fill="#3f3d56"/><path d="M893.54466,127.94074h-26.81a2.0304,2.0304,0,0,0,0,4.06h26.81a2.0304,2.0304,0,0,0,0-4.06Z" transform="translate(-282.84511 -117.55244)" fill="#3f3d56"/><path d="M893.54466,135.55073h-26.81a2.0304,2.0304,0,0,0,0,4.06h26.81a2.0304,2.0304,0,0,0,0-4.06Z" transform="translate(-282.84511 -117.55244)" fill="#3f3d56"/><polygon points="347.518 650.023 360.408 650.022 366.54 600.305 347.516 600.306 347.518 650.023" fill="#ffb6b6"/><path d="M627.07552,763.367l3.628-.00015,14.16443-5.76035,7.59171,5.75947h.001a16.17765,16.17765,0,0,1,16.17679,16.17653v.52568l-41.56122.00154Z" transform="translate(-282.84511 -117.55244)" fill="#2f2e41"/><polygon points="231.053 633.265 242.589 639.014 270.256 597.254 253.229 588.768 231.053 633.265" fill="#ffb6b6"/><path d="M512.83262,745.58411l3.24711,1.61832,15.24662,1.16328,4.22518,8.54127.00092.00046a16.17765,16.17765,0,0,1,7.26169,21.69415l-.23451.47048-37.19735-18.53893Z" transform="translate(-282.84511 -117.55244)" fill="#2f2e41"/><path d="M636.07424,541.77869l-81.95531,2.138,1.42531,39.90868s-1.42531,10.68982,1.42531,13.54044,4.27593,2.85062,2.85062,7.8392S554.71,657.85786,554.71,657.85786s-33.63678,59.47561-32.21147,60.90092,2.85062,0,1.42531,3.56328-2.85062,2.138-1.42531,3.56327a52.48759,52.48759,0,0,1,3.56328,4.27593h23.23s1.29906-7.12655,1.29906-7.8392,1.4253-4.98859,1.4253-5.70124,40.58611-43.71363,40.58611-43.71363l8.55186-71.26549,20.667,69.84018s0,61.28832,1.42531,62.71363,1.42531.71265.71266,3.56327-3.56328,2.138-1.42531,4.27593,2.85062-1.42531,2.138,2.138l-.71265,3.56327,27.37964.30583s2.85062-6.00707,1.42531-8.145-1.33979-1.55437.39909-5.05312,2.45153-4.21139,1.73888-4.924-.71266-4.50319-.71266-4.50319-10.27593-140.16575-10.27593-142.30372a7.10838,7.10838,0,0,1,.592-3.20606v-2.902l-2.73-10.283Z" transform="translate(-282.84511 -117.55244)" fill="#2f2e41"/><circle cx="321.68558" cy="217.92747" r="53.64177" fill="#6c63ff"/><path d="M592.214,360.57507a4.50007,4.50007,0,0,1-2.1709-.56543,4.44151,4.44151,0,0,1-2.333-3.94385V318.892a4.49981,4.49981,0,0,1,6.9126-3.79834l35.26318,18.58691a4.50008,4.50008,0,0,1,0,7.59668l-35.26318,18.58691A4.47852,4.47852,0,0,1,592.214,360.57507Z" transform="translate(-282.84511 -117.55244)" fill="#fff"/><path d="M610.65639,406.86111s-27.39828-2.73982-29.22484,0a15.693,15.693,0,0,0-1.82656,7.30618s-10.9593,4.56637-12.78586,2.73981-3.65312-7.30618-9.1328-5.47967S541.71,444.85786,541.71,444.85786s1,0,6.8435,29.58562c3.942,19.95818,3.28993,36.34929,3.72237,47.51069.07125,1.839-2.61732,8.33964-2.56587,9.90369.22921,6.968,3.05683,6.36909,3.40987,7.42823.91325,2.73981-4.56637,19.17879,28.31153,19.17879s56.62318-1.8265,56.62318-8.21943c0-3.22372,3.33428-5.11157,2.65542-15.38759-.18634-2.82066-5.0465-12.44739-5.08158-15.45081a110.5326,110.5326,0,0,1,.43335-11.61657,67.92559,67.92559,0,0,1,1.99281-11.4284c5.47962-20.0922,7.65542-56.50422,7.65542-56.50422l-9-18-19.66083-3.1242S616.13607,407.77436,610.65639,406.86111Z" transform="translate(-282.84511 -117.55244)" fill="#3f3d56"/><circle id="f9362fdd-3f27-4fec-a8e4-b8d11fe473ca" data-name="ab6171fa-7d69-4734-b81c-8dff60f9761b" cx="596.51758" cy="377.60805" r="23.72181" transform="translate(-360.94814 51.94964) rotate(-15.19079)" fill="#ffb6b6"/><path d="M709.95291,740.79142l.70716-15.90017a51.3527,51.3527,0,0,1,23.9526-6.06333c-11.504,9.40539-10.06637,27.53575-17.86583,40.18378a30.8888,30.8888,0,0,1-22.65105,14.27412l-9.627,5.89429a51.75975,51.75975,0,0,1,10.90965-41.9429,49.99669,49.99669,0,0,1,9.1885-8.53763C706.87265,734.77919,709.95291,740.79142,709.95291,740.79142Z" transform="translate(-282.84511 -117.55244)" fill="#f2f2f2"/><path d="M837.59547,780.89434a1.54861,1.54861,0,0,1-1.5533,1.55322H417.992a1.55322,1.55322,0,0,1,0-3.10644H836.04217A1.54866,1.54866,0,0,1,837.59547,780.89434Z" transform="translate(-282.84511 -117.55244)" fill="#ccc"/><path d="M705.39809,546.09314a7.483,7.483,0,0,1-7.52827-8.65934l-41.5299-22.73929,12.15482-6.57378,38.48558,23.11419a7.52355,7.52355,0,0,1-1.58223,14.85822Z" transform="translate(-282.84511 -117.55244)" fill="#ffb8b8"/><path d="M690.2491,534.28435l-31.72691-11.6159-14.27309-13.3841-3.54647-1.80632L628.47992,498.899l-.03644-.10815-19.42136-57.4096a18.80383,18.80383,0,0,1,13.91456-21.73705h0a18.78362,18.78362,0,0,1,23.1684,15.86033l6.25027,49.20255L670.716,501.40661l4.53314.87774,1.04347,4.88131,20.95653,15.11869Z" transform="translate(-282.84511 -117.55244)" fill="#3f3d56"/><path d="M565.84355,305.80535a7.483,7.483,0,0,1-8.62167,7.57137l-22.53182,41.64283-6.63434-12.12187,22.9219-38.60042a7.52355,7.52355,0,0,1,14.86593,1.50809Z" transform="translate(-282.84511 -117.55244)" fill="#ffb8b8"/><path d="M569.02419,421.88517,554.8961,401.32754s2.22128.13068.81394-4.46968c-.38308-1.25224-4.07807-5.57294-4.49726-7.07092-.36946-1.32028-.74728-2.7281-1.12348-4.20952-1.34891-5.31193-8.63657-10.22344-7.37926-16.71956,6-31,9-37,9.92068-41.96571,0,0-5.21634-19.33855-13.68264-7.39373s-21.88513,42.30511-18.33332,57.39144,17.129,64.30159,21.308,67.96187S569.02419,421.88517,569.02419,421.88517Z" transform="translate(-282.84511 -117.55244)" fill="#3f3d56"/><path d="M613.727,349.54835c-1.75666-.05218-1.15363-3.36334-2.56891-4.41962q-.01035.04807-.02142.09595a3.44963,3.44963,0,0,1-6.59229.28125,5.24288,5.24288,0,0,0-3.3288-3.49219c-.08813,3.069-2.4096,5.73267-5.17907,7.05823s-5.92725,1.54614-8.99726,1.59155a39.70992,39.70992,0,0,0-9.16125.69385c-2.977.75122-5.87268,2.51752-7.14459,5.312-1.272,2.7945-.36444,6.64191,2.41681,7.94251-2.15461.01147-3.98285,1.78943-4.72785,3.81116a15.13305,15.13305,0,0,0-.46716,6.39465c.60553,7.92572,2.08185,16.45868,7.85309,21.92462,4.39849,4.16583,10.69427,5.844,16.75232,5.81976,6.058-.02429,4.99285-.58111,10.85034-2.12732,0,0,5.56885-15.96453,4.16656-17.535-1.40228-1.57043-2.567-3.58008-2.31323-5.67017s2.49994-3.9624,4.44922-3.16674c-.32776-.8379-.57471-.9975-.72937-.955a7.40881,7.40881,0,0,0,.25757-.72833,8.28842,8.28842,0,0,1,5.17633-5.48908,6.42778,6.42778,0,0,1,7.02551,2.12616C627.85744,363.00129,623.87825,349.8498,613.727,349.54835Z" transform="translate(-282.84511 -117.55244)" fill="#2f2e41"/></svg>
\ No newline at end of file
diff --git a/public/bg_playlist.svg b/public/bg_playlist.svg
deleted file mode 100644
index 0c1eff5..0000000
--- a/public/bg_playlist.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="757.964" height="743.732" viewBox="0 0 757.964 743.732" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g id="Group_4" data-name="Group 4" transform="translate(-221 -78)">
-    <path id="Path_31-33" data-name="Path 31" d="M312.471,78.134a32.036,32.036,0,0,0-32,32V788.562a32.036,32.036,0,0,0,32,32h297a32.037,32.037,0,0,0,32-32V110.134a32.036,32.036,0,0,0-32-32Z" transform="translate(-0.018 -0.134)" fill="#e6e6e6"/>
-    <path id="Path_32-34" data-name="Path 32" d="M621.676,235.116v-54.44a125.247,125.247,0,0,1-80.859-60.189h0a23.789,23.789,0,0,1-14.22,4.68H483.368A178.549,178.549,0,0,0,621.676,235.116Z" transform="translate(-0.018 -0.134)" fill="#fff"/>
-    <path id="Path_33-35" data-name="Path 33" d="M621.676,177.556v-52.3a29.121,29.121,0,0,0-29.13-29.13h-41.97v5.05a23.917,23.917,0,0,1-7.4,17.329,122.3,122.3,0,0,0,78.5,59.049Z" transform="translate(-0.018 -0.134)" fill="#fff"/>
-    <path id="Path_34-36" data-name="Path 34" d="M419.787,125.168H392.756a23.987,23.987,0,0,1-23.98-23.99v-5.05H329.4a29.128,29.128,0,0,0-29.13,29.132v648.2a29.079,29.079,0,0,0,29.13,29.11h263.15a28.362,28.362,0,0,0,3.59-.22,29.146,29.146,0,0,0,25.54-28.89V296.286C525.967,285.2,446.218,216.907,419.787,125.168Z" transform="translate(-0.018 -0.134)" fill="#fff"/>
-    <path id="Path_35-37" data-name="Path 35" d="M480.088,125.168h-57.14c26.3,90.039,104.68,157.028,198.729,168.068v-55.02A181.668,181.668,0,0,1,480.087,125.168Z" transform="translate(-0.018 -0.134)" fill="#fff"/>
-    <path id="Path_36-38" data-name="Path 36" d="M601.63,610.915h-270a5.006,5.006,0,0,1-5-5V538.94a5.006,5.006,0,0,1,5-5h270a5.006,5.006,0,0,1,5,5v66.976A5.006,5.006,0,0,1,601.63,610.915Zm-270-74.976a3,3,0,0,0-3,3v66.976a3,3,0,0,0,3,3h270a3,3,0,0,0,3-3V538.94a3,3,0,0,0-3-3Z" transform="translate(-0.018 -0.134)" fill="#e6e6e6"/>
-    <circle id="Ellipse_4" data-name="Ellipse 4" cx="21" cy="21" r="21" transform="translate(345.611 551.293)" fill="#3f3d56"/>
-    <path id="Path_37-39" data-name="Path 37" d="M415.129,558.427a3.5,3.5,0,0,0,0,7h165a3.5,3.5,0,1,0,0-7Z" transform="translate(-0.018 -0.134)" fill="#e6e6e6"/>
-    <path id="Path_38-40" data-name="Path 38" d="M415.129,579.427a3.5,3.5,0,0,0,0,7h165a3.5,3.5,0,1,0,0-7Z" transform="translate(-0.018 -0.134)" fill="#e6e6e6"/>
-    <path id="Path_39-41" data-name="Path 39" d="M601.63,722.915h-270a5.006,5.006,0,0,1-5-5V650.94a5.006,5.006,0,0,1,5-5h270a5.006,5.006,0,0,1,5,5v66.976A5.006,5.006,0,0,1,601.63,722.915Zm-270-74.976a3,3,0,0,0-3,3v66.976a3,3,0,0,0,3,3h270a3,3,0,0,0,3-3V650.94a3,3,0,0,0-3-3Z" transform="translate(-0.018 -0.134)" fill="#e6e6e6"/>
-    <circle id="Ellipse_5" data-name="Ellipse 5" cx="21" cy="21" r="21" transform="translate(345.611 663.293)" fill="#3f3d56"/>
-    <path id="Path_40-42" data-name="Path 40" d="M415.129,670.427a3.5,3.5,0,0,0,0,7h165a3.5,3.5,0,1,0,0-7Z" transform="translate(-0.018 -0.134)" fill="#e6e6e6"/>
-    <path id="Path_41-43" data-name="Path 41" d="M415.129,691.427a3.5,3.5,0,0,0,0,7h165a3.5,3.5,0,1,0,0-7Z" transform="translate(-0.018 -0.134)" fill="#e6e6e6"/>
-    <path id="Path_42-44" data-name="Path 42" d="M460.947,471.93a94.96,94.96,0,0,1-95-95c0-.2,0-.408.012-.607.291-52.025,42.9-94.393,94.988-94.393a95,95,0,1,1,0,190Zm0-188a93.2,93.2,0,0,0-92.99,92.456c-.011.212-.01.383-.01.544a93.012,93.012,0,1,0,93-93Z" transform="translate(-0.018 0.07)" fill="#3f3d56"/>
-    <path id="Path_43-45" data-name="Path 43" d="M503.97,381.529l-65.022-37.541a2,2,0,0,0-3,1.732V420.8a2,2,0,0,0,3,1.732l65.022-37.541a2,2,0,0,0,0-3.464l-65.022-37.541a2,2,0,0,0-3,1.732V420.8a2,2,0,0,0,3,1.732l65.022-37.541a2,2,0,0,0,0-3.464Z" transform="translate(-0.018 -6.721)" fill="#6c63ff"/>
-    <path id="Path_54-46" data-name="Path 54" d="M757.569,743.732H0v-2.181H757.964Z" transform="translate(221 78)" fill="#3f3d56"/>
-    <g id="Group_1" data-name="Group 1" transform="translate(-869.284 495.958)">
-      <circle id="Ellipse_3" data-name="Ellipse 3" cx="27.936" cy="27.936" r="27.936" transform="translate(1653.026 -107.758)" fill="#ffb8b8"/>
-      <path id="Path_21-47" data-name="Path 21" d="M812.723,631a12.514,12.514,0,0,1,9.466-16.1,11.893,11.893,0,0,1,1.66-.2l29.427-47.229L826.4,541.915A10.728,10.728,0,1,1,841.32,526.5l37.113,36.6.075.091a9.719,9.719,0,0,1-.676,11.584L836.6,623.534a11.733,11.733,0,0,1,.307,1.19,12.514,12.514,0,0,1-11.232,14.918q-.533.047-1.06.047A12.553,12.553,0,0,1,812.723,631Z" transform="translate(866.433 -554.209)" fill="#ffb8b8"/>
-      <path id="Path_22-48" data-name="Path 22" d="M589.772,539.948H575.827l-6.633-53.786,20.58,0Z" transform="translate(1045.18 -230.972)" fill="#ffb8b8"/>
-      <path id="Path_23-49" data-name="Path 23" d="M812.885,719.943l-46.1,0V718.8a18.069,18.069,0,0,1,18.07-18.069h28.031Z" transform="translate(826.191 -396.88)" fill="#2f2e41"/>
-      <path id="Path_24-50" data-name="Path 24" d="M674.777,526.174l-11.982,7.135-33.217-42.82,17.685-10.529Z" transform="translate(1098.774 -236.477)" fill="#ffb8b8"/>
-      <path id="Path_25-51" data-name="Path 25" d="M848.632,729.873l-.582-.977a18.07,18.07,0,0,1,6.281-24.77l24.085-14.341,9.826,16.5Z" transform="translate(896.059 -406.599)" fill="#2f2e41"/>
-      <path id="Path_26-52" data-name="Path 26" d="M780.531,810.423c-9.341-109.994-14.9-212.178,19.25-253.862l.264-.323,57.468,22.988.095.205c.194.422,19.306,42.463,14.848,70.741l14.175,65.206,46.219,77.391a5.12,5.12,0,0,1-2.333,7.311l-20.086,8.837a5.142,5.142,0,0,1-6.424-2.008L853.73,724.923l-28.4-62.883a1.706,1.706,0,0,0-3.252.522L806.338,810.535a5.109,5.109,0,0,1-5.089,4.577H785.633A5.153,5.153,0,0,1,780.531,810.423Z" transform="translate(832.083 -525.133)" fill="#2f2e41"/>
-      <path id="Path_27-53" data-name="Path 27" d="M787.986,592.013l-.274-.131-.043-.3c-2.147-15.025.394-31.72,7.552-49.62a39.4,39.4,0,0,1,45.726-23.594h0a39.348,39.348,0,0,1,25.092,19.295,38.923,38.923,0,0,1,2.7,31.193c-9.024,26.388-20.73,51.078-20.848,51.324l-.245.515Z" transform="translate(844.072 -559.713)" fill="#6c63ff"/>
-      <path id="Path_28-54" data-name="Path 28" d="M765.634,647.248a12.776,12.776,0,0,1,9.16-13.935l53.739-103.171a10.3,10.3,0,1,1,17.522,10.817L791.046,643.411a12.419,12.419,0,0,1,.2,1.888,12.861,12.861,0,0,1-13.033,13.208h0a12.873,12.873,0,0,1-9.87-4.834,12.713,12.713,0,0,1-2.714-6.425Z" transform="translate(825.073 -552.635)" fill="#ffb8b8"/>
-      <path id="Path_29-55" data-name="Path 29" d="M795.454,500.188h44.359V480.852c-9.736-3.868-19.264-7.158-25.023,0a19.336,19.336,0,0,0-19.336,19.336Z" transform="translate(851.636 -595.791)" fill="#2f2e41"/>
-      <path id="Path_30-56" data-name="Path 30" d="M836.215,477.059c26.519,0,33.941,33.24,33.941,51.993,0,10.458-4.729,14.2-12.162,15.464l-2.625-14-6.147,14.6c-2.088.01-4.281-.03-6.555-.072l-2.084-4.292-4.648,4.215c-18.616.028-33.661,2.741-33.661-15.917C802.274,510.3,808.784,477.059,836.215,477.059Z" transform="translate(857.69 -595.41)" fill="#2f2e41"/>
-    </g>
-    <g id="Group_2" data-name="Group 2" transform="translate(684 38)">
-      <path id="Path_53-57" data-name="Path 53" d="M820.737,295.13V269.263a2.333,2.333,0,0,0-2.333-2.333h-4.666a2.333,2.333,0,0,0-2.333,2.333V293.57a14.745,14.745,0,1,0,9.331,1.56Z" transform="translate(-688.018 71.866)" fill="#6c63ff"/>
-      <circle id="Ellipse_8" data-name="Ellipse 8" cx="6.998" cy="6.998" r="6.998" transform="translate(119.5 373.01)" fill="#fff"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 9e63a04..570151e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,9 @@
 <script setup>
+/* Imports */
 import Hls from 'hls.js';
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onBeforeMount, onMounted } from 'vue';
 
+/* Components */
 import NavBar from './components/NavBar.vue';
 import StatusBar from './components/StatusBar.vue';
 import NowPlaying from './components/NowPlaying.vue';
@@ -12,14 +14,16 @@ import Lyrics from './components/Lyrics.vue';
 import Artist from './components/Artist.vue';
 import Prefs from './components/Prefs.vue';
 
+/* Composables */
 import { getJson, getJsonPiped } from './scripts/fetch.js';
-import { useLazyLoad } from './scripts/util.js';
+import { useLazyLoad, useStore } from './scripts/util.js';
 import { useSetupDB, useUpdatePlaylist } from './scripts/db.js';
 
+/* Reactivity */
 const data = reactive({
   artUrl: '',
   cover: '',
-  audioSrc: '',
+  audioSrc: [],
   url: '',
   urls: [],
   songItems: null,
@@ -50,6 +54,7 @@ const search = ref(''),
 
 const audio = ref(null);
 
+/* Functions */
 function parseUrl() {
   const loc = location.href.split('/');
 
@@ -166,7 +171,7 @@ async function getSong(e) {
 
   Stream({
     hls: json.hls,
-    stream: json.audioStreams[0].url,
+    stream: json.audioStreams,
   });
 }
 
@@ -258,7 +263,7 @@ function playPause() {
 function Stream(res) {
   console.log(res);
 
-  if (!!Hls && Hls.isSupported()) {
+  if (Hls.isSupported() && useStore().hls !== 'false') {
     data.hls = new Hls();
 
     data.hls.attachMedia(audio.value);
@@ -268,12 +273,16 @@ function Stream(res) {
     });
   } else {
     data.audioSrc = res.stream;
+    audio.value.load();
   }
 }
 
 function audioCanPlay() {
   useLazyLoad();
-  audio.value.play();
+
+  audio.value.play().catch(err => {
+    alert(err);
+  });
   data.state = 'pause';
 
   if (location.pathname != '/playlist') {
@@ -332,21 +341,31 @@ function setMetadata() {
   }
 }
 
+onBeforeMount(() => {
+  if (useStore().theme) {
+    document.body.setAttribute('data-theme', useStore().theme);
+  }
+});
+
 onMounted(() => {
   useLazyLoad();
 
+  /* Event Listeners for Lazy Loading */
   document.addEventListener('scroll', useLazyLoad);
   document.addEventListener('resize', useLazyLoad);
   document.addEventListener('orientationChange', useLazyLoad);
 
+  /* Event Listener for change in url */
   window.addEventListener('popstate', parseUrl);
 
+  /* Alert User on close if url is present */
   window.onbeforeunload = () => {
     if (data.url) {
       return 'Are you Sure?';
     }
   };
 
+  /* Media Session Controls */
   if ('mediaSession' in navigator) {
     navigator.mediaSession.setActionHandler('play', playPause);
     navigator.mediaSession.setActionHandler('pause', playPause);
@@ -364,6 +383,7 @@ onMounted(() => {
     });
   }
 
+  /* Setup IndexedDB for storing custom playlists */
   useSetupDB();
 
   parseUrl();
@@ -446,9 +466,7 @@ onMounted(() => {
   <StatusBar
     @play="playPause"
     @vol="setVolume"
-    @list="Toggle"
-    @lyrics="Toggle"
-    @loop="Toggle"
+    @toggle="Toggle"
     @save="SaveTrack"
     @change-time="setTime"
     :state="data.state"
@@ -460,11 +478,17 @@ onMounted(() => {
   <audio
     id="audio"
     ref="audio"
-    :src="data.audioSrc"
+    :volume="useStore().vol ? useStore().vol / 100 : 1"
     @canplay="audioCanPlay"
     @timeupdate="timeUpdate($event.target.currentTime)"
     @ended="playNext"
-    autoplay></audio>
+    autoplay>
+    <source
+      v-for="src in data.audioSrc"
+      :key="src.url"
+      :src="src.url"
+      :type="src.mimeType" />
+  </audio>
 </template>
 
 <style>
@@ -482,6 +506,9 @@ main {
   display: flex;
   flex-direction: column;
 }
+main:empty::before {
+  font-size: 3.5rem !important;
+}
 header {
   line-height: 1.5;
   padding-bottom: 2.5rem;
diff --git a/src/assets/base.css b/src/assets/base.css
index 341d09c..a616729 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -21,7 +21,24 @@
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
 }
 
-:root {
+:root,
+body[data-theme='dark'] {
+  --color-foreground: var(--vt-c-blue);
+  --color-background: var(--vt-c-black);
+  --color-background-soft: var(--vt-c-black-soft);
+  --color-background-mute: var(--vt-c-black-mute);
+
+  --color-border: var(--vt-c-divider-dark-2);
+  --color-border-hover: var(--vt-c-divider-dark-1);
+
+  --color-shadow: #000;
+  --color-scrollbar: var(--vt-c-blue);
+
+  --color-heading: var(--vt-c-text-dark-1);
+  --color-text: var(--vt-c-text-dark-2);
+}
+
+body[data-theme='light'] {
   --color-foreground: cornflowerblue;
   --color-background: var(--vt-c-white);
   --color-background-soft: var(--vt-c-white-soft);
@@ -35,26 +52,6 @@
 
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-foreground: var(--vt-c-blue);
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-shadow: #000;
-    --color-scrollbar: var(--vt-c-blue);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
 }
 
 *,
@@ -80,25 +77,41 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.placeholder:empty:before {
-  --url: url('/bg_music.svg');
-  content: '';
-  background-image: var(--url);
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-  padding: 10rem;
+
+/* Placeholders */
+
+.placeholder:empty {
+  margin: auto 0;
+  text-align: center;
+}
+.placeholder:empty::before {
+  --ico: '\f2d1';
+  content: var(--ico);
+  display: block;
+  font-display: block;
+  font-family: bootstrap-icons !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: -0.125em;
+  font-size: 3rem;
+  margin: 1rem;
+  margin-top: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 .placeholder:empty:after {
   --text: 'Start Searching...';
+  margin-bottom: auto;
   content: var(--text);
-  position: block;
-  margin-top: 1rem;
-  font-size: 1.5rem;
-  opacity: 0.6;
-  text-align: center;
+  letter-spacing: 0.125rem;
+  font-size: 1.25rem;
+  font-weight: bolder;
 }
 
+/* Scrollbars */
 ::-webkit-scrollbar {
   width: 0.35rem;
   height: 0.35rem;
diff --git a/src/components/Lyrics.vue b/src/components/Lyrics.vue
index 81453ad..97ce50d 100644
--- a/src/components/Lyrics.vue
+++ b/src/components/Lyrics.vue
@@ -9,11 +9,14 @@ const props = defineProps({
     iniurl: String,
   }),
   text = ref(''),
-  source = ref('');
+  source = ref(''),
+  status = ref(false);
 
 console.log(props);
 
 function get() {
+  status.value = false;
+
   if (props.id && props.curl === props.iniurl) {
     console.log(props.id);
 
@@ -21,6 +24,7 @@ function get() {
       res => {
         text.value = res.text;
         source.value = res.source;
+        status.value = true;
       },
     );
   } else if (props.curl) {
@@ -28,12 +32,15 @@ function get() {
       'https://hyperpipeapi.onrender.com/next/' +
         props.curl.replace('/watch?v=', ''),
     ).then(next => {
-      getJson('https://hyperpipeapi.onrender.com/browse/' + next.lyricsId).then(
-        res => {
+      if (next.lyricsId) {
+        getJson(
+          'https://hyperpipeapi.onrender.com/browse/' + next.lyricsId,
+        ).then(res => {
           text.value = res.text;
           source.value = res.source;
-        },
-      );
+          status.value = true;
+        });
+      }
     });
   }
 }
@@ -50,7 +57,9 @@ watch(
 
 <template>
   <div class="ly-modal">
-    <pre>{{ text }}</pre>
+    <pre class="placeholder" :data-loaded="curl ? status : true">{{
+      text
+    }}</pre>
     <div>{{ source }}</div>
   </div>
 </template>
@@ -78,6 +87,16 @@ pre {
   letter-spacing: 0.125rem;
   white-space: pre-wrap;
 }
+pre:empty::before {
+  --ico: '\f3a5';
+}
+pre[data-loaded='false']:empty::after {
+  --text: 'Fetching Lyrics...';
+}
+pre[data-loaded='true']:empty::after {
+  --text: 'No Lyrics...';
+}
+
 div {
   padding: 1rem;
   letter-spacing: 0.1rem;
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 2094e8e..3f3d4c2 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -2,6 +2,10 @@
 import { reactive } from 'vue';
 import SearchBar from '../components/SearchBar.vue';
 
+defineProps({
+  search: String,
+});
+
 const emit = defineEmits(['update-page', 'update-search']),
   page = reactive({
     home: true,
@@ -41,6 +45,7 @@ const Toggle = p => {
 
     <div class="wrap">
       <SearchBar
+        :search="search"
         @update-search="
           e => {
             $emit('update-search', e);
diff --git a/src/components/Playlists.vue b/src/components/Playlists.vue
index 8bd642e..4a491e8 100644
--- a/src/components/Playlists.vue
+++ b/src/components/Playlists.vue
@@ -42,11 +42,10 @@ defineEmits(['playthis']);
   overflow-y: auto;
 }
 .placeholder:empty:before {
-  --url: url('/bg_playlist.svg');
+  --ico: '\f64d';
 }
 .placeholder:empty:after {
-  --text: 'Add Songs to Your Playlist...';
-  padding-top: 2rem;
+  --text: 'Add Songs to Playlist...';
 }
 .pl-item {
   padding: 1rem;
diff --git a/src/components/Prefs.vue b/src/components/Prefs.vue
index b472d44..cd31c55 100644
--- a/src/components/Prefs.vue
+++ b/src/components/Prefs.vue
@@ -2,8 +2,10 @@
 import { ref } from 'vue';
 
 import { getJson } from '../scripts/fetch.js';
+import { useStore } from '../scripts/util.js';
 
-const instances = ref([]);
+const instances = ref([]),
+  hls = ref(false);
 
 getJson('https://piped-instances.kavin.rocks').then(i => {
   instances.value = i;
@@ -11,29 +13,73 @@ getJson('https://piped-instances.kavin.rocks').then(i => {
   console.log(i);
 });
 
-function bi(val) {
+function getBool(val) {
   return 'bi ' + (val ? 'bi-check2' : 'bi-x-lg');
 }
 
-function get(key) {
-  return localStorage.getItem(key);
+function getStore(key) {
+  return useStore().getItem(key);
 }
 
-function set(key, value) {
+function setStore(key, value) {
   console.log(key, value);
-  localStorage.setItem(key, value);
+  useStore().setItem(key, value);
 }
+
+function getTheme() {
+  return document.body.getAttribute('data-theme') || 'dark';
+}
+
+function setTheme(theme) {
+  document.body.setAttribute('data-theme', theme);
+  setStore('theme', theme);
+}
+
+hls.value = getStore('hls') || true;
 </script>
 
 <template>
+  <h2>Theme</h2>
+  <select
+    id="pref-theme"
+    :value="getTheme()"
+    @change="setTheme($event.target.value)">
+    <option value="dark">Dark (Default)</option>
+    <option value="light">Light</option>
+  </select>
+
+  <h2>Audio Player</h2>
+
+  <div class="left">
+    <input
+      type="checkbox"
+      name="pref-chk-hls"
+      id="pref-chk-hls"
+      @change="setStore('hls', $event.target.checked)"
+      v-model="hls" />
+    <label for="pref-chk-hls">Live Streaming</label>
+  </div>
+
+  <div class="left">
+    <input
+      type="number"
+      name="pref-volume"
+      id="pref-volume"
+      max="100"
+      min="0"
+      :value="getStore('vol') || 100"
+      @change="setStore('vol', $event.target.value)" />
+    <label for="pref-volume">Default Volume</label>
+  </div>
+
   <h2>Piped Instance</h2>
   <select
     v-if="instances"
-    :value="get('pipedapi') || 'pipedapi.kavin.rocks'"
-    @change="set('pipedapi', $event.target.value)">
+    :value="getStore('pipedapi') || 'pipedapi.kavin.rocks'"
+    @change="setStore('pipedapi', $event.target.value)">
     <option
       v-for="i in instances"
-      :key="i.name"
+      :key="i.name.replace('Official', 'Default')"
       :value="i.api_url.replace('https://', '').replace('http://', '')">
       {{ i.name }}
     </option>
@@ -53,13 +99,13 @@ function set(key, value) {
       <tbody v-for="i in instances">
         <tr>
           <td>
-            {{ i.name.replaceAll('Official', 'Default') }}
+            {{ i.name.replace('Official', 'Default') }}
           </td>
           <td>
             {{ i.locations.replaceAll(',', '') }}
           </td>
-          <td :class="bi(i.cdn)" :data-active="i.cdn"></td>
-          <td :class="bi(i.up_to_date)" :data-active="i.up_to_date"></td>
+          <td :class="getBool(i.cdn)" :data-active="i.cdn"></td>
+          <td :class="getBool(i.up_to_date)" :data-active="i.up_to_date"></td>
           <td>
             {{ i.version }}
           </td>
@@ -78,20 +124,55 @@ function set(key, value) {
 </template>
 
 <style scoped>
+h2 {
+  margin-top: 1rem;
+}
 h2,
+label,
 footer {
   text-align: center;
 }
-select {
+select,
+input {
   font-size: 1rem;
   margin: 1rem auto;
   padding: 0.5rem 0.75rem;
   outline: none;
   border: none;
+  color: var(--color-text);
   max-width: 20rem;
   border-radius: 0.125rem;
   background-color: var(--color-background-mute);
 }
+input[type='number'] {
+  width: 4.5rem;
+}
+input[type='checkbox'] {
+  appearance: none;
+  border: 0.25rem solid var(--color-background-mute);
+  margin: 0;
+  padding: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+input[type='checkbox']:checked {
+  background: var(--color-foreground);
+}
+label {
+  margin: 0 0.5rem;
+  display: inline-block;
+  line-height: 1rem;
+  font-size: 1rem;
+}
+label[for*='pref-chk'],
+label[for^='pref-chk'] {
+  vertical-align: 0.35rem;
+}
+.left {
+  float: left;
+  margin: 0 auto;
+  padding: 1rem;
+}
 .table-wrap {
   overflow-x: auto;
   margin-bottom: 2rem;
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index e1e38ea..fc21d5c 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,7 +1,10 @@
 <script setup>
 import { ref } from 'vue';
 
-defineProps(['search']);
+defineProps({
+  search: String,
+});
+
 defineEmits(['update-search']);
 
 const show = ref(false);
@@ -14,7 +17,7 @@ const show = ref(false);
     @mouseenter="show = true"
     @mouseleave="show = false">
     <Transition name="fade">
-      <div v-if="show" class="popup">
+      <div v-show="show" class="popup">
         <input
           type="text"
           aria-label="Search Input"
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index a5e0c9e..74a5e13 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { ref, reactive, watch } from 'vue';
+
 import Modal from './Modal.vue';
+
+import { useStore } from '../scripts/util.js';
 import { useListPlaylists } from '../scripts/db.js';
 
 defineProps({
@@ -11,16 +14,8 @@ defineProps({
   lyrics: Boolean,
 });
 
-const emit = defineEmits([
-    'vol',
-    'play',
-    'list',
-    'lyrics',
-    'loop',
-    'save',
-    'change-time',
-  ]),
-  vol = ref(1),
+const emit = defineEmits(['vol', 'play', 'toggle', 'save', 'change-time']),
+  vol = ref(useStore().vol / 100 || 1),
   showme = reactive({
     menu: false,
     pl: false,
@@ -81,10 +76,7 @@ function Save() {
         :class="'bi bi-' + state"
         @click="$emit('play')"></button>
 
-      <div
-        id="statusbar-progress"
-        class="range-wrap"
-        :style="'--fw:' + time + '%;'">
+      <div id="statusbar-progress" class="range-wrap">
         <input
           aria-label="Change Time"
           :value="time"
@@ -122,7 +114,8 @@ function Save() {
         aria-label="More Controls"
         @click="
           showme.menu = !showme.menu;
-          show ?? $emit('list', 'showplaylist');
+          show ? $emit('toggle', 'showplaylist') : '';
+          lyrics ? $emit('toggle', 'showlyrics') : '';
         "></button>
       <div id="menu" v-if="showme.menu" class="popup">
         <button
@@ -136,17 +129,17 @@ function Save() {
           title="Current Playlist"
           aria-label="Current Playlist"
           :class="'bi bi-music-note-list ' + show"
-          @click="$emit('list', 'showplaylist')"></button>
+          @click="$emit('toggle', 'showplaylist')"></button>
         <button
           id="btn-lyrics"
           :class="'bi bi-file-music ' + lyrics"
-          @click="$emit('lyrics', 'showlyrics')"></button>
+          @click="$emit('toggle', 'showlyrics')"></button>
         <button
           id="loop-btn"
           title="Loop"
           aria-label="Loop"
           :class="'bi bi-infinity ' + loop"
-          @click="$emit('loop', 'loop')"></button>
+          @click="$emit('toggle', 'loop')"></button>
       </div>
     </div>
   </div>
@@ -206,7 +199,8 @@ input[type='range'] {
   width: var(--h);
   height: var(--w);
   appearance: none;
-  -webkit-appearence: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
   border: none;
   border-radius: 5rem;
   background: transparent;
@@ -217,6 +211,8 @@ input[type='range'] {
 input[type='range']:focus {
   outline: none;
 }
+
+/* Webkit */
 input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
@@ -230,7 +226,7 @@ input[type='range']:hover::-webkit-slider-thumb,
   height: 1rem;
   width: 1rem;
   border-radius: 50%;
-  margin-top: -0.45rem;
+  margin-top: -0.4rem;
 }
 input[type='range']::-webkit-slider-runnable-track {
   height: 100%;
@@ -239,6 +235,33 @@ input[type='range']::-webkit-slider-runnable-track {
 #vol input[type='range']::-webkit-slider-runnable-track {
   height: 0.1rem;
 }
+
+/* Moz */
+input[type='range']::-moz-range-thumb {
+  -moz-appearance: none;
+  appearance: none;
+  opacity: 0;
+  border: none;
+  outline: none;
+  transition: opacity 0.4s ease;
+}
+input[type='range']:hover::-moz-range-thumb,
+#vol input[type='range']::-moz-range-thumb {
+  background-color: var(--color-foreground);
+  opacity: 1;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 50%;
+  margin-top: -0.45rem;
+}
+input[type='range']::-moz-range-track {
+  height: 100%;
+  background-color: var(--color-border);
+}
+#vol input[type='range']::-moz-range-track {
+  height: 0.1rem;
+}
+
 .range-wrap {
   --fw: 0%;
   display: flex;
@@ -264,8 +287,16 @@ input[type='range']::-webkit-slider-runnable-track {
   top: 0;
 }
 #statusbar-progress {
+  --fw: v-bind('time + "%"');
   width: 50vw;
   min-width: 200px;
   max-width: 500px;
 }
+
+@media (max-width: 500px) {
+  #menu {
+    left: initial;
+    right: -0.5rem;
+  }
+}
 </style>
diff --git a/src/scripts/db.js b/src/scripts/db.js
index c5a1e89..3f25ca1 100644
--- a/src/scripts/db.js
+++ b/src/scripts/db.js
@@ -16,6 +16,7 @@ export function useSetupDB() {
     req.onerror = e => {
       console.log('Please let me use indexedDB!!');
       console.log(e);
+      alert(e.target.error.message);
     };
 
     req.onsuccess = e => {
diff --git a/src/scripts/util.js b/src/scripts/util.js
index e781bd9..cef20ee 100644
--- a/src/scripts/util.js
+++ b/src/scripts/util.js
@@ -1,9 +1,19 @@
-export function usePrefs(key) {
-  if (localStorage) {
-    if (localStorage.get(key)) return true;
-    else return false;
-  } else return false;
-}
+export const useStore = () => {
+  try {
+    return window.localStorage;
+  } catch (err) {
+    alert(err);
+
+    const error = i => {
+      alert("Failed to Access '" + i + "' Please Enable localStorage.");
+    };
+
+    return {
+      getItem: error,
+      setItem: error,
+    };
+  }
+};
 
 export function useLazyLoad() {
   let lazyElems;