diff --git a/src/renderer/views/components/animatedartwork-view.ejs b/src/renderer/views/components/animatedartwork-view.ejs
index ef091ee3..8236252f 100644
--- a/src/renderer/views/components/animatedartwork-view.ejs
+++ b/src/renderer/views/components/animatedartwork-view.ejs
@@ -43,7 +43,7 @@
                         this.hls.detachMedia();
                     } else {
 
-                        this.hls = new CiderHls(config);
+                        this.hls = new Hls(config);
                     }
                     // bind them together
                     if (this.$refs.video) {
@@ -59,7 +59,7 @@
                         }
                         
                         this.hls.attachMedia(this.$refs.video);
-                        this.hls.loadSource(this.video);
+                        this.hls.loadSource(this.video, p);
                         let u = this.hls;
                         var quality = app.cfg.visual.animated_artwork_qualityLevel;
                         setTimeout(() => {                       
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 6c7c192f..fa72d902 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -2,123 +2,133 @@
 <html lang="en">
 
 <head>
-    <link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin/>
-    <link rel="preconnect" href="https://api.music.apple.com/" crossorigin/>
-    <link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin/>
-    <link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin/>
-    <link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin/>
-    <link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin/>
-    <link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin/>
-    <link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin/>
-    <link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/>
+    <link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin />
+    <link rel="preconnect" href="https://api.music.apple.com/" crossorigin />
+    <link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin />
+    <link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin />
+    <link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin />
+    <link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin />
+    <link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin />
+    <link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin />
+    <link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin />
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Cider</title>
-    <link rel="<%- (env.dev ? "stylesheet" : "stylesheet/less") %>" type="text/css" href="style.<%- (env.dev ? "css" : "less") %>"/>
-<!--    <link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>-->
-    <script src="./lib/less.js"></script>
-    <script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js") %>"></script>
-    <script src="./lib/smoothscroll.js"></script>
-    <link rel="manifest" href="./manifest.json?v=2">
-    <script src="https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js"></script>
-    <script src="hlscider.js"></script>
-    <script src="./lib/jquery-3.2.1.slim.min.js"></script>
-    <script src="./lib/popper.min.js"></script>
-    <script src="./lib/bootstrap.min.js"></script>
-    <script src="./lib/bootbox.min.js"></script>
-    <script src="./lib/notyf.min.js"></script>
-    <script src="./lib/marked.js"></script>
-    <script src="./lib/velocity.min.js"></script>
-    <script src="./lib/fast-plural-rules.js"></script>
-    <script src="./lib/resonance-audio.min.js"></script>
-    <script src="./lib/stackblur.min.js"></script>
+    <link rel="<%- (env.dev ? " stylesheet" : "stylesheet/less" ) %>" type="text/css" href="style.<%- (env.dev ? "css"
+        : "less" ) %>"/>
+        <!--    <link rel="stylesheet/less" type="text/css" id="userTheme" href="themes/default.less"/>-->
+        <script src="./lib/less.js"></script>
+        <script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js" ) %>"></script>
+        <script src="./lib/smoothscroll.js"></script>
+        <link rel="manifest" href="./manifest.json?v=2">
+        <script src="https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js"></script>
+        <!-- <script src="hlscider.js"></script> -->
+        <script src="./lib/jquery-3.2.1.slim.min.js"></script>
+        <script src="./lib/popper.min.js"></script>
+        <script src="./lib/bootstrap.min.js"></script>
+        <script src="./lib/bootbox.min.js"></script>
+        <script src="./lib/notyf.min.js"></script>
+        <script src="./lib/marked.js"></script>
+        <script src="./lib/velocity.min.js"></script>
+        <script src="./lib/fast-plural-rules.js"></script>
+        <script src="./lib/resonance-audio.min.js"></script>
+        <script src="./lib/stackblur.min.js"></script>
 
-    <style>
-        #LOADER {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: #1E1E1E;
-            z-index: 99999;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        #LOADER > svg {
-            width: 128px;
-        }
-
-        @media (prefers-color-scheme: light) {
+        <style>
             #LOADER {
-                background-color: #eee;
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: #1E1E1E;
+                z-index: 99999;
+                display: flex;
+                justify-content: center;
+                align-items: center;
             }
-        }
-    </style>
+
+            #LOADER>svg {
+                width: 128px;
+            }
+
+            @media (prefers-color-scheme: light) {
+                #LOADER {
+                    background-color: #eee;
+                }
+            }
+        </style>
 </head>
 
 <body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>"
