Renamed cider-ui-tests to cider-ui, starting skeleton for settings page

resources/cider-ui-tests/views/pages/settings.ejs

@@ -1 +0,0 @@
-<h1 class="header-text">Settings</h1>

resources/cider-ui/index.js

@@ -189,7 +189,11 @@ const app = new Vue({
             this.mk.authorize()
             this.$forceUpdate()
             this.mk.privateEnabled = true
-            this.platform = ipcRenderer.sendSync('cider-platform');
+            try {
+                this.platform = ipcRenderer.sendSync('cider-platform');
+            }catch(e){
+                this.platform = "dev"
+            }
             // Set profile name
             this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "")
             // API Fallback

resources/cider-ui/style.less

@@ -2424,4 +2424,68 @@ div#captions {
 
 .semibold{
   font-weight: 500;
-}
+}
+
+/* Switch Checkbox */
+input[type=checkbox][switch] {
+  width: 38px;
+  appearance: none;
+  border-radius: 32px;
+  height: 24px;
+  zoom: 1;
+  top: 0;
+  cursor: pointer;
+  left: 0;
+  position: relative;
+  transform: scale(1);
+  background: rgb(142 142 147 / 100%);
+  padding: 0;
+  margin: 0;
+}
+
+input[type=checkbox][switch]:focus,
+input[type=checkbox][switch]:active {
+  outline: none;
+}
+
+input[type=checkbox][switch]:checked {
+  background: var(--keyColor);
+  border: 0 solid var(--keyColor);
+  mix-blend-mode: unset;
+}
+
+input[type=checkbox][switch]::before {
+  background: white;
+  width: 26px;
+  height: 26px;
+  top: -1px;
+  left: -1px;
+  position: absolute;
+  content: ' ';
+  border-radius: 32px;
+  transition: .10s left var(--appleEase);
+  transform: scale(.75);
+}
+
+
+input[type=checkbox][switch]:checked::before {
+  background: white;
+  top: -1px;
+  left: 13px;
+  transition: .10s left var(--appleEase);
+  transform: scale(.75);
+}
+
+input[type=checkbox][switch]:disabled::before {
+  opacity: .5;
+}
+
+input[type=checkbox][switch]:active::before {
+  left: 13px;
+}
+
+input[type=checkbox][switch]:checked:active::before {
+  left: -1px;
+}
+
+/* End Switch Checkbox */

resources/cider-ui/views/main.ejs

@@ -188,7 +188,7 @@
                             <button class="usermenu-item" @click="window.open('https://discord.gg/CezHYdXHEM')">
                                 Discord
                             </button>
-                            <button class="usermenu-item">
+                            <button class="usermenu-item" @click="page = 'settings'">
                                 Settings
                             </button>
                             <button class="usermenu-item" @click="mk.unauthorize()">
@@ -345,6 +345,12 @@
                         </div>
                     </template>
                 </transition>
+                <!-- Settings -->
+                <transition name="wpfade">
+                    <template v-if="page == 'settings'">
+                        <cider-settings></cider-settings>
+                    </template>
+                </transition>
                 <!-- Search -->
                 <transition name="wpfade">
                     <template v-if="page == 'search'">
@@ -417,6 +423,9 @@
 <!-- Browse -->
 <%- include('pages/browse') %>
 
+<!-- Settings -->
+<%- include('pages/settings') %>
+
 <!-- Listen Now -->
 <%- include('pages/listen_now') %>
 

resources/cider-ui/views/pages/settings.ejs

@@ -0,0 +1,178 @@
+<script type="text/x-template" id="cider-settings">
+    <div class="content-inner settings-page">
+        <h1 class="header-text">Settings <small>(non functional, stay tuned)</small></h1>
+        <div class="md-option-container">
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Audio Quality
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select" style="width:180px;">
+                        <option value="990">Extreme</option>
+                        <option value="256">High</option>
+                        <option value="64">Low</option>
+                    </select>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Seamless Audio Transitions
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <input type="checkbox" switch/>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Animated Artwork
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select">
+                        <option value="0">Always</option>
+                        <option value="1">Limit to pages and special entries</option>
+                        <option value="2">Disable Everywhere</option>
+                    </select>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Discord Rich Presence
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select">
+                        <option value="0">Disabled</option>
+                        <option value="1">Display as 'Cider'</option>
+                        <option value="2">Display as 'Apple Music'</option>
+                    </select>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Enable AudioContext Functionality
+                    <br>
+                    <small>Enabling AudioContext functionality will allow for extended audio features like Equalizers and Visualizers, however on some systems this may cause stuttering in audio tracks.</small>
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <input type="checkbox" switch/>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    LastFM Scrobbling
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <input type="checkbox" switch/>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    LastFM Scrobble Delay
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <input type="checkbox" switch/>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Theme
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select">
+                        <option value="0">Cider</option>
+                    </select>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Theme Options
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <button class="btn">Theme Options</button>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Scrollbars
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select">
+                        <option value="0">Show on hover</option>
+                        <option value="1">Always show</option>
+                        <option value="2">Hidden</option>
+                    </select>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Refresh Rate
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select">
+                        <option value='0'>Automatic</option>
+                        <option value='30'>30</option>
+                        <option value='60'>60</option>
+                        <option value='144'>144</option>
+                        <option value='175'>175</option>
+                        <option value='240'>240</option>
+                        <option value='360'>30</option>
+                    </select>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Enable Musixmatch Lyrics
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <input type="checkbox" switch/>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Musixmatch Preferred Language
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <input type="checkbox" switch/>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Close Button Behavior
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select">
+                        <option value='0'>Minimize to system tray</option>
+                        <option value='1'>Minimize to taskbar ? dock</option>
+                        <option value='2'>Quit Cider</option>
+                    </select>
+                </div>
+            </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Open Cider on Startup
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select">
+                        <option value='0'>Never</option>
+                        <option value='1'>Always</option>
+                        <option value='2'>Always, minimized</option>
+                        <option value='2'>Always, hidden in tray</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+
+<script>
+    Vue.component('cider-settings', {
+        template: "#cider-settings",
+        props: [],
+        data: function () {
+            return {
+            }
+        },
+        methods: {
+
+        }
+    })
+</script>

resources/functions/cider-base.js

@@ -152,7 +152,7 @@ const CiderBase = {
     async InitWebServer() {
         const webRemotePort = await getPort({port : 9000});
         const webapp = express();
-        const webRemotePath = path.join(__dirname, '../cider-ui-tests/');
+        const webRemotePath = path.join(__dirname, '../cider-ui/');
         webapp.set("views", path.join(webRemotePath, "views"));
         webapp.set("view engine", "ejs");