-      platform="<%= env.platform %>">
-      <script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js") %>"></script>
-      <script src="./lib/vue-horizontal.js"></script>
-      <script src="./lib/bootstrap-vue.min.js"></script>
-      <script src="./lib/vuex.min.js"></script>
-      <script src="./lib/sortable.min.js"></script>
-      <script src="./lib/vue-observe-visibility.min.js"></script>
-      <script src="./lib/vuedraggable.umd.min.js"></script>
-      <script src="./lib/quasar/quasar.umd.min.js"></script>
-      <script type="module" src="./main/app.js"></script>
-      
-<div id="LOADER">
-    <%- include("../assets/cider-round.svg") %>
-</div>
-<div id="app" :class="getAppClasses()"
-     v-if="appVisible"
-     :window-state="chrome.windowState"
-     :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)"
-     :window-style="cfg.visual.directives.windowLayout">
-    <transition name="fsModeSwitch">
-        <div id="app-main" v-show="appMode == 'player'">
-            <%- include('app/chrome-top'); %>
-            <%- include('app/app-navigation'); %>
-            <%- include('app/chrome-bottom'); %>
-        </div>
-    </transition>
-    <transition name="fsModeSwitch">
-        <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
-            <fullscreen-view :image="currentArtUrlRaw" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics"
-                             :richlyrics="richlyrics"></fullscreen-view>
-        </div>
-    </transition>
-    <transition name="fsModeSwitch">
-        <div class="fullscreen-view-container" v-if="appMode == 'mini'">
-            <mini-view :image="currentArtUrlRaw" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics" :richlyrics="richlyrics">
-            </mini-view>
-        </div>
-    </transition>
-    <transition name="fsModeSwitch">
-        <div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
-            <cider-oobe></cider-oobe>
-        </div>
-    </transition>
-    <%- include('app/panels'); %>
-    <div class="cursor" v-if="chrome.showCursor"></div>
-</div>
+    platform="<%= env.platform %>">
+    <script src="<%- (env.dev ? " ./lib/vue.js" : "./lib/vue.dev.js" ) %>"></script>
+    <script src="./lib/vue-horizontal.js"></script>
+    <script src="./lib/bootstrap-vue.min.js"></script>
+    <script src="./lib/vuex.min.js"></script>
+    <script src="./lib/sortable.min.js"></script>
+    <script src="./lib/vue-observe-visibility.min.js"></script>
+    <script src="./lib/vuedraggable.umd.min.js"></script>
+    <script>
+        window.quasarConfig = {
+            brand: {
+                primary: '#fc3c44'
+            },
+            config: {
+                dark: true
+            },
+            loadingBar: { skipHijack: true }
+        }
+    </script>
+    <script src="./lib/quasar/quasar.umd.min.js"></script>
+    <script type="module" src="./main/app.js"></script>
 
-<% for(var i = 0; i < Object.keys(env.components).length ; i++) { %>
-    <%- include(env.components[i]); %>
-<% } %>
+    <div id="LOADER">
+        <%- include("../assets/cider-round.svg") %>
+    </div>
+    <div id="app" :class="getAppClasses()" v-if="appVisible" :window-state="chrome.windowState" :style="getAppStyle()"
+        :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
+        <transition name="fsModeSwitch">
+            <div id="app-main" v-show="appMode == 'player'">
+                <%- include('app/chrome-top'); %>
+                    <%- include('app/app-navigation'); %>
+                        <%- include('app/chrome-bottom'); %>
+            </div>
+        </transition>
+        <transition name="fsModeSwitch">
+            <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
+                <fullscreen-view :image="currentArtUrlRaw" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics"
+                    :richlyrics="richlyrics"></fullscreen-view>
+            </div>
+        </transition>
+        <transition name="fsModeSwitch">
+            <div class="fullscreen-view-container" v-if="appMode == 'mini'">
+                <mini-view :image="currentArtUrlRaw" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics"
+                    :richlyrics="richlyrics">
+                </mini-view>
+            </div>
+        </transition>
+        <transition name="fsModeSwitch">
+            <div class="fullscreen-view-container oobe" v-if="appMode == 'oobe'">
+                <cider-oobe></cider-oobe>
+            </div>
+        </transition>
+        <%- include('app/panels'); %>
+            <div class="cursor" v-if="chrome.showCursor"></div>
+    </div>
 
-<script async
-        src="<%- (env.useV3 ? 'https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js' : 'https://api.cider.sh/musickit.js') %>"
-        data-web-components>
-</script>
-<script src="index.js?v=1"></script>
+    <% for(var i=0; i < Object.keys(env.components).length ; i++) { %>
+        <%- include(env.components[i]); %>
+            <% } %>
 
-<script type="text/x-template" id="am-musiccovershelf">
+                <script async
+                    src="<%- (env.useV3 ? 'https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js' : 'https://api.cider.sh/musickit.js') %>"
+                    data-web-components>
+                    </script>
+                <script src="index.js?v=1"></script>
+
+                <script type="text/x-template" id="am-musiccovershelf">
     <h1>{{ component.attributes.title.stringForDisplay }}</h1>
 </script>
 
